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: [],
      //显示的城市数据
      obtainCitys: [],
    };
  },
  watch: {
    vuex_location: {
      handler: function (newVal, oldVal) {
        this.activeCity = {
          cityName: newVal.city,
          cityCode: newVal.cityCode,
        };
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    if (this.$store.state.vuex_location.status !== 2) {
      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: 320100,
        },
        {
          cityCode: "320400",
          cityName: "常州",
        },
        {
          cityCode: "320500",
          cityName: "苏州",
        },
        {
          cityCode: "310100",
          cityName: "上海",
        },
        {
          cityCode: "320200",
          cityName: "无锡",
        },
      ];
      //修改构建索引数据
      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>