初始化

pages/pay_code/pay_code.vue

@@ -0,0 +1,149 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<text class="t">{{shopUser.nickName}}</text>
+		</view>
+		<view class="code-wrap">
+			<view class="num-wrap">
+				<text class="t">账户余额：</text>
+				<text class="num">{{shopUser.amount}}</text>
+			</view>
+			<view class="line-code">
+				<tki-barcode ref="tkiBarcode" show  :opations="tkiOptions"></tki-barcode>
+			</view>
+			<view class="ewm-wrap">
+				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="createcardNo"></uqrcode>
+			</view>
+			<view class="name">
+				<text>使用门店：{{shopUser.name}}</text>
+			</view>
+			<view class="line"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import tkiBarcode from '@/components/tki-barcode/tki-barcode.vue';
+	export default {
+		components: {
+			tkiBarcode
+		},
+		data() {
+			return {
+				tkiOptions: {
+					height: 210,
+					fontSize: 28,
+					textMargin: 14
+				},
+				shopUser: {},
+				createcardNo: ''
+			};
+		},
+		onLoad() {
+			this.shopUser = uni.cache.get('shopUser')
+			this.logincreateCardNo();
+		},
+		methods: {
+			async logincreateCardNo() {
+				let res = await this.api.logincreateCardNo()
+				if (res.code == 0) {
+					this.createcardNo = res.data
+					this.$refs.tkiBarcode.setval(this.createcardNo)//操作属性
+				}
+			}
+		}
+
+	};
+</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;
+		$radiusSize: 40upx;
+
+		&::before,
+		&::after {
+			content: '';
+			width: $radiusSize;
+			height: $radiusSize;
+			background-color: #eb6c37;
+			border-radius: 50%;
+			position: absolute;
+			top: 42%;
+			z-index: 2;
+		}
+
+		&::before {
+			left: $radiusSize / 2 * -1;
+		}
+
+		&::after {
+			right: $radiusSize / 2 * -1;
+		}
+
+		.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>