<template> <view class="content"> <view class="u-tabs-box"> <u-tabs bg-color="#fff" :list="list" :is-scroll="false" :current="current" @change="change" :active-color="$lightColor"></u-tabs> </view> <div class="u-tabs-search"> <u-search placeholder="请输入订单编号" @search="handleGetOrderList(current)" @clear="handleGetOrderList(current)" @custom="handleGetOrderList(current)" v-model="params.orderSn"></u-search> </div> <scroll-view class="body-view" scroll-y @scrolltolower="renderDate"> <view class="seller-view" v-for="(order, orderIndex) in orderList" :key="orderIndex"> <!-- 店铺名称 --> <view class="seller-info u-flex u-row-between" v-if="current == 0"> <view class="seller-name"> <view class="name">{{ order.storeName }}</view> </view> <view class="order-sn">订单编号:{{order.sn}}</view> </view> <!-- 申请记录 选项卡 --> <view class="seller-info u-flex u-row-between" v-if="current != 0"> <view class="order-sn">售后单号:{{ order.service_sn || order.sn }}</view> <view class="order-sn">{{ order.serviceType_text }}</view> </view> <view v-for="(sku, goodsIndex) in order.orderItems" :key="goodsIndex"> <view class="goods-item-view" @click="onDetail(order,sku)"> <view class="goods-img"> <u-image border-radius="6" width="100%" height="100%" :src="sku.image"></u-image> </view> <view class="goods-info"> <view class="goods-title u-line-2">{{ sku.name }}</view> <!-- 如果商品多个则不显示每个商品价格--> <view class="goods-price" v-if="order.orderItems.length <= 1"> ¥{{ order.flowPrice | unitPrice }} </view> </view> <view class="goods-num"> <view>x{{ sku.num }}</view> </view> </view> <view class="btn-view u-flex u-row-between"> <view class="description"> <!-- 售后申请 --> <view v-if=" current === 0 && order.groupAfterSaleStatus && order.groupAfterSaleStatus.includes('ALREADY_APPLIED') " class="cannot_apply"> <u-icon class="icon" name="info-circle-fill"></u-icon> 该商品已申请售后服务 </view> <view class="cannot_apply" v-if="current === 0 && order.groupAfterSaleStatus && order.groupAfterSaleStatus.includes('EXPIRED') " @click="tipsShow = true"> <u-icon class="icon" name="info-circle-fill"></u-icon> 该商品无法申请售后 </view> <div v-if="current === 1 || current === 2"> <!-- 申请中 --> <view class="cannot_apply" v-if="order.serviceType == 'RETURN_GOODS'"> 退货处理-{{ order.serviceStatus | serviceStatusList }}</view> <view class="cannot_apply" v-if="order.serviceType == 'SUPPLY_AGAIN_GOODS'"> 补发商品-{{ order.serviceStatus | serviceStatusList }}</view> <view class="cannot_apply" v-if="order.serviceType == 'RETURN_MONEY'"> 退款-{{ order.serviceStatus | serviceStatusList }}</view> <view class="cannot_apply" v-if="order.serviceType == 'EXCHANGE_GOODS'"> 换货-{{ order.serviceStatus | serviceStatusList }}</view> <view class="cannot_apply" v-if="order.serviceType == 'CANCEL'"> 取消订单-{{ order.serviceStatus | serviceStatusList }}</view> </div> <!-- 申请记录 --> </view> <!-- 售后申请 --> <div v-if="current === 0 && sku.afterSaleStatus && (sku.afterSaleStatus.includes('NOT_APPLIED') || sku.afterSaleStatus.includes('PART_AFTER_SALE')) " @click="applyService(sku.sn, order, sku)" class="sale"> <view class=" default-btn border" > 申请售后 </view> </div> <view class="after-line"> <!-- 申请中 --> <view class="default-btn border" v-if=" current === 2 && order.serviceStatus && order.serviceStatus == 'PASS' && order.serviceType != 'RETURN_MONEY' " @click="onExpress(order, sku)"> 提交物流 </view> <view @click="close(order,sku)" v-if="current === 1" class="default-btn close"> 取消售后 </view> <view @click="afterDetails(order, sku)" v-if="current === 1 || current === 2" class="default-btn border"> 售后详情 </view> </view> </view> </view> <view v-if=" current === 0 && order.groupAfterSaleStatus && order.groupAfterSaleStatus != 'ALREADY_APPLIED' && order.orderItems.length >= 1 " class="btn-view u-flex u-row-between"> <!-- 多个商品显示订单总价格 --> <view class="cannot_apply"> 订单总金额:<span class="countMoney">¥{{ order.flowPrice | unitPrice }}</span> </view> </view> </view> <u-loadmore bg-color="#f8f8f8" :status="status" /> </scroll-view> <u-modal show-cancel-button @confirm="closeService" v-model="cancelShow" content="确认取消售后"></u-modal> <u-modal v-model="tipsShow" content="当订单未确认收货|已过售后服务有效期|已申请售后服务时,不能申请售后"></u-modal> </view> </template> <script> import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"; import { getAfterSaleList, cancelAfterSale } from "@/api/after-sale.js"; import { getOrderList } from "@/api/order.js"; export default { components: { uniLoadMore, }, data() { return { list: [ //tab表头 { name: "售后申请", }, { name: "申请中", }, { name: "申请记录", }, ], current: 0, //当前表头索引 tipsShow: false, //提示开关 cancelShow: false, //取消显示开关 selectedOrder: "", //选中的order orderList: [], //订单集合 params: { pageNumber: 1, pageSize: 10, sort: "createTime", order: "desc", }, logParams: { pageNumber: 1, pageSize: 10, }, status: "loadmore", }; }, onLoad(options) { this.orderList = []; this.params.pageNumber = 1; if (options.orderSn) this.params.orderSn = options.orderSn; this.getOrderList(this.current); }, onPullDownRefresh() { this.change(this.current); }, methods: { handleGetOrderList(current) { this.orderList = []; this.getOrderList(current); }, /** * 切换tab页时,初始化数据 */ change(index) { this.current = index; this.params = { pageNumber: 1, pageSize: 10, }; this.orderList = []; //如果是2 则读取售后申请记录列表 if (index == 0) { this.getOrderList(index); } else { this.logParams = { pageNumber: 1, pageSize: 10, sort: "createTime", order: "desc", }; if (index === 1) { this.logParams.serviceStatus = "APPLY"; } this.orderList = []; this.getAfterSaleLogList(); } uni.stopPullDownRefresh(); }, /** * 获取订单列表 */ getOrderList(index) { uni.showLoading({ title: "加载中", mask: true, }); getOrderList(this.params).then((res) => { uni.hideLoading(); const orderList = res.data.result.records; if (orderList.length > 0) { this.orderList = this.orderList.concat(orderList); this.params.pageNumber += 1; } if (orderList.length < 10) { this.status = "nomore"; } else { this.status = "loading"; } }); }, close(order, sku) { console.log(order, sku); this.selectedOrder = order; this.cancelShow = true; }, async closeService() { uni.showLoading({ title: "加载中", }); console.log(this.selectedOrder); let res = await cancelAfterSale(this.selectedOrder.sn); if (res.data.success) { uni.showToast({ title: "取消成功!", duration: 2000, icon: "none", }); } this.orderList = []; this.getOrderList(this.current); uni.hideLoading(); }, /** * 售后详情 */ afterDetails(order) { uni.navigateTo({ url: "./applyDetail?sn=" + order.sn, }); }, /** * 申请记录列表 */ getAfterSaleLogList() { getAfterSaleList(this.logParams).then((res) => { let afterSaleLogList = res.data.result.records; afterSaleLogList.forEach((item) => { item.orderItems = [ { image: item.goodsImage, skuId: item.skuId, name: item.goodsName, num: item.num, price: item.flowPrice, }, ]; }); this.orderList = this.orderList.concat(afterSaleLogList); if (afterSaleLogList.length < 10) { this.status = "nomore"; } else { this.status = "loading"; } }); }, /** * 申请售后 */ applyService(sn, order, sku) { let data = { ...order, ...sku, }; uni.navigateTo({ url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}&sku=${encodeURIComponent( JSON.stringify(data) )}`, }); }, /** * 提交物流信息 */ onExpress(order, sku) { sku.storeName = order.storeName; uni.navigateTo({ url: `./afterSalesDetailExpress?serviceSn=${ order.sn }&sku=${encodeURIComponent(JSON.stringify(sku))}`, }); }, /** * 查看详情 */ onDetail(goods, sku) { // 售后申请 if (this.current == 0) { uni.navigateTo({ url: `/pages/product/goods?id=${sku.skuId}&goodsId=${ sku.goodsId || sku.goodsId }`, }); } else { uni.navigateTo({ url: `/pages/product/goods?id=${goods.skuId}&goodsId=${ goods.goodsId || goods.goodsId }`, }); } }, /** * 底部加载数据 */ renderDate() { if (this.current === 0) { this.params.pageNumber += 1; this.getOrderList(); } else { this.logParams.pageNumber += 1; this.getAfterSaleLogList(); } }, }, }; </script> <style lang="scss"> page, .content { background: $page-color-base; height: 100%; } .body-view { overflow-y: auto; height: calc(100vh - 44px - 80rpx - 104rpx); } .u-tabs-search { padding: 20rpx; background: #fff; } .countMoney { margin-left: 7rpx; color: $main-color; font-size: 28rpx; } .seller-view { background-color: #fff; margin: 20rpx 0rpx; padding: 0rpx 20rpx; border-radius: 20rpx; .seller-info { height: 70rpx; .seller-name { font-size: 28rpx; display: flex; flex-direction: row; .name { margin-left: 15rpx; margin-top: -2rpx; } } .order-sn { font-size: 22rpx; color: #909399; } } .goods-item-view { display: flex; flex-direction: row; padding: 10rpx 10rpx; .goods-img { width: 131rpx; height: 131rpx; } .goods-info { padding-left: 30rpx; flex: 1; .goods-title { margin-bottom: 10rpx; color: #333333; } .goods-specs { font-size: 24rpx; margin-bottom: 10rpx; color: #cccccc; } .goods-price { font-size: 28rpx; margin-bottom: 10rpx; color: #ff5a10; } } .goods-num { width: 60rpx; color: $main-color; } } .btn-view { padding: 16rpx 0; .after-line { display: flex; line-height: 90rpx; } } } .description { color: #909399; size: 25rpx; } .cannot_apply { text-align: center; font-size: 22rpx; color: #999999; height: 70rpx; line-height: 70rpx; } .icon { margin-right: 10rpx; } .sale { width: 100%; display: flex; justify-content: flex-end; } .default-btn { background-color: #ffffff; margin-left: 15rpx; height: 60rpx; line-height: 60rpx; text-align: center; font-size: 24rpx; padding: 0 24rpx; border-radius: 200px; } .close { color: $light-color; } .border { border: 2rpx solid $light-color; color: $light-color; } </style>