xusfood_client/center/paycode.vue

<template>
	<view class="pages">
		<u-navbar
			title="会员码"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<img class="bg" :src="staticUrl+'/img/paycode-bg.png'" alt="">
		<view class="content">
			<view class="avatar-wrap">
				<u-avatar :src="vuex_member_info.avatar||staticUrl+'/img/avatar.png'" size="138rpx"></u-avatar>
			</view>
			<view class="name">{{vuex_member_info.name}}</view>
			<img class="qrcode-bg" :src="staticUrl+'/img/qrcode-bg.png'" alt="">
			<!-- <img class="qrcode" :src="staticUrl+'/img/paycode-bg.png'" alt=""> -->
			<view class="ayQrcode" @click="refreshCode">
				<ayQrcode ref="qrcode" :modal="modal_qr" :url="qrContent" @hideQrcode="hideQrcode" :height="200" :width="200" />
			</view>
			<view class="tip u-flex u-row-center"  @click="refreshCode">
				<img class="refresh-ico" :src="staticUrl+'/img/refresh.png'" alt="">
				<text>会员码每30秒自动更新，请在店内消费使用</text>
			</view>
		</view>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		components:{
			ayQrcode
		},
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				modal_qr: false,
				qrContent: {}, // 要生成的二维码值
				params:{
					
				},
				timer: null,
				
			}
		},
		onShow() {
		},
		onLoad() {
			this.qrContent.qrcode = this.vuex_member_info.id;
			this.qrContent.time = Date.now();
			this.qrContent = JSON.stringify(this.qrContent);
			let that = this;
			that.showQrcode();//一加载生成二维码
			this.timer = setInterval(() => {
			  this.refreshCode()
			}, 30000);
		},
		onUnload() {
		    // 页面离开时停止计时器
		    clearInterval(this.timer)
		},
		methods: {
			// 展示二维码
			showQrcode() {
				let _this = this;
				this.modal_qr = true;
				// uni.showLoading()
				setTimeout(function() {
					// uni.hideLoading()
					_this.$refs.qrcode.crtQrCode()
				}, 50)
			},

			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
			refreshCode(){
				this.qrContent = {};
				this.qrContent.qrcode = this.vuex_member_info.id;
				this.qrContent.time = Date.now();
				this.qrContent = JSON.stringify(this.qrContent);
				this.showQrcode()
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg{
	position: fixed;
	width: 100%;
	height: 100vh;
	height: -webkit-fill-available;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.content{
	position: relative;
	text-align: center;
	background-color: #fff;
	border-radius: 8rpx;
	margin: 150rpx 20rpx 0;
	padding: 90rpx 50rpx 80rpx;
}
.avatar-wrap{
	position: absolute;
	left: 50%;
	top: -69rpx;
	transform: translateX(-69rpx);
	background-color: #fff;
	padding: 11rpx;
	border-radius: 50%;
}
.name{
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
	line-height: 45rpx;
	margin-bottom: 40rpx;
}
// .qrcode{
// 	position: absolute;
// 	top: 211rpx;
// 	left: 102rpx;
// 	width: 506rpx;
// 	height: 506rpx;
// }
.ayQrcode{
	position: absolute;
	top: 211rpx;
	left: 170rpx;
	width: 400rpx;
	height: 400rpx;
}
.tip{
	margin-top: 40rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 33rpx;
	.refresh-ico{
		width: 27rpx;
		height: 27rpx;
		margin-right: 10rpx;
	}
}
</style>