index.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. <template>
  2. <view class="content">
  3. <view class="pofMap">
  4. <view :hidden="!isHide">
  5. <map class="map" scale="16" :latitude="Number(lat)" :longitude="Number(lng)" :markers="list"
  6. @markertap="bindMarker"></map>
  7. </view>
  8. <view class="put-away flex-center" @click="bindPut">
  9. {{!isHide?'打开地图':'收起地图'}}
  10. <image src="../static/images/down.png" class="putImg" :class="!isHide?'putImgAct':''"></image>
  11. </view>
  12. </view>
  13. <!-- <view class="hg572"></view> -->
  14. <scroll-view scroll-y="true" class="scrollview" :class="!isHide?'scrollview1':''" :scroll-top="scrollTop">
  15. <view class="" style="height: 20rpx;">
  16. </view>
  17. <no-none v-if="list.length<=0"></no-none>
  18. <block v-else>
  19. <view class="item" :class="index==act_index?'act':''" v-for="(item,index) of list" :key='index'
  20. @click="bindStore(index,item.id)">
  21. <view class="box-pack-between">
  22. <view class="flex-grow-1">
  23. <view class="title">
  24. {{item.title}}
  25. </view>
  26. <view class="address flex-y-center">
  27. <text class="iconfont icon-dizhi"></text>{{item.address}}
  28. </view>
  29. </view>
  30. <view class="flex-grow-0">
  31. <image class="item-logo" :src=" item.thumb? URL+item.thumb:'../../static/avatar_def.png'">
  32. </image>
  33. </view>
  34. </view>
  35. <view class="distance box-pack-between">
  36. <text>距你{{item.juli}}公里</text>
  37. <view class="Navigation" @click.stop="getNavigation(item)">
  38. <text class="iconfont icon-icon-test"></text>
  39. 导航到店
  40. </view>
  41. </view>
  42. </view>
  43. </block>
  44. </scroll-view>
  45. <block v-if="is_auth">
  46. <view class="model"></view>
  47. <view class="model flex-center">
  48. <view class="model_cotent">
  49. <view class="model_cotent_title">地理位置未授权</view>
  50. <view class="model_cotent_qd">需要您授权打开手机中的定位授权</view>
  51. <view class="flex">
  52. <view class="flex-grow-1 flex-center model_cotent_right" @click="cancel">
  53. 取消
  54. </view>
  55. <button class="model_cotent_shezhi flex-grow-1" @click="openSetting">去授权</button>
  56. </view>
  57. </view>
  58. </view>
  59. </block>
  60. <view class="hg130">
  61. </view>
  62. <view class="store-btn flex-center" @click="getStore">
  63. <view class="flex-center">
  64. 进入门店
  65. </view>
  66. </view>
  67. </view>
  68. </template>
  69. <script>
  70. import {
  71. mapState,
  72. mapGetters,
  73. mapMutations
  74. } from 'vuex'
  75. export default {
  76. data() {
  77. return {
  78. Putname: '',
  79. markers: [],
  80. lat: '',
  81. lng: '',
  82. setColor: "",
  83. URL: getApp().globalData.URL,
  84. is_auth: false,
  85. systemInfo: {},
  86. isHide: true,
  87. scrollTop: 0,
  88. list: [],
  89. act_index: null,
  90. }
  91. },
  92. onLoad() {
  93. // #ifdef H5
  94. this.is_auth = false;
  95. let latitude=31.11325;
  96. let longitude=121.38206
  97. this.shop(latitude, longitude);
  98. // #endif
  99. // #ifdef MP-WEIXIN
  100. this.getLocation();
  101. // #endif
  102. this.systemInfo = uni.getStorageSync('systemInfo');
  103. uni.setNavigationBarColor({
  104. frontColor: '#ffffff',
  105. backgroundColor: this.$store.state.color,
  106. })
  107. },
  108. onShareAppMessage(e) {
  109. return {}
  110. },
  111. methods: {
  112. getStore(e) {
  113. console.log(this.list);
  114. let store_id = this.list[this.act_index].store_id;
  115. this.$store.commit('SET_STORE_ID', store_id)
  116. this.$store.commit('SET_TEEN_INDEX', 1) //重置默认
  117. this.$store.commit('SET_TABLE_ID', "")
  118. this.$store.commit('SET_CATE_ID', '')
  119. this.$store.dispatch('getSystemStup', store_id);
  120. this.$store.dispatch('getOpenid', store_id);
  121. uni.switchTab({
  122. url: "/pages/index/index"
  123. })
  124. },
  125. getNavigation({
  126. latitude,
  127. longitude,
  128. title,
  129. address,
  130. }) {
  131. uni.openLocation({
  132. latitude: Number(latitude),
  133. longitude: Number(longitude),
  134. address: address,
  135. name: title,
  136. success: function() {
  137. console.log('success');
  138. },
  139. });
  140. },
  141. bindStore(index, id) {
  142. this.act_index = index;
  143. this.list.forEach((i) => {
  144. i.width = 40
  145. i.height = 50
  146. });
  147. let obj = this.list.find((v, i) => v.id === id);
  148. console.log(obj);
  149. this.lat = obj.latitude;
  150. this.lng = obj.longitude;
  151. this.list[index].width = 50;
  152. this.list[index].height = 60;
  153. },
  154. bindMarker(e) {
  155. let act_index = this.list.findIndex(item => item.id === e.detail.markerId);
  156. this.scrollTop = act_index * 100;
  157. this.act_index = act_index;
  158. },
  159. bindPut(e) {
  160. this.isHide = !this.isHide;
  161. },
  162. getLocation(e) {
  163. // let markers = [];
  164. uni.getLocation({
  165. type: 'gcj02',
  166. success: (res) => {
  167. console.log('getLocation', res);
  168. // this.lat = res.latitude;
  169. // this.lng = res.longitude;
  170. this.is_auth = false;
  171. // markers.push({
  172. // id: 1,
  173. // latitude: res.latitude,
  174. // longitude: res.longitude,
  175. // title: "res.data.title",
  176. // iconPath: "../static/images/storeIcon.png",
  177. // width: 40,
  178. // height: 50,
  179. // });
  180. // this.markers = markers;
  181. this.shop(res.latitude, res.longitude);
  182. },
  183. fail: (err) => {
  184. console.log(err, "err")
  185. if (err.errMsg === "getLocation:fail auth deny" ||
  186. err.errMsg === "getLocation:fail auth deny" || err.errMsg ===
  187. "getLocation:fail authorize no response") {
  188. this.is_auth = true
  189. }
  190. }
  191. });
  192. },
  193. shop(lat, lng) {
  194. this.$http.request('xcx/Accessory_store', {
  195. store_id: this.$store.state.store_id,
  196. lat: lat,
  197. lng: lng,
  198. }, "", "", false).then(res => {
  199. if (res.code == '200' && res.data.length > 0) {
  200. this.lat = res.data[0].lat;
  201. this.lng = res.data[0].lng;
  202. for (let i of res.data) {
  203. this.list.push({
  204. id: i.id,
  205. latitude: i.lat,
  206. longitude: i.lng,
  207. title: i.title,
  208. iconPath: "/shop/static/images/storeIcon.png",
  209. width: 40,
  210. height: 50,
  211. store_id: i.id,
  212. address: i.address,
  213. thumb: i.thumb,
  214. juli: i.juli,
  215. // label:{
  216. // borderRadius:20,
  217. // bgColor:"#fff",textAlign:'center',
  218. // padding:6,
  219. // content: i.title,color:'#000'
  220. // }
  221. })
  222. }
  223. } else {
  224. this.isHide = false
  225. }
  226. }).catch(err => {})
  227. },
  228. cancel() {
  229. uni.navigateBack({
  230. delta: 1
  231. })
  232. },
  233. openSetting(e) {
  234. uni.openSetting({
  235. success: (settingdata) => {
  236. console.log("settingdata", settingdata)
  237. if (settingdata.authSetting['scope.userLocation']) {
  238. this.getLocation();
  239. } else {
  240. uni.showModal({
  241. title: '提示',
  242. content: '获取权限失败,将无法进定位哦~',
  243. showCancel: false,
  244. })
  245. }
  246. },
  247. fail(failData) {
  248. console.log("failData", failData);
  249. },
  250. complete(finishData) {
  251. console.log("finishData", finishData);
  252. }
  253. })
  254. },
  255. }
  256. }
  257. </script>
  258. <style>
  259. page {
  260. width: 100%;
  261. background-color: #F1F1F1;
  262. }
  263. .pofMap {}
  264. .scrollview {
  265. height: calc(100vh - 705rpx);
  266. }
  267. page .scrollview1 {
  268. height: calc(100vh - 205rpx);
  269. }
  270. .hg130 {
  271. height: 130rpx;
  272. }
  273. .hg572 {
  274. height: 590rpx;
  275. }
  276. .putImgAct {
  277. transform: rotate(180deg);
  278. }
  279. .map {
  280. height: 500rpx;
  281. width: 100%;
  282. }
  283. .put-away {
  284. width: 100%;
  285. height: 72rpx;
  286. background: #ffffff;
  287. font-size: 24rpx;
  288. font-family: PingFang SC, PingFang SC-Regular;
  289. font-weight: 400;
  290. text-align: center;
  291. color: #666666;
  292. }
  293. .putImg {
  294. width: 20rpx;
  295. height: 10rpx;
  296. margin-left: 4rpx;
  297. }
  298. .item {
  299. width: 700rpx;
  300. padding: 30rpx 24rpx;
  301. background: #ffffff;
  302. border-radius: 12rpx;
  303. box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.24);
  304. margin: 0 auto;
  305. margin-bottom: 30rpx;
  306. }
  307. .item.act {
  308. box-shadow: 0px 8rpx 20rpx 0px rgba(252, 140, 4, 0.24);
  309. border: 3rpx solid #fc8c04;
  310. }
  311. .item .title {
  312. font-size: 32rpx;
  313. font-family: PingFang SC, PingFang SC-Medium;
  314. font-weight: 500;
  315. text-align: left;
  316. color: #333333;
  317. }
  318. .item .address {
  319. font-size: 24rpx;
  320. font-family: PingFang SC, PingFang SC-Medium;
  321. font-weight: 500;
  322. text-align: left;
  323. color: #999999;
  324. padding: 16rpx 0;
  325. }
  326. .item .distance {
  327. font-size: 24rpx;
  328. font-family: PingFang SC, PingFang SC-Regular;
  329. font-weight: 400;
  330. color: #fc8e09;
  331. }
  332. .item-logo {
  333. width: 94rpx;
  334. height: 94rpx;
  335. }
  336. .item .Navigation {
  337. font-size: 24rpx;
  338. font-family: PingFang SC, PingFang SC-Medium;
  339. font-weight: 500;
  340. color: #fc8c04;
  341. }
  342. .item .icon-icon-test {
  343. font-size: 22rpx;
  344. margin-right: 10rpx;
  345. }
  346. .store-btn {
  347. position: fixed;
  348. bottom: 0;
  349. width: 100%;
  350. height: 130rpx;
  351. background: #ffffff;
  352. box-shadow: 0px -10rpx 20rpx 0px rgba(195, 202, 213, 0.16);
  353. }
  354. .store-btn view {
  355. width: 700rpx;
  356. height: 98rpx;
  357. margin: 0 auto;
  358. background: #fc8c04;
  359. border-radius: 49rpx;
  360. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
  361. font-size: 32rpx;
  362. font-family: PingFang SC, PingFang SC-Medium;
  363. font-weight: 500;
  364. text-align: left;
  365. color: #ffffff;
  366. }
  367. .model {
  368. position: fixed;
  369. top: 0;
  370. width: 100%;
  371. height: 100%;
  372. background: rgba(0, 0, 0, 0.5);
  373. }
  374. .model_cotent {
  375. width: 600rpx;
  376. text-align: center;
  377. border-radius: 16rpx;
  378. background: #fff;
  379. overflow: hidden;
  380. }
  381. .model_cotent_title {
  382. font-size: 34rpx;
  383. font-weight: 700;
  384. margin: 40rpx 0 40rpx 0;
  385. }
  386. .model_cotent_qd {
  387. font-size: 30rpx;
  388. padding-bottom: 65rpx;
  389. border-bottom: 1rpx solid #f1f1f1;
  390. }
  391. .model_cotent_shezhi {
  392. margin: 0;
  393. font-weight: 700;
  394. font-size: 30rpx;
  395. color: #4e6ef2;
  396. padding: 30rpx 0;
  397. background-color: #fff;
  398. border-radius: none;
  399. border: none;
  400. }
  401. .model_cotent_right {
  402. border-right: 1rpx solid #F1F1F1;
  403. }
  404. .icon-dizhi {
  405. font-size: 24rpx;
  406. }
  407. </style>