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>
相关推荐
cy玩具14 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer0841 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf42 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json