本文给大家带来的是微信小程序请输入运单号查询页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--waybill.wxml-->
<form bindsubmit="formSubmit">
<view class="waybill">
<view class="title">
<view class="waybill_before">
</view>
<text class="word">运单查询</text>
</view>
<view class="body">
<text class="label">运单号：</text>
<input class="wayinput" placeholder="请输入运单号" name="number"/>
</view>
<view class="button_about">
<button style="background-color:#0398e7;width:190px;" type="primary" class="trace" form-type="submit" > 查询 </button>
</view>
<view class="hr"></view>
<view class="table">
<view class="tr bg-w">
<view class="th">时间</view>
<view class="th_place">地点和跟踪进度</view>
</view>
<view class="tr">
<view class="td">2017-07-11 21:28:28</view>
<view class="td_place" style="color:#bebeb3">邯郸|发件【邯郸市集散中心】,正准备发往【保定】</view>
</view>
<view class="tr">
<view class="td">2017-07-11 21:28:28</view>
<view class="td_place" style="color:#bebeb3">邯郸|发件【邯郸市集散中心】</view>
</view>
<view class="tr">
<view class="td">2017-07-11 21:28:28</view>
<view class="td_place" style="color:#bebeb3">邯郸|发件【邯郸市集散中心】</view>
</view>
<!-- <block wx:for="{{listData}}">
<view class="tr">
<view class="td">{{item.time}}</view>
<view class="td_place">{{item.place}}</view>
</view>
</block> -->
</view>
</view>
</form>
|
二、wxss样式文件代码如下：
/* waybill.wxss */
page{
background: #f5f5f5;
font-size: 30rpx;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.waybill{
min-height: 300px;
padding:30px 20px;
background-color: #ffffff;
}
.waybill_before{
display: inline-block;
background-color: red;
width: 4px;
height: 12px;
}
.body{
margin: 30px 0;
}
.label{
width:10%;
display:inline;
color:rgba(0,0,0,0.7);
position:relative;
bottom:10px;
}
.hr{
width: 100%;
height: 1px;
margin: 30px 0;
background-color: #c7c7c7;
}
.button_about{
display: flex;
flex-flow: column wrap;
justify-content: center;
}
.word{
margin-left:10px;
}
.wayinput{
padding: 3px;
display: inline-block;
border: 1px solid #c9c9c9;
width: 75%;
}
/*table about */
.table {
border: 0px solid darkgray;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin: 0 0;
}
.td {
color:#bebeb3;
height: 35px;
padding: 5px;
width:30%;
justify-content: center;
border-left: 1rpx solid #c8c8c8;
border-right: 1rpx solid #c8c8c8;
border-bottom: 1rpx solid #c8c8c8;
}
.td_place {
padding: 5px;
height: 35px;
width:70%;
justify-content: center;
text-align: left;
border-right: 1rpx solid #c8c8c8;
border-bottom: 1rpx solid #c8c8c8;
}
.bg-w{
background: snow;
}
.bg-g{
background: #E6F3F9;
}
.th {
padding: 5px;
width: 30%;
justify-content: center;
background: #eeeeee;
color: #666666;
border: 1rpx solid #c8c8c8;
border-right: none;
display: flex;
align-items: center;
}
.th_place {
padding: 5px;
width: 70%;
justify-content: center;
background: #eeeeee;
color: #666666;
border: 1rpx solid #c8c8c8;
display: flex;
align-items: center;
}
|
三、js页面代码如下：
// waybill.js
Page({
/**
* 页面的初始数据
*/
data: {
listData: [
{ "time": "2017-07-10", "place": "邯郸市" }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 查询按钮
formSubmit:function(e){
var num=e.detail.value.number;
// 处理
this.setData({
})
}
})
|
.jpg)
.jpg)
