# 答题活动立项说明

针对答题项目模版，诣在客户层面，通过中台系统进行简单配置，能够在1天甚至更短时间内，快速生成项目并上线。

# 技术栈

Vite
TypeScript
Vue3
Sass
Axios
Eslint
Node.js

# 开发步骤

制定组件需求文档，注明组件所需props emits slot等（目标：组件文档）；
完成常用组件库封装，例如活动规则、登陆、排行榜等（目标：直接引入组件并进行简单配置注入后使用 <components :data="data"></components>）；
针对项目创建通用模版，例如答题类，引入所需组件后创建模版项目，使后续开发可git clone快速搭建（目标：重复需求产生时按照对应模版克隆建项）;
封装脚手架工具管理模版，使用Nodejs, commander、inquirer、download-git-repo等工具实现命令式添加模版地址，管理模版以及快速init download git repo（目标：脚手架发布到npm或自建包管理仓库，实现如：npm i -g mktzr-cli;（安装脚手架） mktzr-cli init answer-project target-dir;（根据模版名建项） mktzr-cli list;（查看模版列表））。

# 页面梳理

首页
活动规则（可选页面/弹窗）
排行榜（可选）
我的奖励（可选）（可选列表/单个）
答题页面
答题结果页面（可选页面/弹窗）
题目复盘（可选）
登陆弹窗（可选）
抽奖弹窗（如果选择登陆抽奖前验证功能，则不会出现中奖弹窗，登陆完成后自动抽奖，否则，需要抽奖弹窗）
奖励弹窗（可选红包/虚拟奖励/实物奖励）（可选直接发放/兑奖码发放/短信发放）

# 客户配置项

模版选择，提供3-5套不同设计风格模版，对应套图，供用户选择；
活动规则配置，TODO: 富文本编辑器？尽量提供可包含格式的，换行、缩进、加粗、序号等；
功能模块选择:
- [ ] 排行榜
- [ ] 我的奖励展示形式
  - [ ] 列表
  - [ ] 单个
- [ ] 答题结果展示形式
  - [ ] 单选页面
  - [ ] 单选弹窗
- [ ] 题目复盘
- [ ] 手机号登陆（收集用户手机号）（未选无此功能）
  - [ ] 开始答题验证
  - [ ] 抽奖前验证
- [ ] 发送奖励
  - [ ] 红包
  - [ ] 虚拟奖励（京东卡/虚拟卡券等）
  - [ ] 实物奖励
题库导入，预计采用excel导入功能，提供excel模版下载

题目选项答案单选/多选提示
答题设定
- 每次答题题目数量设定
- 答题成功判定标准，答对题目数量
- 答题次数限制
  - 按天 x次/天
  - 按总 x次/共
- 答题限时功能
  - 按每题 x秒/题
  - 按总 x秒（TODO: 按总有必要吗？）
- 选择答案后是否自动跳转下一题
- 答错后是否可到下一题
- 选择答案后是否显示当前答案正确与否
- 选择答案后是否显示正确答案
- 题目是否乱序
项目设定
- 项目标题
- 分享设定
  - 分享标题
  - 分享文案
  - 分享图片上传
  - 分享功能配置
    - 自定义微信菜单项，详见微信JS-SDK文档附录3 (opens new window)
- 项目开放时间
- 首页底部可添加风险提示
  - 居中/居左/居右
  - TODO: 可能不需要富文本编辑
  - 文字颜色
奖励配置（当功能模块选择勾选*发送奖励时）
- 红包
  - 金额（元，小数点后2位）
  - 数量
  - 概率
- 虚拟奖励（京东卡/虚拟卡券）
  - 发放方式
    - [ ] 短信发放（需功能模块选择勾选手机号登陆）
    - [ ] 兑奖码发放
    - [ ] 直接展示券码（需上传包含券码excel）
  - 奖品名称
  - 数量
  - 概率
- 实物奖励
  - 发放方式
    - [ ] 短信发放（需功能模块选择勾选手机号登陆）
    - [ ] 定义留存邮寄信息字段
      - [ ] 手机号
      - [ ] 姓名
      - [ ] 地址
  - 奖品名称
  - 数量
  - 概率
排行榜配置（当功能模块选择勾选排行榜时）
- 排行榜默认展示前几名
- 排行榜用户信息
  - [ ] 手机号后四位
  - [ ] 微信昵称
- 头像展示
  - [ ] 微信头像
  - [ ] 上传默认头像
  - [ ] 关闭头像显示
- 是否展示本人排名
  - [ ] 是
  - [ ] 否
- 排行榜截止时间
- 排行榜奖励（参照奖励配置，TODO: 排行榜奖励是否与上文奖励配置一起配置）
- 总用时相同排名策略
  - 根据答题时间先来的排在上面
  - 相同排名（可能导致排行榜奖励超出预计数量）

# 组件

# 活动规则组件

props：

注释	名称	类型	必须	默认值
活动规则内容	content	String	false
关闭按钮位置	closePosition	'bottom-center' \|\| 'top-right'	false	'bottom-center'

emit:

注释	名称	参数
切换显示状态	stateChange	当前显示状态:Boolean

slot: 该组件插槽为条件展示，当传递插槽时显示插槽内容，未传递插槽内容显示props.content内容

# 内部手机号登陆组件

props:

注释	名称	类型	必须	默认值
手机号placeholder	telPlaceholder	String	false	'请填写手机号'
短信验证码placeholder	verifyPlaceholder	String	false	'请填写验证码'
重新获取等待时间(s)	delay	Number	false	60
标题	title	String	false	'先登录再抽奖'
是否允许关闭	allowClose	Boolean	false	false

emits:

注释	名称	参数
提交登陆	login	{tel, verify}

# 排行榜

props:

注释	名称	类型	必须	默认值
排行榜数据	list	{[nickname: String, rank: Number, handImgUrl?: String]}	true
本人排名	myRanking	[nickname: String, rank: Number, handImgUrl?: String]	false	[]

# 答题

props:

注释	名称	类型	必须	默认值
题目列表	questions	[{question: String, correct: Number, option: Array}]	true
限时(s)	limitTime	Number	false	10
是否正确后才能进入下一题	needCorrect	boolean	false	false
是否自动跳转下一题	autoNext	boolean	false	true
是否显示当前答案正确与否	showChooseState	boolean	false	true
答错是否显示正确答案	showCorrent	boolean	false	true

emits:

注释	名称	参数
答题完成	complete	{userAnswers: Array, totalUseTime: Number(ms), correctCount: Number, questionOrder: Array}

# 题目

props:

注释	名称	类型	必须	默认值
题目信息	topic	{question: String, correct: Number, option: Array}	true
限时(s)	limitTime	Number	false	10

emits:

注释	名称	参数
作答	complete	(correct, choose)

# 奖励(兑奖码/直接发放/短信发放)

props:

注释	名称	类型	必须	默认值
标题	title	String	false	'恭喜您获得'
奖励名称	name	String	false	'微信红包'
奖励说明	desc	String	false	''
兑奖码	code	String	false	''

# 奖励(虚拟卡券券码)

props:

注释	名称	类型	必须	默认值
标题	title	String	false	'恭喜您获得'
奖励名称	name	String	true
券码字段	couponCode	[{fieldName: String, value: String}]	true
奖励说明	desc	String	false	''