小程序实现电影院选座问题

首先数据库建立

 

 

 

 

 

 

 电影票关联影厅，座位同样关联影厅。

使电影票：影厅：座位信息成为1：1：n

根据电影票获取影厅

 

 

根据获取影厅的id获取影厅对应的座位信息（因为数据超过20条，所以使用云函数来获取）

 

 云函数：

 

 

 

获取到座位信息输出到wxml页面上

 

 wxss为

.paizuo{   width: 95%;   display: flex;   flex-wrap: wrap;   margin-left: 2.5%; } .zuowei{   margin-left:5rpx;   display: flex;   margin-top: 20rpx;   display: flex;   width: 16%;   height: 40rpx;   text-align: center; } .xuan{ margin-left:30%; width: 40rpx; height: 40rpx; background-color: chartreuse; } .wei{ margin-left:30%; width: 40rpx; height: 40rpx; border: cadetblue solid 1rpx; } 点击改变座位信息：    // 点击改变座位状态   xinxi(e){     console.log(e.currentTarget.dataset.id)     let id = e.currentTarget.dataset.id     sum=sum+1     console.log(sum)     if (sum%2==0) {       db.collection('seat').doc(id).update({         data:{           xuan:false         }       })       this.getHall()//为了刷新页面       this.setData({         xinxiList:''       })     }else{     db.collection('seat').doc(id).get()     .then(res=>{       console.log(res.data)       this.setData({         xinxiList:res.data       })     })     db.collection('seat').doc(id).update({       data:{         xuan:true       }     })     this.getHall()//为了刷新页面   }   },