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

<template>
	<map :style="{width: '100vw',height: scrollHeight+'px'}" :scale="scale" :longitude="mapcenter.longitude"
		:latitude="mapcenter.latitude" :markers="markers" @tap="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>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import QQMapWX from "qqmap-wx-jssdk";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import * as map from "@/utils/usermap.js";
	import {
		callOrdereApi
	} from '@/utils/api.js';
	import {
		showModelMessage
	} from "@/utils/tools.js";

	var qqmapsdk = new QQMapWX({
		key: map.sdkKey
	});

	const scale = 15;
	const mapcenter = ref({
		longitude: null,
		latitude: null
	});
	const markers = ref([]);

	const data = ref({
		site: "",
		reason: "",
		zoneName:""
	});
	let oUser = null;
	
	// 获取设备信息
	const systemInfo = uni.getSystemInfoSync();
	// 获取屏幕高度和状态栏高度
	const screenHeight = systemInfo.screenHeight;
	let scrollHeight = screenHeight - 330;

	onShow(() => {
		oUser = uni.getStorageSync("wechat_user");
		map.getLoalcation((res) => {
			const {
				latitude,
				longitude
			} = res;
			mapcenter.value = {
				latitude,
				longitude
			}
			getPoint(longitude, latitude);
		})
	})

	function getPoint(longitude, latitude) {
		map.reverseGeocoder(qqmapsdk, longitude, latitude, (res) => {
			const {
				address,
				location: {
					lat,
					lng
				},
				ad_info:{
					district
				}
			} = res;
			data.value = {
				...data.value,
				site: address,
				zoneName: district,
				lat,
				lng
			};
			markers.value = [map.addMarker(0, lng, lat, "point.png")];
		})
	}

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

	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.navigateTo({
							url:"/pages/user/home/home"
						})
					},2000);
				}
				else{
					showModelMessage(message);
				}
			});
		});

	}
</script>

<style scoped>
	.divInfo {
		position: absolute;
		bottom: 0;
		background: white;
		padding: 15px;
		height: 330px;
	}

	.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;
	}
</style>