aslan-h5/src/views/Recharge/map.vue

<template>
  <div class="fullPage">
    <div class="bg">
      <!-- 顶部导航 -->
      <GeneralHeader
        :title="$t('select_country')"
        color="black"
        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
      />

      <!-- 内容 -->
      <div style="padding: 10px; display: grid; gap: 10px">
        <div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
          {{ $t('select_your_country') }}
        </div>

        <div v-for="(countries, gIndex) in groupedCountries" :key="gIndex">
          <div style="font-weight: 400; color: rgba(0, 0, 0, 0.4); margin-bottom: 10px">
            {{ countries.letter }}
          </div>
          <div
            style="
              border-radius: 12px;
              box-shadow: 0 0 4px 0 #00000050;
              padding: 10px;
              background-color: white;

              display: grid;
              gap: 10px;
            "
          >
            <div
              v-for="(country, cIndex) in countries.countries"
              :key="cIndex"
              style="display: flex; justify-content: space-between; align-items: center"
              @click="selectC(gIndex, cIndex, country)"
            >
              <div style="display: flex; align-items: center; gap: 10px">
                <img :src="country.country.nationalFlag" alt="" style="height: 16px" />
                {{ country.countryName }}
              </div>
              <div
                style="
                  width: 16px;
                  height: 16px;
                  border: 1px solid rgba(0, 0, 0, 0.4);
                  border-radius: 50%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div
                  style="
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: rgba(187, 146, 255, 1);
                  "
                  v-if="groupIndex == gIndex && countryIndex == cIndex"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

import { useCountryStore } from '@/stores/country'

import GeneralHeader from '@/components/GeneralHeader.vue'

const router = useRouter()
const countryStore = useCountryStore()
// const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息store双向绑定
const countryList = ref(countryStore.list)
const selectedCountry = ref(countryStore.selectedCountry)

const groupIndex = ref(-1) //选中的首字母区域
const countryIndex = ref(-1) //选中区域的第几个

// 选择国家
const selectC = (gIndex, cIndex, country) => {
  groupIndex.value = gIndex
  countryIndex.value = cIndex
  selectedCountry.value = country
  confirm()
}

// 初始化首字母分组
const groupedCountries = computed(() => {
  const groups = {}
  countryList.value.forEach((item) => {
    let firstLetter = item.countryName.charAt(0)?.toUpperCase() || '#' //获取首字母转大写
    const normalizedLetter = /[A-Z]/.test(firstLetter) ? firstLetter : '#' //处理特殊字符

    if (!groups.hasOwnProperty(normalizedLetter)) {
      groups[normalizedLetter] = []
    }
    groups[normalizedLetter].push(item)
  })

  let resCountryList = Object.keys(groups)
    .sort()
    .map((letter) => ({
      letter,
      countries: groups[letter].sort((a, b) => a.countryName.localeCompare(b.countryName)),
    }))

  let firstLetter = selectedCountry.value.countryName.charAt(0)?.toUpperCase() || '#' //当前选中的国家的首字母
  resCountryList.forEach((resitem, gIndex) => {
    if (resitem.letter == firstLetter) {
      resitem.countries.forEach((citem, cIndex) => {
        if (citem.countryName == selectedCountry.value.countryName) {
          groupIndex.value = gIndex
          countryIndex.value = cIndex
        }
      })
    }
  })

  return resCountryList
})

// 右上角确认按钮
const confirm = () => {
  console.log('点击确认按钮')
  countryStore.setCountry(selectedCountry.value)
  router.go(-1)
}
</script>

<style scoped>
* {
  color: black;
}

.fullPage {
  background-color: #ffffff;
  min-height: 100vh;
  position: relative;
}

.bg {
  width: 100vw;
  min-height: 100vh;
  background-image: url(../../assets/images/Azizi/secondBg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>