微信小程序收入明细订单提成页设计制作开发教程

本文给大家带来的是微信小程序收入明细订单提成页设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/salesCommission/incomeDetails.wxml-->
<view class="container">
<view class="page__bd">
        <view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for-items="{{tabs}}" wx:key="{{index}}">
                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                        <view class="weui-navbar__title">{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; width:{{sliderWidth}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">
                <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
                     <view class="incomeList-title">{{tabs[activeIndex]}}合计：¥22222</view>
                      <view class="incomeList" wx:for="{{incomeList}}" wx:for-item="list">
                          <view class="incomeList-hd"><text>订单：{{list.order_no}}</text><text>{{list.create_time}}</text></view>
                          <view class="incomeList-bd">客户：{{list.customer_name}}</view>
                           <view class="incomeList-ft"><text>金额：{{list.order_total}}</text><text >提成：<text class="font-color-c24e4e">{{list.order_Commission}}</text></text></view>
                      </view>
                </view>
                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
                      <view class="incomeList-title">{{tabs[activeIndex]}}合计：22222</view>
                      <view class="incomeList" wx:for="{{incomeList}}" wx:for-item="list">
                          <view class="incomeList-hd"><text>订单：{{list.order_no}}</text><text>{{list.create_time}}</text></view>
                          <view class="incomeList-bd">客户：{{list.customer_name}}</view>
                           <view class="incomeList-ft"><text>金额：{{list.order_total}}</text><text>提成：<text class="font-color-c24e4e">{{list.order_Commission}}</text></text></view>
                      </view>
                </view>
                <view class="weui-tab__content" hidden="{{activeIndex != 2}}">
                      <view class="incomeList-title">{{tabs[activeIndex]}}合计：22222</view>
                      <view class="incomeList" wx:for="{{incomeList}}" wx:for-item="list">
                          <view class="incomeList-hd"><text>订单：{{list.order_no}}</text><text>{{list.create_time}}</text></view>
                          <view class="incomeList-bd">客户：{{list.customer_name}}</view>
                           <view class="incomeList-ft"><text>金额：{{list.order_total}}</text><text>提成：<text class="font-color-c24e4e">{{list.order_Commission}}</text></text></view>
                      </view>
                </view>
            </view>
        </view>
    </view>
</view>

二、wxss样式文件代码如下：

/* pages/salesCommission/incomeDetails.wxss */
page{
    color:#666666;
}

.weui-navbar__item{
    padding: 30rpx 0;
}
.weui-navbar__item.weui-bar__item_on{
    color: #c24e4e;
}
.weui-navbar__slider{
    background-color: #c24e4e;
}
.weui-navbar{
    background-color: #fff;
}
.incomeList-title{
    height: 110rpx;
    padding: 0 40rpx;
    display: flex;
    align-items: center;
     color:#999999;
}
.incomeList{
    padding: 30rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
     color:#333333;
}
.incomeList-hd,.incomeList-ft{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.incomeList-bd{
    margin: 20rpx 0;
}

三、js页面代码如下：

// pages/salesCommission/incomeDetails.js

Page({
  data:{
     tabs: ["本周", "本月", "本年"],
        activeIndex: 0,
        sliderOffset: 0,
        sliderLeft: 0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
     wx.getSystemInfo({
            success: (res)=> {
                this.setData({
                    sliderWidth: res.windowWidth / this.data.tabs.length,
                    sliderOffset: res.windowWidth / this.data.tabs.length * this.data.activeIndex
                });
            }
        });
      this.setData({
        incomeList:[{
          order_id:1,
          order_no:'SA02201703052988',
          create_time:'2017.03.05 18:30',
          customer_name:'轩少',
          order_total:2399,
          order_Commission:450
        },{  order_id:2,
          order_no:'SA02201703052988',
          create_time:'2017.03.05 18:30',
          customer_name:'轩少',
          order_total:2399,
          order_Commission:450},{
              order_id:3,
          order_no:'SA02201703052988',
          create_time:'2017.03.05 18:30',
          customer_name:'轩少',
          order_total:2399,
          order_Commission:450
          }]  
      })    
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  tabClick: function (e) {
      this.setData({
          sliderOffset: e.currentTarget.offsetLeft,
          activeIndex: e.currentTarget.id
      });
  }
})

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