index.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  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: 1
  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 marker = {
  232. iconPath: point.status ? "/static/img/store.png": '/static/img/store-zt.png',
  233. id: point.id || 0,
  234. name: point.name || '',
  235. latitude: latitude,
  236. longitude: longitude,
  237. width: 30,
  238. height: 49,
  239. callout: {
  240. content: point.name,
  241. fontSize: 14,
  242. }
  243. };
  244. return marker;
  245. }
  246. }
  247. }
  248. </script>
  249. <style lang="scss" scoped>
  250. .content {
  251. display: flex;
  252. flex-direction: column;
  253. align-items: center;
  254. justify-content: center;
  255. padding: 0;
  256. .pageContent {
  257. width: 100%;
  258. flex: 1;
  259. .cover-view {
  260. position: absolute;
  261. top: calc(60% - 150rpx);
  262. left: calc(50% - 360rpx);
  263. .flex-wrp {
  264. display: flex;
  265. flex-direction: column;
  266. background: rgba(0, 0, 0, 0.3);
  267. border-radius: 10rpx;
  268. padding: 10rpx 0;
  269. }
  270. .flex-item {
  271. width: 110rpx;
  272. height: 110rpx;
  273. font-size: 24rpx;
  274. color: #F8F8F8;
  275. display: flex;
  276. flex-direction: column;
  277. justify-content: center;
  278. align-items: center;
  279. .img {
  280. width: 50rpx;
  281. height: 50rpx;
  282. margin-bottom: 10rpx;
  283. }
  284. }
  285. }
  286. .cover-location{
  287. position: absolute;
  288. top: calc(75%);
  289. left: calc(85%);
  290. .img{
  291. width: 80rpx;
  292. height: 80rpx;
  293. }
  294. }
  295. .cover-bottom {
  296. position: absolute;
  297. bottom: calc(60rpx);
  298. width: 80%;
  299. left: calc(9%);
  300. uni-button[type=warn]{
  301. background: red;
  302. }
  303. }
  304. }
  305. }
  306. </style>