zhxy-jzd/src/pages/base/class-schedule/index.vue

<template>
  <view class="schedule-page">
    <view class="week-selector" @click="openWeekPicker">
      <text>{{ curZc.mc }}</text>
      <uni-icons type="right" size="16" color="#fff"></uni-icons>
    </view>

    <view class="date-tabs">
      <view
        v-for="(day, index) in rqList"
        :key="index"
        :class="['date-tab-item', { active: curRqIndex === index }]"
        @click="selectDay(index)"
      >
        <text class="weekday">{{ day.zjmc }}</text>
        <text class="date">{{ day.rqmc }}</text>
      </view>
    </view>
	
    <view class="schedule-body">
      <view
        v-for="(sj, index) in sjList"
        :key="index"
        class="schedule-row"
      >
        <view class="time-slot">
          <text class="slot-name">{{ sj.mc }}</text>
          <text class="slot-time">{{ sj.kssj }}-{{ sj.jssj }}</text>
        </view>

        <view class="course-container">
          <template v-if="sj.pkkbList && sj.pkkbList.length > 0">
            <view
              v-for="(pkkb, pkkbIndex) in sj.pkkbList"
              :key="pkkbIndex"
              :class="['course-card', getCourseColorClass(pkkb.pkName)]"
            >
              <text class="course-subject">{{ pkkb.pkName }}</text>
              <text class="course-class">{{ pkkb.jsName }}</text>
            </view>
          </template>
          <view v-else class="empty-course">
            <text class="empty-text">暂无课程</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="isLoading" class="loading-overlay">
      <text>加载中...</text>
    </view>

    <!-- 周选择弹窗 -->
    <uni-popup ref="weekPopup" type="bottom" @change="popupChange">
      <view class="week-picker-popup">
        <view class="popup-header">
          <text class="title">选择周</text>
        </view>
        <view class="week-list">
          <scroll-view
            scroll-y
            style="max-height: 60vh"
            :scroll-top="targetScrollTop"
          >
            <view
              v-for="(zc, index) in zcList"
              :key="index"
              :class="[
                'week-item',
                { active: zc.djz === curZc.djz },
              ]"
              @click="selectWeek(zc)"
            >
              <text>{{ zc.mc }}</text>
              <text v-if="zc.djz === curZc.djz" class="current-tag">当前周</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, nextTick } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import weekOfYear from "dayjs/plugin/weekOfYear";
import isoWeek from "dayjs/plugin/isoWeek";
import { dqpkApi, drpkkbApi } from "@/api/base/server";
import * as DataConfig from "data.config";
import { useUserStore } from "@/store/modules/user";
const { getCurXs } = useUserStore();

dayjs.locale("zh-cn");
dayjs.extend(weekOfYear);
dayjs.extend(isoWeek);

let xqId = '';

// 记录当前周次编号
const curZcNum = ref(dayjs().isoWeek());
// 当前周次
const curZc = ref<any>({});
// 当前日期序号
const curRqIndex = ref(0)
// 周次列表
const zcList = ref<any>([])
// 日期列表
const rqList = ref<any>([])
// 时间列表
const sjList = ref<any>([])

const isLoading = ref(false);

// 周选择相关
const showWeekPicker = ref(false);
const weekPopup = ref<any>(null);

const selectedWeekNumber = ref(0);
const targetScrollTop = ref(0); // 新增：用于绑定 scroll-top


// 打开周选择弹窗
const openWeekPicker = async () => {
  showWeekPicker.value = true;
  // 打开弹窗
  await nextTick();
  if (weekPopup.value) {
    weekPopup.value.open("bottom");
  } else {
    console.error("Week popup ref is not available.");
  }
}

// 关闭周选择弹窗
const closeWeekPicker = () => {
  if (weekPopup.value) {
    weekPopup.value.close();
  }
};

// 弹窗状态变化
const popupChange = (e: { show: boolean }) => {
  if (!e.show) {
    showWeekPicker.value = false;
  }
};

// 选择周
const selectWeek = (zc: any) => {
  if (zc.djz === curZc.value.djz) {
    // 如果点击的是当前已选中的周，则只关闭弹窗
    closeWeekPicker();
    return;
  }
  // 复制
  Object.assign(curZc.value, zc);
  Object.assign(rqList.value, curZc.value.drList);

  // 关闭弹窗
  closeWeekPicker();
  
  // 选中第一天
  selectDay(0);
};

// 选择日期
const selectDay = (index: number) => {
  curRqIndex.value = index;
  
  drpkkbApi({
	  bjId: getCurXs.bjId,
	  xqId: xqId,
	  rq: rqList.value[index].rq
  }).then(res => {
    // 根据接口返回的result判断是否已报名
    if (res && res.resultCode === 1) {
		sjList.value = res.result;
    } else {
      // 接口调用成功但返回错误
      console.warn("检查报名状态接口返回错误:", res);
    }
  })
  .catch((error) => {
	// 接口调用失败
	console.error("调用检查报名状态接口失败:", error);
  });
  
  
};

// 判断课程颜色
const getCourseColorClass = (subject: string | undefined): string => {
  if (!subject) return "";
  if (subject.includes("语文")) return "color-lang";
  if (subject.includes("体育")) return "color-phys";
  if (subject.includes("数学")) return "color-math";
  return "color-other";
};

onMounted(async () => {
  // Make onMounted async
  dqpkApi().then(res => {
    // 根据接口返回的result判断是否已报名
    if (res && res.resultCode === 1) {
	  xqId = res.result.pksz.xqId;
      zcList.value = res.result.zcList;
	  sjList.value = res.result.sjList;
      // 获取当前周次作为默认周次
	  selectWeek(zcList.value.find((zc: any) => zc.djz === curZcNum.value));
    } else {
      // 接口调用成功但返回错误
      console.warn("检查获取当前学期课表周次相关信息接口返回错误:", res);
    }
  })
  .catch((error) => {
	// 接口调用失败
	console.error("调用获取当前学期课表周次相关信息接口失败:", error);
  });
});
</script>

<style scoped lang="scss">
.schedule-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.week-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #4477ee;
  color: #ffffff;
  font-size: 15px;
}

.date-tabs {
  display: flex;
  background-color: #4477ee;
  padding: 10px 15px 15px 15px;
  gap: 10px;

  .date-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 5px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    flex: 1;
    min-width: 50px;
    cursor: pointer;
    transition: background-color 0.2s ease;

    .weekday {
      font-size: 13px;
      opacity: 0.9;
    }

    .date {
      font-size: 14px;
      font-weight: 500;
      margin-top: 2px;
    }

    &.active {
      background-color: #ffffff;
      color: #4477ee;

      .weekday {
        opacity: 1;
      }
    }
  }
}

.schedule-body {
  flex: 1;
  overflow-y: auto;
  background-color: #ffffff;
  margin: 15px;
  border-radius: 8px;
  padding: 10px;
}

.schedule-row {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
}

.time-slot {
  width: 75px;
  min-width: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f9fafb;
  border-radius: 6px;
  padding: 8px 0;

  .slot-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  .slot-time {
    font-size: 11px;
    color: #999;
    margin-top: 3px;
  }
}

.course-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
  gap: 8px;
}

.course-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 8px 12px;
  min-width: 120px;
  text-align: center;
  color: #333;

  .course-subject {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
  }

  .course-class {
    font-size: 11px;
    color: #666;
  }

  &.color-lang {
    background-color: #ffebee;
    border-left: 3px solid #f44336;
  }
  &.color-phys {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
  }
  &.color-math {
    background-color: #e8f5e9;
    border-left: 3px solid #4caf50;
  }
  &.color-other {
    background-color: #f5f5f5;
    border-left: 3px solid #9e9e9e;
  }
}

.empty-course {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: 6px;
  min-height: 60px;

  .empty-text {
    color: #999;
    font-size: 13px;
  }
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  color: #333;
  font-size: 16px;
}

/* 周选择弹窗样式 */
.week-picker-popup {
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  padding-bottom: 20px;

  .popup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .week-list {
    padding: 10px 0;

    .week-item {
      height: 53.5px; // 设置固定高度
      display: flex;
      justify-content: space-between;
      align-items: center; // 确保垂直居中
      padding: 0 15px; // 调整 padding 以适应固定高度，移除上下 padding
      border-bottom: 1px solid #f5f5f5;
      box-sizing: border-box;

      &.active {
        background-color: #f0f7ff;
        color: #4477ee;
      }

      .current-tag {
        font-size: 12px;
        color: #fff;
        background-color: #4477ee;
        padding: 2px 6px;
        border-radius: 10px;
        white-space: nowrap; // 防止标签换行
      }
    }
  }
}

/* 年级班级选择器样式 - 调整为单个选择器 */
.class-selector {
  display: flex;
  justify-content: center; // 居中显示
  align-items: center;
  padding: 10px 15px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;

  .picker-item {
    display: flex;
    align-items: center;
    padding: 5px 15px; // 稍微调整padding
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    min-width: 150px; // 给个最小宽度
    justify-content: space-between; // 让文字和图标分开

    text {
      margin-right: 8px;
    }
  }
}
</style>