index.vue 9.7 KB

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