130 lines
6.5 KiB
Vue
130 lines
6.5 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#fff">
|
||
<view slot='center' class="navbar_title">退款详情</view>
|
||
</u-navbar>
|
||
<view class="waper_box">
|
||
<view class="list" v-for="(i, index) in list" :key="index" @click="toDetail(i.id)">
|
||
<view class="title">
|
||
<view>{{i.refundStatusName}}</view>
|
||
<view>退款编号：{{i.refundCode}}</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="money">
|
||
<view class="left">退款金额：¥{{i.actualPrice}}（{{i.refundQuantity}}张）</view>
|
||
<view class="right" @click.stop="tabShow(index)">
|
||
<view>{{i.show ? '收起' : '展开'}}</view>
|
||
<view class="icon">
|
||
<u-icon :name="i.show ? 'arrow-up' : 'arrow-down'" color="#999" size="26rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fee" v-show="i.show">手续费：¥{{i.totalFee}}</view>
|
||
<view class="step" v-show="i.show">
|
||
<view class="step_list step_active">
|
||
<view class="text">申请退款</view>
|
||
<view class="time">{{i.createTime}}</view>
|
||
<view class="active">
|
||
<image src="https://common/refund_active.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view :class="'step_list' + (i.refundStatus > 1 ? ' step_active' : '')">
|
||
<view class="text">退款待审核</view>
|
||
<view class="active" v-if="i.refundStatus > 1">
|
||
<image src="https://common/refund_active.png" mode=""></image>
|
||
</view>
|
||
<view class="icon" v-else></view>
|
||
</view>
|
||
<view :class="'step_list' + (i.refundStatus > 1 ? ' step_active' : '') + (i.updateTime ? '' : ' add_time')">
|
||
<view class="text over_text" v-if="i.refundStatus == '100'">审核驳回</view>
|
||
<view class="text over_text" v-if="i.refundStatus == '200'">退款成功，资金原路返回</view>
|
||
<view class="text over_text" v-if="i.refundStatus == '2'">退款中，预计在1-3个工作日完成</view>
|
||
<view class="text over_text" v-if="i.refundStatus == '4'">退款失败，请联系管理员</view>
|
||
<view class="time" v-if="i.updateTime">{{i.updateTime}}</view>
|
||
<view class="active" v-if="i.refundStatus > 1">
|
||
<image src="https://common/refund_active.png" mode=""></image>
|
||
</view>
|
||
<view class="icon" v-else></view>
|
||
<view class="msg" v-if="i.refundStatus == '100' && i.refundDescribe[1]">拒绝原因：{{i.refundDescribe}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
list: []
|
||
}
|
||
},
|
||
async onLoad (options) {
|
||
let info = await this.$http.getRefundListByOrderId(options.orderId);
|
||
for (var i = 0; i < info.data.length; i ++) {
|
||
info.data[i].show = true;
|
||
}
|
||
this.list = info.data;
|
||
},
|
||
methods: {
|
||
tabShow (index) {
|
||
this.list[index].show = !this.list[index].show;
|
||
},
|
||
toDetail (id) {
|
||
uni.navigateTo({ url: '/pages/my/refundDetail?id=' + id })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{ background: #F6F6F6; }
|
||
.waper_box{
|
||
width: 100%; box-sizing: border-box; padding: 32rpx;
|
||
.list{
|
||
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; margin-bottom: 24rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
.title{
|
||
padding-bottom: 24rpx; border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
|
||
view{
|
||
&:nth-child(1){ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: bold; }
|
||
&:nth-child(2){ margin-top: 8rpx; line-height: 40rpx; font-size: 28rpx; color: #999; font-weight: 500; }
|
||
}
|
||
}
|
||
.content{
|
||
width: 100%; margin-top: 24rpx;
|
||
.money{
|
||
width: 100%; height: 40rpx; display: flex; justify-content: space-between; align-items: center;
|
||
.left{ color: #666; font-size: 28rpx; font-weight: 500; }
|
||
.right{
|
||
color: #999; display: flex; align-items: center; font-size: 28rpx;
|
||
.icon{ margin-left: 12rpx; }
|
||
}
|
||
}
|
||
.fee{ margin-top: 24rpx; line-height: 40rpx; color: #666; font-size: 28rpx; font-weight: 500; }
|
||
.step{
|
||
width: 100%; margin-top: 32rpx;
|
||
.step_list{
|
||
width: 100%; padding-left: 44rpx; position: relative; margin-bottom: 32rpx;
|
||
.text{ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; }
|
||
.time{ margin-top: 4rpx; line-height: 34rpx; color: #999; font-size: 24rpx; }
|
||
&::after{ content: ""; width: 2rpx; height: 100%; background: #E8E8E8; position: absolute; left: 10rpx; top: calc(50% + 7rpx); z-index: 5; }
|
||
&.step_active::after{ background: #03AE80; }
|
||
&.step_active .over_text{ color: #03AE80; }
|
||
&:nth-child(2)::after{ width: 0; }
|
||
.icon{ width: 10rpx; height: 10rpx; background: #999; border-radius: 10rpx; position: absolute; left: 6rpx; top: 50%; transform: translateY(-50%); z-index: 6; }
|
||
.active{ width: 20rpx; height: 20rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
|
||
.msg{ margin-top: 12rpx; color: #333; font-size: 26rpx; line-height: 36rpx; }
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
&::after{ top: auto; bottom: calc(50% + 7rpx); }
|
||
}
|
||
&.add_time::after{ height: calc(100% + 30rpx); }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |