MP_XOIL_company_new/BagStation/pages/stationDetail/stieQr.vue

<template>
	<view class="content bg-gray position-re">
		<!-- <cu-custom class="bg-main-oil" isBack bgColor="bg-main-oil">
			<block slot="content">中石化紫云路</block>
			<block slot="backText">返回</block>
		</cu-custom> -->
		<view class="bg-img  flex align-end margin-bottom-lg "
			:style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
			<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix"
				class="position-ab site-back">
			</image>
			<view class="flex-sub">
				<view class="cu-list menu margin padding-sm  radius my-shadow  bg-white yu-card-xuan">
					<view class="cu-item no-border">
						<view class="content">
							<view class="strong padding-bottom-xs">
								{{siteInfo.siteName}}
							</view>
							<view class="font-12 color-999 site-label text-cut">
								{{siteInfo.address}}
							</view>
						</view>
						<view class="action " @tap="openMap">
							<view class="oil-main-color">
								<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
								{{siteInfo.juli|distanceFilter}}
							</view>
						</view>
					</view>
					<view class="flex text-center padding-top-sm">
						<view class="flex-sub">
							<view class="" @tap="showThreeSites=true">
								<view class="self-icon margin-right-xs">
									<image :src="imgURL+'qr-exchange.png'" mode="widthFix"></image>
								</view>
								变更油站
							</view>
						</view>
						<view class="flex-sub">
							<view class="" @tap="toSiteDetail(siteId)">
								<view class="self-icon margin-right-xs">
									<image :src="imgURL+'qr-xq.png'" mode="widthFix"></image>
								</view>
								油站详情
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="placeholder margin-bottom-lg">

		</view>

		<view class="margin margin-top-lg  radius bg-white">
			<view class="padding text-center">
				<text class="text-black">
					请提醒加油员使用
					<text class="text-red">
						“ {{showtitles}} ”
					</text>
					进行订单核销
				</text>
			</view>

			<view class="qr-container margin  padding-bottom-xs text-center">
				<view class="qr-container  text-center ">
					<view class="qrimg">
						<view class="qrimg" @tap="newQrString">
							<tki-qrcode ref="qrcode" cid="2" loadMake :val="val" :size="400" unit="upx"
								background="#fff" foreground="#000" pdground="#000" :icon="iconUrl" iconSize="40" onval
								:usingComponents="usingComponents" showLoading @result="qrR" />
						</view>
					</view>
				</view>
				<view class="text-center padding-top text-sm margin-bottom">
					提示：该二维码每隔3分钟自动刷新一次
				</view>
			</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-card text-olive font-16 padding-right-xs">

						</text>
						<text>
							油卡卡号
						</text>
					</view>

					<view class="text-right flex-sub ">
						<picker @change="pickCard" :disabled="!isCompany" :value="activeCardIndex" mode="selector"
							:range="cards" range-key="companyName">
							<view class="picker">
								{{cards[activeCardIndex]?activeCard.accountCardCode :'选择油卡'}}
							</view>
						</picker>
					</view>
					<text class="cuIcon-right"></text>
				</view>

				<view class="flex padding-bottom-sm padding-left padding-right">
					<view class="flex-sub">
						<text class="cuIcon-selectionfill text-green font-16 padding-right-xs">

						</text>
						<text>
							油卡所属
						</text>
					</view>

					<view class="text-right flex-sub text-green">
						{{(cardList[activeCardIndex]?activeCard.companyName.split('(')[0]:'未选择油卡') |cardForamt}}
					</view>
				</view>
				<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="activeCard && activeCard.shareCompanyQuota==1">
							共享余额
						</text>
						<text v-else>
							￥{{(cardList[activeCardIndex]?activeCard.balance:'')|moneyFormat}}
						</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>
				</view>
			</view>
		</view>

		<!-- <view class="bg-gray padding-top-sm ">
			<view class="btn">
				<view class="flex  padding flex-direction">
					<button class="cu-btn block bg-main-oil lg">
						<image class="site-icon margin-right-sm" :src="imgURL+'site-yz.png'" mode="widthFix"></image>
						一键支付
					</button>
				</view>
			</view>
		</view> -->
		<!-- showThreeSites -->
		<three-sites @hideOneModal="showThreeSites=false" :showThreeSites="showThreeSites"></three-sites>
	</view>
</template>

<script>
	import oilSiteApi from '@/api/oil-site.js'
	import qrApi from '@/api/qr.js'
	import accountApi from '@/api/account.js'
	import priceTab from '../components/price-tab.vue'
	import threeSites from '@/components/three-sites.vue'
	import tkiQrcode from "../components/tki-qrcode/tki-qrcode.vue" //二维码生成器
	export default {
		components: {
			priceTab,
			threeSites,
			tkiQrcode
		},
		onLoad(option) {
			// console.log('进入siteQr',option)
			let oilItem = uni.getStorageSync('oilItem')
			// console.log(oilItem)
			this.showtitles = oilItem.listTag
		},
		data() {
			return {
				showtitles: "",
				isCompany: uni.getStorageSync('accountStatus'),
				activeCardIndex: 0,
				showThreeSites: false,
				radio: 'B',
				val: '',
				// iconUrl: '../../../static/img/qr-icon.png',
				mainURL: this.global.mainURL,
				imgURL: this.global.imgURL,
				active: 0,
				ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				siteId: '',
				activeChannelCode: '',
				siteInfo: {},
				cardList: [],
				posName: '',
				secondChannelCode: '',
				timeinterval: '',
				otherUser: '',
				customerId: uni.getStorageSync('user').userCode
			}
		},

		computed: {
			iconUrl() {
				if (this.activeChannelCode) {
					if (this.secondChannelCode) {
						this.posName = '壳牌'
						return `../../../static/img/YDJY.png`
					} else {
						this.posName = '星油云站'
						return `../../../static/img/${this.activeChannelCode}.png`
					}
				}
			},
			accountCardCode() {
				if (this.activeCard) {
					this.getQrString(this.activeCard)
					return this.activeCard.accountCardCode
				}
			},
			activeCard() {
				if (this.cardList.length) {
					return this.cardList[this.activeCardIndex]
				}
			},
			cards() {
				if (this.cardList.length) {
					this.cardList.forEach((e) => {
						e.companyName = e.companyName + '(' + (e.companyType == 0 ? `柴油账户:${e.balance}元` : e
							.companyType == 1 ? `汽油账户:${e.balance}元` : e.companyType == 2 ?
							`LNG账户:${e.balance}元` : `尿素:${e.balance}元`) + ')'
					})
					return this.cardList
				}
			},
		},
		onUnload() {
			this.timeinterval = ''
		},
		onLoad(option) {
			let oilItem = uni.getStorageSync('oilItem')
			let otherUserInfo = uni.getStorageSync('otherUserInfo')
			if (otherUserInfo) {
				this.otherUser = 'kl'
			}
			this.otherUserInfo = otherUserInfo
			this.showtitles = oilItem.listTag
			this.siteId = option.siteId
			this.activeChannelCode = option.activeChannelCode
			this.secondChannelCode = option.secondChannelCode
			this.timeinterval = setInterval(() => {
				this.newQrString()
			}, 1000 * 60 * 3);
			this.getUserCard()
			this.getSiteInfo(option.siteId)
		},
		methods: {
			sortHandler(arr) {
				let internalArr = arr.filter(item => item.oilCardType == 2)
				let externalArr = arr.filter(item => item.oilCardType == 3)
				// let internalTarget = this.sortParticulars(internalArr, 'shareCompanyQuota')
				let externalTarget = this.sortParticulars(externalArr, 'balance')
				if (internalArr.length || externalTarget.length) return [...internalArr, ...externalTarget]
				else return arr
			},
			sortParticulars(arr, field) {
				let target = []
				let map = new Map()
				let keys = [],
					values = []
				arr.forEach(item => {
					map.set(item, item[field])
				})
				for (let key of map.keys()) {
					keys.push(key)
				}
				for (let value of map.values()) {
					values.push(value)
				}
				values.sort((a,b)=>{return a - b})
				values.reverse()
				values.forEach(value => {
					keys.forEach(key => {
						if (map.get(key) == value) {
							target.push(key)
							map.set(key, new Date().getTime())
						}
					})
				})
				return target
			},
			qrR() {

			},
			newQrString() {
				this.getQrString(this.activeCard)
			},
			getQrString(activeCard) {
				let data2 = {
					companyId: this.activeCard.companyId,
					orderSource: "WECHAT_MINIAPPS", //类型：String  必有字段  备注：订单来源（WECHAT_MINIAPPS）
					secondChannelCode: this.secondChannelCode,
					customerId: this.customerId,
					oilsStationId: this.siteId, //类型：String  必有字段  备注：油站ID
					channelCode: this.activeChannelCode, //类型：String  必有字段  备注：渠道编码
					oilCardNature: activeCard.oilCardType, //类型：String  必有字段  备注：油卡性质
					accountCardCode: activeCard.accountCardCode //类型：String  必有字段  备注：油卡卡号
				}
				qrApi.getOilQrCode(data2).then(res => {
					if (res.code === 20000) {
						this.val = res.data.codeStr
					}
				})
			},
			pickCard(e) {
				this.activeCardIndex = e.detail.value
			},
			getSiteInfo() {
				let data2 = {
					...uni.getStorageSync('location'),
					siteId: this.siteId
				}
				oilSiteApi.getSiteDetails(data2).then(res => {
					if (res.code == 20000) {
						this.siteInfo = res.data
					}
				})
			},
			getUserCard() {
				accountApi.getNewUserAccount({
					siteId: uni.getStorageSync('oilItem').siteId
				}).then(res => {
					if (res.code == 20000) {
						if (res.data.length) {
							let staging = res.data.filter(item => item.companyType != 5)
							let target = this.sortHandler(staging)
							this.cardList = target
						} else this.cardList = []
					}
				})
			},
			toSiteDetail(id) {
				uni.redirectTo({
					url: `/BagStation/pages/stationDetail/stationDetail?siteId=${id}&customerJump=false`
				})
			},
			openPlugin() {
				const key = this.qqKey; //使用在腾讯位置服务申请的key  
				const referer = '星油云'; //调用插件的app的名称  
				const endPoint = JSON.stringify({
					name: '油站',
					latitude: 39.89631551,
					longitude: 116.323459711
				});

				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				})

			},
			goBack() {
				uni.navigateBack({

				})
			},
			selectRadio() {
				this.radio === 'A' ? this.radio = '' : this.radio = 'A'
			},
			openMap() {
				let that = this
				uni.openLocation({
					latitude: 117,
					longitude: 21,
					name: '江西景德镇',
					address: '九龙路1188号',
					scale: 12,
					success: function() {
						// console.log('success')
					},
					fail: (error) => {
						// console.log('error')
						// console.log(error)
					},
					complete: () => {

						// console.log('made')
					},

				})

				var map = uni.createMapContext('map')
				map.moveToLocation()
			}
		},
		filters: {
			distanceFilter(value) {
				if (value) {
					return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
				}
			},
			moneyFormat(value) {
				if (value) {
					return (parseInt(value * 100) / 100).toFixed(2)
				} else {
					return '0.00'
				}
			},
			cardForamt(val) {
				if (uni.getStorageSync('accountStatus') == true) {
					// 企业卡
					return val == null ? '未选择油卡' : val
				} else {
					// 个人卡
					return val == null ? '个人油卡' : '个人油卡'
				}
			}
		}
	}
</script>

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

	.navigation {
		position: absolute;
		right: 16px;
		top: 10px;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.oil-price {
		position: relative;
	}

	.oil-price radio {
		position: absolute;
		left: 0rem;
		top: 10px;
	}

	.qr-icon {
		font-size: 2rem;
	}

	.pay-desc {
		line-height: 2rem;
	}

	.bottom-pay {
		min-height: 100rpx;
		width: 750upx;
	}

	.pay-bar {
		width: 750upx;
		position: absolute;
		bottom: 0;
	}

	.my-cell {}

	.placeholder {
		min-height: 20upx;
	}

	.yu-card-xuan {
		position: relative;
		top: 110rpx
	}

	.site-label {
		max-width: 500upx;
	}

	.cu-btn.sm {
		width: 80%;
	}

	.site-back {
		width: 2rem;
		top: 2.8rem;
		left: 1rem;
	}

	.site-icon {
		width: 1.5rem;
		vertical-align: middle;
	}

	.my-tag {
		padding: 0 12rpx;
	}

	.self-icon {
		width: 1rem;
		display: inline-block;
		vertical-align: middle;
	}
</style>