guosen-ldt-shop/pages/checkstand/pay-qrcode.vue

<template>
	<view class="code-container">
		<view class="title center">{{isPayment? "向商家付款":"扫一扫，向我付款"}}</view>
		<view  class="main-content">
			<view v-if="isPayment">
				<!-- 占位 -->
				<view style="height: 50rpx;"></view>
				<!-- 条形码 -->
				<view  class="bar-code center">
					<tki-barcode
				    ref="barcode"
					:val="content"
					onval=true
					:opations="barOption"
				  /></view>
				  <!-- 付款码 -->
				<view class="qr-code center">
					 <tki-qrcode
						cid="2"
					    ref="qrcode"
					    :val="content"
						size="300"
					    :onval="true"
					    :loadMake="true"
					    :usingComponents="true"
					    />
				</view>
			</view>
			<!-- 收款码 -->
			<view v-else class="charge-code center">
				 <tki-qrcode
					cid="1"
				    ref="qrcode-charge"
				    :val="id"
					size="420"
				    :onval="true"
				    :loadMake="true"
				    :usingComponents="true"
				    />
			</view>
		</view>
		<view class="footer center">
			<text class="text-xl text-bold">{{shopDetail.name}}</text>
			<!-- <view @click="isPayment=!isPayment"  class="cu-btn round cuIcon-qrcode" style="font-size: 50rpx;height: 100rpx;" :style="{color: isPayment? 'orange':'green' }">
				<view class="text-black text-xl margin-left-30">{{ isPayment? " 切换收款码":"切换付款码"}}</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import tkiQrcode from "tki-qrcode"
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	import  totp   from "@/utils/totp.js"
	export default {
		components: { tkiBarcode,tkiQrcode},
		computed:{
			content(){
				let  transformStr = (this.id*this.$global.TRANSFORM_PARAMS)*2
				return transformStr+this.secret
			}
		},
		data() {
			return {
				id: "",
				shopDetail:{},//商户详情
				avatar: "",
				secret: '000000',
				isPayment: false,
				timer: '',
				barOption: {
					width: 3,
					height: 130,
					displayValue:  false
				}
			}
		},
		methods: {
			refreshCode(){
				this.timer = setInterval(()=>{
					this.secret =  totp.getSecret(this.id);
				},1000)
			},
			async initAvatat(url){
				return new Promise((reslove,reject)=>{
					uni.downloadFile({
							url,
							success: (res)=> {
								reslove(res);
							},
							fail: (err) => {
								reject(err)
							}
					})
				})
				
			}
		},
		async mounted(option){
			let res=await this.$api.shop.detail({id:this.vuex_shopId})
			this.shopDetail=res.data
			let avatar=res.data.cover
			// this.avatar =(await  this.initAvatat(avatar)).tempFilePath;
			//获取用户ID
			this.id = this.$global.QR_PATH+this.vuex_shopId
			//生成动态密码
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	}
</script>

<style>
	page {
		background-color: #FE9644;
	}
</style>
<style lang="scss" scoped>

	.code-container{
		background-color: #FFFFFF;
		border-radius: 16rpx;
		// min-height: 900rpx;
		min-height: 800rpx;
		margin: 60rpx  20rpx;
		.title{
			border-radius: 25rpx 25rpx 0 0;
			height: 100rpx;
			width: 100%;
			font-size: 35rpx;
			color: #FD711B;
			background-color: #F7F7F7;
			 font-weight: 600;
			 letter-spacing: 3rpx;
		}
		
		.footer{
			width: 90%;
			height: 120rpx;
			margin-left: 5%;
			border-top: 1rpx dashed #dddddd;
		}
		.main-content{
			width: 100%;
			height: 600rpx;
			scroll-margin-top: 600rpx;
			// overflow: hidden;
			.bar-code{
				margin-left: 5%;
				width: 90%;
				height: 150rpx;
			}
			.qr-code{
				width: 100%;
				height: 450rpx;
			}
			.charge-code{
				width: 100%;
				height: 600rpx;
				transition: transform 1s ease-in-out;
			}
		}
	}

</style>