欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

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

    2018-08-07 09:25 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序我的包裹提交合箱转运页设计制作开发教程,制作好以后效果图如下:
    一、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  -->
    
    
    
    
    
    
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议