<!--pages/mine/mine.wxml--> <view class="container"> <view class="userInfo bg-color-c24e4e"> <image class="avatarsize" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <view class="font-color-white">{{userInfo.nickName}}</view> <view class="information" bindtap="openWin"> <image class="information-image" src="/assets/images/index_my_detailicon@2x.png" background-size="cover"></image> <text class="information-text font-color-white">个人资料</text> </view> </view> <view class="listgroup"> <navigator url="../myOrder/orderList" class="view-list arrow-right line-before-bottom " hover-class="weui-cell_active"> <image class="icon" src="/assets/images/Myorder@2x.png"></image> <view class="list-text">我的订单</view> </navigator> <navigator url="../myOrder/orderMessage" class="view-list arrow-right " hover-class="weui-cell_active"> <image class="icon" src="/assets/images/index_Messagecenter@2x.png"></image> <view class="list-text">消息中心</view> </navigator> </view> <view class="listgroup"> <navigator url="../salesCommission/commissionIndex" class="view-list arrow-right " hover-class="weui-cell_active"> <image class="icon" src="/assets/images/Salescommission@2x.png"></image> <view class="list-text"><text> 我的销售提成</text><text class="font-color-999 font-size-12">收入明细、资金体现</text></view> </navigator> </view> <view class="listgroup"> <navigator url="../signedFactory/factoryList" class="view-list arrow-right " hover-class="weui-cell_active"> <image class="icon" src="/assets/images/Contractmanufacturers@2x.png"></image> <view class="list-text"><text> 签约厂家</text><text class="font-color-999 font-size-12">成为经纪人</text></view> </navigator> </view> <view class="listgroup"> <navigator url="url" class="view-list arrow-right " hover-class="weui-cell_active"> <image class="icon" src="/assets/images/about@2x.png"></image> <view class="list-text">关于酱酒宝</view> </navigator> </view> </view> |
/* pages/mine/mine.wxss */ .userInfo{ padding: 0 40rpx; display: flex; flex-direction: row; align-items: center; position: relative; height: 230rpx; } .userInfo .avatarsize{ width: 150rpx; height: 150rpx; border-radius: 50%; margin-right: 40rpx; } .information{ display: flex; flex-direction: row; width: 220rpx; height:70rpx; align-items: center; background-color: #A94545; position: absolute; top:50%; right: 40rpx; margin-top: -35rpx; z-index: 22; } .information .information-image{ width: 60rpx; height: 40rpx; margin: 0 10rpx; } .listgroup{ margin-top: 20rpx; } .listgroup .view-list{ display: flex; flex-direction: row; height: 120rpx; padding: 0 30rpx; align-items: center; background-color: #fff; color: #333333; } .listgroup .view-list .icon{ width: 60rpx; height: 60rpx; margin-right: 30rpx; } .listgroup .view-list .list-text{ display: flex; justify-content: space-between; flex: 1; padding-right: 36rpx; align-items: center; } |
// pages/mine/mine.js var app = getApp() Page({ data:{}, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 app.getUserInfo((userInfo)=>{ //更新数据 this.setData({ userInfo:userInfo }) }) }, openWin(){ wx.navigateTo({ url: 'information' }) }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) |
模板简介:该模板名称为【微信小程序酒业商城我的个人中心页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。