uniapp粘贴板地址识别

1: 插件安装

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

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

javascript 复制代码
// 首先需要引入插件
npm install address-parse --save

2:html部分

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代码

html 复制代码
<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>
相关推荐
LuckySusu19 小时前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi19 小时前
个人写码感悟:TailwindCSS不要忽视子选择器
前端
_大学牲19 小时前
Flutter 之魂 GetX🔥(三)深入掌握依赖管理
前端·flutter
今天头发还在吗19 小时前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
渣哥19 小时前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试
toobeloong20 小时前
Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程
前端·javascript·electron
悠哉摸鱼大王20 小时前
前端获取设备视频流踩坑实录
前端·javascript
铅笔侠_小龙虾20 小时前
深入理解 Vue.js 原理
前端·javascript·vue.js
西西学代码20 小时前
Flutter---showCupertinoDialog
java·前端·flutter