本文给大家带来的是微信小程序销售提成收入明细棕色页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/salesCommission/commissionIndex.wxml-->
<view class="container">
<view class="account">
<view class="font-color-white account-left">
<text>当前账户余额</text>
<text style="margin-top:42rpx;">¥<text class="font-size-24">{{acctoumtInfo.balance}}</text></text>
</view>
<view class="font-color-white account-right">
<text>我的总收入</text>
<text style="margin-top:42rpx;">¥<text class="font-size-24">{{acctoumtInfo.total}}</text></text>
</view>
</view>
<view class="listgroup">
<navigator url="../salesCommission/incomeDetails" class="view-list arrow-right " hover-class="weui-cell_active">
<view class="list-text">收入明细</view>
</navigator>
</view>
<view class="listgroup">
<navigator url="../salesCommission/withdraw" class="view-list arrow-right " hover-class="weui-cell_active">
<view class="list-text">申请提现</view>
</navigator>
</view>
</view>
|
二、wxss样式文件代码如下：
/* pages/salesCommission/commissionIndex.wxss */
@import '../mine/mine.wxss';
page{
line-height: 1;
}
.account{
display: flex;
background-color: #c2774e;
height: 230rpx;
flex-direction: row;
align-items: center;
}
.account-left,.account-right{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex: 1;
}
.account-left{
border-right:1px solid #de997a;
}
|
三、js页面代码如下：
// pages/salesCommission/commissionIndex.js
Page({
data:{},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.setData({
acctoumtInfo:{
balance:358,
total:2364.00
}
})
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
.jpg)
.jpg)
