基于插件市场的插件实现该功能
收货地址解析、快递地址解析、物流地址解析自动识别 支持pc、h5、微信小程序 - DCloud 插件市场
省市区要通过后端接口返回
<template>
<view >
<view class="address">
<view class="address-add">
<u-form :model="form" :rules="rules" ref="uForm">
<u-form-item label="收货人" :border="border" :borderBottom='false'
:left-icon-style="{ color: '#ccc', fontSize: '34upx' }" prop="name">
<u-input v-model="form.name" placeholder="请输入姓名" :border="true" />
</u-form-item>
<u-form-item label="手机号" :borderBottom='false' :left-icon-style="{ color: '#ccc', fontSize: '34upx' }"
prop="mobile">
<u-input v-model="form.mobile" placeholder="请输入手机号" :border="true" />
</u-form-item>
<u-form-item label="所在地区" :borderBottom='false' :left-icon-style="{ color: '#ccc', fontSize: '34upx' }"
prop="txt">
<uni-data-picker v-model="checkde" :localdata="treeList" :clear-icon="false" popup-title="请选择所在地区"
@change="onchange" @nodeclick="onnodeclick" style="width: 100%;"></uni-data-picker>
</u-form-item>
<u-form-item label="详细地址" :borderBottom='false' :left-icon-style="{ color: '#ccc', fontSize: '34upx' }"
prop="address">
<u-input v-model="form.address" placeholder="小区楼栋/乡村名称" :border="true" />
</u-form-item>
</u-form>
</u-form>
<!-- <button type="default" @click="add">保存</button> -->
</view>
<u-toast ref="uToast" />
<!-- 识别区 -->
<view class="lastitem">
<view class="lasttext">
<textarea placeholder="试试点击识别按钮，可快速识别 您的收货信息（收件人姓名、手机号、收货地址）" @change="autoParse"
v-model="infos"></textarea>
<view class="shibie" @click="autoParse">
识别
</view>
</view>
<view class="copy">地址粘贴板</view>
</view>
<!-- 详细地址 -->
<view class="defaddress">
<Address :operate="operate" :addressinfo="addressinfo"></Address>
</view>
</view>
<button type="default" @click="add">保存</button>
</view>
</template>
<script>
import {
AddressParse
} from '../../../uni_modules/Winglau14-address-auto-parse/components/Winglau14-address-auto-parse/lib/addressParseBundle'
import Address from '../../../components/Address/Address.vue'
export default {
components: {
Address
},
data() {
return {
border: false,
objssdsds: {},
infos: '',
param: {},
operate: 'delbtn',
addressinfo: {},
form: {
id: '',
city: '', //城市id
district: '', //地区id
province: '', //省份id
address: '', //详细地址
mobile: '',
name: ''
},
checkde: [],
rules: {
address: [{
required: true,
message: '请输详细地址',
trigger: ['blur']
}, ],
name: [{
required: true,
message: '请输入姓名',
trigger: ['blur']
}, ],
mobile: [{
required: true,
message: '请输入手机号码',
trigger: ['change', 'blur']
},
{
validator: (rule, value, callback) => {
return this.$u.test.mobile(value);
},
message: '手机号不合法',
trigger: ['blur']
}
],
},
treeList: [],
radio: '',
};
},
/* 监听页面初次渲染完成 */
onReady(option) {
this.gettree();
this.$refs.uForm.setRules(this.rules);
},
onShow() {
this.getMyAddress()
},
onLoad(option) {
if (!option.para) return;
var data = JSON.parse(decodeURIComponent(option.para))
var tree = uni.getStorageSync('treeList')
this.form.name = data.name;
this.form.mobile = data.phone;
this.form.address = data.detail;
this.form.id = data.id;
//根据地名查找下标
var oneindexs = tree.findIndex(item => item.text === data.region.province);
var towindexs = tree[oneindexs].children.findIndex(item => item.text === data.region.region);
var threeindexs = tree[oneindexs].children[towindexs].children.findIndex(item => item.text === data.region
.city);
//根据下标寻找id
var oneindex = tree[oneindexs].value;
var towindex = tree[oneindexs].children[towindexs].value;
var threeindex = tree[oneindexs].children[towindexs].children[threeindexs].value;
this.checkde = [oneindex, towindex, threeindex];
this.form.city = threeindex;
this.form.district = towindexs;
this.form.province = [oneindex]
},
methods: {
//获取我的收货地址
getMyAddress() {
this.$u.api.getDefaultAddress().then(res => {
this.addressinfo = res.AddressInfo
})
},
onchange(e) {
const value = e.detail.value
this.form.province = value[0].value;
this.form.district = value[1].value;
this.form.city = value[2].value;
console.log(value, this.form.province, this.form.district, '???????????');
},
onnodeclick(node) {
},
gettree() {
this.$u.api.gettree().then(res => {
var one = [];
var tow = [];
var three = [];
for (let key in res.list) {
//省
var tows = []
for (let keyson in res.list[key].city) {
//市
var threes = []
for (let keygrandson in res.list[key].city[keyson].region) {
//区
threes.push({
value: res.list[key].city[keyson].region[keygrandson].id,
text: res.list[key].city[keyson].region[keygrandson].name,
})
}
tows.push({
value: res.list[key].city[keyson].id,
text: res.list[key].city[keyson].name,
children: threes
})
}
one.push({
value: res.list[key].id,
text: res.list[key].name,
children: tows
})
}
this.treeList = one;
console.log(this.treeList, '是什么');
uni.setStorageSync('treeList', this.treeList)
})
},
//添加地址 保存
add() {
console.log("添加地址")
var that = this;
if (this.checkde.length === 0) {
that.$refs.uToast.show({
title: '请选择所在地区',
})
return;
}
this.$refs.uForm.validate(valid => {
if (valid) {
if (!that.form.id) {
that.$u.api.useraddresssave({
city_id: that.form.city, //城市id
region_id: that.form.district, //地区id
province_id: that.form.province, //省份id
detail: that.form.address, //详细地址
phone: parseInt(that.form.mobile),
name: that.form.name
}).then(res => {
if (res) {
that.form = {
addressssq: '',
city: '', //城市id
district: '', //地区id
province: '', //省份id
address: '', //详细地址
phone: '',
name: ''
}
this.value = []
that.$refs.uToast.show({
title: '添加成功',
type: 'success',
back: true
})
}
})
} else {
that.$u.api.updDaaress({
id: that.form.id,
city_id: that.form.city, //城市id
region_id: that.form.district, //地区id
province_id: that.form.province, //省份id
detail: that.form.address, //详细地址
phone: parseInt(that.form.mobile),
name: that.form.name
}).then(res => {
if (res) {
that.form = {
addressssq: '',
city: '', //城市id
district: '', //地区id
province: '', //省份id
address: '', //详细地址
phone: '',
name: '',
id: ''
}
this.value = []
that.$refs.uToast.show({
title: '修改成功',
type: 'success',
back: true
})
}
})
}
}
})
},
foc() {
this.value = true;
},
PasteArea(data) {
const Area = data
console.log(Area, '粘贴的数据');
console.log(this.treeList, '接口数据');
// 上官飞雪,13511111111,广东省广州市白云区 南领南业五横路3号狄驰制衣
let province_obj = {};
// 获取省份id
let provinceArr = this.treeList.filter(item => item.text == Area.province);
if (provinceArr.length) {
province_obj.province_id = provinceArr[0].value;
province_obj.province_arr = provinceArr[0].children;
}
console.log(province_obj, 'aaaaaaaa')
// 获取市区
if (province_obj.province_arr instanceof Array) {
let cityArr = province_obj.province_arr.filter(item => item.text == Area.city);
if (cityArr.length) {
province_obj.city_id = cityArr[0].value;
province_obj.city_arr = cityArr[0].children
}
}
// 获取区域 area
if (province_obj.city_arr instanceof Array) {
let areaArr = province_obj.city_arr.filter(item => item.text == Area.area);
if (areaArr.length) {
province_obj.area_id = areaArr[0].value;
province_obj.area_arr = areaArr[0].children
}
}
let obj = {};
if (province_obj.province_id) obj.province_id = province_obj.province_id;
if (province_obj.city_id) obj.city_id = province_obj.city_id;
if (province_obj.area_id) obj.area_id = province_obj.area_id;
this.form.city = obj.city_id;
this.form.district = obj.area_id;
this.form.province = obj.province_id;
this.checkde = obj.area_id ? obj.area_id : obj.city_id ? obj.city_id : obj.province_id;
this.objssdsds = obj
},
//点击识别收货信息
autoParse() {
console.log(this.infos, '????');
var that = this
if (!this.infos) {
return uni.showToast({
title: '请粘贴您需要识别的信息',
icon: 'none'
})
}
this.dadata = AddressParse.parse(this.infos)
let result = this.dadata[0]
this.PasteArea(result) //粘贴的数据需要对应接口传回来的省市区id
if (result && result.length) {
let html = ''
for (let key in result[0]) {
if (result[0][key]) {
html += key + `:` + result[0][key] + `<br/>`
}
}
this.value = JSON.stringify(result[0])
}
console.log('打印一下addr', result.details)
if (result.name != '') {
that.form.name = result.name
}
if (result.phone != '') {
that.form.mobile = result.phone
}
if (result.details != '') {
// 拼接省市区加详细地址
// that.form.address = result.province + '-' + result.city + '-' + result.area + '-' + result.details
that.form.address = result.details
}
},
}
}
</script>
<style lang="scss" scoped>
.address {
height: 100%;
background-color: #FFFFFF;
height: 100%;
background-color: #FFFFFF;
padding-top: 10px;
margin: 10px;
border-radius: 10px;
.defaddress {
border-bottom: 1rpx solid #e8e8e8;
margin-left: 28rpx;
padding-bottom: 40rpx;
}
}
.address-add {
padding: 30rpx;
}
/deep/.u-form-item__message {
padding-left: 75px !important;
}
/deep/.u-form-item--left {
width: 150rpx !important;
flex: 0 0 150rpx !important;
}
/deep/ .u-input--border {
border: 1px solid #fff !important;
}
/deep/ .input-value-border {
border: 1px solid #fff !important;
}
/deep/ .u-form-item {
border-bottom: 1px solid #e8e8e8;
}
.lasttext {
position: relative;
}
.shibie {
background-color: #1ccd7f;
width: 100rpx;
line-height: 48rpx;
height: 48rpx;
color: #fff;
/* margin: 10px; */
text-align: center;
position: absolute;
top: 142rpx;
right: 54rpx;
border-radius: 6rpx;
}
textarea {
width: 100%;
border: 2rpx solid #ededed;
margin: 0 32rpx;
width: 604rpx;
height: 160rpx;
background-color: #ededed;
padding: 20rpx;
font-size: 26rpx;
border-radius: 10rpx;
}
.copy {
text-align: center;
margin: 6px auto;
}
</style>
1463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
