123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464 |
- <template>
- <view class="content">
- <!-- 顶部导航 -->
- <uni-nav-bar :border="false" @clickLeft="toUserCenter" background-color="#fff" title="智能快洗" :status-bar="true" :fixed="true"
- color="rgb(255,0,0)">
- <view style="padding-left: 20rpx;" slot="left">
- <u-image width="40rpx" height="60rpx" mode="aspectFit" src="/static/img/person.png"></u-image>
- </view>
- </uni-nav-bar>
- <!-- 页面主体 -->
- <view class="pageContent">
- <map id="map" :latitude="lat" :longitude="lng" scale="10" show-compass :markers="markers" @markertap="markertap"
- show-location style="width: 100%; height:100%;">
- <!-- 信息提示 -->
- <cover-view class="work-message" v-if="workStatus=='show'" @click="toWork">
- <cover-view class="work-message-in">
- <cover-view class="view">洗车机正在工作中...</cover-view>
- <cover-view class="view">点击进入</cover-view>
- </cover-view>
- </cover-view>
- <!-- 左边控件 -->
- <view class="cover-view">
- <view class="flex-wrp">
- <cover-view @click="intoList" class="flex-item">
- <cover-image class="img" src="/static/img/index-list.png"></cover-image>
- <cover-view>网点列表</cover-view>
- </cover-view>
- <cover-view @click="openPop" class="flex-item">
- <cover-image class="img" src="/static/img/index-call.png"></cover-image>
- <cover-view>联系客服</cover-view>
- </cover-view>
- <!-- <cover-view @click="scanCoupon" class="flex-item">
- <cover-image class="img" src="/static/img/index-discount.png"></cover-image>
- <cover-view>优惠活动</cover-view>
- </cover-view> -->
- </view>
- </view>
- <!-- 地图移动后返回原位置控件 -->
- <view class="cover-location">
- <cover-image class="img" @click="moveToLocation" src="/static/img/location.png"></cover-image>
- </view>
- <view class="cover-bottom">
- <button @click="scanCode" type="warn">
- <u-icon name="scan" color="#fff" size="38"></u-icon>
- 扫码洗车
- </button>
- </view>
- </map>
- <!-- 用户未授权提示框 -->
- <u-modal v-model="showPop" @confirm="intoSetting" :show-cancel-button='false'
- confirm-text="设置" title="温馨提示" content="无法获取位置信息,请设置允许使用位置信息" width="70%"></u-modal>
- </view>
- </view>
- </template>
- <script>
- import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
- import uniPopup from '@/components/uni-popup/uni-popup.vue'
- import {
- checkLogin
- } from '@/api/login.js'
- import {
- getMapStoreList
- } from '@/api/store.js'
- import {
- getLookUpDatas
- } from '@/api/data.js'
- import {
- getUnFinishedOrder
- } from '@/api/order.js'
- export default {
- components: {
- uniNavBar,
- uniPopup
- },
- data() {
- return {
- workStatus: '',
- mapCtx: null, // 地图对象
- markers: [], // 标注点
- lng: '',
- lat: '',
- showPop: false // 是否显示用户未授权提示框
- }
- },
- onReady() {
- this.mapCtx = uni.createMapContext('map')
- },
- onShow() {
- this.getUserLocation()
- // 查询是否有未完成的订单
- this.getUnFinishedOrder()
- },
- onLoad() {
- // 获取订单状态数据字典
- this.getCodeList('ORDER_STATUS')
- // 获取支付方式数据字典
- this.getCodeList('PAY_TYPE')
- // 获取网点标签数据字典
- this.getCodeList('STORE_LABEL')
- // 监听网络状态
- uni.onNetworkStatusChange(function (res) {
- if(res.isConnected){
- uni.redirectTo({
- url: "/pages/index/index"
- })
- }
- });
- },
- methods: {
- // 查询是否有未完成的订单
- getUnFinishedOrder(){
- getUnFinishedOrder().then(res => {
- console.log(res,'============')
- if(res.status == 200 && res.data){
- this.workStatus = 'show'
- // 还未启动
- if(res.data.dataStatus == "PAID"){
- this.$u.vuex('vuex_workStatus','linking')
- }
- }else{
- this.workStatus = 'hide'
- if(res.status == '6000'){
- this.toashMsg(res.message)
- }
- }
- })
- },
- // 获取数据字典
- getCodeList(code) {
- getLookUpDatas({
- type: code
- }).then(res => {
- if (res.status == 200) {
- console.log(res.data, 'res.data')
- switch (code) {
- case 'ORDER_STATUS':
- this.$u.vuex('vuex_payStatus', res.data)
- break;
- case 'PAY_TYPE':
- this.$u.vuex('vuex_payType', res.data)
- break;
- case 'STORE_LABEL':
- this.$u.vuex('vuex_storeLabel', res.data)
- break;
- default:
- break;
- }
- }
- })
- },
- // 如果机器正在运行,提示并点击跳转的运行界面
- toWork() {
- uni.navigateTo({
- url: "/pages/work/index/index"
- })
- },
- // 用户位置信息授权
- getUserLocation() {
- let _this = this
- // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope H5及APP平台不适用
- // H5及APP平台适配代码
- // #ifndef H5 || APP-PLUS
- uni.getSetting({
- success(res) {
- if (!res.authSetting['scope.userLocation']) {
- uni.authorize({
- scope: 'scope.userLocation',
- success(res) {
- // 用户已经同意小程序使用位置信息,后续调用 uni.getLocation 接口不会弹窗询问
- _this.getLocation()
- },
- // 用户拒绝授权位置信息时默认展示青海西宁位置地图
- fail: (err) => {
- _this.showPop = true
- }
- })
- } else {
- _this.getLocation()
- }
- }
- })
- // #endif
- },
- // 打开位置设置界面
- intoSetting () {
- let _this = this
- uni.openSetting({
- success(res) {
- console.log(res,'222')
- let data = res.authSetting
- if (data['scope.userLocation']) {
- _this.showPop = false
- _this.getLocation()
- } else {
- _this.showPop = true
- }
- },
- fail() {
- _this.showPop = true
- }
- })
- },
- // 获取用户位置
- getLocation() {
- uni.getLocation({
- type: 'gcj02',
- success: (res) => {
- console.log(res, 'rrrr')
- this.showPop = false
- let latitude = res.latitude;
- let longitude = res.longitude;
- this.lng = longitude
- this.lat = latitude
- this.markers = this.getMarkersData()
- },
- // 定位失败默认展示青海西宁位置地图
- fail: (err) => {
- this.lng = '101.760521'
- this.lat = '36.636193'
- this.markers = this.getMarkersData()
- }
- });
- },
- // 点击标点进入网点详情
- markertap(e) {
- console.log(e)
- uni.navigateTo({
- url: `/pages/store/storeDetail?id=${e.markerId}`
- })
- },
- // 获取所有标记点数据
- getMarkersData() {
- uni.showLoading({
- title: '加载中...'
- })
- let params = {
- lat: this.lat,
- lng: this.lng
- }
- getMapStoreList(params).then(res => {
- uni.hideLoading()
- if (res.status == 200) {
- let markData = res.data
- let markers = [];
- for (let item of markData) {
- let marker = this.createMarker(item);
- markers.push(marker)
- }
- this.markers = markers
- console.log(this.markers, '111111')
- } else {
- this.toashMsg(res.message)
- }
- })
- },
- // 点击回到定位坐标点
- moveToLocation() {
- this.mapCtx.moveToLocation()
- },
- // 进入个人中心
- toUserCenter() {
- uni.showLoading({
- title: "正在加载..."
- })
- // 检验是否登录或登录是否过期
- checkLogin().then(res => {
- console.log(res)
- uni.hideLoading()
- if (res.status == '200') {
- uni.navigateTo({
- url: '/pages/userCenter/index'
- })
- } else if (res.status == '9001') {
- uni.navigateTo({
- url: `/pages/login/login?lanuch=${false}&path=` + encodeURIComponent('/pages/userCenter/index')
- })
- }else if (res.status == '6000'){
- this.toashMsg(res.message)
- }
- })
- },
- // 打开网点列表
- intoList() {
- uni.navigateTo({
- url: '/pages/store/storeList'
- })
- },
- // 联系客服
- openPop() {
- let _this = this
- uni.showActionSheet({
- itemList: ['电话客服'],
- success: function(res) {
- //电话客服
- if (res.tapIndex == 0) {
- _this.callPhone()
- }
- },
- fail: function(res) {
- console.log(res.errMsg);
- }
- });
- },
- // 电话客服
- callPhone() {
- uni.makePhoneCall({
- phoneNumber: this.$store.state.vuex_kfMobile
- })
- },
- // 扫码洗车
- scanCode () {
- let _this = this
- // uni.navigateTo({
- // url: '/pages/getOrder/getOrder?scene=100033,9996'
- // })
- // 检验是否登录或登录是否过期
- uni.scanCode({
- success: function (res) {
- console.log(res);
- if(res.scanType != 'WX_CODE'){
- setTimeout(()=>{
- _this.toashMsg("无法识别此二维码")
- },1000)
- }else{
- uni.navigateTo({
- url: '/'+res.path
- })
- }
- }
- });
- },
- // 创建标记点 设备状态 USING :使用中 PAUSE:暂停 ON_LINE:在线
- createMarker(point) {
- let latitude = point.lat;
- let longitude = point.lng;
- let iconPath = ''
- iconPath = point.deviceStatus === 'PAUSE' ? '/static/img/store-dky.png' : '/static/img/store.png'
- let marker = {
- iconPath: iconPath,
- id: point.id || 0,
- name: point.name || '',
- latitude: latitude,
- longitude: longitude,
- width: 30,
- height: 49,
- callout: {
- content: point.name,
- fontSize: 14,
- }
- };
- return marker;
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0;
- .pageContent {
- width: 100%;
- flex: 1;
- .work-message {
- position: absolute;
- top: 6%;
- width: 80%;
- left: 50%;
- margin-left: -40%;
- background: rgba(0, 0, 0, 0.6);
- border-radius: 100rpx;
- color: #eee;
- .work-message-in {
- display: flex;
- align-items: center;
- padding: 26rpx;
- .view {
- &:first-child {
- flex-grow: 1;
- text-align: center;
- }
- &:last-child {
- font-size: 24rpx;
- color: #fff;
- display: flex;
- align-items: center;
- }
- }
- }
- }
- .cover-view {
- position: absolute;
- top: calc(60% - 150rpx);
- left: calc(50% - 360rpx);
- .flex-wrp {
- display: flex;
- flex-direction: column;
- background: rgba(0, 0, 0, 0.3);
- border-radius: 10rpx;
- padding: 10rpx 0;
- }
- .flex-item {
- width: 110rpx;
- height: 110rpx;
- font-size: 24rpx;
- color: #F8F8F8;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- .img {
- width: 50rpx;
- height: 50rpx;
- margin-bottom: 10rpx;
- }
- }
- }
- .cover-location {
- position: absolute;
- top: calc(75%);
- left: calc(85%);
- .img {
- width: 80rpx;
- height: 80rpx;
- }
- }
- .cover-bottom {
- position: absolute;
- bottom: calc(60rpx);
- width: 80%;
- left: calc(9%);
- uni-button[type=warn] {
- background: red;
- u-icon {
- margin-right: 15rpx;
- }
- }
- }
- }
- }
- </style>
|