parking_h5/pages/applyRefundDetails/applyRefundDetails.vue

<template>
	<view class="refund-details">
		<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">
				<view class="rdli-label">图片：</view>
				<view class="rdli-content">
					<view
						class="image"
						v-for="(item, index) in details.images"
						:key="index">
						<image :src="item"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="apply-button" v-if="details.refundStatus === 0">
			<u-button type="primary">申请中</u-button>
		</view>
		<view class="refund-details-status" v-if="details.refundStatus === 2">
			<view class="refund-details-status-item">
				<view>处理时间：</view>
				<view>{{details.applyTime}}</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 => {
						console.log(res)
						if (res.code === 200) {
							this.details = res.data
						}
					})
					.catch(err => {
						this.$refs.uToast.show({
							title: '操作失败',
							type: 'error'
						})
					})
			}
		}
	}
</script>

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