发表于: 2020-07-03 19:51:15

1 2145



今天完成的事情:

1.进行方案设计


明天计划的事情:

1.进行方案设计


遇到的问题和收获:


影像部

需求描述:

1.作为一名初高中生用户,我希望有教学视频的内容,以便于我能够观看视频进行学习。

2.作为一名初高中生用户,我希望视频可以按照年级、科目和视频列表展示内容,以便于我能够选择符合自己需求的视频。

3.作为一名初高中生用户,我希望在视频列表中可以展示视频的详细信息,以便于我选择是否观看此视频。

4.作为一名初高中生用户,我希望在视频详情里可以看到视频的标题、老师昵称、发布时间、播放视频、文字内容、收藏点赞数,这样便于我更清晰的浏览视频和内容。

验收标准:

1.进入影像部路径:

在一级背景图上面可以看到影像部,对背景大小可手动缩放,滑动并且可以查看全图。点击影像部进入视频界面。

2.影像部列表页面:

页面分为年级科目列表、banner图和视频列表。

字段显示:每次进入影像部列表页都默认显示年级和科目。

视频列表显示有两种情况:

a.在学生证中设置年级后(如:高三),进入影像部,视频列表为高三的全部科目视频。b.在学生证中未设置年级,进入影像部,列表页视频为全部科目视频。由用户自由选择。

(1)年级科目:点击年级和科目后,展示的视频内容同步更新。

(2)banner图:banner图进行轮播显示,最多8张,banner图无内容链接则点击无反应;有内容链接则跳转相应的内容详情进行浏览。

(3)视频列表:列表中可以看到老师头像、昵称、视频简介、收藏数、点赞数、发表时间。

    老师头像和昵称在左上角显示;视频简介:初始最多显示两行内容,超过两行后出现更多按钮,点击更多展出全部简介内容。每行最多显示27个字,超过27字另起一行。

    收藏数和点赞数不可以在列表页操作;发表时间:不足1小时,按 –eg:1小时前 显示;24小时之内都用小时来展示 -  eg:6小时前;24小时之外用日期来展示 - eg:2017-01-02;

(4) 列表视频中内容展示:展示视频标题、视频时长、观看视频按钮。

    视频标题:视频标题展示一行限制20字,超过20字另起一行,默认居中对齐

    视频时长:-eg 04:35

    观看视频按钮:播放键

(5)数据加载:列表以10条数据为一组进行“点击加载更多”,每加载一次刷新再次加载10条数据。没有数据时底部提示“哎呀,没有了,别点啦”。

3.影像部视频详情页:

(1)点击视频列表中的某一部视频可跳转到相应的详情页,详情页展示视频的标题、老师昵称、发表时间、简介、视频播放框、正文内容、收藏数、点赞数。点击视频播放框播放按键对视频进行播放。

(2)点赞:点击空心点赞图标,图标状态点亮,数字统计+1,再点击点亮图标,状态改回初始状态,数字统计-1。

    收藏:点击空心收藏图标,图标状态点亮,数字统计+1,提示“收藏成功”,再点击收藏图标,状态改回初始状态,数字统计-1。提示“取消收藏”。

(3)小窗功能:边看视频边浏览。观看视频过程中,向下滚动时,视频播放窗口会保持在顶部,向上滚动到顶部时,回到最初始状态。


实现思路

视频列表:

1.判断是否设置里面选择了年级,没有的话默认选择全部。选择了年级则请求对应年级的数据

2.轮播图可以使用vant提供的组件,通过点击banner图,得到对应的id数据,进入对应的详情页。

3.视频列表for渲染出来,间接每行显示27字,最多2行,超出省略号。这部分定高,js检测字符长度,点击展开更多时取消高度限制,文字‘展开’变更为‘收起’,点击收起,高度恢复,此处使用类的布尔类型判断写法。

4.列表时间由新到旧,视频发送时间与当前时间进行计算,大于24小时直接显示日期,小于就显示X小时前发送

5.列表滑到最底部,出现点击加载更多,点击后发送请求,页数+1.

6.banner图轮播时间为3s轮播限制最多8张。

详情页:

1.进入详情页通过传入的id进行数据请求渲染

2.收藏和点赞根据点击后布尔值判断是否高亮。点赞或收藏成功toast提示

3.视频有吸顶效果,使用sticty


后台部分

用户管理列表

需求描述:作为一个平台运营者我需要一个用户管理以便于我更好的管理用户信息

验收标准:

1.用户名,不做限制,用户id是根据用户第一次在多少排名时登录的

2.状态分为,默认全部,还要已冻结和未冻结两种显示

3.用户列表显示用户名和用户头像,

4.当处于未冻结状态时,点击立即冻结弹窗提示是否冻结此用户点击确认用户不能登录,状态变为已冻结,点击取

消弹窗消失

当处于已冻结状态时点击立即解冻提示是否解冻此用户点击确认此用户解冻可以登录

状态变为未冻结点击取消弹窗消失

已冻结前台首页展示已冻结

实现思路:

1.进入页面请求数据渲染列表

2.筛选功能能搜索数据

3.点击查看进入用户详情页,点击冻结改变用户状态。冻结状态可以点击解冻

4.用户详情页,根据传入的id请求数据渲染列表,所有数据不可修改。

视频列表

需求描述:

1.视频列表:

 (1)搜索框内容:标题、分类、所属年级、所属科目、点赞数、收藏数

 (2)后台点击侧边栏内容管理下的视频列表,即可看到对视频信息的管理,列表会展示视频的序号、视频标题、所属年级、所属科目、老师、收藏数、点赞数、编辑时间、状态。可对上传的视频进行查看、编辑、上下架、搜索的操作。列表数据按照上架的时间倒叙排列,视频数据1页展示10条数据,超出换页展示。

 (3)点击“下架”按钮则弹窗提示“是否下架该视频?”是:提示下架成功;否:弹窗消失,展示当前列表。点击“上架”按钮则弹窗提示“是否上架该视频?”是:提示上架成功;否:弹窗消失,展示当前列表。

 (4)标题下的内容每行显示14个字,超过14字换行。老师下的内容每行显示5个字,超过5个字换行。

 (5)banner图最多上架8张,上架第9张时,第1张自动下架。

2.视频新增:

(1)点击“新增”按钮,展示信息:所属年级、所属科目、老师、视频标题、分类:banner图和视频内容、视频简介、视频url地址、正文。

(2)年级名称:对初中、高中、初一、初二、初三、高一、高二、高三、其他进行点击选择。

(3)科目名称:对语文、数学、英语、物理、化学、生物、历史、地理、政治、其他进行点击选择。

(4)老师昵称和头像:老师昵称初始内容为空,点击添加,弹出弹窗,输入昵称,上传头像图片,点击保存,弹窗提示保存成功。保存成功后,老师昵称会展示在列表内,选择昵称,头像同步更新变化。昵称列表中,选中老师昵称的姓名,点击删除,弹出提示框,选择确定,删除成功。

(5)视频标题:限制40个字

(6)分类:选择banner图,则显示出上传封面(上传文件在5M以内)的操作。选择card视频,则不显示上传封面的内容。分类选择为card视频时,所有内容必须填写才能保存,选择为banner图时,所有内容必须填写才能保存。

(7)视频简介、限制140个字

(8)视频url地址:输入地址以后,显示出视频播放框,可播放视频。

(9)正文:无文字限制。

(10)点击“保存”,页面跳转到视频列表页,并且有弹窗提示“内容添加成功”,视频默认下架状态。点击取消,则弹窗提示:“确定取消编辑内容?”确定:则返回视频列表;取消:弹窗消失。

3.视频列表页查看和编辑

(1)点击“查看”按钮可对视频的内容进行查看(与视频新增页面显示一致内容,不同的是底部为返回按钮。

(2)点击“编辑”按钮可对视频的内容进行编辑。(与视频新增页面显示一致内容,不同的是底部为修改和取消按钮。),点击“修改”按钮即可对内容进行编辑。点击取消,则弹窗提示:“确定取消修改内容?”确定:则返回视频列表;取消:弹窗消失。


实现思路:

1.进入页面请求数据渲染列表

2.筛选功能能搜索数据,点击查看进入详情页,查看不可修改数据

3.新增和编辑使用一个组件,通过进入时是否传入id判断是新增页还是编辑页。

4.新增和编辑页点击增加老师,弹出一个弹框,里面能设置老师昵称,能上传头像。功能使用element-ui组件库完成。

5.删除时请求对应接口删除





返回列表 返回列表
评论

    分享到