vue 2.0 picker 省市区三级联动

原创
2018/01/31 18:54
阅读数 1.4K
<template>
  <div class="content">
    <form @submit.prevent="submitForm">
      <mt-header title="" class="wordTitle">
        <router-link to="/addresslist" slot="left">
          <mt-button><img src="../assets/img/return.png">新建地址</mt-button>
        </router-link>
        <button class="rightButton" slot="right">保存</button>
      </mt-header>
      <ul class="addressCont color_333 font_15">
        <li class="border_bottom">
          <span>姓名:</span><input v-model="name" />
          <input v-model="address_id" type="hidden" />
        </li>
        <li class="border_bottom">
          <span>手机号:</span><input v-model="phone" />
        </li>
        <li class="border_bottom city">
          <span>{{arr[0]}}-{{arr[1]}}-{{arr[2]}}</span>
          <!-- <input type="text" id='city-picker' placeholder="请选择 " /> -->
          <span class="cityCont" @click="popupVisible=true">请选择</span>
          <img src="../assets/img/go@3x.png">
        </li>
        <li class="border_bottom moreAddress">
          <span>详细地址:</span>
          <textarea placeholder="街道,楼牌号等" v-model="address"></textarea>
        </li>
      </ul>
      <div class="item-inner default border_bottom">
        <div class="item-title label color_333 font_15">设为默认地址</div>
        <div class="item-input">
          <mt-switch v-model="is_default"></mt-switch>
        </div>
      </div>
    </form>

    <!-- 三级联动 -->

    <!-- About Popup -->
		<mt-popup class="popup popup-about cityContent" v-model="popupVisible" popup-transition="popup-fade" @click="popupVisible=false">
      <div class="content-block ">

        <p @click="popupVisible=false" class="make_sure">确定</p>

        <!-- 三级联动 -->
        <mt-picker :slots="slots" value-key="region_name" @change="onValuesChange"></mt-picker>
      </div>
    </mt-popup>

  </div>
</template>
<style scoped>
.picker-slot.picker-slot-divider,.picker-slot-wrapper{
  height: 132px;
}
.picker-center-highlight{
  margin-top: -136px!important;
}
</style>

<script scoped>
import axios from "axios";
import { Toast } from "mint-ui";
import { Popup } from "mint-ui";
import {rootPath} from '../config/hostapi'
export default {
  name: "addressadd",
  data() {
    return {
      popupVisible: false,
      address_id: 0, //收货地址编号
      name: "", //收货人姓名
      phone: "",// 收货人手机
      province_id: 0,// 省编号
      city_id: 0, //市编号
      area_id: 0,// 区县编号
      address: "",// 地址详情
      is_default: false, //是否默认
      slots: [
        {// 省列
          flex: 1,
          values: [],
          className: "slot1",
          defaultIndex: 0,
          textAlign: "left"
        },
        {
          divider: true,
          content: "",
          className: "slot2"
        },
        {// 市列
          flex: 1,
          values: [],
          className: "slot3",
          defaultIndex: 0,
          textAlign: "left"
        },
        {
          divider: true,
          content: "",
          className: "slot4"
        },
        {// 区县列
          flex: 1,
          values: [],
          className: "slot",
          defaultIndex: 0,
          textAlign: "left"
        }
      ],
      //初始化数据
      arr: ["省份", "城市", "区县"],
      provincemodel: [{ region_id: 0, region_name: "请选择" }],
      citymodel: [{ region_id: 0, region_name: "请选择" }],
      countymodel: [{ region_id: 0, region_name: "请选择" }]
    };
  },
  created: function() {
    const that = this;
    var params = { address_id: this.$route.query.addressid };

    if (this.$route.query.addressid) {
      axios
        .get(rootPath+"/app/address/info", { params })
        .then(function(response) {
          let data = response.data;
          if (data.errcode == 0) {
            that.$nextTick(function() {
              that.address_id = data.data.address_id;
              that.name = data.data.name;
              that.phone = data.data.phone;
              that.province_id = data.data.province_id;
              that.city_id = data.data.city_id;
              that.area_id = data.data.area_id;
              that.address = data.data.address;
              that.is_default = Boolean(data.data.is_default);
              that.arr[0]=data.data.priovince_name;
              that.arr[1]=data.data.city_name;
              that.arr[2]=data.data.area_name;

            });
          } else {
            Toast(data.errmsg);
          }
        })
        .catch(function(error) {
          console.log(error);
          //Toast(error);
        });
    }
    that.slots[0].values = that.provincemodel;
    that.slots[2].values = that.citymodel;
    that.slots[4].values = that.countymodel;
    axios
      .get(rootPath+"/app/address/region_grading", {
        params: { region_id: 100000 }
      })
      .then(response => {
        if (response.data.errcode == 0) {
          that.$nextTick(function() {
            that.provincemodel = response.data.data;
            that.provincemodel.unshift({ region_id: 0, region_name: "请选择" });
            that.slots[0].values = that.provincemodel;
          });
        } else {
          Toast(response.data.errmsg);
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  mounted: function() {},
  methods: {
    submitForm: function() {// 保存地址
      const that = this;
      var params = new URLSearchParams();
      params.append("address_id", this.address_id);
      params.append("name", this.name);
      params.append("phone", this.phone);
      params.append("province_id", this.province_id);
      params.append("city_id", this.city_id);
      params.append("area_id", this.area_id);
      params.append("address", this.address);
      params.append("is_default", this.is_default);
      axios
        .post(rootPath+"/app/address/modity", params)
        .then(function(response) {
          let data = response.data;
          if (data.errcode == 0) {
            Toast(data.errmsg);
            that.$router.push({path:'addresslist'});
          } else {
            Toast(data.errmsg);
          }
        })
        .catch(function(error) {
          Toast(error);
        });
    },
    onValuesChange(picker, values) {// 选择省市县事件
      if (typeof values[0] == "undefined") {
        return;
      }
      if (
        values[0].region_id == 0 &&
        values[1].region_id == 0 &&
        values[2].region_id == 0 && (this.province_id!=0 ||this.city_id!=0|| this.area_id!=0)
      ) {

        return;
      }
      if (
        values[0].region_id == 0 &&
        values[1].region_id == 0 &&
        values[2].region_id == 0 && this.city_id==0 && this.area_id==0
      ) {
        this.province_id = 0;
        this.arr[0]='省份';
        this.city_id = 0;
        this.arr[1]='城市';
        this.area_id = 0;
        this.arr[2]='区县';
        this.slots[2].values = [{ region_id: 0, region_name: "请选择" }];
        this.slots[4].values = [{ region_id: 0, region_name: "请选择" }];
        return;
      }


      let regiontype = 0; //0不查询1 查询市 2查询区县
      let region_id = 0;
      if ((values[0].region_id != 0  && this.province_id==0)||(values[0].region_id !=  this.province_id && values[0].region_id != 0 )) {
        //查询市
        regiontype = 1;
        region_id = values[0].region_id;
        this.arr[0]=values[0].region_name;

      } else if ((values[1].region_id != 0 && this.city_id==0)||(values[1].region_id !=  this.city_id && values[1].region_id !=0 )) {
        //查询市
        regiontype = 2;
        region_id = values[1].region_id;
        this.arr[1]=values[1].region_name;
      }
       if ((values[2].region_id != 0 && this.area_id==0)||(values[2].region_id !=  this.area_id)) {
        this.area_id = values[2].region_id;
        this.arr[2]=values[2].region_name;
        return;
      }
      var that = this;
      axios
        .get(rootPath+"/app/address/region_grading", {
          params: { region_id: region_id }
        })
        .then(response => {
          if (response.data.errcode == 0) {
            if (regiontype == 1) {
              that.citymodel = response.data.data;
              that.citymodel.unshift({ region_id: 0, region_name: "请选择" });
              that.slots[2].values = that.citymodel;
              this.province_id = region_id;
              this.city_id =0;
               this.arr[1]='城市';
               this.slots[4].values = [{ region_id: 0, region_name: "请选择" }];
            } else {
              that.countymodel = response.data.data;
              that.countymodel.unshift({ region_id: 0, region_name: "请选择" });
              that.slots[4].values = that.countymodel;
              this.city_id = region_id;
              this.area_id=0;
              this.arr[2]='区县';
            }
          } else {
            Toast(data.errmsg);
          }
        })
        .catch(function(error) {
          console.log(error);
          //Toast(error);
        });
    }
  }
};
</script>

下面是效果图

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部