小程序实现课程表（动态生成）(附代码)

最新推荐文章于 2024-06-19 22:28:15 发布

世界线旳观察者

最新推荐文章于 2024-06-19 22:28:15 发布

阅读量938

点赞数 1

文章标签：小程序前端 javascript typescript 微信小程序

本文链接：https://blog.csdn.net/m0_63361829/article/details/134839514

版权

效果：

实现功能：

1.根据后端数据动态生成课程表

2.可以依据开学第几周任意切换课程表

3.可以识别用户点击了哪个课程，并调用函数进行自定义操作

实现思路：

一.定义数据类型

startDate：string,//开学日期，例：2023-09-04

nowWeeks：string,//当前是开学第几周，默认显示该周课程

curriculum_msg：{//一节课程必须的属性（可以按照您的需求扩充）

day:string,//星期几上课

name:string,//课程名

teacher:string,//教师名

week:string,//第几周上课，例："9"

time:string,//第几节上下课，例:"1-3"

location:string,//上课地点

}

二.实现思路

第一行从左到右分别显示：

第几节课，星期1，星期2，星期3，星期4，星期5，星期6，星期7，一共有8格

第一列从上到下显示第几节课，1-11节，一共有11格

对第一行与第一列之外的所有各自进行遍历，如果该格有课程存在，则改变其前端样式

代码如下：

<!--课程表头顶一行，显示周几与日期-->
<view wx:for="一二三四五六天" wx:key="index" class="day">周{{item}}
<view class="precise">{{precise[index]}}</view>
</view>
</view>
<!--课程表，双层循环生成-->
<view wx:for="{{11}}" wx:key="index" class="cur_mid">
  <view class="cur_left2">{{index+1}}</view>
  <view wx:for="一二三四五六七" wx:key="data" wx:for-item="day" wx:for-index="index2" 
  class="piece"
  style="background-color: {{curriculum[day][index+1].background_color || 'white'}};border-radius: {{curriculum[day][index+1].border_radius || '0 0 0 0'}};z-index:{{curriculum[day][index+1].text?1:0}}" 
  catchtap="_goTo"
  data-id="{{curriculum[day][index+1].id}}"
  >{{curriculum[day][index+1].text || ""}}</view>
</view>

可以看到，更改签到样式的核心代码在第二重循环的view中的style里：

style="background-color: {{curriculum[day][index+1].background_color || 'white'}};border-radius: {{curriculum[day][index+1].border_radius || '0 0 0 0'}};z-index:{{curriculum[day][index+1].text?1:0}}"

就是更改background-color，border-radius，z-index这三个属性而已

而curriculum则需要我们在逻辑层通过课程数据生成：


/**
   * @function 根据课程信息，更改前端课程表
   * @param {*curriculum_msg} 课程信息
   */
  _showCurriculums(nowWeeks, curriculum_msg) {
    //1检查这一周有没有这节课
    //2更改curriculum里对应前端信息
    let c_temp = curriculum_msg;
    let c_exist = [];
    //遍历所有课程信息
    c_temp.forEach(element => {
      //数据筛选1：有关键信息week,day,time才进行下一步操作
      if(element.week&&element.day&&element.time){
        //数据筛选2：该课程的上课周就是当前查看的周数
        if (element.week== nowWeeks) {
          c_exist.push(element);
        }
      }
    });
    let colors = this.data.colors;
    let new_curriculu = {
      "一": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "二": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "三": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "四": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "五": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "六": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "七": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
    };
    //遍历上一步筛选后的数据
    c_exist.forEach((item, index) => {
      let start = parseInt(item.time.split('-')[0]);
      let end = parseInt(item.time.split('-')[1]);
      //给课程上颜色
      for (let i = start; i <= end; i++) {
        new_curriculu[item.day][i].background_color = colors[index];
        new_curriculu[item.day][i].id=item.sr_id;
      }
      //上弧形边角
      new_curriculu[item.day][start].border_radius = "15rpx 15rpx 0 0";
      new_curriculu[item.day][end].border_radius = "0 0 15rpx 15rpx";
      if(start==end)
      new_curriculu[item.day][start].border_radius= "15rpx";
      //上文字
      new_curriculu[item.day][start].text = item.name + "@" + item.location;
    });
    //给前端赋值
    this.setData({
      curriculum: new_curriculu,
    });
  },
colors: [
      "#AEEC34",
      "#FFC44F",
      "#85B0FD",
      "#FEA17C",
      "#FF9392",
      "#D48DF9",
      "#7FCFF8",
      "#85B8CF",
      "#90C652",
      "#D8AA5A",
      "#FC9F9D",
      "#0A9A84",
      "#61BC69",
      "#12AEF3",
      "#E29AAD"],

对于课程表第一行周几下面的日期，通过另一个函数生成：

  /**
   * @function 根据输入的日期和过去的周数，获取并返回对应周的日期范围（从周一到周日）,即显示在课程表第一层的日期
   * @param {*startDate} 开始时间
   * @param {*nowWeeks} 第几周
   */
  _getPreciseDates(startDate, nowWeeks) {
    const oneDay = 24 * 60 * 60 * 1000; // 毫秒
    const mondayDate = new Date(this._getMondayDate(startDate)); // 找到开始日期的周一的日期
    mondayDate.setDate(mondayDate.getDate() + (7 * (nowWeeks - 1))); // 根据过去的周数计算所需周的周一日期
    const weekDates = [];
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(mondayDate.getTime() + i * oneDay);
      const month = currentDate.getMonth() + 1;
      const day = currentDate.getDate();
      weekDates.push(`${month}/${day}`);
    }
    this.setData({
      precise: weekDates,
    })
    return weekDates;
  },

三.可执行代码：

.js文件

//interface Course { name: string, time: string, location: string, teacher: string, weeks: string, day: string ,id:number,note:string,signDetail:signDetail,sr_id:number,type:string,week:number}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array_weeks: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周', '第8周','第9周', '第10周','第11周', '第12周', '第13周', '第14周', '第15周', '第16周', '第17周', '第18周',],
    startDate: "",
    nowWeeks: 1 ,
    sign_valid:true,
    curriculum_msg: [],
    precise: ['2/26', '2/27', '2/28', '2/29', '2/30', '3/1', '3/2'],//储存周几下面显示的精确日期
    curriculum: {
      "一": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "二": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "三": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "四": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "五": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "六": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "七": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
    },//课程表前端内容
    colors: [
      "#AEEC34",
      "#FFC44F",
      "#85B0FD",
      "#FEA17C",
      "#FF9392",
      "#D48DF9",
      "#7FCFF8",
      "#85B8CF",
      "#90C652",
      "#D8AA5A",
      "#FC9F9D",
      "#0A9A84",
      "#61BC69",
      "#12AEF3",
      "#E29AAD"],
  },
  /**
  * @function 跳转到对应的课程签到
  * @param {*e} 
  */
  async _goTo(e){
    //点击触发
  },
  /**
  * @function 根据学期开始日期判断今天属于哪一周
  * @param {*startDate} 学期开始日期
  */
  _getWeekNumber(startDate){
    const today = new Date(); // 获取当前日期
    const inputDate = new Date(startDate);
    if (today > inputDate) {
      const timeDiff = Math.abs(today.getTime() - inputDate.getTime());
      const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)); // 计算日期差
      if (daysDiff >= 18) {
        return 18;
      } else {
        const groupNumber = Math.ceil(daysDiff / 7);
        return groupNumber;
      }
    } else {
      this.setData({
        sign_valid:false,
      })
      return 1;
    }
  },

  switchWeek(e) {
    let index = parseInt(e.detail.value);
    this.setData({
      nowWeeks: index + 1,
    });
    this._getSchFromWeek(index + 1);
  },
  /**
   * @function 计算显示这一周的什么课程
   * @param {*nowWeeks} 显示该学期第几周的课表
   */
  _getSchFromWeek(nowWeeks) {
    //计算日期
    this._getPreciseDates(this.data.startDate, nowWeeks);
    //console.log('nowWeeks=',nowWeeks);
    this._showCurriculums(nowWeeks, this.data.curriculum_msg);
  },
  /**
   * @function 返回输入日期的周一的日期
   * @return 日期字符串
   */
  _getMondayDate(inputDate) {
    const date = new Date(inputDate);
    const dayOfWeek = date.getDay(); // 获取输入日期是星期几
    const mondayTime = date.getTime() - (dayOfWeek - 1) * 24 * 60 * 60 * 1000; // 找到那一周的周一的时间戳
    const mondayDate = new Date(mondayTime).toLocaleDateString(); // 转换为日期字符串

    return mondayDate;
  },

  /**
   * @function 根据输入的日期和过去的周数，获取并返回对应周的日期范围（从周一到周日）,即显示在课程表第一层的日期
   * @param {*startDate} 开始时间
   * @param {*nowWeeks} 第几周
   */
  _getPreciseDates(startDate, nowWeeks) {
    const oneDay = 24 * 60 * 60 * 1000; // 毫秒
    const mondayDate = new Date(this._getMondayDate(startDate)); // 找到开始日期的周一的日期
    mondayDate.setDate(mondayDate.getDate() + (7 * (nowWeeks - 1))); // 根据过去的周数计算所需周的周一日期
    const weekDates = [];
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(mondayDate.getTime() + i * oneDay);
      const month = currentDate.getMonth() + 1;
      const day = currentDate.getDate();
      weekDates.push(`${month}/${day}`);
    }
    this.setData({
      precise: weekDates,
    })
    return weekDates;
  },
  /**
   * @function 根据课程信息，更改前端课程表
   * @param {*curriculum_msg} 课程信息
   */
  _showCurriculums(nowWeeks, curriculum_msg) {
    //1检查这一周有没有这节课2更改curriculum里对应前端信息
    let c_temp = curriculum_msg;
    let c_exist = [];
    //编译所有课程信息
    c_temp.forEach(element => {
      //数据筛选1：有关键信息week,day,time才进行下一步操作
      if(element.week&&element.day&&element.time){
        //数据筛选2：该课程的上课周就是当前查看的周数
        if (element.week== nowWeeks) {
          c_exist.push(element);
        }
      }
    });
    let colors = this.data.colors;
    let new_curriculu = {
      "一": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "二": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "三": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "四": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "五": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "六": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
      "七": {
        1: { background_color: "", border_radius: "", text: "",id:0 },
        2: { background_color: "", border_radius: "", text: "",id:0 },
        3: { background_color: "", border_radius: "", text: "",id:0 },
        4: { background_color: "", border_radius: "", text: "",id:0 },
        5: { background_color: "", border_radius: "", text: "",id:0 },
        6: { background_color: "", border_radius: "", text: "",id:0 },
        7: { background_color: "", border_radius: "", text: "",id:0 },
        8: { background_color: "", border_radius: "", text: "",id:0 },
        9: { background_color: "", border_radius: "", text: "",id:0 },
        10: { background_color: "", border_radius: "", text: "",id:0 },
        11: { background_color: "", border_radius: "", text: "",id:0 },
      },
    };
    //遍历上一步筛选后的数据
    c_exist.forEach((item, index) => {
      let start = parseInt(item.time.split('-')[0]);
      let end = parseInt(item.time.split('-')[1]);
      //给课程上颜色
      for (let i = start; i <= end; i++) {
        new_curriculu[item.day][i].background_color = colors[index];
        new_curriculu[item.day][i].id=item.sr_id;
      }
      //上弧形边角
      new_curriculu[item.day][start].border_radius = "15rpx 15rpx 0 0";
      new_curriculu[item.day][end].border_radius = "0 0 15rpx 15rpx";
      if(start==end)
      new_curriculu[item.day][start].border_radius= "15rpx";
      //上文字
      new_curriculu[item.day][start].text = item.name + "@" + item.location;
    });
    //给前端赋值
    this.setData({
      curriculum: new_curriculu,
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(option){
    //let data = JSON.parse(option.data);
    let data={
      startDate:"2023-09-04",
      nowWeeks:9,
      curriculum_msg:[
        {day:'五',name:"编译原理",teacher:"教师A",week:"9",time:"1-3",location:"第一课室大楼"},
        {day:'一',name:"大数据",teacher:"教师B",week:"9",time:"5-7",location:"计算机学院"},
        {day:'五',name:"编译原理",teacher:"教师A",week:"8",time:"1-3",location:"第一课室大楼"},
        {day:'一',name:"大数据",teacher:"教师B",week:"8",time:"5-7",location:"计算机学院"}
      ],
    }
    this.setData({
      curriculum_msg:data.curriculum_msg,
      startDate:data.startDate,
      nowWeeks:data.nowWeeks,
    });
    this._getSchFromWeek(data.nowWeeks);
  },
  /**
   * @function 将阿拉伯数字转换为简体中文数字
   */
  _convertToChinese(number) {
    var chineseNumber = '';
    switch (number) {
      case '1':
        chineseNumber = '一';
        break;
      case '2':
        chineseNumber = '二';
        break;
      case '3':
        chineseNumber = '三';
        break;
      case '4':
        chineseNumber = '四';
        break;
      case '5':
        chineseNumber = '五';
        break;
      case '6':
        chineseNumber = '六';
        break;
      case '7':
        chineseNumber = '七';
        break;
    }
    return chineseNumber;
  },
  onClickLeft(){
    wx.navigateBack();
  },
})

.wxml

<!--pages/curriculum/curriculum.wxml-->
<van-nav-bar
  left-text="课程表"
	left-arrow
  bind:click-left="onClickLeft"
/>
<!--第几周-->
<picker bindchange="switchWeek" range="{{array_weeks}}">
<view class="week">第{{nowWeeks}}周
<image style="height:40rpx;width:40rpx;margin-left: 10rpx;" src="/images/exchange-fill.svg" mode=""/>
</view>
</picker>
<!--课程表内容-->
<view class="cur_top">
<view class="cur_left"></view>
<!--课程表头顶一行，显示周几与日期-->
<view wx:for="一二三四五六天" wx:key="index" class="day">周{{item}}
<view class="precise">{{precise[index]}}</view>
</view>
</view>
<!--课程表，双层循环生成-->
<view wx:for="{{11}}" wx:key="index" class="cur_mid">
  <view class="cur_left2">{{index+1}}</view>
  <view wx:for="一二三四五六七" wx:key="data" wx:for-item="day" wx:for-index="index2" 
  class="piece"
  style="background-color: {{curriculum[day][index+1].background_color || 'white'}};border-radius: {{curriculum[day][index+1].border_radius || '0 0 0 0'}};z-index:{{curriculum[day][index+1].text?1:0}}" 
  catchtap="_goTo"
  data-id="{{curriculum[day][index+1].id}}"
  >{{curriculum[day][index+1].text || ""}}</view>
</view>
<van-dialog id="van-dialog" />

.wxss

/* pages/curriculum/curriculum.wxss */
.week{
	width: 100%;
	height:70rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: small;
}
.cur_top{
	width: 100%;
	height:100rpx;
	display: flex;
	flex-direction: row;
}
.cur_left{
	width: 50rpx;
	background-color: rgb(161, 161, 161);
}
.cur_top .day{
	width: 100rpx;
	font-size: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.day .precise{
	font-size: smaller;
	color: gray;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cur_mid{
	width: 100%;
	height:150rpx;
	display: flex;
	flex-direction: row;
}
.cur_left2{
	width: 50rpx;
	height:150rpx;
	background-color: rgb(161, 161, 161);
}
.cur_mid .piece{
	width: 80rpx;
	height:120rpx;
	padding: 30rpx 10rpx 5rpx 10rpx;
	overflow: visible;
	text-align:justify;
	text-align-last:start;
	letter-spacing: 0ch;
	font-weight: bold;
	font-size:22rpx;
}
.piece .title{
	font-weight: bold;
	font-size:27rpx;
}
.piece .content{
	font-size:25rpx;
}

代码片段：

https://developers.weixin.qq.com/s/usgR1gmO7YN6

typeScript接口

interface Course { 
name: string, 
time: string, 
location: string, 
teacher: string, 
weeks: string, 
day:string,
id:number,
week:number，
}
//课程表前端一格内容所需信息
interface cur_piece{
	background_color:string,
	border_radius:string,
	text:string | "",
	id:number,
}
interface Curriculum{
	[key:string]:{[key:number]:cur_piece}
}