zhwl-miniapp/pages/hotelOrder/refundProgress.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>