LSM_OIL_SITE/pages/qrcode/QrCode_xy.vue

<template>
	<view class="page-content bg-main-oil">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">油站二维码</block>
		</cu-custom>
		<view class="margin-xl padding radius bg-white">
			<view class="text-center padding">
				<text class="text-lg text-black">{{oilSiteName}}</text>
			</view>
			<view class="qr-container padding-top text-center ">
				<view class="qrimg">
					<tki-qrcode ref="qrcode" :val="val" :size="400" unit="upx" background="#fff" foreground="#000" pdground="#000"
					 :icon="iconUrl" iconSize="40" :onval="true" :loadMake="true" :usingComponents="usingComponents" :showLoading="true"
					 @result="qrR" />
				</view>
			</view>
			<view class="text-center padding-bottom-xs padding-bottom-xs">
				<text class="color-999 font-12">
					<text class="cuIcon-refresh padding-right-xs"></text>
					付款码自动 （25s）
					<text class="oil-main-color">
						刷新
					</text>
				</text>
			</view>
			<view class="text-center color-000 font-10 margin-bottom-sm">
				提示：司机扫描二维码支付油费
			</view>
			<view class="padding font-12 solid-top">
				<view class="flex padding-bottom-sm padding-left padding-right">
					<view class="flex-sub">
						<text class="cuIcon-moneybagfill oil-main-color font-16 padding-right-xs">

						</text>
						<text>
							加油金额
						</text>
					</view>

					<view class="text-right flex-sub oil-main-color">
						￥1.20
					</view>
				</view>
				<view class="flex padding-left padding-right">
					<view class="flex-sub">
						<text class="cuIcon-infofill color-wjy font-16 padding-right-xs">

						</text>
						<text>
							加油升数
						</text>
					</view>


					<text class="text-right flex-sub">
						约56.00L
					</text>
				</view>
			</view>
		</view>

		<view class="margin-xl padding-top">
			<button class="bg-white oil-main-color" @tap="modalName='show'">设置油品加油升数</button>
		</view>
		<view class="cu-modal" :class="modalName">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content ">
						{{oilSiteName}}
					</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="text-left padding-bottom padding-top-0 bg-white">
					<OrderOilForm />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderOilForm from '@/components/OrderOil.vue'
	// 引入二维码库  
	import QR from "@/utils/wxqrcode.js" // 二维码生成器  

	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

	export default {
		components: {
			OrderOilForm,
			tkiQrcode
		},
		data() {
			return {
				modalName: 'mod',
				oilSiteName: '',
				qrImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1102530589,2787379918&fm=11&gp=0.jpg",
				val: '羊的屎是猪',
				iconUrl: '../../static/img/qr-icon.png'

			}
		},
		onLoad() {
			this.oilSiteName = uni.getStorageSync('oilSiteName')
		},
		methods: {
			hideModal() {
				this.modalName = ''
			},
			qrR() {
				console.log('5555')
			},
			qrInit() {
				this.qrImg = QR.createQrCodeImg('我是您粑粑', {
					size: parseInt(300) //二维码大小  
				})
				console.log('this.qrImg', this.qrImg)
				this.modalName = ''
			}

		}
	}
</script>

<style scoped>
	.page-content {
		min-height: 100%;
	}

	.qr-img {
		width: 400upx;
		height: 400rpx;
		margin: auto;
	}
</style>