bocai_supplyChain_uni/root/other/city.vue

<template>
  <view class="g_p_16 container g_pt_4" style="background-color: #f5f5f5; min-height: 100vh; padding-bottom: 180px;">
   
    <scroll-view class="cities-scroll" scroll-with-animation="true" :scroll-into-view="az" scroll-y ref="scrollViewRef">
		<view class="headTxt">当前城市</view>
		<view @click='selectQuanGuo' :class="{ itemCity: true, active: selectedCity === '全国' }">全国</view>
		
      <view class="cities-list">
        <block v-for="group in cities">
          <view class="headTxt" :id="`letter-${group.name[0] == '热' ? 're' : group.name[0] }`">{{ group.name }}</view>
          <block v-for="city in group.list">
            <view @click='selectCity(city)' :class="{ itemCity: true, active: selectedCity === city.shortName }">{{ city.shortName }}</view>
          </block>
        </block>
      </view>
    </scroll-view>

    <!-- 添加字母索引 -->
    <view class="index-list">
      <block v-for="(letter, index) in letters">
		  <!-- , activeIndex: currentIndex === index -->
        <view :class="{ indexItem: true}" @click="scrollToLetter(letter)">
          {{ letter }}
        </view>
      </block>
    </view>

    <g-panel-fixed>
      <view class="g_flex_row_center">
        <g-button btnText="返回" size="small" @clickBtn='back'></g-button>
        <g-button btnText="确定" type='primary' class="g_ml_24" size="small" @clickBtn='setCity'></g-button>
      </view>
    </g-panel-fixed>
  </view>
</template>
<script>
import { cityList } from '../../utils/city.js';

export default {
  data() {
    return {
      cities: [],
      cdnBaseImg: this.G.store().cdnBaseImg,
      selectedCity: '全国',
      currentIndex: 0,
      letters: [],
	  az:'',
    };
  },
  onLoad() {
    this.initializeCities();
    this.calculateLetters();
    const cachedSelectedCity = uni.getStorageSync('selectedCity');
    if (cachedSelectedCity) {
      this.selectedCity = cachedSelectedCity;
    } else {
      this.selectedCity = '全国';
    }
  },
  methods: {
    setCity() {
      uni.setStorageSync('selectedCity', this.selectedCity);
      console.log(`城市 ${this.selectedCity} 已保存到缓存`);
      uni.navigateBack({ delta: 1 });
    },
    back() {
      uni.navigateBack({ delta: 1 });
    },
    selectQuanGuo() {
      this.selectedCity = '全国';
      console.log('全国被选中');
    },
    selectCity(city) {
      this.selectedCity = city.shortName;
      console.log(`城市 ${city.shortName} 被选中`);
    },
    initializeCities() {
      const originalCities = cityList;
      // const hotCities = originalCities.find(group => group.name === '热门城市');

      // if (hotCities) {
      //   hotCities.name = '热';
      //   this.cities = originalCities.filter(group => group.name !== '热门城市');
      //   this.cities.unshift(hotCities);
      // } else {
      //   this.cities = originalCities;
      // }
	 this.cities = originalCities;
    },
    calculateLetters() {
      this.letters = [];
      this.cities.forEach(group => {
        const firstLetter = group.name.charAt(0).toUpperCase();
        if (!this.letters.includes(firstLetter)) {
          this.letters.push(firstLetter);
        }
      });
    },
    scrollToLetter(letter) {
		var that = this;
		if(letter == '热'){
			letter = 're'
		}
      const id = `letter-${letter}`;
	  console.log(id);
	  this.az = id;
	  // console.log(that.$refs.scrollViewRef);
      // this.$nextTick(() => {
      //   this.$refs.scrollViewRef.scrollIntoView(id, 300);
      // });
    },
  }
};
</script>
<style lang="scss">
.container {
  .itemCity {
    width: calc(33.33% - 10px);
    float: left;
    margin-right: 10px;
    background: #fff;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    padding: 8px 0;
    color: #1d1d1d;
    margin-bottom: 10px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.active {
      background: #3578f6;
      color: #ffffff;
    }
  }

  .headTxt {
    font-size: 18px;
    font-weight: 400;
    color: #999999;
    line-height: 25px;
    margin-top: 10px;
    margin-left: 16px;
    margin-bottom: 10px;
    clear: both;
  }

  .cities-scroll {
    height: calc(100vh - 100px);
    overflow-y: auto;
  }

  .index-list {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
	background-color: #f5f5f5;

    .indexItem {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      margin: 2px;
      &.activeIndex {
        background: #3578f6;
        color: #ffffff;
      }
    }
  }
}
</style>