产品来源
作为学校电子技术部曾经的成员,在第一次接触到云开发时,就想将部门内现有的产品迁移到腾讯云·云开发上。
我们部门致力于为全校师生提供电子技术服务,包括:电脑维修、软件安装、网络排障、电子技术普及等等。主要涉及到师生所遇到问题的提交、处理问题成员的安排等等。
我们最早是在QQ群内提出,由专人进行统计,然后再进行安排。后来,我们开发了网页,方便师生提交问题,去年,我们开发了APP进行部门成员的工作安排。带来的服务器运维成本一年在百元以上。
在了解一番云开发之后,我开始提议部门改用腾讯云·云开发,目前正在迁移中。
应用场景
主要是大学学生社团、部门的成员管理,和向外提供志愿服务接口的部门。
另外也可以是涉及维修方面的公司进行人员管理和任务分发。
目标用户
大学内部门成员
实现思路
Web端实现报修单的收集,小程序端进行成员管理和报修单安排。
- Web
- 用户:师生
- 功能:填写报修单
- 小程序
- 用户:部门成员
- 功能:报修单志愿服务分配、成员管理、成员信息查看
计划下一步上线QQ小程序,方便报修人员对报修单进展状态进行了解。
架构图
效果截图
web手机端页面(基本上所有流量都是从QQ手机端进入)
小程序界面:
更多页面,可以看我们的演示视频
功能代码展示
WEB端的图片上传处理:
// 图片读取前处理
beforeRead(file){
if ((file.type !== 'image/jpeg')&&(file.type !== 'image/png')) {
Toast('请上传jpg或者png格式图片');
return false
}
return true
},
// 限制图片大小
overImg(file){
Toast('图片大小不能超过2M')
},
// 上传图片
upImg(file) {
file.status = 'uploading'
file.message = '上传中...'
console.log(file.file)
console.log(file.file.name)
app.uploadFile({
cloudPath: "order/"+file.file.name,
filePath: file.file
}).then((result) => {
// 上传结果
console.log(result)
console.log(this.img)
file.status = 'done'
file.message = '上传成功'
file.fileID = result.fileID
}).catch((err)=>{
file.status = 'failed'
file.message = '上传失败'
})
},
// 删除图片
deleteImg(file){
console.log(file)
app.deleteFile({
fileList: [file.fileID]
}).then((res) => {
res.fileList.forEach((el) => {
if (el.code === "SUCCESS") {
//删除成功
console.log('删除成功')
} else {
}
});
});
return true
},
提交表单:
// 提交表单
async reportFormSubmit(values){
// flag标识是否存在相同订单,index标识该同学提交报修单的_id
let flag = true
let orderID = 0
// 查看是否存在重复报修单
await app.callFunction({
name:"getRepeatOrder",
data:{
tel:this.tel
}
}).then(res => {
console.log(res)
flag = res.result
}).catch(e => {
console.log('error',e)
Dialog.alert({
title: '云函数(repeat)调取失败',
message: '抱歉,请联系群管理员处理,群号:459121889,谢谢!',
}).then(() => {
window.location.href = `https://timelines.fun/`
});
})
if(flag){
Dialog.alert({
title: '提交失败',
message: '您已经有提交过报修单,请等待同学与您联系,谢谢您的理解',
}).then(() => {
window.location.href = `https://timelines.fun/`
});
return
}
// 查询报修单总数,并指定当前报修单id
await app.callFunction({
name:"getOrderTotal"
}).then(res => {
console.log(res)
orderID = res.result+1
}).catch(e => {
console.log('error',e)
Dialog.alert({
title: '云函数(total)调取失败',
message: '抱歉,请联系群管理员处理,群号:459121889,谢谢!',
}).then(() => {
window.location.href = `https://timelines.fun/`
});
return
})
// 仅存储图片在云存储中的fileID
let errorImg = []
for(let i = 0; i < values.errorImg.length;i++){
errorImg.push(values.errorImg[i].fileID)
}
// 提交表单
const db = app.database();
const collection = db.collection("repair_order");
await collection.add({
_id: orderID,
user_name: this.name,
user_tel: this.tel,
user_qq: this.qq,
user_campus: this.campus,
user_college: this.college,
user_grade: this.grade,
user_park: this.park,
user_freetime: this.freetime,
user_computer: this.computer,
user_error: this.error,
user_reason: this.reason,
user_img: errorImg,
// 1为待接单,2为待维修,3为已维修,0为逻辑删除
order_status: 1,
order_createTime:db.serverDate()
}).then((res) => {
Dialog.alert({
title: '提交成功',
message: '一般1~3个工作日,会有同学通过QQ联系您',
}).then(() => {
window.location.href = `https://timelines.fun/`
});
}).catch((e) => {
Dialog.alert({
title: '表单提交失败',
message: '抱歉给您带来不好的体验,请加群:459121889,联系管理员解决,谢谢。',
}).then(() => {
window.location.href = `https://timelines.fun/`
});
});
}
}
小程序获取用户openid和登录权限校验
// 获取用户OpenID
getOpenID(){
const that = this
wx.cloud.callFunction({
name:'getWXOpenID',
success:res => {
console.log(res.result)
that.setData({
openid:res.result
})
getApp().globalData.openid = res.result
},
fail: err =>{
console.log(err)
}
})
},
// 开启小程序之旅
onStart(){
const that = this
const db = wx.cloud.database()
db.collection('staff_info').where({
_openid:that.data.openid
}).get().then(res => {
if(res.data.length === 0){
console.log('未注册...')
wx.redirectTo({
url: '../apply/apply'
})
}else{
if(res.data[0].staff_state > 0){
console.log('开启电服之旅...')
wx.switchTab({
url: '../workbench/workbench'
})
}
else if(res.data[0].staff_state < 0){
Dialog.alert({
message: '抱歉,您暂未通过申请...',
})
}
else{
Dialog.alert({
message: '我们正在加急处理您的申请,申请通过后,我们会通知您,谢谢理解,mua爱你~~~',
})
}
}
})
}
同意入部,云函数:
const tcb = require('@cloudbase/node-sdk');
const app = tcb.init({
env:'etd-mhhhf'
})
// 数据库实例
const db = app.database();
exports.main = async (event, context) => {
let _id = event._id
let flag = false
await db.collection("staff_info").doc(_id).update({
staff_state:1
}).then(res =>{
flag = res
})
return flag
};
作品体验二维码
暂时还在审核…
团队简介
团队由一位大三计算机专业和一位大四设计专业成员组成。
本人大三,在今年疫情期间第一次接触云开发,然后一直在学习和使用云开发。在八月份得知小程序云开发挑战赛之后,开始学习小程序与小程序云开发相关知识。于九月份开始小程序的制作,由于与原始网页和、APP端对接问题,暂时完成情况并不理想,希望有机会参加下一次比赛。