uniapp客户线上订货收货地址自动识别功能

最新推荐文章于 2024-09-18 15:29:36 发布
最新推荐文章于 2024-09-18 15:29:36 发布
阅读量1.8k 收藏 8
点赞数 2
分类专栏： uniapp 源码 文章标签： uni-app javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjflion/article/details/130112124
版权

最近我们代理订货系统客户提出了一个需求，在地址管理里可以自动认别客户填写的姓名、手机号、省市区等信息。我们在原地址管理里增加了一个智能解析输入框，界面如图：

在这里插入图片描述
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
            {
            }
        }
米锐云商
关注
专栏目录
uniapp(全端兼容) - 详细实现电商收货地址识别解析“姓名/手机号/省市区/街道/乡镇村庄“关键字，用户复制粘贴一段含有姓名电话/详细地址的文字文本信息，自动识别拆分并填入到对应的表单字段中！
高级前端工程师
08-23 4567
uni-app，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，收货地址解析，从发货地址中拆出姓名电话地址，快递地址读取，收货地址解析、快递地址解析、物流地址解析自动识别，提取姓名电话地址信息，自动识别出省市区街道姓名手机号等，根据文本自动解析出收货信息，怎么识别文本中的手机号，粘贴板地址识别，地址智能识别，如何识别收货地址中的关键字，粘贴一段文字后，自动识别到姓名/手机号/收货地址，去除其中的特殊字符和前缀标识，根据粘贴的字符串提取姓名地址
【微信小程序】uniapp微信小程序自动识别地址、电话、姓名等信息
alikami的博客
12-16 1921
记录下项目中的一个要求：复制地址后自动识别信息。
【uniapp开发小程序】实现粘贴一段文字后，自动识别到姓名/手机号/收货地址
weixin_48596030的博客
06-30 6519
两种方式实现
vue智能识别复制的收货地址（识别省市区街道）
最新发布
qq_51721168的博客
09-18 268
我这里使用的是 address-smart-parse 这个插件来实现。
小程序智能识别快递收货地址,自动解析出省市区等信息,让地址标准化格式的实现(使用腾讯云api)AddressParseTest.zip
05-11
小程序智能识别快递收货地址,自动解析出省市区等信息,让地址标准化格式的实现(使用腾讯云api)已做好hmacsha1+base64编码细节,需要你自己写确认按钮的事件
uniapp地址粘贴自动识别功能
weixin_58573720的博客
06-04 461
首先我的省市区是一个选择框，在uniapp插件库中下载自动识别插件。下载后记得必须要引入。
uniapp自动识别地址信息代码
csdn_hello_work的博客
09-15 288
这段代码可以在uniapp中使用，前提是需要在百度地图开发者中心注册账号并获取API密钥，同时需要在项目中引入uni.request。以下是一个简单的uniapp代码示例，它利用百度地图API将用户输入的地址转换为经纬度坐标，并对返回的位置信息进行解析。'你的百度地图API密钥'
Java 收货地址智能解析
After 95
03-25 8161
收货地址智能解析
快递地址信息自动识别实例
07-27
快递地址信息识别实例，客户上传地址图片，识别图片内的内容，识别出，收件人，电话，地址等信息。客户上传地址图片，客户上传地址图片，
仿淘宝收货地址demo
04-05
【标题】"仿淘宝收货地址demo"是一个编程示例，旨在模仿淘宝网的收货地址功能。在电商网站中，收货地址是至关重要的一个部分，它涉及到用户购物体验和订单配送的准确性。这个demo可能包含了一个完整的、用户友好的...
uni-app做收货地址功能
weixin_44067471的博客
12-18 7762
uni-app做收货地址填写，昨天翻阅百度找了好久，利用昨天找的资料，在简单的封装了一下代码，做了一个小示例，希望对各位有帮助。 我使用的开发工具是HBuilder，建议在官网下载app开发版本。具体的创建步骤我就不多说了，先给大家看游一下效果图。 首先导入两个插件包（发现这里不能导入压缩包，有需要的小伙伴可以私聊我） 给大家看一下我的目录结构 导入成功之后，把这段代码复制到你的vue文件中就...
uniapp 小程序获取微信收货地址
m0_64344940的博客
10-31 1780
uniapp 小程序获取微信收货地址
基于uniapp实现的微信小程序，实名认证、身份证识别、人脸识别前端页面、wx.faceDetect
11-14
在本文中，我们将深入探讨如何使用uniapp框架来构建微信小程序，实现实名认证、身份证识别和人脸识别功能。uniapp是一个跨平台的开发框架，它允许开发者使用一套代码编写，即可发布到iOS、Android、H5等多个平台。...
UNIAPP实战项目笔记47 显示默认收货地址和修改收货地址页面的布局
Ggome的博客
12-06 2002
显示默认地址 修改收货地址 地址列表 显示默认地址页面confirm-order.vue 确认订单页面布局和渲染 my-path-list.vue 文件代码 path.js文件代码 目录结构 前端目录结构 manifest.json 配置文件： appid、logo…pages.json 配置文件： 导航、 tabbar、 路由main.js vue初始化入口文件App.vue 全局配置：样式、全局监视static 静态资源：图片、字体图标p
智能识别收货地址
jessepu的专栏
09-12 3907
本项目包含2个功能 1. 把字符串解析成姓名、收货电话、邮编、收货地址 2. 把收货地址解析成省、市、区县、街道小区地址 项目地址：https://github.com/pupuk/address-smart-parse 我看这个版本里面的php有比较详细的注释，还比较容易理解 这个功能（把收货地址解析成省、市、区县、街道小区地址）很的快递公司都在用 ...
JS智能识别收货地址
weixin_50368372的博客
12-22 1754
智能识别收货地址填入信息
小程序智能识别收货地址
zjm的博客
04-07 1635
智能识别收货地址Pro
智能识别收货地址（支持vue）/省市区街道四级联动
天马3798
08-13 4394
一、智能识别收货地址 解决方案一：smartParsePro 源代码地址： https://github.com/wzc570738205/smartParsePro 使用方法1，在线API： 特别提醒： request url：https://wangzc.wang/smAddress request methods: POST request payload: { "address": "新疆阿克苏温宿县博孜墩柯尔克孜族乡吾斯塘博村一组306号 150-3569-69.
智能识别收货地址Java.pdf
02-27
智能识别收货地址Java import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.InputStreamReader; import java.io.UnsupportedEncodingException; import java.net.HttpURLConnection; import java.net.URL; import java.net.URLEncoder; import java.security.InvalidKeyException; import java.security.Key; import java.security.NoSuchAlgorithmException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.HashMap; import java.util.Locale; import java.util.Map; import java.util.TimeZone; import javax.crypto.Mac; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Encoder; class Demo { public static String calcAuthorization(String source, String secretId, String secretKey, String datetime) throws NoSuchAlgorithmException, UnsupportedEncodingException, InvalidKeyException { String signStr = "x-date: " + datetime + "\n" + "x-source: " + source; Mac mac = Mac.getInstance("HmacSHA1"); Key sKey = new SecretKeySpec(secretKey.getBytes("UTF-8"), mac.getAlgorithm()); mac.init(sKey); byte[] hash = mac.doFinal(signStr.getBytes("UTF-8")); String sig = new BASE64Encoder().encode(hash); String auth = "hmac id=\"" + secretId + "\", algorithm=\"hmac-sha1\", headers=\"x-date x-source\", signature=\"" + sig + "\""; return auth; } public static String urlencode(Map<?, ?> map) throws UnsupportedEncodingException { StringBuilder sb = new StringBuilder(); for (Map.Entry<?, ?> entry : map.entrySet()) { if (sb.length() > 0) { sb.append("&"); } sb.append(String.format("%s=%s", URLEncoder.encode(entry.getKey().toString(), "UTF-8"), URLEncoder.encode(entry.getValue().toString(), "UTF-8") )); } return sb.toString(); } public static void main(String[] args) throws NoSuchAlgorithmException, UnsupportedEncodingException, InvalidKeyException { //云市场分配的密钥Id String secretId = "xxxx"; //云市场分配的密钥Key String secretKey = "xxxx"; String source = "market"; Calendar cd = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss 'GMT'", Lo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值