cgst/pages/user/djqQm.vue

<template>
	<view class="content">
		<swiper class="box">
			<swiper-item class="djq-wrap">
				<view>
					<view class="djq-top flex f-d-c f-j-c">
						<view class="djq-name">{{ item.product_info.store_name }}</view>
						<view class="djq-time">{{ item.valid_time | showTime }}</view>
					</view>
					<view class="djq-body">
						<view class="ewm">
							<tki-qrcode
								:cid="'aaa'"
								ref="qrcode"
								:val="item.code"
								: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">{{ item.code }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import { view_order } from '@/api/order.js';
import { getYhqDetail } from '@/api/user.js';
export default {
	components: {
		tkiQrcode
	},
	filters: {
		showTime(val) {
			let str = '';
			if (val == 0) {
				str = '永久有效';
			}
			if (val) {
				var time = new Date(val * 1000);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				str = '有效期至：' + y + '年' + m + '月' + d + '日';
				console.log(str);
			}
			return str;
		}
	},
	data() {
		return {
			code: '',
			item: {},
			id: '',
			cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
			size: 440, //生成的二维码大小
			unit: 'upx', //大小单位尺寸
			show: true, //默认使用组件中的image标签显示二维码
			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(opt) {
		if (opt.id) {
			this.id = opt.id;
			this.loadData();
		}
		if (opt.code) {
			this.code = opt.code;
			this.getYhqDetail();
		}
	},
	onShow() {},
	onReachBottom() {},
	onReady() {},
	methods: {
		loadData() {
			const obj = this;
			getYhqDetail({}, this.id).then(({ data }) => {
				obj.item = data.item;
				console.log(obj.item, '123456');
			});
		}
	}
};
</script>

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

.box {
	width: 696rpx;
	margin: auto;
	height: 1060rpx;
}

.djq-wrap {
	width: 696rpx;
	background-color: #fff;
	position: relative;
	margin: auto;
	margin-top: 100rpx;

	.djq-top {
		flex-direction: column;
		justify-content: center;
		height: 185rpx;
		background: #f5f5f5;
		overflow: hidden;

		.djq-name {
			padding: 0 60rpx;
			font-size: 44rpx;
			font-weight: bold;
			text-align: center;
			color: #222222;
		}

		.djq-time {
			margin-top: 20rpx;
			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;
		}

		.used {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 99;
			height: 440rpx;
			width: 440rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

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

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