MiniScm/subpkg/elevatorControl/elevatorControl.vue

<template>
	<view>
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="梯控二维码" control="back" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="梯控二维码" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
		</view>
		<view class="have-reservation" v-if="Object.keys(checkinInfo).length > 0">
			<view class="info">
				<view class="title">
					<view class="hotel-name">
						<u-text :text="currentHotel.name" bold color="#333333" size="30rpx"></u-text>
					</view>
					<view class="tips">
						<u-text text="入住信息" color="#666666" size="24rpx"></u-text>
					</view>
				</view>
				<view class="checkin-info">
					<view class="checkin-info--item">
						<view class="checkin-info--item--text">
							<u-text text="所在楼层 : " color="#999999" size="26rpx"></u-text>
						</view>
						<view class="checkin-info--item--text">
							<u-text :text="checkinInfo.floor+'楼'" color="#999999" size="26rpx"></u-text>
						</view>
					</view>
					<view class="checkin-info--item">
						<view class="checkin-info--item--text">
							<u-text text="房间信息 : " color="#999999" size="26rpx"></u-text>
						</view>
						<view class="checkin-info--item--text">
							<u-text :text="checkinInfo.room" color="#999999" size="26rpx"></u-text>
						</view>
					</view>
					<view class="checkin-info--item">
						<view class="checkin-info--item--text">
							<u-text text="起始时间 : " color="#999999" size="26rpx"></u-text>
						</view>
						<view class="checkin-info--item--text">
							<u-text :text="formatDateTime(checkinInfo.startTime)" color="#999999" size="26rpx"></u-text>
						</view>
					</view>
					<view class="checkin-info--item">
						<view class="checkin-info--item--text">
							<u-text text="结束时间 : " color="#999999" size="26rpx"></u-text>
						</view>
						<view class="checkin-info--item--text">
							<u-text :text="formatDateTime(checkinInfo.endTime)" color="#999999" size="26rpx"></u-text>
						</view>
					</view>
				</view>
			</view>

			<view class="qrcode" :style="{width: qrCodeWidth, height: qrCodeWidth, display: showQRCode ? '' : 'none'}">
				<img style="width: 100%; height: 100%;" :src="getUrl()" />
			</view>

			<view class="prompt" :style="{width: diaplayWidth}">
				<view class="prompt--text" v-if="showPrompt">
					<text>
						请将梯控二维码正对扫描框进行梯控识别
					</text>
					<text style="margin-top: 10rpx;">
						{{ `该二维码将在${waitTime}分钟后失效` }}
					</text>
				</view>
				<view v-if="!showPrompt">
					<button class="prompt--count-down__button" @click="rerenderQrCode">二维码失效，点击重新生成二维码</button>
				</view>
			</view>
		</view>
		<view v-else class="not-reservation">
			<u-text class="tip" text="您还未入住!" align="center"></u-text>
			<u-text class="tip" text="若已退房或房间到期,请至前台办理" align="center"></u-text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		getCheckinInfo,
		getElevatorQRCode,
	} from "../../utils/api";
	import moment from "moment";
	import {
		QRCodeSVG
	} from '../../utils/qrCode/qrcode/src/index';
	import svgToDataURL from "svg-to-dataurl";
	import {
		IMG_BASE_URL
	} from "../../config"
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				checkinInfo: {},
				qrCodeDate: "",
				qrCode: "",
				diaplayWidth: "",
				qrCodeWidth: "",
				showQRCode: false,
				loadedTime: null,
				waitTime: 10,
				showPrompt: false
			}
		},
		computed: {
			...mapState("m_business", ["currentHotel"]),
			...mapState("m_user", ["userInfo"])
		},
		methods: {
			getUrl() {
				return svgToDataURL(this.qrCode)
			},
			formatDateTime(dateTime) {
				return moment(dateTime).format("YYYY年MM月DD日HH时mm分");
			},
			timeCountDown() {
				const that = this
				let intervalId = setInterval(() => {
					that.waitTime--
					if (that.waitTime === 0) {
						that.showPrompt = false
						that.showQRCode = false
						clearInterval(intervalId)
					}
				}, 60000)
			},
			async renderQRCode() {
				const qrCodeMsg = await getElevatorQRCode({
					hotelId: this.currentHotel.hotelId,
					building: 1,
					floor: this.checkinInfo.floor,
					customerId: this.userInfo.idNumber,
					customerType: 1,
					status: 1,
					activeTime: moment().add(10, "m")
				})
				// console.log("qrCodeMsg", qrCodeMsg);
				if (!qrCodeMsg.data.success || !qrCodeMsg.data.data.data) {
					console.log("获取梯控二维码data数据失败", qrCodeMsg.data);
					uni.showModal({
						title: "获取梯控二维码失败",
						content: "获取梯控二维码失败，请检查网络连接后重试。",
					});
					return
				}
				this.qrCodeDate = qrCodeMsg.data.data.data
				// console.log("获取qrCodeDate", this.qrCodeDate);

				this.$nextTick(async () => {
					let picBase64 = ""
					// #ifdef MP-WEIXIN
					let pic = await uni.request({
						url: `${IMG_BASE_URL}/yun_xiang_zhu_square.png`,
						responseType: 'arraybuffer',
					})
					// console.log("pic",pic);
					picBase64 = "data:image/png;base64," + Buffer.from(pic[1].data).toString('base64');
					// #endif

					// #ifdef MP-ALIPAY
					let picRes = await uni.request({
						url: `${IMG_BASE_URL}/yun_xiang_zhu_square.png`,
						dataType: "base64"
					})
					picBase64 = picRes[1].data
					// #endif

					const qrSvg = new QRCodeSVG(
						this.qrCodeDate, {
							padding: 0,
							image: {
								source: picBase64,
								width: '25%',
								height: '25%',
								x: 'center',
								y: 'center',
								border: 1
							},
							level: "M"
						}
					)
					this.qrCode = qrSvg.toString()
					this.showQRCode = true
					this.timeCountDown()
				})
			},
			async rerenderQrCode() {
				await this.renderQRCode()
				this.waitTime = 10
				this.showPrompt = true
			}
		},
		async onLoad() {
			// 获取入住记录
			let {data: infoRes} = await getCheckinInfo(this.currentHotel.hotelId)
			console.log("获取入住记录", infoRes);

			if (infoRes.code !== 200 || !infoRes.success || !infoRes.data) {
				console.log("获取入住记录失败", infoRes);
				return
			}

			this.checkinInfo = infoRes.data;
			// console.log("入住记录", this.checkinInfo);

			// #ifdef MP-WEIXIN
			const wxSystemInfo = await wx.getSystemInfo()
			// console.log("systeminfo", systemInfo.screenWidth);
			this.diaplayWidth = (wxSystemInfo.screenWidth - 40).toFixed() + "px"
			this.qrCodeWidth = (wxSystemInfo.screenWidth * 3 / 5).toFixed() + "px"
			// #endif

			// #ifdef MP-ALIPAY
			let alipaySystemInfo = await uni.getSystemInfo()
			alipaySystemInfo = alipaySystemInfo[1].screen
			// console.log("alipaySystemInfo",alipaySystemInfo);
			this.diaplayWidth = (alipaySystemInfo.width - 40).toFixed() + "px"
			this.qrCodeWidth = (alipaySystemInfo.width * 3 / 5).toFixed() + "px"
			// #endif

			await this.renderQRCode()
			this.showPrompt = true
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;

		.have-reservation {

			.info {
				background: #F5F8FE;
				box-shadow: -6px 17px 21px 0px rgba(112, 152, 246, 0.14);
				margin-bottom: 80rpx;

				.title {
					display: flex;
					justify-content: space-between;
					padding: 0 40rpx;
					line-height: 80rpx;
					border-bottom: 2rpx solid #E0E8FB;
				}

				.checkin-info {
					margin: 20rpx auto;

					.checkin-info--item {
						display: flex;
						margin: 0 40rpx;

						.checkin-info--item--text {
							margin: 10rpx;
							margin-left: 0;
						}

						&:last-child {
							padding-bottom: 20rpx;
						}
					}
				}
			}

			.qrcode {
				display: flex;
				margin: 10rpx auto;
				padding: 10rpx 20rpx;
				background: #ffffff;
				border-radius: 10rpx;
			}

			.prompt {
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.prompt--text {
					background-color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 0 20rpx;
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
				}

				.prompt--count-down__button {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 40rpx;
				}
			}
		}
	}

	.not-reservation {
		margin-top: 40%;
	}
</style>