index.vue 8.0 KB

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