今天完成的事情：

方案设计：

 支付

支付成功后点击确认返回课程详情

技术方案：

1、调用wx.login获取code返回给后台，后台调用对应的api换取用户的唯一标识（openid） 及本次登录的会话密钥（session_key）

2、调用后台的下单接口进行下单

3、调用后台的支付接口，返回wx.requestPayment 所需的参数，再进行调用wx.requestPayment

搜索

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

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

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

4、标签字符最多20个多了显示省略号

5、点击标签直接搜索

6、点击叉号删除这个标签，点击删除所有搜索标签

技术方案：

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

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

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

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

搜索结果

点击清除搜索框内容

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

技术方案：

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

课程首页，选择年级

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

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

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

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

5、点击banner跳转到指定页面

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

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

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

技术方案：

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

课程详情：

1、课程标题限制20个字符

2、未购买点击播放提示购买

3、时间为后台发布课程时间

4、点击课程价格购买

技术方案：

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

登陆

需求描述

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

验收标准

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

实现思路

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

首页

需求描述：

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

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

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

验收标准： 

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

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

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

实现思路

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

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

签到

需求描述

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

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

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

验收表转

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

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

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

实现思路

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

消息

需求描述

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

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

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

验收标准

1、 未读邮件有小红点标识，已读的取消标识

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

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

4、 排序顺序为事件前后，最新的排最上面

实现思路

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

个人中心：我的：

需求描述

1.作为一名第一次登录初高中生，我希望可以提示我默认调用微信基本信息，这样便于用户方便完善个人资料。

2.作为一名初高中生，我希望可以更改昵称、头像、选择年级，这样便于用户实时更新资料。

3.作为一名初高中生，我希望可以看到我收藏、这样便于用户想看的时候可以进行查看。

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

5.作为一名运营者，我希望用户个人中心可以有绑定手机号和邮箱的功能，以便以后出了app之后能够转移用户信息。

验收标准

1.在一级背景图上面可以看到学生证，点击学生证进入学生中心界面。个人资料可以看到学生的空头像、随机昵称、年级：未设置、逆袭豆：0颗。

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

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

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

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

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

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

方案

1、页面布局可以使用flex

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

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

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

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

明天计划的事情：

登录页面

遇到的问题：

无

收获