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

<template>
	<view class="code-container">
		<view class="title center">扫一扫，向我付款</view>
		<view  class="main-content">
			<!-- 收款码 -->
			<view 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>
		
	</view>
</template>

<script>
	import tkiQrcode from "tki-qrcode"
	export default {
		components: {tkiQrcode},
		computed:{
			content(){
				let  transformStr = (this.id*this.$global.TRANSFORM_PARAMS)*2
				return transformStr+this.secret
			}
		},
		data() {
			return {
				id: "",
				shopDetail:{},//商户详情
				avatar: "",
				secret: '000000',
				timer: '',
			}
		},
		methods: {
			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: #EF9944;
	}
</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: #FE9644;
			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>