<view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover"></image> <text class="userinfo-nickname">{{ userInfo.nickName }}</text> </view> <view class="info_list"> <view class="weui-cells"> <navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" wx:for="{{ items }}" wx:key="" data-path="{{ item.path }}" data-index="{{ index }}" bindtap="navigateTo"> <view class="weui-cell__hd"> <image src="{{ item.icon }}" style="margin-bottom: 2px;margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image> </view> <view class="weui-cell__bd">{{ item.text }}</view> <view class="weui-cell__ft weui-cell__ft_in-access"> <text wx:if="{{ index === 2 }}">{{ item.path }}</text> </view> </navigator> </view> <view class="weui-cells"> <navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" wx:for="{{ settings }}" wx:key="" data-path="{{ item.path }}" data-index="{{ index }}" bindtap="bindtap"> <view class="weui-cell__hd"> <image src="{{ item.icon }}" style="margin-bottom: 2px;margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image> </view> <view class="weui-cell__bd">{{ item.text }}</view> <view class="weui-cell__ft weui-cell__ft_in-access"> <text wx:if="{{ index === 0 }}">{{ item.path }}</text> </view> </navigator> </view> </view> <view class="logout" bindtap="logout">登出账号</view> </view> |
.container{ font-family: "微软雅黑"; background: #f2f2f2; } .userinfo { display: flex; flex-direction: column; padding: 50rpx 0; align-items: center; background: #479de6; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #fff; } .weui-cells { position: relative; margin-top: 1.17647059em; background-color: #FFFFFF; line-height: 1.41176471; font-size: 17px; } .weui-cells:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cell { padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-cell:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; left: 15px; } .weui-cell:first-child:before { display: none; } .weui-cell_active { background-color: #ECECEC; } .weui-cell__bd { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; font-size: 15px; } .weui-cell__ft { text-align: right; color: #999999; font-size:15px; } .logout { position: relative; margin-top: 1.17647059em; line-height: 1.41176471; font-size: 17px; padding: 10px 15px; background: #fff; text-align: center; } .logout:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; } .logout:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #D9D9D9; color: #D9D9D9; } |
const App = getApp() Page({ data: { userInfo: {}, items: [ { icon: '../../images/iconfont-order.png', text: '我的福利', path: '/pages/order/list/index' }, { icon: '../../images/iconfont-addr.png', text: '每日签到', path: '/pages/address/list/index' }, { icon: '../../images/iconfont-kefu.png', text: '我的折扣', path: '18521708248', }, { icon: '../../images/iconfont-help.png', text: '我的代金券', path: '/pages/help/list/index', }, ], settings: [ { icon: '../../images/iconfont-about.png', text: '关于我们', path: '/pages/about/index' }, ] }, onLoad() { this.getUserInfo() }, navigateTo(e) { const index = e.currentTarget.dataset.index const path = e.currentTarget.dataset.path App.WxService.navigateTo(path) }, getUserInfo() { const userInfo = App.globalData.userInfo if (userInfo) { this.setData({ userInfo: userInfo }) return } App.getUserInfo(data => { console.log(data) this.setData({ userInfo: data }) }) }, logout() { App.WxService.showModal({ title: '友情提示', content: '确定要登出吗?', }) .then(data => data.confirm == 1 && this.signOut()) }, signOut() { App.HttpService.signOut() .then(data => { console.log(data) if (data.meta.code == 0) { App.WxService.removeStorageSync('token') App.WxService.redirectTo('/pages/login/index') } }) }, }) |
模板简介:该模板名称为【微信小程序蓝色背景我的会员中心样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。