work_order/pages/index/index.nvue

<template>
    <view>
        <!-- <button type="primary" @click="trackLocation" v-if="!isGetLocation">持续定位</button>
        <button type="primary" @click="stopLocation" v-else>停止持续定位</button> -->
        <!-- <button type="primary" @click="onceLocation">单次定位</button> -->
        <!-- <button type="primary" @click="calcDistance">坐标距离计算</button> -->
        <!-- <button type="primary" @click="onGeoQuery">坐标反查</button> -->
        <!-- <button type="primary" @click="onRoutePlan">路径规划(唤起外部地图导航)</button> -->
        <!-- <button type="primary" @click="switchCoordType">切换坐标系,当前:{{coordType}}</button> -->
        
        <view class="c-btn">
          <view class="cc" @click="trackLocation" v-if="!isGetLocation">
             <text class="title">开始定位</text>
             <text class="text" v-if="count">定位成功次数：{{count}}次</text>
             <text class="text" v-if="time">{{time}}</text>
             <text class="text log" v-if="log">{{log}}</text>
          </view>
          <view class="cc rr" @click="stopLocation" v-else>
             <text class="title">结束定位</text>
             <text class="text">定位成功次数：{{count}}次</text>
             <text class="text" v-if="time">{{time}}</text>
             <text class="text log" v-if="log">{{log}}</text>
          </view>
          <text class="tips" @click="restart">遇到问题了？ 点击重启</text>
        </view>

        <!-- <view class="">
            <text :selectable="true">{{result}}</text>
        </view> -->
    </view>
</template>

<script>
    //引入插件
    const aMapHelper = uni.requireNativePlugin("SLY-AMapHelper");
    // #ifdef APP-PLUS
    import addKeepalive from '../../uni_modules/fdm-keepalive';
    // #endif
    import { positioning } from "@/api/api.js"
    import { wgsToGcj } from "@/utils/wgs.js"
    export default {
        data() {
            return {
                result: '',
                coordTyps: ['gcj02'],
                // coordTyps: ['gcj02', 'wgs84', 'bd09'],
                coordIndex: 0,
                myLng: 0,
                myLat: 0,
                isGetLocation: false,
                errCount: 0, //定位失败次数
                timer: null,
                count: 0,
                time: '',
                system_type: ''
            }
        },
        //退出页面后停止定位
        onBackPress() {
            aMapHelper.stopLocation();
        },
        computed: {
            coordType() {
                return this.coordTyps[this.coordIndex]
            },
            userInfo(){
              return this.$store.state.app.userInfo;
            }
        },
        onLoad() {
          this.system_type = uni.getSystemInfoSync().platform;
        },
        methods: {
            //单次定位
            onceLocation() {
                uni.showLoading({
                    title: '定位中...'
                })
                this.result = ''
                aMapHelper.getLocation({
                    coordType: this.coordType,
                }, (res) => {
                    uni.hideLoading();
                    this.result = JSON.stringify(res);
                    if (res.errorCode == 0) {
                        this.myLng = res.longitude;
                        this.myLat = res.latitude;
                        this.result =
                            `
                            定位时间：${res.formatTime}
                            坐标：${res.longitude},${res.latitude}
                            坐标系：${res.coordType}
                            位置描述:${res.address}
                            `
                    } else if (res.errorCode == 12) { //用户拒绝定位权限
                        //当用户选择了“拒绝且不再询问”时，应用无法再弹出权限申请框，必须引导用户前往设置页面手动开启。
                        let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
                        uni.showModal({
                            title: '提示',
                            content: res.errorInfo,
                            success: (res) => {
                                if (res.confirm && deniedPermissionAndNoAsk) {
                                    //打开设置页面
                                    aMapHelper.openSettingPage();
                                }
                            }
                        })
                    }

                })
            },
            //连续定位
            trackLocation() {
              if(this.errCount==-1) this.restart(); // 如果出现问题， 直接重启app
              if(this.system_type=='ios') return this.phoneLocation();
                try{
                  // #ifdef APP-PLUS
                  addKeepalive();
                  // #endif
                  this.result = '';
                  let count = 0;
                  this.isGetLocation = true;
                  this.phoneLocation();
                  aMapHelper.trackLocation({
                      intervalTime: 6*1000,
                      notificationTitle: '工单系统',
                      notificationContent: '正在定位, 请勿关闭',
                      enableTrackExplain: '需要持续获取位置进行上报',
                      coordType: this.coordType
                  }, (res) => {
                      //调试时请以控制台日志是否持续打印为准，息屏后view页面可能不会更新result结果
                      // console.log("【持续定位结果】", `时间：${res.formatTime},坐标：${res.longitude},${res.latitude}, 信息:`, res);
                      // if(res.errorCode == 0){
                      //   if(this.errCount>3) this.phoneLocation();
                      //   else this.errCount++;
                      // }
                      // if (res.errorCode == 0) {
                      //     this.result =
                      //         `
                      //         定位次数:${++count}
                      //         定位时间：${res.formatTime}
                      //         坐标：${res.longitude},${res.latitude}
                      //         坐标系：${res.coordType}
                      //         设备方向：${res.direction}
                      //         海拔：${res.altitude}米`
                      //     positioning({
                      //       member_code: this.userInfo.code,
                      //       positioning: `${res.longitude},${res.latitude}`
                      //     }).then(ok=>{
                      //       console.log('上传成功', ok);
                      //     }).catch(err=>{
                      //       console.log('上传失败', err);
                      //     })    
                      // } else if (res.errorCode == 12) {
                      //     let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
                      //     uni.showModal({
                      //         title: '提示',
                      //         content: res.errorInfo,
                      //         success: (res) => {
                      //             if (res.confirm && deniedPermissionAndNoAsk) {
                      //                 aMapHelper.openSettingPage();
                      //             }
                      //         }
                      //     })
                      // }
                  })
                }catch(e){
                  //TODO handle the exception
                }
            },
            //本机连续定位
            phoneLocation(){
              if (this.timer) {
                clearInterval(this.timer);
              } else {
                this.count++;
                this.getAddress();
                this.timer = setInterval(() => {
                  this.count++;
                  this.getAddress();
                }, 6 * 1000);
              }
            },
            
            getAddress() {
              uni.getLocation({
                geocode: true,
                success: (res) => {
                  console.log('本机获取定位成功', res);
                  res = wgsToGcj(res);
                  // this.result = `
                  //           定位次数:${this.count}
                  //           定位时间：${this.formatDate(new Date())}
                  //           坐标：${res.longitude},${res.latitude}`
                  this.time = this.formatDate(new Date());
                  positioning({
                    member_code: this.userInfo.code,
                    positioning: `${res.longitude},${res.latitude}`
                  }).then(ok=>{
                    console.log('上传成功', ok);
                    this.log = '';
                  }).catch(err=>{
                    console.log('上传失败', err);
                    this.log = '错误！网络状态不佳';
                  })    
                },
                fail: (err) => {
                  console.log('本机获取定位失败', err);
                  this.log = '错误！定位失败，请重启应用重试！';
                }
              })
            },
            formatDate(date) {
              const year = date.getFullYear();
              const month = String(date.getMonth() + 1).padStart(2, '0');
              const day = String(date.getDate()).padStart(2, '0');
              const hours = String(date.getHours()).padStart(2, '0');
              const minutes = String(date.getMinutes()).padStart(2, '0');
              const seconds = String(date.getSeconds()).padStart(2, '0');
            
              return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            //停止定位
            stopLocation() {
                aMapHelper.stopLocation();
                clearInterval(this.timer);
                this.isGetLocation = false;
                this.errCount = -1;
            },
            //计算坐标距离
            calcDistance() {
                let distance = aMapHelper.calcDistance({
                    lngLat1: [116.368904, 39.9234230],
                    lngLat2: [116.387271, 39.922501]
                })
                this.result = `距离：${distance}米`
            },
            //逆地址编码，即根据坐标反查位置信息
            onGeoQuery() {
                if (this.myLng == 0 || this.myLat == 0) {
                    uni.showToast({
                        title: '请先执行单次定位',
                        icon: 'none'
                    })
                    return;
                }
                aMapHelper.reGeoQuery({
                    lng: this.myLng,
                    lat: this.myLat,
                    radius: 200, //范围多少米
                    coordType: this.coordTyps[this.coordIndex] //火系坐标系还是GPS原生坐标系,仅支持"gcj02","wgs84"2中
                }, res => {
                    console.log("逆地址结果", res);
                    if (res.errorCode == 0) {
                        //成功,更多结果，打印res.result
                        this.result = res.result.formatAddress
                    } else {
                        //失败
                        this.result = res.msg;
                    }
                })
            },
            onRoutePlan() {
                aMapHelper.routePlan({
                    sname: "春熙路", //可选，不传默认“我的位置”
                    slat: 30.654899, //可选，不传默认当前纬度
                    slng: 104.078657, //可选，
                    dname: "天府广场", //可选，不传默认“目的地”
                    dlat: 30.657401, //必填
                    dlng: 104.065861, //必填
                })
            },
            switchCoordType() {
                this.coordIndex = (this.coordIndex + 1) % 3;
                aMapHelper.stopLocation();
            },
            restart() {
              if (typeof plus !== 'undefined') { // 检查是否在 App 中运行
                plus.runtime.restart()
              }
            },
        }
    }
</script>

<style lang="scss">
  .c-btn{
    // background-color: #33ff33;
    width: 750rpx;
    height: 750rpx;
    margin-top: 100rpx;
    justify-content: center;
    align-items: center;
    .cc{
      height: 500rpx;
      width: 500rpx;
      background-color: #42b983;
      justify-content: center;
      align-items: center;
      // background-color: rgba(#42b983, 0.5);
      // border: 5rpx solid #42b983;
      border-radius: 400rpx;
      .title{
        color: #fff;
        font-size: 44rpx;
      }
      .text{
        color: #fff;
        font-size: 28rpx;
      }
      .log{
        color: red;
        font-size: 34rpx;
      }
    }
    .rr{
      background-color: #e6852c;
    }
    .tips{
      color: #999;
      padding-top: 30rpx;
    }
  }
</style>