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.
263 lines
8.0 KiB
263 lines
8.0 KiB
1 year ago
|
<template>
|
||
|
|
<view v-if='pageData' class="placeOrder_container flex column">
|
||
|
|
<view class="placeOrder_header">
|
||
|
|
<view class="placeOrder_header_name">{{pageData.stationName}}</view>
|
||
|
|
<view class="placeOrder_period flex ac">
|
||
|
|
<text
|
||
|
|
class="placeOrder_period_left oneflex">当前时段：{{pageData.stationPrice.startTime}}-{{pageData.stationPrice.endTime}}</text>
|
||
|
|
<text class="placeOrder_period_right">￥ {{ pageData|price }}/度</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>电费:<text class="blue">{{pageData.stationPrice.businessElectricityFee}}元/度</text>
|
||
|
|
</text>
|
||
|
|
<text style="margin-left: 47rpx;">
|
||
|
|
服务费:
|
||
|
|
<text class="blue">{{pageData.stationPrice.businessServiceFee}}元/度</text>
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="placeOrder_body oneflex">
|
||
|
|
<view class="placeOrder_card flex">
|
||
|
|
<view @click="$refs.accountDialog.open('bottom')" class='flex ac' style="width: 100%;">
|
||
|
|
<image src="@/static/account.png"></image>
|
||
|
|
<view class="account oneflex">
|
||
|
|
<view class="account_label">{{accountList[accountIndex]['name']}}</view>
|
||
|
|
<view class="account_tip">当前余额: <text>{{tool.getnum(accountList[accountIndex]['balance'],3)}}</text> 元</view>
|
||
|
|
</view>
|
||
|
|
<uni-icons type="forward" size="20"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="padding-bottom: 0;" class="placeOrder_card">
|
||
|
|
<view class="placeOrder_body_input flex">
|
||
|
|
<view class="placeOrder_body_input_label"> 充电金额</view>
|
||
|
|
<input @focus="selectPriceOptionValue = ''" v-model="payMoneyPreAvailable" class="oneflex"
|
||
|
|
type="number" placeholder="请输入充电金额">
|
||
|
|
<text>元</text>
|
||
|
|
<text @click="tipFn" style="margin: 0 10rpx 0 20rpx;">
|
||
|
|
+{{pageData.globalPayThreshold}}
|
||
|
|
</text>
|
||
|
|
<uni-icons @click="tipFn" type="help" size="20" color="#476FFAFF"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="placeOrder_body_poriceOoptions flex">
|
||
|
|
<view @click="priceOptionClick(item)" v-for="(item,index) in priceOptions" :key="index"
|
||
|
|
:class=" selectPriceOptionValue == item.value? 'placeOrder_body_poriceOoptions_item select_placeOrder_body_poriceOoptions_item flex ac jc' : 'placeOrder_body_poriceOoptions_item flex ac jc' ">
|
||
|
|
{{item.label}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="placeOrder_card flex">
|
||
|
|
<view class='flex' style="width: 100%;" @click="isShow.licenseDialog=true">
|
||
|
|
<text class="placeOrder_card_label ">车牌号：</text>
|
||
|
|
<view class="oneflex">
|
||
|
|
{{pageData.plateNumberList.length? pageData.plateNumberList[pageIndex.plateNumberIndex]: '请输入车牌号' }}
|
||
|
|
</view>
|
||
|
|
<uni-icons type="forward" size="20"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="placeOrder_footer">
|
||
|
|
<view @click="goPlay" class="placeOrder_footer_button flex ac jc">立即支付</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<keyboard-plate ref="plateNumber" :plateNum.sync='plateNum' @change="getPlateNum" isShow></keyboard-plate>
|
||
|
|
<uni-popup @change="accountChange" :safe-area='false' ref="accountDialog" type="bottom">
|
||
|
|
<plat-item :selectIndex.sync='accountIndex' :pageData = 'accountList'></plat-item>
|
||
|
|
</uni-popup>
|
||
|
|
<uni-popup @change="licenseChange" :safe-area='false' ref="licenseDialog" type="bottom">
|
||
|
|
<select-license @showPlateNumber='isShow.licenseDialog=false; $refs.plateNumber.open()'
|
||
|
|
@confirm='licenseConfirm' v-model="pageIndex.plateNumberIndex" v-if="isShow.licenseDialog"
|
||
|
|
:plateNumbers='pageData.plateNumberList'></select-license>
|
||
|
|
</uni-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import station from '@/api/station.js'
|
||
|
|
import selectLicense from './components/selectLicense/selectLicense.vue'
|
||
|
|
import platItem from './components/accountItem/index.vue'
|
||
|
|
import play from '@/api/play.js'
|
||
|
|
import {
|
||
|
|
indexPage
|
||
|
|
} from './AntiCorruptionLayer.js'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
selectLicense,
|
||
|
|
platItem
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
accountIndex:0,
|
||
|
|
plateNum: '',
|
||
|
|
accountList:[],
|
||
|
|
isShow: {
|
||
|
|
licenseDialog: false,
|
||
|
|
},
|
||
|
|
pageIndex: {
|
||
|
|
plateNumberIndex: 0
|
||
|
|
},
|
||
|
|
checkPage: {
|
||
|
|
qrcode: {
|
||
|
|
tacitly: '',
|
||
|
|
WrongText: '参数qrcode错误'
|
||
|
|
},
|
||
|
|
connectorId: {
|
||
|
|
tacitly: '',
|
||
|
|
WrongText: '参数connectorId错误'
|
||
|
|
},
|
||
|
|
licensePlate: {
|
||
|
|
tacitly: '',
|
||
|
|
WrongText: '车牌号输入错误'
|
||
|
|
},
|
||
|
|
payMoneyPreFreeze: {
|
||
|
|
tacitly: '',
|
||
|
|
WrongText: '参数payMoneyPreFreeze错误'
|
||
|
|
},
|
||
|
|
payMoneyPreAvailable: {
|
||
|
|
tacitly: '',
|
||
|
|
WrongText: '充电金额不能为空'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
payMoneyPreAvailable: '',
|
||
|
|
selectPriceOptionValue: '',
|
||
|
|
priceOptions: [{
|
||
|
|
label: '10元',
|
||
|
|
value: 10
|
||
|
|
}, {
|
||
|
|
label: '30元',
|
||
|
|
value: 30
|
||
|
|
}, {
|
||
|
|
label: '60元',
|
||
|
|
value: 60
|
||
|
|
}, {
|
||
|
|
label: '80元',
|
||
|
|
value: 80
|
||
|
|
}, {
|
||
|
|
label: '100元',
|
||
|
|
value: 100
|
||
|
|
}, {
|
||
|
|
label: '120元',
|
||
|
|
value: 120
|
||
|
|
}, ],
|
||
|
|
pageData: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getAccountList()
|
||
|
|
},
|
||
|
|
onLoad(e) {
|
||
|
|
console.log(e,'=====')
|
||
|
|
this.getStationData(e);
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
price(e) {
|
||
|
|
let price = Number(e.stationPrice.businessElectricityFee) + Number(e.stationPrice.businessServiceFee)
|
||
|
|
return price.toFixed(2);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'isShow.licenseDialog'(e) {
|
||
|
|
e ? this.$refs.licenseDialog.open('bottom') : this.$refs.licenseDialog.close()
|
||
|
|
},
|
||
|
|
selectPriceOptionValue(e) {
|
||
|
|
this.payMoneyPreAvailable = e;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getAccountList(){
|
||
|
|
station.getAccountList().then(res => {
|
||
|
|
this.accountList = res.data
|
||
|
|
})
|
||
|
|
},
|
||
|
|
accountChange(){
|
||
|
|
|
||
|
|
},
|
||
|
|
getPlateNum(e) {
|
||
|
|
if (e.value) {
|
||
|
|
this.pageData['plateNumberList'].push(e.value)
|
||
|
|
this.pageIndex.plateNumberIndex = this.pageData['plateNumberList'].length - 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tipFn() {
|
||
|
|
uni.showModal({
|
||
|
|
title: '支付阈值说明',
|
||
|
|
showCancel: false,
|
||
|
|
content: '为避免金额预估不准导致电未充满，以及防止超充导致订单金额差异。该部分金额，将于订单结算后会根据实际系统结算，自动退回。',
|
||
|
|
success: function(res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
console.log('用户点击确定');
|
||
|
|
} else if (res.cancel) {
|
||
|
|
console.log('用户点击取消');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
licenseConfirm(e) {
|
||
|
|
this.pageIndex.plateNumberIndex = e;
|
||
|
|
this.isShow.licenseDialog = false;
|
||
|
|
},
|
||
|
|
licenseChange(e) {
|
||
|
|
if (!e.show) this.isShow.licenseDialog = false;
|
||
|
|
},
|
||
|
|
showSb() {
|
||
|
|
this.showLicenseDialog = true;
|
||
|
|
},
|
||
|
|
priceOptionClick(e) {
|
||
|
|
this.selectPriceOptionValue = e.value;
|
||
|
|
},
|
||
|
|
getStationData(e) {
|
||
|
|
if (e.type = 'qrCode') {
|
||
|
|
station[e.pointTo?e.pointTo:'scanCode'](Object.assign(e,{
|
||
|
|
qrCode:decodeURIComponent(e.qrCode)
|
||
|
|
})).then(res => {
|
||
|
|
if (res.code == 20000) {
|
||
|
|
this.pageData = new this.tool.Anticorrosive(res.data, indexPage);
|
||
|
|
}else{
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: res.msg,
|
||
|
|
showCancel:false,
|
||
|
|
success: function (res) {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
goPlay() {
|
||
|
|
let data = JSON.parse(JSON.stringify(this.pageData));
|
||
|
|
delete data.stationPrice;
|
||
|
|
data = Object.assign(data, {
|
||
|
|
payMoneyPreAvailable: this.payMoneyPreAvailable,
|
||
|
|
licensePlate: data.plateNumberList[this.pageIndex.plateNumberIndex]
|
||
|
|
});
|
||
|
|
let check = this.tool.checkFn(data, [], this.checkPage);
|
||
|
|
if (check.result) {
|
||
|
|
let {companyId,accountCardCode,payMoneyPreAvailable,payMoneyPreFreeze} = this.accountList[this.accountIndex];
|
||
|
|
play.createOrder( Object.assign(data,{
|
||
|
|
companyId,
|
||
|
|
accountId:accountCardCode
|
||
|
|
}) ).then(res=>{
|
||
|
|
setTimeout(()=>{
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/ChargingStation/pages/placeOrder/result/index?price=${this.tool.getnum(( Number(data.payMoneyPreAvailable) + Number(data.payMoneyPreFreeze) ),2)}&id=${res.data.id}`
|
||
|
|
})
|
||
|
|
},1000)
|
||
|
|
})
|
||
|
|
// uni.navigateTo({
|
||
|
|
// url: `/ChargingStation/pages/placeOrder/play/index?data=${encodeURIComponent(JSON.stringify(data))}`
|
||
|
|
// })
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: check.WrongText,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import 'index.scss';
|
||
|
|
</style>
|