xxl/pages/shop/djqQm.vue

<template>
	<view class="content">
		<view class="" style="height: 87rpx;">

		</view>
		<view class="djq-wrap">
			<view class="djq-top flex f-d-c f-j-c">
				<view class="djq-name">
					地锅传奇50元代金券
				</view>
				<view class="djq-time">
					有效期至2022-12-30 23:00:00
				</view>
			</view>
			<view class="djq-body">
				<view class="ewm">
					<tki-qrcode :cid="cid" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
						:foreground="foreground" :pdground="pdground" :iconSize="iconSize" :lv="lv" :onval="onval"
						:loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
				</view>
				<view class="ewm-code">
					10250035810
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 440, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				show: true, //默认使用组件中的image标签显示二维码
				val: '要生成的内容', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading
				loadingText: '二维码生成中', //loading文字
				src: '', // 二维码生成后的图片地址或base64
				ratio: 1, //页面比例用于计算
				ctxSrc: '', //要显示的图片
				loading: true, //是否载入图片中
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f9e24f;
	}

	.djq-wrap {
		width: 696rpx;

		background-color: #fff;
		position: relative;
		margin: auto;

		.djq-top {
			height: 185rpx;
			background: #F5F5F5;
			overflow: hidden;

			.djq-name {
				font-size: 44rpx;
				font-weight: bold;
				color: #222222;
			}

			.djq-time {
				font-size: 24rpx;
				font-weight: 500;
				color: #686868;
			}

			&::after,
			&::before {
				content: '';
				height: 120rpx;
				width: 120rpx;
				border-radius: 50%;
				position: absolute;
				top: -60rpx;
				background-color: #f9e24f;
			}

			&::before {
				left: -60rpx;
			}

			&::after {
				right: -60rpx;
			}
		}

		.djq-body {
			height: 770rpx;
			position: relative;
			padding-top: 115rpx;

			&::after,
			&::before {
				content: '';
				height: 120rpx;
				width: 120rpx;
				border-radius: 50%;
				position: absolute;
				bottom: -60rpx;
				background-color: #f9e24f;
			}

			&::before {
				left: -60rpx;
			}

			&::after {
				right: -60rpx;
			}

			.ewm {
				width: 440rpx;
				height: 440rpx;
				margin: auto;
			}

			.ewm-code {
				padding-top: 55rpx;
				font-size: 44rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}
		}


	}
</style>