新增退款列表页 调整商品列表页的tab切换

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)
       }
     ]
   }

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,

yudao-ui-admin/src/views/mall/trade/order/index.vue

@@ -63,24 +63,23 @@
     </el-row>
 
     <!-- tab切换-->
-    <el-radio-group v-model="activeTabName">
+    <el-tabs v-model="activeTabName" type="card">
-      <el-radio-button v-for="tabPane in tabPanes" :label="tabPane.label">{{tabPane.text}}</el-radio-button>
+      <el-tab-pane v-for="tabPane in tabPanes" :label="tabPane.text" :name="tabPane.name">
-    </el-radio-group>
-
         <!-- table -->
         <el-table :data="tableData" :show-header="false" class="order-table">
-      <el-table-column label="订单信息">
+          <el-table-column>
             <template slot-scope="{ row }">
-          <el-row>
+              <el-row type="flex" align="middle">
                 <el-col :span="5">
                   订单号：{{row.orderNo}}
-              <el-popover title="支付流水号：" :content="row.payNo" ref="popover" placement="right" width="200" trigger="click"/>
+                  <el-popover title="支付流水号：" :content="row.orderNo" placement="right" width="200" trigger="click">
-              <el-button type="text" v-popover:popover>更多</el-button>
+                    <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" type="flex">
+                <el-col :span="6" align="right">
                   <el-button type="text">关闭订单</el-button>
                   <el-button type="text">修改地址</el-button>
                   <el-button type="text">调整价格</el-button>
@@ -97,8 +96,8 @@
                 </el-col>
               </el-row>
               <!-- 订单下的商品 -->
-          <el-table :data="row.goods" border>
+              <el-table :data="row.goods" border :show-header="true">
-            <el-table-column label="商品" prop="goods" header-align="center" width="360">
+                <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"/>
@@ -112,21 +111,23 @@
                     <div>{{row.count}}</div>
                   </template>
                 </el-table-column>
-            <el-table-column label="维权" prop="safeguard" align="center" width="115"/>
+                <el-table-column label="维权" prop="safeguard" align="center" width="100"/>
-            <el-table-column label="实付金额(元)" prop="amount" align="center" width="115"/>
+                <el-table-column label="实付金额(元)" prop="amount" align="center" width="100"/>
-            <el-table-column label="买家/收货人" prop="buyer" header-align="center" width="360">
+                <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="115"/>
+                <el-table-column label="配送方式" prop="sendWay" align="center" width="100"/>
-            <el-table-column label="交易状态" prop="status" align="center"/>
+                <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: '全部', name: 'all' },
-          { text: '待支付', label: 'toBePay' },
+          { text: '待支付', name: 'toBePay' },
-          { text: '待发货', label: 'toBeSend' },
+          { text: '待发货', name: 'toBeSend' },
-          { text: '已发货', label: 'send' },
+          { text: '已发货', name: 'send' },
-          { text: '已收货', label: 'received' },
+          { text: '已收货', name: 'received' },
-          { text: '已完成', label: 'finished' },
+          { text: '已完成', name: 'finished' },
-          { text: '已关闭', label: 'closed' },
+          { text: '已关闭', name: 'closed' },
-          { text: '退款中', label: 'refund' }
+          { 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;

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>