271 lines
9.0 KiB
Vue
271 lines
9.0 KiB
Vue
<template>
|
||
<view style="width: 100vw;height: 100vh;overflow: hidden;position: relative;">
|
||
<view @click="goGuide" @touchmove.stop.prevent="guideMove" :style="{top:`${guideTop}px` }" class="guide flex ac jc">
|
||
桩点指引
|
||
</view>
|
||
<view v-if="viewData" class="details_body flex column">
|
||
<!-- 详情顶部 -->
|
||
<view class="details_header">
|
||
<view class="details_header_information flex ac">
|
||
<view style="overflow: hidden;" class="oneflex">
|
||
<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="stationItem_top_title">{{viewData.stationName}}</view>
|
||
<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="address">{{viewData.address}}</view>
|
||
<view class=" stationItem_top_label_container flex">
|
||
<view v-for="(item,index) in viewData['tags'] " :index='index'
|
||
:style="{background:item.color}" class="stationItem_top_label">{{item.label}}</view>
|
||
</view>
|
||
</view>
|
||
<view @click="navigation" class="stationItem_distance flex">
|
||
<uni-icons style="margin-right: 10rpx;" type="paperplane-filled" color="#476ffa"
|
||
size="15"></uni-icons>
|
||
{{ tool.getnum(viewData.distance)}} KM
|
||
</view>
|
||
</view>
|
||
<view class="details_header_label">
|
||
<view v-for="(item,index) in ChargingStationLabels" :key="index"
|
||
class="details_header_label_item flex ac">
|
||
<image mode="widthFix" :src="item.logo"></image>
|
||
<text class="oneflex">{{item.title}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 详情内容 -->
|
||
<view class="details_center oneflex">
|
||
<view class="details_center_title">充电桩</view>
|
||
<view style="margin-bottom: 10rpx; align-items: flex-end;" class="flex ">
|
||
<text class="oneflex">当前时段：{{viewData.currentTimeInterval}}</text>
|
||
<text class="totalPrice">￥{{ tool.getnum(viewData.totalFee,3)}} /度</text>
|
||
<text class="totalPrice_old">￥{{ tool.getnum(viewData.originalTotalFee,3)}} /度</text>
|
||
</view>
|
||
<view>
|
||
<text>电费: <text class="blue">{{ tool.getnum(viewData.electricityFee,3) }}元/度</text> </text>
|
||
<text style="margin-left: 41rpx;">服务费: <text class="blue">
|
||
{{ tool.getnum(viewData.serviceFee,3)}}元/度</text></text>
|
||
</view>
|
||
<view class="details_center_label flex">
|
||
<view @click="goChargingPorts('1')" class="details_center_label_item flex ac ">
|
||
<view class="stationItem_bottom_label flex ac">
|
||
<view class="stationItem_bottom_label_logo flex ac jc">快</view>
|
||
<text>{{viewData.fastChargingIdleRatio}}</text>
|
||
</view>
|
||
<view class="flex ac">
|
||
<text style="font-size: 22rpx;">详情</text>
|
||
<uni-icons type="forward" color="#121836" size="15"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view @click="goChargingPorts('2')" class="details_center_label_item flex ac ">
|
||
<view class="stationItem_bottom_label flex ac">
|
||
<view style="border-color: #36658DFF;color: #36658DFF;"
|
||
class="stationItem_bottom_label_logo flex ac jc">慢</view>
|
||
<text>{{viewData.slowChargingIdleRatio}}</text>
|
||
</view>
|
||
<view class="flex ac">
|
||
<text style="font-size: 22rpx;">详情</text>
|
||
<uni-icons type="forward" color="#121836" size="15"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view @click="goChargingPorts('3')" class="details_center_label_item flex ac ">
|
||
<view class="stationItem_bottom_label flex ac">
|
||
<view style="border-color: #F67A22FF;color: #F67A22FF;"
|
||
class="stationItem_bottom_label_logo flex ac jc">其他</view>
|
||
<text>{{viewData.otherIdleRatio}}</text>
|
||
</view>
|
||
<view class="flex ac">
|
||
<text style="font-size: 22rpx;">详情</text>
|
||
<uni-icons type="forward" color="#121836" size="15"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @click="goPeriodPrice" class="details_center_title" style="text-decoration: underline;">
|
||
价格详情
|
||
</view>
|
||
</view>
|
||
<!-- 底部内容 -->
|
||
<view class="details_footer flex ac">
|
||
<view class="flex oneflex ">
|
||
<view @click="collect" class="flex column ac">
|
||
<image mode="heightFix" style="height: 45rpx;"
|
||
:src="viewData.collected? '../../../static/scs.png':'../../../static/sc.png'"></image>
|
||
<view class="label_text">收藏</view>
|
||
</view>
|
||
<view @click="freeTell" style="margin-left: 55rpx;" class="flex column ac">
|
||
<image mode="heightFix" style="height: 45rpx;" src="../../../static/kf.png"></image>
|
||
<view class="label_text">联系客服</view>
|
||
</view>
|
||
</view>
|
||
<view @click="scanCode" class="details_footer_button flex ac jc ">扫码充电</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<skeleton></skeleton>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import station from '@/api/station.js'
|
||
import skeleton from './skeleton.vue'
|
||
export default {
|
||
components: {
|
||
skeleton
|
||
},
|
||
data() {
|
||
return {
|
||
user: uni.getStorageSync('user'),
|
||
guideTop:120,
|
||
viewData: null,
|
||
ChargingStationLabels: [{
|
||
logo: require('../../../static/w.png'),
|
||
title: '60度/小时'
|
||
}, {
|
||
logo: require('../../../static/stop.png'),
|
||
title: '24h内免费停车'
|
||
},
|
||
{
|
||
logo: require('../../../static/24.png'),
|
||
title: '24h营业'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if (e.data) {
|
||
this.getDetails(JSON.parse(e.data))
|
||
}
|
||
},
|
||
methods: {
|
||
goGuide(){
|
||
uni.navigateTo({
|
||
url:`/ChargingStation/pages/guide/index?guideList=${ encodeURIComponent( JSON.stringify(this.viewData.guideList))}`
|
||
})
|
||
},
|
||
guideMove(e){
|
||
this.guideTop = e.touches[0].clientY
|
||
// console.log(e.touches[0],'移动中')
|
||
},
|
||
navigation() {
|
||
this.tool.ReverseAddress(this.viewData.stationLat,this.viewData.stationLng).then(res=>{
|
||
let {address_component,formatted_addresses=null} = res.result;
|
||
console.log(address_component,formatted_addresses,res,'address_component,formatted_addresses')
|
||
uni.openLocation({
|
||
scale:10,
|
||
name:this.viewData.stationName,
|
||
address:`${address_component.province}${address_component.city}${address_component.district}${formatted_addresses?.recommend||''}`,
|
||
latitude: this.viewData.stationLat,
|
||
longitude: this.viewData.stationLng,
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
})
|
||
}).catch(err=>{
|
||
console.log(err,'address_component,formatted_addresses')
|
||
uni.showToast({
|
||
title:'导航地址获取失败',
|
||
icon:'none'
|
||
})
|
||
})
|
||
|
||
},
|
||
collect() {
|
||
const location = uni.getStorageSync('location');
|
||
let {
|
||
latitude = 39.90, longitude = 116.38
|
||
} = location
|
||
let {
|
||
id,
|
||
stationId
|
||
} = this.viewData;
|
||
station[this.viewData.collected ? 'cancelCollect' : 'collectStation']({
|
||
xyStationId: id,
|
||
stationId
|
||
}).then(res => {
|
||
console.log(res,'======collect')
|
||
this.getDetails({
|
||
id,
|
||
stationLat: latitude,
|
||
stationLng: longitude,
|
||
tags: this.viewData['tags']
|
||
})
|
||
})
|
||
},
|
||
freeTell() {
|
||
wx.makePhoneCall({
|
||
phoneNumber: '4008565355', //仅为示例，并非真实的电话号码
|
||
success: function() {
|
||
console.log("拨打电话成功！")
|
||
},
|
||
fail: function() {
|
||
console.log("拨打电话失败！")
|
||
}
|
||
})
|
||
},
|
||
getDetails(data) {
|
||
station.getSiteDetails(data).then(res => {
|
||
if (res.code == 20000) {
|
||
this.viewData = res.data;
|
||
this.viewData['tags'] = data['tags'];
|
||
this.ChargingStationLabels[0].title = `${this.viewData.kilowattHour}/KW`;
|
||
this.ChargingStationLabels[1].title = this.viewData.parkFee;
|
||
this.ChargingStationLabels[2].title = this.viewData.businessHours;
|
||
} else if (res.code == 42011) {
|
||
uni.showToast({
|
||
title: '登陆后可查看',
|
||
icon: 'none',
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 2000)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
async scanCode() {
|
||
if(!this.user){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '登录后才可扫码下单哦',
|
||
confirmText:'去登陆',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/login/index'
|
||
})
|
||
} else if (res.cancel) {
|
||
// 取消
|
||
}
|
||
}
|
||
});
|
||
return
|
||
}
|
||
let res = await this.tool.scanCode();
|
||
if (res.result) {
|
||
let routingParameter = this.tool.routingParameterGeneration({
|
||
type:'qrCode',
|
||
qrCode:encodeURIComponent(res.result),
|
||
stationId:this.viewData.id,
|
||
})
|
||
uni.navigateTo({
|
||
url: `/ChargingStation/pages/placeOrder/index${routingParameter}`
|
||
})
|
||
}
|
||
},
|
||
goPeriodPrice() {
|
||
uni.navigateTo({
|
||
url: `/ChargingStation/pages/periodPrice/index?priceList=${JSON.stringify(this.viewData.priceList)}&now=${this.viewData.currentTimeInterval}`
|
||
})
|
||
},
|
||
goChargingPorts(e) {
|
||
uni.navigateTo({
|
||
url: `/ChargingStation/pages/chargingPorts/index?equipmentType=${e}&id=${this.viewData.id}`
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import 'index.scss';
|
||
@import '../../../components/stationItem/index.css';
|
||
</style> |