index.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  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="10" show-compass :markers="markers" @markertap="markertap"
  17. show-location style="width: 100%; height:100%;">
  18. <!-- 信息提示 -->
  19. <cover-view class="work-message" v-if="workStatus!='stop'" @click="toWork">
  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. import {getLookUpDatas} from '@/api/data.js'
  62. export default {
  63. components: {
  64. uniNavBar, uniPopup
  65. },
  66. data() {
  67. return {
  68. workStatus:'',
  69. mapCtx: null, // 地图对象
  70. markers: [], // 标注点
  71. lng: '',
  72. lat: '',
  73. }
  74. },
  75. onReady() {
  76. this.mapCtx = uni.createMapContext('map')
  77. },
  78. onShow() {
  79. this.workStatus = this.$store.state.vuex_workStatus
  80. },
  81. onLoad() {
  82. this.getUserLocation()
  83. // 获取订单状态数据字典
  84. this.getCodeList('ORDER_STATUS')
  85. // 获取支付方式数据字典
  86. this.getCodeList('PAY_TYPE')
  87. // 获取网点标签数据字典
  88. this.getCodeList('STORE_LABEL')
  89. },
  90. methods: {
  91. // 获取数据字典
  92. getCodeList (code) {
  93. getLookUpDatas({type:code}).then(res =>{
  94. if (res.status == 200) {
  95. console.log(res.data,'res.data')
  96. switch (code){
  97. case 'ORDER_STATUS':
  98. this.$u.vuex('vuex_payStatus', res.data)
  99. break;
  100. case 'PAY_TYPE':
  101. this.$u.vuex('vuex_payType', res.data)
  102. break;
  103. case 'STORE_LABEL':
  104. this.$u.vuex('vuex_storeLabel', res.data)
  105. break;
  106. default:
  107. break;
  108. }
  109. }
  110. })
  111. },
  112. // 如果机器正在运行,提示并点击跳转的运行界面
  113. toWork(){
  114. uni.navigateTo({
  115. url: "/pages/work/index/index"
  116. })
  117. },
  118. // 用户位置信息授权
  119. getUserLocation() {
  120. let _this = this
  121. // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope H5及APP平台不适用
  122. // H5及APP平台适配代码
  123. // #ifndef H5 || APP-PLUS
  124. uni.getSetting({
  125. success(res) {
  126. if (!res.authSetting['scope.userLocation']) {
  127. uni.authorize({
  128. scope: 'scope.userLocation',
  129. success() {
  130. // 用户已经同意小程序使用位置信息,后续调用 uni.getLocation 接口不会弹窗询问
  131. _this.getLocation()
  132. },
  133. // 用户拒绝授权位置信息时默认展示青海西宁位置地图
  134. fail: (err) => {
  135. _this.lng = '101.760521'
  136. _this.lat = '36.636193'
  137. _this.markers = _this.getMarkersData()
  138. }
  139. })
  140. } else {
  141. _this.getLocation()
  142. }
  143. }
  144. })
  145. // #endif
  146. },
  147. // 获取用户位置
  148. getLocation () {
  149. uni.getLocation({
  150. type: 'gcj02',
  151. success: (res) => {
  152. console.log(res,'rrrr')
  153. let latitude = res.latitude;
  154. let longitude = res.longitude;
  155. this.lng = longitude
  156. this.lat = latitude
  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: this.lat,
  181. lng: this.lng
  182. }
  183. getMapStoreList(params).then(res=>{
  184. uni.hideLoading()
  185. if (res.status == 200) {
  186. let markData = res.data
  187. let markers = [];
  188. for (let item of 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. // uni.scanCode({
  253. // success: function (res) {
  254. // console.log('条码类型:' + res.scanType);
  255. // console.log('条码内容:' + res.result);
  256. // }
  257. // });
  258. uni.navigateTo({
  259. url: `/pages/getOrder/getOrder?scene=100037,9998`
  260. })
  261. },
  262. // 创建标记点 OPEN :正常营业 CLOSED:暂停营业 TO_BE_OPENED:待开业
  263. createMarker(point) {
  264. let latitude = point.lat;
  265. let longitude = point.lng;
  266. let iconPath = ''
  267. if (point.businessStatus==='CLOSED') {
  268. iconPath = '/static/img/store-dky.png'
  269. } else if (point.businessStatus==='OPEN') {
  270. iconPath = '/static/img/store.png'
  271. } else {
  272. iconPath = '/static/img/store-zt.png'
  273. }
  274. let marker = {
  275. iconPath: iconPath,
  276. id: point.id || 0,
  277. name: point.name || '',
  278. latitude: latitude,
  279. longitude: longitude,
  280. width: 30,
  281. height: 49,
  282. callout: {
  283. content: point.name,
  284. fontSize: 14,
  285. }
  286. };
  287. return marker;
  288. }
  289. }
  290. }
  291. </script>
  292. <style lang="scss" scoped>
  293. .content {
  294. display: flex;
  295. flex-direction: column;
  296. align-items: center;
  297. justify-content: center;
  298. padding: 0;
  299. .pageContent {
  300. width: 100%;
  301. flex: 1;
  302. .work-message{
  303. position: absolute;
  304. top: 6%;
  305. width: 80%;
  306. left: 50%;
  307. margin-left: -40%;
  308. background: rgba(0,0,0,0.6);
  309. border-radius: 100rpx;
  310. color: #eee;
  311. .work-message-in{
  312. display: flex;
  313. align-items: center;
  314. padding: 26rpx;
  315. .view{
  316. &:first-child{
  317. flex-grow: 1;
  318. text-align: center;
  319. }
  320. &:last-child{
  321. font-size: 24rpx;
  322. color: #fff;
  323. display: flex;
  324. align-items: center;
  325. }
  326. }
  327. }
  328. }
  329. .cover-view {
  330. position: absolute;
  331. top: calc(60% - 150rpx);
  332. left: calc(50% - 360rpx);
  333. .flex-wrp {
  334. display: flex;
  335. flex-direction: column;
  336. background: rgba(0, 0, 0, 0.3);
  337. border-radius: 10rpx;
  338. padding: 10rpx 0;
  339. }
  340. .flex-item {
  341. width: 110rpx;
  342. height: 110rpx;
  343. font-size: 24rpx;
  344. color: #F8F8F8;
  345. display: flex;
  346. flex-direction: column;
  347. justify-content: center;
  348. align-items: center;
  349. .img {
  350. width: 50rpx;
  351. height: 50rpx;
  352. margin-bottom: 10rpx;
  353. }
  354. }
  355. }
  356. .cover-location{
  357. position: absolute;
  358. top: calc(75%);
  359. left: calc(85%);
  360. .img{
  361. width: 80rpx;
  362. height: 80rpx;
  363. }
  364. }
  365. .cover-bottom {
  366. position: absolute;
  367. bottom: calc(60rpx);
  368. width: 80%;
  369. left: calc(9%);
  370. uni-button[type=warn]{
  371. background: red;
  372. u-icon{
  373. margin-right: 15rpx;
  374. }
  375. }
  376. }
  377. }
  378. }
  379. </style>