parkingLists.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
  1. <template>
  2. <view class="parking">
  3. <view class="loading" v-show="loading">
  4. <u-loadmore status="loading" icon-type="flower" :load-text="{ loading: '正在定位中...' }" />
  5. </view>
  6. <view class="parking-header">
  7. <u-search placeholder="搜索停车点" v-model="searchContent" :show-action="false" @change="searchInputChange">
  8. </u-search>
  9. <u-icon v-if="!searchContent && isShowSearchParking == false" class="icon" name="list" size="44"
  10. color="#ffffff" placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="listIconClick">
  11. </u-icon>
  12. <u-icon v-if="searchContent || isShowSearchParking == true" class="icon" name="close" size="36"
  13. color="#ffffff" placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="clearSearchInput">
  14. </u-icon>
  15. </view>
  16. <view class="parking-map">
  17. <map id="pagemap" style="width: 100%; height: calc(100vh - 240rpx)" :show-location="true"
  18. :latitude="latitude" :longitude="longitude" @markertap="markertap" :enable-traffic="true"
  19. :enable-zoom="true" :scale="scale" :markers="covers"></map>
  20. </view>
  21. <view class="address-box" :class="nearParkingObj.type == 'down' ? 'address-down' : 'address-up'"
  22. v-if="nearParkingFlag">
  23. <view class="address-box-down-icon" :class="{ 'up-icon': nearParkingObj.type === 'up' }" @click="pullDown">
  24. </view>
  25. <!-- tab -->
  26. <u-tabs :list="tabObj.tabList" :is-scroll="false" :current="tabObj.current" bg-color="transparent"
  27. @change="tabChange"></u-tabs>
  28. <scroll-view scroll-y class="address-box-scroll"
  29. :style="{ height: `calc(${nearParkingObj.height} - 164rpx)` }">
  30. <view class="address-box-list">
  31. <view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index"
  32. @click="positionAddress(item)">
  33. <view class="abli-header">
  34. <view class="abli-header-title">{{ item.roadName || item.parkName }} <text
  35. class="abli-header-subtitle">{{ item.areaName }}</text></view>
  36. <view class="abli-header-surplus">
  37. <view class="abli-header-surplus-left">
  38. 余位<text>{{ item.spaceIdle || item.surplusPlace }}</text></view>
  39. <template v-if="tabObj.current === 1">
  40. <view class="abli-header-surplus-right" @click.stop="createMonth(item)">办理包月</view>
  41. </template>
  42. <template v-else>
  43. <view class="abli-header-surplus-right" :class="{ disabled: !item.monthAmount }"
  44. @click.stop="createMonth(item)">办理包月</view>
  45. </template>
  46. </view>
  47. </view>
  48. <view class="abli-bottom">
  49. <view class="abli-bottom-left">
  50. <view class="abli-bottom-left-navigation"
  51. @click.stop="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
  52. <view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
  53. </view>
  54. <view class="abli-bottom-right" @click.stop="lookParkingRule(item)">收费规则</view>
  55. </view>
  56. </view>
  57. </view>
  58. </scroll-view>
  59. </view>
  60. <view class="parking-address-list" v-if="isShowSearchParking">
  61. <view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'"
  62. @click="clickSearchParking(item)">
  63. <view class="pali-left">
  64. <view>{{ item.roadName || item.parkName }}</view>
  65. <view>{{ item.areaName }}</view>
  66. </view>
  67. <view class="pali-right">
  68. <image src="../../static/img/distance-icon.png" mode=""
  69. @click.stop="navigation(item.latitude, item.longitude, item.areaName)"></image>
  70. <view>路线</view>
  71. </view>
  72. </view>
  73. </view>
  74. <u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
  75. <map id="map" hidden="true"></map>
  76. <u-toast ref="uToast" />
  77. </view>
  78. </template>
  79. <script>
  80. import {
  81. qqMapTransBMap
  82. } from '@/utils/mapTrans.js';
  83. export default {
  84. data() {
  85. return {
  86. tabObj: {
  87. current: 0,
  88. tabList: [{
  89. name: '路段'
  90. }, {
  91. name: '停车场'
  92. }],
  93. },
  94. searchContent: '',
  95. page_map: '',
  96. loading: false,
  97. latitude: 26.64969,
  98. longitude: 106.636453,
  99. scale: 16,
  100. currentPosition: {
  101. latitude: 26.64969,
  102. longitude: 106.636453
  103. },
  104. covers: [],
  105. // 附近列表是否显示
  106. nearParkingFlag: false,
  107. // 轮播选中
  108. swiperCurrent: 0,
  109. // 附近停车列表
  110. nearParkingList: [],
  111. // 是否显示停车场列表
  112. isShowSearchParking: false,
  113. // 搜索停车场列表
  114. searchParkingList: [],
  115. // 显示单个停车场数据
  116. isShowParkingDetail: false,
  117. // 单个停车场数据
  118. parkingDetailData: {},
  119. mapSelect: false,
  120. mapSelectList: [{
  121. value: '1',
  122. label: '腾讯地图'
  123. },
  124. {
  125. value: '2',
  126. label: '百度地图'
  127. },
  128. {
  129. value: '3',
  130. label: '高德地图'
  131. }
  132. ],
  133. // 选中位置经纬度
  134. currentPositionHover: {},
  135. nearParkingObj: {
  136. height: '60vh',
  137. type: 'down'
  138. }
  139. };
  140. },
  141. onLoad(page) {
  142. this.getLocation();
  143. if (page.keyword) {
  144. this.searchContent = page.keyword;
  145. this.searchInputChange(page.keyword);
  146. }
  147. },
  148. methods: {
  149. /**
  150. * 查询输入框发生变化
  151. * @date 2021-08-10
  152. * @param {String} value
  153. */
  154. searchInputChange(value) {
  155. // 为空时关闭搜索列表
  156. if (value === '') {
  157. this.isShowSearchParking = false;
  158. }
  159. this.isShowParkingDetail = false;
  160. const obj = {
  161. 0: 'getNearRoadsl',
  162. 1: 'getParkingLotList'
  163. }
  164. this[obj[this.tabObj.current]]()
  165. },
  166. /**
  167. * 获取定位
  168. * @date 2021-08-10
  169. * @returns {any}
  170. */
  171. getLocation() {
  172. const that = this;
  173. console.log('请求定位');
  174. // const obj = {
  175. // 0: 'getNearRoadsl',
  176. // 1: 'getParkingLotList'
  177. // }
  178. // this[obj[this.tabObj.current]]()
  179. that.loading = true;
  180. if (navigator.geolocation) {
  181. // 判断是否有这个对象
  182. navigator.geolocation.getCurrentPosition(function(pos) {
  183. console.log('经度:' + pos.coords.longitude + '纬度:' + pos.coords.latitude);
  184. that.latitude = pos.coords.latitude;
  185. that.longitude = pos.coords.longitude;
  186. that.currentPosition.latitude = pos.coords.latitude;
  187. that.currentPosition.longitude = pos.coords.longitude;
  188. that.loading = false;
  189. const obj = {
  190. 0: 'getNearRoadsl',
  191. 1: 'getParkingLotList'
  192. }
  193. that[obj[that.tabObj.current]]()
  194. });
  195. } else {
  196. this.$refs.uToast.show({
  197. title: '当前系统不支持GPS API',
  198. type: 'error'
  199. });
  200. }
  201. },
  202. /**
  203. * 导航
  204. * @date 2021-08-10
  205. * @param {Number} latitude
  206. * @param {Number} longitude
  207. * @returns {any}
  208. */
  209. navigation(latitude, longitude, areaName) {
  210. this.currentPositionHover = {
  211. latitude,
  212. longitude,
  213. areaName
  214. };
  215. this.mapSelect = true;
  216. },
  217. // 多地图选择
  218. mapSelectConfirm(item) {
  219. const name = item[0].label;
  220. switch (name) {
  221. case '腾讯地图':
  222. location.href =
  223. `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${this.currentPosition.longitude}&to=${this.currentPositionHover.areaName || item.parkName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
  224. break;
  225. case '百度地图':
  226. const lnglatObj = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover
  227. .latitude);
  228. location.href = `http://api.map.baidu.com/marker?location=
  229. ${lnglatObj.lat},${lnglatObj.lng}&title=目的地&content=${this.currentPositionHover.areaName || item.parkName}
  230. &output=html&src=webapp.baidu.openAPIdemo`;
  231. break;
  232. case '高德地图':
  233. location.href =
  234. `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName || item.parkName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
  235. break;
  236. }
  237. },
  238. /**
  239. * 清空搜索框内容
  240. * @date 2021-08-10
  241. * @returns {any}
  242. */
  243. clearSearchInput() {
  244. this.searchContent = '';
  245. this.isShowSearchParking = false;
  246. const obj = {
  247. 0: 'getNearRoadsl',
  248. 1: 'getParkingLotList'
  249. }
  250. this[obj[this.tabObj.current]]()
  251. },
  252. /**
  253. * 默认首个点放大 如果有传入经纬度则对应的点放大
  254. * @date 2021-08-10
  255. * @param {Number} lon
  256. * @param {Number} lat
  257. * @returns {any}
  258. */
  259. getNearRoadsl(lon, lat) {
  260. this.$u.api
  261. .nearRoadsl({
  262. latitude: this.currentPosition.latitude,
  263. longitude: this.currentPosition.longitude,
  264. roadName: this.searchContent
  265. })
  266. .then((res) => {
  267. const nearParkingList = []; // 附近停车场列表
  268. this.covers = [];
  269. res.data.forEach((item, index, arr) => {
  270. if (item.latitude && item.longitude) {
  271. nearParkingList.push(item);
  272. const marker = {
  273. latitude: item.latitude,
  274. longitude: item.longitude,
  275. id: String(index),
  276. iconPath: require('./../../static/img/parking-icon.png'),
  277. width: 20,
  278. height: 25
  279. };
  280. // 选中经纬度图标变大
  281. if (lon && lat) {
  282. if (lon === item.longitude && lat === item.latitude) {
  283. marker.width = 40;
  284. marker.height = 50;
  285. }
  286. } else {
  287. if (this.covers.length > 0) {
  288. this.covers[0].width = 40;
  289. this.covers[0].height = 50;
  290. }
  291. }
  292. this.covers.push(marker);
  293. }
  294. });
  295. this.nearParkingList = nearParkingList;
  296. if (nearParkingList.length > 0) {
  297. this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
  298. this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
  299. } else {
  300. this.$refs.uToast.show({
  301. title: '没有相关停车场信息',
  302. type: 'warning'
  303. });
  304. }
  305. this.nearParkingFlag = true;
  306. if (this.searchContent) {
  307. this.searchParkingList = nearParkingList;
  308. this.isShowSearchParking = true;
  309. this.nearParkingFlag = false;
  310. }
  311. })
  312. .catch((err) => {
  313. this.$refs.uToast.show({
  314. title: err.msg,
  315. type: 'error'
  316. });
  317. });
  318. },
  319. getParkingLotList(lon, lat) {
  320. this.$u.api
  321. .nearParkingLot({
  322. status: 1,
  323. latitude: this.currentPosition.latitude,
  324. longitude: this.currentPosition.longitude,
  325. parkName: this.searchContent
  326. })
  327. .then((res) => {
  328. const nearParkingList = []; // 附近停车场列表
  329. this.covers = [];
  330. res?.data?.rows.forEach((item, index, arr) => {
  331. if (item.latitude && item.longitude) {
  332. nearParkingList.push(item);
  333. const marker = {
  334. latitude: item.latitude,
  335. longitude: item.longitude,
  336. id: String(index),
  337. iconPath: require('./../../static/img/parking-icon.png'),
  338. width: 20,
  339. height: 25
  340. };
  341. // 选中经纬度图标变大
  342. if (lon && lat) {
  343. if (lon === item.longitude && lat === item.latitude) {
  344. marker.width = 40;
  345. marker.height = 50;
  346. }
  347. } else {
  348. if (this.covers.length > 0) {
  349. this.covers[0].width = 40;
  350. this.covers[0].height = 50;
  351. }
  352. }
  353. this.covers.push(marker);
  354. }
  355. });
  356. this.nearParkingList = nearParkingList;
  357. if (nearParkingList.length > 0) {
  358. this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
  359. this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
  360. } else {
  361. this.$refs.uToast.show({
  362. title: '没有相关停车场信息',
  363. type: 'warning'
  364. });
  365. }
  366. this.nearParkingFlag = true;
  367. if (this.searchContent) {
  368. this.searchParkingList = nearParkingList;
  369. this.isShowSearchParking = true;
  370. this.nearParkingFlag = false;
  371. }
  372. })
  373. .catch((err) => {
  374. this.$refs.uToast.show({
  375. title: err.msg,
  376. type: 'error'
  377. });
  378. });
  379. },
  380. /**
  381. * 点击地图上的标记点触发
  382. **/
  383. markertap(e) {
  384. let lon, lat;
  385. this.covers.forEach((item, index) => {
  386. if (e.detail.markerId === item.id) {
  387. lon = item.longitude;
  388. lat = item.latitude;
  389. this.swiperCurrent = index;
  390. }
  391. });
  392. const obj = {
  393. 0: 'getNearRoadsl',
  394. 1: 'getParkingLotList'
  395. }
  396. this[obj[this.tabObj.current]](lon, lat)
  397. },
  398. /**
  399. * 地址发生变化
  400. * @date 2021-08-10
  401. * @param {Object} item
  402. * @returns {any}
  403. */
  404. swiperChange(item) {
  405. const map = uni.createMapContext('pagemap');
  406. map.moveToLocation({
  407. longitude: this.nearParkingList[item.detail.current].longitude,
  408. latitude: this.nearParkingList[item.detail.current].latitude
  409. });
  410. const obj = {
  411. 0: 'getNearRoadsl',
  412. 1: 'getParkingLotList'
  413. }
  414. this[obj[this.tabObj.current]](this.nearParkingList[item.detail.current].longitude, this.nearParkingList[
  415. item.detail
  416. .current].latitude)
  417. },
  418. /**
  419. * 点击单个地址
  420. * @date 2022-08-31
  421. * @param {any} item
  422. * @returns {any}
  423. */
  424. positionAddress(item) {
  425. const map = uni.createMapContext('pagemap');
  426. map.moveToLocation({
  427. longitude: item.longitude,
  428. latitude: item.latitude
  429. });
  430. const obj = {
  431. 0: 'getNearRoadsl',
  432. 1: 'getParkingLotList'
  433. }
  434. this[obj[this.tabObj.current]](item.longitude, item.latitude)
  435. },
  436. /**
  437. * 点击单个停车场看详情
  438. * @date 2021-08-10
  439. * @param {Object} item 为选中项参数
  440. * @returns {any}
  441. */
  442. clickSearchParking(item) {
  443. if (item.monthAmount) {
  444. this.$u.route({
  445. url: 'pages/parkingInformation/parkingInformation',
  446. params: {
  447. roadInfo: JSON.stringify(item),
  448. longitude: this.currentPosition.longitude,
  449. latitude: this.currentPosition.latitude
  450. }
  451. });
  452. }
  453. },
  454. /**
  455. * 跳转停车标准页面
  456. * @date 2021-08-10
  457. * @param {Object} item
  458. * @returns {any}
  459. */
  460. lookParkingRule(item) {
  461. const obj = {
  462. 0: 'roadNo',
  463. 1: 'parkNo'
  464. }
  465. const params = {}
  466. params[obj[this.tabObj.current]] = item[obj[this.tabObj.current]]
  467. this.$u.route({
  468. url: 'pages/chargeStandard/chargeStandard',
  469. params
  470. });
  471. },
  472. /**
  473. * 搜索右侧按钮点击
  474. **/
  475. listIconClick() {
  476. this.isShowSearchParking = true;
  477. this.nearParkingFlag = false;
  478. this.searchParkingList = this.nearParkingList;
  479. },
  480. /**
  481. * 跳转包月
  482. * @date 2021-08-10
  483. * @param {Object} item
  484. * @returns {any}
  485. */
  486. createMonth(item) {
  487. const obj = {
  488. 0: 'roadNo',
  489. 1: 'parkNo'
  490. }
  491. const params = {}
  492. params[obj[this.tabObj.current]] = item[obj[this.tabObj.current]]
  493. this.$u.route({
  494. url: 'pages/handleMonthly/handleMonthly',
  495. params
  496. })
  497. },
  498. pullDown() {
  499. if (this.nearParkingObj.height === '20vh') {
  500. this.nearParkingObj.height = '60vh';
  501. this.nearParkingObj.type = 'down';
  502. } else {
  503. this.nearParkingObj.height = '20vh';
  504. this.nearParkingObj.type = 'up';
  505. }
  506. },
  507. /**
  508. * tab切换触发
  509. * @param {Object} val
  510. */
  511. tabChange(val) {
  512. this.tabObj.current = val
  513. const obj = {
  514. 0: 'getNearRoadsl',
  515. 1: 'getParkingLotList'
  516. }
  517. this[obj[val]]()
  518. }
  519. }
  520. };
  521. </script>
  522. <style lang="scss" scoped>
  523. .wrap {
  524. margin-top: 20vh;
  525. }
  526. @import './parkingLists.scss';
  527. </style>