236 lines
5.3 KiB
Vue
236 lines
5.3 KiB
Vue
<script setup>
|
|
// 售后详情
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
getCurrentInstance,
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onPageScroll,
|
|
} from '@dcloudio/uni-app';
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
//
|
|
import api from '@/api/index.js'
|
|
|
|
// 订单id
|
|
const orderId = ref('')
|
|
// 订单详情
|
|
const detail = reactive({})
|
|
|
|
// 流程
|
|
const flow = computed(() => {
|
|
let result = []
|
|
if (detail.id) result.push({
|
|
time: detail.dealTime,
|
|
name: '同意退款',
|
|
}, {
|
|
time: detail.dealTime,
|
|
name: '平台处理中',
|
|
}, {
|
|
time: detail.refundTime,
|
|
name: '到账成功',
|
|
})
|
|
return result
|
|
})
|
|
|
|
onLoad((option) => {
|
|
if (option.orderId) orderId.value = option.orderId
|
|
// 获取详情
|
|
getDetail()
|
|
})
|
|
|
|
// 获取详情
|
|
function getDetail() {
|
|
api.shop.getRefundOrder({
|
|
query: {
|
|
orderId: orderId.value,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
const result = rs.data
|
|
result.payment = util.config.payType[result.refundType]
|
|
Object.assign(detail, result)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false
|
|
})
|
|
})
|
|
}
|
|
|
|
// 复制文本
|
|
function handleCopy() {
|
|
util.copyText(detail.orderNo)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
<view class="container">
|
|
<!-- 退款状态 -->
|
|
<view class="statusText mtb30 f48">退款成功</view>
|
|
<!-- 退款金额 -->
|
|
<view class="result mtb30">
|
|
<view class="refundPrice ">
|
|
<text class="f48">￥</text>
|
|
<text class="value">{{detail.refundPrice}}</text>
|
|
</view>
|
|
<view class="c37B111">已退回至九亿钱包</view>
|
|
</view>
|
|
|
|
<!-- 退款流程 -->
|
|
<view class="flow mtb30">
|
|
<view class="item f1" v-for="(item,index) in flow" :key="index">
|
|
<view class="side">
|
|
<view class="line"></view>
|
|
<view class="circle mlr10 cir">
|
|
<view class="wh24 fmid" v-if="index == flow.length - 1">
|
|
<uni-icons type="checkmarkempty" color="#fff" />
|
|
</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
</view>
|
|
<view class="main mt20 tac c999 f26">
|
|
<view class="name">{{item.name}}</view>
|
|
<view class="time mt10">{{item.time}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退款金额 -->
|
|
<view class="container info c999 f28" v-if="detail.id">
|
|
<view class="title mtb20 c333 f32">钱款去向</view>
|
|
<view class="line rows mtb20">
|
|
<view class="key">九亿账号</view>
|
|
<view class="">{{detail.refundAccount}}</view>
|
|
</view>
|
|
<view class="line rows mtb20">
|
|
<view class="key">支付方式</view>
|
|
<view class="">{{detail.payment.name}}</view>
|
|
</view>
|
|
<view class="line rows mtb20">
|
|
<view class="key">退款账户</view>
|
|
<view class="">{{detail.refundAccount}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="product container">
|
|
<view class="header line rows ptb20 f28">
|
|
<!-- 店铺 -->
|
|
<view class="store df aic thd f1">
|
|
<image class="wh50 br10" :src="detail.merchantAvatar" mode="aspectFill" />
|
|
<view class="name ml10 c333">{{detail.merchantName}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品信息 -->
|
|
<view class="product line df ptb20" v-if="detail.productInf">
|
|
<view class="poster wh160">
|
|
<image class="wh160 br10" :src="detail.productInfo.sliderImage.split(',')[0]" mode="aspectFill" />
|
|
</view>
|
|
|
|
<!-- 产品名称 和 购买的规格 -->
|
|
<view class="info mlr20 f1">
|
|
<view class="name c333 f28">{{detail.productInfo.name}}</view>
|
|
<view class="spec mt10 c999 f26">款式：{{detail.style}}</view>
|
|
</view>
|
|
|
|
<!-- 单价 数量 -->
|
|
<view class="tar">
|
|
<view class="price c666">
|
|
<text class="f20">￥</text>
|
|
<text class="f26">{{detail.productInfo.price}}</text>
|
|
</view>
|
|
<view class="number f24 c999">x {{detail.totalNum}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单信息 -->
|
|
<view class="order mt30 f26 c999">
|
|
<view class="line mtb20 rows">
|
|
<text>订单编号：{{detail.orderNo}}</text>
|
|
<view class="btn ti closeHollow plr20" @click="handleCopy">复制</view>
|
|
</view>
|
|
<view class="line mtb20">
|
|
<text>申请金额：￥{{detail.refundPrice}}</text>
|
|
</view>
|
|
<view class="line mtb20">
|
|
<text>退款原因：{{detail.refundReasonWap}}</text>
|
|
</view>
|
|
<!-- <view class="line mtb20">
|
|
<text>收货状态：已收货</text>
|
|
</view> -->
|
|
<view class="line mtb20">
|
|
<text>申请时间：{{detail.createTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 填充 -->
|
|
<view class="fill" style="height: 150rpx;"></view>
|
|
|
|
<!-- -->
|
|
<view class="footer df jcr plr30 bfff shadow" v-if="0">
|
|
<view class="btn sm bar closeHollow plr20">联系商家</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
//
|
|
.container {
|
|
overflow: hidden;
|
|
margin: 20rpx 0;
|
|
padding-left: 20rpx;
|
|
padding-right: 20rpx;
|
|
color: #333;
|
|
background-color: #fff;
|
|
}
|
|
|
|
//
|
|
.refundPrice {
|
|
.value {
|
|
font-size: 72rpx;
|
|
}
|
|
}
|
|
|
|
// 退款流程
|
|
.flow {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.item {
|
|
.side {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 40rpx;
|
|
|
|
.line {
|
|
flex: 1;
|
|
border-top: 4rpx solid #37B111;
|
|
}
|
|
|
|
.circle {
|
|
padding: 10rpx;
|
|
background-color: #37B111;
|
|
}
|
|
}
|
|
|
|
//
|
|
&:nth-child(1) .line:nth-child(1) {
|
|
opacity: 0;
|
|
}
|
|
|
|
//
|
|
&:nth-last-child(1) .line:nth-last-child(1) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |