LSM_OIL_SITE/pages/stationDetail/stationDetail.vue

<template>
	<view class="page-content">
		<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|numberFilter}}
					</view>
				</view>
			</view>
		</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>
				导航
      </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">￥{{insertResult.realPrice|numberFilter}}</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="number" @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>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	export default {
		data() {
			return {
				radio: 'B',
				active: 0,
				ColorList: [1, 2, 3, 4, 5],
				qrCode: uni.getStorageSync('qrCode'),
				driverMsg: {
					balance: ''
				},
				oilGunList: {},
				oilTypeList: [],
				stationMsg: {

				},
				selected: {},
				insertResult: {
					bar: 1,
					oilName: '',
					discountMoney: '0.00',
					oilCode: "",
					realPrice: "",
					standardPrice: '',
					vDoMoney: "0.00",
					vMoney: "0.00",
					vol: ""
				},
				orderKey: ''
			}
		},

		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()
					}
				}

			},
		},
		created() {
			this.verifyQrCode()
		},

		methods: {
			// 收费
			charge() {

				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
				}
				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: '扣款成功'
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			},
			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.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)
			}
		}
	}
</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>