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

<template>
	<view class="code-container">
		<view class="title center">向商家付款</view>
		<!-- <image class="bar-code" :src="barCode"></image> -->
		<view  class="main-content">
			<view class="bar-code center">
				<tki-barcode
			    ref="barcode"
				:val="barContent"
				onval=true
				:opations="barOption"
			  /></view>
			<view class="qr-code center">
				<ayQrcode ref="qrcode" :modal="true" :url="url" :height="150" :width="150" />
			</view>
		</view>
		<view class="footer center">
			<view @click="isPayment=!isPayment"  class="cu-btn round cuIcon-qrcode text-orange" style="font-size: 50rpx;height: 100rpx;">
				<view class="text-black text-xl margin-left-30">{{ isPayment? " 切换收款码":"切换付款码"}}</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"

	export default {
		components: { ayQrcode ,tkiBarcode},
		mounted(option){
			//生成动态密码

		this.$refs.qrcode.crtQrCode()
		const totp = require("totp-generator");
		totp("JBSWY3DPEHPK3PXP");
		},
		watch:{
			
		},
		computed:{
		},
		data() {
			return {
				id: '',
				isPayment: true,
				barContent: '321968494981965849',
				url: 'https://pixabay.com/images/search/?order=ec', 
				barOption: {
					width: 4,
					fontColor: "#caad20"
				}
			}
		},
		methods: {
			
		}
	}
</script>

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

	.code-container{
		background-color: #FFFFFF;
		border-radius: 25rpx;
		width: 90%;
		min-height: 900rpx;
		margin: 20rpx  5%;
		.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: 200rpx;
			margin-left: 5%;
			border-top: 1rpx dashed #dddddd;
		}
		.main-content{
			width: 100%;
			height: 550rpx;
			.bar-code{
				width: 90%;
				margin-left: 5%;
				height: 150rpx;
				margin-top: 50rpx;
			}
			.qr-code{
				width: 100%;
				height: 400rpx;
			}
		}
	}

</style>