yikangyang-wx/pages/CitySelect/CitySelect.vue

<template>
  <view>
    <city-select
        @cityClick="cityClick"
        formatName="cityName"
        :activeCity="activeCity"
        :hotCity="hotCity"
        :obtainCitys="obtainCitys"
        :isSearch="true"
        :is-refresh="true"
        ref="citys"
        @refreshLocation="refreshLocation"
    ></city-select>
  </view>
</template>

<script>
import citys from '@/component/CitySelect/citys.js'
import CitySelect from "@/component/CitySelect/city-select.vue"
export default {
  components: {
    CitySelect
  },
  data() {
    return {
      //需要构建索引参数的名称（注意：传递的对象里面必须要有这个名称的参数）
      //当前城市
      activeCity: {},
      //热门城市
      hotCity: [
        {
          id: 0,
          title: '南京市'
        },
        {
          id: 1,
          title: '南京市'
        }
      ],
      //显示的城市数据
      obtainCitys: []
    };
  },
  watch: {
    vuex_location: {
      handler:function(newVal, oldVal) {
        this.activeCity = {
          cityName: newVal.city,
          cityCode: newVal.cityCode
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$store.dispatch('getLocation')
  },
  onLoad () {
    //动态更新数据
    setTimeout(() => {
      //修改需要构建索引参数的名称
      this.formatName = 'cityName'
      //修改当前城市
      this.activeCity = {
        cityName: this.vuex_location.city,
        cityCode: this.vuex_location.cityCode
      }
      //修改热门城市
      this.hotCity = [
        {
          cityName: '南京',
          cityCode: 110100
        },
        {
          cityName: '北京',
          cityCode: 110102
        }
      ]
      //修改构建索引数据
      this.obtainCitys = citys
    }, 0)
  },
  methods: {
    refreshLocation() {
      this.$store.dispatch('getLocation')
    },
    cityClick(item) {
      this.$store.commit('SET_CITY',{
        cityName: item.cityName,
        cityCode: item.cityCode
      })
    }
  }
}
</script>

<style lang="scss">

</style>