|
|
@@ -13,33 +13,58 @@
|
|
|
class="light-map-map"
|
|
|
:enable-poi="false"
|
|
|
:scale="12"
|
|
|
- :longitude="currentLonlat.longitude"
|
|
|
- :latitude="currentLonlat.latitude"
|
|
|
+ :longitude="lonlat?.longitude"
|
|
|
+ :latitude="lonlat?.latitude"
|
|
|
@markertap="onMarkerTap"
|
|
|
/>
|
|
|
- <FlexCol v-if="isEmptyRegion" gap="gap.md" position="absolute" inset="0" center backgroundColor="mask.default">
|
|
|
- <Text>您选择的地区还未开通亮乡源数据,可联系客服开通</Text>
|
|
|
+ <FlexCol v-if="isEmptyRegion"
|
|
|
+ gap="gap.xl"
|
|
|
+ position="absolute"
|
|
|
+ inset="0"
|
|
|
+ padding="space.xl"
|
|
|
+ center
|
|
|
+ backgroundColor="mask.default"
|
|
|
+ >
|
|
|
+ <Text fontConfig="importantTitle" textAlign="center">您选择的地区还未开通亮乡源数据,可联系客服开通</Text>
|
|
|
<button open-type="contact" class="remove-button-style">
|
|
|
- <Button type="primary" text="联系客服"></Button>
|
|
|
+ <FlexCol padding="space.md" radius="radius.lg" center backgroundColor="white">
|
|
|
+ <Text fontConfig="primaryTitle">联系客服</Text>
|
|
|
+ </FlexCol>
|
|
|
</button>
|
|
|
</FlexCol>
|
|
|
<SimpleDropDownPicker
|
|
|
+ v-if="!isEmptyRegion"
|
|
|
class="light-map-region-picker"
|
|
|
:modelValue="selectedRegion"
|
|
|
@update:modelValue="onSelectedRegion"
|
|
|
:columns="regionLoader.content.value"
|
|
|
/>
|
|
|
- <Button
|
|
|
+ <FlexCol
|
|
|
+ v-if="isDev"
|
|
|
+ :innerStyle="{
|
|
|
+ position: 'absolute',
|
|
|
+ bottom: '20rpx',
|
|
|
+ left: '20rpx',
|
|
|
+ zIndex: 100,
|
|
|
+ backgroundColor: '#ffffff',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <Text :text="`lonlat:`" />
|
|
|
+ <Text :text="`${lonlat?.longitude}`" />
|
|
|
+ <Text :text="`${lonlat?.latitude}`" />
|
|
|
+ </FlexCol>
|
|
|
+ <NButton
|
|
|
:innerStyle="{
|
|
|
position: 'absolute',
|
|
|
bottom: '20rpx',
|
|
|
right: '20rpx',
|
|
|
zIndex: 100,
|
|
|
backgroundColor: '#ffffff',
|
|
|
- }"
|
|
|
+ }"
|
|
|
+ text="定位"
|
|
|
icon="navigation"
|
|
|
- @click="getCurrentLonlat"
|
|
|
- >定位</Button>
|
|
|
+ @click="emit('getCurrentLonlat')"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -47,14 +72,12 @@
|
|
|
import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
|
|
|
import { navTo } from '@/components/utils/PageAction';
|
|
|
import { waitTimeOut } from '@imengyu/imengyu-utils';
|
|
|
-import { useVillageStore } from '@/store/village';
|
|
|
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
|
|
|
import LightVillageApi, { VillageListItem } from '@/api/light/LightVillageApi';
|
|
|
import type { MapMarker } from '@/types/Map';
|
|
|
-import MapApi from '@/api/map/MapApi';
|
|
|
-import AppCofig from '@/common/config/AppCofig';
|
|
|
+import AppCofig, { isDev } from '@/common/config/AppCofig';
|
|
|
import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
|
|
|
-import Button from '@/components/basic/Button.vue';
|
|
|
+import NButton from '@/components/basic/Button.vue';
|
|
|
import FlexCol from '@/components/layout/FlexCol.vue';
|
|
|
import Text from '@/components/basic/Text.vue';
|
|
|
import CommonContent from '@/api/CommonContent';
|
|
|
@@ -63,31 +86,25 @@ const instance = getCurrentInstance();
|
|
|
const mapCtx = uni.createMapContext('prevMap', instance);
|
|
|
const selectedRegion = ref<number>();
|
|
|
const nextNeedAutoFocus = ref(false);
|
|
|
-const currentAddress = ref<string>('');
|
|
|
-const currentLonlat = ref<{ longitude: number, latitude: number }>({
|
|
|
- longitude: 0,
|
|
|
- latitude: 0,
|
|
|
-});
|
|
|
const villageData = new Map<number, VillageListItem>();
|
|
|
const emit = defineEmits([
|
|
|
- 'getedCurrentLonlat',
|
|
|
+ 'getCurrentLonlat',
|
|
|
'update:isLightMode',
|
|
|
+ 'update:lonlat',
|
|
|
'selectVillage',
|
|
|
- 'changedCity',
|
|
|
+ 'regionChanged',
|
|
|
]);
|
|
|
|
|
|
const props = defineProps<{
|
|
|
- startLonlat?: { longitude: number, latitude: number } | undefined;
|
|
|
+ lonlat?: { longitude: number, latitude: number } | undefined;
|
|
|
+ city?: string;
|
|
|
isLightMode?: boolean;
|
|
|
- limitCity?: string;
|
|
|
small?: boolean;
|
|
|
full?: boolean;
|
|
|
}>();
|
|
|
|
|
|
-const villageStore = useVillageStore();
|
|
|
-
|
|
|
const regionLoader = useSimpleDataLoader(async () => {
|
|
|
- return (await CommonContent.searchRegion(props.limitCity)).map(p => ({
|
|
|
+ return (await CommonContent.searchRegion(props.city)).map(p => ({
|
|
|
id: p.id,
|
|
|
name: p.title,
|
|
|
}));
|
|
|
@@ -196,46 +213,20 @@ function onSelectedRegion(regionId: number) {
|
|
|
selectedRegion.value = regionId;
|
|
|
nextNeedAutoFocus.value = true;
|
|
|
mapLoader.reload();
|
|
|
+ emit('regionChanged', regionId);
|
|
|
}
|
|
|
function setCurrentRegion(regionName: string) {
|
|
|
- selectedRegion.value = regionLoader.content.value?.find(p => p.name == regionName)?.id || undefined;
|
|
|
+ selectedRegion.value = regionLoader.content.value?.find(p => p.name == regionName)?.id ||
|
|
|
+ regionLoader.content.value?.[0]?.id || undefined;
|
|
|
+ emit('regionChanged', selectedRegion.value);
|
|
|
mapLoader.reload();
|
|
|
}
|
|
|
-function getCurrentLonlat() {
|
|
|
- uni.getLocation({
|
|
|
- type: 'wgs84',
|
|
|
- success: async (res) => {
|
|
|
- currentLonlat.value = {
|
|
|
- longitude: res.longitude,
|
|
|
- latitude: res.latitude,
|
|
|
- };
|
|
|
- villageStore.setCurrentLonlat(currentLonlat.value);
|
|
|
- const address = await MapApi.regeo(res.latitude, res.longitude);
|
|
|
- currentAddress.value = address.district;
|
|
|
- villageStore.setCurrentRegion(address.district);
|
|
|
- setCurrentRegion(address.district);
|
|
|
- emit('getedCurrentLonlat', currentLonlat.value);
|
|
|
- emit('changedCity', address.city);
|
|
|
- mapCtx.moveToLocation({
|
|
|
- latitude: currentLonlat.value.latitude,
|
|
|
- longitude: currentLonlat.value.longitude,
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
-}
|
|
|
-watch(() => props.limitCity, (newVal) => {
|
|
|
- regionLoader.reload();
|
|
|
- mapLoader.reload();
|
|
|
-});
|
|
|
-watch(() => props.startLonlat, (newVal) => {
|
|
|
- if (newVal) {
|
|
|
- currentLonlat.value = newVal;
|
|
|
- mapCtx.moveToLocation({
|
|
|
- latitude: currentLonlat.value.latitude,
|
|
|
- longitude: currentLonlat.value.longitude,
|
|
|
- });
|
|
|
- }
|
|
|
-}, { deep: true });
|
|
|
+
|
|
|
+watch(() => props.city, async (newVal) => {
|
|
|
+ await regionLoader.reload();
|
|
|
+ setCurrentRegion(newVal || '');
|
|
|
+ await mapLoader.reload();
|
|
|
+}, { immediate: true });
|
|
|
|
|
|
onMounted(async () => {
|
|
|
mapCtx.initMarkerCluster({
|
|
|
@@ -270,55 +261,8 @@ onMounted(async () => {
|
|
|
clear: false,
|
|
|
});
|
|
|
});
|
|
|
-
|
|
|
- if (props.startLonlat) {
|
|
|
- currentLonlat.value = props.startLonlat;
|
|
|
- mapCtx.moveToLocation({
|
|
|
- latitude: currentLonlat.value.latitude,
|
|
|
- longitude: currentLonlat.value.longitude,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
await regionLoader.reload();
|
|
|
-
|
|
|
- if (!props.startLonlat) {
|
|
|
-
|
|
|
- if (props.limitCity) {
|
|
|
- const res = await MapApi.searchPoi(props.limitCity);
|
|
|
- if (res.length > 0) {
|
|
|
- currentLonlat.value = {
|
|
|
- longitude: res[0].location[0],
|
|
|
- latitude: res[0].location[1],
|
|
|
- };
|
|
|
- villageStore.setCurrentLonlat(currentLonlat.value);
|
|
|
- regionLoader.reload();
|
|
|
- mapLoader.reload();
|
|
|
- }
|
|
|
- } else {
|
|
|
- const res = await LightVillageApi.getIpAddress();
|
|
|
- currentLonlat.value = {
|
|
|
- longitude: Number(res.point.x),
|
|
|
- latitude: Number(res.point.y),
|
|
|
- };
|
|
|
- villageStore.setCurrentLonlat(currentLonlat.value);
|
|
|
- currentAddress.value = res.address_detail.district;
|
|
|
- setCurrentRegion(res.address_detail.district);
|
|
|
- villageStore.setCurrentRegion(res.address_detail.district);
|
|
|
- emit('changedCity', res.address_detail.city);
|
|
|
- }
|
|
|
- await waitTimeOut(100);
|
|
|
- emit('getedCurrentLonlat', currentLonlat.value);
|
|
|
- mapCtx.moveToLocation({
|
|
|
- latitude: currentLonlat.value.latitude,
|
|
|
- longitude: currentLonlat.value.longitude,
|
|
|
- });
|
|
|
- } else {
|
|
|
- const address = await MapApi.regeo(currentLonlat.value.latitude, currentLonlat.value.longitude);
|
|
|
- currentAddress.value = address.district;
|
|
|
- setCurrentRegion(address.district);
|
|
|
- }
|
|
|
});
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
@@ -338,10 +282,10 @@ onMounted(async () => {
|
|
|
}
|
|
|
}
|
|
|
&.small {
|
|
|
- height: 340rpx;
|
|
|
+ height: 500rpx;
|
|
|
border-radius: 20rpx;
|
|
|
.light-map-map {
|
|
|
- height: 340rpx;
|
|
|
+ height: 500rpx;
|
|
|
}
|
|
|
}
|
|
|
|