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

    微信小程序填写提交包裹预报页面设计制作开发教程

    2018-08-03 09:40 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序填写提交包裹预报页面设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--pages/packagePredictTrans/packagePredictTrans.wxml-->
    <form bindsubmit="formSubmit">
    <view class="top">
      <view class="left">
        <button type="primary"  class="special" style="background-color: #f9364f;width:95%;" bindtap="jump" data-jump="packagePredictTrans">包裹预报</button>
      </view>
      <view class="center">
        <button type="primary"  class="common" style="color:#f9364f;background-color: #ffffff;width:95%;" bindtap="jump" data-jump="packageRenlingTrans">包裹认领</button>
      </view>
      <view class="right">
        <button type="primary" class="common" style="color:#f9364f;background-color: #ffffff;width:95%" bindtap="jump" data-jump="arrivedPackageTrans">我的包裹</button>
      </view>
    </view>
    
    <view class="middle-form">
      <view class="top-wrap">
          <image src="../../images/trans/1.png" class="img"></image>
          <text class="word-tip">填写包裹预报</text>
      </view>
      <view class="form">
          <view class="row">
              <view class="fleft">
                  <text class="red">*</text>
                  送货仓库
              </view>
            
              <view class="fright">
               <picker bindchange="bindDepotChange" name="depot" value="{{depotindex}}" range="{{depot}}">
                  <view class="picker">
                      <text style="margin-left:5px;">{{depot[depotindex]}}</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="row">
              <view class="fleft">
                  <text class="red">*</text>
                  快递公司
              </view>
            <view class="fright">
               <picker bindchange="bindPickerChange" name="express" value="{{index}}" range="{{array}}">
                  <view class="picker">
                      <text style="margin-left:5px;">{{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="row-3">
              <view class="fleft-3">
                  <text class="red">*</text>
                  快递单号
              </view>
               <input class="input" placeholder="" name='waybill' />
              
          </view>
          <view class="hr"></view>
      </view>
      <view class="table">
          <view class="tr"> 
              <view class="good-name">物品名称</view>
              <view class="count">数量</view>
              <view class="value">总价值(元)</view>
              <view class="action">操作</view>
          </view>
          <view class="tr"> 
              <view class="good-name">
                <input class="tinput" placeholder="时尚女装" />
    
              </view>
              <view class="count">
                <input class="tinput" placeholder="2" />
    
              </view>
              <view class="value">
                <input class="tinput" placeholder="1285.00" />
    
              </view>
              <view class="action">
                <button class="btn">删除</button>
              </view>
          </view>
        <block wx:for="{{goods}}">
           <view class="tr"> 
              <view class="good-name">
                <input class="tinput" placeholder=""/>
    
              </view>
              <view class="count">
                <input class="tinput" placeholder="" />
    
              </view>
              <view class="value">
                <input class="tinput" placeholder=""/>
              </view>
              <view class="action">
                <button class="btn" data-index="{{index}}" ontap="deleteGood">删除</button>
              </view>
          </view> 
         </block> 
           <view class="add-good">
                <button size="mini" style="line-height:12px;padding:5px 0 " class="add-btn" bindtap="addGood">添加商品</button>
                <view class="add-tip">
                  如果包裹里有多个商品,请点击添加商品
                </view>
          </view>
      </view>
      <view class="remark">
          <view class="re-left">备注</view>
          <view class="re-right">
              <textarea class="textarea" placeholder="填写商品名称,商品数量,特殊需求等......" placeholder-style="color:#6a6a6a;"  />
          </view>
      </view>
    </view>
    <view class="submit">
      <button form-type="submit"  type="primary" style="background-color: #f9364f;"   data-jump="mergeTrans">
        提交包裹预报
      </button>
    </view>
    </form>
    

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