chanyiUniapp/components/CitySelect.vue

<template>
  <view>
    <text class="uni-input" @tap="open">{{value}}</text>
    <uni-popup ref="popup" type="bottom">
      <view class="cityselect">
        <view class="cityselect-header">
          <view class="cityselect-title">
            <text>请选择地址</text>
          </view>
          <view class="cityselect-nav">
            <view class="item" v-if="provinceActive" @tap="changeNav(0)">
              <text>{{provinceActive.n}}</text>
            </view>
            <view class="item" v-if="cityActive" @tap="changeNav(1)">
              <text>{{cityActive.n}}</text>
            </view>
            <view class="item" v-if="districtActive" @tap="changeNav(2)">
              <text>{{districtActive.n}}</text>
            </view>
            <view class="item active" v-else>
              <text>请选择</text>
            </view>
          </view>
        </view>
        <view class="cityselect-content">
          <swiper class="swiper" disable-touch="true" touchable="false" :current="current">
            <swiper-item>
              <scroll-view scroll-y class="cityScroll">
                <view>
                  <view
                    class="cityselect-item"
                    v-for="(item,index) in province"
                    :key="index"
                    @tap="selectProvince(index)"
                  >
                    <view class="cityselect-item-box">
                      <text>{{item.n}}</text>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view scroll-y class="cityScroll">
                <view>
                  <view
                    class="cityselect-item"
                    v-for="(item,index) in city"
                    :key="index"
                    @tap="selectCity(index)"
                  >
                    <view class="cityselect-item-box">
                      <text>{{item.n}}</text>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view scroll-y class="cityScroll">
                <view>
                  <view
                    class="cityselect-item"
                    v-for="(item,index) in district"
                    :key="index"
                    @tap="selectDistrict(index)"
                  >
                    <view class="cityselect-item-box">
                      <text>{{item.n}}</text>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script type="text/babel">
import uniPopup from "./uni-popup/uni-popup.vue";
import uniPopupMessage from "./uni-popup/uni-popup-message.vue";
import uniPopupDialog from "./uni-popup/uni-popup-dialog.vue";

export default {
  name: "CitySelect",
  components: {
    uniPopup,
    uniPopupMessage,
    uniPopupDialog
  },
  props: ["callback", "items", "defaultValue"],
  data() {
    return {
      value: "请选择",
      show: this.value,
      province: [],
      provinceActive: null,
      city: [],
      cityActive: null,
      district: [],
      districtActive: null,
      current: 0
    };
  },
  watch: {
    items(nextItem) {
      this.province = nextItem;
    },
    defaultValue(next){
      this.value=next
    }
  },
  mounted() {
    console.log(this);
    if (this.value) {
      this.value = this.value;
    }
    this.province = this.items;
  },
  methods: {
    open() {
      this.province = this.items;
      this.provinceActive = null;
      this.cityActive = null;
      this.districtActive = null;
      this.city = [];
      this.district = [];
      this.current = 0;
      this.$refs.popup.open();
    },
    changeNav(index) {
      if (index == 0) {
        this.provinceActive = null;
      }
      if (index == 1) {
        this.cityActive = null;
      }
      if (index == 2) {
        this.districtActive = null;
      }
      this.current = index;
    },
    selectProvince(index) {
      this.provinceActive = this.province[index];
      this.city = this.province[index].c;
      this.current = 1;
    },
    selectCity(index) {
      this.cityActive = this.city[index];
      this.district = this.city[index].c;
      this.current = 2;
    },
    selectDistrict(index) {
      this.districtActive = this.district[index];
      this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`;
      // this.callback({
      //   province: {
      //     id: this.provinceActive.v,
      //     name: this.provinceActive.n
      //   },
      //   city: {
      //     id: this.cityActive.v,
      //     name: this.cityActive.n
      //   },
      //   district: {
      //     id: this.districtActive.v,
      //     name: this.districtActive.n
      //   }
      // });
      this.$emit("callback", {
        province: {
          id: this.provinceActive.v,
          name: this.provinceActive.n
        },
        city: {
          id: this.cityActive.v,
          name: this.cityActive.n
        },
        district: {
          id: this.districtActive.v,
          name: this.districtActive.n
        }
      });
      this.$refs.popup.close();
    }
  }
};
</script>

<style lang="less">
.cityselect {
  width: 100%;
  height: 75%;
  background-color: #fff;
  z-index: 1502;
  position: relative;
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
  .cityScroll {
    height: 100%;
  }
  .swiper {
      height: 800rpx;
  }
}
.cityselect-header {
  width: 100%;
  z-index: 1;
}
.cityselect-title {
  width: 100%;
  font-size: 30rpx;
  text-align: center;
  height: 95rpx;
  line-height: 95rpx;
  position: relative;
  &:cityselect-title:after {
    height: 1px;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
  }
}
.cityselect-nav {
  width: 100%;
  padding-left: 20rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .item {
    font-size: 26rpx;
    color: #222;
    display: block;
    height: 80rpx;
    line-height: 92rpx;
    padding: 0 16rpx;
    position: relative;
    margin-right: 30rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    &.active {
      color: #f23030 !important;
      border-bottom: 1rpx solid #f23030;
    }
  }
}
.cityselect-content {
  height: 100%;
  width: 100%;
}
.cityselect-item {
  .cityselect-item-box {
    display: block;
    padding: 0 40rpx;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    line-height: 64rpx;
    max-height: 65rpx;
    font-size: 26rpx;
    color: #333;
    &:after {
      content: "";
      height: 1rpx;
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
    }
  }
}
</style>