index.vue 9.4 KB

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