wx-qhb/pageC/addEditAddress/component/selectCity.vue

<template>
  <view class="">
    <u-popup
      :show="show"
      mode="bottom"
      @close="$emit('close')"
      :round="10"
      :closeable="true"
    >
      <view
        style="
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          font-size: 36rpx;
          color: #222;
        "
      >
        选择省市区
      </view>
      <view>
        <!-- <input type="text" class="inp" v-model="cityValue" /> -->
        <view class="title"> 热门城市 </view>
        <view class="city-list">
          <view
            class="city"
            :class="{ 'select-city': hotCityName == item }"
            v-for="(item, index) in hotCityList"
            :key="index"
            @click="searchCity(item)"
          >
            {{ item }}
          </view>
        </view>
        <picker-view
          class="picker-view"
          :indicator-style="indicatorStyle"
          :value="value"
          @change="bindChange"
          :mask-top-style="maskTopStyle"
          :mask-bottom-style="maskBottomStyle"
        >
          <picker-view-column class="picker-view-column">
            <view class="item" v-for="(item, index) in cityList" :key="index"
              ><text class="text">{{ item.name }}</text></view
            >
          </picker-view-column>
          <picker-view-column class="picker-view-column">
            <view class="item" v-for="(item, index) in marketList" :key="index"
              ><text class="text">{{ item.name }}</text>
            </view>
          </picker-view-column>
          <picker-view-column class="picker-view-column">
            <view
              class="item"
              v-for="(item, index) in distinguishList"
              :key="index"
              ><text class="text">{{ item.name }}</text>
            </view>
          </picker-view-column>
        </picker-view>
        <button @click="submit" class="confirm">确定</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
    cityId: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    countryId: {
      typeof: String,
      default: "100000",
    },
  },
  watch: {
    cityId(newVal) {
      if (newVal.length == 3) {
        this.cityList.forEach((item, index) => {
          if (item.pid == newVal[0]) {
            this.value.push(index);
            item.children.forEach((items, indexs) => {
              if (items.pid == newVal[1]) {
                this.value.push(indexs);
                items.children.forEach((elem, i) => {
                  if (elem.pid == newVal[2]) {
                    this.value.push(i);
                  }
                });
              }
            });
          }
        });
      } else {
        this.value = [0, 0, 0];
      }
    },
    countryId(newVal) {
      if (newVal != "100000") {
        this.getCityList();
      }
    },
  },

  data() {
    return {
      hotCityList: [
        "北京",
        "上海",
        "深圳",
        "广州",
        "天津",
        "青岛",
        "长沙",
        "成都",
      ],
      cityList: [],
      title: "picker-view",
      marketList: [],
      distinguishList: [],
      value: [0, 0, 0],
      result: [],
      indicatorStyle: "height: 50px;",
      maskTopStyle: "",
      maskBottomStyle: "",
      economize: {},
      market: {},
      distinguish: {},
      isValue: true,
      cityValue: "",
      hotCityName: "",
    };
  },
  mounted() {
    this.getCityList();
  },
  methods: {
    // open() {
    //   this.getCityList();
    // },
    //当选中的城市发生变化时调用
    bindChange(e) {
      this.isValue = false;
      const val = e.detail.value;
      this.value = val;
      this.marketList = this.cityList[val[0]].children;
      this.distinguishList = this.marketList[val[1] || 0].children;
      this.economize = this.cityList[val[0]];
      this.market = this.marketList[val[1] || 0];
      this.distinguish = this.distinguishList[val[2] || 0];
    },
    //选择热门城市
    searchCity(value) {
      this.hotCityName = value; //确定选中的城市
      this.cityList.map((cityItem, cityIndex) => {
        cityItem.children.map((marketItem, marketIndex) => {
          if (marketItem.name.includes(value)) {
            //赋值市级选择数组
            this.marketList = this.cityList[cityIndex].children;
            const timer = setTimeout(() => {
              this.value = [cityIndex, marketIndex, 0];
              //赋值区县级选择数组
              this.distinguishList = this.marketList[marketIndex].children;
              clearTimeout(timer);
            }, 100);
          }
        });
      });
    },
    //获取城市
    getCityList() {
      uni.$u.http.get(`/api/area/tree?pid=${this.countryId}`).then((res) => {
        this.cityList = res;
        if (this.countryId == "100000") {
          this.marketList = res[this.value[1]].children;
          this.distinguishList = this.marketList[this.value[2]].children;
        }
      });
    },
    //提交选中的城市
    submit() {
      if (this.isValue) {
        this.marketList = this.cityList[this.value[0]].children;
        this.distinguishList = this.marketList[this.value[1] || 0].children;
        this.economize = this.cityList[this.value[0]];
        this.market = this.marketList[this.value[1] || 0];
        this.distinguish = this.distinguishList[this.value[2] || 0];
      }
      const obj = {
        ...this.economize,
        children: {
          ...this.market,
          children: this.distinguish,
        },
      };
      this.$emit("close", obj);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin: 32rpx 26rpx;
}

.inp {
  background-color: #f4f4f4;
  border-radius: 36rpx;
  height: 72rpx;
  width: 694rpx;
  margin: 30rpx auto 0;
  padding-left: 20rpx;
}

.city-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .city {
    width: 156rpx;
    height: 68rpx;
    text-align: center;
    line-height: 68rpx;
    background-color: #f4f4f4;
    border-radius: 36rpx;
    margin-bottom: 20rpx;
    color: #222;
    font-size: 28rpx;
  }
  .select-city {
    color: #f83224;
    border: 2rpx solid #f83224;
  }
}

.confirm {
  background-color: #f83224;
  border-radius: 40rpx;
  color: #fff;
  width: 702rpx;
  margin: 0 auto;
}

.picker-view {
  width: 100%;
  height: 180px;
  margin-top: 10px;
}

.item {
  height: 50px;
}

.text {
  line-height: 50px;
  text-align: center;
}

.picker-view-column {
  text-align: center;
}
</style>