当前位置: 首页 > news >正文

uniapp粘贴板地址识别

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>

相关文章:

uniapp粘贴板地址识别

1&#xff1a; 插件安装 主要是依靠 address-parse 这个插件&#xff1a; 官网 收货地址自动识别 支持pc、h5、微信小程序 - DCloud 插件市场 // 首先需要引入插件 npm install address-parse --save 2&#xff1a;html部分 <view class""><view class&quo…...

C语言 | Leetcode C语言题解之第335题路径交叉

题目&#xff1a; 题解&#xff1a; bool isSelfCrossing(int* distance, int distanceSize){if (distance NULL || distanceSize < 4) {return false;}for (int i 3; i < distanceSize; i) {if ((distance[i] > distance[i - 2]) && (distance[i - 1] &l…...

TypeScript学习第十三篇 - 泛型

在编译期间不确定变量的类型&#xff0c;在调用时&#xff0c;由开发者指定具体的类型。 1. 如何给arg参数和函数指定类型&#xff1f; function identity(arg){return arg; }identity(1) identity(jack) identity(true) identity([]) identity(null)定义的时候&#xff0c;无…...

工业智能网关在汽车制造企业的应用价值及功能-天拓四方

随着工业互联网的飞速发展&#xff0c;工业智能网关作为连接物理世界与数字世界的桥梁&#xff0c;正逐渐成为制造业数字化转型的核心组件。本文将以一家汽车制造企业的实际使用案例为蓝本&#xff0c;深入解析工业智能网关在实际应用中的价值、功能及其实操性。 一、背景与挑…...

LLM - 在服务器中使用 Ollama + OpenWebUI 部署最新大模型

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/140992533 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 Ollama 是一个开源的大型语言模型(LLM)服务工具,目的是简化本地运行…...

重启人生计划-积蓄星火

&#x1f973;&#x1f973;&#x1f973; 茫茫人海千千万万&#xff0c;感谢这一刻你看到了我的文章&#xff0c;感谢观赏&#xff0c;大家好呀&#xff0c;我是最爱吃鱼罐头&#xff0c;大家可以叫鱼罐头呦~&#x1f973;&#x1f973;&#x1f973; 如果你觉得这个【重启人生…...

2024.08.11 校招 实习 内推 面经

地/球&#x1f30d; &#xff1a; neituijunsir 交* 流*裙 &#xff0c;内推/实习/校招汇总表格 1、自动驾驶一周资讯 - 比亚迪将采购华为智驾系统&#xff0c;用于方程豹新款越野车&#xff1b;英特尔发布第一代车载独立显卡&#xff1b;黑芝麻智能上市首日破发大跌 自动…...

LCA(Lowest Common Ancestor)

LCA&#xff08;Lowest Common Ancestor&#xff09; 定义 在树上取两点 x,yx,y&#xff0c;他们的 LCA 为距离他们最近的公共祖先。 本章主要讲的是倍增求 LCA。 暴力求取 从 xx 开始向上移动到根结点&#xff0c;并标记沿途结点。从 yy 开始向上移动到根结点&#xff0c…...

张钹院士:大模型时代的企业AI发展趋势

在当今技术迅速发展的时代&#xff0c;生成式人工智能与大模型正成为推动产业变革的重要力量。随着AI技术的不断成熟与普及&#xff0c;它的应用已从个人领域扩展至企业层面&#xff0c;广泛覆盖各行各业。 那么&#xff0c;新技术究竟会给产业带来哪些积极地影响&#xff1f;…...

php连接sphinx的长连接事宜以及sphinx的排除查询以及关于sphinx里使用SetSelect进行复杂的条件过滤或复杂查询

一、php连接sphinx的长连接事宜以及sphinx的排除查询 在使用php连接sphinx时&#xff0c;默认的sphinx连接非长连接&#xff0c;于是在想php连接sphinx能否进行一些优化 publish:January 9, 2018 -Tuesday: 方法&#xff1a;public bool SphinxClient::open ( void ) — 建立到…...

抓包分析排查利器TCPdump

tcpdump命令介绍与常规用法。 基础命令介绍 # 固定语法 -i 指定网卡名称 -nn 显示IP地址 -w 指定输出的文件名称 tcpdump -i eth0 -nn -w test.cap-nn 不把主机的网络地址与协议转换成名字 -w 把数据包数据写入指定的文件 and 连接参数 host 指明主机 port 指明端口 src 源IP…...

八种排序算法的复杂度(C语言)

归并排序(递归与非递归实现,C语言)-CSDN博客 快速排序(三种方法,非递归快排,C语言)-CSDN博客 堆排序(C语言)-CSDN博客 选择排序(C语言)以及选择排序优化-CSDN博客 冒泡排序(C语言)-CSDN博客 直接插入排序(C语言)-CSDN博客 希尔排序( 缩小增量排序 )(C语言)-CSDN博客 计数…...

docker compose部署rabbitmq集群,并使用haproxy负载均衡

一、创建rabbitmq的data目录 mkdir data mkdir data/rabbit1 mkdir data/rabbit2 mkdir data/rabbit3 二、创建.erlang.cookie文件&#xff08;集群cookie用&#xff09; echo "secretcookie" > .erlang.cookie 三、创建haproxy.cfg配置文件 global log stdout fo…...

git强制推送代码教程

git强制推送代码教程 首先说明情况&#xff0c;我的代码remote了两个git库&#xff0c;现在想要推送到其中一个&#xff0c;但是版本不对&#xff0c;被拒绝&#xff0c;因此下面将进行强制推送 首先检查远程库都有哪些 git remote -v2. 检查当前的分支 git branch当前分支前…...

windows C++-高级并发和异步(三)

深入了解 winrt::resume_foreground(下) 调用 winrt::resume_foreground 时会始终先排队&#xff0c;然后展开堆栈。 也可选择设置恢复优先级。 winrt::fire_and_forget RunAsync(DispatcherQueue queue) {...co_await winrt::resume_foreground(queue, DispatcherQueuePrior…...

河北移动:核心系统数据库成功完成整体迁移 ,实现全栈国产|OceanBase案例

本文作者&#xff1a;移动通信集团河北有限公司架构规划专家&#xff0c;房瑞 项目背景&#xff1a; 中国移动通信集团河北有限公司一直在积极响应国家及集团的号召&#xff0c;以磐舟&磐基云原生为底座&#xff0c;结合国产浏览器、中间件、数据库、操作系统和服务器等&a…...

ZKRollup

目录 ZKRollup 基本概念 运作原理 特点与优势 应用场景 典型项目 ZKRollup ZKRollup,全称为Zero-Knowledge Rollup,是一种基于零知识证明的二层扩容方案(Layer 2)。它旨在通过提高交易处理效率和降低交易成本来扩展区块链网络的能力,尤其是在以太坊等区块链平台上得…...

letcode 分类练习 树的遍历

letcode 分类练习 树的遍历 树的构建递归遍历前序遍历中序遍历后序遍历 迭代遍历前序遍历中序遍历后序遍历 层序遍历层序遍历可以解决的问题107. 二叉树的层序遍历 II199. 二叉树的右视图637. 二叉树的层平均值429. N 叉树的层序遍历515.在每个树行中找最大值116.填充每个节点的…...

redisssion分布式锁

分布式锁的问题 基于setnx的分布式锁实现起来并不复杂&#xff0c;不过却存在一些问题。 锁误删问题 第一个问题就是锁误删问题&#xff0c;目前释放锁的操作是基于DEL&#xff0c;但是在极端情况下会出现问题。 例如&#xff0c;有线程1获取锁成功&#xff0c;并且执行完任…...

嘎嘎嘎拿到去年想要的包

一年多了 继续&#xff0c;把项目收尾吧 好好学前端&#xff0c;外企&#xff01;react&#xff01;从0开始&#xff0c;紧迫&#xff01;加油&#xff01;...

前奏编曲:如何编写二段式前奏

选好音源 Pianoteq 6 STAGE比较明亮些&#xff0c;适合做前奏的音源 确定和弦进行 比如4536251&#xff0c;每个小节2和弦&#xff0c;每个小节的和弦弹一下 优化和弦进行衔接和织体 二段式不用对和弦进行就近解决的处理&#xff0c;因为前奏前后要形成对比。 前半部分往…...

征服云端:Kubernetes如何让微服务与云原生技术如虎添翼

引言 在这个数字化转型的时代&#xff0c;微服务架构已经成为构建现代应用程序的首选方式。它不仅提高了开发效率&#xff0c;还增强了系统的可扩展性和灵活性。而随着云计算技术的迅猛发展&#xff0c;云原生的概念逐渐深入人心&#xff0c;它代表了一种全新的软件开发方法论…...

开源AI智能名片系统与高级机器学习技术的融合应用:重塑商务交流的未来

摘要&#xff1a;在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;技术&#xff0c;尤其是机器学习领域的快速发展&#xff0c;正深刻改变着各行各业的面貌。开源AI智能名片系统作为这一变革的先锋&#xff0c;通过集成并优化多种高级机器学习技术&#xf…...

Java中synchronized的偏向锁是如何减少锁开销的

偏向锁&#xff08;Biased Locking&#xff09;是一种优化 Java synchronized 锁的机制&#xff0c;旨在减少在无竞争情况下的锁开销。它通过将锁偏向于单个线程来优化锁的性能。以下是偏向锁减少锁开销的具体方式和原理&#xff1a; 偏向锁的工作原理 锁的初始状态: 当一个对…...

react18 + ts 使用video.js 直播.m3u8格式的视频流

一、安装依赖 我使用的video.js版本是8.17.3&#xff0c;从 Video.js 7.x 开始&#xff0c;HLS 支持被内置到了 Video.js 中所以不需要安装其他依赖 npm i video.js 二、创建VideoPlayer组件 import React, { useEffect, useRef } from react import videojs from video.js …...

使用 onBeforeRouteLeave 组合式函数提升应用的用户体验

title: 使用 onBeforeRouteLeave 组合式函数提升应用的用户体验 date: 2024/8/14 updated: 2024/8/14 author: cmdragon excerpt: 摘要&#xff1a;本文介绍了在Nuxtjs中使用onBeforeRouteLeave组合式函数来提升应用用户体验的方法。onBeforeRouteLeave允许在组件离开当前路…...

uni-app 吸顶方案总结

效果 页面级 uni.pageScrollTo 官方文档&#xff1a;https://uniapp.dcloud.net.cn/api/ui/scroll.html#pagescrollto 原生头部导航 uni.pageScrollTo({selector: #tabs,duration: 300 });(推荐)需要兼容自定义头部导航 <template><view id"demo1" :styl…...

【C#】知识汇总

目录 1 概述1.1 GC&#xff08;Garbage Collection&#xff09;1.1.1 为什么需要GC&#xff1f;1.1.2 GC的工作原理工作原理什么是Root&#xff1f;GC算法&#xff1a;Mark-Compact 标记压缩算法GC优化&#xff1a;Generational 分代算法 1.1.3 GC的触发时间1.1.4 如何减少垃圾…...

1、Unity【基础】3D数学

3D数学 文章目录 3D数学1、数学计算公共类Mathf1、Mathf和Math2、区别3、Mathf中的常用方法&#xff08;一般计算一次&#xff09;4、Mathf中的常用方法&#xff08;一般不停计算&#xff09;练习 A物体跟随B物体移动 2、三角函数1、角度和弧度2、三角函数3、反三角函数练习 物…...

虚拟机ubuntu22的扩容记录

这里lsblk命令能看到&#xff0c; ubuntu逻辑分区只有29G&#xff0c; 但总分区60G&#xff0c;还有接近30G未使用。 rootx:/home/x# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTS loop0 7:0 0 63.9M 1 loop /snap/core2…...