|
@@ -1,1630 +1,1630 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <ujp-navbar :is-back="false" height='88' style="background-color: bisque;">
|
|
|
- <view class="ujp-navbar-main">
|
|
|
- <view class="ujp-navbar-main1">
|
|
|
- <view style="margin-left:20rpx;width: 160rpx;">
|
|
|
- <uni-combox class='font2' ref="city" :border="false" v-model="area" :candidates="cities"
|
|
|
- @updateModel='updateCity' @updateSelector="updateTypeSelector(3)"></uni-combox>
|
|
|
- </view>
|
|
|
- <view style="margin-right: 20rpx; flex:1">
|
|
|
- <u-search height="60" :input-style='inputStyle' placeholder="查询站点地址或站名" :showAction="false"
|
|
|
- @focus="navigate"></u-search>
|
|
|
- </view>
|
|
|
- <view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
|
|
|
- <text class="iconfont"></text> <text class="list font2">列表</text>
|
|
|
- </view>
|
|
|
- <view style="margin-right: 20rpx;" v-show="!viewMode" @click="mapMode">
|
|
|
- <text class="iconfont"></text> <text class="list font2">地图</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ujp-navbar-main2">
|
|
|
- <view style="display: flex;">
|
|
|
- <view
|
|
|
- style=" min-width: 180rpx; max-width: 200rpx;margin-left:20rpx;margin-right:10rpx;flex:1; ">
|
|
|
-
|
|
|
- <uni-combox class='font2' ref="raidus" :border="false" v-model="raidus"
|
|
|
- :candidates="radiuses" @updateModel='updateRadius'
|
|
|
- @updateSelector="updateTypeSelector('0')"></uni-combox>
|
|
|
- </view>
|
|
|
- <view style=" min-width: 180rpx; max-width: 200rpx;flex:1; ">
|
|
|
- <uni-combox ref="type" class='font2' :border="false" v-model="type" :candidates="types"
|
|
|
- @updateModel='updateType' @updateSelector="updateTypeSelector(1)"></uni-combox>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <!-- <view style="flex:1;">
|
|
|
- <uni-combox ref="stationType" class='font2' :border="false" v-model="stationType"
|
|
|
- :candidates="stationTypes" @updateModel='updateType2'
|
|
|
- @updateSelector="updateTypeSelector(2)"></uni-combox>
|
|
|
- </view> -->
|
|
|
- <view style="margin-right: 20rpx;">
|
|
|
- <!-- -->
|
|
|
- <!-- <view v-show="dropdownShow" >
|
|
|
- <u-mask :show="dropdownShow" ></u-mask>
|
|
|
- </view> -->
|
|
|
- <jp-dropdown @open="dropdownShow=true" active-color="rgb(0, 185, 98)"
|
|
|
- @close="dropdownShow=false" ref="uDropdown" style=" display: contents;" :top="180">
|
|
|
- <u-dropdown-item title="筛选">
|
|
|
- <view class="slot-content">
|
|
|
-
|
|
|
- <view v-if="dropdownShow" class="u-text-center u-content-color ">
|
|
|
- <view class="preference" style="z-index:1024;width: 100%;">
|
|
|
- <view class="content-s">
|
|
|
- <view class="preference_group">
|
|
|
- <view class="preference_group_item"><label
|
|
|
- class="preference_label">距离我</label></view>
|
|
|
- <view>
|
|
|
- <u-tag class="preference_item"
|
|
|
- v-for="(item, index) in info.miles_type" :key="index"
|
|
|
- :style="index == preference.miles_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
- shape="circle" :text="item.text"
|
|
|
- @click="selectMiles(index)"></u-tag>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="preference_group">
|
|
|
- <view class="preference_group_item"><label
|
|
|
- class="preference_label">充电站类型</label></view>
|
|
|
- <view>
|
|
|
- <u-tag class="preference_item_medium"
|
|
|
- v-for="(item, index) in info.obc_type" :key="index"
|
|
|
- :style="index == preference.obc_type_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
- shape="circle" :text="item.text"
|
|
|
- @click="selectOBSType(index)"></u-tag>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="preference_group">
|
|
|
- <view class="preference_group_item"><label
|
|
|
- class="preference_label">运营模式</label></view>
|
|
|
- <view>
|
|
|
- <u-tag class="preference_item_medium"
|
|
|
- v-for="(item, index) in info.obc_stationType" :key="index"
|
|
|
- :style="index == preference.obc_stationType_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
- shape="circle" :text="item.text"
|
|
|
- @click="selectOBSType2(index)"></u-tag>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="preference_group" v-if="false">
|
|
|
- <view class="preference_group_item"><label
|
|
|
- class="preference_label">是否对外开放</label></view>
|
|
|
- <view>
|
|
|
- <u-tag class="preference_item_plus"
|
|
|
- v-for="(item, index) in info.obc_status" :key="index"
|
|
|
- :style="index == preference.obc_status_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
- shape="circle" :text="item.text"
|
|
|
- @click="selectOBSStatus(index)"></u-tag>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="preference_group" v-if="false">
|
|
|
- <view style="margin-left: 30rpx;"><u-checkbox active-color="#00b962"
|
|
|
- shape="circle" v-model="preference.save_preference"
|
|
|
- @change="radioChange">保存偏好设置</u-checkbox></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="pre-btn" style="display: flex;flex-direction: row;">
|
|
|
- <view class="btn-1 font3" @click="reset" style="width: 30%;">重置</view>
|
|
|
- <view class="btn-2 font3" @click="close"
|
|
|
- style="width: 70%;background-color: #00B962;color: #fff;">确定</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <u-button type="primary" @click="closeDropdown">确定</u-button> -->
|
|
|
- </view>
|
|
|
- </u-dropdown-item>
|
|
|
- </jp-dropdown>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </ujp-navbar>
|
|
|
- <!-- 定位 -->
|
|
|
- <view v-show="!viewMode">
|
|
|
-
|
|
|
-
|
|
|
- <view class="location-box" v-if="message != 'getLocation:ok' && stationslist.length == 0 ">
|
|
|
- <view class="location">
|
|
|
- <view class="location-text">
|
|
|
- <view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
|
|
|
- 定位中...
|
|
|
- </view>
|
|
|
- <view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
|
|
|
- 授权定位后可查询附近充电站
|
|
|
- </view>
|
|
|
- <view class="text-view">
|
|
|
- <view class="text-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
|
|
|
- 重新定位
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="text-3 text-4 oldTextjp2" oldstyle="font-size: 16px;"
|
|
|
- @click="searchStationData()">
|
|
|
- 直接搜索
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="img-box">
|
|
|
- <img src="static/img/暂无网络信号-缺省页 1.png">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view v-else-if="message == 'getLocation:ok'&&stationslist.length==0">
|
|
|
- <view class="carNone" v-if="stationslist.length == 0">
|
|
|
- <img src="static/img/暂无数据-缺省页.png" alt="">
|
|
|
- <p class="oldTextjp2" oldstyle="font-size: 18px;">{{loading?'暂无可用充电站':'正在为你加载可用的充电站...'}}</p>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <view>
|
|
|
- <view v-for="(item,index) in (stationslist.length?stationslist:defaultStation)" :key="item.id"
|
|
|
- class="charing-slow charing-new" @click="stationDetail(item)">
|
|
|
-
|
|
|
- <view class="new-img">
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <ujp-navbar :is-back="false" height='88' style="background-color: bisque;">
|
|
|
+ <view class="ujp-navbar-main">
|
|
|
+ <view class="ujp-navbar-main1">
|
|
|
+ <view style="margin-left:20rpx;width: 160rpx;">
|
|
|
+ <uni-combox class='font2' ref="city" :border="false" v-model="area" :candidates="cities"
|
|
|
+ @updateModel='updateCity' @updateSelector="updateTypeSelector(3)"></uni-combox>
|
|
|
+ </view>
|
|
|
+ <view style="margin-right: 20rpx; flex:1">
|
|
|
+ <u-search height="60" :input-style='inputStyle' placeholder="查询站点地址或站名" :showAction="false"
|
|
|
+ @focus="navigate"></u-search>
|
|
|
+ </view>
|
|
|
+ <view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
|
|
|
+ <text class="iconfont"></text> <text class="list font2">列表</text>
|
|
|
+ </view>
|
|
|
+ <view style="margin-right: 20rpx;" v-show="!viewMode" @click="mapMode">
|
|
|
+ <text class="iconfont"></text> <text class="list font2">地图</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="ujp-navbar-main2">
|
|
|
+ <view style="display: flex;">
|
|
|
+ <view
|
|
|
+ style=" min-width: 180rpx; max-width: 200rpx;margin-left:20rpx;margin-right:10rpx;flex:1; ">
|
|
|
+
|
|
|
+ <uni-combox class='font2' ref="raidus" :border="false" v-model="raidus"
|
|
|
+ :candidates="radiuses" @updateModel='updateRadius'
|
|
|
+ @updateSelector="updateTypeSelector('0')"></uni-combox>
|
|
|
+ </view>
|
|
|
+ <view style=" min-width: 180rpx; max-width: 200rpx;flex:1; ">
|
|
|
+ <uni-combox ref="type" class='font2' :border="false" v-model="type" :candidates="types"
|
|
|
+ @updateModel='updateType' @updateSelector="updateTypeSelector(1)"></uni-combox>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <view style="flex:1;">
|
|
|
+ <uni-combox ref="stationType" class='font2' :border="false" v-model="stationType"
|
|
|
+ :candidates="stationTypes" @updateModel='updateType2'
|
|
|
+ @updateSelector="updateTypeSelector(2)"></uni-combox>
|
|
|
+ </view> -->
|
|
|
+ <view style="margin-right: 20rpx;">
|
|
|
+ <!-- -->
|
|
|
+ <!-- <view v-show="dropdownShow" >
|
|
|
+ <u-mask :show="dropdownShow" ></u-mask>
|
|
|
+ </view> -->
|
|
|
+ <jp-dropdown @open="dropdownShow=true" active-color="rgb(0, 185, 98)"
|
|
|
+ @close="dropdownShow=false" ref="uDropdown" style=" display: contents;" :top="180">
|
|
|
+ <u-dropdown-item title="筛选">
|
|
|
+ <view class="slot-content">
|
|
|
+
|
|
|
+ <view v-if="dropdownShow" class="u-text-center u-content-color ">
|
|
|
+ <view class="preference" style="z-index:1024;width: 100%;">
|
|
|
+ <view class="content-s">
|
|
|
+ <view class="preference_group">
|
|
|
+ <view class="preference_group_item"><label
|
|
|
+ class="preference_label">距离我</label></view>
|
|
|
+ <view>
|
|
|
+ <u-tag class="preference_item"
|
|
|
+ v-for="(item, index) in info.miles_type" :key="index"
|
|
|
+ :style="index == preference.miles_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
+ shape="circle" :text="item.text"
|
|
|
+ @click="selectMiles(index)"></u-tag>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="preference_group">
|
|
|
+ <view class="preference_group_item"><label
|
|
|
+ class="preference_label">充电站类型</label></view>
|
|
|
+ <view>
|
|
|
+ <u-tag class="preference_item_medium"
|
|
|
+ v-for="(item, index) in info.obc_type" :key="index"
|
|
|
+ :style="index == preference.obc_type_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
+ shape="circle" :text="item.text"
|
|
|
+ @click="selectOBSType(index)"></u-tag>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="preference_group">
|
|
|
+ <view class="preference_group_item"><label
|
|
|
+ class="preference_label">运营模式</label></view>
|
|
|
+ <view>
|
|
|
+ <u-tag class="preference_item_medium"
|
|
|
+ v-for="(item, index) in info.obc_stationType" :key="index"
|
|
|
+ :style="index == preference.obc_stationType_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
+ shape="circle" :text="item.text"
|
|
|
+ @click="selectOBSType2(index)"></u-tag>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="preference_group" v-if="false">
|
|
|
+ <view class="preference_group_item"><label
|
|
|
+ class="preference_label">是否对外开放</label></view>
|
|
|
+ <view>
|
|
|
+ <u-tag class="preference_item_plus"
|
|
|
+ v-for="(item, index) in info.obc_status" :key="index"
|
|
|
+ :style="index == preference.obc_status_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
+ shape="circle" :text="item.text"
|
|
|
+ @click="selectOBSStatus(index)"></u-tag>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="preference_group" v-if="false">
|
|
|
+ <view style="margin-left: 30rpx;"><u-checkbox active-color="#00b962"
|
|
|
+ shape="circle" v-model="preference.save_preference"
|
|
|
+ @change="radioChange">保存偏好设置</u-checkbox></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="pre-btn" style="display: flex;flex-direction: row;">
|
|
|
+ <view class="btn-1 font3" @click="reset" style="width: 30%;">重置</view>
|
|
|
+ <view class="btn-2 font3" @click="close"
|
|
|
+ style="width: 70%;background-color: #00B962;color: #fff;">确定</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <u-button type="primary" @click="closeDropdown">确定</u-button> -->
|
|
|
+ </view>
|
|
|
+ </u-dropdown-item>
|
|
|
+ </jp-dropdown>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </ujp-navbar>
|
|
|
+ <!-- 定位 -->
|
|
|
+ <view v-show="!viewMode">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="location-box" v-if="message != 'getLocation:ok' && stationslist.length == 0 ">
|
|
|
+ <view class="location">
|
|
|
+ <view class="location-text">
|
|
|
+ <view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ 定位中...
|
|
|
+ </view>
|
|
|
+ <view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
|
|
|
+ 授权定位后可查询附近充电站
|
|
|
+ </view>
|
|
|
+ <view class="text-view">
|
|
|
+ <view class="text-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
|
|
|
+ 重新定位
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="text-3 text-4 oldTextjp2" oldstyle="font-size: 16px;"
|
|
|
+ @click="searchStationData()">
|
|
|
+ 直接搜索
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="img-box">
|
|
|
+ <img src="@/assets/static/img/暂无网络信号-缺省页 1.png">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view v-else-if="message == 'getLocation:ok'&&stationslist.length==0">
|
|
|
+ <view class="carNone" v-if="stationslist.length == 0">
|
|
|
+ <img src="@/assets/static/img/暂无数据-缺省页.png" alt="">
|
|
|
+ <p class="oldTextjp2" oldstyle="font-size: 18px;">{{loading?'暂无可用充电站':'正在为你加载可用的充电站...'}}</p>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>
|
|
|
+ <view v-for="(item,index) in (stationslist.length?stationslist:defaultStation)" :key="item.id"
|
|
|
+ class="charing-slow charing-new" @click="stationDetail(item)">
|
|
|
+
|
|
|
+ <view class="new-img">
|
|
|
<img :src="item.image" v-if="item.image" class="img1">
|
|
|
- <img v-else src="@/assets/img/chargesite_default.png" class="img1" mode=""></img>
|
|
|
- <view class="img2Class" v-if="item.isRecommend||stationslist.length==0">
|
|
|
- <img src="@/assets/img/9-4/推荐.svg" class="img2">
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="img2Class" v-else-if="item.isAlways" >
|
|
|
-
|
|
|
- <img src="@/assets/img/9-4/常用.svg" class="img2">
|
|
|
- </view>
|
|
|
- <view class="img2Class" v-else-if="item.isSpecial" >
|
|
|
-
|
|
|
- <img src="@/assets/img/9-4/特价tag.svg" class="img2">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="new-body">
|
|
|
-
|
|
|
-
|
|
|
- <view class="address">
|
|
|
- <view class="name oldTextjp" oldstyle="font-size: 20px;">
|
|
|
- {{item.name}}
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="sign">
|
|
|
- <!-- <view class="sign-tag sign-0" v-if="item.isRecommend||stationslist.length==0">推荐</view>
|
|
|
- <view class="sign-tag sign-5" v-if="item.isAlways" >常用</view>
|
|
|
- -->
|
|
|
-
|
|
|
- <view class="sign-tag sign-1"
|
|
|
- v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
|
|
|
- 会员{{discountRatio10(item.discountRatio)}}折</view>
|
|
|
-
|
|
|
- <view class="sign-tag sign-4" v-if="item.nightLowPriceEnabled">
|
|
|
- 夜间超低价</view>
|
|
|
-
|
|
|
- <view class="sign-tag sign-3" v-if="item.category=='超充'">160kW超充站</view>
|
|
|
- <view class="sign-tag sign-2" v-if="item.platformType==1">自营站</view>
|
|
|
- <view class="sign-tag sign-2" v-if="item.tagList.length != 0"
|
|
|
- v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>
|
|
|
-
|
|
|
- <template v-if="item.stationType==50">
|
|
|
- {{item.address}}
|
|
|
- </template>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="price-free price-freeList" style="margin-top: 16rpx;">
|
|
|
- <view class="free">
|
|
|
-
|
|
|
- <view class="fast" v-if="item.fastNum">
|
|
|
- <view class="fast-font">
|
|
|
- 快
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
-
|
|
|
- {{item.fastAvailableNum}}
|
|
|
- </view>
|
|
|
- <view class="num1">
|
|
|
-
|
|
|
- /{{item.fastNum}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="slow" v-if="item.slowNum">
|
|
|
- <view class="slow-font">
|
|
|
- 慢
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
- {{item.slowAvailableNum}}
|
|
|
- </view>
|
|
|
- <view class="num1">
|
|
|
- /{{item.slowNum}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <template v-if="stationslist.length!=0">
|
|
|
-
|
|
|
- <view class="distance " v-if="item.distance != '99999999'">
|
|
|
- <text class="iconfont" style="color:#666666"></text>
|
|
|
- {{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'km' : '小于100m'}}
|
|
|
- </view>
|
|
|
- <view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
|
|
|
- <text class="iconfont" style="color:#666666"></text>
|
|
|
- 暂无定位
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <u-line margin="16rpx 0 "></u-line>
|
|
|
-
|
|
|
- <view class="price-free price-freeList">
|
|
|
- <view class="price" v-if="personInfo&&personInfo.userType==2">
|
|
|
- <view class="price-1">
|
|
|
- <text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
|
|
|
- : (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
|
|
|
- <text class="unit " oldstyle="font-size: 14px;">
|
|
|
- 元/度
|
|
|
- </text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="price-3 " v-if="prevMonthKwhBL&&item.tagList&&item.tagList.length&&(item.tagList.indexOf('6折卡')>-1||item.tagList.indexOf('月卡')>-1||item.tagList.indexOf('自营站')>-1)">
|
|
|
- <view class="num1">
|
|
|
-
|
|
|
- <img src="@/assets/img/9-4/6折卡价.svg" />
|
|
|
-
|
|
|
- </view>
|
|
|
- <text
|
|
|
- class="num">{{ (item.electricityPrice+(item.servicePrice*0.6)).toFixed(2)}}元/度</text>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="price-3 price-3-yue " v-if="!prevMonthKwhBL&&item.tagList&&item.tagList.length&&(item.tagList.indexOf('6折卡')>-1||item.tagList.indexOf('月卡')>-1||item.tagList.indexOf('自营站')>-1)">
|
|
|
- <view class="num1">
|
|
|
-
|
|
|
- <img src="@/assets/img/9-4/月卡价格.png" />
|
|
|
-
|
|
|
- </view>
|
|
|
- <text
|
|
|
- class="num">{{ (item.electricityPrice).toFixed(2)}}元/度</text>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 游客价格-->
|
|
|
- <view class="price" v-else>
|
|
|
- <view class="price-1">
|
|
|
- <text class="num">
|
|
|
- {{showNumJP(item.electricityPrice+item.servicePrice)}}</text>
|
|
|
- <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
|
|
|
- </view>
|
|
|
- <view class="price-3 " oldstyle="font-size: 48rpx;" v-if="item.giveDiscount">
|
|
|
- <text class="num1">
|
|
|
- <img src="@/assets/img/9-4/会员价.svg" />
|
|
|
-
|
|
|
-
|
|
|
- </text>
|
|
|
- <text
|
|
|
- class="num">{{ showNumJP(item.electricityPrice+item.discountServicePrice)}}元/度</text>
|
|
|
- <text class="unit "></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <u-divider margin-top="20" v-if="stationslist.length!=0" style="margin-bottom: 20px;" bg-color="#F2F4F4"
|
|
|
- >已经到底了</u-divider>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-show="viewMode">
|
|
|
- <view>
|
|
|
- <Chargermap @onMoveStart="moveStart" @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked"
|
|
|
- @onload="mapdown" @clickMap="clickMap"></Chargermap>
|
|
|
- <!--@location="location"-->
|
|
|
- <view class="locationBtn" style=' ' @click="setCenter">
|
|
|
- <u-image src="@/static/img/location.png" border-radius="8" bg-color="#ffffff" width="20px"
|
|
|
- height="20px"></u-image>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 新版卡片 -->
|
|
|
- <view class="chargerCard" v-if="stationsmap.length>0">
|
|
|
- <swiper v-if="stationsmap.length>0" :current="currentIndex" @change="swiperChange"
|
|
|
- slide-change-transition-end='swiperTransitionEnd' @transition="swiperTransition">
|
|
|
- <swiper-item v-for="(item,index) in stationsmap" :key="item.id" style="height: 100%;">
|
|
|
- <view class="swiper-item" style="height: 100%; background-color: #ffffff;"
|
|
|
- @click="stationDetail(item)">
|
|
|
- <view class="charing-slow charing-slow-2" @click="stationDetail(item)">
|
|
|
- <view class="address">
|
|
|
- <view class="name oldTextjp" oldstyle="font-size: 20px;">
|
|
|
- {{item.name}}
|
|
|
- </view>
|
|
|
- <view class="distance " v-if="item.distance != '99999999'">
|
|
|
- <text class="iconfont" style="color:#666666"></text>
|
|
|
- {{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
|
|
|
- </view>
|
|
|
- <view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
|
|
|
- <text class="iconfont" style="color:#666666"></text>
|
|
|
- 暂无定位
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="sign min-h">
|
|
|
-
|
|
|
-
|
|
|
- <view class="sign-tag sign-1"
|
|
|
- v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
|
|
|
- 会员{{discountRatio10(item.discountRatio)}}折</view>
|
|
|
- <view class="sign-tag sign-3" v-if="item.category=='超充'">160kW超充站</view>
|
|
|
- <view class="sign-tag sign-4" v-if="item.nightLowPriceEnabled">
|
|
|
- 夜间超低价</view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="sign-tag sign-2" v-if="item.platformType==1">自营站</view>
|
|
|
- <view class="sign-tag sign-2" v-if="item.tagList.length != 0"
|
|
|
- v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="price-free price-freeOne">
|
|
|
- <view class="price" v-if="personInfo&&personInfo.userType==2">
|
|
|
- <view class="price-1">
|
|
|
- <text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
|
|
|
- : (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
|
|
|
- <text class="unit " oldstyle="font-size: 14px;">
|
|
|
- 元/度
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="price-2 " oldstyle="font-size: 14px;" v-if="item.giveDiscount">
|
|
|
- <text
|
|
|
- class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
|
|
|
- <text class="unit">元/度</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 游客价格-->
|
|
|
- <view class="price" v-else>
|
|
|
- <view class="price-1">
|
|
|
- <text class="num">
|
|
|
- {{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
|
|
|
- <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
|
|
|
- </view>
|
|
|
- <view class="price-3 " oldstyle="font-size: 48rpx;" v-if="item.giveDiscount">
|
|
|
- <text class="num1">会员</text>
|
|
|
- <text
|
|
|
- class="num">{{ (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
|
|
|
- <text class="unit ">元/度</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="free">
|
|
|
-
|
|
|
- <view class="fast" v-if="item.fastNum">
|
|
|
- <view class="fast-font">
|
|
|
- 快
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
-
|
|
|
- {{item.fastAvailableNum}}
|
|
|
- </view>
|
|
|
- <view class="num1">
|
|
|
-
|
|
|
- /{{item.fastNum}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="slow" v-if="item.slowNum">
|
|
|
- <view class="slow-font">
|
|
|
- 慢
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
- {{item.slowAvailableNum}}
|
|
|
- </view>
|
|
|
- <view class="num1">
|
|
|
- /{{item.slowNum}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <Tabbar :current="2" ref="tabbarMain"></Tabbar>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import * as indexAPI from '@/apis/index.js'
|
|
|
- import * as api from '@/apis/site.js';
|
|
|
- import Tabbar from '@/components/Tabbar.vue';
|
|
|
- import Chargermap from '@/components/Chargermap.vue';
|
|
|
- import jpDropdown from '@/components/Udropdown.vue';
|
|
|
-
|
|
|
- import uniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
|
|
|
- import * as WxJsApi from '@/utils/wxJsApi.js'
|
|
|
-import {
|
|
|
- newDate,parseUnixTime
|
|
|
-
|
|
|
- } from '@/utils'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- Chargermap,
|
|
|
- Tabbar,
|
|
|
- uniCombox,
|
|
|
- jpDropdown
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- personInfo: {},
|
|
|
- loading: false,
|
|
|
- viewMode: false, //列表
|
|
|
- inputStyle: {
|
|
|
- backgroundColor: 'transparent',
|
|
|
- "font-size": '32rpx',
|
|
|
- },
|
|
|
- defaultStation: [],
|
|
|
- cities: ['荆州市'],
|
|
|
- radiuses: ['1公里', '2公里', '5公里', '10公里', '20公里', '50公里', '100公里', '200公里'],
|
|
|
- types: ['全部', '直流快充', '交流慢充'],
|
|
|
- stationTypes: ['全部', '公共充电桩', '个人充电桩'],
|
|
|
- info: {
|
|
|
- miles_type: [{
|
|
|
- distance: 1,
|
|
|
- text: '1公里'
|
|
|
- },
|
|
|
- {
|
|
|
- distance: 2,
|
|
|
- text: '2公里'
|
|
|
- },
|
|
|
- {
|
|
|
- distance: 5,
|
|
|
- text: '5公里'
|
|
|
- },
|
|
|
- {
|
|
|
- distance: 10,
|
|
|
- text: '10公里'
|
|
|
- },
|
|
|
- {
|
|
|
- distance: 20,
|
|
|
- text: '20公里'
|
|
|
- },
|
|
|
- {
|
|
|
- distance: 50,
|
|
|
- text: '50公里'
|
|
|
- },
|
|
|
- {
|
|
|
- distance: 100,
|
|
|
- text: '100公里'
|
|
|
- },
|
|
|
- {
|
|
|
- distance: 200,
|
|
|
- text: '200公里'
|
|
|
- }
|
|
|
- ],
|
|
|
- obc_type: [{
|
|
|
- value: '',
|
|
|
- text: '全部'
|
|
|
- }, {
|
|
|
- value: 1,
|
|
|
- text: '直流快充'
|
|
|
- }, {
|
|
|
- value: 2,
|
|
|
- text: '交流慢充'
|
|
|
- }],
|
|
|
- obc_status: [{
|
|
|
- value: 0,
|
|
|
- text: '对外开放'
|
|
|
- }, {
|
|
|
- value: 1,
|
|
|
- text: '不对外开放'
|
|
|
- }],
|
|
|
- obc_voltage: [{
|
|
|
- value: 0,
|
|
|
- text: '低于700V'
|
|
|
- }, {
|
|
|
- value: 1,
|
|
|
- text: '700V及以上'
|
|
|
- }],
|
|
|
- obc_power: {
|
|
|
- minValue: 0,
|
|
|
- maxValue: 1000
|
|
|
- },
|
|
|
- obc_stationType: [{
|
|
|
- value: '',
|
|
|
- text: '全部'
|
|
|
- }, {
|
|
|
- value: -1,
|
|
|
- text: '自营站'
|
|
|
- }, {
|
|
|
- value: 1,
|
|
|
- text: '合作站'
|
|
|
- }, {
|
|
|
- value: 50,
|
|
|
- text: '个人桩'
|
|
|
- }]
|
|
|
- },
|
|
|
- preference: {
|
|
|
- miles_index: 3,
|
|
|
- obc_stationType_index: 0,
|
|
|
- obc_type_index: 0,
|
|
|
- obc_status_index: 0,
|
|
|
- obc_voltage_index: 0,
|
|
|
- save_preference: false,
|
|
|
- obc_power: {
|
|
|
- minValue: 0,
|
|
|
- maxValue: 500
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- area: '荆州市',
|
|
|
- raidus: '10公里',
|
|
|
- type: '全部',
|
|
|
- stationType: '全部',
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- message: '',
|
|
|
- stationslist: [],
|
|
|
- stationsmap: [],
|
|
|
- pointTimeOut: true,
|
|
|
- dropdownShow: false,
|
|
|
- currentIndex: 0,
|
|
|
- carImg3span1:0,
|
|
|
- carImg3span2:0,
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- //this.timeOut = false;
|
|
|
- this.pointTimeOut = false;
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- //this.timeOut = false;
|
|
|
- this.pointTimeOut = false;
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- if (this.$refs.tabbarMain) {
|
|
|
- this.$refs.tabbarMain.setcount(2);
|
|
|
- }
|
|
|
- if (!this.pointTimeOut) {
|
|
|
- this.pointTimeOut = true
|
|
|
- this.getPointTimeOut();
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- this.type = this.info.obc_type[this.preference.obc_type_index].text;
|
|
|
- this.raidus = this.info.miles_type[this.preference.miles_index].text;
|
|
|
- this.stationType = this.info.obc_stationType[this.preference.obc_stationType_index].text;
|
|
|
-
|
|
|
-
|
|
|
- if (this.viewMode) {
|
|
|
- this.$refs.amap.init();
|
|
|
- this.searchStationData()
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
|
|
|
- // //(res)
|
|
|
- }).catch(error => {
|
|
|
- //(res)
|
|
|
- })
|
|
|
- if (this.carhelp.getPersonInfo()) {
|
|
|
- // this.userId = this.carhelp.getPersonInfo().id;
|
|
|
- this.personInfo = this.carhelp.getPersonInfo();
|
|
|
- }
|
|
|
- this.getPointTimeOut();
|
|
|
- this.getChargeList()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- prevMonthKwhBL(){
|
|
|
- if(this.carImg3span1>=1000){
|
|
|
- return false
|
|
|
- }
|
|
|
- return true
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- getChargeList(){
|
|
|
- var obj=this.carhelp.get("carhelp_getChargeList")
|
|
|
- var time=new Date( ).toLocaleString().substr(0,12).replace("T"," ");
|
|
|
- if(obj&&time==obj.time){
|
|
|
-
|
|
|
- this.carImg3span1=parseInt(obj.electricQuantity);
|
|
|
- this.carImg3span2=parseInt(obj.totalServiceMoney) ;
|
|
|
- console.log("carhelp_getChargeList",this.carImg3span1,this.carImg3span2)
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- var date =new Date().getTime()-30*1000*60*60*24;
|
|
|
+ <img v-else src="@/assets/img/chargesite_default.png" class="img1" mode=""></img>
|
|
|
+ <view class="img2Class" v-if="item.isRecommend||stationslist.length==0">
|
|
|
+ <img src="@/assets/img/9-4/推荐.svg" class="img2">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="img2Class" v-else-if="item.isAlways" >
|
|
|
+
|
|
|
+ <img src="@/assets/img/9-4/常用.svg" class="img2">
|
|
|
+ </view>
|
|
|
+ <view class="img2Class" v-else-if="item.isSpecial" >
|
|
|
+
|
|
|
+ <img src="@/assets/img/9-4/特价tag.svg" class="img2">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="new-body">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="address">
|
|
|
+ <view class="name oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="sign">
|
|
|
+ <!-- <view class="sign-tag sign-0" v-if="item.isRecommend||stationslist.length==0">推荐</view>
|
|
|
+ <view class="sign-tag sign-5" v-if="item.isAlways" >常用</view>
|
|
|
+ -->
|
|
|
+
|
|
|
+ <view class="sign-tag sign-1"
|
|
|
+ v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
|
|
|
+ 会员{{discountRatio10(item.discountRatio)}}折</view>
|
|
|
+
|
|
|
+ <view class="sign-tag sign-4" v-if="item.nightLowPriceEnabled">
|
|
|
+ 夜间超低价</view>
|
|
|
+
|
|
|
+ <view class="sign-tag sign-3" v-if="item.category=='超充'">160kW超充站</view>
|
|
|
+ <view class="sign-tag sign-2" v-if="item.platformType==1">自营站</view>
|
|
|
+ <view class="sign-tag sign-2" v-if="item.tagList.length != 0"
|
|
|
+ v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>
|
|
|
+
|
|
|
+ <template v-if="item.stationType==50">
|
|
|
+ {{item.address}}
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="price-free price-freeList" style="margin-top: 16rpx;">
|
|
|
+ <view class="free">
|
|
|
+
|
|
|
+ <view class="fast" v-if="item.fastNum">
|
|
|
+ <view class="fast-font">
|
|
|
+ 快
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+
|
|
|
+ {{item.fastAvailableNum}}
|
|
|
+ </view>
|
|
|
+ <view class="num1">
|
|
|
+
|
|
|
+ /{{item.fastNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slow" v-if="item.slowNum">
|
|
|
+ <view class="slow-font">
|
|
|
+ 慢
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{item.slowAvailableNum}}
|
|
|
+ </view>
|
|
|
+ <view class="num1">
|
|
|
+ /{{item.slowNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <template v-if="stationslist.length!=0">
|
|
|
+
|
|
|
+ <view class="distance " v-if="item.distance != '99999999'">
|
|
|
+ <text class="iconfont" style="color:#666666"></text>
|
|
|
+ {{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'km' : '小于100m'}}
|
|
|
+ </view>
|
|
|
+ <view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
|
|
|
+ <text class="iconfont" style="color:#666666"></text>
|
|
|
+ 暂无定位
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <u-line margin="16rpx 0 "></u-line>
|
|
|
+
|
|
|
+ <view class="price-free price-freeList">
|
|
|
+ <view class="price" v-if="personInfo&&personInfo.userType==2">
|
|
|
+ <view class="price-1">
|
|
|
+ <text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
|
|
|
+ : (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
|
|
|
+ <text class="unit " oldstyle="font-size: 14px;">
|
|
|
+ 元/度
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="price-3 " v-if="prevMonthKwhBL&&item.tagList&&item.tagList.length&&(item.tagList.indexOf('6折卡')>-1||item.tagList.indexOf('月卡')>-1||item.tagList.indexOf('自营站')>-1)">
|
|
|
+ <view class="num1">
|
|
|
+
|
|
|
+ <img src="@/assets/img/9-4/6折卡价.svg" />
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <text
|
|
|
+ class="num">{{ (item.electricityPrice+(item.servicePrice*0.6)).toFixed(2)}}元/度</text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="price-3 price-3-yue " v-if="!prevMonthKwhBL&&item.tagList&&item.tagList.length&&(item.tagList.indexOf('6折卡')>-1||item.tagList.indexOf('月卡')>-1||item.tagList.indexOf('自营站')>-1)">
|
|
|
+ <view class="num1">
|
|
|
+
|
|
|
+ <img src="@/assets/img/9-4/月卡价格.png" />
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <text
|
|
|
+ class="num">{{ (item.electricityPrice).toFixed(2)}}元/度</text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 游客价格-->
|
|
|
+ <view class="price" v-else>
|
|
|
+ <view class="price-1">
|
|
|
+ <text class="num">
|
|
|
+ {{showNumJP(item.electricityPrice+item.servicePrice)}}</text>
|
|
|
+ <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
|
|
|
+ </view>
|
|
|
+ <view class="price-3 " oldstyle="font-size: 48rpx;" v-if="item.giveDiscount">
|
|
|
+ <text class="num1">
|
|
|
+ <img src="@/assets/img/9-4/会员价.svg" />
|
|
|
+
|
|
|
+
|
|
|
+ </text>
|
|
|
+ <text
|
|
|
+ class="num">{{ showNumJP(item.electricityPrice+item.discountServicePrice)}}元/度</text>
|
|
|
+ <text class="unit "></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-divider margin-top="20" v-if="stationslist.length!=0" style="margin-bottom: 20px;" bg-color="#F2F4F4"
|
|
|
+ >已经到底了</u-divider>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-show="viewMode">
|
|
|
+ <view>
|
|
|
+ <Chargermap @onMoveStart="moveStart" @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked"
|
|
|
+ @onload="mapdown" @clickMap="clickMap"></Chargermap>
|
|
|
+ <!--@location="location"-->
|
|
|
+ <view class="locationBtn" style=' ' @click="setCenter">
|
|
|
+ <u-image src="@/assets/static/img/location.png" border-radius="8" bg-color="#ffffff" width="20px"
|
|
|
+ height="20px"></u-image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 新版卡片 -->
|
|
|
+ <view class="chargerCard" v-if="stationsmap.length>0">
|
|
|
+ <swiper v-if="stationsmap.length>0" :current="currentIndex" @change="swiperChange"
|
|
|
+ slide-change-transition-end='swiperTransitionEnd' @transition="swiperTransition">
|
|
|
+ <swiper-item v-for="(item,index) in stationsmap" :key="item.id" style="height: 100%;">
|
|
|
+ <view class="swiper-item" style="height: 100%; background-color: #ffffff;"
|
|
|
+ @click="stationDetail(item)">
|
|
|
+ <view class="charing-slow charing-slow-2" @click="stationDetail(item)">
|
|
|
+ <view class="address">
|
|
|
+ <view class="name oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="distance " v-if="item.distance != '99999999'">
|
|
|
+ <text class="iconfont" style="color:#666666"></text>
|
|
|
+ {{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
|
|
|
+ </view>
|
|
|
+ <view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
|
|
|
+ <text class="iconfont" style="color:#666666"></text>
|
|
|
+ 暂无定位
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sign min-h">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="sign-tag sign-1"
|
|
|
+ v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
|
|
|
+ 会员{{discountRatio10(item.discountRatio)}}折</view>
|
|
|
+ <view class="sign-tag sign-3" v-if="item.category=='超充'">160kW超充站</view>
|
|
|
+ <view class="sign-tag sign-4" v-if="item.nightLowPriceEnabled">
|
|
|
+ 夜间超低价</view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="sign-tag sign-2" v-if="item.platformType==1">自营站</view>
|
|
|
+ <view class="sign-tag sign-2" v-if="item.tagList.length != 0"
|
|
|
+ v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="price-free price-freeOne">
|
|
|
+ <view class="price" v-if="personInfo&&personInfo.userType==2">
|
|
|
+ <view class="price-1">
|
|
|
+ <text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
|
|
|
+ : (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
|
|
|
+ <text class="unit " oldstyle="font-size: 14px;">
|
|
|
+ 元/度
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="price-2 " oldstyle="font-size: 14px;" v-if="item.giveDiscount">
|
|
|
+ <text
|
|
|
+ class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
|
|
|
+ <text class="unit">元/度</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 游客价格-->
|
|
|
+ <view class="price" v-else>
|
|
|
+ <view class="price-1">
|
|
|
+ <text class="num">
|
|
|
+ {{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
|
|
|
+ <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
|
|
|
+ </view>
|
|
|
+ <view class="price-3 " oldstyle="font-size: 48rpx;" v-if="item.giveDiscount">
|
|
|
+ <text class="num1">会员</text>
|
|
|
+ <text
|
|
|
+ class="num">{{ (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
|
|
|
+ <text class="unit ">元/度</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="free">
|
|
|
+
|
|
|
+ <view class="fast" v-if="item.fastNum">
|
|
|
+ <view class="fast-font">
|
|
|
+ 快
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+
|
|
|
+ {{item.fastAvailableNum}}
|
|
|
+ </view>
|
|
|
+ <view class="num1">
|
|
|
+
|
|
|
+ /{{item.fastNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="slow" v-if="item.slowNum">
|
|
|
+ <view class="slow-font">
|
|
|
+ 慢
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ {{item.slowAvailableNum}}
|
|
|
+ </view>
|
|
|
+ <view class="num1">
|
|
|
+ /{{item.slowNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <Tabbar :current="2" ref="tabbarMain"></Tabbar>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as indexAPI from '@/apis/index.js'
|
|
|
+ import * as api from '@/apis/site.js';
|
|
|
+ import Tabbar from '@/components/Tabbar.vue';
|
|
|
+ import Chargermap from '@/components/Chargermap.vue';
|
|
|
+ import jpDropdown from '@/components/Udropdown.vue';
|
|
|
+
|
|
|
+ import uniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
|
|
|
+ import * as WxJsApi from '@/utils/wxJsApi.js'
|
|
|
+import {
|
|
|
+ newDate,parseUnixTime
|
|
|
+
|
|
|
+ } from '@/utils'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ Chargermap,
|
|
|
+ Tabbar,
|
|
|
+ uniCombox,
|
|
|
+ jpDropdown
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ personInfo: {},
|
|
|
+ loading: false,
|
|
|
+ viewMode: false, //列表
|
|
|
+ inputStyle: {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ "font-size": '32rpx',
|
|
|
+ },
|
|
|
+ defaultStation: [],
|
|
|
+ cities: ['荆州市'],
|
|
|
+ radiuses: ['1公里', '2公里', '5公里', '10公里', '20公里', '50公里', '100公里', '200公里'],
|
|
|
+ types: ['全部', '直流快充', '交流慢充'],
|
|
|
+ stationTypes: ['全部', '公共充电桩', '个人充电桩'],
|
|
|
+ info: {
|
|
|
+ miles_type: [{
|
|
|
+ distance: 1,
|
|
|
+ text: '1公里'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ distance: 2,
|
|
|
+ text: '2公里'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ distance: 5,
|
|
|
+ text: '5公里'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ distance: 10,
|
|
|
+ text: '10公里'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ distance: 20,
|
|
|
+ text: '20公里'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ distance: 50,
|
|
|
+ text: '50公里'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ distance: 100,
|
|
|
+ text: '100公里'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ distance: 200,
|
|
|
+ text: '200公里'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ obc_type: [{
|
|
|
+ value: '',
|
|
|
+ text: '全部'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ text: '直流快充'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ text: '交流慢充'
|
|
|
+ }],
|
|
|
+ obc_status: [{
|
|
|
+ value: 0,
|
|
|
+ text: '对外开放'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ text: '不对外开放'
|
|
|
+ }],
|
|
|
+ obc_voltage: [{
|
|
|
+ value: 0,
|
|
|
+ text: '低于700V'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ text: '700V及以上'
|
|
|
+ }],
|
|
|
+ obc_power: {
|
|
|
+ minValue: 0,
|
|
|
+ maxValue: 1000
|
|
|
+ },
|
|
|
+ obc_stationType: [{
|
|
|
+ value: '',
|
|
|
+ text: '全部'
|
|
|
+ }, {
|
|
|
+ value: -1,
|
|
|
+ text: '自营站'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ text: '合作站'
|
|
|
+ }, {
|
|
|
+ value: 50,
|
|
|
+ text: '个人桩'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ preference: {
|
|
|
+ miles_index: 3,
|
|
|
+ obc_stationType_index: 0,
|
|
|
+ obc_type_index: 0,
|
|
|
+ obc_status_index: 0,
|
|
|
+ obc_voltage_index: 0,
|
|
|
+ save_preference: false,
|
|
|
+ obc_power: {
|
|
|
+ minValue: 0,
|
|
|
+ maxValue: 500
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ area: '荆州市',
|
|
|
+ raidus: '10公里',
|
|
|
+ type: '全部',
|
|
|
+ stationType: '全部',
|
|
|
+ longitude: '',
|
|
|
+ latitude: '',
|
|
|
+ message: '',
|
|
|
+ stationslist: [],
|
|
|
+ stationsmap: [],
|
|
|
+ pointTimeOut: true,
|
|
|
+ dropdownShow: false,
|
|
|
+ currentIndex: 0,
|
|
|
+ carImg3span1:0,
|
|
|
+ carImg3span2:0,
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ //this.timeOut = false;
|
|
|
+ this.pointTimeOut = false;
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ //this.timeOut = false;
|
|
|
+ this.pointTimeOut = false;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.$refs.tabbarMain) {
|
|
|
+ this.$refs.tabbarMain.setcount(2);
|
|
|
+ }
|
|
|
+ if (!this.pointTimeOut) {
|
|
|
+ this.pointTimeOut = true
|
|
|
+ this.getPointTimeOut();
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.type = this.info.obc_type[this.preference.obc_type_index].text;
|
|
|
+ this.raidus = this.info.miles_type[this.preference.miles_index].text;
|
|
|
+ this.stationType = this.info.obc_stationType[this.preference.obc_stationType_index].text;
|
|
|
+
|
|
|
+
|
|
|
+ if (this.viewMode) {
|
|
|
+ this.$refs.amap.init();
|
|
|
+ this.searchStationData()
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
|
|
|
+ // //(res)
|
|
|
+ }).catch(error => {
|
|
|
+ //(res)
|
|
|
+ })
|
|
|
+ if (this.carhelp.getPersonInfo()) {
|
|
|
+ // this.userId = this.carhelp.getPersonInfo().id;
|
|
|
+ this.personInfo = this.carhelp.getPersonInfo();
|
|
|
+ }
|
|
|
+ this.getPointTimeOut();
|
|
|
+ this.getChargeList()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ prevMonthKwhBL(){
|
|
|
+ if(this.carImg3span1>=1000){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ getChargeList(){
|
|
|
+ var obj=this.carhelp.get("carhelp_getChargeList")
|
|
|
+ var time=new Date( ).toLocaleString().substr(0,12).replace("T"," ");
|
|
|
+ if(obj&&time==obj.time){
|
|
|
+
|
|
|
+ this.carImg3span1=parseInt(obj.electricQuantity);
|
|
|
+ this.carImg3span2=parseInt(obj.totalServiceMoney) ;
|
|
|
+ console.log("carhelp_getChargeList",this.carImg3span1,this.carImg3span2)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ var date =new Date().getTime()-30*1000*60*60*24;
|
|
|
var startDate =parseUnixTime(new Date(date),'{y}-{m}-{d}');
|
|
|
- if (this.carhelp.getPersonInfo()) {
|
|
|
- indexAPI.chargingRecordData({
|
|
|
- pageIndex: 1,
|
|
|
- pageSize:999,
|
|
|
- startDate: startDate,
|
|
|
- // endDate: this.endDate
|
|
|
- }).then((res) => {
|
|
|
-
|
|
|
-
|
|
|
- var chargeList =res.data.data;
|
|
|
- var num1=0;
|
|
|
- var num2=0;
|
|
|
- for(var i in chargeList){
|
|
|
- var obj=chargeList[i]
|
|
|
- if(obj.status==2){
|
|
|
- num1+=obj.electricQuantity
|
|
|
- num2+=obj.totalServiceMoney
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(num1,num2)
|
|
|
- this.carImg3span1=parseInt(num1);
|
|
|
- this.carImg3span2=parseInt(num2) ;
|
|
|
-
|
|
|
- this.carhelp.set("carhelp_getChargeList",{
|
|
|
- time: time,
|
|
|
- electricQuantity:num1,
|
|
|
- totalServiceMoney:num2
|
|
|
- })
|
|
|
-
|
|
|
- // if(num2*0.4>20){
|
|
|
-
|
|
|
- // this.carImg3Bl=true;
|
|
|
- // }else{
|
|
|
- // this.carImg4Bl=true;
|
|
|
- // }
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
+ if (this.carhelp.getPersonInfo()) {
|
|
|
+ indexAPI.chargingRecordData({
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize:999,
|
|
|
+ startDate: startDate,
|
|
|
+ // endDate: this.endDate
|
|
|
+ }).then((res) => {
|
|
|
+
|
|
|
+
|
|
|
+ var chargeList =res.data.data;
|
|
|
+ var num1=0;
|
|
|
+ var num2=0;
|
|
|
+ for(var i in chargeList){
|
|
|
+ var obj=chargeList[i]
|
|
|
+ if(obj.status==2){
|
|
|
+ num1+=obj.electricQuantity
|
|
|
+ num2+=obj.totalServiceMoney
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(num1,num2)
|
|
|
+ this.carImg3span1=parseInt(num1);
|
|
|
+ this.carImg3span2=parseInt(num2) ;
|
|
|
+
|
|
|
+ this.carhelp.set("carhelp_getChargeList",{
|
|
|
+ time: time,
|
|
|
+ electricQuantity:num1,
|
|
|
+ totalServiceMoney:num2
|
|
|
+ })
|
|
|
+
|
|
|
+ // if(num2*0.4>20){
|
|
|
+
|
|
|
+ // this.carImg3Bl=true;
|
|
|
+ // }else{
|
|
|
+ // this.carImg4Bl=true;
|
|
|
+ // }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
})
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- navigate() {
|
|
|
- //('naviage to ')
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/search/search'
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- isEnabled() {
|
|
|
- if (this.viewMode) {
|
|
|
- if (this.show)
|
|
|
- return false;
|
|
|
- }
|
|
|
- return true;
|
|
|
- },
|
|
|
- stationDetail(item) {
|
|
|
- if (!this.isEnabled()) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: 'stationAndPile/stationDetails?id=' + item.id
|
|
|
- })
|
|
|
- },
|
|
|
- setCenter() {
|
|
|
- //('getPoint')
|
|
|
- WxJsApi.getLocation().then((res) => {
|
|
|
-
|
|
|
- this.latitude = parseFloat(res.latitude);
|
|
|
- this.longitude = parseFloat(res.longitude);
|
|
|
- //let data = {position:{latitude:latitude,longitude:longitude}};
|
|
|
-
|
|
|
- let posCenter = {
|
|
|
- longitude: this.longitude,
|
|
|
- latitude: this.latitude
|
|
|
- };
|
|
|
-
|
|
|
- this.$refs.amap.setCenter(posCenter);
|
|
|
- this.searchStationData();
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: JSON.stringify(error)
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- // //('setCenter')
|
|
|
- },
|
|
|
- updateType2(e) {
|
|
|
- this.preference.obc_stationType_index = e.value;
|
|
|
- this.close();
|
|
|
-
|
|
|
- },
|
|
|
- swiperTransitionEnd(e) {
|
|
|
-
|
|
|
- },
|
|
|
- swiperTransition(e) {
|
|
|
- //
|
|
|
- },
|
|
|
- updateType(e) {
|
|
|
- this.preference.obc_type_index = e.value;
|
|
|
- this.close();
|
|
|
-
|
|
|
- },
|
|
|
- updateRadius(e) {
|
|
|
- this.preference.miles_index = e.value;
|
|
|
- this.close();
|
|
|
-
|
|
|
- },
|
|
|
- selectOBSType(index) {
|
|
|
- this.preference.obc_type_index = index;
|
|
|
- },
|
|
|
- selectOBSType2(index) {
|
|
|
- this.preference.obc_stationType_index = index;
|
|
|
- },
|
|
|
- selectOBSStatus(index) {
|
|
|
- this.preference.obc_status_index = index;
|
|
|
- },
|
|
|
- selectOBCVoltage(index) {
|
|
|
- this.preference.obc_voltage_index = index;
|
|
|
- },
|
|
|
- selectMiles(index) {
|
|
|
- this.preference.miles_index = index;
|
|
|
- },
|
|
|
- swiperChange(e) {
|
|
|
- if (!this.viewMode) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.currentIndex = e.detail.current
|
|
|
- let station = this.stationsmap[this.currentIndex];
|
|
|
-
|
|
|
- let posCenter = {
|
|
|
- longitude: station.longitude,
|
|
|
- latitude: station.latitude
|
|
|
- };
|
|
|
- // //('currentIndex'+JSON.stringify(this.currentIndex))
|
|
|
- // //('currentIndex'+JSON.stringify(posCenter))
|
|
|
- // //('station'+JSON.stringify(station))
|
|
|
- let bounds = this.$refs.amap.logMapInfo();
|
|
|
- /*if( (posCenter.latitude<bounds.bounds.northeast.lat && posCenter.latitude>bounds.bounds.sourthwest.lat)
|
|
|
- && (posCenter.longitude<bounds.bounds.northeast.lng && posCenter.longitude>bounds.bounds.sourthwest.lng)
|
|
|
- ){
|
|
|
- //('bounds'+JSON.stringify(bounds));
|
|
|
-
|
|
|
- }else{
|
|
|
- this.$refs.amap.setCenter(posCenter);
|
|
|
- }*/
|
|
|
-
|
|
|
- this.$refs.amap.updateCharger(station);
|
|
|
- this.$refs.amap.setCenter(posCenter);
|
|
|
-
|
|
|
- },
|
|
|
- listMode() {
|
|
|
- this.close_all();
|
|
|
- this.viewMode = false
|
|
|
- },
|
|
|
- mapMode() {
|
|
|
- //this.$refs.amap.setChargerList(this.stationslist);
|
|
|
- this.$refs.amap.init();
|
|
|
-
|
|
|
- //this.currentIndex = 0;
|
|
|
- this.close_all();
|
|
|
- this.searchStationData()
|
|
|
- this.viewMode = true
|
|
|
- },
|
|
|
- reset() {
|
|
|
- this.preference.obc_status_index = 0;
|
|
|
- this.preference.obc_voltage_index = 0;
|
|
|
- this.preference.obc_stationType_index = 0;
|
|
|
-
|
|
|
- this.preference.obc_type_index = 0;
|
|
|
- this.preference.miles_index = 3;
|
|
|
- this.preference.save_preference = false;
|
|
|
- // this.$refs.obc_voltage.currentValue = [0,100];
|
|
|
- this.preference.obc_power.minValue = 0;
|
|
|
- this.preference.obc_power.maxValue = 500;
|
|
|
- this.preference.obc_power.minP = Math.floor((this.preference.obc_power.minValue / (this.info.obc_power
|
|
|
- .maxValue - this.info.obc_power.minValue)) * 100);
|
|
|
- this.preference.obc_power.maxP = Math.floor((this.preference.obc_power.maxValue / (this.info.obc_power
|
|
|
- .maxValue - this.info.obc_power.minValue)) * 100);
|
|
|
- // //('minP'+this.preference.obc_power.minP)
|
|
|
- // //('maxP'+this.preference.obc_power.maxP)
|
|
|
- //this.$refs.obc_voltage.reset(this.preference.obc_power);
|
|
|
- // this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
|
|
|
- // //('reset')
|
|
|
- },
|
|
|
-
|
|
|
- close() {
|
|
|
-
|
|
|
- this.updateTypeSelector('')
|
|
|
-
|
|
|
- this.type = this.info.obc_type[this.preference.obc_type_index].text;
|
|
|
- this.raidus = this.info.miles_type[this.preference.miles_index].text;
|
|
|
- this.stationType = this.info.obc_stationType[this.preference.obc_stationType_index].text;
|
|
|
-
|
|
|
- if (this.preference.save_preference) {
|
|
|
- this.carhelp.set('preference', this.preference)
|
|
|
- }
|
|
|
- this.$refs.uDropdown.close();
|
|
|
- this.searchStationData();
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- clickMap(obj) {
|
|
|
- //this.show = false;
|
|
|
-
|
|
|
- if (obj == null || obj.type == null) return;
|
|
|
- if (obj.type == 'charger') {
|
|
|
- if (obj.obj != null) {
|
|
|
-
|
|
|
- let index = this.stationsmap.findIndex(item => item.id == obj.obj.id);
|
|
|
- this.currentIndex = index;
|
|
|
- //('find Index'+index);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- getPoint() {
|
|
|
- if (this.stationslist.length != 0) {
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- WxJsApi.getLocation().then((res) => {
|
|
|
-
|
|
|
- this.latitude = parseFloat(res.latitude);
|
|
|
- this.longitude = parseFloat(res.longitude);
|
|
|
- this.message = res.errMsg;
|
|
|
-
|
|
|
-
|
|
|
- if (res.errMsg != 'getLocation:ok') {
|
|
|
- uni.showToast({
|
|
|
- title: res
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: "定位中..."
|
|
|
- })
|
|
|
- this.searchStationData()
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- searchStationData(obj) {
|
|
|
- let data1 = {
|
|
|
- latitude: this.latitude,
|
|
|
- longitude: this.longitude,
|
|
|
- findType: "1",
|
|
|
- pageIndex: 1,
|
|
|
- pageSize: 999
|
|
|
- };
|
|
|
- if (obj) {
|
|
|
- data1 = {
|
|
|
- ...data1,
|
|
|
- ...obj
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- data1.type = this.info.obc_type[this.preference.obc_type_index].value;
|
|
|
- if (this.info.miles_type[this.preference.miles_index].distance != null)
|
|
|
- data1.raidus = this.info.miles_type[this.preference.miles_index].distance.toString();
|
|
|
-
|
|
|
- if (this.preference.obc_stationType_index != null) {
|
|
|
- var stationType = this.info.obc_stationType[this.preference.obc_stationType_index].value
|
|
|
- if (stationType == -1) {
|
|
|
- data1.platformType = "1"
|
|
|
- } else {
|
|
|
- data1.stationType = stationType
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- //this.currentIndex = -1;
|
|
|
- //data1.findType = this.viewMode?"0":"1";
|
|
|
- uni.showLoading({})
|
|
|
-
|
|
|
- if (this.carhelp.getPersonInfo()) {
|
|
|
- data1.openId = this.carhelp.getOpenId()
|
|
|
- }
|
|
|
- this.loading = false
|
|
|
- api.getChargingStationData(data1).then(res => {
|
|
|
- uni.hideLoading()
|
|
|
- this.loading = true
|
|
|
- this.recordsTotal = res.data.recordsTotal;
|
|
|
-
|
|
|
- var stationslist = res.data.data
|
|
|
- if (this.viewMode) {
|
|
|
- this.stationsmap = stationslist;
|
|
|
- this.$refs.amap.setChargerList(stationslist);
|
|
|
- // this.$refs.amap.init();
|
|
|
-
|
|
|
- if (this.currentIndex == -1 || this.currentIndex > stationslist.length) {
|
|
|
- this.currentIndex = 0
|
|
|
- }
|
|
|
- if (stationslist.length) {
|
|
|
- this.$refs.amap.updateCharger(stationslist[this.currentIndex]);
|
|
|
- }
|
|
|
- let posCenter = {
|
|
|
- longitude: this.longitude,
|
|
|
- latitude: this.latitude
|
|
|
- };
|
|
|
-
|
|
|
- this.$refs.amap.setCenter(posCenter);
|
|
|
- this.$refs.amap.calcDistances([this.longitude, this.latitude], this.stationslist)
|
|
|
-
|
|
|
- // this.$refs.amap.calcDistances([this.longitude, this.latitude], this.stationslist)
|
|
|
-
|
|
|
- } else {
|
|
|
- this.stationslist = stationslist;
|
|
|
- }
|
|
|
- if (this.stationslist.length == 0) {
|
|
|
- this.getChargingStationDetail()
|
|
|
- }
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- getChargingStationDetail() {
|
|
|
- var defaultStation = process.car.defaultStation
|
|
|
- for (var item in defaultStation) {
|
|
|
- api.getChargingStationDetail({
|
|
|
- stationId: defaultStation[item]
|
|
|
- }).then((res) => {
|
|
|
-
|
|
|
- var station = res.data.station
|
|
|
- //this.MapLoaderthen(station)
|
|
|
-
|
|
|
- this.defaultStation.push(station)
|
|
|
- }).catch(error => {
|
|
|
-
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- getPointTimeOut() {
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- if (this.pointTimeOut) {
|
|
|
- this.getPoint();
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
-
|
|
|
- },
|
|
|
- closeDropdown() {
|
|
|
- this.$refs.uDropdown.close();
|
|
|
- },
|
|
|
- close_all() {
|
|
|
-
|
|
|
- this.updateTypeSelector('')
|
|
|
-
|
|
|
- },
|
|
|
- updateTypeSelector(val) {
|
|
|
-
|
|
|
- var sz = ["raidus", "type", 'city']
|
|
|
- for (var i in sz) {
|
|
|
- if (i == val && val != '') {
|
|
|
-
|
|
|
- } else {
|
|
|
- this.$refs[sz[i]].closeSelector();
|
|
|
- }
|
|
|
- }
|
|
|
- //this.show = false;
|
|
|
- },
|
|
|
- mapdown() {
|
|
|
- //this.isReady = true;
|
|
|
- //this.$refs.amap.getLocation ();
|
|
|
- //let state = {};
|
|
|
- uni.getSystemInfo({
|
|
|
- success: (res) => {
|
|
|
-
|
|
|
- let scrollH = res.windowHeight; // - uni.upx2px(88) - navbarH
|
|
|
- let scrollW = res.windowWidth;
|
|
|
- this.$refs.amap.setMyStyle("height:" + (scrollH - 88 - 50) + "px;width:" + scrollW +
|
|
|
- "px;");
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- moveEnd(e) {
|
|
|
- //('moveEnd')
|
|
|
- this.close_all();
|
|
|
- let posCenter = this.$refs.amap.logMapInfo();
|
|
|
- ////('posCenter'+JSON.stringify(posCenter))
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- if (this.latitude == e.center.lat && this.longitude == e.center.lng) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.latitude = e.center.lat
|
|
|
- this.longitude = e.center.lng
|
|
|
- this.searchStationData();
|
|
|
- },
|
|
|
- moveStart(e) {
|
|
|
- //this.close_all();
|
|
|
- },
|
|
|
- onClicked(e) {
|
|
|
- this.close_all();
|
|
|
- ////('onClicked e'+JSON.stringify(e))
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- @import "@/_theme.scss";
|
|
|
-
|
|
|
- .locationBtn {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- position: absolute;
|
|
|
- z-index: 1023;
|
|
|
- right: 40rpx;
|
|
|
- bottom: 520rpx;
|
|
|
- background: white;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border: 1px solid;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .ujp-navbar-main {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .ujp-navbar-main1 {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- height: 100%;
|
|
|
- align-items: center;
|
|
|
- margin-top: 0rpx;
|
|
|
- padding-top: 0rpx;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .ujp-navbar-main2 {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- width: 100%;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .preference_group_item {
|
|
|
- padding: 15rpx;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .preference_group {
|
|
|
- padding-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .preference {
|
|
|
- background-color: #ffffff;
|
|
|
- left: 0rpx;
|
|
|
- // position: absolute
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .preference_item {
|
|
|
- margin-bottom: 10rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- text-align: center;
|
|
|
- border-style: none;
|
|
|
- width: 20%;
|
|
|
- //height: 56rpx;
|
|
|
-
|
|
|
- /* line-height: 14px;*/
|
|
|
- }
|
|
|
-
|
|
|
- .content-s {
|
|
|
- height: 640rpx;
|
|
|
- overflow-y: scroll;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .preference_item_medium {
|
|
|
- margin-bottom: 10rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- text-align: center;
|
|
|
- border-style: none;
|
|
|
- min-width: 22%;
|
|
|
- //height: 56rpx;
|
|
|
-
|
|
|
- @include themeify {
|
|
|
- font-size: themed('font-size2');
|
|
|
- line-height: themed('font-size2');
|
|
|
- }
|
|
|
-
|
|
|
- /* line-height: 14px;*/
|
|
|
- }
|
|
|
-
|
|
|
- .preference_item_plus {
|
|
|
- margin-bottom: 10rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- text-align: center;
|
|
|
- width: 28%;
|
|
|
- border-style: none;
|
|
|
- //height: 56rpx;
|
|
|
-
|
|
|
- @include themeify {
|
|
|
- font-size: themed('font-size2');
|
|
|
- line-height: themed('font-size2');
|
|
|
- }
|
|
|
-
|
|
|
- /* line-height: 14px;*/
|
|
|
- }
|
|
|
-
|
|
|
- .preference_label {
|
|
|
- @include themeify {
|
|
|
- color: themed('font_colorLabel');
|
|
|
- font-size: themed('font-size1');
|
|
|
- font-weight: themed('fontWeight');
|
|
|
- }
|
|
|
-
|
|
|
- margin-left: 20rpx;
|
|
|
- margin-bottom: 100rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .pre-btn {
|
|
|
- width: 100%;
|
|
|
- height: 96rpx;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-1,
|
|
|
- .btn-2 {
|
|
|
- height: 96rpx;
|
|
|
- line-height: 96rpx;
|
|
|
- text-align: center;
|
|
|
- border-top: 1px solid rgba(225, 228, 232, 100);
|
|
|
- }
|
|
|
-
|
|
|
- .station,
|
|
|
- .location,
|
|
|
- .state1 {
|
|
|
- box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
|
|
|
- }
|
|
|
-
|
|
|
- //定位
|
|
|
-
|
|
|
- .location {
|
|
|
- width: 91.4%;
|
|
|
- background-color: #ffffff;
|
|
|
- height: 120px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 20px auto 0;
|
|
|
- border-radius: 8px;
|
|
|
- border: #F2F4F4 1px;
|
|
|
-
|
|
|
- .location-text {
|
|
|
- padding: 24px 0 0 28px;
|
|
|
-
|
|
|
- .text-1 {
|
|
|
- height: 16px;
|
|
|
- line-height: 16px;
|
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
- font-size: 16px;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .text-2 {
|
|
|
- height: 17px;
|
|
|
- line-height: 17px;
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- font-size: 12px;
|
|
|
- text-align: left;
|
|
|
- margin-top: 4px;
|
|
|
- white-space: nowrap; //强制不换行
|
|
|
- text-overflow: ellipsis; //文本超出出现省略号
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .text-view {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- .text-3 {
|
|
|
- width: 80px;
|
|
|
- height: 24px;
|
|
|
- line-height: 22px;
|
|
|
- border-radius: 50px;
|
|
|
- color: rgba(0, 185, 98, 100);
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid rgba(0, 185, 98, 100);
|
|
|
- margin-top: 11px;
|
|
|
- }
|
|
|
-
|
|
|
- .text-4 {
|
|
|
- margin-left: 10px;
|
|
|
- color: #ff9900;
|
|
|
- border: 1px solid #ff9900;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .img-box {
|
|
|
- width: 120px;
|
|
|
- height: 120px;
|
|
|
- margin-right: 20px;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .carNone {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- margin-top: -60px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .charing-slow-2 {
|
|
|
- margin: 0 0 20rpx 0 !important;
|
|
|
- // border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .charing-slow {
|
|
|
- //box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
|
|
|
- background-color: #fff;
|
|
|
- margin: 26rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 24rpx;
|
|
|
- position: relative;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .min-h {
|
|
|
- min-height: 65px;
|
|
|
- }
|
|
|
-
|
|
|
- .sign {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .sign-tag {
|
|
|
-
|
|
|
- height: 36rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- //background-color: rgba(255, 255, 255, 100);
|
|
|
- //color: rgba(255, 139, 0, 100);
|
|
|
- font-size: 10px;
|
|
|
- text-align: center;
|
|
|
- //border: 1px solid rgba(255, 139, 0, 100);
|
|
|
- padding: 0 8rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .sign-0 {
|
|
|
- background: linear-gradient(89.4deg, rgba(129, 97, 255, 1) 2.8%, rgba(169, 147, 255, 1) 98.02%);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- //padding: 0 10rpx;
|
|
|
- //border: 1px solid rgba(255, 139, 0, 100);
|
|
|
- }
|
|
|
-
|
|
|
- .sign-5 {
|
|
|
- background: linear-gradient(89.4deg, rgba(255, 61, 0, 1) 2.8%, rgba(255, 134, 0, 1) 98.02%);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- //padding: 0 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .sign-1 {
|
|
|
- background-color: rgba(255, 255, 255, 100);
|
|
|
- color: rgba(255, 139, 0, 100);
|
|
|
- border: 1px solid rgba(255, 139, 0, 100);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .sign-2 {
|
|
|
- background-color: rgba(255, 255, 255, 100);
|
|
|
- color: rgba(153, 153, 153, 100);
|
|
|
- border: 1px solid rgba(204, 204, 204, 100);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .sign-3 {
|
|
|
- background-color: rgba(255, 255, 255, 100);
|
|
|
- color: #8161FF;
|
|
|
- border: 1px solid #8161FF;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .sign-4 {
|
|
|
- background-color: rgba(255, 255, 255, 100);
|
|
|
- color: #00B962;
|
|
|
- border: 1px solid #00B962;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .address {
|
|
|
-
|
|
|
- width: 100%;
|
|
|
- line-height: 20px;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 36rpx;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- @include themeify {
|
|
|
- font-size: themed('font-size5');
|
|
|
- line-height: themed('font-size7');
|
|
|
- }
|
|
|
-
|
|
|
- /* font-size: 11px;*/
|
|
|
- font-weight: 600;
|
|
|
- color: #101010;
|
|
|
- }
|
|
|
-
|
|
|
- .price-free {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- }
|
|
|
- .distance {
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- text-align: end;
|
|
|
- font-size: 30rpx;
|
|
|
- width: 180rpx;
|
|
|
- min-width: 180rpx;
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- font-size: 12px;
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- .price {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
-
|
|
|
- .price-1 {
|
|
|
- line-height: 40rpx;
|
|
|
-
|
|
|
- .num {
|
|
|
-
|
|
|
- //color: rgba(255, 98, 0, 100);
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
-
|
|
|
-
|
|
|
- font-size: 40rpx;
|
|
|
- //height: 44rpx;
|
|
|
- font-weight: bold;
|
|
|
- text-align: left;
|
|
|
- font-family: Roboto-medium;
|
|
|
- }
|
|
|
-
|
|
|
- .unit {
|
|
|
- // font-size: 12px;
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 28rpx;
|
|
|
-
|
|
|
-
|
|
|
- text-align: left;
|
|
|
- font-family: AlibabaPuHui-regular;
|
|
|
-
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .price-2 {
|
|
|
- color: rgba(153, 153, 153, 100);
|
|
|
- margin-left: 6rpx;
|
|
|
- text-decoration: line-through;
|
|
|
- font-size: 24rpx
|
|
|
- }
|
|
|
- .price-3{
|
|
|
- display: flex;
|
|
|
- background: linear-gradient(93.02deg, rgba(59,182,254,1) 39.4%,rgba(0,185,98,1) 92.96%);
|
|
|
- border-radius: 4px;
|
|
|
- height: 16px;
|
|
|
- min-height: 16px;
|
|
|
- margin-left: 32rpx;
|
|
|
- // align-items: center;
|
|
|
- line-height: 16px;
|
|
|
- .num1{
|
|
|
- img{
|
|
|
- // width: 88rpx;
|
|
|
- //width: 34px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
- /deep/.u-image{
|
|
|
- min-height: 16px;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .num{
|
|
|
- padding: 0 12rpx 0 8rpx;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 11px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .price-3-yue{
|
|
|
- background: linear-gradient(88.81deg, rgba(219,199,167,1) 1.89%,rgba(194,154,93,1) 98%);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .free {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .slow,
|
|
|
- .fast {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .sp-font {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #7a68f6;
|
|
|
- color: #fff;
|
|
|
- font-size: 28rpx;
|
|
|
- text-align: center;
|
|
|
- margin-right: 2rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .fast-font {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- border-radius: 4px;
|
|
|
- //background-color: rgba(186, 240, 215, 100);
|
|
|
- background-color: #1677FF;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- //color: rgba(0, 130, 69, 100);
|
|
|
- font-size: 28rpx;
|
|
|
- text-align: center;
|
|
|
- margin-right: 2rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .slow-font {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- border-radius: 4px;
|
|
|
- // background-color: rgba(226, 226, 226, 100);
|
|
|
- // color: rgba(128, 128, 128, 100);
|
|
|
- background-color: #00B962;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 28rpx;
|
|
|
- text-align: center;
|
|
|
- margin-right: 2rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #666;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- .num1 {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #bbb;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .slow {
|
|
|
- margin-left: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .chargerCard {
|
|
|
- z-index: 999;
|
|
|
- background-color: #fff;
|
|
|
- margin: 0 24rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- // overflow: hidden;
|
|
|
- bottom: 68px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- position: fixed;
|
|
|
- // height: 380rpx;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // @include themeify{
|
|
|
- // height:themed('cardHeight');
|
|
|
- // }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .charing-new {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .new-img {
|
|
|
- .img1 {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- .img2Class{
|
|
|
- top: -134rpx;
|
|
|
- left: -16rpx;
|
|
|
- position: relative;
|
|
|
- border-radius: 4px 4px 4px 0px;
|
|
|
- color: #fff;
|
|
|
- padding: 2px 6px;
|
|
|
- font-size: 10px;
|
|
|
- line-height: 10px;
|
|
|
- height: 1px;
|
|
|
- background-blend-mode: soft-light;
|
|
|
- .img2 {
|
|
|
-
|
|
|
- width: 56rpx;
|
|
|
- height: 32rpx;
|
|
|
- min-width: 28px;
|
|
|
- min-height: 16px;
|
|
|
- //border-radius: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .new-body {
|
|
|
- max-width: 75%;
|
|
|
- margin-left: 24rpx;
|
|
|
- min-width: 65%;
|
|
|
- .sign {
|
|
|
- margin-top: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ navigate() {
|
|
|
+ //('naviage to ')
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/search/search'
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ isEnabled() {
|
|
|
+ if (this.viewMode) {
|
|
|
+ if (this.show)
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ stationDetail(item) {
|
|
|
+ if (!this.isEnabled()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'stationAndPile/stationDetails?id=' + item.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setCenter() {
|
|
|
+ //('getPoint')
|
|
|
+ WxJsApi.getLocation().then((res) => {
|
|
|
+
|
|
|
+ this.latitude = parseFloat(res.latitude);
|
|
|
+ this.longitude = parseFloat(res.longitude);
|
|
|
+ //let data = {position:{latitude:latitude,longitude:longitude}};
|
|
|
+
|
|
|
+ let posCenter = {
|
|
|
+ longitude: this.longitude,
|
|
|
+ latitude: this.latitude
|
|
|
+ };
|
|
|
+
|
|
|
+ this.$refs.amap.setCenter(posCenter);
|
|
|
+ this.searchStationData();
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: JSON.stringify(error)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ // //('setCenter')
|
|
|
+ },
|
|
|
+ updateType2(e) {
|
|
|
+ this.preference.obc_stationType_index = e.value;
|
|
|
+ this.close();
|
|
|
+
|
|
|
+ },
|
|
|
+ swiperTransitionEnd(e) {
|
|
|
+
|
|
|
+ },
|
|
|
+ swiperTransition(e) {
|
|
|
+ //
|
|
|
+ },
|
|
|
+ updateType(e) {
|
|
|
+ this.preference.obc_type_index = e.value;
|
|
|
+ this.close();
|
|
|
+
|
|
|
+ },
|
|
|
+ updateRadius(e) {
|
|
|
+ this.preference.miles_index = e.value;
|
|
|
+ this.close();
|
|
|
+
|
|
|
+ },
|
|
|
+ selectOBSType(index) {
|
|
|
+ this.preference.obc_type_index = index;
|
|
|
+ },
|
|
|
+ selectOBSType2(index) {
|
|
|
+ this.preference.obc_stationType_index = index;
|
|
|
+ },
|
|
|
+ selectOBSStatus(index) {
|
|
|
+ this.preference.obc_status_index = index;
|
|
|
+ },
|
|
|
+ selectOBCVoltage(index) {
|
|
|
+ this.preference.obc_voltage_index = index;
|
|
|
+ },
|
|
|
+ selectMiles(index) {
|
|
|
+ this.preference.miles_index = index;
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ if (!this.viewMode) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.currentIndex = e.detail.current
|
|
|
+ let station = this.stationsmap[this.currentIndex];
|
|
|
+
|
|
|
+ let posCenter = {
|
|
|
+ longitude: station.longitude,
|
|
|
+ latitude: station.latitude
|
|
|
+ };
|
|
|
+ // //('currentIndex'+JSON.stringify(this.currentIndex))
|
|
|
+ // //('currentIndex'+JSON.stringify(posCenter))
|
|
|
+ // //('station'+JSON.stringify(station))
|
|
|
+ let bounds = this.$refs.amap.logMapInfo();
|
|
|
+ /*if( (posCenter.latitude<bounds.bounds.northeast.lat && posCenter.latitude>bounds.bounds.sourthwest.lat)
|
|
|
+ && (posCenter.longitude<bounds.bounds.northeast.lng && posCenter.longitude>bounds.bounds.sourthwest.lng)
|
|
|
+ ){
|
|
|
+ //('bounds'+JSON.stringify(bounds));
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.$refs.amap.setCenter(posCenter);
|
|
|
+ }*/
|
|
|
+
|
|
|
+ this.$refs.amap.updateCharger(station);
|
|
|
+ this.$refs.amap.setCenter(posCenter);
|
|
|
+
|
|
|
+ },
|
|
|
+ listMode() {
|
|
|
+ this.close_all();
|
|
|
+ this.viewMode = false
|
|
|
+ },
|
|
|
+ mapMode() {
|
|
|
+ //this.$refs.amap.setChargerList(this.stationslist);
|
|
|
+ this.$refs.amap.init();
|
|
|
+
|
|
|
+ //this.currentIndex = 0;
|
|
|
+ this.close_all();
|
|
|
+ this.searchStationData()
|
|
|
+ this.viewMode = true
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.preference.obc_status_index = 0;
|
|
|
+ this.preference.obc_voltage_index = 0;
|
|
|
+ this.preference.obc_stationType_index = 0;
|
|
|
+
|
|
|
+ this.preference.obc_type_index = 0;
|
|
|
+ this.preference.miles_index = 3;
|
|
|
+ this.preference.save_preference = false;
|
|
|
+ // this.$refs.obc_voltage.currentValue = [0,100];
|
|
|
+ this.preference.obc_power.minValue = 0;
|
|
|
+ this.preference.obc_power.maxValue = 500;
|
|
|
+ this.preference.obc_power.minP = Math.floor((this.preference.obc_power.minValue / (this.info.obc_power
|
|
|
+ .maxValue - this.info.obc_power.minValue)) * 100);
|
|
|
+ this.preference.obc_power.maxP = Math.floor((this.preference.obc_power.maxValue / (this.info.obc_power
|
|
|
+ .maxValue - this.info.obc_power.minValue)) * 100);
|
|
|
+ // //('minP'+this.preference.obc_power.minP)
|
|
|
+ // //('maxP'+this.preference.obc_power.maxP)
|
|
|
+ //this.$refs.obc_voltage.reset(this.preference.obc_power);
|
|
|
+ // this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
|
|
|
+ // //('reset')
|
|
|
+ },
|
|
|
+
|
|
|
+ close() {
|
|
|
+
|
|
|
+ this.updateTypeSelector('')
|
|
|
+
|
|
|
+ this.type = this.info.obc_type[this.preference.obc_type_index].text;
|
|
|
+ this.raidus = this.info.miles_type[this.preference.miles_index].text;
|
|
|
+ this.stationType = this.info.obc_stationType[this.preference.obc_stationType_index].text;
|
|
|
+
|
|
|
+ if (this.preference.save_preference) {
|
|
|
+ this.carhelp.set('preference', this.preference)
|
|
|
+ }
|
|
|
+ this.$refs.uDropdown.close();
|
|
|
+ this.searchStationData();
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ clickMap(obj) {
|
|
|
+ //this.show = false;
|
|
|
+
|
|
|
+ if (obj == null || obj.type == null) return;
|
|
|
+ if (obj.type == 'charger') {
|
|
|
+ if (obj.obj != null) {
|
|
|
+
|
|
|
+ let index = this.stationsmap.findIndex(item => item.id == obj.obj.id);
|
|
|
+ this.currentIndex = index;
|
|
|
+ //('find Index'+index);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPoint() {
|
|
|
+ if (this.stationslist.length != 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ WxJsApi.getLocation().then((res) => {
|
|
|
+
|
|
|
+ this.latitude = parseFloat(res.latitude);
|
|
|
+ this.longitude = parseFloat(res.longitude);
|
|
|
+ this.message = res.errMsg;
|
|
|
+
|
|
|
+
|
|
|
+ if (res.errMsg != 'getLocation:ok') {
|
|
|
+ uni.showToast({
|
|
|
+ title: res
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: "定位中..."
|
|
|
+ })
|
|
|
+ this.searchStationData()
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchStationData(obj) {
|
|
|
+ let data1 = {
|
|
|
+ latitude: this.latitude,
|
|
|
+ longitude: this.longitude,
|
|
|
+ findType: "1",
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 999
|
|
|
+ };
|
|
|
+ if (obj) {
|
|
|
+ data1 = {
|
|
|
+ ...data1,
|
|
|
+ ...obj
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ data1.type = this.info.obc_type[this.preference.obc_type_index].value;
|
|
|
+ if (this.info.miles_type[this.preference.miles_index].distance != null)
|
|
|
+ data1.raidus = this.info.miles_type[this.preference.miles_index].distance.toString();
|
|
|
+
|
|
|
+ if (this.preference.obc_stationType_index != null) {
|
|
|
+ var stationType = this.info.obc_stationType[this.preference.obc_stationType_index].value
|
|
|
+ if (stationType == -1) {
|
|
|
+ data1.platformType = "1"
|
|
|
+ } else {
|
|
|
+ data1.stationType = stationType
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ //this.currentIndex = -1;
|
|
|
+ //data1.findType = this.viewMode?"0":"1";
|
|
|
+ uni.showLoading({})
|
|
|
+
|
|
|
+ if (this.carhelp.getPersonInfo()) {
|
|
|
+ data1.openId = this.carhelp.getOpenId()
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ api.getChargingStationData(data1).then(res => {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.loading = true
|
|
|
+ this.recordsTotal = res.data.recordsTotal;
|
|
|
+
|
|
|
+ var stationslist = res.data.data
|
|
|
+ if (this.viewMode) {
|
|
|
+ this.stationsmap = stationslist;
|
|
|
+ this.$refs.amap.setChargerList(stationslist);
|
|
|
+ // this.$refs.amap.init();
|
|
|
+
|
|
|
+ if (this.currentIndex == -1 || this.currentIndex > stationslist.length) {
|
|
|
+ this.currentIndex = 0
|
|
|
+ }
|
|
|
+ if (stationslist.length) {
|
|
|
+ this.$refs.amap.updateCharger(stationslist[this.currentIndex]);
|
|
|
+ }
|
|
|
+ let posCenter = {
|
|
|
+ longitude: this.longitude,
|
|
|
+ latitude: this.latitude
|
|
|
+ };
|
|
|
+
|
|
|
+ this.$refs.amap.setCenter(posCenter);
|
|
|
+ this.$refs.amap.calcDistances([this.longitude, this.latitude], this.stationslist)
|
|
|
+
|
|
|
+ // this.$refs.amap.calcDistances([this.longitude, this.latitude], this.stationslist)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.stationslist = stationslist;
|
|
|
+ }
|
|
|
+ if (this.stationslist.length == 0) {
|
|
|
+ this.getChargingStationDetail()
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getChargingStationDetail() {
|
|
|
+ var defaultStation = process.car.defaultStation
|
|
|
+ for (var item in defaultStation) {
|
|
|
+ api.getChargingStationDetail({
|
|
|
+ stationId: defaultStation[item]
|
|
|
+ }).then((res) => {
|
|
|
+
|
|
|
+ var station = res.data.station
|
|
|
+ //this.MapLoaderthen(station)
|
|
|
+
|
|
|
+ this.defaultStation.push(station)
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getPointTimeOut() {
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.pointTimeOut) {
|
|
|
+ this.getPoint();
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+
|
|
|
+ },
|
|
|
+ closeDropdown() {
|
|
|
+ this.$refs.uDropdown.close();
|
|
|
+ },
|
|
|
+ close_all() {
|
|
|
+
|
|
|
+ this.updateTypeSelector('')
|
|
|
+
|
|
|
+ },
|
|
|
+ updateTypeSelector(val) {
|
|
|
+
|
|
|
+ var sz = ["raidus", "type", 'city']
|
|
|
+ for (var i in sz) {
|
|
|
+ if (i == val && val != '') {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$refs[sz[i]].closeSelector();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //this.show = false;
|
|
|
+ },
|
|
|
+ mapdown() {
|
|
|
+ //this.isReady = true;
|
|
|
+ //this.$refs.amap.getLocation ();
|
|
|
+ //let state = {};
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+
|
|
|
+ let scrollH = res.windowHeight; // - uni.upx2px(88) - navbarH
|
|
|
+ let scrollW = res.windowWidth;
|
|
|
+ this.$refs.amap.setMyStyle("height:" + (scrollH - 88 - 50) + "px;width:" + scrollW +
|
|
|
+ "px;");
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ moveEnd(e) {
|
|
|
+ //('moveEnd')
|
|
|
+ this.close_all();
|
|
|
+ let posCenter = this.$refs.amap.logMapInfo();
|
|
|
+ ////('posCenter'+JSON.stringify(posCenter))
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if (this.latitude == e.center.lat && this.longitude == e.center.lng) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.latitude = e.center.lat
|
|
|
+ this.longitude = e.center.lng
|
|
|
+ this.searchStationData();
|
|
|
+ },
|
|
|
+ moveStart(e) {
|
|
|
+ //this.close_all();
|
|
|
+ },
|
|
|
+ onClicked(e) {
|
|
|
+ this.close_all();
|
|
|
+ ////('onClicked e'+JSON.stringify(e))
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @import "@/_theme.scss";
|
|
|
+
|
|
|
+ .locationBtn {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1023;
|
|
|
+ right: 40rpx;
|
|
|
+ bottom: 520rpx;
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 1px solid;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ujp-navbar-main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .ujp-navbar-main1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 0rpx;
|
|
|
+ padding-top: 0rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ujp-navbar-main2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .preference_group_item {
|
|
|
+ padding: 15rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .preference_group {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preference {
|
|
|
+ background-color: #ffffff;
|
|
|
+ left: 0rpx;
|
|
|
+ // position: absolute
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .preference_item {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-style: none;
|
|
|
+ width: 20%;
|
|
|
+ //height: 56rpx;
|
|
|
+
|
|
|
+ /* line-height: 14px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-s {
|
|
|
+ height: 640rpx;
|
|
|
+ overflow-y: scroll;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preference_item_medium {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-style: none;
|
|
|
+ min-width: 22%;
|
|
|
+ //height: 56rpx;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ line-height: themed('font-size2');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* line-height: 14px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .preference_item_plus {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ width: 28%;
|
|
|
+ border-style: none;
|
|
|
+ //height: 56rpx;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ line-height: themed('font-size2');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* line-height: 14px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .preference_label {
|
|
|
+ @include themeify {
|
|
|
+ color: themed('font_colorLabel');
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ font-weight: themed('fontWeight');
|
|
|
+ }
|
|
|
+
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pre-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 96rpx;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-1,
|
|
|
+ .btn-2 {
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-top: 1px solid rgba(225, 228, 232, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .station,
|
|
|
+ .location,
|
|
|
+ .state1 {
|
|
|
+ box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
|
|
|
+ }
|
|
|
+
|
|
|
+ //定位
|
|
|
+
|
|
|
+ .location {
|
|
|
+ width: 91.4%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ height: 120px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: #F2F4F4 1px;
|
|
|
+
|
|
|
+ .location-text {
|
|
|
+ padding: 24px 0 0 28px;
|
|
|
+
|
|
|
+ .text-1 {
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-2 {
|
|
|
+ height: 17px;
|
|
|
+ line-height: 17px;
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: left;
|
|
|
+ margin-top: 4px;
|
|
|
+ white-space: nowrap; //强制不换行
|
|
|
+ text-overflow: ellipsis; //文本超出出现省略号
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-view {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-3 {
|
|
|
+ width: 80px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 22px;
|
|
|
+ border-radius: 50px;
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(0, 185, 98, 100);
|
|
|
+ margin-top: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-4 {
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #ff9900;
|
|
|
+ border: 1px solid #ff9900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .carNone {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: -60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .charing-slow-2 {
|
|
|
+ margin: 0 0 20rpx 0 !important;
|
|
|
+ // border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .charing-slow {
|
|
|
+ //box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 26rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .min-h {
|
|
|
+ min-height: 65px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .sign-tag {
|
|
|
+
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ //background-color: rgba(255, 255, 255, 100);
|
|
|
+ //color: rgba(255, 139, 0, 100);
|
|
|
+ font-size: 10px;
|
|
|
+ text-align: center;
|
|
|
+ //border: 1px solid rgba(255, 139, 0, 100);
|
|
|
+ padding: 0 8rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-0 {
|
|
|
+ background: linear-gradient(89.4deg, rgba(129, 97, 255, 1) 2.8%, rgba(169, 147, 255, 1) 98.02%);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ //padding: 0 10rpx;
|
|
|
+ //border: 1px solid rgba(255, 139, 0, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-5 {
|
|
|
+ background: linear-gradient(89.4deg, rgba(255, 61, 0, 1) 2.8%, rgba(255, 134, 0, 1) 98.02%);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ //padding: 0 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-1 {
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: rgba(255, 139, 0, 100);
|
|
|
+ border: 1px solid rgba(255, 139, 0, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-2 {
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ border: 1px solid rgba(204, 204, 204, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-3 {
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: #8161FF;
|
|
|
+ border: 1px solid #8161FF;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-4 {
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: #00B962;
|
|
|
+ border: 1px solid #00B962;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 36rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size5');
|
|
|
+ line-height: themed('font-size7');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 11px;*/
|
|
|
+ font-weight: 600;
|
|
|
+ color: #101010;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-free {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ }
|
|
|
+ .distance {
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ text-align: end;
|
|
|
+ font-size: 30rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ min-width: 180rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ .price-1 {
|
|
|
+ line-height: 40rpx;
|
|
|
+
|
|
|
+ .num {
|
|
|
+
|
|
|
+ //color: rgba(255, 98, 0, 100);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+
|
|
|
+
|
|
|
+ font-size: 40rpx;
|
|
|
+ //height: 44rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: left;
|
|
|
+ font-family: Roboto-medium;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ // font-size: 12px;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+
|
|
|
+ text-align: left;
|
|
|
+ font-family: AlibabaPuHui-regular;
|
|
|
+
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-2 {
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ margin-left: 6rpx;
|
|
|
+ text-decoration: line-through;
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+ .price-3{
|
|
|
+ display: flex;
|
|
|
+ background: linear-gradient(93.02deg, rgba(59,182,254,1) 39.4%,rgba(0,185,98,1) 92.96%);
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 16px;
|
|
|
+ min-height: 16px;
|
|
|
+ margin-left: 32rpx;
|
|
|
+ // align-items: center;
|
|
|
+ line-height: 16px;
|
|
|
+ .num1{
|
|
|
+ img{
|
|
|
+ // width: 88rpx;
|
|
|
+ //width: 34px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ /deep/.u-image{
|
|
|
+ min-height: 16px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ padding: 0 12rpx 0 8rpx;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 11px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-3-yue{
|
|
|
+ background: linear-gradient(88.81deg, rgba(219,199,167,1) 1.89%,rgba(194,154,93,1) 98%);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .free {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .slow,
|
|
|
+ .fast {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .sp-font {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #7a68f6;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fast-font {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ //background-color: rgba(186, 240, 215, 100);
|
|
|
+ background-color: #1677FF;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ //color: rgba(0, 130, 69, 100);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slow-font {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ // background-color: rgba(226, 226, 226, 100);
|
|
|
+ // color: rgba(128, 128, 128, 100);
|
|
|
+ background-color: #00B962;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .num1 {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #bbb;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .slow {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .chargerCard {
|
|
|
+ z-index: 999;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ // overflow: hidden;
|
|
|
+ bottom: 68px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ position: fixed;
|
|
|
+ // height: 380rpx;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // @include themeify{
|
|
|
+ // height:themed('cardHeight');
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .charing-new {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .new-img {
|
|
|
+ .img1 {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .img2Class{
|
|
|
+ top: -134rpx;
|
|
|
+ left: -16rpx;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px 4px 4px 0px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 2px 6px;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 10px;
|
|
|
+ height: 1px;
|
|
|
+ background-blend-mode: soft-light;
|
|
|
+ .img2 {
|
|
|
+
|
|
|
+ width: 56rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ min-width: 28px;
|
|
|
+ min-height: 16px;
|
|
|
+ //border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .new-body {
|
|
|
+ max-width: 75%;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ min-width: 65%;
|
|
|
+ .sign {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|