DEMO
界面预览
清晰漂亮的界面,很直观醒目哦~
目录结构
平台音乐和视频直播流数据来源于第三方网站,仅供学习交流使用,请勿用于商业用途。
.
├── 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为测试课表文件
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
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 ,代码开源仅供学习交流,禁止私用、商用,违者必究。
更新日志
Version 1.1.0
Version 1.0.1
Version 1.0.0