xiangyuan-app/src/pages/home/light/submit-map.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useGetCurrentLocation } from '../composeabe/GetCurrentLocation';
import { backAndCallOnPageBack, callPrevOnPageBack, navTo } from '@/components/utils/PageAction';
import AppCofig from '@/common/config/AppCofig';
import LightMap from '../components/LightMap.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import NavBar from '@/components/nav/NavBar.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Text from '@/components/basic/Text.vue';
import Image from '@/components/basic/Image.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';
import JoinDialog from '../village/dialogs/JoinDialog.vue';
import CitySelect from '../components/CitySelect.vue';
import Popup from '@/components/dialog/Popup.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import type { RegionItem } from '@/api/map/RegionApi';

const { querys } = useLoadQuerys({
  latitude: AppCofig.defaultLonLat[1],
  longitude: AppCofig.defaultLonLat[0],
  city: '',
  cityCode: 0,
  district: '',
}, async (querys) => {
  currentLocation.setCurrentLocationWithCity(querys.city, querys.district);
  currentCity.value = querys.city;
  currentCityCode.value = querys.cityCode;
  currentDistrict.value = querys.district;
});

const currentLocation = useGetCurrentLocation({
  onCityChanged: () => {},
});

const joinDialog = ref<InstanceType<typeof JoinDialog>>();
const joinCurrentVillageId = ref(0);

function handleLightVillage(villageId: number) {
  joinCurrentVillageId.value = villageId;
  joinDialog.value?.show();
}
function handleJoinFinish() { 
  backAndCallOnPageBack('goVillage', { id: joinCurrentVillageId.value });
  joinCurrentVillageId.value = 0;
}

const showCityPopup = ref(false);
const currentCity = ref('');
const currentCityCode = ref(0);
const currentDistrict = ref('');

const lightMap = ref<InstanceType<typeof LightMap>>();

function handleSelectCity(city: RegionItem) {
  currentLocation.setCurrentLocationWithCity(city.name, '');
  currentCity.value = city.name;
  currentCityCode.value = city.areaCode;
  showCityPopup.value = false;
  setTimeout(() => {
    callPrevOnPageBack('changeCurrentCity', { 
      city, 
      code: city.areaCode,
      longitude: Number(city.longitude),
      latitude: Number(city.latitude),
    })
  }, 2000);
}

defineExpose({
  onPageBack(name: string, params: any) {
    if (name === 'joinVillage') {
      if (params.createdNew) {
      }
      if (params.reselectAddress) {
        currentLocation.setCurrentLocationWithCity(params.reselectAddress.city, params.reselectAddress.district);
        currentCity.value = params.reselectAddress.city;
        currentCityCode.value = params.reselectAddress.cityCode;
        currentDistrict.value = params.reselectAddress.district;
        
        setTimeout(() => {
          callPrevOnPageBack('changeCurrentCity', { 
            city: params.reselectAddress.city, 
            code: params.reselectAddress.cityCode,
            longitude: Number(params.reselectAddress.cityLongitude),
            latitude: Number(params.reselectAddress.cityLatitude),
          })
        }, 2000);
      }
      joinCurrentVillageId.value = params.id;
      joinDialog.value?.show();
    }
  }
})
</script>

<template>
  <FlexCol position="absolute" :top="0" :left="0" :right="0" :zIndex="1000">
    <StatusBarSpace />
    <NavBar leftButton="back" />
    <FlexRow center>
      <BoxMid 
        :innerStyle="{
          width: '670rpx',
        }"
        direction="column"
        align="center"
        gap="gap.md"
      > 
        <FlexCol center>
          <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="220" mode="widthFix" />
          <Text text="请选择您要点亮的村社" fontConfig="primaryTitle" />
        </FlexCol>
        <FlexRow gap="gap.md">
          <FrameButton size="small" icon="search" text="点击搜索" @click="lightMap?.showSearch()" />
          <FrameButton size="small" icon="home-filling" text="没有我的家乡？点这里建村" @click="navTo('/pages/home/light/create-village')" />
        </FlexRow>
      </BoxMid>
    </FlexRow>
  </FlexCol>
  <JoinDialog
    ref="joinDialog" 
    :villageId="joinCurrentVillageId"
    @finish="handleJoinFinish"
  />
  <LightMap 
    ref="lightMap"
    full
    :city="currentCity"
    :cityCode="currentCityCode"
    :district="currentDistrict"
    :lonlat="currentLocation.currentLonlat.value"
    :isLightMode="true" 
    @lightVillage="handleLightVillage"
    @getCurrentLonlat="currentLocation.getCurrentExactLocation"
    @changeCity="showCityPopup=true"
  />   
  <Popup 
    v-model:show="showCityPopup" 
    closeable
    position="bottom"
    size="60vh"
  >
    <CitySelect @selectCity="handleSelectCity" />
  </Popup>
</template>