fny-ugd-palace-uniapp/pages/signs/invitation/invitation.vue

<template>
	<view class="sign-page">
		<view class="view-wrap">
			<view class="box-head">
				<view class="name">已预约完成</view>
			</view>
			<view class="box-timer">
				<view class="icon"></view>
				<view class="label">有效期倒计时：</view>
				<view class="text">{{timeObj.d}}</view>
				<view class="unit">天</view>
				<view class="text">{{timeObj.h}}</view>
				<view class="unit">时</view>
				<view class="text">{{timeObj.m}}</view>
				<view class="unit">分</view>
				<view class="text">{{timeObj.s}}</view>
				<view class="unit">秒</view>
			</view>
			<view class="qr-cord-wrap">
				<view class="qr-cord-img">
					<canvas class="inner-img" canvas-id="mycanvas" type="2d" id="myCanvas"></canvas>
					<!-- <image class="inner-img" src="" mode="aspectFit"></image> -->
				</view>
				<view class="qr-cord-text">
					{{code}}
				</view>
			</view>
			<view class="button-wrap">
				<button type="default" class="u-reset-button sing-btn" @click="goBack">
					返回我的
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs/dayjs.min.js'
	import QRCode from 'qrcode'
	import Utils from 'qrcode/lib/renderer/utils.js'
	export default {
		data() {
			let d = '00',h = '00',m = '00',s = '00';
			return {
				code: '',
				timeObj: {d,h,m,s},
				qrcode: ''
			};
		},
		mounted() {
			// this.initTimes()
		},
		destroyed(){
			if(this.timer){
				clearInterval(this.timer)
			}
		},
		onLoad(query) {
			const {code, visitDate, visitTime} = query;
			this.code = code;
			this.createCanvas(code)
			// 时间倒计时
			this.initDate(visitDate, decodeURIComponent(visitTime))
			this.timer = setInterval(() => {
				this.initDate(visitDate, decodeURIComponent(visitTime))
			}, 1000)
		},
		methods: {
			addZero(i){
			  return i < 10 ? "0" + i: i + "";
			},
			initDate(date, time){
				const endtime = dayjs(date + ' ' + time).unix() * 1000
				var nowtime = new Date().getTime();
				let d = '00',h = '00',m = '00',s = '00';
				if(nowtime > endtime){
					return {d,h,m,s}
				}
				var lefttime = parseInt((endtime - nowtime) / 1000);
				
			    d = parseInt(lefttime / (24*60*60))
			    h = parseInt(lefttime / (60 * 60) % 24);
			    m = parseInt(lefttime / 60 % 60);
			    s = parseInt(lefttime % 60);
				
				d = this.addZero(d)
			    h = this.addZero(h);
			    m = this.addZero(m);
			    s = this.addZero(s);
				
				this.timeObj = {d,h,m,s}
			},
			goBack(){
				this.$u.route({
					url: '/pages/signs/me/me',
					type: "switchTab",
					params: {
					}
				})
			},
			createCanvas(code) {
				const query = wx.createSelectorQuery()
				query.select('#myCanvas')
				  .fields({ node: true, size: true })
				  .exec((res) => {
					const canvas = res[0].node
					QRCode.toCanvas(canvas, code, function (error) {
					  if (error) console.error(error)
					  console.log('success!');
					})
				  })
			}
		},
	}
</script>

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