ebike-ui/ebike-user/pages/user/scan/applysite.vue

<template>
  <map
    id="mapRef"
    ref="mapRef"
    :style="{ width: '100%', height: scrollHeight + 'rpx' }"
    :scale="scale"
    :longitude="longitude"
    :latitude="latitude"
    :markers="markers"
    @tap="mapTap"
    @poitap="mapTap"
  />
  <view
    class="info_box"
    :style="{
      height: scrollHeight - 50 + 'rpx',
    }"
  >
    <view class="divTitle">申请位置</view>
    <view>
      <uni-easyinput
        v-model="data.site"
        placeholder="所在定位 点击地图修改地址"
        disabled="true"
      />
    </view>
    <view class="divTitle">原因</view>
    <view>
      <uni-easyinput
        v-model="data.reason"
        placeholder="输入原因"
        maxlength="100"
        type="textarea"
      />
    </view>
    <view class="divBtn" @click="submit">提交</view>
  </view>
</template>

<script setup>
import AMapWX from "@/utils/amap-wx.130.js";
import { ref, onMounted, getCurrentInstance } from "vue";
import * as map from "@/utils/usermap.js";
import { showModelMessage, jkcBaseDecode } from "@/utils/tools.js";
import { callOrdereApi } from "@/utils/api.js";
import { onShow } from "@dcloudio/uni-app";

var amapsdk = new AMapWX({
  key: map.sdkKey,
});

// 创建地图实例
const mapRef = ref();
let oMap = null;
const scale = 15;
const scrollHeight = ref(330);
const markers = ref([]);
const latitude = ref(null);
const longitude = ref(null);

const data = ref({
  site: "",
  reason: "",
  zoneName: "",
});
let oUser = null;

const getLoalcationPoint = () => {
  map.getLoalcation((res) => {
    console.log(res);
    const { longitude: lng, latitude: lat } = res;
    latitude.value = lat;
    longitude.value = lng;
    changPoint(lng, lat);
    oMap.moveToLocation();
  });
};

const changPoint = (lng, lat) => {
  map.reverseGeocoder(
    amapsdk,
    lng,
    lat,
    (res) => {
      const { formatted_address, district } = res;
      console.log(res);
      data.value = {
        ...data.value,
        site: formatted_address,
        zoneName: district,
        lat,
        lng,
      };
      console.log(map);
      markers.value = [map.addMarker(0, lng, lat, "point.png")];
      console.log(markers.value);
    },
    (res) => {
      console.error("逆解析失败");
    }
  );
};

function mapTap(e) {
  const {
    detail: { latitude, longitude },
  } = e;
  changPoint(longitude, latitude);
}

const submit = () => {
  const { site, reason, lat, lng, zoneName } = data.value;
  if (!reason) {
    showModelMessage("请填写原因！");
    return;
  }
  showModelMessage("确认提交？", "", true).then(() => {
    const { nickname, mobile } = oUser;

    const params = {
      applySource: "微信小程序",
      applyPosition: site,
      applyLng: lng,
      applyLat: lat,
      applyNickname: nickname,
      applyPhone: mobile,
      applyReason: reason,
      dealState: "0",
      zoneName,
    };
    uni.showLoading({
      title: "提交中",
    });
    callOrdereApi("ebikeUserBacksite/save", params, "post").then((res) => {
      uni.hideLoading();
      const { code, data, message } = res;
      if (code == 200) {
        showModelMessage("提交成功！");
        setTimeout(() => {
          uni.navigateBack();
          // uni.redirectTo({
          //    url: "/pages/user/home/home"
          // })
        }, 2000);
      } else {
        showModelMessage(message);
      }
    });
  });
};

onMounted(() => {
  // 获取地图实例
  oMap = map.getMap("mapRef", getCurrentInstance());

  // 获取设备信息
  const systemInfo = uni.getSystemInfoSync();
  // 获取屏幕高度和状态栏高度
  const screenHeight = systemInfo.screenHeight;
  scrollHeight.value = screenHeight - 100;

  getLoalcationPoint();
});

onShow(() => {
  oUser = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));
});
</script>

<style scoped>
.info_box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx;
  background: white;
}
.divTitle {
  font-size: 30rpx;
  font-weight: bold;
  color: #000;
  line-height: 35px;
}

.divBtn {
  background-color: #61d145;
  color: white;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  margin-top: 40px;
  width: calc(100vw - 30rpx);
}
</style>