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

本文给大家带来的是微信小程序填写提交包裹预报页面设计制作开发教程，制作好以后效果图如下：

一、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>

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

/* pages/packagePredictTrans/packagePredictTrans.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:13px;


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



}
/*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;

}
.form{
margin-top:15px;

}
.row{

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

}
.red{
color:red;
position:relative;
top:4px;


}
.fleft{

color:#848484;
width: 25%;
}
.fright{
width: 75%;

}
.arrow{

width:20px;
height:10px;

}
.row-3{
display:flex;
align-items:center;




}
.fleft-3{
color:#848484;
display:inline-block;
width:30%;


}
.input{
display:inline-block;
height:15px;
line-height:15px;
margin-left:5%;

width:50%;


}
.table{
  background-color:#eeeeee;
  padding:10px;

}
.tr{
  width:100%;
display:flex;
justify-content:space-between;
text-align:center;
margin-bottom:5px;
align-items:center;

}
.good-name{
  width:30%;
  
}
.count{
  width:15%;

}
.value{
  width:25%;

}
.action{
  width:20%;

}
.tinput{
  background-color: #ffffff;
  border: 1px  solid #eeeeee;
}
.btn{
  line-height:22px;
color:#0d9fe7;
background-color:#bebebe;
border-radius:0;
font-size: 13px;
}
.add-good{
  margin-top:5px;
  display:flex;
align-items:center;
justify-content:flex-start;

}
.add-btn{
padding:5px;
width:70px;
font-size:15px;
line-height:12px;
background-color:#f9364f;
color:#ffffff;
margin:0 5px 0 0;

}
.add-tip{

font-size:12px;
color:#f9364f;

}
.remark{
display:flex;
margin-top:15px;

}
.re-left{
width:12%;
color:#6a6a6a;
position: relative;
top: 10px;


}
.re-right{
width:80%;

}
.textarea{
height: 100px;
border: 1px solid #6a6a6a;
padding: 10px;
width: 100%;
font-size: 12px;
}
.submit{
  margin-top:20px;
padding:0 15px;
margin-bottom:40px;

}

三、js页面代码如下：

// pages/packagePredictTrans/packagePredictTrans.js
var app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    index: 0,
    depotindex:0,
    array:
    ["百事汇通", "京东商城", "快捷快递", "顺丰快递", "申通E物流", "EMS快递", "圆通快递", "天天快递", "国通快递", "一店通", "申通快递", '急宅送', '全峰速运', '中国邮政'],
    
    depot:[
      "中国 广东 东莞仓","上海仓"
    ],
    goods:app.globalData.goods
  },

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

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

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

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  bindPickerChange: function (e) {

    this.setData({
      index: e.detail.value
    })
  },
  bindDepotChange: function (e) {

    this.setData({
      depotindex: e.detail.value
    })
  },
  jump: function (e) {
    var url = e.currentTarget.dataset.jump;
    wx.navigateTo({
      url: '../' + url + "/" + url,
      complete: function () {
        console.log('success')
      }
    })
  
  },
  addGood:function(){
      app.globalData.goods.push({})
      wx.redirectTo({
        url: '../../pages/packagePredictTrans/packagePredictTrans',
      })
  },
  deleteGood:function(e){
    wx.showModal({
      title: '佰客国际',
      content: '确认删除商品',
      success: function (res) {
        if (res.confirm) {
          var id=e.currentTarget.dataset.index
          app.globalData.goods.splice(id,1)
          wx.redirectTo({
            url: '../../pages/packagePredictTrans/packagePredictTrans',
          })
        } else if (res.cancel) {
          
        }
      }
    })
    this.say()
   
    // wx.showLoading({
    //   title: '加载中',
    // })

    // setTimeout(function () {
    //   wx.hideLoading()
    // }, 2000)
    // wx.showToast({
    //   title: '成功',
    //   icon: 'success',
    //   duration: 2000,
    //   mask:true
    // })
  
  },
  say:function(){
    console.log('from say')
  },
  formSubmit:function(e){
        wx.redirectTo({
          url: '../../pages/mergeTrans/mergeTrans',
        })
  }
})

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