hitap-chat/pages/create/create.vue

<template>
  <view class="create-investigation">
    <top-title title="排查选择" class="custom_bg"></top-title>
    
    <view class="page-body">
      <map
        class="map"
        :latitude="latitude"
        :longitude="longitude"
        :scale="scale"
        :markers="markers"
      />
    </view>
    
    <view class="page-footer">
      <cover-view class="controls">
        <cover-view class="reload-position" @click="getLocationInfo">
          <cover-image src="/static/position-outlined.png" />
        </cover-view>
      </cover-view>
      
      <view class="init-content" v-if="!isChanging">
        <view class="footer-content">
          <text class="title">根据当前定位信息，您要排查的是这条路吗？</text>
          <text class="position-name">山东路（香港中路-闽江路）</text>
        </view>
        <three
          class="footer-buttons"
          first-text="更换"
          second-text="智能排查"
          third-text="人工排查"
          :second-primary="true"
          @first="isChanging = true"
        />
      </view>
      <change v-else />
    </view>
  </view>
</template>

<script>
import TopTitle from "../../components/top-title.vue";
import Three from "../../components/bottom-button/three.vue";
import Change from "./Change.vue";

export default {
  components: {Change, TopTitle, Three},
  data() {
    return {
      latitude: 39.909, // 默认定在首都
      longitude: 116.39742,
      scale: 12, // 默认16
      markers: [],
      markerHeight: 60,
      isChanging: false,
      res: null
    };
  },
  methods: {
    //   初次位置授权
    getAuthorize() {
      return new Promise((resolve, reject) => {
        uni.authorize({
          scope: "scope.userLocation",
          success: () => {
            resolve(); // 允许授权
          },
          fail: () => {
            reject(); // 拒绝授权
          },
        });
      });
    },
    // 确认授权后，获取用户位置
    getLocationInfo() {
      uni.getLocation({
        type: "gcj02",
        success: (res) => {
          console.log(res)
          // 暂时
          this.longitude = res.longitude; //118.787575;
          this.latitude = res.latitude; //32.05024;
          this.markers = [
            {
              id: "",
              latitude: res.latitude,
              longitude: res.longitude,
              iconPath: "/static/icon/fill_position.svg",
              width: this.markerHeight, //宽
              height: this.markerHeight, //高
            },
          ];
          this.getList();
        },
      });
    },
    // 彻底拒绝位置获取
    rejectGetLocation() {
      uni.showToast({
        title: "你拒绝了授权，无法获得周边信息",
        icon: "none",
        duration: 2000,
      });
    },
    getList() {
      const data = {
        nuserid: localStorage.getItem('token'),
        x: this.latitude,
        y: this.longitude,
      }
      this.$request
        .globalRequest('/hiddenDanger/highDanger/getNearRoadInfo', data, 'POST')
        .then(res => {
          console.log(res)
          this.res = res;
        })
    },
  },
  onReady() {
      // wx请求获取位置权限
    this.getAuthorize()
      .then(() => {
        //   同意后获取
        this.getLocationInfo();
      })
      .catch(() => {
        //   不同意给出弹框，再次确认
        this.getLocationInfo();
      });
  }
}
</script>

<style lang="scss" scoped>
.create-investigation {
  height: 100vh;
  width : 100vw;
  display: flex;
  flex-direction: column;
  
  .page-body {
    width      : 100%;
    padding-top: calc(var(--status-bar-height) + 88rpx);
    //height     : calc(100vh - var(--status-bar-height) - 88rpx);
    position   : relative;
    z-index: 1;
    flex: 1;
    
    .map {
      width : 100vw;
      height: 100%;
    }
  }
  
  .page-footer {
    width: 100vw;
    min-height: 260rpx;
    //z-index: 9999999999999;
    overflow: visible;
    position: relative;
    
    .controls {
      position: absolute;
      right: 24rpx;
      top: -130rpx;
      
      .reload-position {
        width: 56rpx;
        height: 56rpx;
        border-radius: 24rpx;
        overflow: hidden;
        background: #ffffff;
        padding: 24rpx;
        
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    
    .init-content {
      background: #ffffff;
      width: calc(100vw - 32rpx);
      margin: 0 auto;
      
      .footer-content {
        padding: 32rpx 0;
        text-align: center;
        display: block;
        margin-bottom: 0;
        
        .title {
          text-align: center;
          font-size: 28rpx;
          color: #777777;
        }
        
        .position-name {
          font-size: 36rpx;
          color: #333333;
          padding-top: 24rpx;
          display: block;
        }
      }
      
      .footer-buttons {
        width: calc(100% - 72rpx);
        margin-top: 0;
      }
    }
  }
}
</style>
<style lang="scss">
.amap-logo, .amap-copyright {
  display: none !important;
}
</style>