uniapp客户线上订货收货地址自动识别功能
自动认别收货地址
·
最近我们代理订货系统客户提出了一个需求，在地址管理里可以自动认别客户填写的姓名、手机号、省市区等信息。我们在原地址管理里增加了一个智能解析输入框，界面如图：
UNIAPP代码如下：
<template>
<view class="content">
<view class="row1 b-b">
<textarea rows="4" class="input" type="text" v-model="addstr" placeholder="智能解析：粘贴或输入整段文字，自动识别姓名、号码、地址，如：张三13855558888江苏南京雨花台区软件大道18号"
placeholder-class="placeholder" />
<view class="znjx" @click="disAddress">智能解析</view>
</view>
<view class="row b-b" v-show="false">
<text class="tit">序号</text>
<input class="input" type="text" v-model="addressData.ADDR_ID" placeholder="序号" placeholder-class="placeholder" />
</view>
<view class="row b-b">
<text class="tit">联系人</text>
<input class="input" type="text" v-model="addressData.NAME" placeholder="收货人姓名" placeholder-class="placeholder" />
</view>
<view class="row b-b">
<text class="tit">手机号</text>
<input class="input" type="number" v-model="addressData.MOBILE" placeholder="收货人手机号码" placeholder-class="placeholder" />
</view>
<view class="row b-b">
<text class="tit">省</text>
<input class="input" type="text" v-model="addressData.PROVINCE" placeholder="省" placeholder-class="placeholder" />
</view>
<view class="row b-b">
<text class="tit">市</text>
<input class="input" type="text" v-model="addressData.CITY" placeholder="市" placeholder-class="placeholder" />
</view>
<view class="row b-b">
<text class="tit">区(县)</text>
<input class="input" type="text" v-model="addressData.AREA" placeholder="区(县)" placeholder-class="placeholder" />
</view>
<view class="row b-b">
<text class="tit">地址</text>
<input class="input" type="text" v-model="addressData.ADDR" placeholder="楼号、门牌" placeholder-class="placeholder" />
</view>
<view class="row default-row">
<text class="tit">设为默认</text>
<switch :checked="addressData.IS_DEFAULT>0" color="#fa436a" @change="switchChange" />
</view>
<button class="add-btn" @click="confirm">提交</button>
<button v-show="addressData.ADDR_ID>0" class="del-btn" @click="deladdr">删除地址</button>
</view>
</template>
<script>
import {
mapMutations
} from 'vuex';
import {
DOMParser
} from 'xmldom';
import {
mapState
} from 'vuex';
export default {
data() {
return {
addstr:'',
addressData: {
ADDR_ID:0,
CUSTOMER_ID:'',
NAME:'',
MOBILE:'',
PROVINCE:'',
CITY:'',
AREA:'',
ADDR:'',
POST_CODE:'',
IS_DELETE:'',
CREATE_DATE:'',
UPDATE_DATE:'',
UPDATE_USER:'',
IS_DEFAULT:0
}
}
},
computed:{
...mapState(['hasLogin','userInfo'])
},
onLoad(option){
let title = '新增收货地址';
if(option.type==='edit'){
title = '编辑收货地址'
console.log(option.data);
this.addressData = JSON.parse(option.data);
}
this.manageType = option.type;
uni.setNavigationBarTitle({
title
});
},
methods: {
disAddress(){
let astr=this.addstr;
let data = this.addressData;
uni.request({
url: this.websiteUrl + "/WebService.asmx/GetAddressJson?address=" + astr,
data: {},
method: 'GET',
header: {
'Content-Type': 'text/xml; charset=utf-8',
},
success: (res) => {
const doc = new DOMParser().parseFromString(res.data, 'text/xml');
var nInfo = JSON.parse(doc.getElementsByTagName("string")[0].childNodes[0].nodeValue);
console.log(nInfo);
console.log(nInfo[0].name);
data.NAME=nInfo[0].name;
data.MOBILE=nInfo[0].mobile;
data.PROVINCE=nInfo[0].sheng;
data.CITY=nInfo[0].shi;
data.AREA=nInfo[0].qu;
data.ADDR=nInfo[0].area;
data.ADDR_ID=0;
data.IS_DEFAULT=0;
console.log(this.addressData);
}
});
},
switchChange(e){
this.addressData.default = e.detail;
},
//地图选择地址
chooseLocation(){
uni.chooseLocation({
success: (data)=> {
this.addressData.addressName = data.NAME;
this.addressData.address = data.NAME;
}
})
},
//提交
deladdr(){
let data = this.addressData;
let aid=0;
if(data.ADDR_ID>0)
{
aid=data.ADDR_ID;
}
//console.log(data);
uni.request({
url: this.websiteUrl +"/LoginWebService.asmx/DelAddr",
data: {
id:aid
},
method: 'POST',
header: {
"content-type":"application/x-www-form-urlencoded; charset=UTF-8"
},
success: (res) => {
if(res.statusCode===200){
const doc = new DOMParser().parseFromString(res.data, 'text/xml');
var dataInfo = JSON.parse(doc.getElementsByTagName("string")[0].childNodes[0].nodeValue);
uni.showToast({
title: dataInfo.msg,
duration: 2000,
icon: "none"
});
}
}
});
},
//提交
confirm(){
let data = this.addressData;
if(!data.NAME){
this.$api.msg('请填写收货人姓名');
return;
}
if(!/(^1[3|4|5|6|7|8][0-9]{9}$)/.test(data.MOBILE)){
this.$api.msg('请输入正确的手机号码');
return;
}
// if(!data.address){
// this.$api.msg('请在地图选择所在位置');
// return;
// }
if(!data.ADDR){
this.$api.msg('请填写门牌号信息');
return;
}
//console.log("是否选中:"+this.addressData.default);
if(this.addressData.default){
data.IS_DEFAULT=1;
}else{
data.IS_DEFAULT=0;
}
let aid=0;
if(data.ADDR_ID>0)
{
aid=data.ADDR_ID;
}
//console.log(data);
uni.request({
url: this.websiteUrl +"/LoginWebService.asmx/AddUserAddress",
data: {
addId:aid,
customerId:this.userInfo.UserId,
userName:data.NAME,
mobile:data.MOBILE,
provice:data.PROVINCE,
city:data.CITY,
area:data.AREA,
addr:data.ADDR,
isDef:data.IS_DEFAULT
},
method: 'POST',
header: {
"content-type":"application/x-www-form-urlencoded; charset=UTF-8"
},
success: (res) => {
if(res.statusCode===200){
const doc = new DOMParser().parseFromString(res.data, 'text/xml');
var dataInfo = JSON.parse(doc.getElementsByTagName("string")[0].childNodes[0].nodeValue);
uni.showToast({
title: dataInfo.msg,
duration: 2000,
icon: "none"
});
}
}
});
if(this.manageType=='edit'){
uni.redirectTo({
url: '/pages/address/address'
});
}else{
//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
this.$api.prePage().refreshList(data, this.manageType);
this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
setTimeout(()=>{
uni.navigateBack()
}, 800);
}
},
}
}
</script>
后端采用C#开发，代码如下：
```csharp
[WebMethod]
public string GetAddressJson(string address)
{
string strhtml = "";
try
{
DataTable dt = new DataTable("addlist");
DataColumn dc1 = new DataColumn("name", Type.GetType("System.String"));
DataColumn dc2 = new DataColumn("mobile", Type.GetType("System.String"));
DataColumn dc3 = new DataColumn("sheng", Type.GetType("System.String"));
DataColumn dc4 = new DataColumn("shi", Type.GetType("System.String"));
DataColumn dc5 = new DataColumn("qu", Type.GetType("System.String"));
DataColumn dc6 = new DataColumn("area", Type.GetType("System.String"));
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);
dt.Columns.Add(dc3);
dt.Columns.Add(dc4);
dt.Columns.Add(dc5);
dt.Columns.Add(dc6);
DataRow tdr = dt.NewRow();
tdr["name"] = address.Substring(0, address.IndexOf('1'));
tdr["mobile"] = address.Substring(address.IndexOf('1'), 11);
strhtml += address.Substring(0, address.IndexOf('1')) + "|";
strhtml += address.Substring(address.IndexOf('1'), 11) + "|";
//获取省市区列表
BJSoft.JFMall.BLL.Model.DISTRICT_QueryModule oper = new JFMall.BLL.Model.DISTRICT_QueryModule();
IEnumerable<BJSoft.JFMall.BLL.Model.DISTRICT_List> plist = null;
IEnumerable<BJSoft.JFMall.BLL.Model.DISTRICT_List> clist = null;
IEnumerable<BJSoft.JFMall.BLL.Model.DISTRICT_List> alist = null;
BJSoft.JFMall.BLL.Model.DISTRICT_Query dform = new JFMall.BLL.Model.DISTRICT_Query();
int total = 0;
dform.levelname = 1;
//省份列表
oper.QueryListObject2(1, 9999, "", "", dform, out total, out plist);
BJSoft.JFMall.BLL.Model.DISTRICT_Query cform = new JFMall.BLL.Model.DISTRICT_Query();
cform.levelname = 2;
//市列表
oper.QueryListObject2(1, 9999, "", "", cform, out total, out clist);
BJSoft.JFMall.BLL.Model.DISTRICT_Query aform = new JFMall.BLL.Model.DISTRICT_Query();
aform.levelname = 3;
//区列表
oper.QueryListObject2(1, 9999, "", "", aform, out total, out alist);
//省
bool hasSheng = false;
foreach (BJSoft.JFMall.BLL.Model.DISTRICT_List dd in plist)
{
if (address.IndexOf(dd.name.Substring(0, 2)) > 0)
{
strhtml += dd.name + "|";
tdr["sheng"] = dd.name;
hasSheng = true;
break;
}
}
if (!hasSheng)
{
foreach (BJSoft.JFMall.BLL.Model.DISTRICT_List cc in clist)
{
if (address.IndexOf(cc.name.Substring(0, 2)) > 0)
{
BJSoft.JFMall.BLL.Model.DISTRICT_Detail ccModel = new JFMall.BLL.Model.DISTRICT_Detail();
oper.QueryDetailObject2(cc.upid.ToString(), out ccModel);
strhtml += ccModel.name + "|";
tdr["sheng"] = ccModel.name;
break;
}
}
}
//市
bool hasCity = false;
foreach (BJSoft.JFMall.BLL.Model.DISTRICT_List cc in clist)
{
if (address.IndexOf(cc.name.Substring(0, 2)) > 0)
{
strhtml += cc.name + "|";
tdr["shi"] = cc.name;
hasCity = true;
break;
}
}
if (!hasCity && !hasSheng)
{
foreach (BJSoft.JFMall.BLL.Model.DISTRICT_List aa in alist)
{
if (address.IndexOf(aa.name) > 0)
{
BJSoft.JFMall.BLL.Model.DISTRICT_Detail ccModel = new JFMall.BLL.Model.DISTRICT_Detail();
oper.QueryDetailObject2(aa.upid.ToString(), out ccModel);
if (ccModel != null)
{
BJSoft.JFMall.BLL.Model.DISTRICT_Detail ssModel = new JFMall.BLL.Model.DISTRICT_Detail();
oper.QueryDetailObject2(ccModel.upid.ToString(), out ssModel);
strhtml += ssModel.name + "|" + ccModel.name + "|";
tdr["qu"] = ssModel.name;
tdr["shi"] = ccModel.name;
}
break;
}
}
}
else if (!hasCity && hasSheng)
{
foreach (BJSoft.JFMall.BLL.Model.DISTRICT_List aa in alist)
{
if (address.IndexOf(aa.name) > 0)
{
BJSoft.JFMall.BLL.Model.DISTRICT_Detail ccModel = new JFMall.BLL.Model.DISTRICT_Detail();
oper.QueryDetailObject2(aa.upid.ToString(), out ccModel);
strhtml += ccModel.name + "|";
tdr["shi"] = ccModel.name;
break;
}
}
}
//区，路
foreach (BJSoft.JFMall.BLL.Model.DISTRICT_List aa in alist)
{
if (address.IndexOf(aa.name) > 0)
{
strhtml += aa.name + "|";
strhtml += address.Substring(address.IndexOf(aa.name) + aa.name.Length, address.Length - (address.IndexOf(aa.name) + aa.name.Length));
tdr["qu"] = aa.name;
tdr["area"] = address.Substring(address.IndexOf(aa.name) + aa.name.Length, address.Length - (address.IndexOf(aa.name) + aa.name.Length));
break;
}
}
dt.Rows.Add(tdr);
return MiroSoft.DBUtility.DataTableConvertJson.DataTable2Json(dt);
}
catch (Exception exp)
{
BJSoft.JFMall.BLL.ExtModels.QY_SYS_LOG_QueryModule.AddSysLogs("业务提醒", "处理异常", "代码行号：" + BJSoft.JFMall.BLL.ExtModels.QY_SYS_LOG_QueryModule.GetLineNum() + "错误代码：" + exp.Message + exp.StackTrace + exp.Source + exp.Data);
strhtml = "更新失败，错误代码：" + exp.Message;
return strhtml;
}
finally
{
}
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)