parking_h5/pages/applyRefundDetails/applyRefundDetails.vue

<template>
	<view class="refund-details">
		<u-navbar v-if="details.refundStatus === 0" :is-back="false" back-text="" title="申请退款" :background="{backgroundColor: '#008CFF'}" title-color="#fff"
			back-icon-color="#fff"></u-navbar>
		<u-navbar v-else back-text="" title="申请退款" :background="{backgroundColor: '#008CFF'}" title-color="#fff"
				back-icon-color="#fff"></u-navbar>
		<view class="refund-details-list">
			<view class="refund-details-list-item">
				<view class="rdli-label">申请时间：</view>
				<view class="rdli-content">{{details.applyTime}}</view>
			</view>
			<view class="refund-details-list-item">
				<view class="rdli-label">消费金额：</view>
				<view class="rdli-content"><text class="rdli-font">{{details.refundAmount}}</text>元</view>
			</view>
			<view class="refund-details-list-item">
				<view class="rdli-label">退款原因：</view>
				<view class="rdli-content">{{details.refundReason}}</view>
			</view>
			<view class="refund-details-list-item" v-if="details.images && details.images.length > 0">
				<view class="rdli-label">图片：</view>
				<view class="rdli-content">
					<u-lazy-load class="image" v-for="(item, index) in details.images" :key="index" :image="item"
						img-mode="aspectFill"></u-lazy-load>
				</view>
			</view>
		</view>
		<view class="apply-button" v-if="details.refundStatus === 0">
			<u-button type="primary" disabled>申请中</u-button>
		</view>
		<view class="apply-button" v-if="details.refundStatus === 0">
			<u-button type="primary" @click="jumpPage('pages/center/order/order')">返回列表页</u-button>
		</view>
		<view class="refund-details-status" v-if="details.refundStatus === 2">
			<view class="refund-details-status-item">
				<view>处理时间：</view>
				<view>{{details.auditTime}}</view>
			</view>
			<view class="refund-details-status-item">
				<view>处理结果：</view>
				<view v-if="details.refundStatus === 1">已通过</view>
				<view v-if="details.refundStatus === 2">已驳回</view>
			</view>
			<view class="refund-details-status-item">
				<view>备注：</view>
				<view>{{details.refuseReason}}</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {}
			}
		},
		onLoad(page) {
			this.getOrderRefundDetails(page.orderId)
		},
		methods: {
			getOrderRefundDetails(orderId) {
				this.$u.api.getOrderRefundDetails({
						orderId: orderId
					})
					.then(res => {
						if (res.code === 200) {
							this.details = res.data
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
					.catch(err => {
						this.$refs.uToast.show({
							title: '操作失败',
							type: 'error'
						})
					})
			},
			jumpPage(url) {
				this.$u.route({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './applyRefundDetails.scss';
</style>