首页 > 小程序教程 > 微信小程序酒业商城我的个人中心页面设计制作开发教程

微信小程序酒业商城我的个人中心页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序酒业商城我的个人中心页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--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>
 
二、wxss样式文件代码如下:
/* 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;
    
}
三、js页面代码如下:
// 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(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序酒业商城我的个人中心页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 21,551次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-18
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 微信模板 html5 企业网站 单页式简历模板 微信公众平台 微信文章 微信素材 响应式 自适应
您可能会喜欢的其他模板