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

<template>
	<view class="code-container">
		<view class="title center">扫一扫，向我付款</view>
		<view class="main-content center">
			<!-- 收款码 -->
			<view class="charge-code center">
				<tki-qrcode cid="1" ref="qrcode-charge" :val="id" size="420" :onval="true" :icon="avatar"
					: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.$crypto.encrypt(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: 620rpx;
			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>