html5商城网站开发软文世界平台

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;}}},// 用粘贴板的省市区 匹配后台返回的省市区 获取城市idgetCityId(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>