324 lines
8.5 KiB
Vue
324 lines
8.5 KiB
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>
|