微信小程序快递单号搜索包裹认领页面设计制作开发教程 立即下载
首页 > 小程序教程 > 微信小程序快递单号搜索包裹认领页面设计制作开发教程

微信小程序快递单号搜索包裹认领页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序快递单号搜索包裹认领页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/packagePredictTrans/packagePredictTrans.wxml-->
<form bindsubmit="formSubmit">
<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="background-color: #f9364f;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/2.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="bindPickerChange" 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 value='5464313426' class="input" placeholder="" auto-focus/>
          <view class="search">
            <button size="mini" style="line-height:18px;padding:5px 0 " class="sbtn">搜索</button>
          </view>
      </view>
      <view class="shorthr"></view>
  </view>
  <view class="table">
      <view class="tr"> 
          <view class="value">
                          <checkbox value="" color="#f9364f" bindtap="allSelect"/>全选
          </view>
          <view class="count">物品详情</view>
      </view>
    <block wx:for="{{detail}}">
      <view class="tr"> 
          <view class="value">
                <checkbox value="" color="#f9364f" checked="{{allcheck}}" />
          </view>
          <view class="count detail">
            <view class="detail-left">
                <view class="same">快递名称：<text class="commonword">{{item.name}}</text></view>
                <view class="same">快递单号：<text class="commonword">{{item.number}}</text></view>
                <view class="same">重量(KG):<text class="commonword">{{item.weight}}</text></view>
            </view>
            <view class="detail-right">
                <view class="same">尺寸(CM)：<text class="commonword">{{item.size}}</text></view>
                <view class="same">状态：<text class="commonword">{{item.status}}</text></view>
                <view class="same">仓库号:<text class="commonword">{{item.depot}}</text></view>
            </view>
          </view>
      </view>
    </block>
    </view>
</view>
<view class="submit">
  <button form-type="submit" type="primary" style="background-color: #f9364f;">
    确认认领{{good.name}}
  </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;
border: 1px solid red;


}
.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:55%;


}
.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:80%;

}
.value{
  width:20%;
  text-align: left;

}
.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;

}
.sbtn{
  padding:5px;
width:70px;
font-size:15px;
line-height:12px;
background-color:#f9364f;
color:#ffffff;
margin:0 5px 0 0;
}
.shorthr{
   width: 75%;
    height: 1px;
    margin: 10px 0;
    background-color: #c7c7c7;
}

.detail{
display:flex;
font-size:12px;
padding:3px;
text-align:left;
border:1px solid #b2b2b2;
background-color:#ffffff;
width:140%;




}
.detail-left{
padding-right: 10px;
border-right:1px solid;
border-image:linear-gradient( #ffffff, #b2b2b2,#ffffff) 3;

}
.detail-right{
padding-left: 10px;

}
.same{
margin-top:3px;


}
.commonword{
  color:#9a9a9a;
  margin-left: 3px;
  
}
三、js页面代码如下：
// pages/packageRenlingTrans/packageRenlingTrans.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    allcheck:false,
    array:
    ["百事汇通", "京东商城", "快捷快递", "顺丰快递", "申通E物流", "EMS快递", "圆通快递", "天天快递", "国通快递", "一店通", "申通快递", '急宅送', '全峰速运', '中国邮政'],

    index: 0,
    detail:[
      { name: "韵达快递", number: "5463134642", weight: "8.00", size: "200*87*65", status: "已到库", depot: "81"},
      { name: "韵达快递", number: "5463134642", weight: "8.00", size: "200*87*65", status: "已到库", depot: "81" }
      ]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  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
    })
  },
  jump: function (e) {
    var url = e.currentTarget.dataset.jump;
    wx.navigateTo({
      url: '../' + url + "/" + url,
      complete: function () {
        console.log('success')
      }
    })

  },
  formSubmit: function (e) {
    wx.showToast({
      title: '认领成功',
      icon: 'success',
      duration: 5000,
      success: function () {
        wx.redirectTo({
          url: '../../pages/arrivedPackageTrans/arrivedPackageTrans',
        })
      }
    })
  },
  allSelect:function(){
    var allcheck = this.data.allcheck===false?true:false;
    this.setData({
      allcheck: allcheck,
    })
  }
})

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

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 19,563次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 08-07
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 响应式 微信图片 自适应 单页式简历模板 微信文章 企业网站 微信素材 微信公众平台 微信模板
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 430
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 507
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,735
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,084
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,443
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,265
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备 42010602001367号 懒人模板-Copyright © 2023 版权所有