discounts-minapp/detail/qrcode/index.vue

<template>
	<view class="qrcode-page">
		<image class="top-bg" src="../../static/top-bg.png" mode=""></image>
		<view class="container">
			
			<!-- 二维码 -->
			<uqrcode ref="uqrcode" type="2d" canvas-id="qrcode" value="12343245" :loading="loading" :options="{ margin: 20 }">
				 <template v-slot:loading>
					<text style="color: black;">拼命加载中...</text>
				  </template>
			</uqrcode>
			
			<view class="notice">
				出示二维码给商家扫码验证
			</view>
			
			<button class="save-btn" type="default" @click="save">我已验证</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false
			}
		},
		methods: {
			save() {
				uni.navigateBack({
					fail() {
						this.$router.go(-1)
					}
				})
			}
		},
		onLoad() {
			// setTimeout(()=>{
			// 	this.loading = false
			// },5000)
		}
	}
</script>

<style lang="scss" >
.qrcode-page{
	
	background: #F9F9F9;
	.top-bg{
		width: 750rpx;
		height: 406rpx;
	}
	.container{
		margin: 0 30rpx;
		padding: 120rpx 0;
		background: #fff;
		border-radius: 32rpx;
		position: relative;
		top: -200rpx;
		.uqrcode{
			margin: 100rpx auto 0;
		}
		.notice{
			text-align: center;
			font-size: 32rpx;
			margin-top: 60rpx;
		}
		.save-btn{
			width: 560rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: $uni-color-primary;
			color: #fff;
			box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
			border-radius: 46rpx;
			margin-top: 80rpx;
		}
	}
}
</style>