优惠卷和商品卷

2025-03-10 16:33:43 +08:00
parent 70edc6756d
commit 5342133cbd
30 changed files with 2820 additions and 3338 deletions
--- a/pages/user/member/paycode.vue
+++ b/pages/user/member/paycode.vue
@@ -0,0 +1,179 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<text class="t"></text>
+		</view>
+		<view class="code-wrap">
+			<view class="num-wrap">
+				<text class="t">账户余额：</text>
+				<text class="num">{{formInfo.shopInfo.amount || '0'}}</text>
+			</view>
+			<view class="line-code">
+				<canvas id="barcodeCanvas" style="width: 300px; height: 100px;"></canvas>
+			</view>
+			<view class="ewm-wrap">
+				<!-- <tki-qrcode  show :size="qrcodeSize"></tki-qrcode> -->
+				<up-qrcode size="200" :val="formInfo.url" background="#fff" foreground="#000"></up-qrcode>
+			</view>
+			<view class="name">
+				<text>使用门店：{{formInfo.shopInfo.shopName || '--'}}</text>
+			</view>
+			<view class="line"></view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		reactive,
+		watch,
+		nextTick
+	} from 'vue';
+
+	import JsBarcode from "jsbarcode";
+
+	import {
+		APIshopUsercode
+	} from '@/common/api/member.js'
+
+
+	const formInfo = reactive({
+		shopInfo: '',
+		url: '',
+		shopId: ''
+	})
+
+	onMounted(async () => {
+		// 获取当前页面栈
+		const pages = getCurrentPages();
+		// 获取当前页面实例
+		const currentPage = pages[pages.length - 1];
+		// 获取页面参数
+		const pageParams = currentPage.options;
+		formInfo.shopInfo = JSON.parse(decodeURIComponent(pageParams.shopInfo))
+		formInfo.shopId = pageParams.shopId
+		let res = await APIshopUsercode({
+			shopId: pageParams.shopId
+		})
+		console.log(formInfo.shopInfo)
+		if (res) {
+			formInfo.url = res;
+			nextTick(() => {
+			    const barcodeText = '1234567890';
+			    const query = uni.createSelectorQuery();
+			    query.select('#barcodeCanvas')
+			     .fields({ node: true, size: true })
+			     .exec((res) => {
+			        if (res[0]) {
+			          const canvas = res[0].node;
+			          const ctx = canvas.getContext('2d');
+			          const dpr = uni.getSystemInfoSync().pixelRatio;
+			          canvas.width = res[0].width * dpr;
+			          canvas.height = res[0].height * dpr;
+			          ctx.scale(dpr, dpr);
+			
+			          JsBarcode(canvas, barcodeText, {
+			            width: 2,
+			            height: 100,
+			            displayValue: true,
+			            fontOptions: 'bold',
+			            font: 'monospace',
+			            textAlign: 'center',
+			            textPosition: 'bottom',
+			            textMargin: 2,
+			            fontSize: 20,
+			            background: '#ffffff',
+			            lineColor: '#000000'
+			          });
+			        }
+			      });
+			  });
+		}
+	})
+</script>
+
+<style>
+	page {
+		background-color: #eb6c37;
+	}
+</style>
+<style scoped lang="scss">
+	.container {
+		padding: 40upx;
+	}
+
+	.header {
+		display: flex;
+		padding-bottom: 40upx;
+
+		.t {
+			color: #fff;
+			font-size: 32upx;
+			padding-bottom: 20upx;
+			position: relative;
+
+			&::after {
+				content: '';
+				width: 100%;
+				border-bottom: 1upx solid #fff;
+				position: absolute;
+				left: 0;
+				bottom: 0;
+			}
+		}
+	}
+
+	.code-wrap {
+		background-color: #fff;
+		border-radius: 20upx;
+		padding: 40upx;
+		position: relative;
+
+		&::before,
+		&::after {
+			content: '';
+			background-color: #eb6c37;
+			border-radius: 50%;
+			position: absolute;
+			top: 42%;
+			z-index: 2;
+		}
+
+		&::before {}
+
+		&::after {}
+
+		.num-wrap {
+			display: flex;
+			align-items: flex-end;
+
+			.num {
+				font-size: 42upx;
+				position: relative;
+				top: 8upx;
+			}
+		}
+
+		.line-code {
+			padding: 40upx 0;
+			display: flex;
+			justify-content: center;
+		}
+
+		.ewm-wrap {
+			display: flex;
+			justify-content: center;
+			padding: 40upx 0;
+		}
+
+		.line {
+			width: 100%;
+			border-bottom: 1px dashed #ececec;
+			position: absolute;
+			top: calc(42% + 20upx);
+			left: 0;
+			z-index: 1;
+		}
+	}
+</style>