caoliancun
/
LSM_OIL_SITE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
星油云站
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.
34 Commits
9 Branches
0 Tags
2.8 MiB
 
 
 
 
Tag: Branch: Tree: ac634dfaf8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ac634dfaf8'
${ noResults }
LSM_OIL_SITE/pages/stationDetail/stationDetail.vue

602 lines
17 KiB
Raw Blame History

<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.userBalance}}
</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 src="stationDetail.skeleton.wxml"/>
// <template is="skeleton" wx-if="{{loading}}" />
import cloudSiteApi from '@/api/cloud-site.js'
import oliSiteApi from '@/api/oli-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: '/packageOrders/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() {
console.log('+++++++++')
oliSiteApi.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: {
numberFormat(value) {
if (value) {
console.log(value)
let number = Math.floor(value * 100) / 100
console.log( Math.floor(value * 100) / 100)
console.log(number)
return number
} else {
return '0.00'
}
},
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>