产品来源

作为学校电子技术部曾经的成员，在第一次接触到云开发时，就想将部门内现有的产品迁移到腾讯云·云开发上。

我们部门致力于为全校师生提供电子技术服务，包括：电脑维修、软件安装、网络排障、电子技术普及等等。主要涉及到师生所遇到问题的提交、处理问题成员的安排等等。

我们最早是在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](/user/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端对接问题，暂时完成情况并不理想，希望有机会参加下一次比赛。