index.vue 6.8 KB

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