uni-app做收货地址功能

uni-app做收货地址填写，昨天翻阅百度找了好久，利用昨天找的资料，在简单的封装了一下代码，做了一个小示例，希望对各位有帮助。

我使用的开发工具是HBuilder，建议在官网下载app开发版本。具体的创建步骤我就不多说了，先给大家看游一下效果图。

首先导入两个插件包，可到我的百度网盘提取。
链接:https://pan.baidu.com/s/1w1P9BTCWGDjRC34mU1wrOg 提取码: j5eg

给大家看一下我的目录结构

导入成功之后，把这段代码复制到你的vue文件中就完成了这个功能了

<template><view class="content"><view class="update-message"><view class="update-text">所在地区：</view><view class="update-input"><input @tap="openAddres" v-model="address"/></view><image src="../../static/yjt.png" class="jt"></image></view><textarea class="detail" placeholder-style="color:#ccc;" placeholder="详细地址:如道路,门牌号"/><text>{{pickerText}}</text><!-- 这个步骤只是为了让大家看到返回的数据 --><simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address></view>
</template><script>import simpleAddress from "@/components/simple-address/simple-address.nvue"export default {data() {return {cityPickerValueDefault: [0, 0, 1],//弹框的初始值pickerText:'',address:'北京市-市辖区-西城区'//初始值}},components: {simpleAddress},methods: {openAddres() {this.$refs.simpleAddress.open();},onConfirm(e) {this.pickerText = JSON.stringify(e);//这个步骤只是为了让大家看到返回的数据this.address=e.label;//把选择的地址回显到input框中// console.log(e.label)// console.log(JSON.stringify(e))},bindTextAreaBlur: function (e) {console.log(e.detail.value)}}}
</script><style>page{background-color: #f1f1f1;}/* 提示 */.mind{color: #ccc;font-size: 24upx;margin:3%;}text{margin:1%;}/* 所在地区 */.update-message{background-color: #fff;height:95upx;line-height: 95upx;font-size: 32upx;display: flex;border-bottom:2upx solid #e4e4e4;}/* 文字 */.update-text{flex: 3;text-align: center;}/* 右侧input框 */.update-input{flex: 7;display: flex;padding: 3.5%;}/* 箭头 */.jt{height:30upx;width:30upx;margin: auto;margin-right: 20upx;}/* 详情 */.detail{background-color: #fff;width: 100%;height: 200upx;padding: 2%;}
</style>

uni-app做收货地址功能相关推荐

记录 - 收货地址的坑
项目场景: 调用uni.chooseAddress() api获取收货人的信息问题描述在PC的微信开发者工具调试 uni.chooseAddress() 接口没发现报错,操作流程正常但是真机调试 ...
uniapp学习API之——其他（授权、收货地址、发票抬头等）
授权 uni.authorize(OBJECT) 提前向用户发起授权请求.调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口.如果用户之前已经同意授权, ...
10天手敲一个SpringBoot网上商城项目(四)——新增收货地址功能、获取省市区列表及名称功能的实现
静态资源及sql文件分享链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr 提取码:23gr 文章目录新增收货地址 1.创建数据 ...
HMS Core定位服务在生活服务类App中可以自动填写收货地址啦
在涉及团购.外卖.快递.家政.物流.搬家等生活服务类的App.小程序中,填写收货地址是用户高频使用的功能.这一功能通常采取让用户手动填写的解决方案,例如上下拉动选择浙江省–>杭州市–>西湖 ...
微信小程序功能：全选和反选--修改商品数量、删除商品--计算总价格和总数量--收货地址
微信小程序–购物车页面(核心) 包含功能点: 全选和反选计算:总价格和总数量修改商品数量.删除商品收货地址结构:cart.wxml  <view c ...
uni.chooseAddress抖音小程序拿不到抖音商城的收货地址?
微信小程序开发的一个功能,拿微信用户设置的我的地址. 功能同步到抖音小程序,功能可以实现,打开地址页面,并且设置地址,下次还能使用. 但是万万没想到,抖音小程序的收货地址不是抖音商场的收货地址. 需求 ...
云炬Android开发笔记 14 个人中心、图片裁剪、图片上传、收货地址、消息推送、权限管理等功能开发与一键式封装
阅读目录 0.优化 1.个人中心页面的布局 2. 订单列表逻辑梳理与实现 3. 个人信息的更新实现 3.1 个人信息页面的布局 3.3 数据的转化 5.3 图片库中图片选择事件的处理 5.4 相机 ...
uniApp使用uni.chooseAddress()获取微信收货地址
获取微信收货地址使用uniapp或者原生微信小程序获取微信的收货地址 1.需要在开发平台申请权限在[开发]-[开发管理]-[接口设置]-[获取用户收货地址]–申请该权限,审核通过后方可使用. 2. ...
怎么调用微信自带的收货地址和我的地址功能页面。
在微信小程序里面调用这个功能页面其实很简单,直接在jS里面调用wx.chooseAddress({}): 详细说明请看官方文档说明:微信收货地址文档API
html收货地址填写怎么做才合理_拼多多发货地不在同一个地方有影响吗？怎么设置发货地址？...
卖家在拼多多开店之后,需要对商品进行基本设置.其中就涉及到了发货地址,卖家需要把发货的地址设置好,但是有的卖家有不同的发货地址,那么拼多多发货地不在同一个地方有影响吗? 拼多多发货地不在同一个地方是有 ...

uni-app做收货地址功能

uni-app做收货地址功能相关推荐

最新文章

热门文章