uni-app微信公众号（4）—

当然在一个类似商城的公众号中，自然也少不了用户地址的添加，下面我们就写一个收货地址的页面，页面中，可以简单的自动识别地址信息，设置默认地址，设置地址标签等功能，先来看看效果截图。

（1）地址管理页面

（1.1）页面代码

其实HTML页面代码就是一个简单循环遍历，先把填写的地址保存在vuex中，然后缓存到 localStorage中，然后获取localStorage中的缓存，v-for循环显示出来。其中需要注意的是，:class="{red:res.isDefault} 动态class样式的书写，关于这个大家可以参考这篇文章vue class 动态声明的几种方式 - 简书

代码如下：

<template><view><u-empty class="noData" :show="addressList.length == 0" text="收货地址为空"></u-empty><view class="item" v-for="(res, index) in addressList" :key="res.id"><view class="top"><view class="name">{{ res.name }}</view><view class="phone">{{ res.phone }}</view><view class="tag"><text v-if="res.isDefault" :class="{red:res.isDefault}">默认</text><text class="tags" v-if="res.tag">{{ res.tag }}</text></view></view><view class="bottom">{{res.address}}<u-icon name="edit-pen" @click="updateAddress(res)" :size="50" color="#999999"></u-icon></view></view><view class="addSite" @click="toAddSite"><view class="add"><u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址</view></view></view>
</template>

（1.2）vue代码

逻辑代码主要就是对vuex的操作，需要注意的是，在修改地址的时候，要带着现在需要修改的地址信息，返回到修改页（新增页）。

代码如下：

<script>import {mapState,mapMutations,} from 'vuex';export default {data() {return {// addressList:[]};},onLoad() {this.getLocalAddressList();console.log(this.addressList);},computed: {...mapState({addressList: state => state.address.addressList}),},methods: {...mapMutations(['getLocalAddressList']),//新建地址toAddSite() {this.$u.route({type: 'to',params: {},url: '/personalAddSite',animationType: 'slide-in-bottom'});},//修改地址updateAddress(info){console.log(info);this.$u.route({type: 'to',params: {addressInfo: JSON.stringify(info)},url: '/personalAddSite',animationType: 'slide-in-bottom'});}}};
</script>

（1.3）css样式代码

代码如下：

<style lang="scss" scoped>.noData {padding-top: 50%;text-align: center;}.item {padding: 40rpx 20rpx;.top {display: flex;font-weight: bold;font-size: 34rpx;.phone {margin-left: 60rpx;}.tag {display: flex;font-weight: normal;align-items: center;text {display: block;padding: 0 10rpx;height: 34rpx;line-height: 34rpx;color: #ffffff;font-size: 20rpx;border-radius: 6rpx;text-align: center;margin-left: 30rpx;background-color: rgb(49, 145, 253);}.red {background-color: red}.tags{padding: 0 16rpx;}}}.bottom {display: flex;margin-top: 20rpx;font-size: 28rpx;justify-content: space-between;color: #999999;}}.addSite {display: flex;justify-content: space-around;width: 600rpx;line-height: 100rpx;position: absolute;bottom: 30rpx;left: 80rpx;background-color: red;border-radius: 60rpx;font-size: 30rpx;.add {display: flex;align-items: center;color: #ffffff;.icon {margin-right: 10rpx;}}}
</style>

上面就是地址显示页的代码，对于vuex的代码，后续文章中会详细介绍，文章如有不正确的地方，还望斧正~

如果文章对您有些许帮助，还望一键三连，谢谢~

uni-app微信公众号（4）——地址管理页面相关推荐

微信公众号进入H5页面之后，点击返回键一直报404
微信公众号进入H5页面之后,点击返回键一直报404,遇到这个问题很郁闷呀! 注意:注意: 这是我自己的系统出的问题! 第一:因为这个问题不是所有手机上面都出现第二:这个问题不是一个手机在出问题第三 ...
微信公众号中关闭页面
微信公众号中关闭页面一.应用场景在微信公众号中为什么要通过JS方法关闭页面? 答:防止用户通过连接地址进入公众号,杜绝安全隐患,以及登录失效的情况. 二.具体的实现思路在封装好的请求文件中的响应 ...
关于微信公众号的h5页面跳转微信小程序的详细介绍
简介关于微信公众号跳转小程序的功能,我也是研究了一整天才弄好的,主要是微信官方文档写的不清楚,百度上的各种文章也各说各的,不过最后还是要相信官网文档,接下来我会一步一步分析,希望对你有帮助,并且最后 ...
微信公众号获取关注页面链接
网上搜了一堆,都是过时的,目前微信文章列表页面右上角点开已经没有复制链接的按钮了其实很简单第一步:将微信公众号的任意一篇推文链接复制出来,在浏览器中打开第二步: 按住F12(window系统)打 ...
php获取微信公众号用户信息头像,微信公众号的web页面如何获取微信用户名和头像？...
首先,你的网站入口必须是微信服务号(开通认证.拥有获取用户openid权限:订阅号是不行的). 方法:网页通过微信的Oauth2认证链接.(必须是微信的内置浏览器,通过微信服务号进入) 操作:通过服务 ...
微信公众号是html页面吗,微信公众号怎么使用页面模板功能？微信公众号页面模板功能怎么使用？...
软件大小: 56.0 MB 软件版本: 4.0.0 软件类型: 文本处理查看详情直接下载 yesky 标签: 微信公众号怎么使用页面模板功能?微信公众号页面模板功能怎么使用?微信公众号后台推出了& ...
微信公众号开发+H5页面语音录入+下载+amr转换为MP3+讯飞语音转文字
其实作为H5想要做语音识别,自认为还说有各种弊端得,同时还是微信公众号里面,如果小程序得话,或许会简单一点,但是这里是在公众号里面开发,在这个过程中查阅个各种资料,其实里面得东西都大同小异,但是大多数 ...
个人整理--微信公众号开发之页面开发
微信公众号页面开发文章很乱可能只有自己能明白了下面有自己看别人的博客个人觉得很详细 1.使用vue开发页面获取code的时候,需要将重定向的页面用encodeURIComponent进行处理 ...
uniapp实现微信公众号内h5页面自定义标题内容和图片
和上次一样填坑,这次是使用uniapp做的项目,下载微信的 js-sdk(1.6.0版本) cnpm install jweixin-module -S wechatShare.js var wx = ...
uni-app微信公众号H5支付页面
准备工作初始化公众平台测试账号系统. 地址: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 登录后,会得到一个测试公众 ...

uni-app微信公众号（4）——地址管理页面

（1）地址管理页面

（1.1）页面代码

（1.2）vue代码

（1.3）css样式代码

uni-app微信公众号（4）——地址管理页面相关推荐

最新文章

热门文章