vue地址解析+虚拟手机号解析

（1）安装 address-parse模块

npm install address-parse --save

（2）地址修改-弹窗页面

<template>
  <div>
    <el-dialog title="修改收货地址" :visible.sync="dialogVisible" width="45%">
        <el-form ref="form" :model="formData"  :rules="rules" label-width="120px" style="margin-right:20px;height:400px;">

           <el-form-item>
                  <el-input type="textarea" :rows="2" placeholder="粘贴收货信息，(格式：姓名 电话 地址)" v-model="addressInfo" @input="parseAddress">
                  </el-input>
            </el-form-item>

            <el-form-item label="收货人名称" prop="recipientName">
                <el-input v-model="formData.recipientName"></el-input>
            </el-form-item>

            <el-form-item label="收货人手机号码" prop="recipientMobile">
                <el-input v-model="formData.recipientMobile"></el-input>
            </el-form-item>

            <el-form-item label="省" prop="recipientProvinceName">
                <el-input v-model="formData.recipientProvinceName"></el-input>
            </el-form-item>

            <el-form-item label="市" prop="recipientCityName">
                <el-input v-model="formData.recipientCityName"></el-input>
            </el-form-item>

            <el-form-item label="区" prop="recipientCountyName">
                <el-input v-model="formData.recipientCountyName"></el-input>
            </el-form-item>

            <el-form-item label="收货人详细地址" prop="recipientAddress">
                <el-input v-model="formData.recipientAddress"></el-input>
            </el-form-item>

        </el-form>
        <div style="text-align:center;margin-top:50px;">
            <el-button type="primary" @click="onConfirm()">确定</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>

import OrderApi from '@/api/OrderApi'
import AddressParse from 'address-parse';
export default {
    components: {
    },
    data() {
        return {
            dialogVisible:false,
            formData: {
                recipientName:null,
                recipientMobile:null,
                recipientProvinceName:null,
                recipientCityName:null,
                recipientCountyName:null,
                recipientAddress:null,
            },
            rules: {
                recipientName: [{ required: true, message: '请输入收货人名称', trigger: 'blur' }],
                recipientMobile: [{ required: true, message: '请输入收货人手机号码', trigger: 'blur' }],
                recipientProvinceName: [{ required: true, message: '请输入省', trigger: 'blur' }],
                recipientCityName: [{ required: true, message: '请输入市', trigger: 'blur' }],
                recipientCountyName: [{ required: true, message: '请输入区', trigger: 'blur' }],
                recipientAddress: [{ required: true, message: '请输入收货人详细地址', trigger: 'blur' }],
            },
            addressInfo:null,
        }
    },
    created() {
    },
    methods: {
      show(data) {
         this.addressInfo = null;
         this.$refs['form'] && this.$refs['form'].resetFields();

         this.formData.orderId = data.id;
         this.formData.recipientName = data.recipientName;
         this.formData.recipientMobile = data.recipientMobile;
         this.formData.recipientProvinceName = data.recipientProvinceName;
         this.formData.recipientCityName = data.recipientCityName;
         this.formData.recipientCountyName = data.recipientCountyName;
         this.formData.recipientAddress = data.recipientAddress;
         this.dialogVisible = true
      },
      onConfirm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            OrderApi.updateAddress(this.formData).then(res => {
                this.$message.success('修改成功')
                this.dialogVisible = false
                this.$emit('s')
            })
          } else {
            return false;
          }
        });
      },
      parseAddress(value) { //地址解析
            if (value != '') {
                // 虚拟手机号码
                const numbers = value.match(/\d{11,}-{0,1}\d{4}/);
                if(numbers){
                   this.$set(this.formData, 'recipientMobile', numbers[0]);
                   value = value.replace(numbers[0],'');
                }
                const result = AddressParse.parse(value);
                this.$set(this.formData, 'recipientProvinceName', result[0].province)
                this.$set(this.formData, 'recipientCityName', result[0].city)
                this.$set(this.formData, 'recipientCountyName', result[0].area)
                this.$set(this.formData, 'recipientAddress', result[0].details)
                this.$set(this.formData, 'recipientName', result[0].name)
                if(result[0].mobile){
                   this.$set(this.formData, 'recipientMobile', result[0].mobile)
                }
            }
      },
    }
}
</script>

<style scoped>
</style>

（3）按钮

<el-button type="primary" size="mini" @click="$refs.addressEditForm.show(row)">修改收货地址</el-button>

原文地址：https://blog.csdn.net/baidu_36583119/article/details/144353020

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！