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 @tap="refreashQr" class="text-center padding-top 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" @tap="refreashQr">
				提示：司机扫描二维码支付油费
			</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">
						<text v-if="!showData.realPay">
							未指定
						</text>
						<text v-else>￥{{showData.realPay}}</text>
					</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">
						<text v-if="!showData.vol">
							未指定
						</text>
						<text v-else>{{showData.vol}}L</text>
					</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 @confirmVol="getDesignatedQr" :oilList="oilList" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderOilForm from '@/components/OrderOil.vue'
	// 引入二维码库  
	import QR from "@/utils/wxqrcode.js" // 二维码生成器  
	import cloudSiteApi from '@/api/cloud-site.js'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue" //二维码生成器

	export default {
		components: {
			OrderOilForm,
			tkiQrcode
		},
		data() {
			return {
				oilList: [],
				xkPrice:'',
				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',
				oilDate: {
					oilSiteCode: uni.getStorageSync('oilSite').oilSiteCode,
					oilSiteName: uni.getStorageSync('oilSite').oilSiteName,
					oilCode: '',
					oilName: '',
					gunId: '',
					standardPrice: '',
					oilPrice: '',
					vol: ''
				},
				showData: {
					vol: '',
					realPay: ''
				}

			}
		},
		onLoad() {
			this.oilSiteName = uni.getStorageSync('oilSiteName')
			this.getDefaultQr()
			this.getSiteInfo()
			// this.getDesignatedQr/()
			console.log('oilDate', this.oilDate)
		},
		methods: {
			// 刷新
			refreashQr() {
				console.log('刷新函数')
				if (this.showData.vol) {
					this.getDesignatedQr(this.showData)
				} else {
					this.getDefaultQr()
				}
			},
			getSiteInfo() {
				cloudSiteApi.getSiteDetail().then(res => {
					console.log('...', res)
					if (res.code === 20000) {
						this.site = res.data.site
						this.oilList = res.data.oil
						uni.setStorage({
							key: 'oilSite',
							data: res.data.site
						})
					}
				})
			},
			getDefaultQr() {
				cloudSiteApi.getSiteQrCode().then(res => {
					if (res.code === 20000) {
						this.val = res.data
					}
				})
			},
			getDesignatedQr(data) {
				const data6 = {
					...this.oilDate,
					...data
				}
				this.showData = data
				cloudSiteApi.getDesignatedSiteQrCode(data6).then(res => {
					if (res.code === 20000) {
						this.val = res.data
						this.hideModal()
					}
				})
			},
			hideModal() {
				console.log('关闭呀')
				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>