security_study_h5/center/paycode.vue

<template>
	<view class="pages">
		<u-navbar
			title="兑换码"
			:placeholder="true"
			:autoBack="true"
			@leftClick="leftClick"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>

		<view class="avatar-wrap u-flex">
			<u-avatar :src="vuex_member_info.avatar||'/static/img/defaultavatar.png'" size="138rpx"></u-avatar>
		</view>
		<view class="name">{{vuex_member_info.name}}</view>
		<view class="ayQrcode">
			<view class="code">
				数字码：{{code}}
			</view>
			<ayQrcode ref="qrcode" :modal="modal_qr" :url="qrContent" @hideQrcode="hideQrcode" :height="200" :width="200" />
		</view>

	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		components:{
			ayQrcode
		},
		data() {
			return {
				code:'',
				staticUrl:this.$commonConfig.staticUrl,
				modal_qr: false,
				qrContent: {}, // 要生成的二维码值
				params:{
					
				},
				timer: null,
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.code = page.qrContent;
			this.qrContent.qrcode = page.qrContent;
			this.qrContent = JSON.stringify(this.qrContent);
			let that = this;
			that.showQrcode();//一加载生成二维码
			// this.timer = setInterval(() => {
			//   this.refreshCode()
			// }, 30000);
		},
		onUnload() {
		    // 页面离开时停止计时器
		    // clearInterval(this.timer)
		},
		methods: {
			leftClick(){
				 // uni.reLaunch({url: `/pages/index/index`});
			},
			// 展示二维码
			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.code;
				this.qrContent = JSON.stringify(this.qrContent);
				this.showQrcode()
			}
		}
	}
</script>
<style>
	page{
		background-color: #009AEF;
	}
</style>
<style lang="scss" scoped>

.avatar-wrap{
	margin-top: 42rpx;
	margin-bottom: 8rpx;
	justify-content: center;
}
.name{
	font-size: 34rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 48rpx;
	text-align: center;
	margin-bottom: 60rpx;
}
.ayQrcode{
	position: relative;
	background-color: #fff;
	margin: 40rpx 60rpx 20rpx;
	padding: 40rpx 40rpx 100rpx;
	border-radius: 20rpx;
	text-align: center;
	.code{
		padding-bottom: 38rpx;
		border-bottom: 1px dashed #ddd;
		margin-bottom: 90rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
	}
	.show-qrcode{
		overflow: hidden;
		display: flex;
		justify-content: center;
		/deep/ .box-qrcode{
			margin-left: 25px!important;
		}
	}
	&:before,&:after{
		content: '';
		width: 40rpx;
		height: 40rpx;
		background-color: #009AEF;
		position: absolute;
		top: 100rpx;
		border-radius: 50%;
	}
	&:before{
		left: -20rpx;		
	}
	&:after{
		right: -20rpx;
	}
}
.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>