🎨 按要求增加地图点亮筛选

src/pages/home/components/LightMap.vue

@@ -150,7 +150,7 @@ const emit = defineEmits([
   'mapClick',
 ]);
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   lonlat?: { longitude: number, latitude: number } | undefined;
   city?: string;
   cityCode?: number;
@@ -158,7 +158,12 @@ const props = defineProps<{
   isLightMode?: boolean;
   small?: boolean;
   full?: boolean;
-}>();
+  showLighted?: boolean;
+  showUnLighted?: boolean;
+}>(), {
+  showLighted: true,
+  showUnLighted: true,
+});
 
 const regionLoader = useSimpleDataLoader(async () => {
   if (!props.cityCode)
@@ -187,7 +192,15 @@ const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
   }
   //如果为空则尝试获取子级
   hasResItems.value = res.length > 0;
-  const list = res.map((p, i) => {
+  const list = res
+    .filter(p => {
+      if (p.isLight && props.showLighted)
+        return true;
+      if (!p.isLight && props.showUnLighted)
+        return true;
+      return false;
+    })
+    .map((p, i) => {
     const id = p.villageId ?? i;
     villageData.set(id, p);
     const maker : MapMarker = {
@@ -378,6 +391,9 @@ watch(() => props.cityCode, async () => {
   await regionLoader.reload();
   loadFirstRegion();
 }, { immediate: true });
+watch(() => [ props.showLighted, props.showUnLighted ], async () => {
+  await mapLoader.reload();
+}, { deep: true });
 
 onMounted(async () => {
   mapCtx.initMarkerCluster({

src/pages/home/light/map.vue

@@ -20,6 +20,12 @@
             <Text text="这里可看到您附近的村落，村落乡源光贡献越多，村落越亮哦！快去为自己家乡建设做贡献吧！" textAlign="center" fontConfig="contentText" :fontSize="26" />
             <PrimaryButton text="去点亮我的家乡" @click="navTo('/pages/home/light/create-village')" />
           </FlexCol>
+          <CommonDivider /> 
+          <FlexRow gap="gap.lg" align="center">
+            <Text text="地图显示" textAlign="center" fontConfig="contentText" :fontSize="26" />
+            <CheckBox v-model="showLighted" text="已点亮" />
+            <CheckBox v-model="showUnLighted" text="未点亮" />
+          </FlexRow>
         </BoxMid>
       </FlexRow>
     </FlexCol>
@@ -35,6 +41,8 @@
       :cityCode="currentCityCode"
       :district="currentDistrict"
       :lonlat="currentLocation.currentLonlat.value"
+      :showLighted="showLighted"
+      :showUnLighted="showUnLighted"
       @lightVillage="handleLightVillage"
       @createVillage="handleCreateVillage"
       @getCurrentLonlat="currentLocation.getCurrentExactLocation"
@@ -73,6 +81,8 @@ import CitySelect from '../components/CitySelect.vue';
 import Popup from '@/components/dialog/Popup.vue';
 import CommonRoot from '@/components/dialog/CommonRoot.vue';
 import PrimaryButton from '@/common/components/PrimaryButton.vue';
+import CheckBox from '@/components/form/CheckBox.vue';
+import CommonDivider from '@/common/components/CommonDivider.vue';
 
 const { querys } = useLoadQuerys({
   latitude: AppCofig.defaultLonLat[1],
@@ -87,6 +97,9 @@ const { querys } = useLoadQuerys({
   currentDistrict.value = querys.district;
 });
 
+const showLighted = ref(true);
+const showUnLighted = ref(true);
+
 const currentLocation = useGetCurrentLocation({
   onCityChanged: (city, code, district) => {
     currentCity.value = city;