index.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  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="lat" :longitude="lng" 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. import {checkLogin} from '@/api/login.js'
  50. import {getMapStoreList} from '@/api/store.js'
  51. export default {
  52. components: {
  53. uniNavBar, uniPopup
  54. },
  55. data() {
  56. return {
  57. mapCtx: null, // 地图对象
  58. markers: [], // 标注点
  59. lng: '',
  60. lat: '',
  61. markData: [{
  62. id: '1',
  63. name: '洗车机',
  64. latitude: '34.29318',
  65. longitude: '108.94712',
  66. status: 1
  67. },
  68. {
  69. id: '22',
  70. name: '洗车机',
  71. latitude: '34.29318',
  72. longitude: '108.96712',
  73. status: 1
  74. },
  75. {
  76. id: '2',
  77. name: '洗车机',
  78. latitude: '34.29318',
  79. longitude: '118.94712',
  80. status: 2
  81. },
  82. {
  83. id: '11',
  84. name: '洗车机',
  85. latitude: '34.29318',
  86. longitude: '110.94712',
  87. status: 1
  88. },
  89. {
  90. id: '12',
  91. name: '洗车机',
  92. latitude: '34.39318',
  93. longitude: '108.94712',
  94. status: 0
  95. },
  96. {
  97. id: '13',
  98. name: '洗车机',
  99. latitude: '44.29318',
  100. longitude: '108.94712',
  101. status: 1
  102. }
  103. ],
  104. }
  105. },
  106. onReady() {
  107. this.mapCtx = uni.createMapContext('map')
  108. },
  109. onShow() {
  110. console.log(this.$store.state.vuex_orderInfo,'vuex_orderInfo')
  111. },
  112. onLoad() {
  113. this.getUserLocation()
  114. },
  115. methods: {
  116. // 用户位置信息授权
  117. getUserLocation() {
  118. let _this = this
  119. // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope H5及APP平台不适用
  120. // H5及APP平台适配代码
  121. // #ifndef H5 || APP-PLUS
  122. uni.getSetting({
  123. success(res) {
  124. if (!res.authSetting['scope.userLocation']) {
  125. uni.authorize({
  126. scope: 'scope.userLocation',
  127. success() {
  128. // 用户已经同意小程序使用位置信息,后续调用 uni.getLocation 接口不会弹窗询问
  129. _this.getLocation()
  130. },
  131. // 用户拒绝授权位置信息时默认展示青海西宁位置地图
  132. fail: (err) => {
  133. _this.lng = '101.760521'
  134. _this.lat = '36.636193'
  135. _this.markers = _this.getMarkersData()
  136. }
  137. })
  138. } else {
  139. _this.getLocation()
  140. }
  141. }
  142. })
  143. // #endif
  144. },
  145. // 获取用户位置
  146. getLocation () {
  147. uni.getLocation({
  148. type: 'gcj02',
  149. success: (res) => {
  150. console.log(res,'rrrr')
  151. let latitude = res.latitude;
  152. let longitude = res.longitude;
  153. // this.lng = longitude
  154. // this.lat = latitude
  155. this.lng = '116.510229'
  156. this.lat = '39.848974'
  157. this.markers = this.getMarkersData()
  158. },
  159. // 定位失败默认展示青海西宁位置地图
  160. fail: (err) => {
  161. this.lng = '101.760521'
  162. this.lat = '36.636193'
  163. this.markers = this.getMarkersData()
  164. }
  165. });
  166. },
  167. // 点击标点进入网点详情
  168. markertap(e) {
  169. console.log(e)
  170. uni.navigateTo({
  171. url: `/pages/store/storeDetail?id=${e.markerId}`
  172. })
  173. },
  174. // 获取所有标记点数据
  175. getMarkersData() {
  176. uni.showLoading({
  177. title: '加载中...'
  178. })
  179. let params = {
  180. lat: '39.848974',
  181. lng: '116.510229'
  182. }
  183. getMapStoreList(params).then(res=>{
  184. uni.hideLoading()
  185. if (res.status == 200) {
  186. this.markData = res.data
  187. let markers = [];
  188. for (let item of this.markData) {
  189. let marker = this.createMarker(item);
  190. markers.push(marker)
  191. }
  192. this.markers = markers
  193. console.log(this.markers,'111111')
  194. } else {
  195. this.toashMsg(res.message)
  196. }
  197. })
  198. },
  199. // 点击回到定位坐标点
  200. moveToLocation () {
  201. this.mapCtx.moveToLocation()
  202. },
  203. // 进入个人中心
  204. toUserCenter () {
  205. // 检验是否登录或登录是否过期
  206. checkLogin().then(res =>{
  207. if (res.status == '200'){
  208. uni.navigateTo({
  209. url: '/pages/userCenter/index'
  210. })
  211. } else {
  212. uni.navigateTo({
  213. url: `/pages/login/login?lanuch=false&path=` + encodeURIComponent(`/pages/userCenter/index`)
  214. });
  215. }
  216. })
  217. },
  218. // 打开网点列表
  219. intoList() {
  220. uni.navigateTo({
  221. url: '/pages/store/storeList'
  222. })
  223. },
  224. // 联系客服
  225. openPop() {
  226. let _this = this
  227. uni.showActionSheet({
  228. itemList: ['在线客服', '电话客服'],
  229. success: function (res) {
  230. //在线客服
  231. if(res.tapIndex == 1){
  232. _this.callPhone()
  233. }
  234. //电话客服
  235. if(res.tapIndex == 1){
  236. _this.callPhone()
  237. }
  238. },
  239. fail: function (res) {
  240. console.log(res.errMsg);
  241. }
  242. });
  243. },
  244. // 电话客服
  245. callPhone () {
  246. uni.makePhoneCall({
  247. phoneNumber: '114'
  248. })
  249. },
  250. // 扫码洗车
  251. scanCode () {
  252. checkLogin().then(res =>{
  253. if (res.status == '200'){
  254. uni.navigateTo({
  255. url: '/pages/getOrder/getOrder'
  256. })
  257. // uni.scanCode({
  258. // success: function (res) {
  259. // console.log('条码类型:' + res.scanType);
  260. // console.log('条码内容:' + res.result);
  261. // }
  262. // });
  263. } else {
  264. uni.navigateTo({
  265. url: '/pages/login/login'
  266. })
  267. }
  268. })
  269. },
  270. // 创建标记点 OPEN :正常营业 CLOSED:暂停营业 TO_BE_OPENED:待开业
  271. createMarker(point) {
  272. let latitude = point.lat;
  273. let longitude = point.lng;
  274. let iconPath = ''
  275. if (point.businessStatus==='CLOSED') {
  276. iconPath = '/static/img/store-dky.png'
  277. } else if (point.businessStatus==='OPEN') {
  278. iconPath = '/static/img/store.png'
  279. } else {
  280. iconPath = '/static/img/store-zt.png'
  281. }
  282. let marker = {
  283. iconPath: iconPath,
  284. id: point.id || 0,
  285. name: point.name || '',
  286. latitude: latitude,
  287. longitude: longitude,
  288. width: 30,
  289. height: 49,
  290. callout: {
  291. content: point.name,
  292. fontSize: 14,
  293. }
  294. };
  295. return marker;
  296. }
  297. }
  298. }
  299. </script>
  300. <style lang="scss" scoped>
  301. .content {
  302. display: flex;
  303. flex-direction: column;
  304. align-items: center;
  305. justify-content: center;
  306. padding: 0;
  307. .pageContent {
  308. width: 100%;
  309. flex: 1;
  310. .cover-view {
  311. position: absolute;
  312. top: calc(60% - 150rpx);
  313. left: calc(50% - 360rpx);
  314. .flex-wrp {
  315. display: flex;
  316. flex-direction: column;
  317. background: rgba(0, 0, 0, 0.3);
  318. border-radius: 10rpx;
  319. padding: 10rpx 0;
  320. }
  321. .flex-item {
  322. width: 110rpx;
  323. height: 110rpx;
  324. font-size: 24rpx;
  325. color: #F8F8F8;
  326. display: flex;
  327. flex-direction: column;
  328. justify-content: center;
  329. align-items: center;
  330. .img {
  331. width: 50rpx;
  332. height: 50rpx;
  333. margin-bottom: 10rpx;
  334. }
  335. }
  336. }
  337. .cover-location{
  338. position: absolute;
  339. top: calc(75%);
  340. left: calc(85%);
  341. .img{
  342. width: 80rpx;
  343. height: 80rpx;
  344. }
  345. }
  346. .cover-bottom {
  347. position: absolute;
  348. bottom: calc(60rpx);
  349. width: 80%;
  350. left: calc(9%);
  351. uni-button[type=warn]{
  352. background: red;
  353. }
  354. }
  355. }
  356. }
  357. </style>