<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>
uniapp点击切换,动态添加类名
于 2023-12-26 15:22:00 首次发布