index.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <template>
  2. <view class="content">
  3. <!-- 顶部导航 -->
  4. <uni-nav-bar
  5. :border="false"
  6. @click-left="toUserCenter"
  7. leftIcon="person-filled"
  8. background-color="#fff"
  9. :status-bar="true"
  10. :fixed="true"
  11. color="rgb(255,0,0)">
  12. </uni-nav-bar>
  13. <!-- 页面主体 -->
  14. <view class="pageContent">
  15. <map id="map" :latitude="centerY" :longitude="centerX" scale="14" show-compass :markers="markers" @markertap="markertap"
  16. show-location style="width: 100%; height:100%;">
  17. <!-- 左边控件 -->
  18. <view class="cover-view">
  19. <view class="flex-wrp">
  20. <cover-view @click="intoList" class="flex-item">
  21. <cover-image class="img" src="/static/img/index-list.png"></cover-image>
  22. <cover-view>网点列表</cover-view>
  23. </cover-view>
  24. <cover-view @click="openPop" class="flex-item">
  25. <cover-image class="img" src="/static/img/index-call.png"></cover-image>
  26. <cover-view>联系客服</cover-view>
  27. </cover-view>
  28. <cover-view class="flex-item">
  29. <cover-image class="img" src="/static/img/index-discount.png"></cover-image>
  30. <cover-view>优惠活动</cover-view>
  31. </cover-view>
  32. </view>
  33. </view>
  34. <!-- 地图移动后返回原位置控件 -->
  35. <view class="cover-location">
  36. <cover-image class="img" @click="moveToLocation" src="/static/img/location.png"></cover-image>
  37. </view>
  38. <view class="cover-bottom">
  39. <button @click="scanCode" type="warn">扫码洗车</button>
  40. </view>
  41. </map>
  42. </view>
  43. </view>
  44. </template>
  45. <script>
  46. import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
  47. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  48. export default {
  49. components: {
  50. uniNavBar, uniPopup
  51. },
  52. data() {
  53. return {
  54. mapCtx: null, // 地图对象
  55. markers: [], // 标注点
  56. centerX: '',
  57. centerY: '',
  58. markData: [{
  59. id: '1',
  60. name: '洗车机',
  61. latitude: '34.29318',
  62. longitude: '108.94712',
  63. status: 1
  64. },
  65. {
  66. id: '22',
  67. name: '洗车机',
  68. latitude: '34.29318',
  69. longitude: '108.96712',
  70. status: 1
  71. },
  72. {
  73. id: '2',
  74. name: '洗车机',
  75. latitude: '34.29318',
  76. longitude: '118.94712',
  77. status: 1
  78. },
  79. {
  80. id: '11',
  81. name: '洗车机',
  82. latitude: '34.29318',
  83. longitude: '110.94712',
  84. status: 1
  85. },
  86. {
  87. id: '12',
  88. name: '洗车机',
  89. latitude: '34.39318',
  90. longitude: '108.94712',
  91. status: 0
  92. },
  93. {
  94. id: '13',
  95. name: '洗车机',
  96. latitude: '44.29318',
  97. longitude: '108.94712',
  98. status: 1
  99. }
  100. ],
  101. }
  102. },
  103. onReady() {
  104. this.mapCtx = uni.createMapContext('map')
  105. },
  106. onLoad() {
  107. this.getUserLocation()
  108. },
  109. methods: {
  110. // 用户位置信息授权
  111. getUserLocation() {
  112. let _this = this
  113. // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope H5及APP平台不适用
  114. // H5及APP平台适配代码
  115. // #ifndef H5 || APP-PLUS
  116. uni.getSetting({
  117. success(res) {
  118. console.log(res,'11111')
  119. if (!res.authSetting['scope.userLocation']) {
  120. uni.authorize({
  121. scope: 'scope.userLocation',
  122. success() {
  123. // 用户已经同意小程序使用位置信息,后续调用 uni.getLocation 接口不会弹窗询问
  124. _this.getLocation()
  125. },
  126. // 用户拒绝授权位置信息时默认展示青海西宁位置地图
  127. fail: (err) => {
  128. _this.centerX = '101.760521'
  129. _this.centerY = '36.636193'
  130. _this.markers = _this.getMarkersData()
  131. }
  132. })
  133. } else {
  134. _this.getLocation()
  135. }
  136. }
  137. })
  138. // #endif
  139. },
  140. // 获取用户位置
  141. getLocation () {
  142. uni.getLocation({
  143. type: 'gcj02',
  144. success: (res) => {
  145. let latitude = res.latitude;
  146. let longitude = res.longitude;
  147. this.centerX = longitude
  148. this.centerY = latitude
  149. this.markers = this.getMarkersData()
  150. },
  151. // 定位失败默认展示青海西宁位置地图
  152. fail: (err) => {
  153. this.centerX = '101.760521'
  154. this.centerY = '36.636193'
  155. this.markers = this.getMarkersData()
  156. }
  157. });
  158. },
  159. // 点击标点获取数据
  160. markertap(e) {
  161. console.log(e)
  162. uni.navigateTo({
  163. url: `/pages/store/storeDetail?id=${e.markerId}`
  164. })
  165. },
  166. // 获取标记点数据
  167. getMarkersData() {
  168. let markers = [];
  169. for (let item of this.markData) {
  170. let marker = this.createMarker(item);
  171. markers.push(marker)
  172. }
  173. return markers;
  174. },
  175. // 点击回到定位坐标点
  176. moveToLocation () {
  177. this.mapCtx.moveToLocation()
  178. },
  179. // 进入个人中心
  180. toUserCenter () {
  181. uni.navigateTo({
  182. url: '/pages/userCenter/index'
  183. })
  184. },
  185. // 打开网点列表
  186. intoList() {
  187. uni.navigateTo({
  188. url: '/pages/store/storeList'
  189. })
  190. },
  191. // 联系客服
  192. openPop() {
  193. let _this = this
  194. uni.showActionSheet({
  195. itemList: ['在线客服', '电话客服'],
  196. success: function (res) {
  197. //在线客服
  198. if(res.tapIndex == 1){
  199. _this.callPhone()
  200. }
  201. //电话客服
  202. if(res.tapIndex == 1){
  203. _this.callPhone()
  204. }
  205. },
  206. fail: function (res) {
  207. console.log(res.errMsg);
  208. }
  209. });
  210. },
  211. // 电话客服
  212. callPhone () {
  213. uni.makePhoneCall({
  214. phoneNumber: '114'
  215. })
  216. },
  217. // 扫码洗车
  218. scanCode () {
  219. uni.scanCode({
  220. success: function (res) {
  221. console.log('条码类型:' + res.scanType);
  222. console.log('条码内容:' + res.result);
  223. }
  224. });
  225. },
  226. // 创建标记点
  227. createMarker(point) {
  228. let latitude = point.latitude;
  229. let longitude = point.longitude;
  230. let marker = {
  231. iconPath: point.status ? "/static/img/store.png": '/static/img/store-zt.png',
  232. id: point.id || 0,
  233. name: point.name || '',
  234. latitude: latitude,
  235. longitude: longitude,
  236. width: 30,
  237. height: 30,
  238. callout: {
  239. content: point.name,
  240. fontSize: 14,
  241. }
  242. };
  243. return marker;
  244. }
  245. }
  246. }
  247. </script>
  248. <style lang="scss" scoped>
  249. .content {
  250. display: flex;
  251. flex-direction: column;
  252. align-items: center;
  253. justify-content: center;
  254. padding: 0;
  255. .pageContent {
  256. width: 100%;
  257. flex: 1;
  258. .cover-view {
  259. position: absolute;
  260. top: calc(60% - 150rpx);
  261. left: calc(50% - 360rpx);
  262. .flex-wrp {
  263. display: flex;
  264. flex-direction: column;
  265. }
  266. .flex-item {
  267. background: rgba(0, 0, 0, 0.6);
  268. margin-bottom: 10rpx;
  269. border-radius: 10rpx;
  270. width: 110rpx;
  271. height: 110rpx;
  272. font-size: 24rpx;
  273. color: #F8F8F8;
  274. display: flex;
  275. flex-direction: column;
  276. justify-content: center;
  277. align-items: center;
  278. .img {
  279. width: 50rpx;
  280. height: 50rpx;
  281. margin-bottom: 10rpx;
  282. }
  283. }
  284. }
  285. .cover-location{
  286. position: absolute;
  287. top: calc(75%);
  288. left: calc(85%);
  289. .img{
  290. width: 80rpx;
  291. height: 80rpx;
  292. }
  293. }
  294. .cover-bottom {
  295. position: absolute;
  296. bottom: calc(60rpx);
  297. width: 80%;
  298. left: calc(9%);
  299. }
  300. }
  301. }
  302. </style>