You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.2 KiB
104 lines
2.2 KiB
<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>
|