Files
LSM_OIL_SITE/pages/stationDetail/openStationDetail.vue
xiaozhiyong 3bd60fe2bd 更新
2023-11-01 19:12:23 +08:00

744 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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">{{siteData.siteName}}</block>
</cu-custom>
<view class="cu-list menu-avatar">
<view class="cu-item margin-sm margin-left margin-right radius">
<view v-if="siteData.headUrl" class="cu-avatar round lg"
:style="'background-image:url('+siteData.headUrl+');'"></view>
<view v-else class="cu-avatar round lg"></view>
<view class="content money-container">
<view class="color-333">
<view class="text-cut" v-if="type!= 'rrs'">{{siteData.customerName}}</view>
<view class="text-cut" v-else>
{{'日日顺司机'}}
</view>
</view>
<view class="text-gray text-sm flex">
<view class="text-cut" v-if="type!= 'rrs'">{{siteData.customerPhone}}</view>
<view class="text-cut" v-else>
{{'保密'}}
</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>
{{siteData.userBalance}}
</view>
</view>
</view>
</view>
<view class="cu-form-group margin margin-top-0 radius" v-if="type!= 'rrs'">
<view class="title mini-label text-black">车牌号</view>
<input :maxlength="7" @tap="showModel='show'" v-model="carNumber" disabled placeholder="请输入车牌号"
name="input" />
<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">{{siteData.siteName}}</view>
<view class="font-12 color-999">
<text class="text-cut">{{siteData.siteAddress}}</text>
</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.oilProductCode}}</text>
<text class="padding-right-xs">
星油价格:
<text class="text-blod oil-main-color"
v-if="(insertResult.sitePrice -1+1)>0">{{(insertResult.sitePrice-1+1)|numberFilter}}</text>
<text class="text-blod oil-main-color" v-else>无价格</text>
</text>
<text class="s-rich">市场价{{insertResult.oilSitePrice|numberFilter}}/L</text>
</view>
<view class="grid col-5 padding-top justify-start">
<view class="padding-xs" v-for="(item,index) in siteData.oilSitePriceDetailsVos"
@tap="oilNameSel(item)" :key="item.priceId">
<button class="cu-btn"
:class="[insertResult.oilProductCode===item.oilProductCode?'bg-main-oil':'line-gray']">{{item.oilProductCode}}</button>
</view>
</view>
</view>
<!-- **** 抢号选择 -->
<view class="padding padding-bottom-0 padding-top-xs bg-white">
<view style="color: #333333;font-size: 30rpx;" class="padding-bottom-sm text-lg">枪号选择</view>
<view class="grid col-5 justify-start">
<view style="width: calc(100% / 4);" class="padding-xs" v-for="(item,index) in ColorList"
:key="index">
<button @tap="gunIdSel(index)"
:style="{width: '100%',color:insertResult.bar===index+1?'':'#333333'}" class="cu-btn"
:class="[insertResult.bar===index+1?'bg-main-oil':'line-gray']">{{index+1}}</button>
</view>
</view>
</view>
<!-- ***油品金额区域 insertResult.oilProductCode 动态控制显示加注的类型和单位 KG/L -->
<view class=" padding bg-white">
<view class="shadow-warp bg-white">
<view class="cu-form-group">
<view class="title newtitle"> {{siteData.siteType=='2'?'加气升数':'加油金额'}}</view>
<input class="newtitle" :placeholder="`请输入${siteData.siteType=='2'?'加气升数':'加油金额'}`"
@input="checkNumber" type="digit" v-model="insertResult.vol" name="input" />
<view style="width: 170rpx;text-align: end;" class="textEllipsis">
<text class="">
<text
v-if="siteData.siteType!='2'">{{vlom?'' + ( numberHandle(vlom) ) + (siteData.siteType=='2'?'':'L'):''}}</text>
<text
v-if="siteData.siteType=='2'">{{vlom?'' + ( insertResult.vDoMoney ? insertResult.vDoMoney+insertResult.discountMoney:'') + (siteData.siteType=='2'?'':'L'):''}}</text>
</text>
</view>
</view>
<view class="my-cell">
<text class="font-12">星卡优惠金额</text>
<text
class="fr">-{{insertResult.discountMoney ?insertResult.discountMoney :'' |numberFilter}}</text>
</view>
<view class="my-cell">
<text class="font-12">实际支付金额</text>
<text
class="oil-main-color fr">{{insertResult.vDoMoney ?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 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 {
changTypes: 0,
vlom: '',
siteData: {
},
zyInfo: {
qrCode: uni.getStorageSync('qrCode'), //类型String 必有字段 备注:二维码字符串
oilsStationId: uni.getStorageSync('oilSite').oilSiteCode //类型String 必有字段 备注加油站id
},
isG7: false,
beforePay: true,
testResult: false,
showPlateList: true,
showInputList: false,
carNumber: '',
plateNo: '',
plateText: '',
imgList: [],
plateName: '',
orderId: '',
showModel: '',
// 车牌号,上
radio: 'B',
active: 0,
plateNumber: '',
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',
type: ''
}
},
onLoad(option) {
console.log("option============", option) //接收option.type
if (option.type == 'rrs') {
console.log('这里是日日顺')
this.type = 'rrs' //根据option.type 进行本地赋值
}
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: function(newVal, oldVal) {
if (newVal) {
this.selected = newVal
console.log('selected发生变化', this.insertResult.oilSitePrice, this.selected.oilSitePrice, this
.insertResult.realPrice, this.selected.xkPrice)
// oilSitePrice 市场价格 sitePrice 实际加油价格
if (this.selected.oilSitePrice) {
this.insertResult.oilSitePrice = this.selected.oilSitePrice
} else if (this.selected.lvPrice) {
this.insertResult.realPrice = this.selected.xkPrice
}
this.insertResult.priceId = this.selected.priceId
this.insertResult.sitePrice = this.selected.sitePrice
this.insertResult.oilProductCode = this.selected.oilProductCode
this.changeMoney()
}
},
plateNo: {
immediate: true,
handler(newVal, oldVal) {
this.plateNo = newVal
if (newVal) {
this.text()
}
}
}
},
methods: {
numberHandle(num) {
num *= 10000
num /= 100
num = Math.ceil(num) / 100
return num.toFixed(2)
},
changeType() {
this.changTypes = 1
},
backType() {
this.changTypes = 0
},
checkNumber(e) {
e.detail.value = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
this.$nextTick(() => {
this.insertResult.vol = e.detail.value
this.getMoney(e)
})
},
oilNameSel(item) {
console.log(item, 'item')
this.selected = {
...item
}
this.activeSitePrice = item.priceId
console.log(this.insertResult.vol)
let e = {
detail: {
}
}
e.detail.value = this.insertResult.vol
this.getMoney(e)
console.log('选择你/n', this.selected, '/n')
},
isNumber(value) { // 判断是否为正常数字
const regPos = /^\d+(\.\d+)?$/; //非负浮点数
const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
if (value.indexOf('-') != -1) {
return false
}
if (regPos.test(value) || regNeg.test(value)) {
return true
} else {
return false
}
},
getMoney(e) {
console.log(e)
if (e.detail.value == '') {
// uni.showToast({
// title: '请输入金额',
// icon: 'none'
// })
return
}
let isNumber = this.isNumber(e.detail.value)
if (!isNumber) {
uni.showToast({
title: '请输入正确金额',
icon: 'none'
})
return
}
this.InputNumber = e
if (this.siteData.oilCardNature == 1) {
var uerTyps = '0' // 0是个人 1是企业
} else {
console.log('当前为企业')
var uerTyps = '1' // 0是个人 1是企业
}
if (this.type == 'ZEYI' || this.type == 'RIRISHUN') {
var number = {
payType: 'SITE_SCAN',
userType: uerTyps,
xoilAmountGun: e.detail.value,
priceId: this.activeSitePrice,
companyId: this.siteData.companyId,
createSource: this.type
}
} else {
var number = {
payType: 'SITE_SCAN',
userType: uerTyps,
xoilAmountGun: e.detail.value,
priceId: this.activeSitePrice,
companyId: this.siteData.companyId,
createSource: this.siteData.createSource
}
}
this.xoilAmountGun = e.detail.value
let _that = this
oliSiteApi.getOrderDiscountInfo(number).then(res => {
this.insertResult.vDoMoney = res.data.payRealAmount
this.insertResult.discountMoney = res.data.oilDiscountAmount
_that.vlom = res.data.volume
})
},
charge() {
this.tsetPlate()
console.log(this.plateText)
console.log(this.plateNo)
console.log(this.carNumber)
console.log(this.testResult)
if ((this.insertResult.sitePrice - 1 + 1) > 0) {
this.saveOrder()
} else {
uni.showToast({
title: '您选择的油品没有油价,不能加油',
icon: 'none'
});
}
},
// 支付订单
saveOrder() {
console.log("加油升数:", this.vlom)
console.log("加油金额:", this.insertResult.vol)
const orderParams = {
siteId: this.siteData.siteId,
oilsId: this.insertResult.priceId,
volume: this.siteData.siteType == '2' ? this.insertResult.vol : this.vlom,
orderNum: this.siteData.otherSerialNumber,
customerOrderId: this.siteData.customerOrderId,
money: this.siteData.siteType == '2' ? this.insertResult.vDoMoney + this.insertResult
.discountMoney : this.insertResult.vol,
createSource: "WECHAT_MINIAPPS", //类型String 必有字段 备注:创建来源
orderSource: "WECHAT_MINIAPPS",
driverName: this.siteData.customerName,
driverPhone: this.siteData.customerPhone,
plateNumber: this.carNumber,
customerId: this.siteData.customerId, //类型String 必有字段 备注司机id
companyId: this.siteData.companyId, //类型String 必有字段 备注企业id
gunId: this.insertResult.bar,
oilsCode: this.insertResult.oilProductCode,
orderMethod: "SITE_SCAN", //类型String 必有字段 备注:订单产生方式
suppleMark: 0,
orderType: "REAL_ORDER", //类型String 必有字段 备注:订单类型 ( REAL_ORDER真实订单 VIRTUAL_ORDER虚拟订单)
payChannel: "BALANCE_PAYMENT", //类型String 必有字段 备注:支付渠道
oilCardType: this.siteData.oilCardNature, //类型String 必有字段 备注:油卡性质 1个人 2企业 3外请
accountCardCode: this.siteData.accountCardCode, //类型String 必有字段 备注:油卡卡号
siteUserName: "1" //类型String 必有字段 备注:加油员名称
}
console.log(orderParams)
if (!orderParams.oilsCode) {
uni.showToast({
title: '请选择油品',
icon: 'none'
});
return false
}
if (!orderParams.volume) {
uni.showToast({
title: '请输入加油升数',
icon: 'none'
});
return false
}
oliSiteApi.payOfQrCode(orderParams).then(res => {
if (res.code === 20000) {
uni.showToast({
title: '下单成功!'
});
uni.setStorageSync('formQr', true)
uni.setStorageSync('orderSource', 'mpxoil')
if (!this.isG7) {
setTimeout(() => {
this.toDetails(res.data.orderId)
}, 400)
} else {
this.beforePay = false
setTimeout(() => {
this.orderId = res.data.orderId
this.queryTimer()
this.getPayStatus(this.orderId)
}, 400)
}
}
})
},
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.siteData.oilSitePriceDetailsVos[0]
}
this.insertResult.bar = 1
},
verifyQrCode() {
oliSiteApi.verifyQrCode(this.zyInfo).then(res => {
if (res.code === 20000) {
this.siteData = res.data
if (res.data.oilSitePriceDetailsVos) {
this.insertResult = Object.assign(this.insertResult, res.data.oilSitePriceDetailsVos[
0])
console.log(this.insertResult)
}
this.carNumber = res.data.plateNumber;
this.selected = res.data.oilSitePriceDetailsVos[0]
this.activeSitePrice = this.selected.priceId
} else {
console.log('此处为verifyQrCode false')
uni.showToast({
title: res.msg ? res.msg : '请确认是否油站二维码',
icon: 'none'
})
setTimeout(() => {
uni.navigateBack()
}, 800)
}
})
},
tRadio() {
this.radio === 'A' ? this.radio = '' : this.radio = 'A'
},
changeMoney() {
this.insertResult.vMoney = this.insertResult.vol * this.selected.oilSitePrice
this.insertResult.discountMoney = this.insertResult.vol * (this.selected.oilSitePrice - this.insertResult
.sitePrice)
this.insertResult.vDoMoney = this.insertResult.vol * this.selected.sitePrice
},
calcMoney(e) {
// console.log(e)
if (this.changTypes = 1) {
let rrs = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]; // 处理输入油升数 只保留小数点后两位
this.$nextTick(() => { //重新赋值给input
this.insertResult.vol = rrs
})
}
// oilSitePrice 市场价格 sitePrice 实际加油价格
this.insertResult.vMoney = this.insertResult.vol * this.selected.oilSitePrice
this.insertResult.discountMoney = this.insertResult.vol * (this.selected.oilSitePrice - this.insertResult
.sitePrice)
this.insertResult.vDoMoney = this.insertResult.vol * this.selected.sitePrice
},
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'
}
},
filters: {
toT(value) {
if (value) {
return value / 1000
}
},
dateFormat(value) {
if (value) {
return value.substring(5, 16)
}
},
numberFilter(value) {
value = value - 1 + 1
return Number(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>