index.vue 6.9 KB

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