Vue2:智能地址识别

小小怪_下士

已于 2024-04-16 09:35:31 修改

阅读量1.4k

点赞数

文章标签： vue.js

于 2023-08-07 11:22:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45061461/article/details/132142352

版权

在项目中,可能会有用户填写地址,需要做成一个类似购物复制用户地址提交货,拿取到用户的名称,电话,收货地址信息.

推荐使用这个插件,

一. 安装插件依赖

npm install address-parse -save

二. 在需要获取地址的组件中引入插件

import AddressParse,{AREA, Utils} from 'address-parse';

三.使用该插件

//只能填写组件点击确定
    getintelligence() {
      console.log('用户输入的信息内容',this.addruleForm.intelligenceaddress) 
      /**
       * AddressParse.parse(this.addruleForm.intelligenceaddress) //使用组件中的parse方法接收用户的信息 ,返回截取到的对应 姓名 电话 和 地址信息 
       * result : 此返回中值地址的信息 只包含了 区的id ,如果实在PC端的话,省市区三级联动需要拿取到 省id 市id 区id 否则不能联动下拉找不到
       * */
      const result = AddressParse.parse(this.addruleForm.intelligenceaddress);
      /**
       * Utils.getTargetAreaListByCode 拿取区对应的 父级 市id 和 爷爷级 省id
       */
      const [province, city] = Utils.getTargetAreaListByCode('province', result[0].code, true);
      console.log('province',province);
      console.log('city',city);
      /**将获取到的 省id 和 市id 追加到result中 */
      result[0].provinceCode = province.code
      result[0].cityCode = city.code
      //把信息提交给需要用到数据 帮助用户默认填写的页面
      this.$emit("intelligence", result);
       this.open = false
       this.empty()
    },

页面组件:

1.只能填写的组件

四: 页面中拿取到组件传递过来的数据

getintelligence(datas) {
      //子组件传递过来的数据
      let data = datas[0]
      this.ruleForm.consignee = data.name;
      this.ruleForm.mobile = data.mobile;
      let sheng = data.provinceCode;
      let shi = data.cityCode;
      let qu = data.code;

      
      //判断 省 市  区 是否为空
      if (sheng && sheng && qu) {
        this.provinces = [sheng, shi, qu];
        this.ruleForm.address = data.details
        for (let i in this.provinces) {
          //只能填写省市区 识别省市区 长度为6 不为6向字符串末尾追加
          if (this.provinces[i].length != 6) {
            // padEnd 向字符串末尾增加到指定长度得 内容 (指定长度,追加的内容)
            this.provinces[i] = parseInt(this.provinces[i].padEnd(6, "0"));
          } else {
            this.provinces[i] = parseInt(this.provinces[i]);
          }
        }
      }

      //提交信息获取省市区数据
      this.ruleForm.province = this.provinces[0]; //省
      this.ruleForm.city = this.provinces[1]; //市
      this.ruleForm.area = this.provinces[2]; //区
      //关闭弹窗
      this.$refs.intelligence.open = false;
    },

提示:需要引用组件地址和注册组件