.
├── 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
[
// 第一周课表
[
// 周一课表
[
// 节次 1-2 课表
[
// 课程 1
{课程1},
// 冲突课程 2
{课程2}
],
// 节次 3-4 课表
[
{课程1}
],
// 节次 5-6 课表
[],
...
],
// 周二课表
[],
// 周三课表
[],
...
],
// 第二周课表
[],
// 第三周课表
[],
...
]
static目录下guest.js为测试课表文件
- 将
components目录下timetable文件夹拷贝至你所在的项目中 - 将
store目录下modules文件夹拷贝至相应文件夹中 - 修改
store.js文件添加以下代码
import Vue from 'vue'
import Vuex from 'vuex'
import timetable from '@/store/modules/timetable'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
timetable
}
})
export default store- 修改
main.js文件添加以下代码
import Vue from 'vue'
import App from './App'
import store from './store'
...
Vue.prototype.$store = store
...
const app = new Vue({
store,
...App,
})
app.$mount()- 引入组件，相关代码如下：
<template>
<view>
<!-- 课表主体 -->
<timetable-body></timetable-body>
...
</view>
</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>本项目使用开源许可证 License GPLv3 ，代码开源仅供学习交流，禁止私用、商用，违者必究。
- F 使用 vuex
- U 课表色卡
- U 冲突课程显示方式
- A 课程详情卡片
- A 删除课程、课程置顶
- A 周课表背景
- U 更换周课表切换配色
- U 优化体验
- A 课程切换
- A 冲突课程折角
- A 周课表色卡切换
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent