微信小程序旅游订机票订单页面demo制作设计教程

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

一、wxml页面代码如下:

<!--index.wxml-->
<!--头部固定-->
<view class="{{addhidden?'aa':'hid'}}" >
<view class="head">
    <view class="bord containerSmall " >  
        <text class="line">上海-北京4天3晚双飞自由行·入住锦苑富润酒店酒店</text>
    </view>
 <view class="state containerSmall">
    <view class="gostate">出发日期：
        <text class="txtstate_01">2016-04-23</text>
        <text class="txtstate_02">|</text>出行人数:
        <text class="txtstate_03">成人X2</text>
        <text class="txtstate_04">儿童X1</text>
    </view>
 </view>
</view>
<!--选择乘机人-->
  <form bindsubmit="formBindsubmit">
<view class="ordergood">
  <view class="banner">
      <view class="layout">
    <view class="airpeople">
    <text class="airp">乘机人</text>
    <view class="addp" bindtap="addp"><image src="../../images/add.png" class="add"></image></view>
    </view> 
      <view class="person">
          <view class="delete"><image src="../../images/delete.png" class="del"></image></view>
          <view class="pers"><image src="../../images/person.png" class="per"></image></view>

          <view class="message"> 
                <text class="permessage">魏忠贤</text>
                <text class="permessage">410520198210071352</text>
                <view class="arow"><image src="../../images/arow.png" class="arow"></image></view>

          </view>

      </view>
    </view>
  </view>

  <!--乘机人信息-->
  <view class="banner">
    <view class="layout">
        <view class="airpeople">
        <label class="airp">联系人</label>
            <input placeholder="请填写姓名" type="text" name="userName" placeholder-style="color:#929FB1; font-size:0.9em;font-weight:bold" /> 
        </view>
        <view class="airpeople">
        <label class="airp">手机号</label>
            <input placeholder="请填写手机号"  type="number"  name="phone" placeholder-style="color:#929FB1; font-size:0.9em;font-weight:bold" /> 
        </view>
    </view>
  </view>

  <!--保险信息-->
  <view class="banner insure">
    <view class="layout">
       <view class="airsure">
            <navigator url="../safe/safe">
            <text class="airinsure">航空综合险</text>
            <view class="cir1"><image src="../../images/cir1.png" class="cir1"></image></view>
            </navigator>
            <view class="rule">百万保额，放心出行</view>
        </view>
        <view class="whole"> 
                <text class="permessage">全程￥38/份</text>
        </view>
       <view class="body-view">
        <switch checked bindchange="switch1Change" />   
      </view>
    </view>
  </view>

  <!--相关规定条款-->
  <view class="read containerSmall">
    <view class="choose"  hidden="{{mallhide}}">
    <image src="{{tip}}" class="check" bindtap="app"></image>
    </view>
     <view class="choose"  hidden="{{hide}}">
    <image src="{{ttp}}" class="checked" bindtap="appjs"  hidden="{{hide}}"></image>
    </view>
    <view class="txt">
    已阅读且同意<navigator url="../guarantee/guarantee">相关规定</navigator>并<navigator url="../insure/insure">认可保险条款和金额</navigator>。
    </view>
  </view>
</view>

<!--底部-->
 <view class="foot">
       <view class="price">
          <text class="money">￥1269.0</text>
          <view class="detail" bindtap="showdetail" hidden="{{hidetravel}}">
             <text>明细</text>
             <image src="../../images/angle.png"></image>
          </view>
           <view class="detail" bindtap="pricedetail" hidden="{{showtravel}}">
             <text>明细</text>
             <image src="../../images/angle1.png"></image>
          </view>
      </view>
      <view class="btn"  hidden="{{hide}}" >
       <button class="next"  formType="submit" >
         <text>下一步</text> 
         <image src="../../images/row1.png"></image>   
      </button>
      </view>
       <view class="btn" hidden="{{mallhide}}">
        <button class="next" style="background:#DBDBEA;"  >
         <text>下一步</text>
         <image src="../../images/row1.png"></image>
      </button>
     </view>
  </view>
  </form> 
  
<!--机票信息弹出框-->
<view  class="modal" hidden="{{modalhidden}}" bindtap="hiddenMask">
</view>  
  
<!--去程信息-->
<view  class="goselect"  hidden="{{modalhidden}}">
  <view class="railpath">
     <view class="railcenter timedate">
        <view class="begintime">
            <text class="datedetail">10-10周五</text>
            <text class="time">10:30</text>
        </view>
        <view class="timelength">
            <text>2小时0分钟</text>
            <image src="../../images/timelength.png"></image>
        </view>
        <view class="endtime">
           <text class="datedetail">10-10周五</text>
            <text class="time">08:10</text>
        </view>
    </view>
    <view class="railcenter location">
        <text class="locateleft">上海虹桥机场T2</text>
        <text class="locateright">首都国际机场T2</text>
    </view>
  </view>
  <view class="broadcast railcenter">      
        <text class="first">东方航空MU5130</text>
        <text>波音737（中）</text>
        <text class="last">有餐食</text>
        <image src="../../images/gored.png"></image>  
  </view>
</view>

<!--返程信息-->
<view  class="backselect"  hidden="{{modalhidden}}">
  <view class="railpath">
     <view class="railcenter timedate">
        <view class="begintime">
            <text class="datedetail">10-10周五</text>
            <text class="time">10:30</text>
        </view>
        <view class="timelength">
            <text>2小时0分钟</text>
            <image src="../../images/timelength.png"></image>
        </view>
        <view class="endtime">
           <text class="datedetail">10-10周五</text>
            <text class="time">08:10</text>
        </view>
    </view>
    <view class="railcenter location">
        <text class="locateleft">首都国际机场T2</text>
        <text class="locateright">上海虹桥机场T2</text>
    </view>
  </view>
  <view class="broadcast railcenter">
        <text class="first">东方航空MU5130</text>
        <text>波音737（中）</text>
        <text class="last">有餐食</text>
        <image src="../../images/backred.png"></image>
  </view>
</view>

<!--退改签规则弹出框-->
<!--<view class="quitrule"  hidden="{{rulehide}}">
<image src="../../images/rule.png"></image>
</view>
 <view class="hiderule" hidden="{{rulehide}}" >
        <image src="../../images/del.png" bindtap="hiderule" ></image>
        <view class="title">
        退改签规则
        </view>
        <view class="ticket">
           <text class="adult">成人票</text>
           <view class="ticketnote">
               <label>退票费</label><text >只退机建和燃油</text>
               <label>改期费</label><text>不可改期</text>
               <label>签证</label><text>不可签转</text>
           </view>
           <view class="special">
              <label>特殊说明</label><text>仅允许通过身份证购买机票，乘机人年龄需在100周岁（含）以下。</text>
           </view>
        </view>
           <view class="childticket">
           <text class="adult">儿童票</text>
           <text class="phone">退改签规则以东方航空最新规定为准，可资讯客服电话（95530）</text>
           </view>
</view>-->

<!--活动及购票须知弹窗-->
<view class="quitrule"  hidden="{{activityhide}}">
<image src="../../images/rule.png"></image>
</view>
 <view  class="hiderule" hidden="{{activityhide}}" >
        <image src="../../images/del.png" bindtap="hideactivity" ></image>
        <view class="title">
        活动及购票须知
        </view>
        <view class="ticket">
           <text class="adult buy">购票须知</text>        
        </view>
           <view class="childticket">
           
           <text class="phone bag">您可免费携带10公斤且体积不超过20*30*40CM
           的非托运行李，无免费托运行李额</text>         
           </view>
</view>

<!--价格明细底部弹窗-->
<view  class="modal detailmodal" hidden="{{detail}}" bindtap="pricedetail">
</view>    
<view class="travelsite"  hidden="{{detail}}">
 <view class="siteleft">去程</view>
    <view class="siteright">
       <text class="type top">成人票</text><text class="part top">2人</text><text class="sum top">￥1050</text>
       <text class="type">机建/燃油</text><text class="part">2人</text><text class="sum">￥0/￥100</text>
       <text class="type">航空综合险</text><text class="part">2份</text><text class="sum">￥60</text>
       <text class="type">安心保险</text><text class="part">4份</text><text class="sum">￥80</text>
       <text class="type">愈重行李</text><text class="part">20kg</text><text class="sum">￥60</text>
       <text class="type">延误险</text><text class="part">2份</text><text class="sum">￥58</text>
    </view>
</view>

</view>




<!--添加乘机人-->

  <view class="{{addhidden?'hid':'aa'}}">
   <view class="wrap">
  <!--信息完善-->
      <block  wx:for="{{array}}" wx:if="{{!item.lack}}" wx:key="item.id">
         <view class="sum">
            <view class="sum-left" ><image src="{{item.src}}" class="ch-img" data-index="{{item.idx}}"  bindtap="checktap"></image></view>
                  <view class="user sum-right">
                    <image src="../../images/us.png" class="user-left"></image>
                    <view class="user-right">
                        <view>{{item.name}}</view>
                   <!-- <view >{{item.surname}}</view>
                        <view >{{item.givenname}}</view>-->
                        <view >身份证：{{item.idcard}}</view>
                   <!-- <view >护照：{{item.idcard}}</view>
                        <view >出生证明：{{item.idcard}}</view>-->
                    </view>
                    <navigator url="../redact/redact?id={{item.id}}" class="redack"><image src="../../images/xk.png" class="red-img"></image></navigator>    
                  </view>         
         </view>
       </block>
<!--信息不完善-->
     <block  wx:for="{{array}}" wx:if="{{item.lack}}" wx:key="item.id">
         <view class="sum">
            <view class="sum-left"><image src="{{item.src}}" class="ch-img" data-index="{{item.idx}}"  bindtap="checktap" ></image></view>
                  <view class="{{index==array.length-1?'user noborder':'user'}}">
                      <image src="../../images/us.png" class="user-left"></image>
                      <view class="user-right">
                        <view>{{item.name}}</view>
                        <view >缺少{{item.lack}}</view>
                      </view>
                      <navigator class="complete" url="../redact/redact?id={{item.id}}">完善</navigator>     
                  </view>
         </view>
       </block>



   </view>
<button class="addperson" bindtap="adduser">添加乘机人</button>
<navigator url="../login/login">登录</navigator>
</view>

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

.containerSmall {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.hid {
  display: none;
}

.head {
  height: 3.81rem;
  background: #59A5F0;
  width: 100%;
  position: fixed;
  padding-left: 1.12rem;
  padding-right: 0.96rem;
  z-index: 999;
  box-sizing: border-box;
}

.line {
  color: #FFFFFF;
  font-size: 31.6rpx;
  font-weight: bold;
}

.bord {
  height: 2.133rem;
  line-height: 1.0665rem;
}

.state {
  color: #C5DFF9;
  height: 1.653rem;
}

.gostate {
  font-size: 25.78rpx;
  height: 1.653rem;
  line-height: 1.653rem;
}

.gostate .txtstate_02 {
  margin-right: 0.933rem;
  margin-left: 0.933rem;
  height: 1.653rem;
}

.gostate .txtstate_04 {
  margin-left: 0.933rem;
  height: 1.653rem;
}

.cir {
  width: 29rpx;
  height: 29rpx;
  padding: 0 5rpx;
}

.ordergood {
  /*height: 100%;*/
  background: #F0EFF5;
  position: absolute;
  top: 119rpx;
  width: 100%;
}

.banner {
  width: 100%;
  height: 202rpx;
  border-bottom: 0.026667rem solid #C7C7C7;
  /*border-top: 1px solid #C7C7C7;*/
  margin-top: 0rpx;
  padding-top: 15rpx;
  background: #fff;
  margin-bottom: 56rpx;
}

.layout {
  width: 713rpx;
  margin-left: 35rpx;
}

.airpeople {
  height: 100rpx;
  border-bottom: 0.026667rem solid #C7C7C7;
  line-height: 100rpx;
}

.airp {
  display: block;
  float: left;
  color: #536277;
  font-size: 0.9em;
  font-weight: bold;
}

.addp {
  float: right;
}

.add {
  width: 68rpx;
  height: 68rpx;
  margin-right: 35rpx;
  margin-top: 15rpx;
}

.person {
  height: 73rpx;
  padding-top: 20rpx;
}

.del {
  width: 51rpx;
  height: 51rpx;
  float: left;
  margin-right: 20rpx;
  margin-top: 10rpx;
}

.per {
  width: 47rpx;
  height: 44rpx;
  float: left;
  margin-right: 10rpx;
  margin-top: 10rpx;
}

.message {
  float: left;
  width: 582rpx;
}

.permessage {
  display: block;
  font-size: 0.9em;
  font-weight: bold;
  color: #536277;
}

.arow {
  width: 17rpx;
  height: 29rpx;
  float: right;
  margin-right: 20rpx;
  margin-top: -30rpx;
}

label {
  width: 242rpx;
}

input {
  height: 100rpx;
}

.insure {
  height: 126rpx;
}

.airsure {
  float: left;
  width: 351rpx;
}

.airinsure {
  display: block;
  float: left;
  color: #536277;
  font-size: 0.9em;
  font-weight: bold;
  margin-right: 10rpx;
}

.cir1 {
  width: 32rpx;
  height: 32rpx;
  float: left;
}

.whole {
  margin-top: 15rpx;
}

.rule {
  float: left;
  font-size: 0.75em;
  color: #929FB1;
  font-weight: bold;
  margin-top: 15rpx;
}

.body-view {
  float: right;
  margin-top: -40rpx;
  margin-right: 35rpx;
}

/*相关条款样式*/

.read {
  margin-top: -20rpx;
  height: 82rpx;
}

.choose {
  float: left;
  height: 82rpx;
}

.check {
  width: 45rpx;
  height: 45rpx;
  margin-right: 10rpx;
}

.checked {
  width: 45rpx;
  height: 45rpx;
  margin-right: 10rpx;
}

.txt {
  color: #929FB1;
  font-size: 0.75em;
  font-weight: bold;
  height: 82rpx;
  margin-top: 10rpx;
}

.txt navigator {
  color: #59A5F0;
  text-decoration: underline;
  display: inline-block;
}

/*底部样式*/

.foot {
  height: 108rpx;
  position: fixed;
  bottom: 0;
}

.price {
  height: 108rpx;
  background: #59A5F0;
  width: 456rpx;
  float: left;
  line-height: 108rpx;
}

.money {
  font-size: 1.5em;
  display: block;
  color: #fff;
  float: left;
  margin-left: 30rpx;
  margin-right: 25rpx;
}

.detail text {
  color: #fff;
  margin-right: 10rpx;
}

.detail image {
  width: 19rpx;
  height: 11rpx;
  margin-bottom: 8rpx;
}

.btn {
  width: 294rpx;
  height: 108rpx;
  float: left;
}

.next {
  width: 294rpx;
  height: 108rpx;
  float: left;
  line-height: 108rpx;
  text-align: center;
  background: #FF9A16;
  border-radius: 0;
}

.next text {
  color: #fff;
  font-weight: bold;
  margin-left: 20rpx;
}

.next image {
  margin-left: 30rpx;
  width: 25rpx;
  height: 30rpx;
}

/*模态框样式*/

.modal {
  position: absolute;
  background-color: #0F0F1E;
  z-index: 1002;
  left: 0;
  opacity: 0.6;
  width: 100%;
  height: 100%;
}

.goselect {
  width: 702rpx;
  height: 234rpx;
  z-index: 10000;
  background: #fff;
  color: black;
  position: absolute;
  top: 287rpx;
  left: 23rpx;
  border-radius: 10rpx;
}

.railpath {
  z-index: 2100;
  color: #000;
  font-weight: bold;
  height: 164rpx;
  border-bottom: 0.026667rem dashed#D6D6D6;
}

.railcenter {
  width: 650rpx;
  margin: 0 auto;
}

.timedate {
  height: 100rpx;
  padding-top: 23rpx;
}

.location {
  height: 47rpx;
  display: flex;
  /*margin-top: -15rpx;*/
}

.location text {
  flex: 1;
  color: #9BA8BA;
  font-size: 0.9em;
}

.locateright {
  text-align: right;
}

.backselect {
  width: 702rpx;
  height: 234rpx;
  z-index: 2000;
  background: #fff;
  color: black;
  position: absolute;
  top: 544rpx;
  left: 23rpx;
  border-radius: 10rpx;
}

.begintime {
  float: left;
  width: 150rpx;
  /*margin-right: 10rpx;*/
}

.time {
  color: #444;
  font-size: 1.5em;
}

.datedetail {
  display: block;
  color: #9BA8BA;
  font-size: 0.8em;
}

.timelength {
  float: left;
  width: 320rpx;
  margin: 0 10rpx;
}

.timelength text {
  color: #ACD2F7;
  font-size: 0.8em;
  margin-left: 90rpx;
}

.timelength image {
  width: 331rpx;
  height: 42rpx;
  /*margin: 0 10rpx;*/
}

.endtime {
  float: left;
  width: 157rpx;
  text-align: center;
}

.broadcast {
  height: 68rpx;
  line-height: 68rpx;
}

.broadcast text {
  background: url("../../images/airline.png") no-repeat right;
  font-size: 0.9em;
  margin-right: 10rpx;
  color: #9BA8BA;
}

.broadcast .first {
  padding-right: 15rpx;
}

.broadcast text.last {
  background: none;
}

.broadcast image {
  width: 47rpx;
  height: 47rpx;
  margin-bottom: -10rpx;
}

/*退改签规则弹出框*/

.quitrule {
  position: absolute;
  z-index: 1002;
  width: 100%;
  height: 100%;
}

.quitrule image {
  display: block;
  width: 100%;
  height: 100%;
}

.hiderule {
  width: 100%;
  height: 100%;
  z-index: 10000;
  position: absolute;
}

.hiderule image {
  display: block;
  width: 37rpx;
  height: 37rpx;
  float: right;
  margin-top: 35rpx;
  margin-right: 33rpx;
}

.title {
  width: 100%;
  height: 88rpx;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  margin-top: 82rpx;
  line-height: 88rpx;
  border-bottom: 7rpx solid #D6D6D6;
}

/*票价信息*/

.adult {
  display: block;
  width: 602rpx;
  height: 82rpx;
  margin: 0 auto;
  border-bottom: 0.026667rem solid #D6D6D6;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  line-height: 82rpx;
  padding-left: 94rpx;
}

.ticketnote {
  width: 100%;
  height: 304rpx;
}

.ticketnote label {
  display: block;
  width: 150rpx;
  height: 84rpx;
  float: left;
  margin-left: 111rpx;
  color: #fff;
  line-height: 84rpx;
}

.ticketnote text {
  display: block;
  width: 485rpx;
  height: 84rpx;
  border-bottom: 0.026667rem solid #D6D6D6;
  float: left;
  color: #fff;
  line-height: 84rpx;
}

.special {
  width: 100%;
  height: 117rpx;
  border-bottom: 7rpx solid #D6D6D6;
}

.special label {
  width: 190rpx;
  height: 84rpx;
  float: left;
  margin-left: 70rpx;
  color: #fff;
}

.special text {
  display: block;
  width: 445rpx;
  height: 84rpx;
  float: left;
  color: #dedede;
  font-size: 0.8em;
  padding-right: 40rpx;
}

.phone {
  display: block;
  width: 450rpx;
  height: 117rpx;
  margin-left: 252rpx;
  color: #dedede;
  font-size: 0.8em;
  padding-top: 30rpx;
}

/*活动须知*/

.bag {
  margin-left: 78rpx;
}

.ticket .buy {
  padding-left: 20rpx;
}

/*底部价格明细弹窗*/

.detailmodal {
  position: absolute;
  bottom: 108rpx;
}

.travelsite {
  width: 100%;
  height: 355rpx;
  position: absolute;
  bottom: 108rpx;
  z-index: 10003;
}

.siteleft {
  color: #fff;
  font-weight: bold;
  width: 117rpx;
  height: 355rpx;
  border-right: 0.026667rem dashed #fff;
  line-height: 355rpx;
  text-align: center;
  background: #536277;
  float: left;
  font-size: 1em;
}

.siteright {
  width: 632rpx;
  height: 355rpx;
  float: left;
  background: #627083;
  opacity: 0.8;
}

.siteright text {
  float: left;
  display: block;
  color: #fff;
  font-size: 0.9em;
}

.type {
  margin-left: 32rpx;
  width: 234rpx;
  height: 43rpx;
}

.top {
  margin-top: 43rpx;
}

.part {
  width: 170rpx;
  height: 43rpx;
}

.sum {
  width: 196rpx;
  height: 43rpx;
}

form {
  width: 100%;
  height: auto;
}

/*添加乘机人*/

/**index.wxss**/

/*page{ background-color: #F0EFF5;}*/

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 58rpx 0;
  box-sizing: border-box;
}

.wrap {
  width: 100%;
  border-top: 0.026667rem solid #C7C7C9;
  border-bottom: 0.026667rem solid #C7C7C9;
  background: #FFFFFF;
}

.sum {
  height: 100rpx;
  margin: 0 auto;
  overflow: hidden;
}

.sum-left {
  float: left;
  width: 105rpx;
  height: 98rpx;
}

.user {
  border-bottom: 0.026667rem solid #C7C7C9;
  width: 647rpx;
  float: left;
  height: 98rpx;
  font-size: 0.75em;
  overflow: hidden;
}

.noborder {
  border: none;
}

.user-left {
  float: left;
}

.user-right {
  float: left;
  margin: 13rpx 0 0 10rpx;
}

.redack {
  width: 140rpx;
  height: 98rpx;
  float: right;
}

.ch-img,
.user-left {
  width: 46rpx;
  height: 46rpx;
  margin-top: 26rpx;
}

.ch-img {
  margin-left: 35rpx;
}

.red-img {
  width: 58rpx;
  height: 60rpx;
  margin-top: 20rpx;
  margin-left: 35rpx;
}

.addperson {
  background: #59A5F0;
  color: #FFFFFF;
  width: 680rpx;
  height: 82rpx;
  line-height: 82rpx;
  margin-top: 35rpx;
}

.complete {
  float: right;
  width: 142rpx;
  height: 75rpx;
  border: 0.026667rem solid #59A5F0;
  border-radius: 40rpx;
  line-height: 75rpx;
  text-align: center;
  color: #59A5F0;
  margin: 10rpx 35rpx 0 0;
}

.hid {
  display: none;
}

三、js页面代码如下：

Page({
     data:{
        addhidden:true,
       // aaa:false,
        modalhidden:true,
        tip:"../../images/check.png",
        ttp:"../../images/checked.png",
        mallhide:false,
        //退改签
        //rulehide:true,
         hide:true,
         activityhide:true,
         detail:true,
         //明细显示隐藏
         showtravel:true,
         hidetravel:false
       
   },
   //添加乘机人
   addp:function(e){
     this.setData({
       addhidden:false
     })
    
   },
    //开关函数
  switch1Change: function (e){
    //  console.log('switch1 发生 change 事件，携带值为', e.detail.value)
    if(e.detail.value==false){
        console.log("你没有选中");
       //显示模态框
        wx.showModal({
           title: '确定不享受保险保障吗？',
          // content: '',
          showCancel:true,
          cancelColor:"#59A5F0",
          confirmColor:"#59A5F0",
          success: function(res) {
              if (!res.confirm) {
              //console.log('用户点击确定')
              }
            }
       })
    }
  },
  
   // 遮罩层
 showMask:function(e){
    //  console.log(e)
     this.setData({
     modalhidden:false
     })
   },
   hiddenMask:function(e){
     this.setData({
     modalhidden:true
     })
   },
   //退改签规则
  //  showrule:function(e){
  //     this.setData({
  //    rulehide:false,
    
  //    })
  //  },
  //   hiderule:function(e){
  //    this.setData({
  //    rulehide:true,
    
       
  //    })
  //  },
  //  活动弹窗
  showactivity:function(e){
    console.log(e)
      this.setData({
      activityhide:false      
     })
  },
  // backshowactivity:function(e){
  //    this.setData({
  //     activityhide:false      
  //    })
  // },
  hideactivity:function(e){
      this.setData({
      activityhide:true
     })
  },

//价格明细底部弹窗
showdetail:function(e){
   this.setData({
     detail:false,
     showtravel:false,
     hidetravel:true
   })
},
  pricedetail:function(e){
     this.setData({
     detail:true,
     showtravel:true,
     hidetravel:false
   })
  },

//选择
app:function(e){
     console.log(e)
       this.setData({
          mallhide:true,
          hide:false,
          tip:"../../images/checked.png"
         })
    },
    appjs:function(e){
       this.setData({
           mallhide:false,
           hide:true,
          tip:"../../images/check.png"
         })
    },

    //表单验证
    formBindsubmit:function(e){
      // console.log(e.detail.value.userName.length)
      if(e.detail.value.userName.length==0){
        
          wx.showModal({
            title: '温馨提示',
            content: '姓名不能为空',
            showCancel:false,
            confirmColor:"#59A5F0"
        })
    }else if(e.detail.value.phone.length==0){
      
          wx.showModal({
            title: '温馨提示',
            content: '手机号不能为空',
            showCancel:false,
            confirmColor:"#59A5F0"
      
        })
    }else if(e.detail.value.phone.length!=11){
        wx.showModal({
            title: '温馨提示',
            content: "电话号码长度是11位",
            showCancel:false,
            confirmColor:"#59A5F0"
        
        })
    }else if(!(/^1[34578]d{9}$/.test(e.detail.value.phone))){ 
          console.log("手机号码有误，请重填")  
          wx.showModal({
            title: '温馨提示',
            content: '手机号码输入不正确',
            showCancel:false,
            confirmColor:"#59A5F0"
        })

      }else{
        wx.navigateTo({
          url: '../payment/payment'
       })
      }
      
    },
    addp:function(){
          wx.redirectTo({
          url: '../hotelDetails/hotelDetails',

    })
    }

})

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