微信小程序我的包裹提交合箱转运页设计制作开发教程

本文给大家带来的是微信小程序我的包裹提交合箱转运页设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/onwayPackageTrans/onwayPackageTrans.wxml-->

<view class="top">
  <view class="left">
    <button type="primary"  class="common" style="color:#f9364f;background-color: #ffffff;width:95%" bindtap="jump" data-jump="packagePredictTrans">包裹预报</button>
  </view>
  <view class="center">
    <button type="primary"  class="special" style="color:#f9364f;background-color: #ffffff;width:95%" bindtap="jump" data-jump="packageRenlingTrans">包裹认领</button>
  </view>
  <view class="right">
    <button type="primary" class="common" style="background-color: #f9364f;width:95%"  bindtap="jump" data-jump="arrivedPackageTrans">我的包裹</button>
  </view>
</view>

<view class="middle-form">
  <view class="top-wrap">
      <image src="../../images/trans/2.png" class="img"></image>
      <text class="word-tip">包裹认领</text>
  </view>
  <view class="switch-btn">
    <view class="arrive">
      <button style="margin:0;background-color:#ffffff;color:#0398e7;width:90%;line-height:2;border:2px solid #0398e7;" bindtap="jump" data-jump="arrivedPackageTrans" >到库包裹</button>
    </view>
    <view class="onway">
      <button style="margin:0;background-color:#0398e7;color:#ffffff;width:90%;line-height:2" bindtap="jump" data-jump="onwayPackageTrans" >在途包裹</button>
    </view>
  </view>
  <view class="row">
          <view class="fleft">
              快递公司:
          </view>
        
          <view class="fright">
           <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
              <view class="picker">
                  <text style="margin-left:5px;color:#848484;">{{array[index]}}</text>
                  <view style="float:right;margin-right:5px;">
                        <image src="../../images/common/Arrow-bottom.png" class="arrow"></image>
                  </view>
              </view>
            </picker>
          </view>
      </view>
      <view class="hr"></view>
      <view class="table">
        <view class="top-row">
          <view class="top-all-select">
            <checkbox value="" color="#f9364f" bindtap="allSelect" />
          </view>
          <view style="width:10%">全选</view>
          <view class="top-detail">物品详情</view>
          <view class="top-weight">重量(KG)</view>
          <view class="top-action">操作</view>
        </view>
        <!--block area  -->
      <block wx:for="{{packages}}">
        <view class="row">
          <view class="all-select">
            <checkbox value="" color="#f9364f" checked="{{allcheck}}"/>
          </view>
          <view class="wrap">
            <view class="detail">
                <view class="label">
                    包裹ID: <text class="word">{{item.id}}</text>
                </view>
               <view class="label">
                    快递单号: <text class="word">{{item.waybillNum}}</text>
                </view><view class="label">
                    状态: <text class="word">{{item.status}}</text>
                </view><view class="label">
                    库存(天): <text class="word">{{item.stock}}</text>
                </view>
            </view>
            <view class="weight">{{item.weight}}</view>
            <view class="action">
                <button class="detail-btn" bindtap="jump" data-jump="detailMypackageTrans">详情</button>
                <button class="detail-btn" bindtap="jump" data-jump="editMypackageTrans">编辑</button>
            </view>
          </view>
        </view>
      </block>
      <view class="count-row">
        <view class="free"></view>
        <view class="count">
            <view class="num">
              共计：<text style="margin:0 5px">2</text>件
            </view>
            <view class="fee">
              总重: <text class="red">0.00</text>
            </view>
        </view>
      </view>
        <!--end  -->
      </view>
</view>

<view class="btnWrap">
  <button disabled="true" style="background-color:#c9c9c9;color:#ffffff">提交合箱转运</button>
</view>



<!--table  -->

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

/* pages/onwayPackageTrans/onwayPackageTrans.wxss */


.top{
  display:flex;
padding:10px 20px;
justify-content:space-between;
background-color: #ffffff;

}
.left{
width: 33%;
border-right:1px solid transparent; 
border-image:linear-gradient( #ffffff, #d3d3d3,#ffffff) 2;

}
.center{
width: 33%;
border-right:1px solid transparent; 
border-image:linear-gradient( #ffffff, #d3d3d3,#ffffff) 2;

}
.right{
width: 33%;

}
.special{
border-radius:40px;
line-height:26px;
font-size:15px;
border: 1px solid red;


}
.common{
  border: 1px solid #f9364f;
line-height:26px;
border-radius:40px;
font-size:15px;



}
/*middle  */

.middle-form{
background-color:#ffffff;
padding:15px;
margin-top:5px;


}
.top-wrap{
background-color:#999999;
display:flex;
padding:10px 10px;
font-weight:bold;
border-radius:4px;


}
.img{
width:18px;
height:18px;


}
.word-tip{
color:#ffffff;
margin-left:5px;
font-weight: bold;

}
/*addition  */
.switch-btn{
margin:15px 0;
display:flex;

}
.arrive{
width:50%;
display:flex;
justify-content:flex-start;
border-right:1px solid;
border-image:linear-gradient( #ffffff, #d3d3d3,#ffffff) 2;

}
.onway{

width:50%;
display:flex;
justify-content:flex-end;

}
/* express  */
.row{

display:flex;
justify-content:space-between;

}
.red{
color:red;

}
.fleft{

color:#848484;
width: 25%;

}
.fright{
width: 75%;

}
.arrow{

width:20px;
height:10px;

}
/*table  */
.table{
padding:5px;
background-color:#eeeeee;
display:flex;
flex-flow:column wrap;

}
.top-row{
display:flex;
justify-content:space-between;
text-align:center;
color:#6b6b6b;
align-items:center;
}
.top-all-select{
width:10%;
}
.top-detail{
width:40%;


}
.top-weight{
width:20%;


}
.top-action{
width:20%;


}

/*row  */
.row{
display:flex;
justify-content:space-between;
text-align:center;
color:#6b6b6b;
align-items:center;

}
.all-select{
width:10%;




}
.wrap{
width:90%;
display:flex;
background-color:#ffffff;
border: 1px solid #ababab;
font-size:13px;
}
.detail{
width:55%;
text-align:left;
padding:5px;
border-right: 1px solid #dbdbdb;


}
.weight{
border-right: 1px solid #dbdbdb;
width:22%;
display:flex;
justify-content:center;
align-items:center;
color: #f9364f;
}
.action{
width:23%;
padding:10px 0;
justify-content:space-between;
display:flex;
flex-flow:column wrap;
align-items:center;

}
.label{
margin-bottom:5px;
}
.word{
  color:#a2a2a2;
margin-left:5px;
}
.detail-btn{
margin:0;
line-height:2;
padding:0;
width:80%;
font-size:13px;
color:#0098e4;
background:linear-gradient(to bottom,#d6d6d6 0%,#bcbcbc 100%);
border-radius:2px;


}
/*count  */
.count-row{
display:flex;

text-align:center;
flex-flow: row wrap;
color:#6b6b6b;


}
.free{
  width: 10%;
}
.fee{
}
.count{
width:70%;

display:flex;
justify-content:space-between;
align-items:center;

}
.btnWrap{
  margin-top:20px;
padding:0 15px;

}
.submitbtn{
  background-color:#c9c9c9;
color:#ffffff;

}

三、js页面代码如下：

// pages/onwayPackageTrans/onwayPackageTrans.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    allcheck: false,
    array:
    ["百事汇通", "京东商城", "快捷快递", "顺丰快递", "申通E物流", "EMS快递", "圆通快递", "天天快递", "国通快递", "一店通", "申通快递", '急宅送', '全峰速运', '中国邮政'],
    index: 0,
    packages: [
      { 'id': "A2456", "waybillNum": "54643134642", "status": "已到库", "stock": "10", "weight": "28.20" },
      { 'id': "A2600", "waybillNum": "15646545648", "status": "已到库", "stock": "20", "weight": "21.58" },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  jump: function (e) {
    var url = e.currentTarget.dataset.jump;
    wx.navigateTo({
      url: '../' + url + "/" + url,
      complete: function () {
        console.log('success')
      }
    })

  },
  formSubmit: function (e) {
    console.log('传值处理..')
    wx.redirectTo({
      url: '../../pages/mergeTrans/mergeTrans',
    })
  },
  allSelect: function () {
    var allcheck = this.data.allcheck === false ? true : false;
    this.setData({
      allcheck: allcheck,
    })
  }
})

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