index.vue 7.3 KB

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