145 lines
5.5 KiB
Vue
145 lines
5.5 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#FFFFFF">
|
||
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
|
||
退款进度
|
||
</view>
|
||
</u-navbar>
|
||
<view class="sum">
|
||
<view class="row refund">
|
||
<view class="label">退款金额</view>
|
||
<view class="price"><text>￥</text>{{ detail.refund }}</view>
|
||
</view>
|
||
<view class="row default" v-if="detail.penaltyFee">
|
||
<view class="label">违约金</view>
|
||
<view class="price">¥{{ detail.penaltyFee }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="progress">
|
||
<view class="title">退款进度</view>
|
||
<view class="list">
|
||
<!-- 退款状态： 待审1 已驳回100 退款中2 已退款200 不可退3 退款失败4 -->
|
||
<view class="progress_item">
|
||
<view :class="['left', detail.refundStatus == '1' ? 'borlef' : '']">
|
||
<view class="drop1" v-if="detail.refundStatus == '1'">
|
||
<view class="drop2"></view>
|
||
<u-icon name="checkmark" color="#fff" size="10rpx" />
|
||
</view>
|
||
<view class="drop" v-else></view>
|
||
</view>
|
||
<view class="right">
|
||
<view :class="['label', detail.refundStatus == '1' ? 'active' : '']">申请退款</view>
|
||
<view class="time">{{ detail.cancelTime }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="progress_item">
|
||
<view :class="['left', (detail.refundStatus == '1' || detail.refundStatus == '100' || detail.refundStatus == '2') ? 'borlef' : '']">
|
||
<view class="drop2" v-if="detail.refundStatus == '1'"></view>
|
||
<view class="drop" v-if="detail.refundStatus == '200' || detail.refundStatus == '4'"></view>
|
||
<view class="drop1" v-if="detail.refundStatus == '100' || detail.refundStatus == '2'">
|
||
<view class="drop2"></view>
|
||
<u-icon name="checkmark" color="#fff" size="10rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view :class="['label', (detail.refundStatus == '100' || detail.refundStatus == '2') ? 'active' : '']">
|
||
<text v-if="detail.refundStatus == '100'">审核驳回 {{ detail.refundInfo.rejectionDesc }}</text>
|
||
<text v-else-if="detail.refundStatus == '2' || detail.refundStatus == '200' || detail.refundStatus == '4'">审核通过</text>
|
||
<text v-else>待审核</text>
|
||
</view>
|
||
<view class="time">{{ detail.refundInfo.auditTime || '--' }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="progress_item" v-if="detail.refundStatus !== '100'">
|
||
<view class="left">
|
||
<view class="drop1" v-if="detail.refundStatus == '200' || detail.refundStatus == '4'">
|
||
<view class="drop2"></view>
|
||
<u-icon name="checkmark" color="#fff" size="10rpx" />
|
||
</view>
|
||
<view class="drop2" v-else></view>
|
||
</view>
|
||
<view class="right">
|
||
<view :class="['label', (detail.refundStatus == '200' || detail.refundStatus == '4') ? 'active' : '']">
|
||
<text v-if="detail.refundStatus == '200'">退款成功，资金原路返回</text>
|
||
<text v-else-if="detail.refundStatus == '4'">退款失败</text>
|
||
<text v-else>待退款</text>
|
||
</view>
|
||
<view class="time">{{ detail.refundTime || '--' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
id: '',
|
||
detail: null,
|
||
}
|
||
},
|
||
onLoad (options) {
|
||
this.id = options.id;
|
||
this.getDetail();
|
||
},
|
||
|
||
methods: {
|
||
async getDetail() {
|
||
let res=await this.$http.hotelOrderDetail(this.id);
|
||
this.detail = res.data;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.waper { min-height: 100vh; background-color: #F6F6F6; }
|
||
.sum {
|
||
margin: 24rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.row { display: flex; align-items: center; justify-content: space-between; }
|
||
.refund {
|
||
.label { font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
.price {
|
||
font-weight: bold; font-size: 42rpx; color: #EE595A;
|
||
text { font-weight: 400; font-size: 24rpx; }
|
||
}
|
||
}
|
||
.default {
|
||
margin-top: 20rpx;
|
||
.label { font-size: 28rpx; color: rgba(0,0,0,0.45); }
|
||
.price { font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
}
|
||
.progress {
|
||
margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.title { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
||
.list {
|
||
margin-top: 24rpx;
|
||
.progress_item {
|
||
display: flex; align-items: stretch;
|
||
&:last-child {
|
||
.left { border: none; }
|
||
}
|
||
.left {
|
||
border-left: 1rpx solid #03AE80; position: relative; top: 39rpx;
|
||
.drop { position: absolute; width: 12rpx; height: 12rpx; border-radius: 50%; top: 0rpx; left: 50%; transform: translateX(-50%); background-color: #03AE80; }
|
||
.drop2 { position: absolute; width: 12rpx; height: 12rpx; border-radius: 50%; top: 0rpx; left: 50%; transform: translateX(-50%); background-color: #8c8c8c; }
|
||
.drop1 {
|
||
position: absolute; width: 20rpx; height: 20rpx; border-radius: 50%; top: 0rpx; left: 50%; transform: translateX(-50%); background-color: #E5F6F2;
|
||
.drop2 { position: absolute; width: 14rpx; height: 14rpx; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #03AE80; }
|
||
::v-deep .u-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
||
}
|
||
}
|
||
.borlef { border-left: 1rpx solid rgba(0,0,0,0.45); }
|
||
.right {
|
||
flex: 1; margin-left: 32rpx; padding-bottom: 24rpx;
|
||
.label { font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
.active { color: #03AE80; }
|
||
.time { font-size: 24rpx; color: rgba(0,0,0,0.45); }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |