🎨 优化地图显示

src/common/components/PrimaryButton.vue

@@ -5,8 +5,11 @@
     :backgroundCutBorderSize="20"
     :padding="[22, 40]"
     :width="block ? undefined : width"
-    :flex="block ? '1 1 100%' : undefined"
-    :innerStyle="innerStyle"
+    :flex="block ? '1 0 100%' : undefined"
+    :innerStyle="{
+      ...innerStyle,
+      flexShrink: 0,
+    }"
     center
     @click="emit('click')"
   >

src/pages/home/components/CitySelect.vue

@@ -22,7 +22,7 @@
       :groupDataBy="(item) => item.first_letter"
       :sortGroup="arr => arr.sort()"
       :innerStyle="{
-        height: '60vh',
+        height: '70vh',
       }"
       dataDisplayProp="name"
       @itemClick="handleCityClick"

src/pages/home/components/LightMap.vue

@@ -23,12 +23,13 @@
       gap="gap.xl" 
       position="absolute" 
       inset="0" 
+      padding="padding.md"
       center 
     > 
-      <FlexCol center gap="gap.md" padding="padding.md" backgroundColor="white" radius="radius.md">
+      <FlexCol center gap="gap.xl" padding="padding.md" backgroundColor="white" radius="radius.md">
         <Text fontConfig="importantTitle" textAlign="center">您选择的地区还未开通亮乡源数据，可联系客服开通</Text>
         <button open-type="contact" class="remove-button-style">
-          <FlexCol padding="space.md" radius="radius.lg" center backgroundColor="white">
+          <FlexCol padding="space.md" radius="radius.lg" center backgroundColor="button">
             <Text fontConfig="primaryTitle">联系客服</Text>
           </FlexCol>
         </button>
@@ -105,6 +106,7 @@ import CommonContent from '@/api/CommonContent';
 import Icon from '@/components/basic/Icon.vue';
 import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
 import type { MapMarker } from '@/types/Map';
+import MapApi from '@/api/map/MapApi';
 
 const instance = getCurrentInstance();
 const mapCtx = uni.createMapContext('prevMap', instance);
@@ -119,6 +121,7 @@ const emit = defineEmits([
   'regionChanged',
 ]);
 const ready = ref(false);
+const hasResItems = ref(false);
 
 const props = defineProps<{
   lonlat?: { longitude: number, latitude: number } | undefined;
@@ -144,7 +147,9 @@ const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
   if (!selectedRegion.value)
     return [];
   await waitTimeOut(200);
-  const res = (await LightVillageApi.getVillageList(undefined, selectedRegion.value, undefined, 1, 1000)).list.map((p, i) => {
+  const res = (await LightVillageApi.getVillageList(undefined, selectedRegion.value, undefined, 1, 1000)).list;
+  hasResItems.value = res.length > 0;
+  const list = res.map((p, i) => {
     villageData.set(p.id, p);
     const maker : MapMarker = {
       id: p.id ?? i,
@@ -187,37 +192,58 @@ const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
     }
 
     return maker as MapMarker;
-  });
+  }).filter(p => 
+    p.longitude && p.latitude 
+    && !isNaN(p.longitude) && !isNaN(p.latitude)
+    && p.longitude > -180 && p.longitude < 180
+    && p.latitude > -90 && p.latitude < 90
+  );
 
   mapCtx.addMarkers({
     clear: true,
-    markers: res, 
+    markers: list, 
   })
 
   if (nextNeedAutoFocus.value) {
-    setTimeout(() => {
-      mapCtx.includePoints({
-        points: res.map(p => {
-          if (!p.longitude || !p.latitude) {
-            p.longitude = AppCofig.defaultLonLat[0];
-            p.latitude = AppCofig.defaultLonLat[1];
-          }
-          return {
-            latitude: p.latitude,
-            longitude: p.longitude,
-          }
-        }),
-        padding: [20, 20, 20, 20],
-      });
-    }, 200);
+    
+    if (res.length > 20) {
+      setTimeout(() => {
+        mapCtx.includePoints({
+          points: list.map(p => {
+            if (!p.longitude || !p.latitude) {
+              p.longitude = AppCofig.defaultLonLat[0];
+              p.latitude = AppCofig.defaultLonLat[1];
+            }
+            return {
+              latitude: p.latitude,
+              longitude: p.longitude,
+            }
+          }),
+          padding: [20, 20, 20, 20],
+        });
+      }, 200);
+    } else {
+      try {
+        const currentRegionName = regionLoader.content.value?.find(p => p.id == selectedRegion.value)?.name;
+        if (currentRegionName) {
+          const res = (await MapApi.simpleGetRegion(currentRegionName)).requireData();
+          mapCtx.moveToLocation({
+            latitude: Number(res.center.split(',')[1]),
+            longitude: Number(res.center.split(',')[0]),
+          });
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
   }
 
   ready.value = true;
-  return res;
+  return list;
 }, false, false);
 
 const isEmptyRegion = computed(() => {
-  return (!mapLoader.content.value?.length) && ready.value;
+  return !hasResItems.value && ready.value;
 });
 
 function onMarkerTap(e: any) {

src/pages/home/components/VillageMiniMap.vue

@@ -15,6 +15,19 @@
       :longitude="lonlat.longitude"
       :latitude="lonlat.latitude"
     />
+
+    
+    <FlexCol v-if="!isValidLonlat" 
+      gap="gap.xl" 
+      position="absolute" 
+      inset="0" 
+      center 
+    > 
+      <FlexCol center gap="gap.md" padding="padding.md" backgroundColor="white" radius="radius.md">
+        <Text fontConfig="importantTitle" textAlign="center">经纬度无效，无法显示地图</Text>
+      </FlexCol>
+    </FlexCol>
+
     <NoticeBar 
       v-if="currentNoticeContent"
       :content="currentNoticeContent"
@@ -45,6 +58,8 @@ import { useTheme } from '@/components/theme/ThemeDefine';
 import NoticeBar from '@/components/display/NoticeBar.vue';
 import type { MapMarker } from '@/types/Map';
 import ImagesUrls from '@/common/config/ImagesUrls';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import Text from '@/components/basic/Text.vue';
 
 const emit = defineEmits(['getedCurrentLonlat']);
 const props = withDefaults(defineProps<{
@@ -59,9 +74,17 @@ const props = withDefaults(defineProps<{
   }),
 });
 
+const isValidLonlat = computed(() => {
+  return (
+    props.lonlat && props.lonlat.longitude && props.lonlat.latitude &&
+    !isNaN(props.lonlat.longitude) && !isNaN(props.lonlat.latitude) &&
+    props.lonlat.longitude > -180 && props.lonlat.longitude < 180 && props.lonlat.latitude > -90 && props.lonlat.latitude < 90
+  );
+});
+
 const themeContext = useTheme();
 const markers = computed(() => {
-  return (props.markers || []).concat([
+  return (props.markers || []).concat(isValidLonlat.value ? [
     {
       id: 1,
       longitude: props.lonlat.longitude,
@@ -69,8 +92,8 @@ const markers = computed(() => {
       width: 30,
       height: 30,
       iconPath: ImagesUrls.IconMarker,
-    }
-  ]);
+    } 
+  ] : []);
 });
 </script>
 

src/pages/home/index.vue

@@ -8,15 +8,14 @@
       backgroundPosition: 'top center',
       backgroundColor: themeContext.resolveThemeColor('background.primary'),
     }">
-      <FlexCol position="absolute" :left="0" :top="0" :right="0">
+      <FlexCol position="absolute" :left="30" :top="0" :right="30">
         <StatusBarSpace />
         <FlexRow justify="space-between" align="center">
           <Button 
             @click="showCityPopup = true"
             icon="https://xy.wenlvti.net/app_static/images/home/IconSwitch.png"
+            size="small"
             :text="currentCity"
-            type="custom"
-            color="transparent"
           />
           <Image
             src="https://xy.wenlvti.net/app_static/images/home/BannerHomeTitle.png"
@@ -170,7 +169,7 @@
       v-model:show="showCityPopup" 
       closeable
       position="top"
-      size="80vh"
+      size="90vh"
     >
       <CitySelect @selectCity="handleSelectCity" />
     </Popup>

src/pages/home/village/components/VillageGallery.vue

@@ -47,6 +47,7 @@ import CommonContent from '@/api/CommonContent';
 import { showError } from '@/common/composeabe/ErrorDisplay';
 import { toast } from '@/components/utils/DialogAction';
 import LightVillageApi from '@/api/light/LightVillageApi';
+import { computed } from 'vue';
 
 const props = withDefaults(defineProps<{
   villageId: number;
@@ -58,6 +59,14 @@ const emit = defineEmits<{
   (e: 'update:images', images: string[]): void;
 }>();
 
+const images = computed(() => {
+  return props.images.map(image => {
+    if (image === 'https://xycdn.wenlvti.net')
+      return '';
+    return image
+  });
+});
+
 async function uploadImage(index: number) {
   const tempFilePath = await new Promise<string>((resolve, reject) => {
     uni.chooseImage({