简易影城购票系统的实现

最新推荐文章于 2021-06-07 10:18:35 发布

霸虎

最新推荐文章于 2021-06-07 10:18:35 发布

阅读量361

点赞数 1

分类专栏：笔记文章标签：小程序

本文链接：https://blog.csdn.net/qq_31800209/article/details/108625320

版权

笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

简易影城购票系统的实现

效果如下图显示：
票务系统
代码如下，具体流程如代码，其实是一边做一边发现需求的，比想象中用了更久的时间，然后是forEach的跳出循环的话，我使用了return false，发现效果不是特别好，之后使用了抛出一个错误，然后捕获。
代码如下


try {
  arr.forEach((item,index) => {
    if(item === 'b') throw new Error('exist')
    console.log(item)
  })
} catch (e) {
  if(e.message=='exist') throw e
} finally {
  console.log('done')

言归正传，下面是js全部代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
     //用于控制隐藏元素显示和初次验证是否选座
        buff:true,
        //页面列表渲染
        list:[],
        //用于设置可选座位class设置
        mainindex:['','','',''],
        //用于初次渲染input取票
        quvalue:'',
         //用于初次渲染input手机号
        svalue:'',
        //用于清除初次渲染取票
        quvalue1:'',
          //用于清除初次渲染手机号
        svalue1:''
  },
  chu(e){
    //初次取票渲染
     this.setData({
      quvalue:e.detail.value,
      quvalue1:e.detail.value,
     })
    
  },
  chu1(e){
    //初次手机号渲染
    this.setData({
      svalue:e.detail.value,
      svalue1:e.detail.value,
     })
  },
  cha(e){
    //将取票信息添加进list之中，用于做验证
    let {list}=this.data
   let kk=e.currentTarget.dataset.kk
    list.forEach((item,index)=>{
      if(kk.sed==item.sed){
        item.quvalue=e.detail.value
      }
    })
    this.setData({list})
   
  },
  cha1(e){
      //将手机号信息添加进list之中，用于做验证
    let {list}=this.data
   let kk=e.currentTarget.dataset.kk
   list.forEach((item,index)=>{
    if(kk.sed==item.sed){
      item.svalue=e.detail.value
    }
  })
   this.setData({list})
  },
  submit(e){
    let {buff,list}=this.data;
   //选座验证
    if(buff){
      wx.showToast({
        title: '您还未选择座位',
        icon:'none'
      })
    }else{  
      //用于控制所有的验证
      let gh=true;
      //用于取票人姓名重复验证
      let ullist=[];
       //用于手机号重复验证
      let illist=[];
      //验证
      try{list.forEach((item,index)=>{
        //不为空验证
         if(!item.quvalue){
          wx.showToast({
            title:'请输入'+item.fir+'排'+item.sed+'座'+'取票人的姓名',
            icon:'none'
          })
          gh=false;
          //用于跳出循环
          throw new Error("EndIterative");
         } 
         //姓名重复验证
          if(ullist.indexOf(item.quvalue)!=-1){
            wx.showToast({
              title:'您填写的取票人有重复',
              icon:'none'
            })
            gh=false;
            throw new Error("EndIterative");
          }else{
            ullist.push(item.quvalue)  
          }
          //手机号格式验证
         if(!/^1[3456789]\d{9}/.test(item.svalue)){
          wx.showToast({
            title:item.fir+'排'+item.sed+'座'+'手机格式错误',
            icon:'none'
          })
          gh=false;
          throw new Error("EndIterative");
         }
         //手机号重复验证
         if(illist.indexOf(item.svalue)!=-1){
          wx.showToast({
            title:'您填写的手机号有重复',
            icon:'none'
          })
          gh=false;
          throw new Error("EndIterative");
        }else{
          illist.push(item.svalue)
        }
        })}
      catch(e){
        //获取错误
          if(e.message!="EndIterative") throw e;
      };
      //如果所有的条件符合，则是提交成功
        if(gh)
        wx.showToast({
          title:'提交订单成功',
          icon:'none'
        })
    }
   
    
  },
  chang(e){
    //获取页面传过来的数据
   let set=e.currentTarget.dataset.set;
   let set1=set.split('#')[1]
  let  set2=set.split('#')[0]
  //初次点击添加数据
  if(this.data.list.length==0){
    let list= this.data.list;
    list.push({fir:set[0],sed:set1,'quvalue':this.data.quvalue,'svalue':this.data.svalue})
     this.setData({
       list
     })
  }
  else{
    //获取list里面的sed数据，进行判断是否重复添加
   let list2=this.data.list.map((item,index)=>{
      return item.sed
    })
    
   if(list2.indexOf(set1)=='-1'){
    this.data.list.push({fir:set2,sed:set1,'quvalue':'','svalue':''})
    
   }else{
     let index=list2.indexOf(set1)
    this.data.list.splice(index,1)
   }

  }
   //进行list排序，从小到大排序
    this.data.list.sort(
      function(a,b){
        return a.sed-b.sed
      }
    )
    //当有数据，设置buff的开关，控制暂无数据等的显示
   if(this.data.list.length){
    this.setData({buff:false})
   }else{
      this.setData({buff:true})
   }
   let list1=this.data.list;
   this.setData({list:list1})
   //清除最初次的input的value
   if(this.data.list.length==0){
    this.setData({
      quvalue1:'',
      svalue1:''
     })
   }
   
   //页面的背景控制
  let inde=e.currentTarget.dataset.ss;
      if( this.data.mainindex[inde-1]!=inde){
        this.data.mainindex.splice(inde-1,1,inde)    
      }
      else{ 
         this.data.mainindex.splice(inde-1,1,'') 
      }
    let mainde=this.data.mainindex;
    this.setData({mainindex:mainde})

  },

html代码如下


<view class="ss"> 
<view class="bla">已选订单</view>
     <view class="kaix">
        <view class="zan" hidden='{{!buff}}'>暂未选择数据</view>
         <view  hidden='{{buff}}' wx:for='{{list}}' wx:key='index' class="sd">
         <view >{{item.fir}}排{{item.sed}}座</view>
         </view>
     </view>
     <view class="bla">可选座位</view>
     <view class="xuan">
         <view data-set="2#1" bindtap="chang" class="{{mainindex[0]==1?'blue':''}}" data-ss='1'>2排1座 </view>
         <view data-set="2#2" bindtap="chang" class="{{mainindex[1]==2?'blue':''}}" data-ss='2'>2排2座</view>
         <view data-set="2#3" bindtap="chang" class="{{mainindex[2]==3?'blue':''}}" data-ss='3'>2排3座</view>
         <view data-set="2#4" bindtap="chang" class="{{mainindex[3]==4?'blue':''}}" data-ss='4'>2排4座</view>
     </view>
     <form  bindsubmit='submit'>  
     <view class="bla">个人信息</view>
       <view class="inpu" hidden="{{!buff}}">
       <view class="dd" >
       <view >
           <text>取票人</text><input bindinput="chu" value="{{quvalue1}}"></input>
       </view>
       <view>
           <text>手机号</text><input bindinput="chu1" value="{{svalue1}}"></input>
       </view>
       </view>
         <view  class="ds"></view>
       </view>
     <view class="inpu" hidden="{{buff}}" wx:for='{{list}}' wx:key='index'>
       <view class="dd" >
       <view >
           <text>取票人</text><input bindinput="cha" data-kk="{{item}}" value="{{item.quvalue}}"></input>
       </view>
       <view>
           <text>手机号</text><input bindinput="cha1" data-kk="{{item}}" value="{{item.svalue}}"></input>
       </view>
       </view>
         <view  class="ds">{{item.fir}}排{{item.sed}}座 </view>
       </view>
       <button form-type='submit'>提交订单</button>
     </form>
     </view>

css代码如下

/* pages/wu/wu.wxss */
.ss{
  padding-bottom: 180rpx;
}
.kaix{
  width:95%;
  height: 100rpx;
  margin: auto;
  display: flex;
  justify-content: start;
}
.sd{
  width:20%;
  height: 100rpx;
  margin: 13rpx 20rpx;
  border: dotted 1px slateblue;
  border-radius: 12rpx;
  text-indent: center;
  line-height: 100rpx;
}
.zan{
  width: 250rpx;
  height: 100rpx;
  border: blueviolet 1px solid;
  border-radius: 12rpx;
  line-height: 100rpx;
  text-align: center;
}
.blue{
  background-color: blue;
}
.bla{
  font-weight: bold;
  margin: 12rpx 0 12rpx 30rpx;
  padding-left: 12rpx;
  border-left:3px black solid;
}
.xuan{
  display: flex;
  justify-content: space-around;
  padding: 12rpx;
}
.xuan view{
   width: 150rpx;
   height: 150rpx;
   border: 1px slateblue solid;
   border-radius: 12rpx;
   line-height: 150rpx;
   text-align: center;
}
.inpu{
  width: 93%;
  height: 180rpx;
  border: 1rpx dotted black;
  border-radius: 12rpx;
  margin: 20rpx auto 0;
  text-indent: 12rpx;
  display:flex;
  justify-content: space-between;
}
.inpu input{
  border: 1px black solid;
  width: 75%;
}
 .dd{
   padding: 15rpx;
  width: 93%;
}
.ds{
  width: 5%;
  padding: 12rpx;
  font-size: 30rpx;
  text-align: center;
}
.dd view{
 display: flex;
 justify-content: space-between;
 margin: 12rpx 0;
}
button{
   background-color: blueviolet;
  position: fixed;
  bottom: 0;
  left: 175rpx;
}

献丑了，大概就是这样的，没毛病，哈哈哈，可以参考参考

霸虎

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
简易影城购票系统的实现

票务简易系统的实现效果如下图显示：代码如下，具体流程如代码，其实是一边做一边发现需求的，比想象中用了更久的时间，然后是forEach的跳出循环的话，我使用了return false，发现效果不是特别好，之后使用了抛出一个错误，然后捕获。代码如下try { arr.forEach((item,index) => { if(item === 'b') throw new Error('exist') console.log(item) })} catch (e) {
复制链接

扫一扫