jsm-mall-h5-front/src/components/cityPicker.vue

<template>
  <view class="main" @touchmove.stop.prevent>
    <view class="zhezao" v-if="isShow" @tap.stop="isClose_city"></view>
    <view class="picker" v-if="isShow">
      <view class="title">
        <view class="cancel" @tap.stop="isClose_city">取消</view>
        <view class="text">选择省市区街道</view>
        <view class="comfim" @tap="confim_city">确定</view>
      </view>
      <view class="tab">
        <text v-if="province && level >= 1" :class="selectTabIndex == 1 ? 'active' : ''" @tap="selectTap(1)">{{
          province
        }}</text>
        <text v-if="province_id && level >= 2" :class="selectTabIndex == 2 ? 'active' : ''" @tap="selectTap(2)">{{
          city
        }}</text>
        <text v-if="city_id && level >= 3" :class="selectTabIndex == 3 ? 'active' : ''" @tap="selectTap(3)">{{
          area
        }}</text>
        <text
          v-if="area_id && level >= 4"
          style="width: 200rpx"
          :class="selectTabIndex == 4 ? 'active' : ''"
          @tap="selectTap(4)"
          >{{ street }}</text
        >
      </view>
      <view class="title1">选择省市区街道</view>
      <scroll-view scroll-y="true" class="scroll-Y" style="max-height: 800rpx">
        <view class="list" v-for="(item, index) in dataList" :key="index">
          <view class="item" @tap="selectItem(item)">
            <text>{{ item.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    level: {
      type: Number,
      default: 4
    },
    isShow: false
  },
  data() {
    return {
      selectTabIndex: 1, // 1==省 2=市 3=区 4=街道
      province: '选择省', //省
      province_id: '', // 省id
      city: '选择市', // 城市
      city_id: '', //城市id
      area: '选择区', // 区
      area_id: '', // 区id
      street: '选择街道', // 街道
      street_id: '' // 街道id
    }
  },
  onLoad() {},
  methods: {
    selectTap(index) {
      this.selectTabIndex = index
      if (index == 1) {
        this.$emit('getCityData', '')
      } else if (index == 2) {
        this.$emit('getCityData', this.province_id)
      } else if (index == 3) {
        this.$emit('getCityData', this.city_id)
      } else if (index == 4) {
        this.$emit('getCityData', this.area_id)
      }
    },
    selectItem(item) {
      console.log(item)
      if (this.selectTabIndex == 1) {
        if (this.province != item.name) {
          this.city_id = ''
          this.city = '选择市'
          this.area_id = ''
          this.area = '选择区'
          this.street_id = ''
          this.street = '选择街道'
        }
        this.province_id = item.id
        this.province = item.name
        if (this.selectTabIndex >= this.level) return false
        this.selectTabIndex = 2
        this.$emit('getCityData', item.id)
      } else if (this.selectTabIndex == 2) {
        if (this.city != item.name) {
          this.area_id = ''
          this.area = '选择区'
          this.street_id = ''
          this.street = '选择街道'
        }
        this.city_id = item.id
        this.city = item.name
        if (this.selectTabIndex >= this.level) return false
        this.selectTabIndex = 3
        this.$emit('getCityData', item.id)
      } else if (this.selectTabIndex == 3) {
        if (this.area != item.name) {
          this.street_id = ''
          this.street = '选择街道'
        }
        this.area_id = item.id
        this.area = item.name
        if (this.selectTabIndex >= this.level) return false
        this.selectTabIndex = 4
        this.$emit('getCityData', item.id)
      } else if (this.selectTabIndex == 4) {
        this.street_id = item.id
        this.street = item.name
      }
    },
    // searchList(){
    // 	this.$emit("getProductType",this.keyword)
    // },
    isClose_city() {
      this.$emit('isClose_city', false)
    },
    confim_city() {
      if (!this.province_id && this.level >= 1) {
        uni.showToast({
          title: '请选择省',
          icon: 'none'
        })
        return
      } else if (!this.city_id && this.level >= 2) {
        uni.showToast({
          title: '请选择市',
          icon: 'none'
        })
        return
      } else if (!this.area_id && this.level >= 3) {
        uni.showToast({
          title: '请选择区',
          icon: 'none'
        })
        return
      } else if (!this.street_id && this.level >= 4) {
        uni.showToast({
          title: '请选择街道',
          icon: 'none'
        })
        return
      } else {
        const obj = {
          province: this.province, //省
          province_id: this.province_id, // 省id
          city: this.city, // 城市
          city_id: this.city_id, //城市id
          area: this.area, // 区
          area_id: this.area_id, // 区id
          street: this.street, // 街道
          street_id: this.street_id // 街道id
        }
        this.$emit('confim_city', obj)
        this.isClose_city()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  .zhezao {
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.5);
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    margin-bottom: 36rpx;
  }
  .title1 {
    margin-top: 16rpx;
    font-size: 28rpx;
    color: #999999;
    margin-bottom: 20rpx;
  }
  .tab {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    border-top: 1rpx solid #eeeeee;
    border-bottom: 1rpx solid #eeeeee;
    text {
      width: 150rpx;
      text-align: center;
    }
    .active {
      color: #007fff;
    }
  }
  .picker {
    width: 100%;
    // min-height: 800rpx;
    height: 1100rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 11;
    border-radius: 40rpx 40rpx 0 0;
    padding: 40rpx 28rpx 10rpx;
    font-size: 32rpx;
    color: #333333;
    padding-bottom: 100rpx;
    box-sizing: border-box;
    .list {
      font-size: 28rpx;
      padding-left: 22rpx;
      .item {
        width: 100%;
        height: 68rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .active {
        color: #007fff;
      }
    }
  }
}
</style>