index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
  1. <template>
  2. <ax-body hide-indicator-area :style="[StyleSheet]">
  3. <!-- 标题栏 -->
  4. <template #title>
  5. <view class="titlebar">
  6. <image src="@/static/img/title.png" class="page-title"></image>
  7. <!-- <text class="page-subtitle">“特惠充电享不停”</text> -->
  8. </view>
  9. </template>
  10. <view class="base">
  11. <!-- 搜索块 -->
  12. <view id="search" class="app-flex search-view">
  13. <view class="locate-city">
  14. <image src="@/static/img/locate.svg" class="_icon"></image>
  15. <text class="__name">{{city.data[city.index].text}}</text>
  16. </view>
  17. <label class="search-bar" @click="$app.url.goto('/pages/search/search')">
  18. <input placeholder-class="app-placeholder" placeholder="输入目的地/电站名" />
  19. <image src="@/static/img/search.svg" class="_icon-search"></image>
  20. </label>
  21. </view>
  22. </view>
  23. <!-- 主滚动 -->
  24. <view class="main-scroll-wrap">
  25. <scroll-view class="root-scroll app-hide-scrollbar" @scrolltolower="scrollLock=true" @scrolltoupper="scrollLock=false" scroll-y>
  26. <view class="contet-root">
  27. <!-- 内容顶部 -->
  28. <view id="roller" class="base">
  29. <!-- 快捷栏 -->
  30. <view class="shortcut-bar">
  31. <view class="_item" @click="$app.url.goto('/pages/order/order')">
  32. <image src="@/static/img/shortcut1.png" class="_icon"></image>
  33. <view class="_name">订单中心</view>
  34. </view>
  35. <view class="_item" @click="$app.url.goto('/pages/coupon-buy/coupon-buy')">
  36. <image src="@/static/img/shortcut2.png" class="_icon"></image>
  37. <view class="_name">购充电券</view>
  38. </view>
  39. <view class="_item" @click="customerService()">
  40. <image src="@/static/img/shortcut3.png" class="_icon"></image>
  41. <view class="_name">在线客服</view>
  42. </view>
  43. <view class="_item" @click="$app.url.goto('/pages/feedback/feedback')">
  44. <image src="@/static/img/shortcut4.png" class="_icon"></image>
  45. <view class="_name">意见反馈</view>
  46. </view>
  47. </view>
  48. <!-- 版头广告 -->
  49. <swiper class="banner" v-if="banners.length>0" autoplay="true" >
  50. <swiper-item v-for="(item,index) in banners" :key="index">
  51. <view class="swiper-item">
  52. <image @load="bannerLoadCompleted()" :src="showImg(item.pic)" class="swiper-item-image" mode="widthFix"></image>
  53. </view>
  54. </swiper-item>
  55. </swiper>
  56. </view>
  57. <view id="fixed" class="base">
  58. <!-- 选项条 -->
  59. <view class="app-flex options-bar">
  60. <view class="app-flex middle option-wrap">
  61. <view v-for="(item,index) in sorts.data" :key="index" @click="changeSort(index)"
  62. class="option-item" :class="{active:sorts.index==index}">{{item.name}}</view>
  63. </view>
  64. <view class="app-flex c-center separ"></view>
  65. <view @click="$app.url.goto('/pages/map/map',false)" class="app-flex middle map-mode">
  66. <image src="@/static/img/map.svg" class="_icon"></image>
  67. <text>地图模式</text>
  68. </view>
  69. </view>
  70. </view>
  71. <!-- 电站列表 -->
  72. <view id="list-box" class="list-scroll-wrap">
  73. <scroll-view class="list-scroll" :scroll-y="scrollLock">
  74. <view class="list">
  75. <view v-for="(item,index) in list.data" :key="index" @click="gotoSiteDetail(item)" class="item">
  76. <view class="contet">
  77. <view class="name">
  78. <view class="icon"><image src="@/static/img/plug.svg" mode="widthFix"></image></view>
  79. <view class="txt">{{item.name}}</view>
  80. </view>
  81. <view class="parkade">
  82. <view class="icon"><image src="@/static/img/parkade.svg" mode="widthFix"></image></view>
  83. <!-- <view class="txt"><rich-text :nodes="item.parkTips"></rich-text></view> -->
  84. <view class="txt">充电减免2小时停车费,超出时长部分计时收费</view>
  85. </view>
  86. <view class="app-flex c-between info">
  87. <view class="app-flex middle">
  88. <view class="charge"><text class="icon">快</text><text class="value">{{item.params.emptyFast}}</text><text class="max">{{item.params.totalFast}}</text></view>
  89. <view class="charge"><text class="icon blue">慢</text><text class="value">{{item.params.emptySlow}}</text><text class="max">{{item.params.totalSlow}}</text></view>
  90. </view>
  91. <view class="discount" v-if="discountInfo">
  92. <view>
  93. {{discountInfo.temp2}}
  94. </view>
  95. </view>
  96. <view class="distance">
  97. <view class="icon"><image src="@/static/img/distance.svg" mode="widthFix"></image></view>
  98. <text>{{item.params.rangeShow}}</text>
  99. </view>
  100. </view>
  101. </view>
  102. <view class="price">
  103. <!-- v-if="user_info.firmId===null" -->
  104. <view class="app-flex middle" style="color: #FF5D50;" v-if="user_info||user_info.firmId===null">
  105. <text class="value">{{item.params.nowPrice?item.params.nowPrice.toFixed(4):"0.0000"}}</text>
  106. <text class="unit">元/度</text>
  107. </view>
  108. <view class="app-flex middle" v-else>
  109. <view class="card-bottom-text">
  110. <text>{{item.params.firmPrice.toFixed(4)}}</text>
  111. <text class="mini-text">元/度</text>
  112. </view>
  113. <view class="operation-price-btn">
  114. 企业专享价
  115. </view>
  116. <view class="ordinary-price">{{item.params.nowPrice?item.params.nowPrice.toFixed(4):"0.0000"}}</view>
  117. </view>
  118. <view>{{item.params.priceShow}}</view>
  119. </view>
  120. </view>
  121. </view>
  122. </scroll-view>
  123. </view>
  124. <!-- <view style="height: 158px;"></view> -->
  125. </view>
  126. </scroll-view>
  127. </view>
  128. <app-navigation id="app-navigation" active="home"></app-navigation>
  129. </ax-body>
  130. </template>
  131. <script>
  132. var bmap = require('static/js/bmap-wx.js');
  133. export default {
  134. async onLoad(options) {
  135. const permit = await this.queryPermit();
  136. if(permit.privacy){
  137. // 没有通过隐私协议
  138. this.privacy.visible = true;
  139. }else{
  140. // 已通过隐私协议
  141. if(permit.location===true){
  142. // 可以调用定位能力
  143. this.updateLocation();
  144. }else if(permit.location===false){
  145. // 通过了隐私协议,但是定位被拒绝
  146. this.location.visible = true;
  147. this.updateLocation();
  148. }else if(permit.location===undefined){
  149. // 没有申请过定位能力
  150. this.updateLocation();
  151. }
  152. }
  153. if (options.hasOwnProperty('q') && options.q) {
  154. // 通过下面这步解码,可以拿到url的值
  155. const url = decodeURIComponent(options.q)
  156. // 对url中携带的参数提取处理
  157. console.log("url:"+url)
  158. var device_no = this.getQueryParams(url,"connectorCode")
  159. console.log("device_no:"+device_no)
  160. if(device_no){
  161. this.getDeviceInfo(device_no)
  162. }
  163. }
  164. // this.user_info=this.$app.storage.get('USER_INFO')
  165. },
  166. mounted() {
  167. this.setListHeight();
  168. this.setAppNavigationHeight();
  169. this.get_frimid()
  170. this.get_userinfo()
  171. },
  172. data() {
  173. return {
  174. user_info:{},
  175. // 导航栏高度
  176. appNavigationHeight: 0,
  177. // 页面滚动锁
  178. scrollLock: true,
  179. sorts:{
  180. index: 0,
  181. data: [{name:'离我最近',code:"range"},{name:'空闲最多',code:"device"},{name:'电费最低',code:"price"}]
  182. },
  183. list:{
  184. height: 0,
  185. data: []
  186. },
  187. banners:[],
  188. location:{
  189. visible: false,
  190. value: '',
  191. },
  192. privacy:{
  193. visible: false,
  194. },
  195. city:{
  196. index: 0,
  197. data:[
  198. {text:'贵阳',areaCode:"5201"},
  199. {text:'六盘水',areaCode:"5202"},
  200. {text:'遵义',areaCode:"5203"},
  201. {text:'安顺',areaCode:"5204"},
  202. {text:'毕节',areaCode:"5205"},
  203. {text:'铜仁',areaCode:"5206"},
  204. {text:'黔东南',areaCode:"5226"},
  205. {text:'黔南',areaCode:"5227"},
  206. {text:'黔西南',areaCode:"5223"},
  207. ]
  208. },
  209. discountInfo:null
  210. }
  211. },
  212. onShow() {
  213. this.getBanners()
  214. },
  215. computed:{
  216. StyleSheet(){
  217. return {
  218. '--app-navigation-heiht': `${this.appNavigationHeight}px`,
  219. '--list-heiht': `${this.list.height}px`
  220. }
  221. }
  222. },
  223. onShareAppMessage(res) {
  224. if (res.from === 'button') {
  225. // 来自页面内分享按钮
  226. console.log(res.target);
  227. }
  228. return {
  229. title: "用券充天天都享会员价", // 标题
  230. path: "/pages/index/index", // 分享路径
  231. imageUrl: '../../static/img/share.jpg', // 分享图
  232. desc: '用券充天天都享会员价'
  233. };
  234. },
  235. onShareTimeline() {
  236. return {
  237. title: "用券充天天都享会员价", // 标题
  238. path: "/pages/index/index", // 分享路径
  239. imageUrl: '../../static/img/share.jpg'// 分享图
  240. };
  241. },
  242. methods: {
  243. get_userinfo(){
  244. this.$api.base("post", "/userApi/getUserAccount", {}, {error:false}).then(res => {
  245. this.user_info = res.accountInfo
  246. this.$app.storage.set('USER_INFO', res.accountInfo);
  247. })
  248. },
  249. // 企业用户扫码进入
  250. get_frimid(){
  251. if(this.$app.storage.get('FRIM_ID')){
  252. if(this.$app.storage.get('USER_TOKEN')){
  253. this.$api.base("post","/userApi/add-firm-user?firmId="+parseInt(this.$app.storage.get('FRIM_ID')),{},{error: false}).then(res=>{
  254. this.$app.popup.alert(res.msg);
  255. this.get_userinfo()
  256. setTimeout(()=>{
  257. this.$app.storage.remove('FRIM_ID')
  258. },500)
  259. }).catch(err=>{
  260. this.$app.popup.alert(err.msg)
  261. setTimeout(()=>{
  262. this.$app.storage.remove('FRIM_ID')
  263. },500)
  264. })
  265. }else{
  266. uni.showModal({
  267. title:'未登录',
  268. content:'你还未进行登录,请去登录',
  269. showCancel:false,
  270. success:function(res) {
  271. if(res.confirm){
  272. uni.navigateTo({
  273. url:'/pages/login/login'
  274. })
  275. }
  276. }
  277. })
  278. }
  279. }
  280. },
  281. getDeviceInfo(sn){
  282. this.$api.base("post","/chargeApi/checkDevicesBySn",{"sn":sn},{}).then(res=>{
  283. var item = res.device;
  284. //设备状态 0:离网1:空闲2:占用(未充电)3:占用(充电中)4:占用(预约锁定)255:故障
  285. if(item.deviceStatus == 0 || item.deviceStatus == 255 ){
  286. return;
  287. }
  288. this.$app.url.goto('/pages/terminal/terminal?deviceId='+item.id+"&deviceStatus="+item.deviceStatus);
  289. })
  290. },
  291. getQueryParams(url,key) {
  292. const queryString = url.split('?')[1] || '';
  293. const params = {};
  294. const pairs = queryString.split('&');
  295. pairs.forEach(pair => {
  296. const [key, value] = pair.split('=');
  297. params[decodeURIComponent(key)] = decodeURIComponent(value || '');
  298. });
  299. return params[key];
  300. },
  301. showImg(img){
  302. return this.$config.url.request+img
  303. },
  304. // 打开客服
  305. customerService(){
  306. const cs = this.$config.customerService;
  307. this.$app.act.customerService(cs.id,cs.url).catch(err=>{
  308. console.log(err);
  309. this.$app.popup.alert('客服中心失联啦,请联系管理员!');
  310. });
  311. },
  312. // 查询许可
  313. queryPermit(){
  314. return new Promise((resolve,reject)=>{
  315. const data = {};
  316. const check = ()=>{
  317. if( Object.keys(data).length == 2 ) resolve(data);
  318. }
  319. if(uni.getPrivacySetting){
  320. uni.getPrivacySetting({
  321. success: res => {
  322. data.privacy = res.needAuthorization;
  323. },
  324. complete: () => {
  325. if(typeof data.privacy !='boolean' && typeof data.privacy !='undefined') data.privacy = null;
  326. check();
  327. },
  328. });
  329. }else{
  330. data.privacy = false;
  331. }
  332. uni.getSetting({
  333. success: res => {
  334. data.location = uni.getLocation ? res.authSetting['scope.userLocation'] : undefined;
  335. },
  336. complete: () => {
  337. if(typeof data.location !='boolean' && typeof data.location !='undefined') data.location = null;
  338. check();
  339. },
  340. })
  341. });
  342. },
  343. // 更新位置
  344. updateLocation(){
  345. this.getLocation().then(res=>{
  346. this.location.value = [res.longitude,res.latitude].join(',');
  347. this.getStations(res.longitude,res.latitude)
  348. this.$app.storage.set('USER_LOCATION',this.location.value);
  349. return this.reverseGeocoder([res.latitude,res.longitude].join(','))
  350. });
  351. },
  352. // 获取定位
  353. getLocation(){
  354. return new Promise((resolve,reject)=>{
  355. // this.loading.visible = true;
  356. if(uni.getLocation){
  357. uni.getLocation({
  358. success: res => resolve(res),
  359. fail: err => {
  360. console.log(err)
  361. console.log('定位失败');
  362. // this.location.visible = true;
  363. this.getStations("","")
  364. },
  365. complete: () => {
  366. }
  367. })
  368. }else{
  369. console.log('微信版本太低,无定位接口可用');
  370. resolve({longitude:'',latitude:''});
  371. }
  372. });
  373. },
  374. reverseGeocoder(latlon){
  375. console.log(latlon)
  376. let lat = latlon.split(",")[0]
  377. let lng = latlon.split(",")[1]
  378. let baiduLoc = this.convertGcj02ToBd09(lng,lat)
  379. latlon = baiduLoc.lat+","+baiduLoc.lng
  380. console.log(latlon)
  381. return new Promise((resolve,reject)=>{
  382. var BMap = new bmap.BMapWX({
  383. ak: 'vtQgaPzonb3H4qeUOWGr53ePcNCsmdMj'
  384. });
  385. BMap.regeocoding({
  386. location:latlon,
  387. success:res=>{
  388. let code = res.originalData.result.addressComponent.adcode.substr(0,4)
  389. for (var i = 0; i < this.city.data.length; i++) {
  390. if(this.city.data[i].areaCode==code){
  391. this.city.index = i
  392. break;
  393. }
  394. }
  395. console.log(res)
  396. },
  397. fail:err=>{
  398. console.log(err)
  399. }
  400. })
  401. });
  402. },
  403. getBanners(){
  404. this.$api.base("post","/userApi/getBanners",{},{}).then(res=>{
  405. this.banners = res.banners
  406. })
  407. },
  408. convertBdToTx(lng, lat) {
  409. // 百度坐标系(BD09)转火星坐标系(GCJ-02,即腾讯地图使用的坐标系)
  410. // 这里的转换公式是基于经验公式,可能存在一定的误差
  411. let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  412. let x = lng - 0.0065;
  413. let y = lat - 0.006;
  414. let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  415. let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  416. let lngs = z * Math.cos(theta);
  417. let lats = z * Math.sin(theta);
  418. return { lng: lngs, lat: lats };
  419. },
  420. getStations(lng,lat){
  421. this.$api.base("post","/chargeApi/getStations",{order:this.sorts.index,lat,lng},{}).then(res=>{
  422. res.stationList.forEach(i=>{
  423. var txPoint = this.convertBdToTx(i.lng,i.lat)
  424. i.lng = txPoint.lng
  425. i.lat = txPoint.lat
  426. })
  427. this.list.data = res.stationList
  428. if(res.discountInfo){
  429. this.discountInfo = res.discountInfo
  430. }
  431. })
  432. },
  433. // 设定导航栏高度
  434. setAppNavigationHeight(){
  435. this.$nextTick(()=>{
  436. uni.createSelectorQuery().in(this).select("#app-navigation").boundingClientRect(data=>{
  437. this.appNavigationHeight = data.height;
  438. }).exec();
  439. });
  440. },
  441. // 设置列表高度
  442. setListHeight(){
  443. this.$app.act.selectorQuery(this,"#list-box,#roller",true).then(res=>{
  444. const win = uni.getWindowInfo();
  445. const roller = res.find(i=>i.id=='roller');
  446. const list = res.find(i=>i.id=='list-box');
  447. this.list.height = win.windowHeight - list.top - this.appNavigationHeight + roller.height;
  448. });
  449. },
  450. // 版头加载完成
  451. bannerLoadCompleted(){
  452. this.setListHeight();
  453. },
  454. changeSort(index){
  455. this.sorts.index = index;
  456. switch(index){
  457. case 0:
  458. this.list.data.sort((a,b)=>a.params.range-b.params.range)
  459. break;
  460. case 1:
  461. this.list.data.sort((a,b)=>b.params.totalEmpty-a.params.totalEmpty)
  462. break;
  463. case 2:
  464. this.list.data.sort((a,b)=>a.params.nowPrice-b.params.nowPrice)
  465. break;
  466. }
  467. },
  468. scrolltolower(){
  469. console.log('到底')
  470. },
  471. gotoSiteDetail(item){
  472. this.$app.url.goto('/pages/site/site?item='+JSON.stringify(item));
  473. },
  474. // 确认隐私协议
  475. agreePrivacyAuthorization(){
  476. this.privacy.visible = false;
  477. this.updateLocation();
  478. },
  479. // 打开隐私协议
  480. openPrivacyContract(){
  481. uni.openPrivacyContract();
  482. },
  483. // 拒绝隐私协议
  484. refusePrivacy(){
  485. this.privacy.visible = false;
  486. },
  487. convertGcj02ToBd09(lng, lat) {
  488. const x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  489. const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_pi);
  490. const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_pi);
  491. const bd_lng = z * Math.cos(theta) + 0.0065;
  492. const bd_lat = z * Math.sin(theta) + 0.006;
  493. return {
  494. lng: bd_lng,
  495. lat: bd_lat
  496. };
  497. }
  498. }
  499. }
  500. </script>
  501. <style>
  502. @import url('index.css');
  503. .discount{
  504. flex: 1;
  505. text-align: right;
  506. padding-right: 5px;
  507. }
  508. .discount view{
  509. display: inline-flex;
  510. align-items: center;
  511. height: 22px;
  512. border: 1px solid #ccc;
  513. border-radius: 5px;
  514. font-size: 12px;
  515. color: #F59C79;
  516. padding: 0 7px;
  517. overflow: hidden;
  518. }
  519. </style>