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

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

上一篇 下一篇
本文给大家带来的是微信小程序收入明细订单提成页设计制作开发教程,制作好以后效果图如下:
一、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
      });
  }
})

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

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