uniapp点击切换，动态添加类名

<template>
	<view class="main">
		
		<view class="team_info session ">
			<view class="tit">
				选择预约场次
			</view>
			<view class="week">
				<u-row gutter="10">
					<u-col span="2" v-for="(item,index) in timeData" :key="index">
						<view class="flex_row flex_center item " :class="initTimeIndex==index?'checked':''"
							@click="checkDate(index)">
							<view class="we">
								{{dateConver(item)}}
							</view>
							<view class="date">
								{{item.slice(5)}}
							</view>
						</view>
					</u-col>

				</u-row>
			</view>
			</view>
	
		
	</view>
</template>

<script>
	export default {

		data() {
			return {
				selectedIndex: 2,
				tabbarList: '',
				numval: 1,
				type: 1, //1:团队，2：专业人员
				timeData: [],
				initTimeIndex: 0
			}
		},
		onLoad() {
			this.tabbarList = uni.getStorageSync('tabbarList')
			this.getAppointmentTime()
		},

		onShow() {
			uni.hideTabBar({
				success: () => {
					//⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
					uni.hideTabBar({
						animation: false
					})
				},
				fail: () => {
					// 捕获报错，防止没有tabbar页面调用后控制台报错
				}
			});
		},
		methods: {
			getAppointmentTime() {
				this.$api.getAppointmentTime().then(res => {
					if (res.code == 0) {
						let data = res.data

						this.timeData = data
					}
					console.log(res, this.timeData, '可預約時間')
				})
			},
			// 日期格式转换 2023-12-25转为周一
			dateConver(day) {
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				const date = new Date(day)
				this.dayOfWeek = weekdays[date.getDay()]
				return this.dayOfWeek
			},
			// 选中 日期
			checkDate(ind) {
				this.initTimeIndex = ind
			}
		}
	}
</script>

<style lang="scss">
	.main {
		height: 100%;
		width: 100%;
		background-color: #f6f6f6;
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: calc(var(--window-bottom) + 50px);
	}

	

	.session {
		margin-top: 30rpx;
		padding: 30rpx 20rpx;

		.week,
		.time {

			padding-top: 70rpx;
			overflow: scroll;

			.item {
				background-color: #fff;
				border: 1px dashed #d2d2d2;
				color: #666;
				font-size: 24rpx;
				height: 90rpx;
				margin-bottom: 30rpx;

			}

			.checked {
				background: linear-gradient(90deg, #29B183 0%, #286EB3 100%);
				color: #fff;
			}

			.outweek {
				background-color: #ededed;
			}
		}

		.date_it {
			flex-wrap: wrap;
		}
	}

	.regulaion {
		margin-top: 30rpx;
		padding: 30rpx 20rpx;
		background-color: #fff;

		.re_tip {
			height: 100%;

			img {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.regu_info {
			background-color: #fff;
			border: 1px dashed #FA6319FF;
			color: #FA6319FF;
			padding: 30rpx 30rpx;
			display: flex;

			.info {
				margin-left: 15rpx;
			}
		}


	}

	.submit {
		margin: 40rpx 0;
	}
</style>