167 lines
7.7 KiB
Vue
167 lines
7.7 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#FBFBFB">
|
||
<view slot='center' class="navbar_title">退款详情</view>
|
||
</u-navbar>
|
||
<view class="waper_content" v-if="detail">
|
||
<view class="status">
|
||
<view class="top">
|
||
<view class="icon">
|
||
<u-icon name="checkmark-circle-fill" size="30rpx" color="#01be69" v-if="detail.refundStatus != '-1'"></u-icon>
|
||
<u-icon name="close-circle-fill" size="30rpx" color="#cd674f" v-if="detail.refundStatus == '-1'"></u-icon>
|
||
</view>
|
||
<view class="text">
|
||
<view>{{detail.refundStatusName}}</view>
|
||
<view>{{detail.createTime}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom" v-if="detail.refundStatus == '-1'">商家拒绝退款，本次退款申请关闭，如问题仍未解决，您可以在确认收货前重新发起申请。</view>
|
||
</view>
|
||
<view class="money" v-if="detail.refundStatus > 0">
|
||
<view>退款总金额</view>
|
||
<view><text>￥</text>{{detail.refundFee}}</view>
|
||
</view>
|
||
<view class="info" v-if="detail.goodsList.length > 0">
|
||
<view class="title">{{detail.goodsList[0].storeName}}</view>
|
||
<view class="goods" v-for="(i, index) in detail.goodsList" :key="index">
|
||
<view class="img">
|
||
<image :src="$utils.setImgUrl(i.image)" mode=""></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="name">{{i.title}}</view>
|
||
<view class="tag">
|
||
<view>
|
||
<text v-if="i.goodsSkuText">{{i.goodsSkuText.split(',').join('-')}}</text>
|
||
|
||
</view>
|
||
<view>X{{i.goodsNum}}</view>
|
||
</view>
|
||
<view class="num">总价：￥{{(i.goodsNum * i.price).toFixed(2)}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list_waper">
|
||
<view class="list">
|
||
<view>订单编号</view>
|
||
<view>
|
||
<text>{{detail.zdyWcscOrder.orderSn}}</text>
|
||
<text>复制</text>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view>退款原因</view>
|
||
<view>{{detail.reasonText}} {{detail.content}}</view>
|
||
</view>
|
||
<view class="list">
|
||
<view>退款金额</view>
|
||
<view>{{detail.refundFee}}</view>
|
||
</view>
|
||
<view class="list">
|
||
<view>申请时间</view>
|
||
<view>{{detail.createTime}}</view>
|
||
</view>
|
||
<!-- 成功 -->
|
||
<view class="list" v-if="detail.refundStatus == 2">
|
||
<view>退款时间</view>
|
||
<view>{{detail.updateTime}}</view>
|
||
</view>
|
||
<!-- 失败 -->
|
||
<view class="list" v-if="detail.refundStatus == -1">
|
||
<view>失败原因</view>
|
||
<view>{{detail.checkReason}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
detail: null
|
||
}
|
||
},
|
||
async onLoad (options) {
|
||
let info = await this.$shop.orderRefundDetail(options.id);
|
||
this.detail = info.data;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.waper_content{
|
||
width: 100%; box-sizing: border-box; padding: 24rpx;
|
||
.status{
|
||
width: 100%; background: #fff; border-radius: 10rpx; padding: 24rpx; box-sizing: border-box;
|
||
.top{
|
||
width: 100%; box-sizing: border-box; padding-left: 50rpx; position: relative;
|
||
.icon{
|
||
position: absolute; left: 0; top: 0;
|
||
/deep/.u-icon__icon { color: #03AE80 !important; font-size: 32rpx !important; }
|
||
}
|
||
.text{
|
||
width: 100%; line-height: 33rpx; color: rgba(0,0,0,0.65); font-size: 28rpx;
|
||
view:first-child{ font-weight: 500; margin-bottom: 18rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
}
|
||
.bottom{ margin-top: 24rpx; padding-top: 24rpx; border-top: 1rpx solid rgba(0,0,0,0.1); line-height: 36rpx; color: rgba(0,0,0,0.45); font-size: 26rpx; }
|
||
}
|
||
.money{
|
||
width: 100%; background: #fff; border-radius: 10rpx; padding: 0 24rpx; box-sizing: border-box; height: 129rpx; display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx;
|
||
view{
|
||
color: rgba(0,0,0,0.85);
|
||
&:nth-child(1){ font-size: 28rpx; font-weight: 500; }
|
||
&:nth-child(2){
|
||
font-size: 54rpx; font-weight: bold;
|
||
text { font-size: 32rpx; font-weight: 400; }
|
||
}
|
||
}
|
||
}
|
||
.info{
|
||
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx 24rpx; margin-top: 20rpx;
|
||
.title{ line-height: 38rpx; color: rgba(0,0,0,0.85); font-size: 32rpx; font-weight: 500; }
|
||
.goods{
|
||
width: 100%; margin-top: 25rpx; box-sizing: border-box; padding-left: 190rpx; position: relative; margin-bottom: 28rpx; min-height: 170rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
.img{
|
||
width: 170rpx; height: 170rpx; position: absolute; left: 0; top: 0;
|
||
image{ border-radius: 10rpx; }
|
||
}
|
||
.text{
|
||
width: 100%;
|
||
.name{ line-height: 33rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
|
||
.tag{
|
||
width: 100%; margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center; height: 48rpx;
|
||
view{
|
||
&:nth-child(1){
|
||
display: flex; align-items: center;
|
||
text{ height: 48rpx; padding: 0 24rpx; background: #F4F4F4; border-radius: 2rpx; color: rgba(0,0,0,0.65); font-size: 24rpx; line-height: 48rpx; }
|
||
}
|
||
&:nth-child(2){ color: rgba(0,0,0,0.65); font-size: 24rpx; }
|
||
}
|
||
}
|
||
.num{ width: 100%; margin-top: 30rpx; line-height: 33rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; text-align: right; }
|
||
}
|
||
}
|
||
}
|
||
.list_waper{
|
||
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx; margin-top: 20rpx;
|
||
.list{
|
||
width: 100%; box-sizing: border-box; padding-left: 130rpx; position: relative; min-height: 40rpx; margin-bottom: 24rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
view{
|
||
&:nth-child(1){ color: rgba(0,0,0,0.65); font-size: 28rpx; position: absolute; left: 0; top: 0; line-height: 33rpx; }
|
||
&:nth-child(2){
|
||
color: rgba(0,0,0,0.85); font-size: 28rpx; line-height: 33rpx; display: flex; width: 100%; justify-content: flex-end; align-items: center; text-align: right;
|
||
text:last-child{
|
||
margin-left: 48rpx; color: #3F79FF; position: relative;
|
||
&::after{ content: ""; width: 2rpx; height: 24rpx; background: #A2A2A4; position: absolute; left: -23rpx; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |