用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

10

主题

18

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
16616
2021-5-11 15:44:07 admin 管理员 楼主 01069
界面预览
[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

发新帖
    您需要登录后才可以回帖 登录 | 立即注册