<template> <view> <view class="after-sales-detail"> <view class="after-sales-header"> <view class="after-sales-status white lg"> {{afterSale.status_text}} </view> </view> <view class="return-address-contain flex bg-white m-t-20"> <view class="address-title">退货地址:</view> <view class="sm address flex-1">{{afterSale.shop.address}}, {{afterSale.shop.contact}}, {{afterSale.shop.mobile}}</view> <view class="xs copy-btn flex-none row-center" @tap="onCopy">复制</view> </view> <view class="goods-container bg-white m-t-20"> <view class="m-l-20"> <shop-title :shop="{name: afterSale.shop_name, id: afterSale.sid}"></shop-title> </view> <view class="goods-item flex"> <view class="goods-img"> <u-image width="180rpx" height="180rpx" border-radius="10rpx" :src="afterSale.order_goods.image"></u-image> </view> <view class="goods-info flex-1 m-l-24"> <view class="line-2">{{afterSale.order_goods.goods_name}}</view> <view class="m-t-10 xs line-1 muted">{{afterSale.order_goods.spec_value}}</view> <view class="flex row-between m-t-20"> <price-format :price="afterSale.order_goods.goods_price" :first-size="30" :second-size="30" :subscript-size="30" /> <view>x{{afterSale.order_goods.goods_num}}</view> </view> </view> </view> </view> <view class="return-goods-container bg-white m-t-20"> <view class="return-goods-item flex sm"> <view class="return-title">退款方式:</view> <view class="return-explain">{{afterSale.refund_type_text}}</view> </view> <view class="return-goods-item flex sm m-t-20"> <view class="return-title">退款原因:</view> <view class="return-explain">{{afterSale.refund_reason}}</view> </view> <view class="return-goods-item flex sm m-t-20"> <view class="return-title">退款金额:</view> <view class="return-explain primary">¥{{afterSale.refund_price}}</view> </view> <view class="return-goods-item flex sm m-t-20"> <view class="return-title">退款编号:</view> <view class="return-explain">{{afterSale.sn}}</view> </view> <view class="return-goods-item flex sm m-t-20"> <view class="return-title">申请时间:</view> <view class="return-explain">{{afterSale.create_time}}</view> </view> </view> <view class="btn-group fixed bg-white flex row-right" v-if="afterSale.status != 6"> <view class="m-r-20 btn br60" @tap="confirmDialog=true">撤销申请</view> <router-link :to="{path: '/bundle/pages/apply_refund/apply_refund', query: {after_sale_id: afterSale.id, order_id: afterSale.order_goods.order_id, item_id: afterSale.order_goods.item_id}}"> <view class="m-r-20 btn br60 primary" v-if="(afterSale.status == 4 || afterSale.status == 1)">重新申请 </view> </router-link> <router-link :to="{path: '/bundle/pages/input_express_info/input_express_info', query: {id: afterSale.id}}"> <view class="m-r-20 btn br60" v-if="afterSale.status == 2"> 填写快递单号 </view> </router-link> </view> </view> <u-modal v-model="confirmDialog" confirm-text="确定" :showCancelButton="true" :confirm-color="colorConfig.primary" @confirm="cancelApplyFun"> <view class="flex-col col-center tips-dialog" style="padding: 30rpx 0;"> <image class="icon-lg" src="/static/images/icon_warning.png"></image> <view class="m-t-30">是否要撤销申请?</view> </view> </u-modal> </view> </template> <script> import { afterSaleDetail, cancelApply } from "@/api/user"; import { trottle, copy } from "@/utils/tools.js"; export default { data() { return { afterSale: { shop: {}, order_goods: {} }, confirmDialog: false }; }, onLoad(options) { }, onShow() { this.id = this.$Route.query.id this.afterSaleDetailFun(); }, methods: { onCopy() { const { afterSale } = this; const { address, contact, mobile } = afterSale.shop; copy(`${address},${contact},${mobile}`) }, cancelApplyFun() { cancelApply({ id: this.id }).then(res => { if (res.code == 1) { uni.$emit("refreshsale") this.$toast({ title: res.msg }, { tab: 3, url: 1 }); } }); }, afterSaleDetailFun() { afterSaleDetail({ id: this.id }).then(res => { if (res.code == 1) { this.afterSale = res.data } }); } } }; </script> <style lang="scss"> .after-sales-detail { padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); .after-sales-header { .after-sales-status { padding: 48rpx 30rpx; background-color: #555555; } .after-sales-explain { padding: 20rpx 30rpx 24rpx; } } .return-goods-container { padding: 20rpx 24rpx 55rpx; .return-goods-item { line-height: 40rpx; } } .btn-group { padding: 0rpx 24rpx; position: fixed; left: 0; right: 0; bottom: 0; height: 100rpx; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; .btn { padding: 10rpx 34rpx; border: 1px solid #999999; &.primary { border-color: $-color-primary; } } } .goods-container { .goods-item { padding: 25rpx 24rpx; .goods-info { min-width: 500rpx; } } } } .return-address-contain { padding: 20rpx 24rpx 28rpx 30rpx; .address { flex: 1; line-height: 38rpx; } .address-title { width: 150rpx; align-self: flex-start; line-height: 40rpx; } .copy-btn { background-color: #F4F4F4; color: #555555; padding: 3rpx 16rpx; margin-left: 12rpx; border-radius: 4rpx; } } .tips-dialog { height: 230rpx; width: 100%; } </style>