uni-app 课程表组件

admin

界面预览

[color=var(--color-text-link)][color=var(--color-text-link)]

[color=var(--color-text-link)]目录结构.├── App.vue├── LICENSE├── README.md├── components│   └── timetable│       ├── icon.css│       └── timetableBody.vue├── main.js├── manifest.json├── pages│   └── index│       └── index.vue├── pages.json├── static│   ├── guest.js│   └── logo.png├── store│   ├── index.js│   └── modules│       └── timetable.js└── uni.scss
[color=var(--color-text-link)]课表数据说明[  [color=var(--color-prettylights-syntax-comment)]// 第一周课表  [    [color=var(--color-prettylights-syntax-comment)]// 周一课表    [      [color=var(--color-prettylights-syntax-comment)]// 节次 1-2 课表      [        [color=var(--color-prettylights-syntax-comment)]// 课程 1        {课程1},        [color=var(--color-prettylights-syntax-comment)]// 冲突课程 2        {课程2}      ],      [color=var(--color-prettylights-syntax-comment)]// 节次 3-4 课表      [        {课程1}      ],      [color=var(--color-prettylights-syntax-comment)]// 节次 5-6 课表      [],      ...    ],    [color=var(--color-prettylights-syntax-comment)]// 周二课表    [],    [color=var(--color-prettylights-syntax-comment)]// 周三课表    [],    ...  ],  [color=var(--color-prettylights-syntax-comment)]// 第二周课表  [],  [color=var(--color-prettylights-syntax-comment)]// 第三周课表  [],  ...]
[color=var(--color-text-link)]使用方法

static 目录下 guest.js为测试课表文件

• 将 components 目录下 timetable文件夹拷贝至你所在的项目中
• 将 store 目录下 modules 文件夹拷贝至相应文件夹中
• 修改 store.js 文件添加以下代码
  

[color=var(--color-prettylights-syntax-keyword)]import [color=var(--color-prettylights-syntax-variable)]Vue [color=var(--color-prettylights-syntax-keyword)]from [color=var(--color-prettylights-syntax-string)]'vue'[color=var(--color-prettylights-syntax-keyword)]import [color=var(--color-prettylights-syntax-variable)]Vuex [color=var(--color-prettylights-syntax-keyword)]from [color=var(--color-prettylights-syntax-string)]'vuex'[color=var(--color-prettylights-syntax-keyword)]import timetable [color=var(--color-prettylights-syntax-keyword)]from [color=var(--color-prettylights-syntax-string)]'@/store/modules/timetable'[color=var(--color-prettylights-syntax-variable)]Vue.[color=var(--color-prettylights-syntax-entity)]use([color=var(--color-prettylights-syntax-variable)]Vuex)[color=var(--color-prettylights-syntax-keyword)]const store [color=var(--color-prettylights-syntax-constant)]= [color=var(--color-prettylights-syntax-keyword)]new [color=var(--color-prettylights-syntax-variable)]Vuex.[color=var(--color-prettylights-syntax-constant)]Store({  [color=var(--color-prettylights-syntax-constant)]modules: {    timetable  }})[color=var(--color-prettylights-syntax-keyword)]export [color=var(--color-prettylights-syntax-keyword)]default store

• 修改 main.js 文件添加以下代码
  

[color=var(--color-prettylights-syntax-keyword)]import [color=var(--color-prettylights-syntax-variable)]Vue [color=var(--color-prettylights-syntax-keyword)]from [color=var(--color-prettylights-syntax-string)]'vue'[color=var(--color-prettylights-syntax-keyword)]import [color=var(--color-prettylights-syntax-variable)]App [color=var(--color-prettylights-syntax-keyword)]from [color=var(--color-prettylights-syntax-string)]'./App'[color=var(--color-prettylights-syntax-keyword)]import store [color=var(--color-prettylights-syntax-keyword)]from [color=var(--color-prettylights-syntax-string)]'./store'...[color=var(--color-prettylights-syntax-variable)]Vue.[color=var(--color-prettylights-syntax-constant)]prototype.[color=var(--color-prettylights-syntax-constant)]$store [color=var(--color-prettylights-syntax-constant)]= store...[color=var(--color-prettylights-syntax-constant)]const app [color=var(--color-prettylights-syntax-constant)]= [color=var(--color-prettylights-syntax-keyword)]new [color=var(--color-prettylights-syntax-variable)]Vue({  store,  ...[color=var(--color-prettylights-syntax-variable)]App,})app.[color=var(--color-prettylights-syntax-entity)]$mount()

• 引入组件，相关代码如下：
  

<[color=var(--color-prettylights-syntax-entity-tag)]template>  <[color=var(--color-prettylights-syntax-entity-tag)]view>    [color=var(--color-prettylights-syntax-comment)]<!-- 课表主体 -->    <[color=var(--color-prettylights-syntax-entity-tag)]timetable-body></[color=var(--color-prettylights-syntax-entity-tag)]timetable-body>    ...  </[color=var(--color-prettylights-syntax-entity-tag)]view></[color=var(--color-prettylights-syntax-entity-tag)]template><script>  import {    mapState,    mapGetters  } from 'vuex'  import {    timetableData  } from '../../static/guest.js'  // 课表主体  import timetableBody from '../../components/timetable/timetableBody.vue'  export default {    data() {      return {}    },    components: {      timetableBody    },    onLoad() {      // 设置开学时间      this.$store.commit('timetable/setStartDay', '2021/03/01 00:00:00')      // 初始化课表数据      this.$store.commit('timetable/setTimetableList', timetableData)    },    computed: {      ...mapState('timetable', [        'showTimetableWeek',        'bgImage'      ]),      ...mapGetters('timetable', [        'originalWeekIndex',        'currentWeekIndex',        'weekWeekIndex'      ])    },    watch: {      currentWeekIndex(newVal, oldVal) {        uni.setNavigationBarTitle({          title: `第${newVal + 1}周课表`        })      }    }  }</script>
[color=var(--color-text-link)]开源许可

本项目使用开源许可证 License GPLv3 ，代码开源仅供学习交流，禁止私用、商用，违者必究。

[color=var(--color-text-link)]更新日志[color=var(--color-text-link)]Version 1.1.0

• F 使用 vuex
• U 课表色卡
• U 冲突课程显示方式
• A 课程详情卡片
• A 删除课程、课程置顶
  

[color=var(--color-text-link)]Version 1.0.1

• A 周课表背景
• U 更换周课表切换配色
• U 优化体验
  

[color=var(--color-text-link)]Version 1.0.0

• A 课程切换
• A 冲突课程折角
• A 周课表色卡切换
  

下载地址：https://github.com/zguolee/ColorTimetable