【小程序】电影院选座、篮球选择场次

感谢甲方使我成长￣へ￣

复制粘贴就能用
1、可以切换日期
2、红色为已被选择、绿色为选中
3、css布局有点小问题懒得改了

WXML：

<view class="choose_place"><scroll-view scroll-x class="day"><view class="choose_day {{data_change == index ? 'active_day' : ''}}" wx:for='{{chooseday}}' wx:for-item='days' wx:key='key' data-index="{{index}}" catchtap="change_data"><view class="weekday" wx:if="{{index==0}}">今天view><view class="weekday" wx:elif="{{index==1}}">明天view><view class="weekday" wx:elif="{{index==2}}">后天view><view wx:else class="weekday">{{weekday[index]}}view><view style="font-size:24rpx;line-height:15rpx">{{days}}view>view>scroll-view><view class="month">{{month}}月view>
view>
<view class="left_dad"><view class="left"><view class="left_tit"><view class="left_time">时间view><view class="left_place">场地view>view><block wx:for='{{block}}' wx:key='key'><view class="match_time">{{item}}view>block>view><view class="right"><scroll-view scroll-x class="right_scroll"><block wx:for='{{data}}' wx:key='key'><view class="place_box"><view class="place"><view style="font-size:20rpx;line-height:60rpx">{{item.title}}view><view style="font-size:18rpx;line-height:5rpx;">{{item.des}}view>view><block wx:for='{{item.block}}' wx:for-item='block' wx:key='key'><view wx:if="{{block == 0}}" class="place_money" style="background:#ffffff;border:2rpx solid #d5d5d5;" catchtap='choose_place' data-status="0" data-id="{{item.vc_id}}" data-decide="{{item.vc_id}}{{index}}" data-index="{{index}}">¥{{money.money}}view><view wx:elif="{{block == 1}}" class="place_money chooseed" catchtap='choose_place' data-status="1" data-id="{{item.vc_id}}" data-decide="{{item.vc_id}}{{index}}" data-index="{{index}}">view><view wx:elif="{{block == 2}}" class="place_money choose" catchtap='choose_place' data-status="2" data-id="{{item.vc_id}}" data-decide="{{item.vc_id}}{{index}}" data-index="{{index}}">view>block>view>block>scroll-view>view>
view>

<view class="chooseed_box" style="display:{{choosedArena.length == 0?'none':'block'}}"><view>已选择场地view><scroll-view scroll-x ><view wx:for="{{choosedArena}}" wx:key='key' class="choosed"><view>{{item.arena}}view><view>{{item.time}}view>view>scroll-view>
view>

WXSS：

page{color: black;background-color: rgb(245, 245, 245);font-size: 30rpx;
}
.choose_place{width: 100%;height: 110rpx;background-color: white;
}
.day{width: 655rpx;white-space: nowrap;display: inline-block;height: 110rpx;vertical-align: top;
}
.choose_day{display: inline-block;width: 70rpx;height: 70rpx;border-radius: 10rpx;margin-left: 35rpx;margin-top: 20rpx;color: #2D2D2D;text-align: center;
}
.weekday{font-size: 24rpx;line-height: 45rpx;
}
.active_day{background: #A2A2A2;color: white;
}
.month{display: inline-block;width: 95rpx;text-align: center;line-height: 110rpx;box-shadow: -15rpx 0rpx 10rpx -15rpx rgba(0,0,0,.5);
}
.left_dad{background-color: white;width: 100%;height: 100%;margin-top: 5rpx;
}
.left{width: 120rpx;display: inline-block;
}
.left_tit{font-size: 18rpx;position: relative;color: #2D2D2D;height: 90rpx;border-bottom: 1rpx solid #ECECEC;
}
.left_time{position: absolute;top: 10rpx;left: 20rpx;
}
.left_place{position: absolute;bottom: 10rpx;right: 20rpx;
}
.match_time{font-size: 16rpx;height: 65rpx;text-align: center;line-height: 70rpx;margin-bottom: 25rpx;margin-top: 10rpx;
}
.right{width: 615rpx;display: inline-block;vertical-align: top;padding-left: 3rpx;box-shadow: inset 15px 0px 10px -15px rgba(0,0,0,.2);background-color: #F5F5F5;
}
.right_scroll{width: 615rpx;white-space: nowrap;padding-bottom: 8rpx;
}
.place_box{display: inline-block;width: 140rpx;text-align: center;
}
.place{height: 90rpx;background: white;margin-bottom: 15rpx;box-shadow: 10px 11px 6px 0px rgba(7, 6, 6, 0.02);
}
.place_money{width: 115rpx;height: 60rpx;background: gray;color: white;border-radius: 8rpx;line-height: 56rpx;font-size: 20rpx;margin: 0rpx auto;margin-bottom: 25rpx;
}
.chooseed{background:#FF505B;border:2rpx solid #ff505b;
}
.choose{background-color: #00CF8E;border:2rpx solid #00CF8E;
}
/* 已选择场次 */
.chooseed_box{width: 635rpx;background-color: white;border-radius: 20rpx;margin: 30rpx auto;padding: 35rpx 30rpx 25rpx 35rpx;
}
scroll-view{white-space: nowrap;
}
.choosed{width: 170rpx;height: 95rpx;background-color: #F4F4F4;border-radius: 6rpx;font-size: 24rpx;padding: 15rpx 20rpx;margin-top: 20rpx;position: relative;display: inline-block;margin-right: 20rpx;
}

JS:

var t = getApp()
Page({data: {data:[{block:[1, 0, 0, 0, 0, 0],status: 0,title: "1号场地a",des: "地板",vc_id:0,},{block:[0, 1, 0, 0, 0, 0],status: 0,title: "1号场地b",des: "地板",vc_id:1,},{block:[0, 0, 0, 0, 0, 0],status: 0,title: "2号场地a",des: "地板",vc_id:2,},{block:[0, 0, 0, 0, 0, 0],status: 0,title: "2号场地b",des: "地板",vc_id:3,},{block:[0, 0, 0, 0, 0, 0],status: 0,title: "3号场地a",des: "地板",vc_id:4,},{block:[0, 0, 0, 1, 0, 0],status: 0,title: "3号场地b",des: "地板",vc_id:5,}],block:[ "09:00—11:00","11:00—13:00","13:00—15:00","15:00—17:00","17:00—19:00","19:00—21:00"],weekday: [],chooseday:[],data_change:0,choosedArena:[],month:'',fullDate:[],choosedDate:'',},onLoad: function (options) {var date = new Date()this.setData({month:date.getMonth()+1,})},onShow(){for (let i = 0; i < 7; i++) {this.getDateStr(null,i) }},// 获取未来open_date日期getDateStr: function(today, addDayCount) {var that=thisvar date;var chooseday = this.data.choosedayvar weekday = this.data.weekdayvar fullDate =this.data.fullDateif(today) {date = new Date(today);}else{date = new Date();}date.setDate(date.getDate() + addDayCount);var y = date.getFullYear();var m = date.getMonth() + 1;//获取当前月份的日期 var d = date.getDate();if(m < 10){m = '0' + m;};if(d < 10) {d = '0' + d;};chooseday.push(d)fullDate.push(y + "-" + m + "-" + d)switch (new Date(y + "-" + m + "-" + d).getDay()){case 0:weekday.push("周日");break;case 1:weekday.push("周一");break;case 2:weekday.push("周二");break;case 3:weekday.push("周三");break;case 4:weekday.push("周四");break;case 5:weekday.push("周五");break;case 6:weekday.push("周六");}   that.setData({chooseday:chooseday,weekday:weekday,})},// 切换日期// 切换日期应该重新加载this.data.data// 这里没有写change_data:function(e){this.setData({data_change:e.currentTarget.dataset.index,choosedArena:[],month:this.data.fullDate[e.currentTarget.dataset.index].split('-')[1],})},// 选择场次choose_place:function(e){var data = this.data.datavar choosedArena = this.data.choosedArenavar block = this.data.blockif (e.currentTarget.dataset.status == 1) {wx.showToast({title: '该场次无法选择',icon:'none',mask:true})}if (e.currentTarget.dataset.status == 0) {for (let i = 0; i < data.length; i++) {if (e.currentTarget.dataset.id == data[i].vc_id) {for (let j = 0; j < data[i].block.length; j++) {data[i].block[e.currentTarget.dataset.index] = 2}var choosed = {}choosed.arena = data[i].titlechoosed.time = block[e.currentTarget.dataset.index]choosedArena.push(choosed)}}}if (e.currentTarget.dataset.status == 2) {for (let i = 0; i < data.length; i++) {if (e.currentTarget.dataset.id == data[i].vc_id) {for (let j = 0; j < data[i].block.length; j++) {data[i].block[e.currentTarget.dataset.index] = 0}for (let z = 0; z < choosedArena.length; z++) {if (choosedArena[z].arena == data[i].title && choosedArena[z].time == block[e.currentTarget.dataset.index]) {choosedArena.splice(z,1)}}}}}this.setData({data:data,choosedArena:choosedArena,})},
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！