|
界面预览[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
[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[color=var(--color-text-link)]Version 1.0.0
下载地址:https://github.com/zguolee/ColorTimetable
|
|