scout666/liveh5-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1231

Browse Source
This commit is contained in:
xingyy 2025-01-10 13:23:11 +08:00
parent b9fb752bb0
commit afe57c16f7
1 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/pages/countryRegion/index.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref } from 'vue'; import {ref} from 'vue';
import pinyin from 'pinyin'; import pinyin from 'pinyin';
import countryCode from './data/index.js'; import countryCode from './data/index.js';
@ -12,7 +12,7 @@ const alphabet = [
function groupByPinyinInitial(data) { function groupByPinyinInitial(data) {
const grouped = {}; const grouped = {};
data.forEach(country => { data.forEach(country => {
const initial = pinyin(country.cn, { style: pinyin.STYLE_FIRST_LETTER })[0][0].toUpperCase(); const initial = pinyin(country.cn, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase();
if (!grouped[initial]) { if (!grouped[initial]) {
grouped[initial] = []; grouped[initial] = [];
} }
@ -22,30 +22,48 @@ function groupByPinyinInitial(data) {
return grouped; return grouped;
} }
const groupedCountries = groupByPinyinInitial(countryCode); const groupedCountries = ref([])
const initData=()=>{
groupedCountries.value = groupByPinyinInitial(countryCode);
}
const searchCountry = computed(() => {
if (!value.value) {
return groupedCountries.value;
}
return Object.keys(groupedCountries.value).reduce((filtered, initial) => {
const countries = groupedCountries.value[initial].filter(country =>
country.cn.includes(value.value)
);
if (countries.length > 0) {
filtered[initial] = countries;
}
return filtered;
}, {});
});
initData()
</script> </script>
<template> <template>
<div> <div>
<van-sticky> <van-sticky>
<van-search v-model="value" placeholder="请输入国家和地区" /> <van-search v-model="value" placeholder="请输入国家和地区"/>
</van-sticky> </van-sticky>
<van-index-bar class="mt-[00px]" :index-list="alphabet"> <van-index-bar sticky :sticky-offset-top="55" class="mt-[00px]" :index-list="alphabet">
<van-index-anchor <template v-for="(countries, index) in searchCountry" :key="index">
v-for="(countries, index) in groupedCountries" <van-index-anchor
:key="index" :index="index"
:index="index" ></van-index-anchor>
> <van-cell v-for="country in countries" :key="country.code" :title="country.cn">
<div class="text-#939393 text-[14px] pl-[16px] bg-[#F3F3F3]">{{ index }}</div> <div class="pr-[25px]"> +{{ country.zone }}</div>
<van-cell v-for="country in countries" :key="country.code" :title="country.cn"/> </van-cell>
</van-index-anchor> </template>
</van-index-bar> </van-index-bar>
<van-back-top right="15vw" bottom="10vh" /> <van-back-top right="15vw" bottom="10vh"/>
</div> </div>
</template> </template>
<style scoped> <style scoped>
:deep(.van-index-anchor) {
padding: 0;
}
</style> </style>