今天完成的事情：

1.登陆

(1)需求描述

进入页面时需要微信授权权限

(2)验收标准

点击允许获取用户信息，点击拒绝取消退出。

(3)实现思路

在微信web开发者工具中设置接口权限，填写回调页面域名。引入微信js文件，跳转至授权页面，确认之后跳转到之前设置的回调页面，取出url中微信返回的code和state，之后向后台请求获取用户信息。

2.首页

(1)需求描述：

a.作为一名普通用户，我希望在首页可以看到所有的功能

b.作为一名普通用户，我希望可以点击对应的功能跳转到相应的页面

c.作为一名普通用户，我希望在首页有消息的时候可以有相应的提示

(2)验收标准： 

a.在一级背景图上面可以看到各功能页面按钮，点击跳转到相应的区域

b.在一级背景图上面如果有未读消息，会有红点提示

c.进入一级背景图的时候，会有公告弹窗提示

(3)实现思路

在背景图上点击对应的的按钮跳转到相应的页面

制作一整张背景图，使用绝对定位将各功能按钮固定，点击按钮触发vue-router跳转到相应的页面，给消息列表的数组里每个都加上红点的未读标记，在return中给属性控制，true的时候显示红色标记，点击查看之后记为false，并向后端请求参数标记。 

3.签到

(1)需求描述

a.作为一名普通用户，在进入签到也免得时候希望能有签到规则的提示

b.作为一名普通用户，签到完成之后可以获得积分

c.作为一名普通用户，可以随时查看签到的记录

(2)验收标准

a.进入签到页面的时候，会有签到规则的窗口，点击关闭符号关闭或者除弹窗之外的其他地方

b.点击签到后改变字体内容，弹窗反馈签到，持续2秒

c.签到成功后，对应天数有所反馈

(3)实现思路

进入签到页时，向服务器请求对应签到、积分、累计签到数据，对应到签到表上，点击签到之后，签到按钮变成禁用状态，并且显示当前已经签到的天数，签到表上今天的日期打钩，使用elementUI组件来引入日期组件，将用户已签到的天数数据传给后台，进入页面时，向后台拉取当前用户的签到数据填充到日期表格中。

4.消息

(1)需求描述

a.作为一个普通用户，在首页消息按钮按下后跳转到消息列表中

b.作为一个普通用户，在消息界面未读和已读的消息希望有所区别

c.作为一个普通用户，在消息界面希望一次不要加载那么多消息

(2)验收标准

a.未读邮件有小红点标识，已读的取消标识

b.点击去看看，可以查看消息对应的活动或者课程，点击之后取消小红点

c.一次只加载四条消息，下拉加载，没有消失显示没有更多。

d.排序顺序为事件前后，最新的排最上面

(3)实现思路

通过监听页面滚动触底，来实现下拉刷新。刷新时，分批请求后台数据，无数据时，显示没有更多，查看按钮绑定相应的跳转链接，点击之后查看相应的活动/课程。通过后台传输的时间戳来进行排序，实现最新的排最上面

5.个人中心

(1)需求描述

a.作为一名新用户，我希望提示我默认调用微信基本信息

b.作为一个普通用户，我希望可以更改昵称、头像、选择年级

c.作为一个普通用户，我希望可以看到我的收藏、我的课程

d.作为一名后台管理者，我希望可以通过微信授权得到用户的ID、昵称，用户修改后可以获得用户的年级、会员展示以及可以对用户进行冻结和解冻的操作

e.作为一名运营者，我希望用户个人中心可以有绑定手机号和邮箱的功能

(2)验收标准

a.在一级背景图上面可以看点击进入个人中心界面，查看个人资料

b.点击资料可完善个人头像、昵称（限制14字之内）、年级的资料，点击保存修改，小窗提示“保存成功”。个人中心界面展示用户的头像、ID、昵称、年级、所在区域、逆袭豆颗数。点击逆袭豆可跳转门卫处进行签到。

c.我的收藏可根据文学部和影像部进行分别就收藏，按照收藏的时间倒叙排列。点击相应的文章跳转详情页面，详情页底部可对文章进行点赞和收藏，收藏有两种状态，分别提示“收藏成功”“取消收藏”。点赞和收藏的状态在列表会变现出来。eg:该文章被收藏或点赞的话会在列表页展示点赞和收藏的状态。在列表不可对文章进行点赞和收藏。

d.点击“账号与绑定设置”，进入绑定页面，可用手机号或邮箱进行绑定。输入正确的手机号或邮箱、正确的验证码，点击绑定则“绑定成功”并显示绑定成功页面，错误则提示相应状态。分别有“请输入正确格式的邮箱”“请输入正确格式的手机号”“该手机号已绑定”“该邮箱已注册”“验证码错误”“验证超过3次，请明日再试”。首次绑定手机号/邮箱获得20颗逆袭豆，已经绑定手机号/邮箱其中一个的绑定第二个账号不再赠送逆袭豆。

e.后台点击侧边栏用户管理下的用户列表，即可看到对用户基本信息的管理，在用户管理标题旁边展示所用用户的数量总和。列表会展示用户的序号、ID号、昵称、年级、手机号、邮箱、所在区域、逆袭豆、状态。列表可对用户进行查看、冻结、搜索的操作。用户数据1页展示10条数据，超出换页展示。

f.点击“冻结”按钮则弹窗提示“冻结后将无法登录，是否冻结该用户？”是：提示冻结成功；否：弹窗消失，展示当前列表。.点击“冻结”按钮则弹窗提示“解冻后该用户可正常登录使用，是否解冻该用户？”是：提示用户解冻成功；否：弹窗消失，展示当前列表。

g.点击“查看”按钮跳转用户详情页。详情页展示用户的ID号、昵称、逆袭豆、年级、头像

(3)实现思路

1、页面布局可以使用flex

2、点击我的课程以后，路由转跳到我的课程，路由跳转使用vue-router,之后对购买的课程数据进行请求获取。点击去学习后再进行一次跳转，刷新获取页面内容。

3、跳转到个人信息后显示点击头像区域对img数据的一个请求， 而后台请求的是微信资料，同样昵称和性别也一样。还可以put进行初始化的更替

4、绑定手机号这块当用户输入自己的手机时，获取验证码对数据的一个回馈。点击确定的前提下要与回馈的信息相同才能进行和服务器互通状态

5、年纪这块对每一个按钮功能进行一个区块的分工，当用户点击所在的年级时，出现一个回调。然后发送出去

6.搜索

(1)需求描述

(2)验收标准

a.点击搜索框提示字体消失，用手机键盘确认搜索

b.搜索历史保存最近10条，排序为最新在最上面

c.一排最多展示3个表搜索历史标签，

d.标签字符最多20个多了显示省略号

e.点击标签直接搜索

f.点击叉号删除这个标签，点击删除所有搜索标签

(3)实现思路

a.进入页面钩子函数中请求记录保存到数组中，利用v-for展示，把每次搜索文字加入数组第0位，设置数组长度，等于10 。退出页面时，把搜索记录发到服务器。

b.展示的搜索历史设置两个点击事件，点击文字则把文字作为搜索条件，触发搜索函数。点击X，把当前下标值传入函数，删除数组中对应位置

c.点击回收按钮，删除数组中所有元素。每行显示三条设置最小宽度，超出后自动下移

d.文字长度省略号overflow：hidden  text-overflow：ellipsis  white-space：nowrap

7.搜索结果

(1)需求描述

(2)验收标准

(3)实现思路

a.点击清除搜索框内容

b.点击进入课程详情页，排列顺序根据购买人数。多的排在前面。

c.技术方案：

d.用vant-search搜索，发起请求，按购买人数排列，v-for展示(没有搜到显示没有内容)，router跳转

8.课程首页，选择年级

(1)需求描述

(2)验收标准

a.导航栏，只有推荐有轮播图。点击年级跳出弹窗选择，点击试试框进入搜索课程页。

b.课程标签可以左右滑动，选中高亮提示

c.banner图片为3张，自动轮播轮播顺序为从右向左，用户可以滑动轮播图，向右切换到下一张，向左切换上一张。

d.轮播时间为3秒，轮播图片为后台banner列表前3张，

e.点击banner跳转到指定页面

f.推荐课程，推荐每个科目的课程列表第一个课程，最多推荐10个课程

g.课程显示应对图片，点击跳转详情，标题显示俩行一行最多显示15个字符多出来的显示省略号

h.点击选择年级，选中后底色，字体颜色改变，点击任意地方或者选中年级弹窗关闭

(3)实现思路

搜索框与上面相同，点击年级用v-show出现或隐藏，用swiper实现轮播图与导航栏左右滑动，上下滑动用better-scroll，利用循环的下标发起对应请求及跳转链接。

9.课程详情

(1)需求描述

(2)验收标准

a.课程标题限制20个字符

b.未购买点击播放提示购买

c.时间为后台发布课程时间

d.点击课程价格购买

(3)实现思路

a.请求判断用户是否购买，未购买点击跳出提示弹窗(vant-Dialog)，点击价格发出购买请求。已购买则显示为已购买

明天计划的事情：

完成禅道拆分

遇到的问题：

无

收获