持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
前端设计的目的：
- 更加深入理解产品需求
- 任务拆解和工时评估
- 解决技术复杂度和业务复杂度问题
- 前后端接口协议约定，确定依赖方的工作内容
一、版本概况
背景
回收商在与卖家聊天时，由于咨询人员较多，所以需要分配给客服处理。所以需要做客服分单机制以及客服转单机制。同时回收商与卖家可在IM内直接交易。
需求地址
项目实际原型地址
涉及项目
www，seller，businesscs(新增)
二、页面操作流程
sdk实名认证失败前端页面跳转流程图
流程图补充
- 打开微信支付链接的位置：自动登录、账号登录、第三方登录（QQ、微信）、手机号注册、快速注册和手机号注册
- 涉及前端所有改动均判断微信环境内（仅微信内微信支付），避免影响到其他
- 实名认证关闭封装函数
三、代码逻辑设计
3.1、eg：nosleep不息屏（新功能调研）****
实现原理
手机浏览器在播放视频的时候，手机是不会进入睡眠状态的。因此如果你的WEB应用能实现此效果，那你就可以阻止手机屏幕进入睡眠状态了。NoSleep.js之所以可以阻止手机屏幕进入睡眠状态，就是因为它模拟持续播放一小段MP4视频。****
可行方案
使用NoSleep.js实现，已用demo实现需求，可用
技术风险及对应解决测略
1、移动端使用效果良好，实现了屏幕不熄灭，暂无其他影响，对性能无明显消耗，
2、在苹果手机使用后，手动关闭屏幕在亮起会看到有名为NoSleep的视频在播放器中，若用户禁止视频播放，或手动关闭视频，用户操作行为不可控；
3、PC端会导致电脑发热，可能对mac性能消耗较大，目前判断环境，在PC端不调用
4、某些环境下不能完全兼容，可以满足正常需求；
兼容问题社区地址：github.com/richtr/NoSl…
备选方案
xxxxxxxx 参考文献地址
3.2、访问权限控制
1、用户登陆后，后端返回该用户角色所拥有的菜单权限，具体数据格式如下：
var data = [
{
name: '账号回收管理',
path: '/accountBack',
icon: 'el-menu',
child: [
{
name: '回收客服设置',
path: '/accountBack/serverSetting',
icon: ''
},
{
name: '店铺设置',
path: '/accountBack/storeSetting',
icon: ''
},
{
name: '聊天列表',
path: '/accountBack/chatList',
icon: ''
},
{
name: '开始上班',
path: '/accountBack/startWorking',
icon: ''
}
]
}
]
2、编写所有功能完整的路由表
略
3、编写导航钩子，进行路由访问鉴权
在页面跳转时，将路由表和返回数据进行匹配，如果存在于返回数据中则正常跳转，如果不存在则跳转到任意页面。这里我们需要实现这个逻辑。以下为简单实现，只说明原理，不涉及细节。
// router为vue-router路由对象
router.beforeEach((to, from, next) => {
// ajax获取权限列表函数
// 这里省略了一些判断条件，比如判断是否已经拥有了权限数据等
getPermission().then(res => {
let isPermission = false
permissionList.forEach((v) => {
// 判断跳转的页面是否在权限列表中
if(v.path == to.fullPath){
isPermission = true
}
})
// 没有权限时跳转到401页面
if(!isPermission){
next({path: "/error/401", replace: true})
} else {
next()
}
})
})
四、前后端接口协议约定
五、风险点（非必须）
- 影响线上注册功能
- 影响实名认证功能
