hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(地图页): 右上角设置成确认按钮

Browse Source
This commit is contained in:
hzj 2025-09-18 11:57:13 +08:00
parent 66f4ff209c
commit c90eae892b
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/map.vue
View File

@ -6,7 +6,7 @@
<MobileHeader title="Country&Region"> <MobileHeader title="Country&Region">
<template v-slot:extraFunction> <template v-slot:extraFunction>
<div style="display: flex; justify-content: center; align-items: center; width: 10%"> <div style="display: flex; justify-content: center; align-items: center; width: 10%">
<img src="../assets/icon/selected.png" alt="" style="width: 100%" /> <img src="../assets/icon/selected.png" alt="" style="width: 100%" @click="confirm" />
</div> </div>
</template> </template>
</MobileHeader> </MobileHeader>
@ -76,26 +76,29 @@
</template> </template>
<script setup> <script setup>
import { computed, onMounted, ref } from 'vue' import { computed, ref } from 'vue'
import MobileHeader from '../components/MobileHeader.vue' import MobileHeader from '../components/MobileHeader.vue'
import { useRoute } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { useCountryStore } from '@/stores/country' import { useCountryStore } from '@/stores/country'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
const route = useRoute() const router = useRouter()
const countryStore = useCountryStore() const countryStore = useCountryStore()
const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息 // const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息store双向绑定
const countryList = ref(countryStore.list)
const selectedCountry = ref(countryStore.selectedCountry)
const groupIndex = ref(-1) //选中的首字母区域 const groupIndex = ref(-1) //选中的首字母区域
const countryIndex = ref(-1) //选中区域的第几个 const countryIndex = ref(-1) //选中区域的第几个
// 选择国家
const selectC = (gIndex, cIndex, country) => { const selectC = (gIndex, cIndex, country) => {
groupIndex.value = gIndex groupIndex.value = gIndex
countryIndex.value = cIndex countryIndex.value = cIndex
countryStore.setCountry(country) selectedCountry.value = country
} //选择国家 }
// 初始化首字母分组
const groupedCountries = computed(() => { const groupedCountries = computed(() => {
const groups = {} const groups = {}
countryList.value.forEach((item) => { countryList.value.forEach((item) => {
@ -130,16 +133,12 @@ const groupedCountries = computed(() => {
return resCountryList return resCountryList
}) })
onMounted(() => { // 右上角确认按钮
const countryListStr = sessionStorage.getItem('countryList') const confirm = () => {
selectedCountry.value = sessionStorage.getItem('selectedCountry') console.log('点击确认按钮')
if (countryListStr) { countryStore.setCountry(selectedCountry.value)
countryList.value = JSON.parse(countryListStr) router.go(-1)
}
// 可选：清除临时存储
// sessionStorage.removeItem('tempCountryList');
}
})
</script> </script>
<style scoped> <style scoped>