newXLSC/pages/shop/djqQm.vue

<template>
	<view class="content">
		<swiper :indicator-dots="true" 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="cid"
								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';
export default {
	components: {
		tkiQrcode
	},
	data() {
		return {
			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) {
		this.id = opt.id;
		this.loadData();
	},
	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() {}
	}
};
</script>

<style lang="scss">
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>