1： 插件安装
主要是依靠 address-parse 这个插件：
官网 收货地址自动识别 支持pc、h5、微信小程序 - DCloud 插件市场
// 首先需要引入插件
npm install address-parse --save2：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>
