12

- 移除了未使用的 leftColumn 计算属性
- 删除了多余的注释和空行，提高代码可读性

app/components/NationalMap/index.vue

@@ -1,9 +1,11 @@
-<script setup lang="ts">
+<script setup>
 
 </script>
 
 <template>
+<div>
   
+</div>
 </template>
 
 <style scoped>

app/pages/countryRegion/index.vue

@@ -0,0 +1,69 @@
+<script setup>
+import {ref} from 'vue';
+import pinyin from 'pinyin';
+import countryCode from './data/index.js';
+
+const value = ref('');
+const alphabet = [
+  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
+  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
+];
+
+function groupByPinyinInitial(data) {
+  const grouped = {};
+  data.forEach(country => {
+    const initial = pinyin(country.cn, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase();
+    if (!grouped[initial]) {
+      grouped[initial] = [];
+    }
+    grouped[initial].push(country);
+  });
+
+  return grouped;
+}
+
+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>
+
+<template>
+  <div>
+    <van-sticky>
+      <van-search v-model="value" placeholder="请输入国家和地区"/>
+    </van-sticky>
+    <van-index-bar sticky :sticky-offset-top="55" class="mt-[00px]" :index-list="alphabet">
+      <template v-for="(countries, index) in searchCountry" :key="index">
+        <van-index-anchor
+            :index="index"
+        ></van-index-anchor>
+        <van-cell v-for="country in countries" :key="country.code" :title="country.cn">
+          <div class="pr-[25px]"> +{{ country.zone }}</div>
+        </van-cell>
+      </template>
+
+
+    </van-index-bar>
+    <van-back-top right="15vw" bottom="10vh"/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/pages/home/index.vue

@@ -1,6 +1,9 @@
 <script setup>
 import liveBroadcast from '@/components/liveBroadcast/index.vue'
+import { useRect } from '@vant/use';
+import { ImagePreview } from 'vant';
 
+const liveRef=ref(null)
 const loading = ref(false)
 const finished = ref(false)
 const refreshing = ref(false)
@@ -70,18 +73,33 @@ function onRefresh() {
   refreshing.value = true
   loadData()
 }
-// 分列计算
 const leftColumn = computed(() => {
   return list.value.filter((_, index) => index % 2 === 0)
 })
-
 const rightColumn = computed(() => {
   return list.value.filter((_, index) => index % 2 === 1)
 })
+const show=ref(false)
+const showHeight=ref('')
+const openShow=()=>{
+  const rect = useRect(liveRef.value.$el);
+  showHeight.value=rect.height
+  nextTick(()=>{
+    show.value=true
+  })
+}
+const images = [
+  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
+  'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
+];
+const clickSwipe=({target})=>{
+  console.log('data',target.currentSrc)
+}
 </script>
 
 <template>
-  <liveBroadcast />
+  <liveBroadcast ref="liveRef" />
   <van-tabs sticky animated>
     <van-tab title="拍品列表">
       <div class="px-[16px] pt-[16px]">
@@ -98,6 +116,7 @@ const rightColumn = computed(() => {
                   v-for="(item, index) in leftColumn"
                   :key="index"
                   class="w-full"
+                  @click="openShow"
                 >
                   <div class="relative w-full">
                     <van-image
@@ -168,6 +187,33 @@ const rightColumn = computed(() => {
       内容 2
     </van-tab>
   </van-tabs>
+  <van-back-top right="15vw" bottom="10vh"/>
+  <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
+    <div class="content" :style="`height: calc(100vh - ${showHeight+39}px)`">
+      <van-swipe indicator-color="#B4B4B4"  lazy-render @click="clickSwipe">
+        <van-swipe-item v-for="image in images" :key="image">
+          <van-image
+              fit="contain"
+              width="100%"
+              :height="188"
+              :src="image"
+          />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </van-action-sheet>
 </template>
-
-
+<style>
+:root:root  {
+  --van-action-sheet-header-height: 39px;
+}
+</style>
+<style scoped lang="scss">
+:deep(.van-swipe__indicator){
+  width: 8px;
+  height: 8px;
+}
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ){
+  background:rgba(0,0,0,0.8);
+}
+</style>

app/pages/login/index.vue

@@ -1,7 +1,12 @@
 <script setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+function goToPage() {
+  router.push('/countryRegion');
+}
 const phoneNum=ref('')
 const code=ref('')
-
 const pane=ref(0)
 </script>
 
@@ -12,7 +17,7 @@ const pane=ref(0)
     </div>
     <div v-if="pane===0">
       <div class="">
-        <div class="w-full flex justify-between">
+        <div class="w-full flex justify-between" @click="goToPage">
           <div class="text-[16px] text-[#000]">
             中国（大陆）
           </div>

app/pages/realAuth/index.vue

@@ -0,0 +1,37 @@
+<script setup>
+
+</script>
+
+<template>
+<div class="px-[31px] bg-#fff w-100vw h-100vh pt-[46px]">
+  <van-tabs>
+    <van-tab  title="大陆居民" class="pt-[80px]">
+      <div class="text-[#BDBDBD] text-[16px] mb-[34px]">请填写身份证相关信息</div>
+      <div class="mb-[100px]">
+        <div class="border-b-[1.7px] mt-[8px]">
+          <van-field label="身份证号" clearable placeholder="请输入身份证号"></van-field>
+        </div>
+        <div class="border-b-[1.7px] mt-[8px]">
+          <van-field label="姓名" clearable placeholder="请输入姓名"></van-field>
+        </div>
+      </div>
+      <div class="flex justify-between">
+        <van-button style="width: 151px;height: 48px" color="#E9F1F8">
+          <div class="text-#2B53AC text-16px">取消</div>
+        </van-button>
+        <van-button style="width: 151px;height: 48px" color="#2B53AC">
+          <div class="text-#FFFFFF text-16px">确定</div>
+        </van-button>
+      </div>
+    </van-tab>
+    <van-tab title="非大陆居民">内容 2</van-tab>
+  </van-tabs>
+</div>
+</template>
+
+<style scoped>
+:deep(.van-tabs__line){
+  height: 2px;
+  width: 107px;
+}
+</style>

nuxt.config.js

@@ -22,7 +22,6 @@ export default defineNuxtConfig({
     '@vant/nuxt',
     '@unocss/nuxt',
     '@nuxtjs/color-mode',
-    '@nuxt/eslint',
     '@nuxtjs/i18n',
     '@pinia/nuxt',
     'pinia-plugin-persistedstate/nuxt',

package.json

@@ -17,6 +17,8 @@
     "@nuxtjs/i18n": "^9.1.1",
     "nuxt": "^3.15.0",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "pinyin": "4.0.0-alpha.2",
+    "segmentit": "^2.0.3",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },