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" @click="showBigCode">
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="code" :sizeUnit="'rpx'" :size="400" :options="{ 
						margin: 10,
						foregroundImageSrc: '/static/index_icon1.png',
					 }"></uqrcode>
				</view>
				<view class="modal-xyk-item-reload" @click="refreshCode(book_id)">
					<!-- <image :src="base.imgHost('me-reload.png')"></image> -->
					<view>点击刷新二维码</view>
				</view>
			</view>
		</view>
		<view v-if="bigCode" class="big">
			<view class="big-wrap">
				<view class="big-close" @click='bigCode=false'>X</view>
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="code" :sizeUnit="'rpx'" :size="500" :options="{ 
					margin: 10,
					foregroundImageSrc: '/static/index_icon1.png',
				 }"></uqrcode>
			</view>
		</view>
	</view>
</template>

<script>
	import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'

	export default {
		components: {
			uqrcode
		},
		data() {
			return {
				info: {},
				passcode: '',
				book_id: '',
				code: '',
				bigCode: false,
				timer:null
			}
		},
		onLoad(options) {
			let that = this
			this.book_id = options.id
			this.getBookDetail(options.id)
			if(!this.timer){
				this.timer = setInterval(function(){
					that.refreshCode(that.book_id)
				},3*60*1000)
			}
		},
		onUnload() {
			if(this.timer){
				clearInterval(this.timer)
				this.timer = null
			}
		},
		methods: {
			async getBookDetail(id) {
				const res = await this.$u.api.scheduleDetail({
					id: id
				})
				this.info = res
				this.code = res.qrcode
			},
			async refreshCode(id) {
				uni.showLoading({
					title: '...'
				})
				const res = await this.$u.api.scheduleDetail({
					id: id
				})
				this.code = res.qrcode
				setTimeout(function() {
					uni.hideLoading()
				}, 500)
			},
			showBigCode() {
				this.bigCode = true
			},
			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);
					}
				}
			}
		}

		.modal-xyk-item-reload {
			display: flex;
			align-items: center;
			padding: 30rpx 40rpx;
			font-size: 40rpx;
			justify-content: center;

			image {
				width: 27rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}
		}

		.big {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.7);
			overflow: scroll;

			&-wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 500rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}

			&-close {
				width: 80rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				background: #6e6e77;
				border-radius: 80rpx;
				position: absolute;
				top: -80rpx;
				right: 0;
			}
		}
	}
</style>