newXLSC/pages/shop/djqQm.vue

<template>
	<view class="content">
		<swiper :indicator-dots="list.length > 1" class="box">
			<swiper-item class="djq-wrap" v-for="(item, index) in list">
				<view>
					<view class="djq-top flex f-d-c f-j-c">
						<view class="djq-name">{{ item.coupon_title }}</view>
						<view class="djq-time">{{ item.end_time == 0 ? '永久有效' : '有效期至' + item.end_time }}</view>
					</view>
					<view class="djq-body">
						<view class="used" v-if="item.status == 1">
							<image src="../../static/img/ysy.png" mode=""></image>
						</view>
						<view class="used" v-if="item.status == 2">
							<image src="../../static/img/ygq.png" mode=""></image>
						</view>
						<view class="ewm">
							<tki-qrcode :cid="'aaa' + index" 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/shop.js'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				code: '',
				list: [],
				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;
				view_order({
					order_id: this.id
				}).then(({
					data
				}) => {
					this.list = data.coupon;
					console.log(this.list);
				});
			},
			qrR() {},
			getYhqDetail() {
				let obj = this
				getYhqDetail({
					code: obj.code
				}).then(res => {
					console.log(res)
					obj.list.push(res.data)
				})
			}
		}
	};
</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 {
			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;
			}

			.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>