<!--waybill.wxml-->
<form bindsubmit="formSubmit">
<view class="expense">
<view class="title">
<view class="expense_before">
</view>
<text class="word">运费查询系统</text>
</view>
<view class="wrap">
<view class="des_all">
<view class="label">目的地：</view>
<view class="region"><picker mode="region" name="destination" bindchange="bindRegionChange" value="{{region}}">
<text class="left">{{region[0]}}-{{region[1]}}-{{region[2]}}</text> <text class="right">></text>
</picker>
</view>
</view>
<view class="weight_all">
<view class="label">重量(KG):</view>
<view class="weight">
<input placeholder="" type="digit" name="weight"/>
</view>
<view class="cal_button">
<button style="font-size:14px;bottom:1px;background-color:#0398e7;" type="primary" form-type="submit"> 运费计算 </button>
</view>
</view>
</view>
<view class="hr"></view>
<view class="expense_detail">
<view class="table">
<view class="tr bg-w">
<view class="th">运输方式</view>
<view class="th colorful">预计运期</view>
<view class="th">首价/首重</view>
<view class="th">续假/续重</view>
<view class="th" style="border-right:1rpx solid #c8c8c8;">限重(KG)</view>
</view>
<view class="tr">
<view class="td">DHL</view>
<view class="td colorful">3-15个工作日</view>
<view class="td">90.00</view>
<view class="td"><text class="price">26.00</text>/500克</view>
<view class="td" style="border-right:1rpx solid #c8c8c8;">30</view>
</view>
<view class="tr" style="border-bottom:1rpx solid #c8c8c8;">
<view class="td">FEDEX</view>
<view class="td colorful">3-5个工作日</view>
<view class="td">85.00</view>
<view class="td"><text class="price">20.00</text>/500克</view>
<view class="td" style="border-right:1rpx solid #c8c8c8;">30</view>
</view>
<!--end tr + border-bottom end td + border-right -->
<!-- <block wx:for="{{listData}}">
<view class="tr">
<view class="td">{{item.method}}</view>
<view class="td colorful">{{item.day}}</view>
<view class="td">{{item.fprice}}</view>
<view class="td"><text class="price">{{item.aprice}}</text>/500克</view>
<view class="td" style="border-right:1rpx solid #c8c8c8;">{{item.weightlimit}}</view>
</view>
</block> -->
</view>
</view>
</view>
</form>
|
/* expense.wxss *//* waybill.wxss */
page{
background: #f5f5f5;
font-size: 30rpx;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.expense{
margin-top: 10px;
min-height: 300px;
padding:30px 20px;
background-color: #ffffff;
}
.expense_before{
display: inline-block;
background-color: red;
width: 4px;
height: 10px;
}
.hr{
width: 100%;
height: 1px;
margin: 30px 0;
background-color: #c7c7c7;
}
.word{
margin-left:10px;
}
.wrap{
width: 100%;
margin:10px 0;
}
.label{
width: 10%;
display: inline;
color: rgba(0,0,0,0.7);
}
.region{
display:inline-block;
width:78%;
overflow:hidden;
padding:5px;
border:1px solid rgba(0,0,0,0.3);
position:relative;
top:12px;
height:26px;
line-height:26px;
}
.weight_all{
margin-top:20px;
width: 100%;
}
.weight{
border:1px solid rgba(0,0,0,0.3);
position: relative;
top: 5px;
left: 5px;
display:inline-block;
padding:5px;
width:40%;
}
.cal_button{
display:inline-block;
width:32%;
position:relative;
top:12px;
left:10px;
}
.left{
float: left;
margin-left: 10px;
color: rgba(0,0,0,0.3);
}
.right{
float: right;
margin-right:10px;
color: rgba(0,0,0,0.3);
}
/*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:22px;
padding:13px 5px 5px 5px;
width:20%;
justify-content:center;
text-align:center;
border:1rpx solid #c8c8c8;
overflow:scroll;
font-size:10px;
border-bottom: none;
border-right: none;
}
.bg-w{
background: snow;
}
.bg-g{
background: #E6F3F9;
}
.th {
padding: 5px;
width: 20%;
justify-content: center;
background: #eeeeee;
color: #666666;
border: 1px solid #c8c8c8;
border-bottom:none;
border-right: none;
display: flex;
align-items: center;
font-size: 8px;
}
.colorful{
color: #0096e6;
}
.price{
color:#f53557;
}
|
// expense.js
Page({
/**
* 页面的初始数据
*/
data: {
listData:[
{"method":"DHL","day":"3-15个工作日","fprice":"90.00","aprice":"26.00","weightlimit":"30"}
],
region: ['--请', '选', '择--']
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
},
formSubmit:function(e){
var info={}
info.destination=e.detail.value.destination;
info.weight=e.detail.value.weight;
// 处理
console.log(info)
this.setData({
})
}
})
|
模板简介：该模板名称为【微信小程序快递运费查询系统运费计算页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
