一、产品原型地址https://rzx365.axshare.com/密码12345
二、 用户角色描述
三、 产品概述
小程序旨在提供一个信息交流平台，使得希望参与校内校园社群活动或校外活动（如志愿活动、招聘实习等）的学生能够在小程序广场页面寻找正在发布中的活动，同时规划后期搭建针对活动的发言区和组队匹配功能，极大方便活动参与者的活动参与。另一方面不论是校园内还是校园外的活动发布者也能够利用这一平台发布活动，同时接收到发布活动的浏览量反馈。
每一个活动的详细页面包含活动名、发布单位、活动简介（不超过200字）、奖品设置、主办方联系方式，参与者账号或发布者账号都可以将心仪的活动添加到个人收藏夹，并在个人中心追踪该活动。在个人中心页面可以进入往期活动成就夹，查看已经完成或已经成功举办的活动。
后期针对发布者账号权限的交接问题，将采用保留原账号数据，通过二维码方式将原账号权限转交给另一账号，同时原账号变更为参与者账号的方式，确保发布者账号作为个人账号使用不受限
1、 目标
针对校园内信息流通渠道有限的现象，小程序希望搭建一个针对大学生的活动交流平台，更好的提高活动参与者参与活动的积极性和计划性，丰富大学生活，另外活动年表及发言区功能也能在一定程度上解决学生迷茫选择活动的问题。同时小程序还希望解决活动发布者的宣传需求，提高校内外活动发布者的宣传广度和深度。最终目标是达成小程序社群成熟建立，需要寻找校园活动的同学习惯性浏览平台，校内外发布者习惯性在此平台发布活动信息吸引流量的良性循环，不仅提高活动参与的积极性，拓宽校园活动发布渠道，打造集中的信息交流平台，同时能在一定程度上连接校园内各个学院，甚至达成不同校区、不同学校、不同地域间的联谊。
2、 总体流程
3 功能摘要
四、 产品特性
本章将详细介绍活动公告栏广场、活动公告板详情栏、个人主页、账户注册、活动发言区这五个模块，各个模块及页面的详细功能和详细实现特性与效果。活动后台数据包括【活动名称，主办单位，起止日期，海报缩略图，类型标签，活动简介，奖项设置，社群联系方式“字段”，社群联系方式“图片”，审核标签，活动编号，属性标签】用户后台数据包括【账户类型，所属社区，（具体单位），年龄，（偏好活动发布类型），相关活动编号（数组形式存储）】
名称。
2） 导航栏使用图片进行显示，置于（20px，90px）处，宽高（60px，40px），每个按钮间隔20px，或视实际情况对其进行四等均分。
3） 点击对应按钮后对应位置出现一个（70px，50px）的加深背景框常亮且显示活动保持分类状态，颜色选择RGB（121，121，121）并将按钮图片进行加深处理。
4） 再次点击分类按钮取消活动分类且取消前一步骤的所有变化。
{{chooseList[index]}}
chooseList:function(event)
{
let index=event.currentTarget.dataset.index;
let type=this.data.chooseList[index]; //获取传递的信息
if(this.data.typeChoosed!=type) //选择某一选项
{this.data.chooseListColor[index]='brightness(70%)'; //涂黑
this.setData({chooseListColor:this.data.chooseListColor})
this.setData({typeChoosed:type})
var a= net.getNoteDataByChoose(type);//更新数据
var that=this;
draw.draw(a,that,'clear');}
else{
this.data.chooseListColor[index]='brightness(100%)'; //取消选择
this.setData({chooseListColor:this.data.chooseListColor})
this.setData({typeChoosed:''})
var a= net.getNoteData(0);
var that=this;
draw.draw(a,that,'clear');
}
},
1.3.2 活动显示板
特性描述：显示活动信息，显示之前对活动数据进行时间排序比较，按照距当前日期升序排序（即越靠近当前日期的活动所处位置越高）。
需求描述：
1）活动背景木板大小（330px，100px）。内部文本框大小（300px，30px），距离上边框20px，左边框15px，文字使用“华文新魏”，活动名称字号20，主办方与起止时间字号10。内部海报图片大小（300px，40px），距离左边框15px，上边框50px。
2）根据活动属性标签决定是否在木板右上角添加标签图片，若活动开始日期距离当前日期<3天，则添加“ComingSoon”标签。且置顶活动，若同一时期存在同一开始日期的活动，则随机排列。若当前日期处于活动起止日期间则添加“OnGoing”标签，且该标签置顶优先级大于“ComingSoon”标签。
3）每一个木板上下边框相距20px，一个页面显示5个活动信息，一次用户请求加载20条活动信息，上滑操作可滑动活动信息并顺次显示，当滑至底部时请求另外加载20条活动信息。
4）点击活动显示板可进入对应活动详情页面。
1.3.3 进入个人主页
特性描述：初步设计右滑滑块进入个人主页，并根据用户数据的【账户类型】进入不同页面。
需求描述：
1）滑块大小（30px，32px），背景条形图片大小（284px，32px），放置位置适合即可，内衬文字“华文新魏”，字号16，颜色RGB（255，255，255）。
2）拖动滑块右滑，同时背景条形图案随滑块消失，若未滑到最右端则滑块回弹。滑块滑到最右端时，若账户类型为“增量用户”，则进入注册页面，且注册完毕后返回广场页面，若为增量用户则进入对应个人主页。
onchange:function(e)
{
let screenWidth= wx.getSystemInfoSync().windowWidth ; //获取屏幕宽度
console.log(550*screenWidth/750);
if(e.detail.x>=550*screenWidth/750) //换算
{
wx.navigateTo({
url: '../../page/me/me', //导航
})
}
}
})
需求描述：
1） 活动简介显示板可与广场页面复用。内容部分“华文行楷”，13号字。引流部分，上半部分为文字，下半部分为图片。
2） 主内容面板参考尺寸（332px，320px），上下间隔20px；引流内容面板参考尺寸（332px，200px），内部图片大小参考尺寸（100px，100px）。
2.3.2 收藏/取消收藏
特性描述：若为存量用户，右滑滑块至底部可以收藏该活动，即将该活动编号添加到个人账户【活动编号】中，若为增量用户则跳转进入注册界面，注册结束后进入广场页面。
需求描述：
1） 滑块大小（30px，32px），滑条大小（332px，32px），字体“华文新魏”，13号。
2） 判断用户【账号类型】，若为增量用户则进入注册页面，若为存量用户则将该活动编号加入用户数据中。
3） 收藏后滑块保持位置在最右边，并跳出一个居中按钮“取消收藏”，点击取消收藏则从个人数据中删除活动编号且滑块回弹。
2.3.3发言/组队区
特性描述：点击该按钮进入该活动的发言及组队区域。
需求描述：
1）该按钮使用图片素材，参考大小（70px，30px）。
2）用户点击该按钮进入发言/组队区
2.3.4 左/右滑进入下/上一条活动
特性描述：在主面板进行右滑操作进入广场页面加载的20条活动中的下一条，故在从广场页面进入活动详情页面时需要保留缓存的20条活动的活动编号及其顺序。
需求描述：
1） 当该活动为第一条活动时，只在页面右方有小箭头，且无法右滑，为最后一条时相反，其余情况左右均有箭头标识。
2） 箭头位置建议（300px，355px）。
methods: {
touchStart: function (e) {
this.data.startX = e.touches[0].pageX;
this.data.move= true;
},
touchMove: function (e) { //判定左右滑
this.data.endX = e.touches[0].pageX;
if (this.data.move) {
if (this.data.endX - this.data.startX > 50) {
this.data.position='left'; this.reflesh();
this.data.move = false;
}
if (this.data.startX - this.data.endX > 50) {
this.data.position='right'; this.reflesh();
this.data.move = false;
}
}},
touchEnd: function (e) {
this.data.move = true; // 回复滑动事件
},
reflesh:function(){ //根据左右滑刷新页面
var app=getApp();
let id=app.globalData.idon;
let data=getCurrentPages()[0].data.Data;
console.log(id);
console.log(data);
const pages = getCurrentPages()
const perpage = pages[pages.length - 1]
let num = data.findIndex((item, index) => {
return item._id==id;
})
if((num+10)&&(this.data.position=='left'))
{
app.globalData.idon=data[num-1]._id;
perpage.onLoad()
}
}
}
3、 个人主页
3.1 页面概述
个人主页分为参与者页面和发布者页面，两账号类型页面显示类似，故暂以参与者页面为例。该页面需要呈现用户所属社区；收藏的活动显示区；收藏/成就转换按钮；“我有话说”按钮用于用户反馈意见；当参与者点击“我要发布”按钮时询问后跳至发布者注册页面，发布者点击该按钮时跳转进入发布活动页面。
3.2 功能摘要
1） 内容显示区
2） 收藏/成就转换按钮
3） “我有话说”按钮进入反馈页
4） “我要发布”按钮进入发布页
3.3.1 内容显示
特性说明：左上角显示用户所属社区，该区域呈现的活动信息可与广场页呈现的活动显示板复用，同样显示5条，每次加载20条，加载时根据活动的属性标签对活动进行排序并呈现，当点击收藏/成就按钮后页面显示转换为成就页面。
需求描述：
1） 左上角社区显示，字体“华文行楷”，加粗，36号。收藏/成就按钮参考大小（40px，40px）。底部按钮参考大小（147px，39px），内嵌字体“华文新魏”，18号。
2） 根据活动起止日期及当前日期的对比对活动添加属性标签。若开始日期远大于当前日期，属性标签为None；开始日期+3天<当前日期，属性标签为“ComingSoon”；开始日期<当前日期<截止日期，属性标签为“OnGoing”；截止日期<当前日期，若审核标签为“已发布”，属性标签为“Finished”，审核标签为“None”，属性标签为“Congratulation”；审核标签为“已发布”，当前日期<截止日期，属性标签为“Published”。
3） 标签优先级：审核标签“未审核”>Published>OnGoing>ComingSoon>None
4） 活动面板页面按照标签优先级对活动进行排序及置顶显示，标签为None的按时间升序排列。对应标签活动显示板右上角添加素材库中准备好的标签样式。点击收藏/成就按钮后页面进行转换，对于参与者仅显示标签为“Congratulation”的活动，对于发布者仅显示“Finished”的活动。
3.3.4 “我要发布”
特性说明：点击“我要发布”按钮后，判断【账号类型】，若为参与者，则弹出选择框询问是否更改【账号类型】，若点击是则跳转进入注册页面的发布者注册页；若为发布者账号则进入该页面。该页面第一部分上传海报缩略图，后台自动对其进行处理后存入活动数据字段；第二部分用于填写活动名称、起止日期、活动简介、奖项设置等内容；第三部分用户点击“+”形图片后弹出提示框，提示框第一部分允许用户输入字段，上方配有提示语“联系方式”，下方允许用户选择相册内图片进行上传并限定最多3张。1） 三块面板参考大小（332px，100px）（332px，320px）（332px，200px）；上传海报处理大小为（300px，40px）并添加圆角；提交联系方式中上传的图片建议处理大小为（100px，100px）。各面板间隔20px。
2） 第一面便字体“华文行楷”，加粗，20号；第二面板提示字字体“Arial”，13号；第三面板字体“华文行楷”，加粗，16号。上传框内部字体统一“华文行楷”，字号16，背景选择纯色填充RGB（215，215，215），透明度60%。
3） 成功上传后该活动审核标签置为“正在审核”并存入后台服务端，待后台人工审核完毕后修改审核标签为“已发布”。
formSubmit(e) {
console.log('form发生了事件，携带数据为：', e.detail.value);
const db = wx.cloud.database({ env: 'hopeless00-cx362' });
let up=e.detail.value;
console.log(this.data.type[up.type]);
db.collection('NoteDate').add({ //小程序端完成上传操作
// data 字段表示需新增的 JSON 数据
data: {
Issuing: up.Issuing,
content:up.content,
title:up.title,
shown:false,
type:this.data.type[up.type],
datestart:new Date(up.datestart),
dateend:new Date(up.dateend),
fileID:this.data.fileID_pic,
fileID_QR:this.data.fileID_QR,
fileID_QR2:this.data.fileID_QR2,
fileID_QR3:this.data.fileID_QR3,
inputPersonal:this.data.inputPersonal
}
})
.then(res => {
console.log(res);
var id=res._id;
console.log(id);
wx.cloud.callFunction({ //调用云函数更新用户数据
// 云函数名称
name: 'UserSelect',
// 传给云函数的参数
data: {
id:id,
type:"add"
},
})
this.setData({selected:true});
var toast = this.selectComponent('#toast'); //调用组件显示提示框
toast.showModal({title:'提示',content:'提交成功，请等待审核',shown:true});
})
.catch(
)
}
4、 注册页
4.1 页面概述
进入注册页先选择注册成为参与者还是发布者，而后进入对应注册页面，两个账号类型均需要设置所属社区及细分单位或组织，参与者需选择年龄段，该年龄端数据在后端中每过一个学年自动更新一次。发布者需选择偏向发布活动类型及上传证明图片及材料；参与者注册完成后直接生成账号，发布者需等待后台人工审核。
4.2 功能摘要
1） 选择注册账号类型
2） 注册时未填写完毕的“未填写完毕”提示框
3） 发布者注册上传证明图片或链接
4） 图片等使用素材库内文件，标题字体“华文新魏”，加粗，14号；“完成！”字样字体“华文行楷”，加粗，36号。
5） 发布者的上传框图样等均与活动发布时的上传框相同。
5、 发言/组队区
5.1 页面概述
该页面为用户提供一个针对特定活动的发言交流区，用户既可以在此处发表自己针对该活动的看法，也可以看到他人对于该活动的评价，即有一定的攻略属性。同时下方区域的组队按钮可以匹配同时按下该按钮的用户，并建立一个简易的对话框供双方进行交流或交换信息。
5.2 功能摘要
1） 弹幕式发言
2） 组队匹配按钮及匹配提示框
3） 发言键入区
5.3 特性说明
5.3.1 弹幕发言显示
特性描述：每条发言以弹幕形式出现，同时每一条发言信息前显示发言用户的头像。
需求描述：
1） 弹幕信息参考设定值，头像大小（66px，66px），弹幕背景边框纯色填充RGB（215，215，215）透明度60%，圆角。每条信息间间隔20px-30px。弹幕字体为“华文行楷”，20号。
2） 组队按钮（65px，65px），长按将在1.5秒内放大1.5倍、缩小回原大小3次，并作180°旋转，在动画播放同时进行匹配，后将匹配结果显示出来，显示的面板包括用户头像（50px，50px），微信名（“华文行楷”，加粗，20号），是否进入聊天区（“华文行楷”，加粗，16号）。
3） 发言框点击呼出键盘并可键入发言信息进行发布。
4） 图标大小（64px，62px）。所有的发言信息存储为【活动编号，头像，发言】形式，需要在后端接入接口使得后台能够通过活动编号查询所有发言内容并作删改操作。
