sz-kjsxy-wx-new/packages/mybook/detail.vue

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<view class="wrap-item">
				<view>
					<text>预约日期</text>
					<text>{{info.date}}</text>
				</view>
				<view>
					<text>时间段</text>
					<text>{{formatTime(info.start_time)}}-{{formatTime(info.end_time)}}</text>
				</view>
				<view>
					<text>预约场地</text>
					<text>{{info.appointment_config.name}}</text>
				</view>
				<view>
					<text>预约事项</text>
					<text>{{info.content?info.content:''}}</text>
				</view>
				<view>
					<text>车牌</text>
					<text>{{info.plate?info.plate:''}}</text>
				</view>
				<view>
					<text>同行人数</text>
					<text>{{info.accompany_total>0?info.accompany_total:''}}</text>
				</view>
				<view v-if="info.accompany_total>0">
					<text>同行人员</text>
					<text>
						<block v-if="info.appointment_accompany && info.appointment_accompany.length>0">
							<text v-for="appo in info.appointment_accompany">{{appo.name}}、</text>
						</block>
					</text>
				</view>
				<view>
					<text>状态</text>
					<text>{{info.status_text}}</text>
				</view>
			</view>

			<view v-if="info.reason" class="wrap-item">
				<view>
					<text>审核意见</text>
					<text>{{info.reason}}</text>
				</view>
			</view>
			
			<view v-if="info.status===1" class="wrap-code">
				<view  style="display: flex;justify-content: center;margin-top:40rpx">
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="info.code" :sizeUnit="'rpx'" :size="400"
						:options="{ 
						margin: 10,
						foregroundImageSrc: '/static/index_icon1.png',
					 }"></uqrcode>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'
	
	export default {
		components: {
			uqrcode
		},
		data() {
			return {
				info: {},
				passcode:''
			}
		},
		onLoad(options) {
			this.getBookDetail(options.id)
		},
		methods: {
			async getBookDetail(id) {
				const res = await this.$u.api.scheduleDetail({
					id: id
				})
				this.info = res
			},
			formatTime(val) {
				if (val) {
					return this.$moment(val).format("HH:mm")
				} else {
					return ''
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		width: 100%;
		height: 100vh;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.wrap {
			position: relative;
			height: 100%;
			overflow: scroll;

			&-item {
				border-radius: 20rpx;
				background-color: #fff;
				padding: 30rpx;
				margin-bottom:30rpx;
				&>view{
					font-size: 28rpx;
					color:#666666;
					margin-bottom:30rpx;
					display: flex;
					&>text:first-child{
						color:#333;
						width:180rpx;
						display: inline-block;
						font-weight: bold;
					}
					&>text:last-child{
						width: calc(100% - 180rpx);
					}
				}
			}
		}
	}
</style>