微信小程序旅游预订机票酒店提交订单页面demo制作教程

今天给大家带来微信小程序旅游预订机票酒店提交订单页面demo制作教程，主要适合旅游行业预订机票车票酒店订单提交页面，制作以后效果图如下：

一、wxml页面代码如下:

<view class="container">
  <view class="pannel dateNum">
    <view class="date">
      <text>9月8日</text>
      <text class="small">出发</text>
    </view>
    <view class="num">
      <text>2成人</text>
      <text>0儿童</text>
    </view>
  </view>

  <view class="pannel flight">
    <view class="goFlight">
      <view class="flightDate">
        <view>
          <text>上海</text>
          <text class="time">10:30</text>
        </view>
        <view>
          <text class="date">2016/04/05</text>
          <text class="flightPic"></text>
        </view>
        <view>
          <text>北京</text>
          <text class="time">08:30</text>
        </view>
      </view>

      <view class="flightLine airport">
        <text>上海虹桥机场T2</text>
        <text class="small">经停济南</text>
        <text>首都国际机场T2</text>
      </view>

      <view class="flightLine flightDetail">
        <text class="flightName">东方航空MU5130</text>
        <text>|</text>
        <text>波音737（中）</text>
        <text class="go">去程</text>
      </view>
    </view>

    <view class="backFlight">
      <view class="flightDate">
        <view>
          <text>上海</text>
          <text class="time">10:30</text>
        </view>
        <view>
          <text class="date">2016/04/05</text>
          <text class="flightPic"></text>
        </view>
        <view>
          <text>北京</text>
          <text class="time">08:30</text>
        </view>
      </view>

      <view class="flightLine airport">
        <text>上海虹桥机场T2</text>
        <text class="small">经停济南</text>
        <text>首都国际机场T2</text>
      </view>

      <view class="flightLine flightDetail">
        <text class="flightName">东方航空MU5130</text>
        <text>|</text>
        <text>波音737（中）</text>
        <text class="go">去程</text>
      </view>
    </view>

    <view class="remark">
      <icon type="warn" size="16" color="#ff7f00"/>
      <view>退改签说明/婴儿不可订</view>
    </view>

    <view class="changeFlight" bindtap="changeFlight">更换机票</view>
  </view>

  <view class="pannel hotel" bindtap="hotel">
    <view class="hotelHead">
      <view class="hotelName">
        <text>北京香格里拉国际酒店</text>
        <text class="pink">2015-09-08至2015-09-20</text>
      </view>
      <view>
        <text class="hotelDetail">酒店详情 ></text>
      </view>
    </view>

    <view class="hotelPic">
      <image src="{{picSrc}}"></image>
    </view>

    <view class="address">
      <text class="addressName">崇文门西大街1号</text>
      <text class="grey">标准间/无早/不可加床/可住2人</text>
    </view>

    <view class="remark">
      <icon type="warn" size="16" color="#ff7f00"/>
      <view>政策/特别提示</view>
    </view>

    <view class="changeHotel">更换酒店</view>

  </view>

  <view class="tabBar">
    <text class="name">套餐总价</text>
    <text class="totalPrice">￥3411</text>
    <text class="priceDetail">费用明细</text>
    <view class="nextStep">下一步</view>
  </view>
</view>

二、样式wxss页面代码如下：

.container {
  padding: 0.533333rem;
}

.pannel {
  background-color: #fff;
  padding: 0.533333rem 0;
  border-radius: 14rpx;
  margin-bottom: 1.066667rem;
  border: 1rpx solid #cacaca;
}

.dateNum {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.8rem 1.173333rem 0.8rem 0.906667rem;
}

.date text {
  font-size: 30rpx;
}

.date .small {
  color: #aaa;
  font-size: 25rpx;
  margin-left: 0.266667rem;
}

.num {
  width: 36%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.num text {
  font-size: 30rpx;
}

.flight {
  display: flex;
  flex-direction: column;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.flightDate {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flightDate view {
  display: flex;
  flex-direction: column;
}

.flightDate view text {
  font-size: 27rpx;
}

.flightDate view .time {
  font-size: 50rpx;
}

.flightDate view .date {
  color: #aaa;
  text-align: center;
  margin-bottom: 0.266667rem;
  font-size: 30rpx;
}

.flightDate view .flightPic {
  display: block;
  width: 8.666667rem;
  height: 1.066667rem;
  background: url('../../images/flight.png') no-repeat center center;
  background-size: cover;
}

.flightLine {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.airport {
  color: #aaa;
}

.airport text {
  font-size: 28rpx;
}

.airport .small {
  font-size: 22rpx;
}

.flightDetail {
  height: 2.346667rem;
  line-height: 2.346667rem;
}

.flightDetail text {
  font-size: 30rpx;
  color: #9caabc;
}

.flightDetail .flightName {
  padding-left: 1.6rem;
  background: url('../../images/logo.gif') no-repeat 0.266667rem center;
  background-size: auto 36%;
}

.flightDetail .go {
  background-color: #ff7f00;
  color: #fff;
  display: block;
  font-size: 28rpx;
  width: 2.293333rem;
  height: 1.226667rem;
  line-height: 1.226667rem;
  text-align: center;
  margin-top: 0.56rem;
}

.remark {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 0.906667rem;
}

.remark view {
  color: #ff7f00;
  font-size: 22rpx;
  margin-left: 0.266667rem;
}

.changeFlight {
  font-size: 30rpx;
  text-align: center;
  color: #aaa;
  margin-top: 0.533333rem;
  height: 1.333333rem;
  line-height: 1.6rem;
  border-top: 1rpx solid #cacaca;
}

.changeHotel {
  font-size: 30rpx;
  text-align: center;
  color: #aaa;
  margin-top: 0.533333rem;
  height: 1.333333rem;
  line-height: 1.6rem;
  border-top: 1rpx solid #cacaca;
}

.goFlight {
  border-bottom: 1rpx solid #cacaca;
  margin-bottom: 0.533333rem;
}

/*酒店*/

.hotel {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  margin-bottom: 2.933333rem;
}

.hotel .hotelPic {
  width: 100%;
  text-align: center;
  margin-top: 0.266667rem;
  margin-bottom: 0.266667rem;
}

.hotelPic image {
  height: 9.12rem;
}

.hotelHead {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.hotelName {
  display: flex;
  flex-direction: column;
}

.hotelName text {
  font-size: 32rpx;
}

.hotelName .pink {
  font-size: 25rpx;
  color: #ff7f00;
}

.hotelDetail {
  font-size: 27rpx;
  color: #aaa;
}

.address {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.266667rem;
}

.address text {
  font-size: 27rpx;
  padding-left: 50rpx;
}

.address .addressName {
  background: url('../../images/location.png') no-repeat 16rpx center;
  background-size: auto 80%;
}

.tabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 2.8rem;
  line-height: 2.8rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: rgba(74, 88, 106, 0.9);
  color: #fff;
  padding-left: 1.066667rem;
  box-sizing: border-box;
}

.tabBar .name {
  font-size: 30rpx;
  font-weight: 200;
}

.tabBar .totalPrice {
  font-size: 34rpx;
}

.tabBar .priceDetail {
  font-size: 30rpx;
  text-decoration: underline;
}

.tabBar .nextStep {
  width: 5.333333rem;
  height: 2.8rem;
  line-height: 2.8rem;
  background-color: #ff7f00;
  text-align: center;
  font-weight: 200;
  font-size: 34rpx;
}

三、js页面代码如下：

Page({
  data:{
    picSrc: '../../images/hotelPic.png'
  },
hotel:function(){
          wx.redirectTo({
          url: '../hotelDetails/hotelDetails',

    })
    },
  //更换机票
  changeFlight:function(){
    wx.navigateTo({
      url: '../airticket/airticket'
    })
  }





})

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