hotelHomestayWx/pagesHouse/home/orderBillDetail.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="账单详情"></c-nav-bar>
		<view class="box">
			<image src="https://i.ringzle.com/file/20240224/d2b9acd9522747ac89239dcde0894c93.png"></image>
			<text class="tit">{{infoMation.thingName}}</text>
			<text class="money">+<text>{{infoMation.price}}</text></text>
		</view>
		<view class="info">
			<view class="li">
				<text >当前状态</text>
				<text>{{infoMation.state==''?'':status[infoMation.state]}}</text>
			</view>
			<view class="li">
				<text>创建时间</text>
				<text>{{infoMation.orderTime}}</text>
			</view>
			<view class="li">
				<text>订单号</text>
				<text>{{infoMation.orderCode}}</text>
			</view>
			<!-- <view class="li">
				<text>交易类型</text>
				<text>结算提现</text>
			</view> -->
			<view class="li">
				<text>商品名称</text>
				<text>{{infoMation.thingName}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				infoMation: {
					thingName: '',
					price:0,
					orderCode:'',
					orderTime:'',
					state:''
				},
				status: {
					'0': '待支付',
					'1': '已支付',
					'-1': '已取消',
					'-2': '退款中',
					'-3': '已退款',
					'3': '已完成',
					'4': '待使用',
					'5': '已预约'
				}
			}
		},
		onLoad(option) {
			console.log(option)
			const info = JSON.parse(decodeURIComponent(option.info ? option
				.info : infoMation));
			this.infoMation = info;
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: calc(100% - 80rpx);
		padding: 30rpx 0 60rpx;
		color: #333;
		border-bottom: 1rpx solid #EFEFEF;
		text-align: center;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		text {
			display: block;

		}

		.tit {
			margin: 26rpx 0 14rpx;
			font-size: 26rpx;
		}

		.money {
			font-size: 28rpx;

			text {
				display: inline-block;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}

	.info {
		padding: 60rpx 40rpx 0;

		.li {
			margin-bottom: 32rpx;

			text {
				&:first-child {
					display: inline-block;
					width: 104rpx;
					color: #999;
				}

				margin-right: 40rpx;
				color: #111;
			}
		}
	}
</style>