hcb-h5/src/components/CityChooseList.vue

<template>
  <div class="scroll-y city-choose-list" style="height: 100%;">
    <div class="fn-flex fn-flex-center font-24 inner30 bg-fa">
      <template v-if="city_info.cityName">
        <div class="fn-flex-item fn-flex fn-flex-center">
            <van-icon name="guide-o" />
            <span>当前城市：</span>
            <span>{{city_info.cityName}}</span>
        </div>
        <div class="fn-flex fn-flex-center" @click="refreshLocaiton">
            <van-icon name="replay" />
            <span>定位</span>
        </div>
      </template>
      <template v-else>
        <div class="fn-flex-item fn-flex fn-flex-center" @click="refreshLocaiton">
            <van-icon name="guide-o" />
            <span>定位所在城市</span>
        </div>
      </template>
    </div>
    <div class="fn-flex-item">
      <!-- <div class="absolute scroll-y" style="left:0;top:0;width:100%;height: 100%;"> -->

      
      <van-index-bar :sticky="isSticky">
        <template v-for="(it, idx) in list" :key="idx">
          <van-index-anchor :index="idx" />
          <van-cell v-for="(item, index) in it" :key="index" @click="handleClickItem(item)">
            <template #title>
              <div class="fn-flex fn-flex-center">
                <!-- <van-image class="mr10" :src="item.logo" width="20" height="20" /> -->
                <span class="font-26">{{ item.city_name }}</span>
              </div>
            </template>
          </van-cell>
        </template>
      </van-index-bar>
    <!-- </div> -->
    </div>
  </div>
</template>

<script>
// import { ref, watch } from 'vue'
import { useUserStore } from '@/stores/user';
import { useCityStore } from '../stores/city';
import api from '@/utils/api';
import WechatUtils,{ WechatLocation } from '@/utils/wechat'
export default {
  name: 'CityChooseList',
  data() {
    return {
      list: [],
      city_info: {city_name: ''},
      isSticky: true
    }
  },
  watch: {
    'useUserStore().city_info': function (val) {
      this.city_info = val
    }
  },
  mounted() {
    this.initCurCity();
  },
  methods: {
    initCurCity() { 
      console.log('城市信息:', useUserStore().cur_city);
      this.city_info = useUserStore().cur_city;
      this.getCityList()
    },
    /** 
     * 获取城市列表
     * /auto/area/city
    */
     async getCityList() {
      const cityStore = useCityStore();
      if(cityStore.listByPinyin.length>0){
        this.list = cityStore.listByPinyin;
      }else{
        const result = await api.get('/auto/area/city');
        if (result.code === 200 && result.data) {
          this.list = result.data;
          cityStore.setByPinyin(result.data);
        }
      }
    },
    /**
     * 刷新定位
     */
    async refreshLocaiton() {
      const location = await WechatLocation.getLocation('gcj02');
      const result = await api.wechatAPI.getLocationCity(location.latitude, location.longitude);
      console.log('刷新定位:', result);
      console.log('刷新定位location:', location);
      if (result.code === 200 && result.data) {
        const userStore = useUserStore();
        // this.list = result.data;
        this.city_info = {
          cityName: result.data.cityName,
          cityId: result.data.cityId
        };
        // localStorage.setItem('cityInfo', JSON.stringify(result.data));
        // localStorage.setItem('userLocation', JSON.stringify({ ...location, time: new Date().getTime() }));
        setCookie('cityInfo', JSON.stringify(result.data),1);
        setCookie('userLocation', JSON.stringify({...location, time: new Date().getTime()},1));
        userStore.setCity(result.data);
        this.$emit('cityItem',{
          cityName: result.data.cityName,
          cityId: result.data.cityId
        })
      }
    },
    handleClickItem(item){
      this.city_info = {
        cityName: item.city_name,
        cityId: item.city_id
      };
      this.$emit('cityItem',{
        cityName: item.city_name,
        cityId: item.city_id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.city-choose-list {
  ::v-deep{
    .van-index-anchor--sticky{
      left: 0!important;
    }
  }
}
</style>