trade：【交易售后】查询分页列表

yudao-module-mall/yudao-module-promotion-biz/src/main/java/cn/iocoder/yudao/module/promotion/controller/admin/coupon/CouponController.java

@@ -5,7 +5,7 @@ import cn.iocoder.yudao.framework.common.pojo.CommonResult;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.framework.common.util.collection.MapUtils;
 import cn.iocoder.yudao.module.member.api.user.MemberUserApi;
-import cn.iocoder.yudao.module.member.api.user.dto.UserRespDTO;
+import cn.iocoder.yudao.module.member.api.user.dto.MemberUserRespDTO;
 import cn.iocoder.yudao.module.promotion.controller.admin.coupon.vo.coupon.CouponPageItemRespVO;
 import cn.iocoder.yudao.module.promotion.controller.admin.coupon.vo.coupon.CouponPageReqVO;
 import cn.iocoder.yudao.module.promotion.convert.coupon.CouponConvert;
@@ -66,7 +66,7 @@ public class CouponController {
         }
         // 读取用户信息，进行拼接
         Set<Long> userIds = convertSet(pageResult.getList(), CouponDO::getUserId);
-        Map<Long, UserRespDTO> userMap = memberUserApi.getUserMap(userIds);
+        Map<Long, MemberUserRespDTO> userMap = memberUserApi.getUserMap(userIds);
         pageResulVO.getList().forEach(itemRespVO -> MapUtils.findAndThen(userMap, itemRespVO.getUserId(),
                 userRespDTO -> itemRespVO.setNickname(userRespDTO.getNickname())));
         return success(pageResulVO);

yudao-module-mall/yudao-module-promotion-biz/src/main/java/cn/iocoder/yudao/module/promotion/service/coupon/CouponServiceImpl.java

@@ -7,7 +7,7 @@ import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils;
 import cn.iocoder.yudao.framework.common.util.date.LocalDateTimeUtils;
 import cn.iocoder.yudao.module.member.api.user.MemberUserApi;
-import cn.iocoder.yudao.module.member.api.user.dto.UserRespDTO;
+import cn.iocoder.yudao.module.member.api.user.dto.MemberUserRespDTO;
 import cn.iocoder.yudao.module.promotion.controller.admin.coupon.vo.coupon.CouponPageReqVO;
 import cn.iocoder.yudao.module.promotion.dal.dataobject.coupon.CouponDO;
 import cn.iocoder.yudao.module.promotion.dal.mysql.coupon.CouponMapper;
@@ -71,7 +71,7 @@ public class CouponServiceImpl implements CouponService {
         Set<Long> userIds = null;
         if (StrUtil.isNotEmpty(pageReqVO.getNickname())) {
             userIds = CollectionUtils.convertSet(memberUserApi.getUserListByNickname(pageReqVO.getNickname()),
-                    UserRespDTO::getId);
+                    MemberUserRespDTO::getId);
             if (CollUtil.isEmpty(userIds)) {
                 return PageResult.empty();
             }

yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/aftersale/TradeAfterSaleController.java

@@ -1,10 +1,13 @@
 package cn.iocoder.yudao.module.trade.controller.admin.aftersale;
 
+import cn.hutool.core.collection.CollUtil;
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.module.member.api.user.MemberUserApi;
+import cn.iocoder.yudao.module.member.api.user.dto.MemberUserRespDTO;
 import cn.iocoder.yudao.module.trade.controller.admin.aftersale.vo.TradeAfterSaleDisagreeReqVO;
 import cn.iocoder.yudao.module.trade.controller.admin.aftersale.vo.TradeAfterSalePageReqVO;
-import cn.iocoder.yudao.module.trade.controller.admin.aftersale.vo.TradeAfterSaleRespVO;
+import cn.iocoder.yudao.module.trade.controller.admin.aftersale.vo.TradeAfterSaleRespPageItemVO;
 import cn.iocoder.yudao.module.trade.convert.aftersale.TradeAfterSaleConvert;
 import cn.iocoder.yudao.module.trade.dal.dataobject.aftersale.TradeAfterSaleDO;
 import cn.iocoder.yudao.module.trade.service.aftersale.TradeAfterSaleService;
@@ -18,8 +21,10 @@ import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
 import javax.validation.Valid;
+import java.util.Map;
 
 import static cn.iocoder.yudao.framework.common.pojo.CommonResult.success;
+import static cn.iocoder.yudao.framework.common.util.collection.CollectionUtils.convertSet;
 import static cn.iocoder.yudao.framework.common.util.servlet.ServletUtils.getClientIP;
 import static cn.iocoder.yudao.framework.security.core.util.SecurityFrameworkUtils.getLoginUserId;
 
@@ -33,12 +38,22 @@ public class TradeAfterSaleController {
     @Resource
     private TradeAfterSaleService afterSaleService;
 
+    @Resource
+    private MemberUserApi memberUserApi;
+
     @GetMapping("/page")
     @ApiOperation("获得交易售后分页")
     @PreAuthorize("@ss.hasPermission('trade:after-sale:query')")
-    public CommonResult<PageResult<TradeAfterSaleRespVO>> getAfterSalePage(@Valid TradeAfterSalePageReqVO pageVO) {
+    public CommonResult<PageResult<TradeAfterSaleRespPageItemVO>> getAfterSalePage(@Valid TradeAfterSalePageReqVO pageVO) {
         PageResult<TradeAfterSaleDO> pageResult = afterSaleService.getAfterSalePage(pageVO);
-        return success(TradeAfterSaleConvert.INSTANCE.convertPage(pageResult));
+        if (CollUtil.isEmpty(pageResult.getList())) {
+            return success(PageResult.empty());
+        }
+
+        // 拼接数据
+        Map<Long, MemberUserRespDTO> memberUsers = memberUserApi.getUserMap(
+                convertSet(pageResult.getList(), TradeAfterSaleDO::getUserId));
+        return success(TradeAfterSaleConvert.INSTANCE.convertPage(pageResult, memberUsers));
     }
 
     @PutMapping("/agree")

yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/aftersale/vo/TradeAfterSaleBaseVO.java

@@ -1,6 +1,6 @@
 package cn.iocoder.yudao.module.trade.controller.admin.aftersale.vo;
 
-import cn.iocoder.yudao.module.trade.controller.admin.base.property.ProductPropertyRespVO;
+import cn.iocoder.yudao.module.trade.controller.admin.base.product.property.ProductPropertyRespVO;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 import org.springframework.format.annotation.DateTimeFormat;

yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/aftersale/vo/TradeAfterSaleRespVO.java → yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/aftersale/vo/TradeAfterSaleRespPageItemVO.java

@@ -1,5 +1,6 @@
 package cn.iocoder.yudao.module.trade.controller.admin.aftersale.vo;
 
+import cn.iocoder.yudao.module.trade.controller.admin.base.member.user.MemberUserRespVO;
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
@@ -8,11 +9,11 @@ import lombok.ToString;
 
 import java.time.LocalDateTime;
 
-@ApiModel("管理后台 - 交易售后 Response VO")
+@ApiModel("管理后台 - 交易售后分页的每一条记录 Response VO")
 @Data
 @EqualsAndHashCode(callSuper = true)
 @ToString(callSuper = true)
-public class TradeAfterSaleRespVO extends TradeAfterSaleBaseVO {
+public class TradeAfterSaleRespPageItemVO extends TradeAfterSaleBaseVO {
 
     @ApiModelProperty(value = "售后编号", required = true, example = "27630")
     private Long id;
@@ -20,4 +21,9 @@ public class TradeAfterSaleRespVO extends TradeAfterSaleBaseVO {
     @ApiModelProperty(value = "创建时间", required = true)
     private LocalDateTime createTime;
 
+    /**
+     * 用户信息
+     */
+    private MemberUserRespVO user;
+
 }

yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/base/member/package-info.java

@@ -0,0 +1,4 @@
+/**
+ * 占位符，可忽略
+ */
+package cn.iocoder.yudao.module.trade.controller.admin.base.member;

yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/base/member/user/MemberUserRespVO.java

@@ -0,0 +1,20 @@
+package cn.iocoder.yudao.module.trade.controller.admin.base.member.user;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+
+@ApiModel("管理后台 - 会员用户 Response VO")
+@Data
+public class MemberUserRespVO {
+
+    @ApiModelProperty(value = "用户 ID", required = true, example = "1")
+    private Long id;
+
+    @ApiModelProperty(value = "用户昵称", required = true, example = "芋道源码")
+    private String nickname;
+
+    @ApiModelProperty(value = "用户头像", example = "https://www.iocoder.cn/xxx.png")
+    private String avatar;
+
+}

yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/base/property/ProductPropertyRespVO.java → yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/base/product/property/ProductPropertyRespVO.java

@@ -1,10 +1,10 @@
-package cn.iocoder.yudao.module.trade.controller.admin.base.property;
+package cn.iocoder.yudao.module.trade.controller.admin.base.product.property;
 
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 
-@ApiModel("管理后台 - 商品规格 Request VO")
+@ApiModel("管理后台 - 商品规格 Response VO")
 @Data
 public class ProductPropertyRespVO {
 

yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/convert/aftersale/TradeAfterSaleConvert.java

@@ -1,8 +1,10 @@
 package cn.iocoder.yudao.module.trade.convert.aftersale;
 
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.module.member.api.user.dto.MemberUserRespDTO;
 import cn.iocoder.yudao.module.pay.api.refund.dto.PayRefundCreateReqDTO;
-import cn.iocoder.yudao.module.trade.controller.admin.aftersale.vo.TradeAfterSaleRespVO;
+import cn.iocoder.yudao.module.trade.controller.admin.aftersale.vo.TradeAfterSaleRespPageItemVO;
+import cn.iocoder.yudao.module.trade.controller.admin.base.member.user.MemberUserRespVO;
 import cn.iocoder.yudao.module.trade.controller.app.aftersale.vo.AppTradeAfterSaleCreateReqVO;
 import cn.iocoder.yudao.module.trade.dal.dataobject.aftersale.TradeAfterSaleDO;
 import cn.iocoder.yudao.module.trade.dal.dataobject.order.TradeOrderItemDO;
@@ -12,6 +14,8 @@ import org.mapstruct.Mapping;
 import org.mapstruct.Mappings;
 import org.mapstruct.factory.Mappers;
 
+import java.util.Map;
+
 @Mapper
 public interface TradeAfterSaleConvert {
 
@@ -34,6 +38,15 @@ public interface TradeAfterSaleConvert {
     PayRefundCreateReqDTO convert(String userIp, TradeAfterSaleDO afterSale,
                                   TradeOrderProperties orderProperties);
 
-    PageResult<TradeAfterSaleRespVO> convertPage(PageResult<TradeAfterSaleDO> page);
+    MemberUserRespVO convert(MemberUserRespDTO bean);
+
+    PageResult<TradeAfterSaleRespPageItemVO> convertPage(PageResult<TradeAfterSaleDO> page);
+
+    default PageResult<TradeAfterSaleRespPageItemVO> convertPage(PageResult<TradeAfterSaleDO> pageResult,
+                                                                 Map<Long, MemberUserRespDTO> memberUsers) {
+        PageResult<TradeAfterSaleRespPageItemVO> pageVOResult = convertPage(pageResult);
+        pageVOResult.getList().forEach(item -> item.setUser(convert(memberUsers.get(item.getUserId()))));
+        return pageVOResult;
+    }
 
 }

yudao-module-member/yudao-module-member-api/src/main/java/cn/iocoder/yudao/module/member/api/user/MemberUserApi.java

@@ -1,6 +1,6 @@
 package cn.iocoder.yudao.module.member.api.user;
 
-import cn.iocoder.yudao.module.member.api.user.dto.UserRespDTO;
+import cn.iocoder.yudao.module.member.api.user.dto.MemberUserRespDTO;
 
 import java.util.Collection;
 import java.util.List;
@@ -21,7 +21,7 @@ public interface MemberUserApi {
      * @param id 用户编号
      * @return 用户信息
      */
-    UserRespDTO getUser(Long id);
+    MemberUserRespDTO getUser(Long id);
 
     /**
      * 获得会员用户信息们
@@ -29,7 +29,7 @@ public interface MemberUserApi {
      * @param ids 用户编号的数组
      * @return 用户信息们
      */
-    List<UserRespDTO> getUsers(Collection<Long> ids);
+    List<MemberUserRespDTO> getUsers(Collection<Long> ids);
 
     /**
      * 获得会员用户 Map
@@ -37,8 +37,8 @@ public interface MemberUserApi {
      * @param ids 用户编号的数组
      * @return 会员用户 Map
      */
-    default Map<Long, UserRespDTO> getUserMap(Collection<Long> ids) {
-        return convertMap(getUsers(ids), UserRespDTO::getId);
+    default Map<Long, MemberUserRespDTO> getUserMap(Collection<Long> ids) {
+        return convertMap(getUsers(ids), MemberUserRespDTO::getId);
     }
 
     /**
@@ -47,6 +47,6 @@ public interface MemberUserApi {
      * @param nickname 用户昵称，模糊匹配
      * @return 用户信息的列表
      */
-    List<UserRespDTO> getUserListByNickname(String nickname);
+    List<MemberUserRespDTO> getUserListByNickname(String nickname);
 
 }

yudao-module-member/yudao-module-member-api/src/main/java/cn/iocoder/yudao/module/member/api/user/dto/UserRespDTO.java → yudao-module-member/yudao-module-member-api/src/main/java/cn/iocoder/yudao/module/member/api/user/dto/MemberUserRespDTO.java

@@ -9,7 +9,7 @@ import lombok.Data;
  * @author 芋道源码
  */
 @Data
-public class UserRespDTO {
+public class MemberUserRespDTO {
 
     /**
      * 用户ID

yudao-module-member/yudao-module-member-biz/src/main/java/cn/iocoder/yudao/module/member/api/user/MemberUserApiImpl.java

@@ -1,6 +1,6 @@
 package cn.iocoder.yudao.module.member.api.user;
 
-import cn.iocoder.yudao.module.member.api.user.dto.UserRespDTO;
+import cn.iocoder.yudao.module.member.api.user.dto.MemberUserRespDTO;
 import cn.iocoder.yudao.module.member.convert.user.UserConvert;
 import cn.iocoder.yudao.module.member.dal.dataobject.user.MemberUserDO;
 import cn.iocoder.yudao.module.member.service.user.MemberUserService;
@@ -24,18 +24,18 @@ public class MemberUserApiImpl implements MemberUserApi {
     private MemberUserService userService;
 
     @Override
-    public UserRespDTO getUser(Long id) {
+    public MemberUserRespDTO getUser(Long id) {
         MemberUserDO user = userService.getUser(id);
         return UserConvert.INSTANCE.convert2(user);
     }
 
     @Override
-    public List<UserRespDTO> getUsers(Collection<Long> ids) {
+    public List<MemberUserRespDTO> getUsers(Collection<Long> ids) {
         return UserConvert.INSTANCE.convertList2(userService.getUserList(ids));
     }
 
     @Override
-    public List<UserRespDTO> getUserListByNickname(String nickname) {
+    public List<MemberUserRespDTO> getUserListByNickname(String nickname) {
         return UserConvert.INSTANCE.convertList2(userService.getUserListByNickname(nickname));
     }
 

yudao-module-member/yudao-module-member-biz/src/main/java/cn/iocoder/yudao/module/member/convert/user/UserConvert.java

@@ -1,6 +1,6 @@
 package cn.iocoder.yudao.module.member.convert.user;
 
-import cn.iocoder.yudao.module.member.api.user.dto.UserRespDTO;
+import cn.iocoder.yudao.module.member.api.user.dto.MemberUserRespDTO;
 import cn.iocoder.yudao.module.member.controller.app.user.vo.AppUserInfoRespVO;
 import cn.iocoder.yudao.module.member.dal.dataobject.user.MemberUserDO;
 import org.mapstruct.Mapper;
@@ -15,8 +15,8 @@ public interface UserConvert {
 
     AppUserInfoRespVO convert(MemberUserDO bean);
 
-    UserRespDTO convert2(MemberUserDO bean);
+    MemberUserRespDTO convert2(MemberUserDO bean);
 
-    List<UserRespDTO> convertList2(List<MemberUserDO> list);
+    List<MemberUserRespDTO> convertList2(List<MemberUserDO> list);
 
 }

yudao-ui-admin/src/views/mall/trade/afterSale/bak.vue

@@ -1,149 +0,0 @@
-<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-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 }">
-              <!-- 订单下的商品 -->
-              <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' }
-  ]
-}
-
-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: '申请维权(仅退款)'
-              }
-            ]
-          },
-          {
-            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: '申请维权(仅退款)'
-              }
-            ]
-          },
-          {
-            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: '申请维权(仅退款)'
-              }
-            ]
-          }
-        ]
-      }
-    },
-    methods: {
-      goToDetail (row) {
-        this.$router.push({ path: '/mall/trade/order/detail', query: { orderNo: row.orderNo }})
-      }
-    }
-  }
-</script>

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

@@ -46,20 +46,28 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
+    <!-- Tab 选项：真正的内容在 Lab -->
+    <el-tabs v-model="activeTab" type="card" @tab-click="tabClick" style="margin-top: -40px;">
+      <el-tab-pane v-for="tab in statusTabs" :key="tab.value" :label="tab.label" :name="tab.value" />
+    </el-tabs>
+
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
       <el-table-column label="退款编号" align="center" prop="no" />
-      <el-table-column label="订单编号" align="center" prop="orderNo" />
-      <el-table-column label="订单编号" align="center" prop="orderNo" />
-      <el-table-column label="商品信息" align="center" prop="status" width="auto" min-width="300">
+      <el-table-column label="订单编号" align="center" prop="orderNo" /> <!-- TODO 芋艿：未来要加个订单链接 -->
+      <el-table-column label="商品信息" align="center" prop="spuName" width="auto" min-width="300">
         <!-- TODO @小红：样式不太对，辛苦改改 -->
 <!--        <div slot-scope="{ row }" class="goods-info">-->
 <!--          <img :src="row.picUrl"/>-->
 <!--          <span class="ellipsis-2" :title="row.name">{{row.name}}</span>-->
 <!--        </div>-->
       </el-table-column>
-      <el-table-column label="订单金额" align="center" prop="refundPrice" />
-      <el-table-column label="买家" align="center" prop="userId" />
+      <el-table-column label="订单金额" align="center" prop="refundPrice">
+        <template v-slot="scope">
+          <span>￥{{ (scope.row.refundPrice / 100.0).toFixed(2) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="买家" align="center" prop="user.nickname" /> <!-- TODO 芋艿：未来要加个会员链接 -->
       <el-table-column label="申请时间" align="center" prop="createTime" width="180">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -77,8 +85,9 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
-<!--          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"-->
-<!--                     v-hasPermi="['trade:after-sale:update']">修改</el-button>-->
+          <el-button size="mini" type="text" icon="el-icon-thumb"
+                     >处理退款</el-button>
+<!--      @click="handleUpdate(scope.row)"    v-hasPermi="['trade:after-sale:update']"-->
         </template>
       </el-table-column>
     </el-table>
@@ -91,6 +100,7 @@
 <script>
 import { getAfterSalePage } from "@/api/mall/trade/afterSale";
 import { datePickerOptions } from "@/utils/constants";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 
 export default {
   name: "AfterSale",
@@ -124,12 +134,25 @@ export default {
         way: null,
         type: null,
       },
+      // Tab 筛选
+      activeTab: 'all',
+      statusTabs: [{
+        label: '全部',
+        value: 'all'
+      }],
       // 静态变量
       datePickerOptions: datePickerOptions
     };
   },
   created() {
     this.getList();
+    // 设置 statuses 过滤
+    for (const dict of getDictDatas(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
+      this.statusTabs.push({
+        label: dict.label,
+        value: dict.value
+      })
+    }
   },
   methods: {
     /** 查询列表 */
@@ -145,13 +168,23 @@ export default {
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNo = 1;
+      this.activeTab = this.queryParams.status ? this.queryParams.status : 'all'; // 处理 tab
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.activeTab = 'all'; // 处理 tab
       this.handleQuery();
     },
+    /** tab 切换 */
+    tabClick(tab) {
+      this.queryParams.status = tab.name === 'all' ? undefined : tab.name;
+      this.getList();
+    },
+    goToDetail (row) {
+      this.$router.push({ path: '/mall/trade/order/detail', query: { orderNo: row.orderNo }})
+    }
   }
 };
 </script>