ZhiHuiJiaoWu_UniApp/pages/market/clue/class_arrangement.vue

<template>
  <view class="class-arrange-root">
    <!-- 顶部日期选择 -->
    <view class="date-bar">
      <view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: idx === selectedDayIndex}">
        <view class="week">{{ item.week }}</view>
        <view class="day">{{ item.day }}</view>
      </view>
    </view>
    <!-- "查看更多"按钮移到日期条下方 -->
    <view class="more-bar-wrapper">
      <view class="more-bar" @click="openCalendar">
        <text>查看更多</text>
        <uni-icons type="arrowdown" size="18" color="#bdbdbd" />
      </view>
    </view>
    <!-- 日历底部弹窗 -->
    <uni-popup ref="calendarPopup" type="bottom">
      <uni-calendar @confirm="onCalendarConfirm" @close="closeCalendar" />
    </uni-popup>

    <!-- 课程卡片列表 -->
    <view class="course-list">
      <view class="course-card" v-for="(course, idx) in courseList" :key="idx">
        <view class="card-header">
          <view class="status-end">已结束</view>
        </view>
        <view class="card-body">
          <view class="row">时间：{{ course.date }}</view>
          <view class="row">教室：{{ course.classroom }}</view>
          <view class="row">课程：{{ course.name }}</view>
          <view class="row">人数：{{ course.count }}</view>
        </view>
        <view class="card-footer">
          <view class="sign-info">已签到学生 (0/{{ course.count }})</view>
          <button class="detail-btn" @click="viewDetail(course)">详情</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weekList: [
        { week: '星期一', day: 11 },
        { week: '星期二', day: 12 },
        { week: '星期三', day: 13 },
        { week: '星期四', day: 14 },
        { week: '星期五', day: 15 },
        { week: '星期六', day: 16 },
        { week: '星期日', day: 17 },
      ],
      selectedDayIndex: 4,
      courseList: [
        {
          date: '2025-06-15',
          classroom: '时间范围教室',
          name: '大课7+1类型',
          count: 10,
        },
        {
          date: '2025-06-15',
          classroom: '时间范围教室',
          name: '大课5+1',
          count: 10,
        },
      ],
    };
  },
  methods: {
    openCalendar() {
      this.$refs.calendarPopup.open();
    },
    closeCalendar() {
      this.$refs.calendarPopup.close();
    },
    viewDetail(course) {
      // 跳转到课程详情页
      this.$navigateTo({
        url: '/pages/market/clue/class_arrangement_detail?date=' + course.date
      });
    },
    onCalendarConfirm(e) {
      this.closeCalendar();
      // 这里可以处理选中的日期 e.fulldate
      uni.showToast({ title: '选择日期：' + e.fulldate, icon: 'none' });
    },
  },
};
</script>

<style lang="less" scoped>
.class-arrange-root {
  background: #232323;
  min-height: 100vh;
  padding-bottom: 30rpx;
}
.date-bar {
  display: flex;
  align-items: center;
  background: #232323;
  padding: 0 0 10rpx 0;
  overflow-x: auto;
  border-bottom: 1px solid #333;
  .date-item {
    flex: 1;
    text-align: center;
    color: #bdbdbd;
    padding: 16rpx 0 0 0;
    .week {
      font-size: 22rpx;
    }
    .day {
      font-size: 28rpx;
      margin-top: 4rpx;
    }
    &.active {
      color: #29d3b4;
      .day {
        border-radius: 50%;
        background: #333;
        color: #29d3b4;
        padding: 2rpx 10rpx;
      }
    }
  }
}
.more-bar-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10rpx 0 0 0;
}
.more-bar {
  display: flex;
  align-items: center;
  color: #bdbdbd;
  font-size: 22rpx;
  cursor: pointer;
  background: #333;
  border-radius: 20rpx;
  padding: 8rpx 24rpx;
}
.course-list {
  margin-top: 20rpx;
  .course-card {
    background: #434544;
    border-radius: 10rpx;
    margin: 0 0 20rpx 0;
    padding: 0 0 20rpx 0;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
    .card-header {
      display: flex;
      justify-content: flex-end;
      padding: 10rpx 20rpx 0 0;
      .status-end {
        background: #e95c6b;
        color: #fff;
        border-radius: 10rpx;
        padding: 4rpx 18rpx;
        font-size: 22rpx;
      }
    }
    .card-body {
      padding: 0 20rpx;
      .row {
        color: #fff;
        font-size: 24rpx;
        margin: 8rpx 0;
      }
    }
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
      .sign-info {
        color: #bdbdbd;
        font-size: 22rpx;
      }
      .detail-btn {
        background: transparent;
        border: 2rpx solid #ffd86b;
        color: #ffd86b;
        border-radius: 8rpx;
        padding: 6rpx 24rpx;
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }
  }
}
</style>