发表于： 2019-08-19 20:32:00
1 830
今天完成的事情：
1.完成前台开发方案
一.开发工具
编译器：vsconde、webstorm
版本管理：svn
使用框架：vue-cli 3.10.0 文档：https://cli.vuejs.org/zh/
组件：element-ui 文档：https://element.eleme.cn/#/zh-CN
切图：photoshop
二.项目文档架构
三.方案设计
1、支付
需求描述
作为一个对课程感兴趣的用户，我想要支付购买课程或会员，以便于我可以解锁课程进行学习。
验收标准
1、支付方式只支持微信支付，成功调取支付接口，弹出支付窗口；
实现方案：
1.使用饿了么ui中的弹框
2.
//将支付的认证和回调 封装成函数
onBridgeReady(){
let that = this
WeixinJSBridge.invoke(
//微信支付的一些认证 需要去网站设置好 然后在这调用
'getBrandWCPayRequest', {
"appId":that.appId, //公众号名称，由商户传入
"timeStamp":that.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr":that.nonceStr, //随机串
"package":that.package,
"signType":that.signType, //微信签名方式：
"paySign":that.paySign //微信签名
},
function(res){
//这个是支付成功的回调
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// alert(1)
// alert(res.err_msg)
that.$router.push({
path:'/ing',
query:{
ordersn:that.ordersn
}
})
} else{
//else 支付不成功的回调
// alert(2)
// alert(res.err_msg)
that.$router.push({
path:'/ing',
query:{
ordersn:that.ordersn
}
})
}
});
},2、我的消息
需求描述
作为一个收到消息的用户，我想要查看这些发送给我的消息，以便于我可以及时处理。
验收标准
1、消息内容根据后台消息推送任务编辑；列表排序根据消息推送时间倒序排序；时间显示为消息进入到“我的消息”的时间；
2、未读消息图标右上角红点提示，点击进入活动页面即为已读，已读不提示；
3、点击跳转后台设置URL的“跳转连接”；
实现方案：
1.用饿了么ui中的layout布局来实现框架
2.调用后台接口，实现跳转到那个页面
3、我的
需求描述
作为一个个人信息有误或空缺的用户，我想要修改和完善个人信息，以便于我可以展示我的个性化，提高辨识度。
验收标准
1、个人信息显示头像、昵称、年级部，点击头像、年级部弹出选择窗口，点击昵称可编辑；
2、点击保存提示保存成功，未保存退出、返回，不保存变更数据；
3、点击客服电话弹出客服电话弹窗，点击呼叫直接拨号；
实现方案：
1.布局:flex
2.路由跳转:
默认进入个人中心
无请求参数,get请求调用接口,获得用户id 昵称 年级 用户头像
有以下可用组件
2.账户设置(同上)
3.个人资料(同上)
3.关于我们(写死)
4.客服电话(写死)
3.个人资料:
1.get请求调用接口获得用户id 昵称 年级 用户头像
2.修改个人资料:
切换年级
*ngif指令显示选择窗口
点击年级按钮,put发送请求更改个人资料,关闭窗口
切换个签
1.点击个人签名,跳转编辑签名组件
2.textarea标签来做,max-length限制字数,wrap控制换行,根据text.length显示还可输入多少字.zorro组件里好像有计数
3.required验证输入
4.disabled禁用按钮
4、会员中心
需求描述
作为一个想拥有更多权益的用户，我想要开通成为会员，以便于我可以获得更多的权益并能区分我和普通用户的不同。
验收标准
1、会员信息显示是否开通会员，开通会员显示到期时间；
2、点击分类，该分类标签变颜色区分，且支持tab标签切换；
3、点击选择套餐边框变红色，背景颜色加深区分；默认选择第一项；
4、套餐设置优惠价格时，显示“减”图标，未设置优惠价格，不显示图标；省“X”元！X=套餐价格-优惠价格；每天Y元 Y=套餐价格或优惠价格/会员期限天数；
5、支付金额跟选择套餐价格变化；
6、点击弹出支付弹窗，并生成订单；
实现方案：
1. 从后台获取数据是否开通了会员
2.在点初中或者高中的时候，从后台获取不同的数据，使用鼠标事件来实现tab的切换
3.初始状态默认是第一项，做点击事件，点击的时候，背景颜色加深，边框变成红色
4.调用后台的数据，
5.用数据监听，在循环中判断他们的位置来，实现是多少钱
6.使用饿了么ui来实现弹窗，支付成功后返回给后台数据
5、我的收藏
需求描述
作为一个将喜欢的任务进行了收藏的用户，我想要查看我收藏的任务，以便于我可以快速找到我喜欢的任务并进行学习。
验收标准
1、列表排序按收藏时间倒序排序，显示任务/习题名称以及所属章节-课程-学科-年级部；
2、点击实心心形图标提示弹窗“取消收藏成功”，图标变空心，任务/习题不从列表删除，点击空心图标提示弹窗“收藏成功”，图标变实心；
实现方案：
1. 带class参数,默认文章get请求 获取该用户收藏内容;
2.在点击取消或者收藏时，把数据发送给后台。
6、我的订单
需求描述
作为一个购买过课程或会员的用户，我想要查看我的订单，以便于我可以清楚的了解到我进行过哪些消费以及消费的明细。
验收标准
1、订单列表根据订单状态分类，支持tab切换，订单信息显示订单编号、订单状态、课程名称、课程所属学科（会员订单显示所属会员套餐）及金额，排序按用户提交订单时间倒序排序；
2、待支付订单，提示15分钟倒计时，计时结束订单自动取消，点击取消订单并确认可手动取消订单，状态变为已取消，点击去支付弹出支付窗口；
3、点击订单进入相应的“订单详情”页面；
4、订单详情显示信息与列表页相同；
5、点击客服电话弹出客服电话号弹窗；
6、订单信息显示订单编号及下单时间，已支付订单显示支付时间，已取消订单显示取消时间；
7、待支付订单详情，顶部显示15分钟倒计时，计时结束订单自动取消，点击取消订单并确认可手动取消订单，状态变为已取消，点击去支付弹出支付窗口；
实现方案：
1.布局:flex，获取后台数据
2.倒计时用组件来实现，取消或者支付都发送数据给后台来改变他们的属性
3.跳转页面
4. 获取后台数据与列表页同步
5.气泡提示框显示客服电话(写死)
6.条件判断，支付了就没有时间，没支付就有倒计时
7.同上
7、我的课程
需求描述
作为一个购买并学习过课程的用户，我想要查看我购买和学习的课程，以便于我可以了解课程进度并继续学习。
明天计划的事情：
1.开始复盘
遇到的问题：
1.暂时还没
收获：
1.梳理了下自己要写的代码
返回列表
评论