|
@@ -0,0 +1,929 @@
|
|
|
|
+<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="margin-left:20rpx;margin-right:10rpx;flex:1; ">
|
|
|
|
+
|
|
|
|
+ <uni-combox class='font2' ref="raidus" :border="false" v-model="raidus" :candidates="radiuses"
|
|
|
|
+ @updateModel='updateRadius' ></uni-combox>
|
|
|
|
+ </view>
|
|
|
|
+ <view style="flex:1; ">
|
|
|
|
+ <uni-combox ref="type" class='font2' :border="false" v-model="type" :candidates="types"
|
|
|
|
+ @updateModel='updateType' @updateSelector="updateTypeSelector(1)"></uni-combox>
|
|
|
|
+ </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" @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 u-m-t-20 u-m-b-20">
|
|
|
|
+ <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 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-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
|
|
|
|
+ 重新定位
|
|
|
|
+ </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 v-else>
|
|
|
|
+ <view v-show="!viewMode">
|
|
|
|
+ <view v-for="(item,index) in stationslist" :key="item.id" class="charing-slow"
|
|
|
|
+ @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" v-if="item.stationType==50">
|
|
|
|
+ {{item.address}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="sign" v-else>
|
|
|
|
+ <template v-if="personInfo&&personInfo.userType!=1">
|
|
|
|
+ <view class="sign-1" v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
|
|
|
|
+ 会员服务费{{discountRatio10(item.discountRatio)}}折</view>
|
|
|
|
+ <view class="sign-3" v-if="item.category=='超充'">160kW超充站</view>
|
|
|
|
+ <view class="sign-4"
|
|
|
|
+ v-if="item.id=='3c554cea-f522-4281-b582-d761510ed91e'||item.id=='3865b3a3-13fd-461a-8145-ee9711df35a2'||item.nightLowPriceEnabled">
|
|
|
|
+ 夜间超低价</view>
|
|
|
|
+ <view class="sign-2" v-if="item.tagList.length != 0"
|
|
|
|
+ v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>
|
|
|
|
+
|
|
|
|
+ </template>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="price-free price-freeList">
|
|
|
|
+ <view class="price">
|
|
|
|
+ <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="free">
|
|
|
|
+
|
|
|
|
+ <view class="fast" v-if="item.fastNum">
|
|
|
|
+ <view class="fast-font">
|
|
|
|
+ 快
|
|
|
|
+ </view>
|
|
|
|
+ <view class="num">
|
|
|
|
+
|
|
|
|
+ {{item.fastAvailableNum}}/{{item.fastNum}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="slow" v-if="item.slowNum">
|
|
|
|
+ <view class="slow-font">
|
|
|
|
+ 慢
|
|
|
|
+ </view>
|
|
|
|
+ <view class="num">
|
|
|
|
+ {{item.slowAvailableNum}}/{{item.slowNum}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <u-divider margin-top="20" bg-color="#F2F4F4"
|
|
|
|
+ v-if="stationslist.length == recordsTotal">已经到底了</u-divider>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ <view v-show="viewMode">
|
|
|
|
+ </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'
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ Chargermap,
|
|
|
|
+ Tabbar,
|
|
|
|
+ uniCombox,
|
|
|
|
+ jpDropdown
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ personInfo:{},
|
|
|
|
+ loading:false,
|
|
|
|
+ viewMode: false, //列表
|
|
|
|
+ inputStyle: {
|
|
|
|
+ backgroundColor: 'transparent',
|
|
|
|
+ "font-size": '32rpx',
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ 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: 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: [],
|
|
|
|
+ pointTimeOut: true,
|
|
|
|
+ dropdownShow:false,
|
|
|
|
+ currentIndex: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();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ 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();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ updateType2(e) {
|
|
|
|
+ this.preference.obc_stationType_index = e.value;
|
|
|
|
+ this.close();
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ updateType(e) {
|
|
|
|
+ this.preference.obc_type_index = e.value;
|
|
|
|
+ this.close();
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ updateRadius(e) {
|
|
|
|
+ this.preference.miles_index = e.value;
|
|
|
|
+ this.close();
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ 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.searchStationData();
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ 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 {
|
|
|
|
+
|
|
|
|
+ this.searchStationData()
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: error,
|
|
|
|
+ icon: "none"
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ searchStationData() {
|
|
|
|
+ let data1 = {
|
|
|
|
+ latitude: this.latitude,
|
|
|
|
+ longitude: this.longitude,
|
|
|
|
+ findType: "1",
|
|
|
|
+ pageIndex: 1,
|
|
|
|
+ pageSize: 999
|
|
|
|
+ };
|
|
|
|
+ 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){
|
|
|
|
+ data1.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].value
|
|
|
|
+ }
|
|
|
|
+ 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;
|
|
|
|
+ this.stationslist = res.data.data;
|
|
|
|
+ if(data1.findType == "0"){
|
|
|
|
+ this.$refs.amap.calcDistances([this.longitude, this.latitude],this.stationslist)
|
|
|
|
+ this.$refs.amap.setChargerList(this.stationslist);
|
|
|
|
+ this.currentIndex = 0;
|
|
|
|
+ if(this.stationslist.length){
|
|
|
|
+ this.$refs.amap.updateCharger(this.stationslist[0]);
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }).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", "stationType", 'city']
|
|
|
|
+ for (var i in sz) {
|
|
|
|
+ if (i == val && val != '') {
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ this.$refs[sz[i]].closeSelector();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ //this.show = false;
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ @import "@/_theme.scss";
|
|
|
|
+
|
|
|
|
+ .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-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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .img-box {
|
|
|
|
+ width: 120px;
|
|
|
|
+ height: 120px;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .carNone{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ img{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ p{
|
|
|
|
+ margin-top: -60px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .charing-slow{
|
|
|
|
+ box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ margin: 36rpx;
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
+ padding: 40rpx 24rpx 24rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .sign{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+
|
|
|
|
+ .sign-1{
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
|
+ color: rgba(255, 139, 0, 100);
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border: 1px solid rgba(255, 139, 0, 100);
|
|
|
|
+ padding: 0 4px;
|
|
|
|
+ margin-right: 8px;
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
+ }
|
|
|
|
+ .sign-2{
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border: 1px solid rgba(204, 204, 204, 100);
|
|
|
|
+ padding: 0 4px;
|
|
|
|
+ margin-right: 8px;
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
+ }
|
|
|
|
+ .sign-3{
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
|
+ color: #8161FF ;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border: 1px solid #8161FF;
|
|
|
|
+ padding: 0 8rpx;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ .sign-4 {
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
|
+ color: #00B962;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border: 1px solid #00B962;
|
|
|
|
+ padding: 0 8rpx;
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .address {
|
|
|
|
+ width: 100%;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ .name{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ }
|
|
|
|
+ .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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @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;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .price {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: baseline;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+
|
|
|
|
+ .price-1{
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .num {
|
|
|
|
+
|
|
|
|
+ color: rgba(255, 98, 0, 100);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ font-size: 44rpx;
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-family: Roboto-medium;
|
|
|
|
+ }
|
|
|
|
+ .unit {
|
|
|
|
+ // font-size: 12px;
|
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
|
+ @include themeify{
|
|
|
|
+ // font-size: themed('font-size2');
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+
|
|
|
|
+ height: themed('font-size2');
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ 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
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .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);
|
|
|
|
+ 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);
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-right: 2rpx;
|
|
|
|
+ }
|
|
|
|
+ .num{
|
|
|
|
+ font-size: 32rpx;color: rgba(0, 145, 67, 100);
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .slow{
|
|
|
|
+ margin-left: 16rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+</style>
|