通讯录 右侧字母导航

<template>
  <ion-page class="container" v-theme="theme">
    <app-header :isBack="false">
        <template v-slot:start>
            <span @click="goBack">取消</span>
        </template>
        选择国家/地区
    </app-header>
    <ion-content :fullscreen="true">
      <ion-searchbar placeholder="搜索"></ion-searchbar>
      <div class="scroll-box" id="scrollbox">
        <ion-list v-for="item in Object.keys(countriesRegionsList)" :key="item" :id="item">
          <ion-list-header :id="item"> {{item}} </ion-list-header>
          <ion-item v-for="itemContent in countriesRegionsList[item]" :key="itemContent.countryCode">{{itemContent.cname}}</ion-item>
        </ion-list>

        <div class="select-city-type-line" :class="{'select-city-type-line-true':_typeSelect}" @touchstart="touchstart($event)"
          @touchmove="touchmove($event)" @touchend="touchend($event)" >
          <!-- v-if="CityList!=null&& CityList.length>0" -->
          <p
            class="letter" 
            v-for="item in countriesRegionsNavList" 
            :key="item" 
            @click="selectType(item)"
          >
            {{item}}
          </p>
        </div>
      </div>
      <div class="select-city-type-circle" :style="{'display':_showModal ? 'flex' : 'none' }">
        {{_currentIndicator}}
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup>
  import {reactive,ref,onMounted,getCurrentInstance } from 'vue';
  import{useRouter} from "vue-router"
  import AppHeader from "@/components/Base/AppHeader";

  const router = useRouter()

    // 取消
  const goBack = ()=>{
    router.go(-1)
  }

  onMounted(() => {
    // 搜索国家地区
    const searchbar = document.querySelector('ion-searchbar');
    const items = Array.from(document.querySelector('ion-list').children);
    const handleInput = (event)=> {
      const query = event.target.value.toLowerCase();
      requestAnimationFrame(() => {
          items.forEach((item) => {
          const shouldShow = item.textContent.toLowerCase().indexOf(query) > -1;
          item.style.display = shouldShow ? 'block' : 'none';
          });
      });
    }
    searchbar.addEventListener('input', handleInput);
  });

  // 是否选中右侧字母表
  const _typeSelect = ref(false)

  // 在中间显示的字母
  const _currentIndicator = ref('');

  // 位置
  const _navOffsetX = ref(0)

  // 选中字母是否在中间显示
  const _showModal = ref(false)

  // 延时器
  const _indicatorTime = ref()

  // 
  // const scorll = ref()

// 点击右侧字母导航
  const selectType = (type)=> {
    _currentIndicator.value = type;
    _showModal.value = true;
    if (document.getElementById(type) != null) {
      var el = document.getElementById(type);
      // if (this.Scorll != null) {
      //     this.Scorll.setAttribute("style", "overflow-y:scroll");
      // }
      el.scrollIntoView('true');
      _indicatorTime.value = setTimeout(() => {
          _showModal.value = false;
          _currentIndicator.value = '';
      }, 500);
    }
  }

  // 右侧字母表触摸开始
  const touchstart = (event)=> {
    _navOffsetX.value = event.changedTouches[0].clientX;
    scrollList(event.changedTouches[0].clientY);
    _typeSelect.value = true;
    // if (this.Scorll != null) {
    //     this.Scorll.setAttribute("style", "overflow-y:hidden");
    // }
  }

  // 右侧字母表触摸移动
  const touchmove = (event)=> {
    event.preventDefault();
    scrollList(event.changedTouches[0].clientY);
  }

  // 右侧字母表触摸结束
  const touchend = (event)=> {
    _typeSelect.value = false;
    // if (this.Scorll != null) {
    //     this.Scorll.setAttribute("style", "overflow-y:scroll");
    // }
    _indicatorTime.value = setTimeout(() => {
        _showModal.value = false;
        _currentIndicator.value = '';
    }, 500);
  }
  
  //
  const scrollList = (y)=> {
    const currentItem = document.elementFromPoint(_navOffsetX.value, y);
    if (!currentItem || !currentItem.classList.contains('letter')) {
        return;
    }
    _currentIndicator.value = currentItem['innerText'];
    selectType(_currentIndicator.value);
  }
  
  // 请求国家地区数据
  const countriesRegionsList = ref({A:[{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},{cname:'SDFSF'},],B:[],C:[]})
  const countriesRegionsNavList = ref(['A','B','C'])
  const {proxy,appContext} = getCurrentInstance();
  const getCountriesRegions = ()=>{
    proxy.$http({
      method: "get",
      url:"/ms/serviceCountry/findCountryList",
    }).then((res)=>{
      if(res.code == 200){
        countriesRegionsList.value = res.data
        countriesRegionsNavList.value = Object.keys(res.data)
        countriesRegionsNavList.value.unshift('#')
      }
    })
  }
  // getCountriesRegions()
  
</script>

<style lang="scss" scoped>
  p{
    margin: 0;
  }
  .select-city-type-line{
    position: fixed;
    z-index: 999;
    margin-top: 9rem;
    width: 40px;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 500;
    text-align: center;
    color: #999;
    padding: 10px 0;
  }
  .select-city-type-line-true{
    background: rgba(211, 211, 211, 0.6);
    color: white;
    border-radius: 5px 0px 0px 5px;
  }
  .select-city-type-line .letter{
    font-size: 15px;
  }
  .select-city-type-line .letter.selected{
    color: #FF5512;
  }
  .select-city-type-circle{
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    background: rgba(211, 211, 211, 0.6);;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 500;
  }

  .container {
    .scroll-box{
      height: 811px;
      overflow: scroll;
    }
    ion-searchbar{
      --border-radius: 8px;
    }
    ion-list-header{
      font-size: 12px;
    }
    ion-item{
      font-size: 15px;
    }
    .select-city-type-line{
      width: 15px;
      height: 510px;
      border-radius: 4px;
      margin-right: 14px;
      .letter{
        font-size: 12px;
      }
    }
  }

  .container[data-theme="dark"] {
    ion-searchbar{
      --background: #141414;
      color: #fff;
    }
    ion-list{
      --ion-background-color:rgba(0,0,0,0)
    }
    ion-list-header{
      --color:#fff;
    }
    ion-item{
      color: #fff;
    }
    ion-item::part(native){
      --border-color:#222;
    }
    .select-city-type-line{
      background: rgba(255,255,255,0.2);
      color: #fff;
    }
  }

</style>