更新

BagStation/pages/oilQRcode/index.vue

@@ -4,17 +4,24 @@
 			<block slot="backText">返回</block>
 		</cu-custom>
 		<view class="oil-qrcode">
-			<view class="info">
-				<view>肖师傅</view>
-				<view>13216655221</view>
-				<image></image>
+			<view class="round first"></view>
+			<view class="card">
+				<view class="info">
+					<view>{{user.name || ''}}</view>
+					<view>{{user.userPhone || ''}}</view>
+				</view>
+				<tki-qrcode ref="qrcode" cid="2" :val="qrcodeText" :size="400" :isHaveBg="false" pdground="#000"
+					foreground="#000" background="#fff" onval showLoading loadMake />
+				<view class="tip">扫一扫上面的二维码图案，给我赠油，可截图保存。</view>
+				<button class="button" @click="regeneration">重新生成</button>
 			</view>
-			<tki-qrcode ref="qrcode" cid="2" :val="qrcodeText" :size="400" onval  showLoading loadMake />
+			<view class="tip-sec">注: 重新生成收油码后, 以前截图保存的收油码将作废!</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	import serve from '@/api/account.js'
 	import tkiQrcode from '@/BagStation/pages/components/tki-qrcode/tki-qrcode.vue'
 	export default {
 		components: {
@@ -22,7 +29,29 @@
 		},
 		data() {
 			return {
-				qrcodeText:'13216655221'
+				qrcodeText: '',
+				user: uni.getStorageSync('user')
+			}
+		},
+		created() {
+			this.getQrStr()
+		},
+		methods: {
+			getQrStr(reset = 0) {
+				console.log('this.user', this.user)
+				if (this.user.id) {
+					serve.getQrStr(this.user.id, reset).then(res => {
+						if (!res.data) return
+						this.qrcodeText = JSON.stringify({
+							giveCustomerId: this.user.id,
+							qrcodeText: res.data
+						})
+					})
+				}
+
+			},
+			regeneration() {
+				this.getQrStr(1)
 			}
 		}
 
@@ -30,33 +59,70 @@
 </script>
 
 <style lang="scss" scoped>
+	.round {}
+
 	.oil-qrcode {
-		height: 100vh;
+		height: calc(100vh - 87px);
 		padding-top: 200rpx;
-		text-align: center;
+		background: #FF6700;
 
-		.info {
-			position: relative;
-			display: inline-block;
-			text-align: left;
-			width: 400rpx;
-			padding: 20rpx 20rpx 20rpx 100rpx;
+		.card {
+			margin: 0 auto;
+			padding-top: 70rpx;
+			padding-bottom: 50rpx;
+			width: 598rpx;
+			background: #fff;
+			border-radius: 15rpx;
 
-			view {
-				&:nth-of-type(1) {}
+			.info {
+				view {
+					text-align: center;
 
-				&:nth-of-type(2) {
-					margin-top: 15rpx;
+					&:nth-of-type(1) {
+						color: #000;
+						font-size: 34rpx;
+					}
+
+					&:nth-of-type(2) {
+						margin-top: 10rpx;
+						color: #666;
+						font-size: 28rpx;
+					}
 				}
 			}
 
-			image {
-				position: absolute;
-				left: 0;
-				top: 0;
-				width: 50rpx;
-				height: 50rpx;
+			.tip {
+				margin-top: 70rpx;
+				color: #9E9E9E;
+				font-size: 22rpx;
+				text-align: center;
+			}
+
+			.button {
+				margin-top: 50rpx;
+				margin-right: 53rpx;
+				width: 172rpx;
+				font-size: 28rpx;
+				color: #fff;
+				background: #409eff;
 			}
 		}
+
+		.tip-sec {
+			position: absolute;
+			left: 0;
+			bottom: 70rpx;
+			width: 100%;
+			color: #fff;
+			font-size: 24rpx;
+			text-align: center;
+		}
+
+		/deep/.tki-qrcode {
+			margin-top: 71rpx;
+			padding: 0;
+			text-align: center;
+		}
+
 	}
 </style>