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>
|