pages/sub_index/qrcode.vue

<template>
	<view class="qrcode">
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar title="我的码" :background="background" title-color="#ffffff" :border-bottom="false" back-icon-color="#Ffffff"></u-navbar>
		<!-- #endif -->
		<view class="qrcode-con">
			<view class="qrcode-con-con">
				<view class="qrcode-con-con-title">
					<u-icon name="money" color="#2FA8E1" size="36" custom-prefix="custom-icon"></u-icon>
					<text>消费支付或身份认证</text>
				</view>
				<view class="qrcode-con-con-qrcode">
					<text class="qrcode-con-con-qrcode-desc">扫描二维码支付或认证身份</text>
					<canvas canvas-id="qrcode" style="width: 250px;height: 250px;" v-if="show" />
					<u-empty text="暂无二维码" mode="list" :show="!show"></u-empty>
					<text>二维码每15s刷新一次</text>
					<view class="qrcode-con-con-qrcode-box" @click="isSigned">
						<u-icon name="reflash" color="#666666" size="40" custom-prefix="custom-icon" label="刷新" label-size="36"></u-icon>
					</view>
				</view>
				<view class="qrcode-con-con-footer">
					<u-icon name="id" color="#666666" size="36" custom-prefix="custom-icon"></u-icon>
					<view class="qrcode-con-con-footer-desc">
						<text class="qrcode-con-con-footer-desc-card">市民卡</text>
						<text class="qrcode-con-con-footer-desc-no">{{cardid}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import uQRCode from '@/static/js/uqrcode.js'
	export default {

		data() {
			return {
				val: "",
				cardid: "",
				background: {
					'background': 'no'
				},
				show: "",
				setInter: ""

			}
		},
		onLoad() {
			let that = this
			that.cardid = uni.getStorageSync('cardno') ? uni.getStorageSync('cardno') : '暂无市民卡号信息'
			// #ifndef H5
			that.isSigned()
			uni.getScreenBrightness({
				success: function(res) {
					that.val = res.value
				}
			});
			uni.setScreenBrightness({
				value: 1,
				success: function() {
					// console.log('success');
				}
			});
			// #endif
		},
		methods: {
			isSigned() {
				let that = this
				let signed = uni.getStorageSync("signed")
				if (!signed) {
					uni.showModal({
						title: "提示",
						content: "您还未绑定签约,无法使用二维码消费",
						cancelText: "再等等",
						confirmText: "去绑定",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/sub_mine/bindBankCard"
								})
							}
						}
					})
					return false
				}
				that.getQrcode()
				clearInterval(that.setInter)
				that.setInter = setInterval(() => {
					that.getQrcode()
				}, 15 * 1000)
			},
			getQrcode() {
				let that = this
				let param = {
					version:app.globalData.version
				}
				that.$u.post("/v1/qrcode", param).then((res) => {
					that.show = true
					uQRCode.make({
						canvasId: 'qrcode',
						componentInstance: this,
						text: res.qrcode,
						size: 250,
						margin: 10,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						fileType: 'jpg',
						correctLevel: uQRCode.errorCorrectLevel.H,
						success: res => {
							// console.log(res)
						}
					})
				}).catch(res => {
					that.show = false
				})
			},
		},
		onUnload() {
			// #ifndef H5
			let that = this
			clearInterval(that.setInter)
			uni.setScreenBrightness({
				value: that.val,
				success: function() {
					// console.log('success');
				}
			});
			// #endif
		}
	}
</script>

<style scoped lang="scss">
	.qrcode {
		width: 100vw;
		height: 100vh;
		background-color: #2FA8E1;

		&-con {
			padding: 30rpx;

			// border-radius: 20rpx;
			&-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #FFFFFF;

				text {
					font-family: "PingFang-SC-Medium";
					font-size: 32rpx;
				}
			}

			&-con {
				margin-top: 100rpx;
				font-family: "PingFang-SC-Medium";

				&-title {
					background-color: #F7F7F7;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					padding: 30rpx;
					color: #2FA8E1;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;

					text {
						margin-left: 10rpx;
					}
				}

				&-qrcode {
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #999999;
					font-size: 26rpx;
					padding: 30rpx 50rpx;
					border-width: 1rpx;
					border-style: solid;
					border-color: #CCCCCC;

					&-desc {
						margin-bottom: 30rpx;
					}

					&-box {
						margin-top: 30rpx;
						display: flex;
						align-items: center;

						text {
							margin-left: 10rpx;
							color: #666666;
						}
					}
				}

				&-footer {
					background-color: #FFFFFF;
					display: flex;
					align-items: flex-start;
					padding: 30rpx;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;

					&-desc {
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;

						&-no {
							color: #999999;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>