这是wxml
/**index.wxss**/
page{
height:100%;
}
.content{
width:100%;
height:100%;
background: #f2f2f2;
font-family: "宋体";
}
.common{
position: relative;
padding:40rpx;
font-size:28rpx;
font-family: "微软雅黑";
}
.hr
{
height:1px;
background: #cecece;
}
.hr text{
position:absolute;
width:200rpx;
text-align:center;
background: #eeeeee;
left:37%;
top:20rpx;
}
.order{
margin-top:40rpx;
background: #fff;
padding:20rpx;
}
.order image{
width:32px;
height:38px;
}
.date{
display:flex;
align-items:center;
font-family: "微软雅黑";
font-size:40rpx;
color:#448ef3;
}
.date input{
padding-left:10rpx;
}
.order button{
background: #448ef3;
color:#fff;
}
<!--index.wxml-->
<view class="content">
<view class="common"> <view class="hr"> <text>快递预约</text> </view> <form bindsubmit="submitdate"> <view class="order"> <view class="date"> <image src="/images/date.png"> </image> <input name="date" placeholder="请输入预定的日期....." placeholder-style="color:#eee" /> </view> <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view> <view class="date"> <image src="/images/person.png"></image> <input name="username" placeholder="请输入预定的人....." placeholder-style="color:#eee" /> </view> <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view> <view class="date"> <image src="/images/phone.png"></image> <input name="telpho" placeholder="请输入预定电话....." placeholder-style="color:#eee" /> </view> <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view> <view class="date"> <image src="/images/position.png"> </image> <input name="address" placeholder="请输入预定的地址....." placeholder-style="color:#eee" /> </view> <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view> <view class="date"> <image src="/images/info.png"> </image> <input name="other" placeholder="请输入预定的其他信息....." placeholder-style="color:#eee" /> </view> <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view> <button form-type="submit">确认提交</button> </view> </form> </view> </view>
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
},
//事件处理函数
submitdate: function (event) {
var orderInfo = event.detail.value;
wx.setStorage({
key: 'orderInfo',
data: orderInfo,
success: function (res){
wx.navigateTo({
url: '../logs/logs'
})
}
})
}
})
第二个页面logs.wxml
<!--logs.wxml-->
<view class="content">
<view class="classname">预约信息</view>
<view class="classname">预约日期:<text>
{{orderInfo.date}}</text></view>
<view class="classname">联系人姓名:<text>{{orderInfo.username}}</text></view>
<view class="classname">联系人电话:<text>{{orderInfo.telpho}}</text></view>
<view class="classname">联系人地址:<text>{{orderInfo.address}}</text></view>
<view class="classname">其他备注信息:<text>{{orderInfo.other}}</text></view>
</view>
logs.wxss
.content{
padding:20rpx;
}
.classname{
margin-top:20rpx;
}
logs.js
Page({
data: {
orderInfo:{}
},
onLoad: function () {
var that=this;
wx.getStorage({
key:'orderInfo',
success:function(res){
that.setData({
orderInfo:res.data
})
}
})
}
})