index.vue 6.9 KB

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