From 78ae0183203d1f3628d19c61e4ad10d6880c5174 Mon Sep 17 00:00:00 2001
From: "LAPTOP-CNV4CMCJ\\cheng" <1315228474@qq.com>
Date: Sat, 19 Nov 2022 00:40:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=80=80=E6=AC=BE=E5=88=97?=
=?UTF-8?q?=E8=A1=A8=E9=A1=B5=20=E8=B0=83=E6=95=B4=E5=95=86=E5=93=81?=
=?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E7=9A=84tab=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
yudao-ui-admin/src/router/index.js | 6 +
.../src/views/mall/trade/order/detail.vue | 10 +
.../src/views/mall/trade/order/index.vue | 146 ++++-----
.../views/mall/trade/orderrefund/index.vue | 289 ++++++++++++++++++
4 files changed, 378 insertions(+), 73 deletions(-)
create mode 100644 yudao-ui-admin/src/views/mall/trade/orderrefund/index.vue
diff --git a/yudao-ui-admin/src/router/index.js b/yudao-ui-admin/src/router/index.js
index 309a7a3b8..133eed186 100644
--- a/yudao-ui-admin/src/router/index.js
+++ b/yudao-ui-admin/src/router/index.js
@@ -216,6 +216,12 @@ export const constantRoutes = [
hidden: true,
meta: { title: '订单详情' },
component: (resolve) => require(['@/views/mall/trade/order/detail'], resolve)
+ },
+ {
+ path: '/mall/trade/orderrefund',
+ name: '退款维权',
+ meta: { title: '退款维权' },
+ component: (resolve) => require(['@/views/mall/trade/orderrefund'], resolve)
}
]
}
diff --git a/yudao-ui-admin/src/views/mall/trade/order/detail.vue b/yudao-ui-admin/src/views/mall/trade/order/detail.vue
index 4e50d8f41..13a6c3dee 100644
--- a/yudao-ui-admin/src/views/mall/trade/order/detail.vue
+++ b/yudao-ui-admin/src/views/mall/trade/order/detail.vue
@@ -195,6 +195,16 @@ export default {
}
],
goodsList: [ // 包裹下的商品列表
+ {
+ name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
+ count: 6,
+ imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+ },
+ {
+ name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
+ count: 6,
+ imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+ },
{
name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
count: 6,
diff --git a/yudao-ui-admin/src/views/mall/trade/order/index.vue b/yudao-ui-admin/src/views/mall/trade/order/index.vue
index 9b9da0565..91e81da74 100644
--- a/yudao-ui-admin/src/views/mall/trade/order/index.vue
+++ b/yudao-ui-admin/src/views/mall/trade/order/index.vue
@@ -63,70 +63,71 @@
</el-row>
<!-- tab切换-->
- <el-radio-group v-model="activeTabName">
- <el-radio-button v-for="tabPane in tabPanes" :label="tabPane.label">{{tabPane.text}}</el-radio-button>
- </el-radio-group>
-
- <!-- table -->
- <el-table :data="tableData" :show-header="false" class="order-table">
- <el-table-column label="订单信息">
- <template slot-scope="{ row }">
- <el-row>
- <el-col :span="5">
- 订单号：{{row.orderNo}}
- <el-popover title="支付流水号：" :content="row.payNo" ref="popover" placement="right" width="200" trigger="click"/>
- <el-button type="text" v-popover:popover>更多</el-button>
- </el-col>
- <el-col :span="5">下单时间：{{row.time}}</el-col>
- <el-col :span="4">订单来源：{{row.orderSource}}</el-col>
- <el-col :span="4">支付方式：{{row.payWay}}</el-col>
- <el-col :span="6" align="right" type="flex">
- <el-button type="text">关闭订单</el-button>
- <el-button type="text">修改地址</el-button>
- <el-button type="text">调整价格</el-button>
- <el-dropdown style="margin-left: 10px">
- <el-button type="text">
- 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
- </el-button>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item>
- <el-dropdown-item><el-button type="text" @click="goToDetail(row)">详情</el-button></el-dropdown-item>
- <el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </el-col>
- </el-row>
- <!-- 订单下的商品 -->
- <el-table :data="row.goods" border>
- <el-table-column label="商品" prop="goods" header-align="center" width="360">
- <template slot-scope="{ row, $index }">
- <div class="goods-info">
- <img :src="row.picture"/>
- <span class="ellipsis-2" :title="row.name">{{row.name}}</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="单价(元)/数量" prop="fee" align="center" width="115">
- <template slot-scope="{ row }">
- <div>{{row.price}}</div>
- <div>{{row.count}}</div>
- </template>
- </el-table-column>
- <el-table-column label="维权" prop="safeguard" align="center" width="115"/>
- <el-table-column label="实付金额(元)" prop="amount" align="center" width="115"/>
- <el-table-column label="买家/收货人" prop="buyer" header-align="center" width="360">
- <template slot-scope="{ row }">
- <div>{{row.buyer}}</div>
- <div>{{row.receiver}}{{row.tel}}</div>
- <div class="ellipsis-2" :title="row.address">{{row.address}}</div>
- </template>
- </el-table-column>
- <el-table-column label="配送方式" prop="sendWay" align="center" width="115"/>
- <el-table-column label="交易状态" prop="status" align="center"/>
- </el-table>
- </template>
- </el-table-column>
- </el-table>
+ <el-tabs v-model="activeTabName" type="card">
+ <el-tab-pane v-for="tabPane in tabPanes" :label="tabPane.text" :name="tabPane.name">
+ <!-- table -->
+ <el-table :data="tableData" :show-header="false" class="order-table">
+ <el-table-column>
+ <template slot-scope="{ row }">
+ <el-row type="flex" align="middle">
+ <el-col :span="5">
+ 订单号：{{row.orderNo}}
+ <el-popover title="支付流水号：" :content="row.orderNo" placement="right" width="200" trigger="click">
+ <el-button slot="reference" type="text">更多</el-button>
+ </el-popover>
+ </el-col>
+ <el-col :span="5">下单时间：{{row.time}}</el-col>
+ <el-col :span="4">订单来源：{{row.orderSource}}</el-col>
+ <el-col :span="4">支付方式：{{row.payWay}}</el-col>
+ <el-col :span="6" align="right">
+ <el-button type="text">关闭订单</el-button>
+ <el-button type="text">修改地址</el-button>
+ <el-button type="text">调整价格</el-button>
+ <el-dropdown style="margin-left: 10px">
+ <el-button type="text">
+ 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
+ </el-button>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item>
+ <el-dropdown-item><el-button type="text" @click="goToDetail(row)">详情</el-button></el-dropdown-item>
+ <el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </el-col>
+ </el-row>
+ <!-- 订单下的商品 -->
+ <el-table :data="row.goods" border :show-header="true">
+ <el-table-column label="商品" prop="goods" header-align="center" width="auto" min-width="300">
+ <template slot-scope="{ row, $index }">
+ <div class="goods-info">
+ <img :src="row.picture"/>
+ <span class="ellipsis-2" :title="row.name">{{row.name}}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="单价(元)/数量" prop="fee" align="center" width="115">
+ <template slot-scope="{ row }">
+ <div>{{row.price}}</div>
+ <div>{{row.count}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column label="维权" prop="safeguard" align="center" width="100"/>
+ <el-table-column label="实付金额(元)" prop="amount" align="center" width="100"/>
+ <el-table-column label="买家/收货人" prop="buyer" header-align="center" width="auto" min-width="300">
+ <template slot-scope="{ row }">
+ <div>{{row.buyer}}</div>
+ <div>{{row.receiver}}{{row.tel}}</div>
+ <div class="ellipsis-2" :title="row.address">{{row.address}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column label="配送方式" prop="sendWay" align="center" width="100"/>
+ <el-table-column label="交易状态" prop="status" align="center" width="100"/>
+ </el-table>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
</div>
</template>
@@ -234,14 +235,14 @@
},
activeTabName: 'all',
tabPanes: [
- { text: '全部', label: 'all' },
- { text: '待支付', label: 'toBePay' },
- { text: '待发货', label: 'toBeSend' },
- { text: '已发货', label: 'send' },
- { text: '已收货', label: 'received' },
- { text: '已完成', label: 'finished' },
- { text: '已关闭', label: 'closed' },
- { text: '退款中', label: 'refund' }
+ { text: '全部', name: 'all' },
+ { text: '待支付', name: 'toBePay' },
+ { text: '待发货', name: 'toBeSend' },
+ { text: '已发货', name: 'send' },
+ { text: '已收货', name: 'received' },
+ { text: '已完成', name: 'finished' },
+ { text: '已关闭', name: 'closed' },
+ { text: '退款中', name: 'refund' }
],
tableData: [
{
@@ -333,7 +334,6 @@
<style lang="scss" scoped>
::v-deep .order-table{
- margin-top: 20px;
border-bottom: none;
&::before{
height: 0;
diff --git a/yudao-ui-admin/src/views/mall/trade/orderrefund/index.vue b/yudao-ui-admin/src/views/mall/trade/orderrefund/index.vue
new file mode 100644
index 000000000..3e1029bba
--- /dev/null
+++ b/yudao-ui-admin/src/views/mall/trade/orderrefund/index.vue
@@ -0,0 +1,289 @@
+<template>
+ <div class="app-container">
+ <!-- 搜索工作栏 -->
+ <el-row :gutter="20">
+ <el-form :model="queryParams" label-width="68px" size="small">
+ <el-col :span="6" :xs="24">
+ <el-form-item label="商品名称">
+ <el-input v-model="queryParams.name" style="width: 240px"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6" :xs="24">
+ <el-form-item label="订单编号">
+ <el-input v-model="queryParams.No" style="width: 240px"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6" :xs="24">
+ <el-form-item label="退款编号">
+ <el-input v-model="queryParams.refundNo" style="width: 240px"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6" :xs="24">
+ <el-form-item label="退款状态">
+ <el-select v-model="queryParams.refundStatus" clearable style="width: 240px">
+ <el-option v-for="dict in dicData.refundStatus" v-bind="dict" :key="dict.value"/>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6" :xs="24">
+ <el-form-item label="退款方式">
+ <el-select v-model="queryParams.refundWay" clearable style="width: 240px">
+ <el-option v-for="dict in dicData.refundWay" v-bind="dict" :key="dict.value"/>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6" :xs="24">
+ <el-form-item label="维权类型">
+ <el-select v-model="queryParams.refundType" clearable style="width: 240px">
+ <el-option v-for="dict in dicData.refundType" v-bind="dict" :key="dict.value"/>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6" :xs="24">
+ <el-form-item label="下单时间">
+ <el-date-picker v-model="queryParams.date" type="daterange" range-separator="至"
+ start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="rangePickerOptions" style="width: 240px"/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6" :xs="24" style="line-height: 32px">
+ <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
+ <el-button icon="el-icon-refresh" size="mini">重置</el-button>
+ <el-button icon="el-icon-document" size="mini">导出订单</el-button>
+ </el-col>
+ </el-form>
+ </el-row>
+
+ <!-- tab切换-->
+ <el-tabs v-model="activeTabName" type="card">
+ <el-tab-pane v-for="tabPane in tabPanes" :label="tabPane.text" :name="tabPane.name">
+ <!-- table -->
+ <el-table :data="tableData" :show-header="false" class="table-wrapper">
+ <el-table-column>
+ <template slot-scope="{ row }">
+ <div class="table-header">
+ 退款编号：{{row.tkbh}}
+ <el-button type="text" style="margin-left: 10px">
+ 订单编号：{{row.ddbh}}
+ </el-button>
+ </div>
+ <!-- 订单下的商品 -->
+ <el-table :data="row.goods" border>
+ <el-table-column label="商品信息" prop="spxx" header-align="center" width="auto" min-width="300">
+ <div slot-scope="{ row, $index }" class="goods-info">
+ <img :src="row.img"/>
+ <span class="ellipsis-2" :title="row.name">{{row.name}}</span>
+ </div>
+ </el-table-column>
+ <el-table-column label="订单金额" prop="ddje" align="center" width="100"/>
+ <el-table-column label="买家" prop="mj" align="center" width="100"/>
+ <el-table-column label="退款金额" prop="tkje" align="center" width="100"/>
+ <el-table-column label="申请时间" prop="sqsj" align="center" width="180"/>
+ <el-table-column label="退款状态" prop="tkzt" align="center" width="100"/>
+ <el-table-column label="操作" align="center" width="100" fixed="right" >
+ <el-button slot-scope="{row}" type="text">详情</el-button>
+ </el-table-column>
+ </el-table>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+</template>
+
+<script>
+const dicData = {
+ refundStatus: [
+ { label: '全部', value: 'qb' },
+ { label: '申请维权', value: 'sqwq' },
+ { label: '待转账', value: 'dzz' },
+ { label: '维权结束', value: 'wqjs' },
+ { label: '买家待退货', value: 'mjdth' },
+ { label: '卖家待收货', value: 'mjdsh' },
+ { label: '卖家已收货', value: 'mjysh' },
+ { label: '卖家拒绝', value: 'mjjj' }
+ ],
+ refundWay: [
+ { label: '全部', value: 'qb' },
+ { label: '仅退款', value: 'jtk' },
+ { label: '退货退款', value: 'thtk' }
+ ],
+ refundType: [
+ { label: '全部', value: 'qb' },
+ { label: '订单退款', value: 'ddtk' },
+ { label: '售后退款', value: 'shtk' }
+ ]
+}
+const rangePickerOptions = {
+ shortcuts: [{
+ text: '最近一周',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '最近一个月',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '最近三个月',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+ picker.$emit('pick', [start, end]);
+ }
+ }]
+}
+export default {
+ name: "index",
+ data () {
+ return {
+ dicData,
+ rangePickerOptions,
+ queryParams: {},
+ activeTabName: 'all',
+ tabPanes: [
+ { text: '全部', name: 'all' },
+ { text: '申请维权', name: 'sqwq' },
+ { text: '待转账', name: 'dzz' },
+ { text: '维权结束', name: 'wqjs' },
+ { text: '买家待退货', name: 'mjdth' },
+ { text: '卖家待收货', name: 'mjdsh' },
+ { text: '卖家已收货', name: 'mjysh' },
+ { text: '卖家拒绝', name: 'mjjj' }
+ ],
+ tableData: [
+ {
+ tkbh: '20221026220424001',
+ ddbh: '20221026220424001',
+ goods: [
+ {
+ name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
+ img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
+ ddje: '199',
+ mj: '张三',
+ tkje: 460,
+ sqsj: '2022-11-19',
+ tkzt: '申请维权(仅退款)'
+ },
+ {
+ name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
+ img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
+ ddje: '199',
+ mj: '张三',
+ tkje: 460,
+ sqsj: '2022-11-19',
+ tkzt: '申请维权(仅退款)'
+ }
+ ]
+ },
+ {
+ tkbh: '20221026220424001',
+ ddbh: '20221026220424001',
+ goods: [
+ {
+ name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
+ img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
+ ddje: '199',
+ mj: '张三',
+ tkje: 460,
+ sqsj: '2022-11-19',
+ tkzt: '申请维权(仅退款)'
+ },
+ {
+ name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
+ img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
+ ddje: '199',
+ mj: '张三',
+ tkje: 460,
+ sqsj: '2022-11-19',
+ tkzt: '申请维权(仅退款)'
+ }
+ ]
+ },
+ {
+ tkbh: '20221026220424001',
+ ddbh: '20221026220424001',
+ goods: [
+ {
+ name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
+ img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
+ ddje: '199',
+ mj: '张三',
+ tkje: 460,
+ sqsj: '2022-11-19',
+ tkzt: '申请维权(仅退款)'
+ },
+ {
+ name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
+ img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
+ ddje: '199',
+ mj: '张三',
+ tkje: 460,
+ sqsj: '2022-11-19',
+ tkzt: '申请维权(仅退款)'
+ }
+ ]
+ }
+ ]
+ }
+ },
+ methods: {
+ goToDetail (row) {
+ this.$router.push({ path: '/mall/trade/order/detail', query: { orderNo: row.orderNo }})
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ ::v-deep .table-wrapper{
+ border-bottom: none;
+ &::before{
+ height: 0;
+ }
+ .table-header{
+ line-height: 36px;
+ }
+ .el-table__row{
+ .el-table__cell{
+ border-bottom: none;
+ .cell{
+ .el-table {
+ .el-table__row{
+ >.el-table__cell{
+ .goods-info{
+ display: flex;
+ img{
+ margin-right: 10px;
+ width: 60px;
+ height: 60px;
+ border: 1px solid #e2e2e2;
+ }
+ }
+ .ellipsis-2{
+ display: -webkit-box;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: normal;
+ -webkit-line-clamp: 2; /* 要显示的行数 */
+ -webkit-box-orient: vertical;
+ word-break: break-all;
+ line-height: 22px !important;
+ max-height: 44px !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+</style>