map.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646
  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="search.openId=search.openId==-2?0:-2">
  8. <image style="width: 32rpx;height: 32rpx;" src="/static/icon/search02.png" mode=""></image>
  9. </view>
  10. <view class="search-area-all">
  11. <template v-for="(item, index) in search.content" >
  12. <view v-if="index<2" :class="search.openId!=item.id?'search-area':'search-areaClick'"
  13. :key="item.id" @click="openSelector(item.id)">
  14. <text>{{item.name}}</text>
  15. <image v-if="search.openId!=item.id" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
  16. mode="">
  17. </image>
  18. <image v-else style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
  19. mode="">
  20. </image>
  21. </view>
  22. </template>
  23. <view :class="search.openId!=-1?'search-area':'search-areaClick'" @click="openSelector(-1)">
  24. <text>更多筛选</text>
  25. <image v-if="search.openId!=-1" style="width: 16rpx;height: 10rpx;" src="/static/icon/down01.png"
  26. mode="">
  27. </image>
  28. <image v-else style="width: 16rpx;height: 10rpx;" src="/static/icon/up01.png"
  29. mode="">
  30. </image>
  31. </view>
  32. </view>
  33. <image @click="goJoin" style=" flex: none; width: 52rpx;height: 46rpx;" src="/static/icon/vip.png" mode=""></image>
  34. </view>
  35. <view class="search-detail" style="z-index:9" v-if="search.openId==-2">
  36. <u-input placeholder="输入酒店/城市名称搜索酒店" border='none' :value="search.text" @input="syncSearchInput">
  37. <template slot="suffix" style='margin-right:40rpx;'>
  38. <u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
  39. height="32rpx" @click="confirmSearch"></u-image>
  40. </template>
  41. </u-input>
  42. </view>
  43. <template v-for="(item, index) in search.content">
  44. <view :key="item.id" class="search-detail" style="z-index: 9;" v-if="search.openId == item.id">
  45. <view class="search-detail-area">
  46. <view :class="{areaTitle:true, on: search.selected.includes(v.id)}"
  47. v-for="(v,k) in item.sub"
  48. :key="v.id"
  49. @click="checked(v.id)">
  50. <view>
  51. {{v.name}}
  52. </view>
  53. </view>
  54. </view>
  55. <view class="search-detail-btn">
  56. <view class="search-detail-btn-left" @click="cancelSearch">
  57. <text>取消</text>
  58. </view>
  59. <view class="search-detail-btn-right" @click="confirmSearch">
  60. <text>确认</text>
  61. </view>
  62. </view>
  63. </view>
  64. </template>
  65. <!-- 筛选-->
  66. <view class="search-detail" style="z-index: 9;" v-if="search.openId==-1">
  67. <view class="partner">
  68. <template v-for="(item,index) in search.content">
  69. <view class="partner-top" v-if="index >= 2" @click="search.partner=item.id==search.partner?0:item.id" :key="item.id">
  70. <text>{{item.name}}</text>
  71. <image v-if="search.openId!=-1" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png"
  72. mode=""></image>
  73. <image v-else style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
  74. mode=""></image>
  75. </view>
  76. <view class="partner-main" v-if="search.partner==item.id">
  77. <uni-data-checkbox multiple
  78. :value="search.selected"
  79. @input="syncSelected"
  80. :localdata="item.sub"
  81. emptyText="无"
  82. :map="{text: 'name',value: 'id'}"
  83. />
  84. </view>
  85. </template>
  86. <view class="search-detail-btn">
  87. <view class="search-detail-btn-left" @click="cancelSearch">
  88. <text>取消</text>
  89. </view>
  90. <view class="search-detail-btn-right" @click="confirmSearch">
  91. <text>确认</text>
  92. </view>
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="address">
  98. <view style="height:1232rpx;">
  99. <hch-position ref="map" :markers="hotelList" @moveToMarkId="moveToMarkId"/>
  100. </view>
  101. <view class="address-nav" style="overflow-x: visible; height:318rpx;">
  102. <!-- 遮挡地图修正
  103. <view class="address-nav-btn">
  104. <view class="" @click="goLocation">
  105. <image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
  106. </view>
  107. <view class="" @click="goHotelList">
  108. <image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
  109. </view>
  110. </view>
  111. -->
  112. <view id="switch-container"
  113. style="width: 100%; overflow-x: scroll; display: none;align-items: center;justify-content: space-between;">
  114. </view>
  115. <!-- @scroll="bottomScroll" -->
  116. <scroll-view style="width: calc(100% + 16px);height:318rpx;white-space: nowrap;margin-left: -8px;z-index:10"
  117. @scrolltolower="scrollTolower"
  118. @scroll="bottomScroll"
  119. :scroll-x="true"
  120. :scroll-left="scrolls.scrollX"
  121. :scroll-with-animation="true"
  122. :show-scrollbar="false"
  123. >
  124. <view style="width: 8px;display: inline-block;"></view>
  125. <view class="address-detail" v-for="(item,index) in hotelList" :key="index">
  126. <view class="mark">
  127. <image style=""
  128. :src="item.bg_img" mode="aspectFill"></image>
  129. </view>
  130. <view class="inner">
  131. <view class="address-detail-main">
  132. <view class="address-detail-main-left">
  133. <text class="title">{{item.name}}</text>
  134. <view class="content" :style="{opacity: item.label?1:0}">
  135. <template v-if="item.label">
  136. <text v-for="(v,k) in item.label.split(',')" :key="k">{{v}}</text>
  137. </template>
  138. </view>
  139. <view class="bottom" :style="{opacity: item.min_price?1:0}">
  140. <text class="bottom-left">¥</text>
  141. <text class="bottom-right">{{item.min_price}}起</text>
  142. </view>
  143. </view>
  144. <view class="address-detail-main-right" @click="goBook(index)">
  145. <text>预订</text>
  146. </view>
  147. </view>
  148. <view class="address-detail-position">
  149. <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode="">
  150. </image>
  151. <text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
  152. </view>
  153. </view>
  154. </view>
  155. <view style="width: 1px;display: inline-block;"></view>
  156. </scroll-view>
  157. <view class="address-nav-button" @click="goLocation">
  158. <image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
  159. </view>
  160. <view class="address-nav-button" @click="goHotelList">
  161. <image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
  162. </view>
  163. </view>
  164. </view>
  165. <!-- 酒店列表 -->
  166. <view class="hotel-list" style="position: absolute;z-index:11;min-height:100%;padding-bottom: 80px;" v-if="!isShow">
  167. <view class="hotel-list-item" v-for="(item,index) in hotelList" :key="index" @click="goBook(item.id)">
  168. <view class="wrap">
  169. <view class="mark">
  170. <image style="width: 694rpx;height: 318rpx;border-radius: 10rpx;" :src="item.bg_img"
  171. mode=""></image>
  172. </view>
  173. <view class="inner">
  174. <view class="address-detail-main">
  175. <view class="address-detail-main-left">
  176. <text class="title">{{item.name}}</text>
  177. <view class="content" :style="{opacity: item.label?1:0}">
  178. <template v-if="item.label">
  179. <text v-for="(v,k) in item.label.split(',')" :key="k">{{v}}</text>
  180. </template>
  181. </view>
  182. <view class="bottom" :style="{opacity: item.min_price?1:0}">
  183. <text class="bottom-left">¥</text>
  184. <text class="bottom-right">{{item.min_price}}起</text>
  185. </view>
  186. </view>
  187. <view class="address-detail-main-right" @click.stop="goBook(index)">
  188. <text>预订</text>
  189. </view>
  190. </view>
  191. <view class="address-detail-position">
  192. <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode=""></image>
  193. <text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
  194. </view>
  195. </view>
  196. </view>
  197. </view>
  198. <!-- 触底 -->
  199. <view class="home-bottom">
  200. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
  201. </view>
  202. <view class="return-btn" @click="returnBtn">
  203. <image style="width: 132rpx;height: 132rpx;border-radius: 50%;" src="/static/icon/return01.png" mode="">
  204. </image>
  205. </view>
  206. </view>
  207. <view style="height: 110rpx;"></view>
  208. <tab-bar></tab-bar>
  209. </view>
  210. </template>
  211. <script>
  212. import TabBar from '../../components/TabBar/tabbar.vue'
  213. import HchPosition from '../../components/hch-position/hch-position.vue'
  214. import MyNav from "@/components/my-nav/my-nav.vue"
  215. export default {
  216. components: {
  217. TabBar,
  218. HchPosition,
  219. MyNav
  220. },
  221. data() {
  222. return {
  223. scrolls:{scrollX: 0},
  224. hotelList:[],
  225. hotelListBase:[],
  226. //门店在地图上的标记 以下字段必填
  227. markers: [],
  228. //经纬度
  229. latitude:'',
  230. longitude:'',
  231. //暂无数据
  232. status: 'noMore',
  233. contentText: {
  234. contentdown: '查看更多',
  235. contentrefresh: '加载中',
  236. contentnomore: '—— 已经到底啦 ——'
  237. },
  238. //是否展示地图
  239. isShow: true,
  240. value: [0],
  241. //搜索
  242. search:{
  243. content: {},
  244. text: "",
  245. openId:0,
  246. isSearch:false,
  247. selected:[],
  248. currentSelected:[],
  249. partner:0,
  250. checkedselected:[],
  251. },
  252. areaList: [],
  253. //激活指定table菜单
  254. isActive: 0,
  255. //展开搜索
  256. isopenSearch: false,
  257. //选择地区
  258. isSelectArea: true,
  259. //选择品牌
  260. isSelectBrand: true,
  261. //刷选
  262. isSelectSift: true,
  263. //是否展示合作伙伴
  264. isPartner: false,
  265. //是否展示加盟品牌
  266. isJoin: false,
  267. //滚动参数
  268. scrollData:{
  269. direct: -1,
  270. isScroll:false,
  271. spa: false,
  272. activeIndex:0
  273. },
  274. beginConfig:{
  275. hotel_id: 0
  276. }
  277. }
  278. },
  279. onShow() {
  280. this.admin = this.$store.getters.userInfo
  281. },
  282. onLoad(e) {
  283. const {hotel_id,category_ids} = e;
  284. this.beginConfig.hotel_id = hotel_id;
  285. if(category_ids){
  286. this.search.currentSelected = category_ids.split(",")
  287. this.search.selected = Object.assign(this.search.currentSelected)
  288. }
  289. //获取经纬度
  290. this.getHotelCategory()
  291. uni.getSystemInfo({
  292. success:(res)=>{
  293. this.screenWidth = res.screenWidth
  294. }
  295. })
  296. },
  297. methods: {
  298. syncSearchInput(e){
  299. this.search.text = e
  300. },
  301. syncSelected(e){
  302. if(this.search.checkedselected.length > e.length){
  303. const resArr = this.$utils.arrayDiff(this.search.checkedselected, e)
  304. const tempSet = new Set(this.search.selected);
  305. resArr.forEach(i=>{
  306. tempSet.delete(i)
  307. })
  308. this.search.selected = Array.from(tempSet);
  309. }else{
  310. this.search.selected = Array.from(new Set([...this.search.selected, ...e]));
  311. }
  312. this.search.checkedselected = e;
  313. console.log(this.search.selected)
  314. },
  315. checked(id) {
  316. if(this.search.selected.includes(id)){
  317. const tempSet = new Set(this.search.selected)
  318. tempSet.delete(id)
  319. this.search.selected = Array.from(tempSet)
  320. }else{
  321. this.search.selected.push(id)
  322. }
  323. },
  324. confirmSearch(){
  325. this.search.currentSelected = Object.assign(this.search.selected);
  326. this.getList();
  327. this.search.isSearch = true;
  328. this.search.openId = 0;
  329. },
  330. cancelSearch(){
  331. this.search.selected = Object.assign(this.search.currentSelected);
  332. this.search.openId = 0;
  333. },
  334. //打开选择器
  335. openSelector(id){
  336. if(this.search.openId == id){
  337. this.cancelSearch()
  338. }else{
  339. this.search.openId = id
  340. }
  341. },
  342. //获取筛选数据
  343. getHotelCategory(){
  344. this.$api.hotel.getHotelCategory().then(res=>{
  345. if(res.code !== 0) return;
  346. this.search.content = res.data;
  347. this.updated()
  348. })
  349. },
  350. goLocation(){
  351. let _this = this
  352. uni.getLocation({
  353. type: "gcj02", //返回可以用于wx.openLocation的经纬度
  354. success: function(res) {
  355. _this.latitude = res.latitude
  356. _this.longitude = res.longitude
  357. _this.$refs.map.goLocation(res.latitude,res.longitude)
  358. },
  359. fail: function(res) {
  360. console.log(res)
  361. }
  362. })
  363. },
  364. //在地图渲染更新完成时触发的方法
  365. updated() {
  366. let _this = this
  367. uni.getLocation({
  368. type: "gcj02", //返回可以用于wx.openLocation的经纬度
  369. success: function(res) {
  370. _this.latitude = res.latitude
  371. _this.longitude = res.longitude
  372. _this.getList(true)
  373. //获取酒店列表
  374. },
  375. fail: function(res) {
  376. }
  377. })
  378. },
  379. //-------------------------------------
  380. requestHotelPage(tempobj){
  381. tempobj.page = tempobj.page + 1;
  382. this.$api.hotel.getHotelList({
  383. ...tempobj,
  384. }).then(res => {
  385. const tempHotelList = res.data.data.map(item=>{
  386. item.logo = this.$utils.toHttps(item.logo);
  387. return {
  388. ...item,
  389. marker:{
  390. id:item.id,
  391. latitude: item.latitude,
  392. longitude: item.longitude,
  393. width:'34rpx',
  394. height:'40rpx',
  395. iconPath:'../../static/icon/late02.png' ,
  396. active: {
  397. width: '90rpx',
  398. height: '100rpx',
  399. iconPath: item.logo,
  400. },
  401. noActive:{
  402. width:'34rpx',
  403. height:'40rpx',
  404. iconPath:'../../static/icon/late02.png' ,
  405. },
  406. callout1: {
  407. content:item.name,
  408. borderRadius: 10,
  409. padding: 10,
  410. display: "ALWAYS",
  411. },
  412. }
  413. }
  414. this.hotelList.map(item=>{
  415. item.distanceToMe=this.$utils.calcDistance(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
  416. return item;
  417. })
  418. })
  419. this.hotelList.push(...tempHotelList)
  420. if(res.data.data.length >= 15){
  421. this.requestHotelPage(tempobj);
  422. }
  423. })
  424. },
  425. getList(islocal = false) {
  426. const tempobj = {type: 1,page: 1,};
  427. if(this.search.currentSelected.length){
  428. this.search.currentSelected.forEach((item,index) => {
  429. tempobj[`category_ids[${index}]`] = item
  430. })
  431. }
  432. if(this.latitude&&this.longitude){
  433. tempobj['latitude'] = this.latitude;
  434. tempobj['longitude'] = this.longitude;
  435. }
  436. if(this.search.text){
  437. tempobj['name'] = this.search.text;
  438. }
  439. this.$api.hotel.getHotelList({
  440. ...tempobj,
  441. }).then(res => {
  442. this.hotelList = res.data.data.map(item=>{
  443. item.logo = this.$utils.toHttps(item.logo);
  444. return {
  445. ...item,
  446. marker:{
  447. id:item.id,
  448. latitude: item.latitude,
  449. longitude: item.longitude,
  450. width:'34rpx',
  451. height:'40rpx',
  452. iconPath:'../../static/icon/late02.png' ,
  453. active: {
  454. width: '90rpx',
  455. height: '100rpx',
  456. iconPath: item.logo,
  457. },
  458. noActive:{
  459. width:'34rpx',
  460. height:'40rpx',
  461. iconPath:'../../static/icon/late02.png' ,
  462. },
  463. callout1: {
  464. content:item.name,
  465. borderRadius: 10,
  466. padding: 10,
  467. display: "ALWAYS",
  468. },
  469. }
  470. }
  471. })
  472. if(res.data.data.length <= 0) return;
  473. this.hotelList.map(item=>{
  474. item.distanceToMe=this.$utils.calcDistance(this.latitude,this.longitude,item.latitude,item.longitude).toFixed(1);
  475. return item;
  476. })
  477. // this.hotelList.sort((prev,next)=>{
  478. // return prev.distanceToMe-next.distanceToMe;
  479. // })
  480. if(islocal){
  481. this.$refs.map.goLocation(this.latitude,this.longitude)
  482. }
  483. setTimeout(()=>{
  484. if(!this.beginConfig.hotel_id){
  485. this.$refs.map.markertap({markerId: this.hotelList[0].id},true,this.search.isSearch)
  486. this.beginConfig.hotel_id = 0
  487. this.search.isSearch = false
  488. }else{
  489. this.localToMark(this.beginConfig.hotel_id);
  490. // this.$refs.map.markertap({markerId: this.beginConfig.hotel_id})
  491. this.beginConfig.hotel_id = 0
  492. }
  493. }, 300)
  494. if(res.data.data.length >= 15){
  495. this.requestHotelPage(tempobj)
  496. }
  497. })
  498. },
  499. //去预定页面
  500. goBook(index) {
  501. if(!this.$store.getters.userInfo){
  502. uni.navigateTo({
  503. url: '/pages/login/login'
  504. })
  505. return;
  506. }
  507. const hotel = this.hotelList[index];
  508. uni.navigateTo({
  509. url: `/pages/map/hotel-book/index?hotel_id=${hotel.id}&latitude=${hotel.latitude}&longitude=${hotel.longitude}&name=${hotel.name}&address=${hotel.address}`
  510. })
  511. },
  512. //返回上一级
  513. returnBtn() {
  514. this.isShow = !this.isShow
  515. },
  516. //打开酒店列表
  517. goHotelList() {
  518. this.isShow = !this.isShow
  519. },
  520. //是否展示加盟品牌
  521. selectJoin() {
  522. this.isJoin = !this.isJoin
  523. },
  524. //是否展示合作伙伴
  525. selectPartner() {
  526. this.isPartner = !this.isPartner
  527. },
  528. //合作伙伴刷选
  529. change(e) {
  530. },
  531. //展开筛选选择
  532. openSift() {
  533. this.isSelectSift = !this.isSelectSift
  534. },
  535. //下面酒店位移
  536. moveToMarkId(markId){
  537. this.hotelList.forEach((item,index) => {
  538. if(markId == item.id){
  539. this.scrollData.spa = true;
  540. this.scrolls.scrollX = (256 * index) - (this.screenWidth-256)/2 + 'px';
  541. setTimeout(()=>{
  542. this.scrollData.spa = false
  543. },500)
  544. return;
  545. }
  546. })
  547. },
  548. localToMark(markId){
  549. // this.moveToMarkId(markId)
  550. this.$refs.map.markertap({markerId: markId}, true)
  551. },
  552. bottomScroll(e){
  553. if(this.scrollData.spa) return;
  554. const moveX = e.detail.scrollLeft;
  555. this.scrollData.activeIndex = Math.floor((moveX + this.screenWidth) / 256) - 1;
  556. if(this.$refs.map.isActiveMarker == this.hotelList[this.scrollData.activeIndex].id) return;
  557. this.$refs.map.markertap({markerId: this.hotelList[this.scrollData.activeIndex].id}, false)
  558. this.scrollData.spa = true;
  559. setTimeout(()=>{
  560. this.scrollData.spa = false;
  561. }, 10)
  562. },
  563. moveToTabX(e){
  564. console.log(this.scrolls.scrollX)
  565. this.scrollData.spa = true;
  566. this.scrolls.scrollX = (256 * this.scrollData.activeIndex+1) - (this.screenWidth-256)/2 + 'px';
  567. console.log(this.scrolls.scrollX)
  568. setTimeout(()=>{
  569. this.scrollData.spa = false;
  570. }, 500)
  571. },
  572. scrollTolower(){
  573. this.$refs.map.markertap({markerId: this.hotelList[this.hotelList.length-1].id}, false)
  574. this.scrollData.spa = true;
  575. setTimeout(()=>{
  576. this.scrollData.spa = false;
  577. }, 10)
  578. },
  579. //获取当前页面路径
  580. getPageUrl() {
  581. const pages = getCurrentPages();
  582. console.log(pages,'--------->pages')
  583. if(pages.length==1){
  584. const currentPage = pages[0];
  585. let pageUrl = `/${currentPage.route}`;
  586. return pageUrl
  587. console.log('当前页面url:', pageUrl);
  588. }else{
  589. const currentPage = pages[pages.length - 1];
  590. let pageUrl = `/${currentPage.route}`;
  591. return pageUrl
  592. console.log('当前页面url:', pageUrl);
  593. }
  594. },
  595. // 跳转其他小程序
  596. goJoin() {
  597. let _this = this
  598. wx.navigateToMiniProgram({
  599. appId: 'wx255b58f0992b3c53', //appid
  600. path: 'newUIMain/enrollment/enrollment', //path
  601. extraData: { //参数
  602. foo: 'bar'
  603. },
  604. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  605. success(res) {
  606. let page = _this.getPageUrl()
  607. let user_id = ''
  608. if (_this.admin != null) {
  609. user_id = _this.admin.id
  610. } else {
  611. user_id = 0
  612. }
  613. console.log('成功', page)
  614. _this.$api.my.userMemberAdd({
  615. user_id,
  616. page,
  617. }).then(res => {
  618. console.log(res.data);
  619. })
  620. // 打开成功
  621. },
  622. fail(e) {
  623. console.log(e, '失败')
  624. }
  625. })
  626. },
  627. }
  628. }
  629. </script>
  630. <style lang="scss" src="./map.scss" scoped></style>