seventeen小程序影院选座

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

首先数据库建立

 

 

 

 

 

 

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

使电影票：影厅：座位信息成为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()//为了刷新页面

  }

  },