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
<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> |