263 lines
8.0 KiB
Vue
263 lines
8.0 KiB
Vue
<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> |