uniapp粘贴板地址识别 address-parse插件的使用

1： 插件安装

 主要是依靠 address-parse 这个插件：

官网 收货地址自动识别 支持pc、h5、微信小程序 - DCloud 插件市场 

// 首先需要引入插件
npm install address-parse --save

 2：html部分

		<view class="">
			<view class="center copyContBox">
				<textarea 
					placeholder='云南省昆明市西山区前福路xxx号，李狗蛋，132xxxxxxxx' 
					v-model="copyContent" 
					style="width: 100%;"></textarea>
			</view>
			<view class="copyBtnBox">
				<button 
					@click="discernAddAddressBtn" 
					class="copyBtn center">{{$t(`识别地址`)}}
				</button>
			</view>
		</view>

        <form @submit="formSubmit">
			<view class='addAddress'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t(`姓名`)}}</view>
						<input type='text' 
                            :placeholder='$t(`请输入姓名`)' 
                            name='real_name' 
                            :value="userAddress.real_name"
						    placeholder-class='placeholder'>
                        </input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t(`联系电话`)}}</view>
						<input 
                             type='number' 
                             :placeholder='$t(`请输入联系电话`)' 
                             name="phone" 
                             :value='userAddress.phone'
							 placeholder-class='placeholder' 
                             pattern="\d*">
                        </input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t(`所在地区`)}}</view>
						<view class="address">
							<picker 
                                mode="multiSelector" 
                                @change="bindRegionChange"
								@columnchange="bindMultiPickerColumnChange"                     
                                :value="valueRegion" 
                                :range="multiArray">
								<view class='acea-row'>
									<view class="picker">
                                    {{region[0]}}，
                                    {{region[1]}}，                
                                    {{region[2]}}</view>
									<view 
                                        class='iconfont icon-dizhi fontcolor'>
                                    </view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t(`详细地址`)}}</view>
						<input type='text' 
                            :placeholder='$t(`请填写具体地址`)' 
                            name='detail' placeholder-class='placeholder'
							:value='userAddress.detail'></input>
					</view>
				</view>
				<view 
                    class='default acea-row row-middle' 
                    @click='ChangeIsDefault'>
					<checkbox-group>
						<checkbox 
                            :checked="userAddress.is_default ? true : false" />    
                            {{$t(`设置为默认地址`)}}
					</checkbox-group>
				</view>

				<button class='keepBnt bg-color' form-type="submit">
                    {{$t(`立即保存`)}}
                </button>
				<!-- #ifdef MP -->
				<view class="wechatAddress" v-if="!id" @click="getWxAddress">
                    {{$t(`导入微信地址`)}}
                </view>
				<!-- #endif -->
				
			</view>
		</form>


        <style scoped lang="scss">
            .copyContBox{
		        padding: 15rpx;
		        box-sizing: border-box;
		        background-color: #fff;
	        }
	        .copyBtnBox{
		        margin: 15rpx;
		        display: flex;
		        justify-content: flex-end;
	        }
	        .copyBtn{
		        width: 160rpx;
		        height: 60rpx;
		        color: #fff;
		        background-color: #42ca4d;
		        font-size: 25rpx;
	        }
	        .center{
		        display: flex;
		        justify-content: center;
		        align-items: center;
	        }
        </style>

3：is代码

<script>
import AddressParse from 'address-parse';

export default {
    data() {
        return {
            copyContent:"",
            userAddress: {
		        is_default: false
		    }, //地址详情
            region: [this.$t(`省`), this.$t(`市`), this.$t(`区`)],
        }
        
    },
    methods: {
        discernAddAddressBtn(){
		    let that=this;
			const result = AddressParse.parse(that.copyContent)[0];
				if(result==undefined){
					return  that.$util.Tips({
						title: that.$t(`粘贴板为空，请将复制的内容放到粘贴板区域`)
					});
				}else{
				    if(
                        result.province==""&&result.city==""&&result.area==""
                        &&result.name==""&&result.mobile==""
                      ){
						uni.showModal({
							title: '温馨提示',
							content: '请输入正确的地址',
							success: function (res) {
								that.userAddress.real_name="";
								that.userAddress.mobile="";
								that.userAddress.details="";
								that.$set(that,'region', ["省","市","区"]);
								if (res.confirm) {
									// console.log('用户点击确定',that.useIntegral);
								} else if (res.cancel) {
									// console.log('用户点击取消');
									// 用户点击了取消按钮的相关逻辑可以放在这里
								}
							}
						});
					}else{
						that.$set(that.userAddress, 'real_name', result.name);
						that.$set(that.userAddress, 'phone', result.mobile);
						if(
                            result.province!=""||result.city!=""||
                            result.area!=""
                          ){
							that.$set(
                                that,
                                'region',
                                [result.province,result.city,result.area]
                            );
						 }else{
							that.$set(that,'region', ["省","市","区"]);
						}
						that.$set(that.userAddress, 'detail', result.details);
						that.cityId= this.getCityId(
                            that.district,result.province,result.city,result.area
                        ).v;
					}
				}
			},
			// 用粘贴板的省市区 匹配后台返回的省市区 获取城市id
			getCityId(arr,province,city,area){
				if(province!=""&city!=""&area!=""){
					let obj={}
					for (let item of arr) {
						if(item.n == province){
							if(item.c.length>0){
								for (let ite of item.c) {
									if(ite.n == city){
										if(ite.c.length>0){
											let obj=ite.c.find((val)=>{
												return val.n==area
											})
											return obj
										}
									}
								}
							}
						}
					}
				}else{
					return false;
				}
			},
    },
}
</script>