wxml:
<!--pages/three-a/three-a.wxml-->
<!-- 座位状态 -->
<view class="rem">
<text class="title1"> {{area}}</text>
<text class="title2">区</text>
<text>
<text class="cuIcon-square lg size color1"></text>
<text>禁选</text>
</text>
<text>
<text class="cuIcon-square lg size color4"></text>
<text>未选</text>
</text>
<text>
<text class="cuIcon-squarecheckfill lg size color2"></text>
<text>已选</text>
</text>
<text>
<text class="cuIcon-squarecheckfill lg size color5"></text>
<text>自己选</text>
</text>
</view>
<button class="getB" bindtap="aa">点击查看座位情况</button>
<!-- class="cuIcon-square lg size3 color4" -->
<view class="for0" wx:for="{{floorquantity}}" wx:key="index" wx:for-index="i">
<view class="place">
<view wx:for="{{seatList}}" wx:key="seatId" wx:for-index="j">
<view class="table1">
<view wx:if="{{item.did==i+seatList[0].did&&j%2==0}}">
<view bindtap="getB" wx:if="{{seatList[j].dstatus==1}}" data-info="{{j}}" class="cuIcon-square lg size3 color4"></view>
<view bindtap="getB" wx:if="{{seatList[j].dstatus==9}}" data-info="{{j}}" class="cuIcon-squarecheckfill lg size3 color4"></view>
<view bindtap="getB" wx:if="{{seatList[j].dstatus==8}}" data-info="{{j}}" class="cuIcon-squarecheckfill lg size3 color5"></view>
<view bindtap="" wx:if="{{seatList[j].dstatus == 2}}" data-info="{{j}}" class="cuIcon-square lg size3 color1" ></view>
</view>
<view wx:if="{{item.did==i+seatList[0].did&&j%2==0}}">
<view bindtap="getB" wx:if="{{seatList[j+1].dstatus==1}}" data-info="{{j+1}}" class="cuIcon-square lg size3 color4" ></view>
<view bindtap="getB" wx:if="{{seatList[j+1].dstatus==9}}" data-info="{{j+1}}" class="cuIcon-squarecheckfill lg size3 color4"></view>
<view bindtap="getB" wx:if="{{seatList[j+1].dstatus==8}}" data-info="{{j+1}}" class="cuIcon-squarecheckfill lg size3 color5"></view>
<view bindtap="" wx:if="{{seatList[j+1].dstatus == 2}}" data-info="{{j+1}}" class="cuIcon-square lg size3 color1"></view>
</view>
<view wx:if="{{(j+1)%2==0&&(j+1)%4!=0&&item.did==i+seatList[0].did}}" bindtap="getB">
<view class="aa">
<view class="table"></view>
</view>
</view>
</view>
</view>
</view>
</view>
wxjs:
// pages/three-a/three-a.js
Page({
/**
* 页面的初始数据
*/
data: {
s:" ",
staTime:"",
stpTime:"",
dataTime:"",
floor:'',
area:'',
seatList: [],
BookingList:"",
bookingLists:"",
buseful:"",
floorquantity: 0,
remaining: 0,
i:0,
j:0,
time:0,
a_company:''
},
getB(e){
this.setData({
j:e.currentTarget.dataset.info
})
console.log("jjjjj",this.data.seatList[this.data.j].seatId);
var that=this;
wx.showModal({
content: '确定要预约'+that.data.dataTime+that.data.time+'时间段的'+(that.data.seatList[that.data.j].seatsId)+'吗?',
success: function (sm) {
if (sm.confirm) {
// let str1 = that.data.date1+" "+that.data.time1+":00";
// let str2 = that.data.date2+" "+that.data.time2+":00";
wx.request({
url: 'https://cyf.kuku26.top/booking-bean/bookingPeriodSeat',
method:'POST',
dataType:"json",
header:{
'content-type':'application/json;charset=utf-8',
'token' : getApp().globalData.token
},
data:{
b_end_time : that.data.stpTime,
b_start_time : that.data.staTime,
seatId : that.data.seatList[that.data.j].seatId,
// uId : '202008324103',
},
success:function(res){
console.log("t="+that.data.t)
console.log(res)
if(res.statusCode==200){
if(res.data.message=="预约成功"){
wx.showToast({
title: '预约成功!',
icon: '',
duration: 2000//持续的时间
})
that.setData({
t:1,
})
}
if(res.data.message=="查找的座位已被预约"){
wx.showToast({
title: '查找的座位已被预约',
icon: 'success',
duration: 2000//持续的时间
})
}
if(res.data.message=="已预约同时间段其他座位"){
wx.showToast({
title: '已预约同时间段其他座位',
icon: 'success',
duration: 2000//持续的时间
})
that.setData({
t:1,
})
}
}
console.log(that.data.t)
// console.log(that.data.place)
}
})
setTimeout(()=>{
that.getBooking()
setTimeout(()=>{
that.aa()
}, 100)
}, 100)
} else if (sm.cancel) {
console.log('用户点击取消')
}
}
})
},
getBooking(){
var that = this
wx.request({
url: 'https://cyf.kuku26.top/booking-bean/selectedBooking',
method:'POST',
dataType:"json",
header:{
'content-type':'application/json;charset=utf-8',
'token' : getApp().globalData.token
},
data:{
aname:that.data.area,
fnum: that.data.floor,
bstartTime: that.data.staTime
},
success:function(res){
that.setData({
bookingLists: res.data.data
})
// console.log("bookingLists=",that.data.bookingLists)
if(res.statusCode==200){
that.setData({
t:1,
})
}
// console.log(that.data.place)
}
})
},
getSeatList(){
var that = this
wx.request({
url: 'https://cyf.kuku26.top/seats-bean/selectedSeatState',
method:'POST',
dataType:"json",
header:{
'content-type':'application/json;charset=utf-8',
'token' : getApp().globalData.token
},
data:{
fid: that.data.floor,
aName: that.data.area
},
success:(res) => {
that.setData({
seatList: res.data.data,
floorquantity: parseInt(res.data.data.length/4),
remaining:res.data.data.length%4,
}),
console.log("seatList=",that.data.seatList)
console.log('a===',res)
if (that.data.remaining>0) {
that.setData({
floorquantity: that.data.floorquantity+1,
})
}
},
})
},
aa(){
var that = this
this.getBooking()
for(var i=0;i<that.data.seatList.length;i++){
for(var j=0;j<that.data.bookingLists.length;j++){
if(that.data.seatList[i].seatId==that.data.bookingLists[j].seatId){
if(that.data.bookingLists[j].buseful!=0){
if(that.data.bookingLists[j].uid!=that.data.uId){
that.setData({
['seatList[' + i + '].dstatus'] : 9
})
}else{
that.setData({
['seatList[' + i + '].dstatus'] : 8
})
}
}
}
}
}
console.log("seatList",that.data.seatList)
console.log("bookinList",that.data.bookingLists)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.setData({
floor:options.floor,
area:options.area,
time:options.time,
dataTime:options.dataTime,
staTime:options.dataTime+this.data.s+options.time.substring(0, 8),
stpTime:options.dataTime+this.data.s+options.time.substring(9, 17)
})
console.log("asdasd",this.data.area,this.data.s,this.data.floor)
this.getSeatList()
this.getBooking()
setTimeout(()=>
{
this.getBooking()
setTimeout(()=>{
this.aa()
}, 100)
}, 100)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
wxss
/* pages/three-a/three-a.wxss */
page{
background-color: rgb(255, 255, 255);
}
.size{
font-size: x-large;
text-align: center;
}
.title1{
font-size: x-large;
margin-right: 10rpx;
color: rgb(172, 168, 168);
}
.title2{
font-size: larger;
color: rgb(172, 168, 168);
}
.color1{
color: rgb(255, 125, 125);
margin-left: 100rpx;
}
.color4{
color: rgb(66, 255, 168);
margin-left: 50rpx
}
.color2{
color: rgb(66, 255, 168);
margin-left: 50rpx
}
.aa{
display: flex;
justify-content: center;
}
.place{
display: flex;
flex-wrap: wrap;
margin-left: 75rpx;
}
.size3{
display: flex;
font-size: 103rpx;
text-align: center;
/* margin: 25rpx; */
margin: 100rpx;
/*margin-bottom: 155rpx; */
margin-bottom: 50rpx;
}
.color3{
color: rgb(66, 255, 168);
}
.color5{
color: rgb(21, 195, 248);
}
.t-place{
margin-top: -8355rpx;
margin-bottom: 51rpx;
margin-left: 100rpx;
}
.table{
width: 544rpx;
height: 200rpx;
background-color: rgb(202, 203, 204);
font-size: x-large;
color: rgb(247, 245, 245);
display: flex;
justify-content: center;
}
.table1{
width: 544rpx;
font-size: x-large;
display: flex;
justify-content: center;
}
js部分还需上一级传值