map.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
  1. <template>
  2. <view class="map">
  3. <MyNav title="IHG地图" bgColor="" :backIcon="false"></MyNav>
  4. <!-- 查询 -->
  5. <view class="search" v-if="true">
  6. <view class="search-top" style="padding: 16rpx 30rpx 0rpx;margin-bottom: 20rpx;">
  7. <view class="search-loupe" @click="isopenSearch = !isopenSearch">
  8. <image style="width: 32rpx;height: 32rpx;" src="/static/icon/search02.png" mode=""></image>
  9. </view>
  10. <view class="search-area-all">
  11. <view :class="isSelectArea?'search-area':'search-areaClick'" @click="openArea">
  12. <text>地区</text>
  13. <image v-if="isSelectArea" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
  14. mode="">
  15. </image>
  16. <image v-if="!isSelectArea" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
  17. mode="">
  18. </image>
  19. </view>
  20. <view :class="isSelectBrand?'search-area':'search-areaClick'" @click="openBrand">
  21. <text>品牌</text>
  22. <image v-if="isSelectBrand" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
  23. mode="">
  24. </image>
  25. <image v-if="!isSelectBrand" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
  26. mode="">
  27. </image>
  28. </view>
  29. <view class="search-area" :class="isSelectSift?'search-area':'search-areaClick'" @click="openSift">
  30. <text>更多筛选</text>
  31. <image v-if="isSelectSift" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
  32. mode="">
  33. </image>
  34. <image v-if="!isSelectSift" style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
  35. mode="">
  36. </image>
  37. </view>
  38. </view>
  39. <image style=" flex: none; width: 52rpx;height: 46rpx;" src="/static/icon/vip.png" mode=""></image>
  40. </view>
  41. <view class="search-detail" v-if="isopenSearch">
  42. <u-input placeholder="输入酒店/城市名称搜索酒店" border='none'>
  43. <template slot="suffix" style='margin-right:40rpx;'>
  44. <u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
  45. height="32rpx"></u-image>
  46. </template>
  47. </u-input>
  48. </view>
  49. <!-- 选择地区 -->
  50. <view class="search-detail" v-if="!isSelectArea">
  51. <view class="search-detail-area">
  52. <view class="areaTitle" v-for="(item,index) in search.content.area" :key="item.id" @click="checked(item.id,'area')">
  53. <view :class="{'active-area':search.area === item.id}">
  54. {{item.name}}
  55. </view>
  56. </view>
  57. </view>
  58. <view class="search-detail-btn">
  59. <view class="search-detail-btn-left">
  60. <text>取消</text>
  61. </view>
  62. <view class="search-detail-btn-right">
  63. <text>确认</text>
  64. </view>
  65. </view>
  66. </view>
  67. <!-- 选择品牌-->
  68. <view class="search-detail" v-if="!isSelectBrand">
  69. <view class="search-detail-area">
  70. <view class="areaTitle" v-for="(item,index) in search.content.brand" :key="item.id" @click="checked(item.id,'brand')">
  71. <view :class="{'active-area':search.brand === item.id}">
  72. {{item.name}}
  73. </view>
  74. </view>
  75. </view>
  76. <view class="search-detail-btn">
  77. <view class="search-detail-btn-left">
  78. <text>取消</text>
  79. </view>
  80. <view class="search-detail-btn-right">
  81. <text>确认</text>
  82. </view>
  83. </view>
  84. </view>
  85. <!-- 筛选-->
  86. <view class="search-detail" v-if="!isSelectSift">
  87. <view class="partner">
  88. <view class="partner-top" @click="selectPartner">
  89. <text>合作伙伴</text>
  90. <image v-if="isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png"
  91. mode=""></image>
  92. <image v-if="!isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
  93. mode=""></image>
  94. </view>
  95. <view class="partner-main" v-if="isPartner">
  96. <uni-data-checkbox multiple
  97. v-model="value"
  98. :localdata="search.content.coop"
  99. emptyText="无"
  100. :map="{text: 'name',value: 'name'}"
  101. @change="change"
  102. />
  103. </view>
  104. <view class="partner-top" style="border-top: none;" @click="selectJoin">
  105. <text>加盟品牌</text>
  106. <image v-if="isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png" mode="">
  107. </image>
  108. <image v-if="!isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
  109. mode=""></image>
  110. </view>
  111. <view class="partner-main" v-if="isJoin">
  112. <uni-data-checkbox multiple
  113. v-model="value"
  114. :localdata="search.content.league"
  115. emptyText="无"
  116. :map="{text: 'name',value: 'name'}"
  117. @change="change"
  118. />
  119. </view>
  120. <view class="search-detail-btn">
  121. <view class="search-detail-btn-left">
  122. <text>取消</text>
  123. </view>
  124. <view class="search-detail-btn-right">
  125. <text>确认</text>
  126. </view>
  127. </view>
  128. </view>
  129. </view>
  130. </view>
  131. <view class="address">
  132. <view style="height:1232rpx;">
  133. <hch-position ref="map" :markers="hotelList" @moveToMarkId="moveToMarkId"/>
  134. </view>
  135. <view class="address-nav" style="overflow-x: visible; height:318rpx;">
  136. <!-- 遮挡地图修正
  137. <view class="address-nav-btn">
  138. <view class="" @click="goLocation">
  139. <image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
  140. </view>
  141. <view class="" @click="goHotelList">
  142. <image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
  143. </view>
  144. </view>
  145. -->
  146. <view id="switch-container"
  147. style="width: 100%; overflow-x: scroll; display: none;align-items: center;justify-content: space-between;">
  148. </view>
  149. <scroll-view style="width: calc(100% + 16px);height:318rpx;white-space: nowrap;margin-left: -8px;"
  150. @scroll="bottomScroll" @scrolltolower="scrollTolower"
  151. :scroll-x="true" :scroll-left="scrolls.scrollX" :scroll-with-animation="true">
  152. <view style="width: 8px;display: inline-block;"></view>
  153. <view class="address-detail" v-for="(item,index) in hotelList" :key="index">
  154. <view class="mark">
  155. <image style=""
  156. :src="item.bg_img" mode="aspectFill"></image>
  157. </view>
  158. <view class="inner">
  159. <view class="address-detail-main">
  160. <view class="address-detail-main-left">
  161. <text class="title">{{item.name}}</text>
  162. <view class="content">
  163. <text>{{item.label}}</text>
  164. </view>
  165. <view class="bottom" v-if="item.min_price">
  166. <text class="bottom-left">¥</text>
  167. <text class="bottom-right">{{item.min_price}}起</text>
  168. </view>
  169. </view>
  170. <view class="address-detail-main-right" @click="goBook(index)">
  171. <text>预订</text>
  172. </view>
  173. </view>
  174. <view class="address-detail-position">
  175. <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode="">
  176. </image>
  177. <text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
  178. </view>
  179. </view>
  180. </view>
  181. <view style="width: 1px;display: inline-block;"></view>
  182. </scroll-view>
  183. <view class="address-nav-button" @click="goLocation">
  184. <image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
  185. </view>
  186. <view class="address-nav-button" @click="goHotelList">
  187. <image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
  188. </view>
  189. </view>
  190. </view>
  191. <!-- 酒店列表 -->
  192. <view class="hotel-list" style="position: absolute;" v-if="!isShow">
  193. <view class="hotel-list-item" v-for="(item,index) in hotelList" :key="index" @click="goBook(item.id)">
  194. <view class="wrap">
  195. <view class="mark">
  196. <image style="width: 694rpx;height: 318rpx;border-radius: 10rpx;" :src="item.bg_img"
  197. mode=""></image>
  198. </view>
  199. <view class="inner">
  200. <view class="address-detail-main">
  201. <view class="address-detail-main-left">
  202. <text class="title">{{item.name}}</text>
  203. <view class="content">
  204. <text>{{item.label}}</text>
  205. </view>
  206. <view class="bottom" v-if="item.min_price">
  207. <text class="bottom-left">¥</text>
  208. <text class="bottom-right">{{item.min_price}}起</text>
  209. </view>
  210. </view>
  211. <view class="address-detail-main-right" @click.stop="goBook(index)">
  212. <text>预订</text>
  213. </view>
  214. </view>
  215. <view class="address-detail-position">
  216. <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode=""></image>
  217. <text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
  218. </view>
  219. </view>
  220. </view>
  221. </view>
  222. <!-- 触底 -->
  223. <view class="home-bottom">
  224. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
  225. </view>
  226. <view class="return-btn" @click="returnBtn">
  227. <image style="width: 132rpx;height: 132rpx;border-radius: 50%;" src="/static/icon/return01.png" mode="">
  228. </image>
  229. </view>
  230. </view>
  231. <view style="height: 110rpx;"></view>
  232. <tab-bar></tab-bar>
  233. </view>
  234. </template>
  235. <script>
  236. import TabBar from '../../components/TabBar/tabbar.vue'
  237. import HchPosition from '../../components/hch-position/hch-position.vue'
  238. import MyNav from "@/components/my-nav/my-nav.vue"
  239. export default {
  240. components: {
  241. TabBar,
  242. HchPosition,
  243. MyNav
  244. },
  245. data() {
  246. return {
  247. scrolls:{scrollX: 0},
  248. hotelList:[],
  249. hotelListBase:[],
  250. //门店在地图上的标记 以下字段必填
  251. markers: [],
  252. //经纬度
  253. latitude:'',
  254. longitude:'',
  255. //暂无数据
  256. status: 'noMore',
  257. contentText: {
  258. contentdown: '查看更多',
  259. contentrefresh: '加载中',
  260. contentnomore: '—— 已经到底啦 ——'
  261. },
  262. //是否展示地图
  263. isShow: true,
  264. value: [0],
  265. //合作伙伴
  266. partner: [{
  267. text: '足球',
  268. value: 0
  269. }, {
  270. text: '篮球',
  271. value: 1
  272. }, {
  273. text: '游泳',
  274. value: 2
  275. }, {
  276. text: '游泳',
  277. value: 3
  278. }, {
  279. text: '游泳',
  280. value: 4
  281. }, {
  282. text: '游泳',
  283. value: 5
  284. }, {
  285. text: '游泳',
  286. value: 6
  287. }, {
  288. text: '游泳',
  289. value: 7
  290. }, ],
  291. //品牌
  292. brandList: [{
  293. title: '谷歌'
  294. }, {
  295. title: '微软'
  296. }, {
  297. title: 'iphone'
  298. }, {
  299. title: '新希望'
  300. }, {
  301. title: '三江重工'
  302. }, {
  303. title: 'JavaScript'
  304. }],
  305. //地区
  306. search:{
  307. area: "",
  308. brand: "",
  309. coop: [],
  310. league: [],
  311. isActiveIds:[3,26],
  312. content: {
  313. area: [],
  314. brand: [],
  315. coop: [],
  316. league: [],
  317. }
  318. },
  319. areaList: [],
  320. //激活指定table菜单
  321. isActive: 0,
  322. //展开搜索
  323. isopenSearch: false,
  324. //选择地区
  325. isSelectArea: true,
  326. //选择品牌
  327. isSelectBrand: true,
  328. //刷选
  329. isSelectSift: true,
  330. //是否展示合作伙伴
  331. isPartner: false,
  332. //是否展示加盟品牌
  333. isJoin: false,
  334. //滚动参数
  335. scrollData:{
  336. spa: false
  337. },
  338. }
  339. },
  340. onLoad() {
  341. //获取经纬度
  342. this.updated()
  343. this.getHotelCategory()
  344. uni.getSystemInfo({
  345. success:(res)=>{
  346. this.screenWidth = res.screenWidth
  347. }
  348. })
  349. },
  350. methods: {
  351. //获取筛选数据
  352. getHotelCategory(){
  353. this.$api.hotel.getHotelCategory().then(res=>{
  354. if(res.code !== 0) return;
  355. this.search.content.area = res.data[0]?.sub;
  356. this.search.content.brand = res.data[1]?.sub;
  357. this.search.content.coop = res.data[2]?.sub;
  358. })
  359. },
  360. goLocation(){
  361. let _this = this
  362. uni.getLocation({
  363. type: "gcj02", //返回可以用于wx.openLocation的经纬度
  364. success: function(res) {
  365. _this.latitude = res.latitude
  366. _this.longitude = res.longitude
  367. _this.$refs.map.goLocation(res.latitude,res.longitude)
  368. // //获取酒店列表
  369. // _this.getList()
  370. },
  371. fail: function(res) {
  372. console.log(res)
  373. }
  374. })
  375. },
  376. //在地图渲染更新完成时触发的方法
  377. updated() {
  378. let _this = this
  379. uni.getLocation({
  380. type: "gcj02", //返回可以用于wx.openLocation的经纬度
  381. success: function(res) {
  382. _this.latitude = res.latitude
  383. _this.longitude = res.longitude
  384. _this.$refs.map.goLocation(res.latitude,res.longitude)
  385. //获取酒店列表
  386. _this.getList()
  387. },
  388. fail: function(res) {
  389. }
  390. })
  391. },
  392. space(lat1, lng1, lat2, lng2) {
  393. var radLat1 = lat1 * Math.PI / 180.0;
  394. var radLat2 = lat2 * Math.PI / 180.0;
  395. var a = radLat1 - radLat2;
  396. var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
  397. var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
  398. Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  399. s = s * 6378.137;
  400. s = Math.round(s * 10000) / 10000;
  401. return s // 单位千米
  402. },
  403. //-------------------------------------
  404. getList() {
  405. this.$api.hotel.getHotelList({
  406. page: 1
  407. }).then(res => {
  408. this.hotelList = res.data.data.map(item=>{
  409. return {
  410. ...item,
  411. marker:{
  412. id:item.id,
  413. latitude: item.latitude,
  414. longitude: item.longitude,
  415. width:'34rpx',
  416. height:'40rpx',
  417. iconPath:'../../static/icon/late02.png' ,
  418. active: {
  419. width: '90rpx',
  420. height: '100rpx',
  421. iconPath: item.logo,
  422. },
  423. noActive:{
  424. width:'34rpx',
  425. height:'40rpx',
  426. iconPath:'../../static/icon/late02.png' ,
  427. },
  428. callout1: {
  429. content:item.name,
  430. borderRadius: 10,
  431. padding: 10,
  432. display: "ALWAYS",
  433. },
  434. }
  435. }
  436. })
  437. this.hotelList.map(item=>{
  438. item.distanceToMe=this.space(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
  439. return item;
  440. })
  441. this.hotelList.sort((prev,next)=>{
  442. return prev.distanceToMe-next.distanceToMe;
  443. })
  444. console.log(this.hotelList[0].id)
  445. setTimeout(()=>{
  446. this.$refs.map.markertap({markerId: this.hotelList[0].id})
  447. }, 300)
  448. })
  449. },
  450. //去预定页面
  451. goBook(index) {
  452. if(!this.$store.getters.userInfo){
  453. uni.navigateTo({
  454. url: '/pages/login/login'
  455. })
  456. }
  457. const hotel = this.hotelList[index];
  458. uni.navigateTo({
  459. url: `/pages/map/hotel-book/index?hotel_id=${hotel.id}&latitude=${hotel.latitude}&longitude=${hotel.longitude}&name=${hotel.name}&address=${hotel.address}`
  460. })
  461. },
  462. //返回上一级
  463. returnBtn() {
  464. this.isShow = !this.isShow
  465. },
  466. //打开酒店列表
  467. goHotelList() {
  468. this.isShow = !this.isShow
  469. },
  470. //是否展示加盟品牌
  471. selectJoin() {
  472. this.isJoin = !this.isJoin
  473. },
  474. //是否展示合作伙伴
  475. selectPartner() {
  476. this.isPartner = !this.isPartner
  477. },
  478. //合作伙伴刷选
  479. change(e) {
  480. },
  481. //菜单index切换
  482. checked(id,categoreName) {
  483. const tempSet = new Set(this.search.isActiveIds);
  484. tempSet.add(id);
  485. this.search[categoreName] = id;
  486. this.search.isActiveIds = Object.assign(Array.from(tempSet));
  487. },
  488. //展开地区选择
  489. openArea() {
  490. this.isSelectArea = !this.isSelectArea
  491. this.isSelectBrand = true
  492. this.isSelectSift = true
  493. },
  494. //展开品牌选择
  495. openBrand() {
  496. this.isSelectBrand = !this.isSelectBrand
  497. this.isSelectArea = true
  498. this.isSelectSift = true
  499. },
  500. //展开筛选选择
  501. openSift() {
  502. this.isSelectSift = !this.isSelectSift
  503. this.isSelectBrand = true
  504. this.isSelectArea = true
  505. },
  506. //下面酒店位移
  507. moveToMarkId(markId){
  508. this.hotelList.forEach((item,index) => {
  509. if(markId == item.id){
  510. this.scrollData.spa = true;
  511. this.scrolls.scrollX = (256 * index) - (this.screenWidth-256)/2 + 'px';
  512. setTimeout(()=>{
  513. this.scrollData.spa = false
  514. },500)
  515. return;
  516. }
  517. })
  518. },
  519. bottomScroll(e){
  520. if(this.scrollData.spa) return;
  521. const moveX = e.detail.scrollLeft;
  522. const index = Math.floor((moveX + this.screenWidth) / 256) - 1;
  523. if(this.$refs.map.isActiveMarker == this.hotelList[index].id) return;
  524. this.$refs.map.markertap({markerId: this.hotelList[index].id}, false)
  525. this.scrollData.spa = true;
  526. setTimeout(()=>{
  527. this.scrollData.spa = false;
  528. }, 10)
  529. },
  530. scrollTolower(){
  531. this.$refs.map.markertap({markerId: this.hotelList[this.hotelList.length-1].id}, false)
  532. this.scrollData.spa = true;
  533. setTimeout(()=>{
  534. this.scrollData.spa = false;
  535. }, 10)
  536. }
  537. }
  538. }
  539. </script>
  540. <style lang="scss" src="./map.scss" scoped></style>