LSM_OIL_SITE/pages/stationDetail/stationDetail.vue

<template>
	<view class="page-content">
		<view class v-show="beforePay">
			<cu-custom class="main-topbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
				<block slot="backText">返回</block>
				<block slot="content">{{stationMsg.oilSiteName}}</block>
			</cu-custom>
			<view class="cu-list menu-avatar">
				<view class="cu-item margin-sm margin-left margin-right radius">
					<view class="cu-avatar round lg" :style="'background-image:url('+driverMsg.headUrl+');'"></view>
					<view class="content money-container">
						<view class="color-333">
							<view class="text-cut">{{driverMsg.driverName}}</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">{{driverMsg.phone}}</view>
						</view>
					</view>
					<view class="action">
						<view class="text-white money-position padding-left-lg padding-xs bg-main-oil text-lg">
							<text class="text-xs">余额</text>
							￥{{driverMsg.balance}}
						</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group margin margin-top-0 radius">
				<view class="title mini-label text-black">车牌号</view>
				<input :maxlength="7" v-model="carNumber" disabled @tap="showModel='show'" placeholder="请输入车牌号" name="input" />
				<!-- <text class="cuIcon-roundclosefill text-gray"></text> -->
				<text class="cuIcon-write text-orange"></text>
			</view>
			<view class="my-cell margin-left margin-right padding-top padding-bottom radius">
				<view class="strong padding-bottom-xs">{{stationMsg.oilSiteName}}</view>
				<view class="font-12 color-999">
					<text class="text-cut">{{stationMsg.address}}</text>
				</view>
				<!-- 	<view class="navigation" @tap="openMap">
				<image class="icon-self" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=907966196,3433585328&fm=11&gp=0.jpg"
				 mode=""></image>
				导航v
        </view>-->
			</view>
			<!--  -->
			<view class="padding-top-xs margin margin-top-xs margin-bottom-0 padding-bottom radius">
				<view class="bg-white padding padding-bottom-sm">
					<view class="padding-bottom-sm text-lg">油号选择：</view>
					<view class="padding-top-xs">
						<text class="strong padding-right-xs font-16">{{insertResult.oilName}}</text>
						<text class="padding-right-xs">
							星油价格:
							<text class="text-blod oil-main-color" v-if="(insertResult.realPrice-1+1)>0">￥{{insertResult.realPrice|numberFilter}}</text>
							<text class="text-blod oil-main-color" v-else>无价格</text>
						</text>
						<text class="s-rich">市场价￥{{insertResult.standardPrice|numberFilter}}/L</text>
					</view>
					<view class="grid col-5 padding-top justify-start">
						<view class="padding-xs" v-for="(item,index) in oilTypeList" :key="index">
							<button class="cu-btn" @tap="oilNameSel(item)" :class="[insertResult.oilName===item.oilName?'bg-main-oil':'line-gray']">{{item.oilName}}</button>
						</view>
					</view>
				</view>
				<view class="padding solid-top padding-bottom-0 padding-top-xs bg-white">
					<view class="padding-bottom-sm text-lg">油枪选择：</view>
					<view class="grid col-5 justify-start">
						<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
							<button @tap="gunIdSel(index)" class="cu-btn" :class="[insertResult.bar===index+1?'bg-main-oil':'line-gray']">{{index+1}}</button>
						</view>
					</view>
				</view>
				<view class="solid-top padding solid-top bg-white">
					<view class="shadow-warp bg-white">
						<view class="cu-form-group">
							<view class="title">加油升数</view>
							<input placeholder="请输入加油升数" type="digit" @input="calcMoney" v-model="insertResult.vol" name="input" />
							<text>约￥{{insertResult.vMoney|numberFilter}}</text>
						</view>
						<view class="my-cell">
							<text class="font-12">星卡优惠金额</text>
							<text class="fr">-￥{{insertResult.discountMoney|numberFilter}}</text>
						</view>
						<view class="my-cell">
							<text class="font-12">实际扣款金额</text>
							<text class="oil-main-color fr">￥{{insertResult.vDoMoney|numberFilter}}</text>
						</view>
					</view>
				</view>
				<button class="margin round bg-main-oil" @tap="charge">确定</button>
			</view>
		</view>
		<view class v-show="!beforePay&&isG7">
			<cu-custom class="main-topbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
				<block slot="backText">返回</block>
				<block slot="content">{{payState|payStateFormat}}</block>
			</cu-custom>
			<view class="margin-sm bg-white padding-lg">
				<view class="padding-top margin-bottom"></view>
				<view class="text-xsl text-center">
					<text class="cuIcon-rechargefill oil-main-color"></text>
				</view>
				<view class="text-center text-bold">
					{{payState|payStateFormat}}
				</view>
				<view class="padding margin-sm">
					<text v-if="payErrorMessage">{{ payErrorMessage }} </text>
					<text v-else>{{ payState==0?'请勿离开当前页面，等待扣款状态查询确认后，页面会自动跳转......':'' }} </text>
				</view>
				<view class="text-center">
					<button style="width: 500upx;" class="round large cu-btn bg-main-oil" @tap="getPayStatus(orderId)">手动刷新</button>
				</view>
			</view>
			<view class="margin-sm bg-white padding">
				<view class="margin-bottom-sm" @tap="copyId(driverMsg.driverName,'加油司机')">
					加油司机
					<text class="fr">
						{{driverMsg.driverName}}
						<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red"></text>
					</text>
				</view>

				<view class="margin-bottom-sm" @tap="copyId(carNumber,'司机车牌')">
					司机车牌
					<text class="fr">
						{{carNumber}}
						<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red"></text>
					</text>
				</view>

				<view class="margin-bottom-sm">
					油枪油号
					<text class="fr">{{insertResult.bar}}号枪{{insertResult.oilName}}</text>
				</view>
				<view class="margin-bottom-sm">
					加油总金额
					<text class="fr">¥ {{insertResult.vMoney|numberFilter}}</text>
				</view>
				<view class="margin-bottom-sm">
					加油升数
					<text class="fr">{{insertResult.vol|numberFilter}} 升</text>
				</view>
				<view class="margin-bottom-sm">
					星卡优惠
					<text class="fr">¥ {{insertResult.vMoney-insertResult.vDoMoney|numberFilter}}</text>
				</view>

				<view class="margin-bottom-sm">
					实扣款
					<text class="fr oil-main-color">¥ {{insertResult.vDoMoney|numberFilter}}</text>
				</view>
			</view>
		</view>
		<PlateNumberPicker @newPlate="showPlateModal(false,true)" @onDeleteInput="onDeleteInput" :showInputList="showInputList"
		 :showPlateList="showPlateList" @selectNo="selectNo" @clearAll="clearPlateNumber" @selectName="selectText" @hideModal="showModel=''"
		 :modalName="showModel" />
	</view>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	import g7Api from '@/api/g7.js'
	import PlateNumberPicker from '@/components/plate-number-picker/plate-number-picker.vue'
	export default {
		components: {
			PlateNumberPicker
		},
		data() {
			return {
				isG7: false,
				beforePay: true,
				testResult: false,
				showPlateList: true,
				showInputList: false,
				carNumber: '',
				plateNo: '',
				plateText: '',
				imgList: [],
				plateName: '',
				orderId: '',
				showModel: '',
				// 车牌号，上
				radio: 'B',
				active: 0,
				ColorList: [1, 2, 3, 4, 5],
				qrCode: uni.getStorageSync('qrCode'),
				driverMsg: {
					balance: '',
					plateNumber: ''
				},
				oilGunList: {},
				oilTypeList: [],
				stationMsg: {

				},
				payErrorMessage: '',
				timer: null,
				selected: {},
				insertResult: {
					bar: 1,
					oilName: '',
					discountMoney: '0.00',
					oilCode: "",
					realPrice: "",
					standardPrice: '',
					vDoMoney: "0.00",
					vMoney: "0.00",
					vol: ""
				},
				orderKey: '',
				payState: '0'
			}
		},
		onLoad() {
			if (this.qrCode) {
				if (this.qrCode.substr(0, 2) == 'HT' || this.qrCode.substr(0, 2) == 'G7') {
					this.isG7 = true
					console.log('G7加油站')
				}
			}
			this.verifyQrCode()
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		watch: {
			oilTypeList: {
				handler(newVal, oldVal) {
					console.log('深度监听', newVal, oldVal)
					this.oilTypeList = newVal
					if (!this.insertResult.oilCode) {
						this.initForm()
					}
				},
				deep: true
			},
			selected: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					console.log('监听白话,selected', newVal, oldVal)
					this.selected = newVal
					if (newVal) {
						if (this.selected.xkPrice) {
							this.insertResult.realPrice = this.selected.xkPrice
						} else if (this.selected.lvPrice) {
							this.insertResult.realPrice = this.selected.xkPrice
						}
						this.insertResult.oilCode = this.selected.oilCode
						this.insertResult.standardPrice = this.selected.standardPrice
						this.insertResult.oilName = this.selected.oilName
						this.calcMoney()
					}
				}

			},
			plateNo: {
				immediate: true,
				handler(newVal, oldVal) {
					this.plateNo = newVal
					if (newVal) {
						this.text()
					}
				}
			}

		},
		methods: {
			queryTimer() {
				var count = 5
				this.timer = setInterval(() => {
					console.log('查询次', count)
					count--
					this.getPayStatus(this.orderId)
				}, 5000);
				if (!count) {
					clearInterval(this.timer)
				}
			},
			copyId(id, name) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							title: name + '已复制',
							icon: 'none'
						})
					}
				})
			},
			clearPlateNumber() {
				this.plateText = ''
				this.plateNo = ""
				this.carNumber = ''
				this.showPlateList = true
				this.showInputList = false
			},
			text() {
				this.carNumber = this.plateText + this.plateNo
				this.tsetPlate()
			},
			tsetPlate() {
				this.testResult =
					/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
					.test(this.carNumber)
			},
			onDeleteInput() {
				this.carNumber = this.carNumber.slice(0, -1)
				if (this.carNumber.length > 1) {
					this.plateNo = this.plateNo.slice(0, -1)
				}
				if (this.carNumber.length == 1) {
					this.plateText = ''
				}
				if (this.plateNo.length == 1) {
					this.plateNo = ''
				}
				if (!this.carNumber) {
					this.plateText = ''
					this.plateNo = ''
					this.showPlateList = false
					this.showInputList = true
					this.text()
				}
			},
			selectText(item) {
				this.plateText = item
				this.showPlateList = false
				this.showInputList = true
				this.text()
			},
			selectNo(item) {
				if (this.plateNo.length >= 5) {
					this.showModel = ''
				}
				this.plateNo = this.plateNo + item
				this.text()
			},
			showPlateModal(val1, val2) {
				this.showPlateList = val1
				this.showInputList = val2
				this.showModel = 'show'
			},
			//关于车牌号，结束
			// 收费
			charge() {
				this.tsetPlate()
				console.log(this.plateText)
				console.log(this.plateNo)
				console.log(this.carNumber)
				console.log(this.testResult)
				if ((this.insertResult.realPrice - 1 + 1) > 0) {
					if (this.testResult) {
						const data6 = {
							...this.driverMsg,
							siteCode: this.stationMsg.oilSiteCode,
							oilPrice: this.insertResult.realPrice,
							volume: this.insertResult.vol,
							standardAmount: this.insertResult.vMoney,
							oilAmount: this.insertResult.vDoMoney,
							oilCode: this.insertResult.oilCode,
							oilName: this.insertResult.oilName,
							oilGun: this.insertResult.bar,
							standardPrice: this.insertResult.standardPrice,
							orderKey: this.orderKey,
							plateNumber: this.carNumber
						}
						if (!data6.oilCode) {
							uni.showToast({
								title: '请选择油品',
								icon: 'none'
							});
							return false
						}
						if (!data6.volume) {
							uni.showToast({
								title: '请输入加油体积',
								icon: 'none'
							});
							return false
						}
						cloudSiteApi.saveOrder(data6).then(res => {
							if (res.code === 20000) {
								uni.showToast({
									title: '下单成功！'
								});
								uni.setStorageSync('formQr', true)
								uni.setStorageSync('tempOrderInfo', res.data)
								if (!this.isG7) {
									setTimeout(() => {
										this.toDetails(res.data.payOrderId)
									}, 400)
								} else {
									this.beforePay = false
									setTimeout(() => {
										this.orderId = res.data.orderId
										this.queryTimer()
										this.getPayStatus(this.orderId)
									}, 400)
								}

							}
						})
					} else {
						uni.showToast({
							title: '车牌号校验不通过',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '您选择的油品没有油价，不能加油',
						icon: 'none'
					});
				}
			},
			getPayStatus(id) {
				// 获取订单支付状态
				console.log('获取支付状态', id)
				g7Api.getPayStatus(id).then(res => {
					if (res.code == 20000) {
						this.payState = res.data.payState
						if (res.data.payState == -1) {
							this.payErrorMessage = res.data.payErrorMessage
							clearInterval(this.timer)
							uni.showToast({
								icon: 'none',
								title: res.data.payErrorMessage
							})
						}
						if (res.data.payState == 1) {
							clearInterval(this.timer)
							this.toDetails(res.data.payOrderId)
						}
					}
				})
			},
			toDetails(id) {
				uni.setStorageSync('orderId', id)
				console.log('id', id)
				uni.redirectTo({
					url: '/pages/orderList/OrderDetail/OrderDetail'
				})

			},
			gunIdSel(index) {
				this.insertResult.bar = index + 1
			},
			initForm() {
				if (!this.insertResult.realPrice) {
					this.selected = this.oilTypeList[0]
				}
				this.insertResult.bar = 1
				console.log(this.selected)
			},
			verifyQrCode() {
				cloudSiteApi.VerifyQrCode({
					qrCode: this.qrCode
				}).then(res => {
					if (res.code === 20000) {
						this.driverMsg = res.data.driverMsg
						this.carNumber = this.driverMsg.plateNumber
						this.oilGunList = res.data.oilGunList
						this.oilTypeList = res.data.oilTypeList
						this.orderKey = res.data.orderKey
						this.stationMsg = res.data.stationMsg
						if (res.data.insertResult.oilCode) {
							this.insertResult = res.data.insertResult
							this.selected.oilCode = this.insertResult.oilCode
							this.selected.standardPrice = this.insertResult.standardPrice
							this.selected.oilName = this.insertResult.oilName
							this.selected.xkPrice = res.data.realPrice - 1 + 1
						}

					} else {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			},
			oilNameSel(item) {
				this.selected = item
				console.log('选择你/n', this.selected, '/n')
			},

			tRadio() {
				this.radio === 'A' ? this.radio = '' : this.radio = 'A'
			},
			calcMoney() {
				this.insertResult.vMoney = this.insertResult.vol * this.selected.standardPrice
				this.insertResult.discountMoney = this.insertResult.vol * (this.selected.standardPrice - this.insertResult.realPrice)
				this.insertResult.vDoMoney = (this.insertResult.vMoney - this.insertResult.discountMoney).toFixed(2)
			}
		},
		filters: {
			toT(value) {
				if (value) {
					return value / 1000
				}
			},
			dateFormat(value) {
				if (value) {
					return value.substring(5, 16)
				}
			},

			numberFilter(value) {
				value = value - 1 + 1
				return value.toFixed(2)
			},
			payStateFormat(value) {
				switch (parseInt(value)) {
					case 1:
						return '支付成功'
					case -1:
						return '支付失败'
					case 0:
						return '等待支付'
					default:
						return ''
				}
			}
		}
	}
</script>

<style scoped>
	.page-content {
		background-color: #f1f2f7;
		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;
	}

	.money-container {
		position: relative;
	}

	.money-position {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		border-radius: 0 0 0 100upx;
	}
</style>