fix:申请换车点
This commit is contained in:
5g0Wp7Zy
parent
15c89d0a81
commit
1f980fe663
@ -1,102 +1,102 @@
|
||||
<template>
|
||||
<div :style="{width:'100%',height:height}">
|
||||
<div class="divBtn" @click="getLoalcationPoint">
|
||||
<uni-icons custom-prefix="iconfont" type="icon-ebikedingwei2" color="#6f7777" size="16" />
|
||||
<div>定位</div>
|
||||
</div>
|
||||
<map id="mapRef" ref="mapRef" show-location :style="{width:'100%',height:height}" :scale="scale"
|
||||
:longitude="longitude" :latitude="latitude" :markers="markers" @tap="ontap" />
|
||||
</div>
|
||||
<div :style="{ width: '100%', height: height }">
|
||||
<div class="divBtn" @click="getLoalcationPoint">
|
||||
<uni-icons
|
||||
custom-prefix="iconfont"
|
||||
type="icon-ebikedingwei2"
|
||||
color="#6f7777"
|
||||
size="16"
|
||||
/>
|
||||
<div>定位</div>
|
||||
</div>
|
||||
<map
|
||||
id="mapRef"
|
||||
ref="mapRef"
|
||||
show-location
|
||||
:style="{ width: '100%', height: height }"
|
||||
:scale="scale"
|
||||
:longitude="longitude"
|
||||
:latitude="latitude"
|
||||
:markers="markers"
|
||||
@tap="ontap"
|
||||
/>
|
||||
</div>
|
||||
</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 {
|
||||
findIndex
|
||||
} from "lodash";
|
||||
import AMapWX from "@/utils/amap-wx.130.js";
|
||||
import { ref, onMounted, getCurrentInstance } from "vue";
|
||||
import * as map from "@/utils/usermap.js";
|
||||
import { findIndex } from "lodash";
|
||||
|
||||
var amapsdk = new AMapWX({
|
||||
key: map.sdkKey
|
||||
});
|
||||
var amapsdk = new AMapWX({
|
||||
key: map.sdkKey,
|
||||
});
|
||||
|
||||
const {
|
||||
lng,
|
||||
lat,
|
||||
height
|
||||
} = defineProps(["lng", "lat", "height"]);
|
||||
const emit = defineEmits(["change"]);
|
||||
const { lng, lat, height } = defineProps(["lng", "lat", "height"]);
|
||||
const emit = defineEmits(["change"]);
|
||||
|
||||
const mapRef = ref("mapRef");
|
||||
let oMap = null;
|
||||
const latitude = ref(lat);
|
||||
const longitude = ref(lng);
|
||||
const scale = ref(15);
|
||||
const point = lng && lat ? [map.addMarker(1, lng, lat, "point.png")] : null;
|
||||
const markers = ref(point);
|
||||
const mapRef = ref("mapRef");
|
||||
let oMap = null;
|
||||
const latitude = ref(lat);
|
||||
const longitude = ref(lng);
|
||||
const scale = ref(15);
|
||||
const point = lng && lat ? [map.addMarker(1, lng, lat, "point.png")] : null;
|
||||
const markers = ref(point);
|
||||
|
||||
onMounted(() => {
|
||||
oMap = map.getMap("mapRef", getCurrentInstance());
|
||||
});
|
||||
onMounted(() => {
|
||||
oMap = map.getMap("mapRef", getCurrentInstance());
|
||||
});
|
||||
|
||||
const ontap = (e) => {
|
||||
const {
|
||||
detail: {
|
||||
latitude: lat,
|
||||
longitude: lng
|
||||
}
|
||||
} = e;
|
||||
changPoint(lng, lat);
|
||||
}
|
||||
|
||||
const getLoalcationPoint = () => {
|
||||
map.getLoalcation( (res) => {
|
||||
const {
|
||||
longitude: lng,
|
||||
latitude: lat
|
||||
} = res;
|
||||
latitude.value = lat;
|
||||
longitude.value = lng;
|
||||
changPoint(lng, lat);
|
||||
oMap.moveToLocation();
|
||||
});
|
||||
}
|
||||
|
||||
const changPoint = (lng, lat) => {
|
||||
const arrPoint = markers.value;
|
||||
let index = findIndex(arrPoint, {
|
||||
id: 1
|
||||
});
|
||||
index = index == -1 ? arrPoint.length : index;
|
||||
arrPoint[index] = map.addMarker(1, lng, lat, "point.png");
|
||||
markers.value = arrPoint;
|
||||
map.reverseGeocoder(amapsdk, lng, lat, (res) => {
|
||||
emit('change', res);
|
||||
}, (res) => {
|
||||
|
||||
})
|
||||
}
|
||||
const ontap = (e) => {
|
||||
const {
|
||||
detail: { latitude: lat, longitude: lng },
|
||||
} = e;
|
||||
changPoint(lng, lat);
|
||||
};
|
||||
|
||||
const getLoalcationPoint = () => {
|
||||
map.getLoalcation((res) => {
|
||||
const { longitude: lng, latitude: lat } = res;
|
||||
latitude.value = lat;
|
||||
longitude.value = lng;
|
||||
changPoint(lng, lat);
|
||||
oMap.moveToLocation();
|
||||
});
|
||||
};
|
||||
|
||||
const changPoint = (lng, lat) => {
|
||||
const arrPoint = markers.value;
|
||||
let index = findIndex(arrPoint, {
|
||||
id: 1,
|
||||
});
|
||||
index = index == -1 ? arrPoint.length : index;
|
||||
arrPoint[index] = map.addMarker(1, lng, lat, "point.png");
|
||||
markers.value = arrPoint;
|
||||
map.reverseGeocoder(
|
||||
amapsdk,
|
||||
lng,
|
||||
lat,
|
||||
(res) => {
|
||||
emit("change", res);
|
||||
},
|
||||
(res) => {}
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.divBtn {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 10px 5px;
|
||||
border: 1px solid #80808061;
|
||||
}
|
||||
.divBtn {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 10px 5px;
|
||||
border: 1px solid #80808061;
|
||||
}
|
||||
</style>
|
||||
@ -1,194 +1,195 @@
|
||||
<template>
|
||||
<map :style="{width: '100vw',height: scrollHeight+'px'}" :scale="scale" :longitude="mapcenter.longitude"
|
||||
:latitude="mapcenter.latitude" :markers="markers" @tap="mapTap" @poitap="mapTap" show-location />
|
||||
<div class="divInfo">
|
||||
<div class="divTitle">申请位置</div>
|
||||
<div>
|
||||
<uni-easyinput v-model="data.site" placeholder="所在定位 点击地图修改地址" disabled="true" />
|
||||
</div>
|
||||
<div class="divTitle">原因</div>
|
||||
<div>
|
||||
<uni-easyinput v-model="data.reason" placeholder="输入原因" maxlength="100" type="textarea" />
|
||||
</div>
|
||||
<div class="divBtn" @click="submit">
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<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 {
|
||||
ref
|
||||
} from 'vue';
|
||||
import AMapWX from "@/utils/amap-wx.130.js";
|
||||
import {
|
||||
onShow
|
||||
} from "@dcloudio/uni-app";
|
||||
import * as map from "@/utils/usermap.js";
|
||||
import {
|
||||
callOrdereApi
|
||||
} from '@/utils/api.js';
|
||||
import {
|
||||
showModelMessage,
|
||||
jkcBaseDecode
|
||||
} from "@/utils/tools.js";
|
||||
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
|
||||
});
|
||||
var amapsdk = new AMapWX({
|
||||
key: map.sdkKey,
|
||||
});
|
||||
|
||||
const scale = 15;
|
||||
const mapcenter = ref({
|
||||
longitude: null,
|
||||
latitude: null
|
||||
});
|
||||
const markers = ref([]);
|
||||
// 创建地图实例
|
||||
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 data = ref({
|
||||
site: "",
|
||||
reason: "",
|
||||
zoneName: "",
|
||||
});
|
||||
let oUser = null;
|
||||
|
||||
// 获取设备信息
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
// 获取屏幕高度和状态栏高度
|
||||
const screenHeight = systemInfo.screenHeight;
|
||||
let scrollHeight = screenHeight - 330;
|
||||
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();
|
||||
});
|
||||
};
|
||||
|
||||
onShow(() => {
|
||||
oUser = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));
|
||||
map.getLoalcation((res) => {
|
||||
const {
|
||||
latitude,
|
||||
longitude
|
||||
} = res;
|
||||
mapcenter.value = {
|
||||
latitude,
|
||||
longitude
|
||||
}
|
||||
getPoint(longitude, latitude);
|
||||
})
|
||||
})
|
||||
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 getPoint(longitude, latitude) {
|
||||
map.reverseGeocoder(amapsdk, longitude, latitude, (res) => {
|
||||
const {
|
||||
formatted_address,
|
||||
district
|
||||
} = res;
|
||||
// const {
|
||||
// address,
|
||||
// location: {
|
||||
// lat,
|
||||
// lng
|
||||
// },
|
||||
// ad_info:{
|
||||
// district
|
||||
// }
|
||||
// } = res;
|
||||
data.value = {
|
||||
...data.value,
|
||||
site: formatted_address,
|
||||
zoneName: district,
|
||||
lat: longitude,
|
||||
lng: latitude
|
||||
};
|
||||
markers.value = [map.addMarker(0, longitude, latitude, "point.png")];
|
||||
})
|
||||
}
|
||||
function mapTap(e) {
|
||||
const {
|
||||
detail: { latitude, longitude },
|
||||
} = e;
|
||||
changPoint(longitude, latitude);
|
||||
}
|
||||
|
||||
function mapTap(e) {
|
||||
const {
|
||||
detail: {
|
||||
latitude,
|
||||
longitude
|
||||
}
|
||||
} = e;
|
||||
getPoint(longitude, latitude);
|
||||
}
|
||||
const submit = () => {
|
||||
const { site, reason, lat, lng, zoneName } = data.value;
|
||||
if (!reason) {
|
||||
showModelMessage("请填写原因！");
|
||||
return;
|
||||
}
|
||||
showModelMessage("确认提交？", "", true).then(() => {
|
||||
const { nickname, mobile } = oUser;
|
||||
|
||||
function 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
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>
|
||||
.divInfo {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
height: 330px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.divTitle {
|
||||
font-size: 16px;
|
||||
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: 100vw;
|
||||
}
|
||||
.divBtn {
|
||||
background-color: #61d145;
|
||||
color: white;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
margin-top: 40px;
|
||||
width: calc(100vw - 30rpx);
|
||||
}
|
||||
</style>
|
||||
@ -39,19 +39,48 @@ export function getLoalcation(success, fail) {
|
||||
}
|
||||
|
||||
//逆解析地址
|
||||
export function reverseGeocoder(qqmapsdk, longitude, latitude, success, fail) {
|
||||
qqmapsdk.reverseGeocoder({
|
||||
location: {
|
||||
latitude: latitude,
|
||||
longitude: longitude
|
||||
export function reverseGeocoder(mapsdk, longitude, latitude, success, fail) {
|
||||
mapsdk.getRegeo({
|
||||
location: `${longitude},${latitude}`,
|
||||
success: function (res) {
|
||||
const {
|
||||
name,
|
||||
regeocodeData
|
||||
} = res[0];
|
||||
const {
|
||||
addressComponent: {
|
||||
adcode,
|
||||
province,
|
||||
city,
|
||||
district
|
||||
},
|
||||
formatted_address
|
||||
} = regeocodeData
|
||||
if (success) success({
|
||||
name,
|
||||
formatted_address,
|
||||
adcode,
|
||||
province,
|
||||
city,
|
||||
district
|
||||
});
|
||||
},
|
||||
success: (res) => {
|
||||
if (success) success(res.result);
|
||||
},
|
||||
fail: (res) => {
|
||||
if (fail) success(fail);
|
||||
fail: function (info) {
|
||||
if (fail) fail(res);
|
||||
}
|
||||
})
|
||||
// qqmapsdk.reverseGeocoder({
|
||||
// location: {
|
||||
// latitude: latitude,
|
||||
// longitude: longitude
|
||||
// },
|
||||
// success: (res) => {
|
||||
// if (success) success(res.result);
|
||||
// },
|
||||
// fail: (res) => {
|
||||
// if (fail) success(fail);
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
//添加点
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user