index.vue 10 KB

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