xusfood_h5/center/paycode.vue

<template>
	<view class="pages">
		<u-navbar
			title="推广码"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="content">
			<view class="ayQrcode" @click="refreshCode">
				<ayQrcode 
					ref="qrcode" 
					:modal="modal_qr" 
					:url="qrContent" 
					@hideQrcode="hideQrcode" 
					:is_themeImg="true"
					themeImg="../static/qrlogo.png"
					:h_w_img="65"
					:height="250" :width="250" />
			</view>
			<view class="tip">仅限消费者注册使用</view>
			<text class="save">保存本地</text>
		</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: {}, // 要生成的二维码值
				timer: null,
				
			}
		},
		onShow() {
		},
		onLoad() {
			this.qrContent.qrcode = this.vuex_user_info.userid;
			// this.qrContent.time = Date.now();
			this.qrContent = JSON.stringify(this.qrContent);
			let that = this;
			// this.timer = setInterval(() => {
			//   this.refreshCode()
			// }, 30000);
		},
		onUnload() {
		    // 页面离开时停止计时器
		    // clearInterval(this.timer)
		},
		onReady() {
			let that = this;
			that.showQrcode();//一加载生成二维码
		},
		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_user_info.userid;
				this.qrContent.time = Date.now();
				this.qrContent = JSON.stringify(this.qrContent);
				this.showQrcode()
			}
		}
	}
</script>
<style>
page{
	background-color: #005223;
}
</style>
<style lang="scss" scoped>
.content{
	text-align: center;
	margin: 90rpx 45rpx 24rpx;
	background: #FFFFFF;
	border-radius: 8rpx;
	padding: 100rpx 20rpx;
	box-sizing: border-box;
	.ayQrcode{
		width: 250px;
		height: 250px;
	}
	.tip{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-bottom: 40rpx;
	}
	.save{
		padding: 25rpx 98rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #FFFFFF;
		background-color: #00A447;
		border-radius: 4rpx;
	}
}
</style>