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