caoliancun
/
NebulaFlashCharge_MP-WEIXIN
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
星油闪充小程序
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.
2 Commits
1 Branch
0 Tags
1.7 MiB
 
 
 
 
Tag: Branch: Tree: e416e23f09
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e416e23f09'
${ noResults }
NebulaFlashCharge_MP-WEIXIN/ChargingStation/pages/index/index.vue

271 lines
9.0 KiB
Raw Blame History

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