本文给大家带来的是微信小程序酒业商城我的个人中心页面设计制作开发教程，制作好以后效果图如下：
一、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(){
// 页面关闭
}
})
|
.jpg)
.jpg)
