first commit
This commit is contained in:
130
pages/my/refundList.vue
Normal file
130
pages/my/refundList.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user