You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
323 lines
8.5 KiB
323 lines
8.5 KiB
<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="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> |
|
</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>
|
|
|