searchPile.vue 55 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933
  1. <template>
  2. <view class='font1'>
  3. <ujp-navbar :is-back="false" :height='nav_height'style="background-color: bisque;">
  4. <view style="display: flex;flex-direction: column; width: 100%;height: 100%;">
  5. <view style="display: flex;flex-direction: row; height: 100%; align-items: center;margin-top:0rpx;padding-top: 0rpx;padding-bottom: 20rpx;">
  6. <view style="margin-left:20rpx;width: 160rpx;">
  7. <uni-combox class='font2' ref="city" :border="false" v-model="area" :candidates="cities" @updateModel='updateCity' @updateSelector="updateTypeSelector(3)"></uni-combox>
  8. </view>
  9. <view style="margin-left: 20rpx;margin-right: 20rpx; flex:1" >
  10. <u-search height="80" :input-style='inputStyle' placeholder="查询站点地址或站名" v-model="keyword" :showAction="false" @focus="navigate"></u-search></view>
  11. <view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
  12. <text class="iconfont">&#xe613;</text> <text class="list font2">列表</text>
  13. <!-- <u-icon name="list-dot" size="26" color="#c0c4cc"></u-icon>
  14. <label>列表</label>-->
  15. </view>
  16. <view style="margin-right: 20rpx;" v-show="!viewMode" @click="mapMode">
  17. <text class="iconfont">&#xe622;</text> <text class="list font2">地图</text>
  18. <!--<u-icon name="map" size="26" color="#c0c4cc"></u-icon>
  19. <label>地图</label>
  20. -->
  21. </view>
  22. </view>
  23. <view style="display: flex;flex-direction: row;width:100%; justify-content: space-between;align-items: center;">
  24. <view style="margin-left:20rpx;margin-right:10rpx;flex:1; ">
  25. <uni-combox class='font2' ref="raidus" :border="false" v-model="raidus" :candidates="radiuses" @updateModel='updateRadius' @updateSelector="updateTypeSelector(0)"></uni-combox>
  26. </view>
  27. <!--
  28. <view style="margin-left: 20rpx;">
  29. <label class="arrow">{{ info.miles_type[preference.miles_index].text }}</label>
  30. <u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
  31. </view>
  32. -->
  33. <view style="flex:1; ">
  34. <uni-combox ref="type" class='font2' :border="false" v-model="type" :candidates="types" @updateModel='updateType' @updateSelector="updateTypeSelector(1)"></uni-combox>
  35. </view>
  36. <view style="flex:1;">
  37. <uni-combox ref="stationType" class='font2' :border="false" v-model="stationType" :candidates="stationTypes" @updateModel='updateType2' @updateSelector="updateTypeSelector(2)"></uni-combox>
  38. </view>
  39. <!-- <view style="margin-left: 20rpx;margin-right: 20rpx;flex:1">
  40. <label class="arrow">{{ info.obc_type[preference.obc_type_index].text }}</label>
  41. <u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
  42. </view>-->
  43. <view style="margin-right: 20rpx;" @click="open">
  44. <label v-if="show" class="arrow font2" style="color: #00b962;">{{ action }}</label>
  45. <label v-else class="arrow font2" >{{ action }}</label>
  46. <u-icon v-if="show" name="arrow-up-fill" size="13" color="#00B962"></u-icon>
  47. <u-icon v-else name="arrow-down-fill" size="13" color="#999999"></u-icon>
  48. </view>
  49. </view>
  50. </view>
  51. </ujp-navbar>
  52. <view class="content" >
  53. <view v-if="show" class="preference" :style="show ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'" style="width: 100%;">
  54. <view class="content-s">
  55. <view class="preference_group">
  56. <view class="preference_group_item"><label class="preference_label">距离我</label></view>
  57. <view>
  58. <u-tag
  59. class="preference_item"
  60. v-for="(item, index) in info.miles_type"
  61. :key="index"
  62. :style="index == preference.miles_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
  63. shape="circle"
  64. :text="item.text"
  65. @click="selectMiles(index)"
  66. ></u-tag>
  67. </view>
  68. </view>
  69. <view class="preference_group">
  70. <view class="preference_group_item"><label class="preference_label">充电站类型</label></view>
  71. <view>
  72. <u-tag
  73. class="preference_item_medium"
  74. v-for="(item, index) in info.obc_type"
  75. :key="index"
  76. :style="index == preference.obc_type_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
  77. shape="circle"
  78. :text="item.text"
  79. @click="selectOBSType(index)"
  80. ></u-tag>
  81. </view>
  82. </view>
  83. <view class="preference_group">
  84. <view class="preference_group_item"><label class="preference_label">充电站所属</label></view>
  85. <view>
  86. <u-tag
  87. class="preference_item_medium"
  88. v-for="(item, index) in info.obc_stationType"
  89. :key="index"
  90. :style="index == preference.obc_stationType_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
  91. shape="circle"
  92. :text="item.text"
  93. @click="selectOBSType2(index)"
  94. ></u-tag>
  95. </view>
  96. </view>
  97. <view class="preference_group" v-if="false">
  98. <view class="preference_group_item"><label class="preference_label">是否对外开放</label></view>
  99. <view>
  100. <u-tag
  101. class="preference_item_plus"
  102. v-for="(item, index) in info.obc_status"
  103. :key="index"
  104. :style="index == preference.obc_status_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
  105. shape="circle"
  106. :text="item.text"
  107. @click="selectOBSStatus(index)"
  108. ></u-tag>
  109. </view>
  110. </view>
  111. <view class="preference_group" v-if="false">
  112. <view style="margin-left: 30rpx;"><u-checkbox active-color="#00b962" shape="circle" v-model="preference.save_preference" @change="radioChange">保存偏好设置</u-checkbox></view>
  113. </view>
  114. </view>
  115. <view class="pre-btn" style="display: flex;flex-direction: row;">
  116. <view class="btn-1 font3" @click="reset" style="width: 30%;">重置</view>
  117. <view class="btn-2 font3" @click="close" style="width: 70%;background-color: #00B962;color: #fff;">确定</view>
  118. </view>
  119. </view>
  120. <u-mask :show="show" @click="show = false"></u-mask>
  121. <view v-show="!viewMode&&!show" >
  122. <view class="carNone" v-if="stationslist.length == 0">
  123. <img src="static/img/暂无数据-缺省页.png" alt="">
  124. <p class="oldTextjp2" oldstyle="font-size: 18px;">{{loading?'暂无可用充电站':'正在为你加载可用的充电站...'}}</p>
  125. </view>
  126. <view v-for="(item,index) in stationslist" :key="item.id" class="charing-slow" @click="stationDetail(item)">
  127. <view class="address">
  128. <view class="name oldTextjp" oldstyle="font-size: 20px;">
  129. {{item.name}}
  130. </view>
  131. <view class="distance "
  132. v-if="item.distance != '99999999'">
  133. <text class="iconfont" style="color:#666666">&#xe615;</text>
  134. {{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
  135. </view>
  136. <view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
  137. <text class="iconfont" style="color:#666666">&#xe615;</text>
  138. 暂无定位
  139. </view>
  140. </view>
  141. <view class="sign" v-if="item.stationType==50">
  142. {{item.address}}
  143. </view>
  144. <view class="sign" v-else>
  145. <template v-if="personInfo&&personInfo.userType!=1">
  146. <view class="sign-1" v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">会员服务费{{discountRatio10(item.discountRatio)}}折</view>
  147. <view class="sign-3" v-if="item.category=='超充'">160kW超充站</view>
  148. <view class="sign-4"
  149. v-if="item.id=='3c554cea-f522-4281-b582-d761510ed91e'||item.id=='3865b3a3-13fd-461a-8145-ee9711df35a2'||item.nightLowPriceEnabled">
  150. 夜间超低价</view>
  151. <view class="sign-2" v-if="item.tagList.length != 0" v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>
  152. </template>
  153. </view>
  154. <view class="price-free price-freeList">
  155. <view class="price">
  156. <view class="price-1">
  157. <text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
  158. : (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
  159. <text class="unit " oldstyle="font-size: 14px;">
  160. 元/度
  161. </text>
  162. </view>
  163. <view class="price-2 " oldstyle="font-size: 14px;" v-if="item.giveDiscount">
  164. <text class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
  165. <text class="unit">元/度</text>
  166. </view>
  167. </view>
  168. <view class="free" >
  169. <view class="fast" v-if="item.fastNum">
  170. <view class="fast-font">
  171. </view>
  172. <view class="num">
  173. {{item.fastAvailableNum}}/{{item.fastNum}}
  174. </view>
  175. </view>
  176. <view class="slow" v-if="item.slowNum">
  177. <view class="slow-font">
  178. </view>
  179. <view class="num">
  180. {{item.slowAvailableNum}}/{{item.slowNum}}
  181. </view>
  182. </view>
  183. </view>
  184. </view>
  185. </view>
  186. <u-divider margin-top="20" bg-color="#F2F4F4" v-if="stationslist.length == recordsTotal" >已经到底了</u-divider>
  187. </view>
  188. <view v-show="viewMode">
  189. <view>
  190. <Chargermap @onMoveStart="moveStart" @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked" @onload="mapdown" @clickMap="clickMap"></Chargermap>
  191. <!--@location="location"-->
  192. <u-image style='position:absolute;z-index:1023;right:40rpx;bottom:520rpx; '
  193. src="@/static/img/location.png" border-radius="8" bg-color="#ffffff" width="30px" height="30px" @click="setCenter"></u-image>
  194. </view>
  195. <!-- 新版卡片 -->
  196. <view class="chargerCard" v-if="stationsmap.length>0">
  197. <swiper v-if="stationsmap.length>0" :current="currentIndex" @change="swiperChange" slide-change-transition-end='swiperTransitionEnd' @transition="swiperTransition">
  198. <swiper-item v-for="(item,index) in stationsmap" :key="item.id" style="height: 100%;">
  199. <view class="swiper-item" style="height: 100%; background-color: #ffffff;" @click="stationDetail(item)">
  200. <view class="charing-slow charing-slow-2" @click="stationDetail(item)">
  201. <view class="address">
  202. <view class="name oldTextjp" oldstyle="font-size: 20px;">
  203. {{item.name}}
  204. </view>
  205. <view class="distance " >
  206. <text class="iconfont" style="color:#666666">&#xe615;</text>
  207. {{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
  208. </view>
  209. <!-- <view class="distance oldTextjp2" oldstyle="font-size: 16px;">
  210. <text class="iconfont" style="color:#666666">&#xe615;</text>
  211. 暂无定位
  212. </view> -->
  213. </view>
  214. <view class="sign min-h">
  215. <template v-if="personInfo&&personInfo.userType!=1">
  216. <view class="sign-1" v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">会员服务费{{discountRatio10(item.discountRatio)}}折</view>
  217. <view class="sign-2" v-if="item.tagList.length != 0" v-for="(tagName,tagIndex) in item.tagList"
  218. :key="tagIndex">{{tagName}}</view>
  219. </template>
  220. </view>
  221. <view class="price-free price-freeOne">
  222. <view class="price">
  223. <view class="price-1">
  224. <view class="num">
  225. {{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
  226. : (item.electricityPrice+item.discountServicePrice).toFixed(2)}}
  227. <span class="unit " oldstyle="font-size: 14px;">
  228. 元/度
  229. </span>
  230. </view>
  231. </view>
  232. <view class="price-2 " oldstyle="font-size: 14px;" v-if="item.giveDiscount">
  233. <text class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
  234. <text class="unit">元/度</text>
  235. </view>
  236. </view>
  237. <view class="free" >
  238. <view class="fast" v-if="item.fastNum">
  239. <view class="fast-font">
  240. </view>
  241. <view class="num">
  242. {{item.fastAvailableNum}}/{{item.fastNum}}
  243. </view>
  244. </view>
  245. <view class="slow" v-if="item.slowNum">
  246. <view class="slow-font">
  247. </view>
  248. <view class="num">
  249. {{item.slowAvailableNum}}/{{item.slowNum}}
  250. </view>
  251. </view>
  252. </view>
  253. </view>
  254. </view>
  255. </view>
  256. </swiper-item>
  257. </swiper>
  258. </view>
  259. </view>
  260. </view>
  261. <Tabbar :current="2" ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
  262. </view>
  263. </template>
  264. <script>
  265. // import api from './site-index.js'
  266. // export default api
  267. import * as indexAPI from '@/apis/index.js'
  268. import * as api from '@/apis/site.js';
  269. import Chargermap from '@/components/Chargermap.vue';
  270. import DoubleSlider from '@/components/double-slider/DoubleSlider.vue';
  271. import Tabbar from '@/components/Tabbar.vue';
  272. import uniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
  273. import * as WxJsApi from '@/utils/wxJsApi.js'
  274. //import * as Map from '@/utils/openMap.js'
  275. //import MapLoader from '@/utils/AMap'
  276. //import xflSelect from '@/components/xfl-select/xfl-select.vue'
  277. let _self;
  278. export default {
  279. components: {
  280. Chargermap,
  281. DoubleSlider,
  282. Tabbar,
  283. uniCombox,
  284. // xflSelect
  285. },
  286. data() {
  287. return {
  288. elderStatus: false,
  289. inputStyle:{
  290. backgroundColor: 'transparent',
  291. "font-size":'32rpx',
  292. },
  293. recordsTotal:-1,
  294. nav_height:88,
  295. elderMode:false,
  296. showCity:false,
  297. showType:false,
  298. showRadius:false,
  299. cities: [ '荆州市'],
  300. radiuses:['1公里','2公里','5公里','10公里','20公里','50公里','100公里','200公里'],
  301. types:['全部','交流快充','直流慢充'],
  302. stationTypes:['全部','公共充电桩','个人充电桩'],
  303. area: '荆州市',
  304. raidus:'',
  305. type:'',
  306. stationType:'',
  307. centerImg:'@/static/img/location.png',
  308. currentIndex:-1,
  309. navBarHeight:88,
  310. viewMode: false, //列表
  311. keyword: '',
  312. show: false,
  313. mapopen: false,
  314. isReady: false,
  315. id: '',
  316. longitude:null,
  317. latitude: null,
  318. name:'荆鹏软件园',
  319. // longitude: '',
  320. // latitude: '',
  321. nearbyStationInfo: {
  322. nearbyShiftDTOList: []
  323. },
  324. action: '筛选',
  325. preference: {
  326. miles_index: 3,
  327. obc_stationType_index:0,
  328. obc_type_index: 0,
  329. obc_status_index: 0,
  330. obc_voltage_index: 0,
  331. save_preference: false,
  332. obc_power: { minValue: 0, maxValue: 500 }
  333. },
  334. stationsmap:[
  335. /* {name:'荆鹏软件园充电站',position:'湖北省荆州市沙市区江津东路附155号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'慢充'},
  336. {name:'荆鹏软件园充电站2',position:'湖北省荆州市沙市区江津东路附156号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'快充'},
  337. {name:'荆鹏软件园充电站3',position:'湖北省荆州市沙市区江津东路附157号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'慢充'},
  338. {name:'荆鹏大道求助站充电站',position:'湖北省荆州市沙市区江津东路附158号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'快充'},
  339. */
  340. ],
  341. first:true,
  342. timer:null,
  343. loading:false,
  344. swipping:false,
  345. stationslist:[],
  346. info: {
  347. miles_type: [
  348. { distance: 1, text: '1公里' },
  349. { distance: 2, text: '2公里' },
  350. { distance: 5, text: '5公里' },
  351. { distance: 10, text: '10公里' },
  352. { distance: 20, text: '20公里' },
  353. { distance: 50, text: '50公里' },
  354. { distance: 100, text: '100公里' },
  355. { distance: 200, text: '200公里' }
  356. ],
  357. obc_type: [{ value: '', text: '全部' }, { value: 0, text: '直流快充' }, { value: 1, text: '交流慢充' }],
  358. obc_status: [{ value: 0, text: '对外开放' }, { value: 1, text: '不对外开放' }],
  359. obc_voltage: [{ value: 0, text: '低于700V' }, { value: 1, text: '700V及以上' }],
  360. obc_power: { minValue: 0, maxValue: 1000 },
  361. obc_stationType : [
  362. { value: '', text: '全部' }, { value: 1, text: '公共充电桩' }, { value:50, text: '个人充电桩' }
  363. ]
  364. },
  365. userId:'',
  366. personInfo:{},
  367. };
  368. },
  369. onLoad(op) {
  370. _self = this;
  371. var px = uni.upx2px(172);
  372. this.nav_height = px;
  373. // //('longitude0 ' + _self.longitude);
  374. // //('latitude0 ' + _self.latitude);
  375. // if (op != null) {
  376. // if (op.longitude != null) this.longitude = op.longitude;
  377. // if (op.latitude != null) this.latitude = op.latitude;
  378. // if (op.id != null) this.id = op.id;
  379. // }
  380. // if(this.elderMode)
  381. // {
  382. // window.document.getElementsByTagName('body')[0].style.setProperty('--theme', 1);
  383. // }
  384. //navigation.getPoint();
  385. let data1 = {latitude:this.latitude,longitude:this.longitude,findType:"1"};
  386. this.getChargingStationData(data1);
  387. },
  388. onReady() {
  389. if(this.carhelp.get("getElderModeClass") == "长辈模式") {
  390. this.elderStatus = true;
  391. } else {
  392. this.elderStatus = false;
  393. }
  394. // //('长者模式'+JSON.stringify(this.carhelp.get("getElderModeClass")));
  395. this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
  396. //this.elderMode = true;
  397. if(this.elderMode)
  398. this.theme('elder')
  399. else
  400. this.theme('standard')
  401. if (this.carhelp.getPersonInfo()) {
  402. this.userId = this.carhelp.getPersonInfo().id;
  403. this.personInfo=this.carhelp.getPersonInfo();
  404. }
  405. let preference = this.carhelp.get('preference',this.preference)
  406. if(preference.save_preference)
  407. {
  408. this.preference = preference;
  409. //('preference'+JSON.stringify(preference))
  410. }
  411. this.types = [];
  412. for(let i = 0;i< this.info.obc_type.length;i++){
  413. this.types.push(this.info.obc_type[i].text);
  414. }
  415. this.radiuses = [];
  416. for(let i = 0;i< this.info.miles_type.length;i++){
  417. this.radiuses.push(this.info.miles_type[i].text);
  418. }
  419. this.type = this.info.obc_type[this.preference.obc_type_index].text;
  420. this.raidus = this.info.miles_type[this.preference.miles_index].text;
  421. this.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].text;
  422. WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
  423. // //(res)
  424. }).catch(error => {
  425. //(error)
  426. })
  427. // //('longitude2 '+this.longitude)
  428. // //('latitude2 '+this.latitude)
  429. this.$refs.amap.init();
  430. //this.getPositionByLonLats();
  431. // this.$refs.amap.setMyStyle("height:1500rpx;width:100%;");
  432. // this.$refs.amap.setMyStyle("height:calc(100%-176rpx);width:100%;");
  433. // //('longitude3 '+this.longitude)
  434. // //('latitude3 '+this.latitude)
  435. },
  436. onShow() {
  437. if(this.$refs.tabbarMain){
  438. this.$refs.tabbarMain.setcount(2);
  439. }
  440. // //('onShow')
  441. if (this.isReady) {
  442. }
  443. this.$nextTick(()=>{
  444. this.type = this.info.obc_type[this.preference.obc_type_index].text;
  445. this.raidus = this.info.miles_type[this.preference.miles_index].text;
  446. this.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].text;
  447. this.$refs.amap.init();
  448. })
  449. },
  450. onHide(){
  451. this.end();
  452. },
  453. methods: {
  454. updateTypeSelector(val){
  455. var sz=["raidus","type","stationType",'city']
  456. for(var i in sz){
  457. if(i==val){
  458. }else{
  459. this.$refs[sz[i]].closeSelector();
  460. }
  461. }
  462. this.show = false;
  463. },
  464. updateCity(e){
  465. this.close();
  466. },
  467. updateRadius(e){
  468. this.preference.miles_index = e.value;
  469. this.close();
  470. //('updateRadius'+JSON.stringify(e))
  471. },
  472. updateType2(e){
  473. this.preference.obc_stationType_index = e.value;
  474. this.close();
  475. //('updateType'+JSON.stringify(e))
  476. },
  477. updateType(e){
  478. this.preference.obc_type_index = e.value;
  479. this.close();
  480. //('updateType'+JSON.stringify(e))
  481. },
  482. setCenter(){
  483. //('getPoint')
  484. WxJsApi.getLocation().then((res) => {
  485. _self.latitude = parseFloat(res.latitude);
  486. _self.longitude = parseFloat(res.longitude);
  487. //let data = {position:{latitude:latitude,longitude:longitude}};
  488. let posCenter= {longitude: _self.longitude,latitude: _self.latitude};
  489. this.$refs.amap.setCenter(posCenter);
  490. }).catch(error => {
  491. uni.showToast({
  492. title:JSON.stringify(error)
  493. })
  494. })
  495. // //('setCenter')
  496. },
  497. getScanCode() {
  498. if(!this.isEnabled())
  499. return;
  500. if (this.userId) {
  501. WxJsApi.scanQRCode(1).then(res => {
  502. if(res) {
  503. indexAPI.scanCode(res).then((response) => {
  504. }).catch(error => {
  505. uni.showToast({
  506. title: error,
  507. icon: "none"
  508. })
  509. })
  510. }
  511. }).catch(error => {
  512. })
  513. } else {
  514. uni.navigateTo({
  515. url: '/pages/login/login'
  516. })
  517. }
  518. },
  519. //导航
  520. guide(signMap,item) {
  521. let self = this;
  522. if (item.position && item.position != '') {
  523. //景点位置partnerAddress 景点经纬度lng lat
  524. var lng = self.lng;
  525. var lat = self.lat;
  526. if (signMap == 'gd') {
  527. // 高德地图
  528. //('signMap')
  529. if (self.customBrowserVersion().android) {
  530. window.location.href = "androidamap://viewMap?sourceApplication=appname&poiname=" + item.position +
  531. "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
  532. //判断是否跳转
  533. setTimeout(function () {
  534. let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||
  535. window.document.webkitHidden
  536. if (typeof hidden == "undefined" || hidden == false) {
  537. //调用高德地图
  538. window.location.href = "https://uri.amap.com/marker?position=" + item.longitude + "," + item.latitude +
  539. "&name=" + item.position;
  540. }
  541. }, 2000);
  542. } else if (self.customBrowserVersion().ios) {
  543. window.location.href = "iosamap://viewMap?sourceApplication=appname&poiname=" + item.position +
  544. "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
  545. //判断是否跳转
  546. setTimeout(function () {
  547. let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||
  548. window.document.webkitHidden
  549. if (typeof hidden == "undefined" || hidden == false) {
  550. //调用高德地图
  551. window.location.href = "https://uri.amap.com/marker?position=" + item.longitude + "," + item.latitude +
  552. "&name=" + item.position;
  553. }
  554. }, 2000);
  555. }
  556. } else if (signMap == 'bd') {
  557. // 百度地图
  558. if (self.customBrowserVersion().android) {
  559. //安卓操作系统
  560. let d = new Date();
  561. let t0 = d.getTime();
  562. window.location.href = "androidamap://viewMap?sourceApplication=appname&poiname=" + item.position+
  563. "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
  564. //由于打开需要1~2秒,利用这个时间差来处理--打开app后,返回h5页面会出现页面变成app下载页面,影响用户体验
  565. var delay = setInterval(function () {
  566. var d = new Date();
  567. var t1 = d.getTime();
  568. if (t1 - t0 < 3000 && t1 - t0 > 2000) {
  569. window.location.href = "http://api.map.baidu.com/marker?location=" + item.latitude + "," +
  570. item.longitude + "&title=" + item.position +
  571. "&content=充电桩&output=html&src=webapp.baidu.openAPIdemo";
  572. }
  573. if (t1 - t0 >= 3000) {
  574. clearInterval(delay);
  575. }
  576. }, 1000);
  577. }
  578. if (self.customBrowserVersion().ios) {
  579. //ios操作系统
  580. let d = new Date();
  581. let t0 = d.getTime();
  582. window.location.href = "iosamap://viewMap?sourceApplication=appname&poiname=" + self.partnerAddress +
  583. "&lat=" + lat + "&lon=" + lng + "&dev=0";
  584. //由于打开需要1~2秒,利用这个时间差来处理--打开app后,返回h5页面会出现页面变成app下载页面,影响用户体验
  585. let delay = setInterval(function () {
  586. var d = new Date();
  587. var t1 = d.getTime();
  588. if (t1 - t0 < 3000 && t1 - t0 > 2000) {
  589. window.location.href = "http://api.map.baidu.com/marker?location=" + item.latitude + "," +
  590. item.longitude + "&title=" + item.position +
  591. "&content=充电桩&output=html&src=webapp.baidu.openAPIdemo";
  592. }
  593. if (t1 - t0 >= 3000) {
  594. clearInterval(delay);
  595. }
  596. }, 1000);
  597. }
  598. }
  599. } else {
  600. uni.showToast({
  601. title:'暂时不知道充电桩位置'
  602. })
  603. }
  604. },
  605. //区分设备
  606. customBrowserVersion() {
  607. var u = navigator.userAgent;
  608. return {
  609. trident: u.indexOf('Trident') > -1, //IE内核
  610. presto: u.indexOf('Presto') > -1, //opera内核
  611. webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  612. gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
  613. mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
  614. ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
  615. android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
  616. iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
  617. iPad: u.indexOf('iPad') > -1, //是否iPad
  618. webApp: u.indexOf('Safari') == -1, //是否web应用程序,没有头部与底部
  619. weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
  620. qq: u.match(/\sQQ/i) == " qq", //是否QQ
  621. isBaidu: u.indexOf('baiduboxapp') !== -1, //是否为百度浏览器
  622. isqqBrowser: u.indexOf('mqqbrowser') !== -1, //是否为qq浏览器
  623. isWxBrowser: u.indexOf('micromessenger') !== -1, //是否为微信浏览器
  624. isUc: u.indexOf('ucbrowser') !== -1, //是否为uc浏览器
  625. };
  626. },
  627. navigateTo(item){
  628. /*
  629. this.elderMode = !this.elderMode;
  630. if(this.elderMode)
  631. this.theme('elder')
  632. else
  633. this.theme('standard')
  634. return;
  635. */
  636. //this.guide('gd',item);
  637. ////('导航'+JSON.stringify(item))
  638. window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;
  639. //Map.getRoute(item);
  640. //Map.openMap(this.latitude, this.longitude, this.name, 'wgs84')
  641. //var startLngLat = [this.longitude, this.latitude]
  642. //var endLngLat = [item.longitude, item.latitude]
  643. ///let platform = uni.getSystemInfoSync().platform
  644. ////('platform'+JSON.stringify(platform))
  645. //this.$refs.amap.navigate(startLngLat,endLngLat);
  646. },
  647. navigate(){
  648. //('naviage to ')
  649. uni.navigateTo({
  650. url:'/pages/search/search'
  651. })
  652. },
  653. getPoint() {
  654. // //('getPoint')
  655. WxJsApi.getLocation().then((res) => {
  656. var latitude = parseFloat(res.latitude);
  657. var longitude = parseFloat(res.longitude);
  658. let data = {position:{latitude:latitude,longitude:longitude}};
  659. _self.location(data);
  660. if(_self.first)
  661. {
  662. var obj = {
  663. longitude: longitude,
  664. latitude: latitude
  665. };
  666. this.$refs.amap.setPerson(obj);
  667. //let data = {latitude:latitude,longitude:longitude};
  668. //this.getChargingStationData(data);
  669. this.getNearbyStationInfo();
  670. _self.first = false;
  671. //this.$refs.amap.listenMove();
  672. }
  673. //('当前位置' +JSON.stringify(data))
  674. //this.latitude2 = latitude;
  675. //this.longitude2 = longitude;
  676. /*uni.showToast({
  677. title:JSON.stringify(res)
  678. })*/
  679. //this.message=JSON.stringify(res)
  680. }).catch(error => {
  681. uni.showToast({
  682. title:JSON.stringify(error)
  683. })
  684. })
  685. },
  686. start() {
  687. let self = this;
  688. // 将定时器名字赋值到变量中
  689. this.timer = setInterval(() => {
  690. ////("开始---");
  691. //self.$refs.amap.getLocation1();
  692. //self.$refs.amap.getLocation ();
  693. }, 10000);
  694. },
  695. end() {
  696. clearInterval(this.timer);
  697. this.timer = null // 这里最好清除一下,回归默认值
  698. // 众所周知,定时器返回一个随机整数,用于表示定时器的编号,后面通过名字可以取消这个定时器的执行。
  699. //(this.timer);
  700. },
  701. isEnabled(){
  702. if(this.viewMode)
  703. {
  704. if(this.show)
  705. return false;
  706. }
  707. return true;
  708. },
  709. stationDetail(item){
  710. if(!this.isEnabled())
  711. return;
  712. //('stationDetail'+JSON.stringify(item))
  713. uni.navigateTo({
  714. url:'stationAndPile/stationDetails?id='+item.id
  715. })
  716. /*
  717. uni.navigateTo({
  718. url:'stationAndPile/stationDetails?station='+encodeURIComponent(JSON.stringify(item))
  719. })
  720. */
  721. // //('stationDetail'+JSON.stringify(item))
  722. },
  723. location(e){
  724. if(e.position){
  725. //this.$refs.amap.getPositionByLonLats(e.position);
  726. if(e.position.latitude && e.position.longitude)
  727. if(this.latitude != e.position.latitude ||
  728. this.longitude != e.position.longitude)
  729. {
  730. this.longitude = e.position.longitude;
  731. this.latitude = e.position.latitude;
  732. let data = {latitude:this.latitude,longitude:this.longitude,findType:"1"};
  733. this.getChargingStationData(data);
  734. //('获取定位'+JSON.stringify(e));
  735. }
  736. }
  737. },
  738. getChargingStationData(pos){
  739. //return;
  740. if(pos == null)
  741. return ;
  742. // //('getChargingStationData'+JSON.stringify(pos))
  743. let data1 = { pageIndex:1,pageSize:999};
  744. if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('直流快充')>=0)
  745. data1.type = "1";
  746. else if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('交流慢充')>=0)
  747. data1.type = "2";
  748. if(pos.longitude != null)
  749. data1.longitude = pos.longitude.toString();
  750. if(pos.latitude != null)
  751. data1.latitude = pos.latitude.toString();
  752. if(this.info.miles_type[this.preference.miles_index].distance!=null)
  753. data1.raidus = this.info.miles_type[this.preference.miles_index].distance.toString();
  754. if(this.preference.obc_stationType_index!=null){
  755. data1.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].value
  756. }
  757. // data1.online = "0";//在线
  758. if(pos.findType != null)
  759. data1.findType = pos.findType;
  760. else
  761. data1.findType = this.viewMode?"0":"1";
  762. if(data1.findType == "0")
  763. {
  764. // //('getChargingStationData res1'+JSON.stringify(res));
  765. _self.currentIndex = -1;
  766. _self.stationsmap = [];
  767. }else{
  768. _self.stationslist = [];
  769. }
  770. /*
  771. if(this.preference.obc_power.minValue!=null)
  772. data1.powerStart = this.preference.obc_power.minValue.toString();
  773. if(this.preference.obc_power.maxValue!=null)
  774. data1.powerEnd = this.preference.obc_power.maxValue.toString();
  775. */
  776. // //('data1'+JSON.stringify(data1))
  777. uni.showLoading({
  778. })
  779. if (this.carhelp.getPersonInfo()) {
  780. data1.openId=this.carhelp.getOpenId()
  781. }
  782. _self.loading=false
  783. api.getChargingStationData(data1).then(function(res){
  784. uni.hideLoading()
  785. _self.recordsTotal = res.data.recordsTotal;
  786. // //('data1'+JSON.stringify(res))
  787. if(!res.result || !res.data || !res.data.data)
  788. {
  789. //('getChargingStationData res nulll')
  790. return;
  791. }
  792. let items = res.data.data;
  793. if(data1.findType == "0")
  794. {
  795. // //('getChargingStationData res1'+JSON.stringify(res));
  796. // _self.currentIndex = -1;
  797. _self.stationsmap = [];
  798. //let stations = [];
  799. for(let i = 0;i<items.length;i++)
  800. {
  801. let obj = {
  802. name:'',
  803. position:'',
  804. price:1.2,
  805. idleNum:10,
  806. total:10,
  807. type: data1.type == "2" ? '慢充':'快充',
  808. id: i,
  809. distance:0,
  810. time:9,
  811. park: '2小时免费停车',
  812. // longitude: 112.28541 + i * 0.001,
  813. // latitude: 30.308354 + i * 0.01
  814. };
  815. if(items[i].id != null){
  816. obj.id = items[i].id;
  817. obj=items[i];
  818. }
  819. else
  820. continue;
  821. if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
  822. {
  823. obj.type = '快/慢'
  824. }
  825. if(items[i].type=="1" )
  826. {
  827. obj.type = '快充'
  828. }
  829. if(items[i].type=="2" )
  830. {
  831. obj.type = '慢充'
  832. }
  833. if(items[i].name!=null)
  834. obj.name = items[i].name;
  835. if(items[i].address!=null)
  836. obj.position = items[i].address;
  837. if(items[i].costPrice!=null)
  838. obj.price = items[i].costPrice;
  839. if(items[i].availableNum!=null)
  840. obj.idleNum = items[i].availableNum;
  841. if(items[i].totalNum!=null)
  842. obj.total = items[i].totalNum;
  843. if(items[i].longitude!=null)
  844. obj.longitude = items[i].longitude;
  845. if(items[i].latitude!=null)
  846. obj.latitude = items[i].latitude;
  847. if(items[i].distance!=null)
  848. obj.distance = items[i].distance;
  849. if(items[i].time != null){
  850. obj.time = items[i].time;
  851. }
  852. if(items[i].image != null){
  853. obj.image = items[i].image;
  854. }
  855. if(items[i].parkingDescription != null){
  856. obj.parkingDescription = items[i].parkingDescription;
  857. }
  858. if(items[i].park != null)
  859. obj.park = items[i].park;
  860. /*
  861. let obj = {name:items[i].name,
  862. position:items[i].address,
  863. price:items[i].costPrice,
  864. idleNum:items[i].availableNum,
  865. total:items[i].totalNum,
  866. distance:0.1,
  867. time:1,
  868. type:'慢充',
  869. id: items[i].id,
  870. park: i%2 == 0? '以实际费用为准':'2小时免费停车',
  871. longitude: items[i].longitude,
  872. latitude: items[i].latitude
  873. };*/
  874. _self.stationsmap.push(obj);
  875. //stations.push(obj);
  876. }
  877. _self.$refs.amap.calcDistances([_self.longitude, _self.latitude],_self.stationsmap)
  878. _self.$refs.amap.setChargerList(_self.stationsmap);
  879. _self.currentIndex = 0;
  880. //if(_self.stationsmap.length>0)
  881. /*_self.$refs.amap.calcDistances([_self.longitude, _self.latitude],stations)
  882. _self.stationsmap = stations;
  883. _self.$refs.amap.setChargerList(stations);*/
  884. if(_self.stationsmap.length>0)
  885. {
  886. //('刷新Map'+JSON.stringify(_self.stationsmap));
  887. _self.$refs.amap.updateCharger(_self.stationsmap[0]);
  888. //let index = _self.stationsmap.findIndex(item => item.id == _self.stationsmap[0].id);
  889. //('刷新Map Index'+ _self.currentIndex)
  890. }
  891. }else if(data1.findType == "1")
  892. {
  893. _self.stationslist = [];
  894. // //('getChargingStationData res2'+JSON.stringify(res));
  895. for(let i = 0;i<items.length;i++)
  896. {
  897. let obj = {
  898. name:'',
  899. position:'',
  900. price:1.2,
  901. idleNum:10,
  902. total:10,
  903. type: data1.type == "2" ? '慢充':'快充',
  904. id: i,
  905. distance:0,
  906. time:9,
  907. park: '以实际费用为准',
  908. // longitude: 112.28541 + i * 0.001,
  909. // latitude: 30.308354 + i * 0.01
  910. };
  911. if(items[i].id != null){
  912. obj.id = items[i].id;
  913. obj=items[i];
  914. }
  915. else
  916. continue;
  917. if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
  918. {
  919. obj.type = '快/慢'
  920. }
  921. if(items[i].type=="1" )
  922. {
  923. obj.type = '快充'
  924. }
  925. if(items[i].type=="2" )
  926. {
  927. obj.type = '慢充'
  928. }
  929. if(items[i].name!=null)
  930. obj.name = items[i].name;
  931. if(items[i].address!=null)
  932. obj.position = items[i].address;
  933. if(items[i].costPrice!=null)
  934. obj.price = items[i].costPrice;
  935. if(items[i].availableNum!=null)
  936. obj.idleNum = items[i].availableNum;
  937. if(items[i].totalNum!=null)
  938. obj.total = items[i].totalNum;
  939. if(items[i].longitude!=null)
  940. obj.longitude = items[i].longitude;
  941. if(items[i].latitude!=null)
  942. obj.latitude = items[i].latitude;
  943. if(items[i].distance!=null)
  944. obj.distance = items[i].distance;
  945. if(items[i].time != null){
  946. obj.time = items[i].time;
  947. }
  948. if(items[i].parkingDescription != null){
  949. obj.parkingDescription = items[i].parkingDescription;
  950. }
  951. if(items[i].image != null){
  952. obj.image = items[i].image;
  953. }
  954. if(items[i].park != null)
  955. obj.park = items[i].park;
  956. //arr.push(obj);
  957. _self.stationslist.push(obj);
  958. }
  959. _self.loading=true
  960. _self.$refs.amap.calcDistances([_self.longitude, _self.latitude],_self.stationslist)
  961. // //(' getChargingStationData stations'+JSON.stringify(_self.stationslist))
  962. }
  963. },function(err){
  964. uni.showToast({
  965. title:err
  966. })
  967. //('getChargingStationData err'+JSON.stringify(err))
  968. }
  969. )
  970. // //('getChargingStationData end')
  971. },
  972. /*
  973. charge(item){
  974. //('扫码充电')
  975. //#ifdef MP-WEIXIN
  976. uni.scanCode({
  977. success:function(res){
  978. uni.navigateTo({
  979. url:'chargingPileDetails?pile='+encodeURIComponent(JSON.stringify(data))
  980. })
  981. }
  982. })
  983. return;
  984. //#endif
  985. //('扫码充电1')
  986. uni.navigateTo({
  987. url:'stationAndPile/chargingPileDetails'
  988. })
  989. }, */
  990. moveEnd(e){
  991. //('moveEnd')
  992. this.close_all();
  993. let posCenter = this.$refs.amap.logMapInfo();
  994. ////('posCenter'+JSON.stringify(posCenter))
  995. let data = {latitude:e.center.lat,longitude:e.center.lng};
  996. this.getChargingStationData(data);
  997. },
  998. moveStart(e){
  999. this.close_all();
  1000. },
  1001. clickTabItem (index) {
  1002. //('clickTabaItem'+JSON.stringify(index));
  1003. this.currentIndex = index
  1004. },
  1005. swiperChange (e) {
  1006. //('swiperChange currentIndex'+JSON.stringify(this.currentIndex))
  1007. //('swiperChange'+JSON.stringify(e))
  1008. this.currentIndex = e.detail.current
  1009. let station = this.stationsmap[this.currentIndex];
  1010. let posCenter= {longitude: station.longitude,latitude: station.latitude};
  1011. // //('currentIndex'+JSON.stringify(this.currentIndex))
  1012. // //('currentIndex'+JSON.stringify(posCenter))
  1013. // //('station'+JSON.stringify(station))
  1014. let bounds = this.$refs.amap.logMapInfo();
  1015. /*if( (posCenter.latitude<bounds.bounds.northeast.lat && posCenter.latitude>bounds.bounds.sourthwest.lat)
  1016. && (posCenter.longitude<bounds.bounds.northeast.lng && posCenter.longitude>bounds.bounds.sourthwest.lng)
  1017. ){
  1018. //('bounds'+JSON.stringify(bounds));
  1019. }else{
  1020. this.$refs.amap.setCenter(posCenter);
  1021. }*/
  1022. this.$refs.amap.updateCharger(station);
  1023. this.$refs.amap.setCenter(posCenter);
  1024. },
  1025. swiperTransitionEnd(e){
  1026. //('swiperTransitionEnd'+JSON.stringify(e))
  1027. },
  1028. swiperTransition (e) {
  1029. // //('swiperTransition'+JSON.stringify(e))
  1030. },
  1031. listMode() {
  1032. this.close_all();
  1033. this.viewMode = false
  1034. },
  1035. mapMode() {
  1036. this.close_all();
  1037. this.viewMode = true
  1038. },
  1039. radioChange(e) {
  1040. // //('e'+JSON.stringify(e))
  1041. this.preference.save_preference = e.value;
  1042. // //('save_preference '+this.preference.save_preference);
  1043. },
  1044. handlerDoubleSlider(e) {
  1045. // //('e'+JSON.stringify(e))
  1046. this.preference.obc_power = e;
  1047. //this.preference.obc_power.minValue = e.minValue;
  1048. //this.preference.obc_power.maxValue = e.maxValue;
  1049. },
  1050. selectOBSType(index) {
  1051. this.preference.obc_type_index = index;
  1052. },
  1053. selectOBSType2(index) {
  1054. this.preference.obc_stationType_index = index;
  1055. },
  1056. selectOBSStatus(index) {
  1057. this.preference.obc_status_index = index;
  1058. },
  1059. selectOBCVoltage(index) {
  1060. this.preference.obc_voltage_index = index;
  1061. },
  1062. selectMiles(index) {
  1063. this.preference.miles_index = index;
  1064. },
  1065. reset() {
  1066. this.preference.obc_status_index = 0;
  1067. this.preference.obc_voltage_index = 0;
  1068. this.preference.obc_stationType_index = 0;
  1069. this.preference.obc_type_index = 0;
  1070. this.preference.miles_index = 3;
  1071. this.preference.save_preference = false;
  1072. // this.$refs.obc_voltage.currentValue = [0,100];
  1073. this.preference.obc_power.minValue = 0;
  1074. this.preference.obc_power.maxValue = 500;
  1075. this.preference.obc_power.minP = Math.floor((this.preference.obc_power.minValue / (this.info.obc_power.maxValue - this.info.obc_power.minValue)) * 100);
  1076. this.preference.obc_power.maxP = Math.floor((this.preference.obc_power.maxValue / (this.info.obc_power.maxValue - this.info.obc_power.minValue)) * 100);
  1077. // //('minP'+this.preference.obc_power.minP)
  1078. // //('maxP'+this.preference.obc_power.maxP)
  1079. this.$refs.obc_voltage.reset(this.preference.obc_power);
  1080. // this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
  1081. // //('reset')
  1082. },
  1083. close_all(){
  1084. this.updateTypeSelector()
  1085. this.show = false;
  1086. },
  1087. open() {
  1088. this.updateTypeSelector()
  1089. this.show = true;
  1090. //this.$refs.obc_voltage.currentMinValue = this.preference.obc_power[0];
  1091. //this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
  1092. //('open');
  1093. },
  1094. close() {
  1095. //('偏好设置' + JSON.stringify(this.preference));
  1096. this.close_all();
  1097. // this.show = false;
  1098. let data = {latitude:this.latitude,longitude:this.longitude};
  1099. this.type = this.info.obc_type[this.preference.obc_type_index].text;
  1100. this.raidus = this.info.miles_type[this.preference.miles_index].text;
  1101. this.stationType = this.info.obc_stationType[this.preference.obc_stationType_index].text;
  1102. if(this.preference.save_preference)
  1103. this.carhelp.set('preference',this.preference)
  1104. this.getChargingStationData(data);
  1105. //this.stationslist = this.stationsmap;
  1106. // //('close');
  1107. },
  1108. onClicked(e){
  1109. this.close_all();
  1110. ////('onClicked e'+JSON.stringify(e))
  1111. },
  1112. // 获取当前位置
  1113. clickMap(obj) {
  1114. this.show=false;
  1115. //this.currentIndex = 5;
  1116. // //('longitude1 ' + _self.longitude);
  1117. // //('latitude1 ' + _self.latitude);
  1118. if (obj == null || obj.type == null) return;
  1119. if (obj.type == 'charger') {
  1120. if (obj.obj != null) {
  1121. //_self.$refs.amap.updateCharger(obj.obj);
  1122. let index = _self.stationsmap.findIndex(item => item.id == obj.obj.id);
  1123. _self.currentIndex = index;
  1124. //('find Index'+index);
  1125. }
  1126. /*api.getChargerInfoById(obj).then(
  1127. function(data) {
  1128. if (obj.obj != null) {
  1129. //obj.obj.price = 2.25;
  1130. //obj.obj.idleNum = 12;
  1131. _self.$refs.amap.updateCharger(obj.obj);
  1132. let index = _self.stationsmap.findIndex(item => item.id == obj.obj.id);
  1133. _self.currentIndex = index;
  1134. //('find Index'+index);
  1135. }
  1136. // //('点击1'+JSON.stringify(obj));
  1137. },
  1138. function(err) {
  1139. //('点击2' + JSON.stringify(obj));
  1140. }
  1141. );*/
  1142. }
  1143. },
  1144. mapdown() {
  1145. ////('this'+JSON.stringify(this))
  1146. // //('longitude1 ' + this.longitude);
  1147. // //('latitude1 ' + this.latitude);
  1148. //this.start();
  1149. //this.$refs.amap.getLocation1();
  1150. //this.getNearbyStationInfo();
  1151. let data2 = {latitude:this.latitude,longitude:this.longitude,findType:"0"};
  1152. this.getChargingStationData(data2);
  1153. this.isReady = true;
  1154. //this.$refs.amap.getLocation ();
  1155. //let state = {};
  1156. uni.getSystemInfo({
  1157. success: (res) => {
  1158. // #ifndef MP
  1159. let navbarH = 0
  1160. // #endif
  1161. // #ifdef MP
  1162. let navbarH = uni.upx2px(90)
  1163. // #endif
  1164. /*state.status_width = res.windowWidth;
  1165. //('window width'+state.status_width);*/
  1166. let scrollH = res.windowHeight;// - uni.upx2px(88) - navbarH
  1167. let scrollW = res.windowWidth;
  1168. // //('布局结果'+ JSON.stringify(res));
  1169. // //('scrollW'+scrollW)
  1170. //#ifdef MP-WEIXIN
  1171. const {
  1172. statusBarHeight,
  1173. windowWidth,
  1174. } = uni.getSystemInfoSync();
  1175. scrollW = windowWidth;
  1176. // //('height ' + statusBarHeight);
  1177. //this.status_height = uni.getStatusbarHeight();
  1178. let res1 = uni.getMenuButtonBoundingClientRect()
  1179. // //('layout selectHeight '+JSON.stringify(res1))
  1180. //state.selectHeight = (res1.top-res.statusBarHeight)*2+ res1.height;
  1181. //#endif
  1182. ////('status height'+state.status_height)
  1183. _self.$refs.amap.setMyStyle("height:"+(scrollH-88-50)+ "px;width:"+scrollW+"px;");
  1184. }
  1185. })
  1186. this.getPoint();
  1187. },
  1188. gotoLine(item, downid) {
  1189. uni.navigateTo({
  1190. url: '/pages/route/index?id=' + item.routeId + '&upid=' + item.startStationId + '&downid=' + downid
  1191. });
  1192. },
  1193. mapopenBtn() {
  1194. this.mapopen = !this.mapopen;
  1195. if (this.mapopen) {
  1196. this.$refs.amap.setMyStyle('width: 100%; height: 340px;');
  1197. } else {
  1198. this.$refs.amap.setMyStyle('width: 100%; height: 140px;');
  1199. }
  1200. },
  1201. getNearbyStationInfo() {
  1202. let data1 = {latitude:this.latitude,longitude:this.longitude,findType:"1"};
  1203. this.getChargingStationData(data1);
  1204. let data2 = {latitude:this.latitude,longitude:this.longitude,findType:"0"};
  1205. this.getChargingStationData(data2);
  1206. },
  1207. theme(type) {
  1208. if(type == 'elder')
  1209. {
  1210. document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
  1211. let data = {
  1212. backgroundColor: 'transparent',
  1213. "font-size":'32rpx',
  1214. };
  1215. this.inputStyle = data;
  1216. }
  1217. else
  1218. {
  1219. document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
  1220. let data ={
  1221. backgroundColor: 'transparent',
  1222. "font-size":'32rpx',
  1223. };
  1224. this.inputStyle = data;
  1225. }
  1226. }
  1227. }
  1228. };
  1229. </script>
  1230. <style lang="scss" scoped>
  1231. @import "@/_theme.scss";
  1232. .oldTextClassF{
  1233. .price-freeList{
  1234. .price{
  1235. line-height: 56rpx;
  1236. }
  1237. .price .price-2 {
  1238. font-size: 28rpx !important;
  1239. }
  1240. .price .price-1 .num{
  1241. font-size: 56rpx !important;
  1242. }
  1243. .price .price-1 .unit{
  1244. margin-left: 0px;
  1245. }
  1246. }
  1247. }
  1248. .carNone{
  1249. display: flex;
  1250. flex-direction: column;
  1251. justify-content: center;
  1252. align-items: center;
  1253. img{
  1254. width: 100%;
  1255. height: 100%;
  1256. }
  1257. p{
  1258. margin-top: -60px;
  1259. }
  1260. }
  1261. .uni-combox__no-border{
  1262. white-space: nowrap;
  1263. }
  1264. .u-mask {
  1265. position: fixed;
  1266. left: 0;
  1267. top: 576px;
  1268. }
  1269. .content-s{
  1270. height: 440px;
  1271. overflow-y:scroll;
  1272. }
  1273. .cj-slider {
  1274. width: 90%;
  1275. margin: auto;
  1276. }
  1277. .cj-slide__text {
  1278. text-align: center;
  1279. padding: 20rpx;
  1280. }
  1281. .preference_group_item {
  1282. padding: 15rpx;
  1283. }
  1284. .preference_group {
  1285. padding-bottom: 20rpx;
  1286. }
  1287. .preference {
  1288. background-color: #ffffff;
  1289. left: 0rpx;
  1290. position: absolute
  1291. }
  1292. .preference_item {
  1293. margin-bottom: 10rpx;
  1294. margin-left: 20rpx;
  1295. text-align: center;
  1296. border-style: none;
  1297. width: 20%;
  1298. height: 56rpx;
  1299. @include themeify{
  1300. // font-size: themed('font-size2');
  1301. // line-height: themed('font-size2');
  1302. }
  1303. /* line-height: 14px;*/
  1304. }
  1305. .preference_item_medium {
  1306. margin-bottom: 10rpx;
  1307. margin-left: 20rpx;
  1308. text-align: center;
  1309. border-style: none;
  1310. min-width: 22%;
  1311. height: 56rpx;
  1312. @include themeify{
  1313. font-size: themed('font-size2');
  1314. line-height: themed('font-size2');
  1315. }
  1316. /* line-height: 14px;*/
  1317. }
  1318. .preference_item_plus {
  1319. margin-bottom: 10rpx;
  1320. margin-left: 20rpx;
  1321. align-items: center;
  1322. justify-content: center;
  1323. text-align: center;
  1324. width: 28%;
  1325. border-style: none;
  1326. height: 56rpx;
  1327. @include themeify{
  1328. font-size: themed('font-size2');
  1329. line-height: themed('font-size2');
  1330. }
  1331. /* line-height: 14px;*/
  1332. }
  1333. .preference_label {
  1334. @include themeify{
  1335. color:themed('font_colorLabel');
  1336. font-size: themed('font-size1');
  1337. font-weight: themed('fontWeight');
  1338. }
  1339. margin-left: 20rpx;
  1340. margin-bottom: 100rpx;
  1341. }
  1342. .pre-btn{
  1343. width: 100%;
  1344. height: 96rpx;
  1345. z-index: 999;
  1346. }
  1347. .btn-1,.btn-2{
  1348. height: 96rpx;
  1349. line-height: 96rpx;
  1350. text-align: center;
  1351. border-top: 1px solid rgba(225, 228, 232, 100);
  1352. }
  1353. .map{
  1354. background-color: #ffffff;
  1355. left: 0rpx;
  1356. position: absolute;
  1357. }
  1358. .chargerCard{
  1359. z-index: 999;
  1360. background-color: #fff;
  1361. margin: 0 24rpx;
  1362. border-radius: 16rpx;
  1363. // overflow: hidden;
  1364. bottom: 68px;
  1365. left: 0;
  1366. right: 0;
  1367. position: fixed;
  1368. // height: 380rpx;
  1369. // @include themeify{
  1370. // height:themed('cardHeight');
  1371. // }
  1372. }
  1373. .arrow{
  1374. margin-right: 15rpx;
  1375. }
  1376. .card_item{
  1377. display: flex;
  1378. flex-direction: row;
  1379. @include themeify{
  1380. font-size: themed('font-size2');
  1381. }
  1382. justify-content: space-between;
  1383. }
  1384. .round{
  1385. border-radius:50rpx;
  1386. background-color: #00B962;
  1387. color: #ffffff;
  1388. text-align: center;
  1389. justify-content: center;
  1390. align-items: center;
  1391. @include themeify{
  1392. font-size: themed('font-size2');
  1393. width:themed('buttonWidth')
  1394. }
  1395. /* width: 250rpx;*/
  1396. display: flex;
  1397. flex-direction: row;
  1398. }
  1399. .round2{
  1400. border-radius:50rpx;
  1401. background-color: #00B962;
  1402. color: #ffffff;
  1403. text-align: center;
  1404. justify-content: center;
  1405. align-items: center;
  1406. // width:125rpx;
  1407. }
  1408. .charing-slow{
  1409. box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
  1410. }
  1411. .swiper-item{
  1412. }
  1413. .list {
  1414. margin-left: 4rpx;
  1415. }
  1416. .charing-slow-2{
  1417. margin: 0 0 10px 0 !important;
  1418. // border-bottom: 1px solid rgba(238, 242, 240, 100);
  1419. }
  1420. .charing-slow {
  1421. background-color: #fff;
  1422. margin: 36rpx;
  1423. border-radius: 16rpx;
  1424. padding: 40rpx 24rpx 24rpx;
  1425. position: relative;
  1426. left: 0;
  1427. right: 0;
  1428. }
  1429. .fast-charge {
  1430. display: inline-block;
  1431. border-radius: 50px;
  1432. border-radius: 4px;
  1433. background-color: rgba(208, 209, 255, 100);
  1434. color: rgba(56, 60, 255, 100);
  1435. margin: auto 0;
  1436. @include themeify{
  1437. width: themed('font-size18');
  1438. font-size: themed('font-size2');
  1439. line-height: themed('font-size7');
  1440. height: themed('font-size8');
  1441. }
  1442. text-align: center;
  1443. }
  1444. .fast-trickle-charge {
  1445. display: inline-block;
  1446. margin: auto 0;
  1447. border-radius: 4px;
  1448. background-color: rgba(172, 236, 240, 100);
  1449. color: rgba(0, 124, 134, 100);
  1450. @include themeify{
  1451. width: themed('font-size18');
  1452. font-size: themed('font-size2');
  1453. line-height: themed('font-size7');
  1454. height: themed('font-size8');
  1455. }
  1456. text-align: center;
  1457. }
  1458. .trickle-charge {
  1459. display: inline-block;
  1460. border-radius: 4px;
  1461. margin: auto 0;
  1462. background-color: rgba(186, 240, 215, 100);
  1463. color: rgba(0, 130, 69, 100);
  1464. @include themeify{
  1465. width: themed('font-size18');
  1466. font-size: themed('font-size2');
  1467. line-height: themed('font-size7');
  1468. height: themed('font-size8');
  1469. }
  1470. text-align: center;
  1471. }
  1472. .station-items {
  1473. display: inline-block;
  1474. /* height: 16px;
  1475. line-height: 16px;*/
  1476. @include themeify{
  1477. font-size: themed('font-size3');
  1478. font-weight: themed('fontWeight');
  1479. line-height: themed('font-size3');
  1480. height: themed('font-size3');
  1481. }
  1482. margin-left: 8rpx;
  1483. color: #101010;
  1484. }
  1485. //
  1486. .address {
  1487. width: 100%;
  1488. line-height: 20px;
  1489. display: flex;
  1490. justify-content: space-between;
  1491. .name{
  1492. font-size: 16px;
  1493. white-space: nowrap;
  1494. overflow: hidden;
  1495. text-overflow: ellipsis;
  1496. }
  1497. .distance{
  1498. color: rgba(102, 102, 102, 100);
  1499. text-align: end;
  1500. font-size: 30rpx;
  1501. width: 180rpx;
  1502. min-width: 180rpx;
  1503. .iconfont{
  1504. font-size: 12px;
  1505. margin-right: 2px;
  1506. }
  1507. }
  1508. @include themeify{
  1509. font-size: themed('font-size5');
  1510. line-height: themed('font-size7');
  1511. }
  1512. /* font-size: 11px;*/
  1513. font-weight: 600;
  1514. color: #101010;
  1515. }
  1516. .price-free{
  1517. width: 100%;
  1518. display: flex;
  1519. align-items: center;
  1520. justify-content: space-between;
  1521. }
  1522. .price {
  1523. display: flex;
  1524. align-items: baseline;
  1525. line-height: 40rpx;
  1526. .price-1{
  1527. .num {
  1528. color: rgba(255, 98, 0, 100);
  1529. font-size: 44rpx;
  1530. height: 44rpx;
  1531. text-align: left;
  1532. font-family: Roboto-medium;
  1533. }
  1534. .unit {
  1535. // font-size: 12px;
  1536. color: rgba(102, 102, 102, 100);
  1537. @include themeify{
  1538. // font-size: themed('font-size2');
  1539. font-size: 24rpx;
  1540. height: themed('font-size2');
  1541. }
  1542. text-align: left;
  1543. font-family: AlibabaPuHui-regular;
  1544. margin-left: 8rpx;
  1545. }
  1546. }
  1547. .price-2{
  1548. color: rgba(153, 153, 153, 100);
  1549. margin-left: 6rpx;
  1550. text-decoration: line-through;
  1551. font-size: 24rpx
  1552. }
  1553. }
  1554. .free{
  1555. display: flex;
  1556. align-items: center;
  1557. .slow,.fast{
  1558. display: flex;
  1559. .sp-font{
  1560. width: 40rpx;
  1561. height: 40rpx;
  1562. line-height: 40rpx;
  1563. border-radius: 4px;
  1564. background-color: #7a68f6;
  1565. color: #fff;
  1566. font-size: 28rpx;
  1567. text-align: center;
  1568. margin-right: 2rpx;
  1569. }
  1570. .fast-font{
  1571. width: 40rpx;
  1572. height: 40rpx;
  1573. line-height: 40rpx;
  1574. border-radius: 4px;
  1575. background-color: rgba(186, 240, 215, 100);
  1576. color: rgba(0, 130, 69, 100);
  1577. font-size: 28rpx;
  1578. text-align: center;
  1579. margin-right: 2rpx;
  1580. }
  1581. .slow-font{
  1582. width: 40rpx;
  1583. height: 40rpx;
  1584. line-height: 40rpx;
  1585. border-radius: 4px;
  1586. background-color: rgba(226, 226, 226, 100);
  1587. color: rgba(128, 128, 128, 100);
  1588. font-size: 28rpx;
  1589. text-align: center;
  1590. margin-right: 2rpx;
  1591. }
  1592. .num{
  1593. font-size: 32rpx;color: rgba(0, 145, 67, 100);
  1594. line-height: 40rpx;
  1595. }
  1596. }
  1597. .slow{
  1598. margin-left: 16rpx;
  1599. }
  1600. }
  1601. .park {
  1602. margin-top: 16rpx;
  1603. display: flex;
  1604. }
  1605. .park-p {
  1606. display: inline-block;
  1607. width: 20px;
  1608. /* height: 18px;
  1609. line-height: 12px;*/
  1610. @include themeify{
  1611. line-height: themed('font-size1');
  1612. height: themed('font-size4');
  1613. }
  1614. text-align: center;
  1615. // background-color: rgba(125, 177, 255, 100);
  1616. background-color: #00b962;
  1617. color: #fff;
  1618. }
  1619. .park-text {
  1620. display: inline-block;
  1621. color: rgba(102, 102, 102, 100);
  1622. @include themeify{
  1623. font-size: themed('font-size1');
  1624. height:themed('font-size4');
  1625. }
  1626. /* font-size: 12px;*/
  1627. text-align: left;
  1628. margin-left: 4px;
  1629. margin-top: 2px;
  1630. }
  1631. .map {
  1632. width: 100%;
  1633. height: 100%;
  1634. position: relative;
  1635. }
  1636. #container {
  1637. width: 100%;
  1638. height: 100%;
  1639. }
  1640. .distance-font {
  1641. @include themeify{
  1642. font-size: themed('font-size3');
  1643. }
  1644. /* font-size: 16px*/
  1645. }
  1646. .position{
  1647. color: #1677ff;
  1648. @include themeify{
  1649. font-size: themed('font-size2');
  1650. }
  1651. /* font-size: 14px*/
  1652. }
  1653. .position-box{
  1654. position:absolute;
  1655. top: 341px;
  1656. right: 118px;
  1657. width: 16px;
  1658. height: 16px;
  1659. /* line-height: 20px; */
  1660. background-color: rgba(22, 119, 255, 100);
  1661. text-align: center;
  1662. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
  1663. border: 2px solid rgba(255, 255, 255, 100);
  1664. border-radius: 999px;
  1665. }
  1666. .min-h{
  1667. min-height: 65px;
  1668. }
  1669. .sign{
  1670. display: flex;
  1671. flex-wrap: wrap;
  1672. margin-top: 10px;
  1673. .sign-1{
  1674. height: 20px;
  1675. line-height: 20px;
  1676. border-radius: 4px;
  1677. background-color: rgba(255, 255, 255, 100);
  1678. color: rgba(255, 139, 0, 100);
  1679. font-size: 12px;
  1680. text-align: center;
  1681. border: 1px solid rgba(255, 139, 0, 100);
  1682. padding: 0 4px;
  1683. margin-right: 8px;
  1684. margin-bottom: 4px;
  1685. }
  1686. .sign-2{
  1687. height: 20px;
  1688. line-height: 20px;
  1689. border-radius: 4px;
  1690. background-color: rgba(255, 255, 255, 100);
  1691. color: rgba(153, 153, 153, 100);
  1692. font-size: 12px;
  1693. text-align: center;
  1694. border: 1px solid rgba(204, 204, 204, 100);
  1695. padding: 0 4px;
  1696. margin-right: 8px;
  1697. margin-bottom: 4px;
  1698. }
  1699. .sign-3{
  1700. line-height: 40rpx;
  1701. border-radius: 8rpx;
  1702. background-color: rgba(255, 255, 255, 100);
  1703. color: #8161FF ;
  1704. font-size: 24rpx;
  1705. text-align: center;
  1706. border: 1px solid #8161FF;
  1707. padding: 0 8rpx;
  1708. margin-right: 16rpx;
  1709. margin-bottom: 8rpx;
  1710. }
  1711. .sign-4 {
  1712. line-height: 40rpx;
  1713. border-radius: 8rpx;
  1714. background-color: rgba(255, 255, 255, 100);
  1715. color: #00B962;
  1716. font-size: 24rpx;
  1717. text-align: center;
  1718. border: 1px solid #00B962;
  1719. padding: 0 8rpx;
  1720. margin-right: 16rpx;
  1721. margin-bottom: 8rpx;
  1722. }
  1723. }
  1724. .park-text2 {
  1725. width: 140%;
  1726. }
  1727. .park-text3 {
  1728. white-space: nowrap;
  1729. text-overflow: ellipsis;
  1730. overflow: hidden;
  1731. }
  1732. </style>