mp-ui-user/pages/prize/detail.vue

<template>
	<view>
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="卡券详情"></u-navbar>
		<view class="detail">
			<view class="flex detail-item">
				<image src="../../static/icon/coupon.png" mode=""></image>
				<view class="flex info">
					<view class="flex desc">
						<view class="title">{{ info.title }}</view>
						<view class="txt">使用期限：{{ $parseTime(info.validStart, '{y}.{m}.{d}') }}-{{ $parseTime(info.validEnd, '{y}.{m}.{d}') }}</view>
						<view class="txt">使用范围：{{ info.useAreaDesc || '-' }}</view>
					</view>
					<view class="flex btn">
						<view class="amt"><text>￥</text>{{ info.discount / 100 }}</view>
					</view>
				</view>
			</view>
			<view class="flex detail-code">
				<canvas style="width: 220px;height: 220px;" canvas-id="couponQrcode"></canvas>
			</view>
			<view class="detail-explain">
				<view class="txt">使用说明：</view>
				<view class="txt">{{ info.description }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const qrCode = require('@/common/weapp-qrcode.js')
	export default {
		data() {
			return {
				info: {}
			};
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中'
			});
			this.info = JSON.parse(options.info)
			setTimeout(() => {
				uni.hideLoading();
				this.couponQrCode()
			}, 50)
		},
		methods: {
			// 二维码生成工具
			couponQrCode() {
				new qrCode('couponQrcode', {
					text: this.info.verifyCode,
					width: 213,
					height: 213,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		margin: 20rpx;
		padding: 26rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		&-item {
			justify-content: space-between;
			padding-bottom: 26rpx;
			border-bottom: 1px dashed rgba(236, 236, 236, 100);

			image {
				width: 120rpx;
				height: 106rpx;
			}

			.info {
				position: relative;
				justify-content: space-between;
				flex: 1;
			}

			.desc {
				height: 106rpx;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				padding-left: 20rpx;
			}
			
			.title{
				font-weight: bold;
			}

			.txt {
				font-size: 24rpx;
			}

			.btn {
				flex-direction: column;
			}

			.amt {
				font-size: 48rpx;
				font-weight: bold;
				line-height: 72rpx;
			}

			text {
				font-size: 24rpx;
			}
		}

		&-code {
			width: 100%;
			height: 550rpx;
		}

		&-explain {
			font-size: 24rpx;

			.txt {
				line-height: 50rpx;
			}
		}
	}
</style>