地址选择组件

公司要求增加省市区地址选择功能，之前项目中又没有这个组件，只能自己造咯

<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :center="true"
    >
      <div>
        <div class="address">
          <!-- 在设备里没有事件冒泡 -->
          <p class="address-item"><span @click="addrSelect('province')">{{ addr.province }}</span><span @click="addrSelect('province')" class="address-notice" v-show="addr.province===''">请选择省</span></p>
          <p class="address-item"><span @click="addrSelect('city')">{{ addr.city }}</span><span @click="addrSelect('city')" class="address-notice" v-show="addr.city===''">请选择市</span></p>
          <p class="address-item"><span @click="addrSelect('district')">{{ addr.district }}</span><span @click="addrSelect('district')" class="address-notice" v-show="addr.district===''">请选择区</span></p>
          <p class="address-item"><span @click="addrSelect('street')">{{ addr.street }}</span><span @click="addrSelect('street')" class="address-notice" v-show="addr.street===''">请选择街道</span></p>
        </div>
        <hr />
        <div class="list">
          <el-button v-for="v in showList" :key="v.dm" @click="chooseAddr(v)" class="list-item">
            {{ v.mc }}
          </el-button>
        </div>
      </div>
      <div
        v-if="close"
        style="justify-content: space-between; display: flex; margin: 10px 0 0"
      >
        <el-button @click="Close()">
          <span style="pointer-events: none">取消</span>
        </el-button>
        <el-button @click="confirm()">
          <span style="pointer-events: none">确认</span>
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "addressDialog",
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    close: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    visible: function (newValue, oldValue) {
      this.dialogVisible = newValue;
    },
  },
  data() {
    return {
      dialogVisible: this.visible,
      addrList: [
        {
          mc: "湖南省",
          dm: "1",
          children: [
            {
              mc: "长沙市",
              dm: "11",
              children: [
                { mc: "长沙县", dm: "111", children: [{ mc: "朝阳街街道", dm: "1111" }, { mc: "定阳台街道", dm: "1112" }]},
                { mc: "芙蓉县", dm: "112", children: [{ mc: "朝阳街街道", dm: "1121" }, { mc: "定阳台街道", dm: "1122" }]},
                { mc: "开福县", dm: "113", children: [{ mc: "朝阳街街道", dm: "1131" }, { mc: "定阳台街道", dm: "1132" }] },
              ],
            },
          ],
        },
        {
          mc: "江西省",
          dm: "2",
          children: [
            {
              mc: "九江市",
              dm: "21",
              children: [
                {
                  mc: "柴桑区",
                  dm: "211",
                  children: [{ mc: "朝阳街街道", dm: "2111" }, { mc: "定阳台街道", dm: "2112" }]
                },
                {
                  mc: "德安区",
                  dm: "212",
                  children: [{ mc: "朝阳街街道", dm: "2121" }, { mc: "定阳台街道", dm: "2122" }]
                },
                {
                  mc: "共青城市",
                  dm: "213",
                  children: [{ mc: "朝阳街街道", dm: "2131" }, { mc: "定阳台街道", dm: "2132" }]
                }
              ],
            },
            {
              mc: "南昌市",
              dm: "22",
              children: [
                {
                  mc: "西湖区",
                  dm: "221",
                  children: [{ mc: "朝阳街街道", dm: "2211" }, { mc: "定阳台街道", dm: "2212" }]
                },
                {
                  mc: "青云谱区",
                  dm: "222",
                  children: [{ mc: "朝阳街街道", dm: "2221" }, { mc: "定阳台街道", dm: "2222" }]
                },
                {
                  mc: "红谷滩新区",
                  dm: "223",
                  children: [{ mc: "朝阳街街道", dm: "2231" }, { mc: "定阳台街道", dm: "2232" }]
                },
                {
                  mc: "青山湖区",
                  dm: "224",
                  children: [{ mc: "朝阳街街道", dm: "2241" }, { mc: "定阳台街道", dm: "2242" }]
                },
              ],
            },
          ],
        },
        {
          mc: "湖北省",
          dm: "3",
          children: [
            {
              mc: "武汉市",
              dm: "31",
              children: [
              {
                  mc: "东西湖区",
                  dm: "311",
                  children: [{ mc: "朝阳街街道", dm: "3111" }, { mc: "定阳台街道", dm: "3112" }]
                },
              {
                  mc: "汉阳区",
                  dm: "312",
                  children: [{ mc: "朝阳街街道", dm: "3121" }, { mc: "定阳台街道", dm: "3122" }]
                },
              {
                  mc: "江岸区",
                  dm: "313",
                  children: [{ mc: "朝阳街街道", dm: "3131" }, { mc: "定阳台街道", dm: "3132" }]
                },
              ],
            },
            {
              mc: "黄冈市",
              dm: "32",
              children: [
              {
                  mc: "东西湖区",
                  dm: "321",
                  children: [{ mc: "朝阳街街道", dm: "3211" }, { mc: "定阳台街道", dm: "3212" }]
                },
              {
                  mc: "汉阳区",
                  dm: "322",
                  children: [{ mc: "朝阳街街道", dm: "3221" }, { mc: "定阳台街道", dm: "3222" }]
                },
              {
                  mc: "江岸区",
                  dm: "323",
                  children: [{ mc: "朝阳街街道", dm: "3231" }, { mc: "定阳台街道", dm: "3232" }]
                },
              ]
            },
            {
              mc: "荆门市",
              dm: "33",
              children: [
              {
                  mc: "东西湖区",
                  dm: "331",
                  children: [{ mc: "朝阳街街道", dm: "3311" }, { mc: "定阳台街道", dm: "3312" }]
                },
              {
                  mc: "汉阳区",
                  dm: "332",
                  children: [{ mc: "朝阳街街道", dm: "3321" }, { mc: "定阳台街道", dm: "3322" }]
                },
              {
                  mc: "江岸区",
                  dm: "333",
                  children: [{ mc: "朝阳街街道", dm: "3331" }, { mc: "定阳台街道", dm: "3332" }]
                },
              ],
            },
            {
              mc: "荆州市",
              dm: "34",
              children: [
              {
                  mc: "东西湖区",
                  dm: "341",
                  children: [{ mc: "朝阳街街道", dm: "3411" }, { mc: "定阳台街道", dm: "3412" }]
                },
              {
                  mc: "汉阳区",
                  dm: "342",
                  children: [{ mc: "朝阳街街道", dm: "3421" }, { mc: "定阳台街道", dm: "3422" }]
                },
              {
                  mc: "江岸区",
                  dm: "343",
                  children: [{ mc: "朝阳街街道", dm: "3431" }, { mc: "定阳台街道", dm: "3432" }]
                },
              ],
            },
          ],
        },
        {
          mc: "浙江省",
          dm: "4",
          children: [
            {
              mc: "杭州市",
              dm: "41",
              children: [
              {
                  mc: "东西湖区",
                  dm: "411",
                },
              {
                  mc: "汉阳区",
                  dm: "412",
                },
              {
                  mc: "江岸区",
                  dm: "413",
                },
              {
                  mc: "滨江区",
                  dm: "414",
                },
              {
                  mc: "富阳区",
                  dm: "415",
                },
              {
                  mc: "临安区",
                  dm: "416",
                },
              {
                  mc: "临平区",
                  dm: "417",
                },
              ],
            },
            {
              mc: "金华市",
              dm: "42",
              children: [
              {
                  mc: "东西湖区",
                  dm: "421",
                },
              {
                  mc: "汉阳区",
                  dm: "422",
                },
              {
                  mc: "江岸区",
                  dm: "423",
                },
              ],
            },
            {
              mc: "嘉兴市",
              dm: "43",
              children: [
              {
                  mc: "临平区",
                  dm: "431",
                },{
                  mc: "江岸区",
                  dm: "432",
                },
              ],
            },
            {
              mc: "宁波市",
              dm: "44",
              children: [{
                  mc: "临平区",
                  dm: "441",
                },{
                  mc: "江岸区",
                  dm: "442",
                },],
            },
          ],
        },
      ],
      showList: [],
      addr: {
        province: "",
        city: "",
        district: "",
        street: ""
      },
      chooseType: "province",
    };
  },
  created() {
     this.getDicAdministrationArea()
  },
  methods: {
    //获取省市区街道数据
    getDicAdministrationArea () {
      // 调用接口获取省市区街道数据res
        this.addrList= this.showList = res
    },
    addrSelect(type) {
      this.chooseType = type;
      let filterList; //保存this.showList的列表数据
      if (type === "province") {
        this.showList = this.addrList;
        console.log(this.showList, "=======showList=======")
        return;
      } else if (type === "city") {
        filterList = this.addrList.filter((item) => {
          return item.mc === this.addr.province;
        });
        this.showList = filterList[0].children
      } else if (type === "district") {
        for (let i = 0; i < this.addrList.length; i++) {
          if (this.addrList[i].mc === this.addr.province) {
            let temp = this.addrList[i].children;
            for(let j=0; j<temp.length; j++){
              if (temp[j].mc === this.addr.city) {
                this.showList = temp[j].children;
                break
              }
            }
            break
          }
        }
      }else if(type === "street") {
        for (let i = 0; i < this.addrList.length; i++) {
          if (this.addrList[i].mc === this.addr.province) {
            let temp = this.addrList[i].children;
            for(let j=0; j<temp.length; j++){
              if (temp[j].mc === this.addr.city) {
                temp = temp[j].children;
                for(let k = 0; k < temp.length; k++) {
                  if(temp[k].mc === this.addr.district) {
                    if(temp[k].children) {
                      this.showList = temp[k].children
                    }else{
                      this.showList = []
                    }
                    break
                  }
                }
                break
              }
            }
            break
          }
        }
      }
    },
    chooseAddr(val) {
      this.showList = val.children ? val.children : [];
      this.addr[this.chooseType] = val.mc;
      if(this.chooseType === "province") {
        this.chooseType = "city"
        this.addr.city = this.addr.district = this.addr.street = ''
      }else if(this.chooseType === "city") {
        this.chooseType = "district"
        this.addr.district = this.addr.street = ''
      }else if(this.chooseType === "district") {
        this.chooseType = "street"
        this.addr.street = ''
      }
    },
    Close() {
      this.dialogVisible = false;
      this.$emit("dialogClose", false);
    },
    confirm() {
      let { province, city, district } = this.addr
      if((province&&city&&district)||province.includes('特别行政区')) {
        this.$emit("dialogVlaue", this.addr);
        this.Close()
      }else {
        api.openAlert(this, '请选择省市区', "提示")
      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-dialog__wrapper {
  background-color: rgba(0, 0, 0, 0.5);
}
/deep/ {
  .el-dialog {
    width: 100vw !important;
    background: #eeeeee;
    border: none;
    padding: 0;
    margin: 0 auto 0 !important;
    // position: relative;
    position: absolute;
    bottom: 0;
    // border-radius: 14px;
    .el-dialog__header {
      padding: 0;
      .el-dialog__title {
        font-size: 48px;
        color: #fff !important;
      }
    }
    .el-dialog__body {
      margin: 2rem 1rem;
      font-size: 36px;
      background: #fff;
      border: #c4c4c4 1px solid;
      //   color: #fff !important;
    }
    .el-dialog__footer {
      padding: 5px 15px 0;
      position: absolute;
      bottom: 40px;
      left: 0;
      right: 0;
    }
    .buttonBox {
      display: flex;
      flex-wrap: wrap;
    }
    .address{
      .address-item{
        display: inline-block;
        .address-notice{
          font-size: 20px;
          color: red
        }
      }
    }
    .list{
      max-height: 28vh;
      overflow: auto;
      .list-item{
      padding-bottom: 15px;
    }
    }
    .el-button {
      height: 5rem;
      margin: 5px;
      min-width: 10rem;
      background: url("../assets/images/蓝色按钮.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: none;
      span {
        color: #000;
        font-size: 2rem;
        pointer-events: none;
      }
    }
  }
}
</style>