发表于： 2020-01-10 22:11:03
0 1310
页面逻辑
一、前台
1、登陆
需求描述：
作为一个本产品的用户我想要一个登录，以便于登录之后可以使用更多的功能
验收标准：
微信授权登录，
登录之后获取用户头像以及名称，显示个人中的个人信息
实现方案：
1 第一步：用户同意授权，获取code
在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；
在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下，引导关注者打开页面，若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。
2 通过code换取网页授权access_token
这一步非常简单。就是把第一步拿到的code传给后端。然后后端返给我一个token值就行了
3.刷新access_token
由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。
4.拉取用户信息(需scope为 snsapi_userinfo)
通过access_token和openid拉取用户信息了。把这两个值传给后端。然后获取回调参数，拿到用户信息
在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；
在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下，引导关注者打开页面，若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。
2 通过code换取网页授权access_token
这一步非常简单。就是把第一步拿到的code传给后端。然后后端返给我一个token值就行了
3.刷新access_token
由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。
4.拉取用户信息(需scope为 snsapi_userinfo)
通过access_token和openid拉取用户信息了。把这两个值传给后端。然后获取回调参数，拿到用户信息
代码逻辑
获取token
if判断。token是否为空。如果为空（第一次登录或者token值失效）。先获取code，然后通过code拿到token。存值（localStorage）并且进入首页
如果token不为空（不是第一次登录）。就不需要进行授权，直接进入首页
获取token
if判断。token是否为空。如果为空（第一次登录或者token值失效）。先获取code，然后通过code拿到token。存值（localStorage）并且进入首页
如果token不为空（不是第一次登录）。就不需要进行授权，直接进入首页
2、首页
需求描述：
作为一个刚进入求学的用户，我想要通过首页，以便于快速找到我想要的功能入口
验收标准：
用户第一次登录必须弹窗选择年级
点击签到模块弹出签到弹窗，已签到显示已签到
每次进入公众号首页都会弹出公告，可以正常关闭
消息中心展示几条未读消息
点击课程首页，消息中心，收藏，个人中心，模块跳转到相对应的页面
实现方案：
需求描述：
作为一个刚进入求学的用户，我想要通过首页，以便于快速找到我想要的功能入口
验收标准：
用户第一次登录必须弹窗选择年级
点击签到模块弹出签到弹窗，已签到显示已签到
每次进入公众号首页都会弹出公告，可以正常关闭
消息中心展示几条未读消息
点击课程首页，消息中心，收藏，个人中心，模块跳转到相对应的页面
实现方案：
1，后台向我传递数据，然后我来用这个数据来判断用户是第一次登陆还是老用户。
2，在背景图上点击对应的的按钮跳转到相应的 页面，制作一整张背景图，将各功能按钮固定，后台向我传递数据，然后我来用这个数据来判断用户是第一次登陆还是老用户。先判断账号是否可用，如果是被冻结的账号就弹出提示框显示账号被冻结，然后点击确认或者倒计时三秒返回登陆。判断通过之后再判断是不是第一次登陆，如果是就弹出提示框强制选择年级，必须选一个年级下面的确认按钮才能点击。选中年级改变其颜色，然后禁点按钮取消。选择完年级之后获取用户信息。
3，点击按钮触发vue-router跳转到相应的页面，给消息列表的数组里每个都加上红点的未读标记，在return中给这个属性控制，true的时候显示红色标记，点击查看之后记为false，并向后端请求参数标记。
3、签到
需求描述：
作为一个平台运营者，我想要一个积分签到，以便于增加用户活跃度
验收标准：
签到弹窗，显示已签到几天，以及积分多少展示，七天签到制，每天都会显示今天字样，签到之后显示对号
签到七天之后或中断签到就从第一天开始，签到显示已签到，右上角正常关闭弹窗已签到，再次点击显示已签到
实现方案：
需求描述：
作为一个平台运营者，我想要一个积分签到，以便于增加用户活跃度
验收标准：
签到弹窗，显示已签到几天，以及积分多少展示，七天签到制，每天都会显示今天字样，签到之后显示对号
签到七天之后或中断签到就从第一天开始，签到显示已签到，右上角正常关闭弹窗已签到，再次点击显示已签到
实现方案：
1.签到弹窗我通过vant组件实现就行
2.点击签到之后，我会给后端一个当前当前时间戳。然后请求出来数据，显示今天是否已签到和，连续签到的天数，然后渲染到页面上面。
3，如果当天没有签到
2.签到的时候7天为一组。点击签到后改变图案。通3过24小时制度判断当天有没有签到。没有连续签到的话就从新开始。连续签到满7天。也从新开始
3.获取到当前时间戳，使用 new Date().toLocaleString() （new Date() new一个data对象，当前日期和时间toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果）
4.登陆公众号的时候获取上一次签到的时间戳。并且用当前时间减去上一次签到的时候，如果小于24小时，就接着签到。如果大于24小说。连续签到就断了，需要重新开始
5.需要做一个禁止点击，假设已签到状态为1，未签到状态为2。签到状态为1的按钮禁止点击。就是这个按钮已经签到过了。
4、公告
需求描述：
作为一个平台运营者我需要一个公告，以便于推送最新公告
验收标准：
每次进入公众号都会弹出公告，关闭后，再次点击公告模块弹窗公告弹窗，可以正常关闭
每次进入公众号只弹一次，
实现方案：
需求描述：
作为一个平台运营者我需要一个公告，以便于推送最新公告
验收标准：
每次进入公众号都会弹出公告，关闭后，再次点击公告模块弹窗公告弹窗，可以正常关闭
每次进入公众号只弹一次，
实现方案：
通过vant组件实现弹窗,假设弹出状态是1，关闭状态是2。就让每次进入公众号的时候状态为1，，，点击关闭后状态改为2，公告内容通过请求拿到回调参数然后渲染上去就行了
如果用户第一次登陆的时候，在首页还需要选择年级。所以这种情况我就需要另外写了。我打算的就是，选择年级的话是一个弹窗。弹窗肯定有隐藏显示两个状态。当状态为显示的时候。公告的状态为隐藏，当选择完年级点击确定，弹窗消失之后，公告的状态为显示。就是说，当用户第一次登陆的时候。进入首页，首先弹出来一个选择年级的框。选择完之后点击确定，弹出框消失之后，公告在弹出来，而且注意，这种情况下的公告，不是根据用户信息控制的。是根据年级的弹出框状态来控制的。
现在就有两种情况了。一种是用户第一次登陆。就根据年级控制。第二组是用户之前登陆过。然后公告就是正常打开。。。这么写的话，还是需要用户信息来控制公告用哪种方式来弹出。。就用if判断，判断一下用户信息，是否为第一次登陆。是的话，就根据年级控制，否则正常控制
5、课程
需求描述：
作为一个车技不是很理想的用户，我想要一个课程，以便于通过课程学习来增加自己的成绩
验收标准：
课程首页，展示年级，科目，以及课程展示
点击年级，弹窗选择年级默认上一次选择的年级，可以切换年级，点击确认显示加载中加载完显示选择年级的首页科目以及课程
搜索框，显示请输入关键字搜索的提示
点击搜索显示搜索页，搜索已有的课程，展示课程，点击课程跳转课程详情，
未搜索到课程展示字样空空如也~没有搜索到任何内容哦~的提示，以及一个logo
科目专区展示该年级所有的科目，logo展示以及logo上的字样展示，已购，收费两种展示，免费的不展示
科目里的课程展示，标题logo可以向右滑动展示课程
更多课程展示课程列表，到底展示到底了一个字样，
课程详情页，
展示课程名称，以及三种展示的方式，收费，已购和免费，
收费课程进入页面展示购买课程观看视频的字样，不可观看视频，往下展示课程的字样详情，收藏电话和底部显示课程多少金额的一个支付按钮
收费课程，已购买过，视频显示暂停按钮，点击可以播放，底部展示字样显示已购买此课程
免费课程视频显示暂停按钮，点击可以播放，底部展示字样显示此课程为免费课程
技术方案：
需求描述：
作为一个车技不是很理想的用户，我想要一个课程，以便于通过课程学习来增加自己的成绩
验收标准：
课程首页，展示年级，科目，以及课程展示
点击年级，弹窗选择年级默认上一次选择的年级，可以切换年级，点击确认显示加载中加载完显示选择年级的首页科目以及课程
搜索框，显示请输入关键字搜索的提示
点击搜索显示搜索页，搜索已有的课程，展示课程，点击课程跳转课程详情，
未搜索到课程展示字样空空如也~没有搜索到任何内容哦~的提示，以及一个logo
科目专区展示该年级所有的科目，logo展示以及logo上的字样展示，已购，收费两种展示，免费的不展示
科目里的课程展示，标题logo可以向右滑动展示课程
更多课程展示课程列表，到底展示到底了一个字样，
课程详情页，
展示课程名称，以及三种展示的方式，收费，已购和免费，
收费课程进入页面展示购买课程观看视频的字样，不可观看视频，往下展示课程的字样详情，收藏电话和底部显示课程多少金额的一个支付按钮
收费课程，已购买过，视频显示暂停按钮，点击可以播放，底部展示字样显示已购买此课程
免费课程视频显示暂停按钮，点击可以播放，底部展示字样显示此课程为免费课程
技术方案：
1， 用户进入首页先判断，获取用户信息，这个用户信息是登陆和后台给的，如果是未登陆过的用户则必须选择年级，如果是已登录过的就不显示，这里用布尔值实现。
2，课程首页的左上角可以选择年级，点击跳出弹窗重新选择，这个还用element-ui中的message弹窗来实现。
3，搜索功能通过计算属性computed过滤数据:逻辑→根据input的value值筛选goodsList中的数据声明一个空数组来存放数据，
for循环数据中的每一项（根据name值），判断输入框中的值是否可以匹配到数据，如果匹配成功，向空数组中添加数据。
4，用swiper实现轮播图与导航栏左右滑动，上下滑动用better-scroll，利用循环的下标发起对应请求及跳转链接。
5，使用v-for把课程循环出来，点击课程通过路由传参，拿到id发送请求跳转到对应的收费或者免费课程。
6，搜索页面，点击搜索就把搜索框以下的内容全部隐藏，然后弹出键盘，先在 data 中去定义记录高度的属性， 将 onresize 事件在 mounted 挂载一下watch监听比较，判断键盘是否弹出,进行操作。
7，用watch监听input输入框，如果什么都没的话就显示空空如也，没有显示任何内容。
返回列表
评论