index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. <template>
  2. <view class="content">
  3. <!-- 顶部导航 -->
  4. <uni-nav-bar :border="false" @clickLeft="toOtherWX" 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="toOtherWX"
  13. show-location style="width: 100%; height:100%;">
  14. <!-- 信息提示 -->
  15. <cover-view class="work-message" v-if="workStatus=='show'" @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="toOtherWX" 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="toOtherWX" 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 @click="scanCoupon" 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="toOtherWX" 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. import {
  68. getUnFinishedOrder
  69. } from '@/api/order.js'
  70. export default {
  71. components: {
  72. uniNavBar,
  73. uniPopup
  74. },
  75. data() {
  76. return {
  77. workStatus: '',
  78. mapCtx: null, // 地图对象
  79. markers: [], // 标注点
  80. lng: '',
  81. lat: '',
  82. showPop: false // 是否显示用户未授权提示框
  83. }
  84. },
  85. onReady() {
  86. this.mapCtx = uni.createMapContext('map')
  87. },
  88. onShow() {
  89. this.getUserLocation()
  90. // 查询是否有未完成的订单
  91. this.getUnFinishedOrder()
  92. },
  93. onLoad() {
  94. // 获取订单状态数据字典
  95. this.getCodeList('ORDER_STATUS')
  96. // 获取支付方式数据字典
  97. this.getCodeList('PAY_TYPE')
  98. // 获取网点标签数据字典
  99. this.getCodeList('STORE_LABEL')
  100. // 监听网络状态
  101. uni.onNetworkStatusChange(function (res) {
  102. if(res.isConnected){
  103. uni.redirectTo({
  104. url: "/pages/index/index"
  105. })
  106. }
  107. });
  108. },
  109. methods: {
  110. // 查询是否有未完成的订单
  111. getUnFinishedOrder(){
  112. getUnFinishedOrder().then(res => {
  113. console.log(res,'============')
  114. if(res.status == 200 && res.data){
  115. this.workStatus = 'show'
  116. // 还未启动
  117. if(res.data.dataStatus == "PAID"){
  118. this.$u.vuex('vuex_workStatus','linking')
  119. }
  120. // 开始洗车
  121. if(res.data.dataStatus == "KSXC"){
  122. this.$u.vuex('vuex_workStatus','starting')
  123. }
  124. }else{
  125. this.workStatus = 'hide'
  126. if(res.status == '6000'){
  127. this.toashMsg(res.message)
  128. }
  129. }
  130. })
  131. },
  132. // 获取数据字典
  133. getCodeList(code) {
  134. getLookUpDatas({
  135. type: code
  136. }).then(res => {
  137. if (res.status == 200) {
  138. console.log(res.data, 'res.data')
  139. switch (code) {
  140. case 'ORDER_STATUS':
  141. this.$u.vuex('vuex_payStatus', res.data)
  142. break;
  143. case 'PAY_TYPE':
  144. this.$u.vuex('vuex_payType', res.data)
  145. break;
  146. case 'STORE_LABEL':
  147. this.$u.vuex('vuex_storeLabel', res.data)
  148. break;
  149. default:
  150. break;
  151. }
  152. }
  153. })
  154. },
  155. // 如果机器正在运行,提示并点击跳转的运行界面
  156. toWork() {
  157. uni.navigateTo({
  158. url: "/pages/work/index/index"
  159. })
  160. },
  161. // 小程序跳转
  162. toOtherWX() {
  163. uni.showModal({
  164. title: '提示',
  165. content: '因业务需要,该小程序的功能已迁移至《智能速洗》小程序,请跳转到新的小程序继续使用,感谢支持!',
  166. showCancel: false,
  167. confirmText: '立刻前往',
  168. confirmColor: '#e64340',
  169. success: function (res) {
  170. if (res.confirm) {
  171. console.log('用户点击确定');
  172. uni.navigateToMiniProgram({
  173. appId: 'wx3b2fe70032280100',
  174. path: '',
  175. success(res) {
  176. // 打开成功
  177. console.log(res,'rrrrr')
  178. }
  179. })
  180. } else if (res.cancel) {
  181. console.log('用户点击取消');
  182. }
  183. }
  184. });
  185. },
  186. // 用户位置信息授权
  187. getUserLocation() {
  188. let _this = this
  189. // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope H5及APP平台不适用
  190. // H5及APP平台适配代码
  191. // #ifndef H5 || APP-PLUS
  192. uni.getSetting({
  193. success(res) {
  194. if (!res.authSetting['scope.userLocation']) {
  195. uni.authorize({
  196. scope: 'scope.userLocation',
  197. success(res) {
  198. // 用户已经同意小程序使用位置信息,后续调用 uni.getLocation 接口不会弹窗询问
  199. _this.getLocation()
  200. },
  201. // 用户拒绝授权位置信息时默认展示青海西宁位置地图
  202. fail: (err) => {
  203. _this.showPop = true
  204. }
  205. })
  206. } else {
  207. _this.getLocation()
  208. }
  209. }
  210. })
  211. // #endif
  212. },
  213. // 打开位置设置界面
  214. intoSetting () {
  215. let _this = this
  216. uni.openSetting({
  217. success(res) {
  218. console.log(res,'222')
  219. let data = res.authSetting
  220. if (data['scope.userLocation']) {
  221. _this.showPop = false
  222. _this.getLocation()
  223. } else {
  224. _this.showPop = true
  225. }
  226. },
  227. fail() {
  228. _this.showPop = true
  229. }
  230. })
  231. },
  232. // 获取用户位置
  233. getLocation() {
  234. uni.getLocation({
  235. type: 'gcj02',
  236. success: (res) => {
  237. console.log(res, 'rrrr')
  238. this.showPop = false
  239. let latitude = res.latitude;
  240. let longitude = res.longitude;
  241. this.lng = longitude
  242. this.lat = latitude
  243. this.markers = this.getMarkersData()
  244. },
  245. // 定位失败默认展示青海西宁位置地图
  246. fail: (err) => {
  247. this.lng = '101.760521'
  248. this.lat = '36.636193'
  249. this.markers = this.getMarkersData()
  250. }
  251. });
  252. },
  253. // 点击标点进入网点详情
  254. markertap(e) {
  255. console.log(e)
  256. uni.navigateTo({
  257. url: `/pages/store/storeDetail?id=${e.markerId}`
  258. })
  259. },
  260. // 获取所有标记点数据
  261. getMarkersData() {
  262. // uni.showLoading({
  263. // title: '加载中...',
  264. // mask: true
  265. // })
  266. let params = {
  267. lat: this.lat,
  268. lng: this.lng
  269. }
  270. getMapStoreList(params).then(res => {
  271. // uni.hideLoading()
  272. if (res.status == 200) {
  273. let markData = res.data
  274. let markers = [];
  275. for (let item of markData) {
  276. let marker = this.createMarker(item);
  277. markers.push(marker)
  278. }
  279. this.markers = markers
  280. console.log(this.markers, '111111')
  281. } else {
  282. this.toashMsg(res.message)
  283. }
  284. })
  285. },
  286. // 点击回到定位坐标点
  287. moveToLocation() {
  288. this.mapCtx.moveToLocation()
  289. },
  290. // 进入个人中心
  291. toUserCenter() {
  292. uni.showLoading({
  293. title: "正在加载..."
  294. })
  295. // 检验是否登录或登录是否过期
  296. checkLogin().then(res => {
  297. console.log(res)
  298. uni.hideLoading()
  299. if (res.status == '200') {
  300. uni.navigateTo({
  301. url: '/pages/userCenter/index'
  302. })
  303. } else if (res.status == '9001') {
  304. uni.navigateTo({
  305. url: `/pages/login/login?lanuch=${false}&path=` + encodeURIComponent('/pages/userCenter/index')
  306. })
  307. }else if (res.status == '6000'){
  308. this.toashMsg(res.message)
  309. }
  310. })
  311. },
  312. // 打开网点列表
  313. intoList() {
  314. uni.navigateTo({
  315. url: '/pages/store/storeList'
  316. })
  317. },
  318. // 联系客服
  319. openPop() {
  320. let _this = this
  321. uni.showActionSheet({
  322. itemList: ['电话客服'],
  323. success: function(res) {
  324. //电话客服
  325. if (res.tapIndex == 0) {
  326. _this.callPhone()
  327. }
  328. },
  329. fail: function(res) {
  330. console.log(res.errMsg);
  331. }
  332. });
  333. },
  334. // 电话客服
  335. callPhone() {
  336. uni.makePhoneCall({
  337. phoneNumber: this.$store.state.vuex_kfMobile
  338. })
  339. },
  340. // 扫码洗车
  341. scanCode () {
  342. let _this = this
  343. // uni.navigateTo({
  344. // url: '/pages/getOrder/getOrder?scene=100033,9996'
  345. // })
  346. // 检验是否登录或登录是否过期
  347. uni.scanCode({
  348. success: function (res) {
  349. console.log(res);
  350. if(res.scanType != 'WX_CODE'){
  351. setTimeout(()=>{
  352. _this.toashMsg("无法识别此二维码")
  353. },1000)
  354. }else{
  355. uni.navigateTo({
  356. url: '/'+res.path
  357. })
  358. }
  359. }
  360. });
  361. },
  362. // 创建标记点 设备状态 USING :使用中 PAUSE:暂停 ON_LINE:在线
  363. createMarker(point) {
  364. let latitude = point.lat;
  365. let longitude = point.lng;
  366. let iconPath = ''
  367. iconPath = point.deviceStatus === 'PAUSE' ? '/static/img/store-dky.png' : '/static/img/store.png'
  368. let marker = {
  369. iconPath: iconPath,
  370. id: point.id || 0,
  371. name: point.name || '',
  372. latitude: latitude,
  373. longitude: longitude,
  374. width: 30,
  375. height: 49,
  376. callout: {
  377. content: point.name,
  378. fontSize: 14,
  379. }
  380. };
  381. return marker;
  382. }
  383. }
  384. }
  385. </script>
  386. <style lang="scss" scoped>
  387. .content {
  388. display: flex;
  389. flex-direction: column;
  390. align-items: center;
  391. justify-content: center;
  392. padding: 0;
  393. .pageContent {
  394. width: 100%;
  395. flex: 1;
  396. .work-message {
  397. position: absolute;
  398. top: 6%;
  399. width: 80%;
  400. left: 50%;
  401. margin-left: -40%;
  402. background: rgba(0, 0, 0, 0.6);
  403. border-radius: 100rpx;
  404. color: #eee;
  405. .work-message-in {
  406. display: flex;
  407. align-items: center;
  408. padding: 26rpx;
  409. .view {
  410. &:first-child {
  411. flex-grow: 1;
  412. text-align: center;
  413. }
  414. &:last-child {
  415. font-size: 24rpx;
  416. color: #fff;
  417. display: flex;
  418. align-items: center;
  419. }
  420. }
  421. }
  422. }
  423. .cover-view {
  424. position: absolute;
  425. top: calc(60% - 150rpx);
  426. left: calc(50% - 360rpx);
  427. .flex-wrp {
  428. display: flex;
  429. flex-direction: column;
  430. background: rgba(0, 0, 0, 0.3);
  431. border-radius: 10rpx;
  432. padding: 10rpx 0;
  433. }
  434. .flex-item {
  435. width: 110rpx;
  436. height: 110rpx;
  437. font-size: 24rpx;
  438. color: #F8F8F8;
  439. display: flex;
  440. flex-direction: column;
  441. justify-content: center;
  442. align-items: center;
  443. .img {
  444. width: 50rpx;
  445. height: 50rpx;
  446. margin-bottom: 10rpx;
  447. }
  448. }
  449. }
  450. .cover-location {
  451. position: absolute;
  452. top: calc(75%);
  453. left: calc(85%);
  454. .img {
  455. width: 80rpx;
  456. height: 80rpx;
  457. }
  458. }
  459. .cover-bottom {
  460. position: absolute;
  461. bottom: calc(60rpx);
  462. width: 80%;
  463. left: calc(9%);
  464. uni-button[type=warn] {
  465. background: red;
  466. u-icon {
  467. margin-right: 15rpx;
  468. }
  469. }
  470. }
  471. }
  472. }
  473. </style>