从0到1:基于微信云开发的4S店汽车服务预约小程序的开发笔记上

0 阅读3分钟

绪论

  • 研究背景与意义: 阐述传统4S店服务模式的痛点(排队久、信息不透明),以及移动互联网在汽车后市场服务中的应用价值。
  • 国内外研究现状: 简述汽车服务类APP/小程序的发展趋势。
  • 论文主要工作: 介绍本系统旨在解决预约试驾、维保、活动管理等问题。

系统需求分析

功能性需求:

用户端: 在线试驾预约、维保服务预约、活动浏览与报名、签到核销、评价反馈。 管理端: 预约管理(审核/导出Excel)、活动管理、公告发布、用户管理、数据统计。

非功能性需求: 安全性、响应速度、易用性。

在这里插入图片描述

数据库设计

字段名数据类型长度说明备注
user_idstring32用户ID (OpenID)主键
nicknamestring50昵称
avatarstring200头像URL
phonestring11手机号唯一索引
real_namestring20真实姓名
create_timetimestamp-注册时间
字段名数据类型长度说明备注
appoint_idstring32预约ID主键
user_idstring32用户ID外键
typeint2类型 (1试驾 2维保)
car_modelstring50车型
appoint_timetimestamp-预约时间
statusint2状态 (0待审核 1已通过 2已拒绝)
remarkstring200备注
字段名数据类型长度说明备注
act_idstring32活动ID主键
titlestring100活动标题
contenttext-活动详情
cover_imgstring200封面图URL
start_timetimestamp-开始时间
end_timetimestamp-结束时间
max_numint5人数上限
字段名数据类型长度说明备注
check_idstring32签到ID主键
act_idstring32关联活动ID
user_idstring32用户ID
check_timetimestamp-签到时间
operatorstring20操作员 (管理员账号)

核心代码实现

// app.js
App({
  onLaunch: function () {
    // 初始化云开发环境
    // 注意:此处的 ID 需替换为文档中四.2章节创建的实际环境ID
    wx.cloud.init({
      env: 'dev-5gf0o85o226fad1d', 
      traceUser: true
    })
    
    // 登录获取 OpenID
    wx.cloud.callFunction({
      name: 'mcloud',
      data: { type: 'login' }
    })
  },
  globalData: {}
})

// pages/appoint/appoint.js
Page({
  data: {
    timeList: ['09:00', '10:00', '14:00', '15:00'],
    selectTime: ''
  },

  // 提交预约
  submitAppoint() {
    const db = wx.cloud.database()
    db.collection('appointments').add({
      data: {
        userId: wx.getStorageSync('userId'),
        type: this.data.serviceType, // 1试驾 2维保
        time: this.data.selectTime,
        phone: this.data.phone,
        status: 0, // 待审核
        createTime: db.serverDate()
      },
      success: res => {
        wx.showToast({ title: '预约成功' })
        // 对应文档:后台管理功能 - 预约名单管理
      },
      fail: err => {
        wx.showToast({ icon: 'none', title: '提交失败' })
      }
    })
  }
})

// cloudfunctions/mcloud/index.js
const cloud = require('wx-server-sdk')
cloud.init()

// 引入数据库操作工具
const db = cloud.database()
const _ = db.command

// 主函数
exports.main = async (event, context) => {
  const { action } = event // 动作类型:getActivityList, createAppoint 等

  try {
    switch (action) {
      // 获取活动列表 (对应文档:活动数据统计)
      case 'getActivityList':
        return await db.collection('activities')
          .where({ status: 1 })
          .orderBy('start_time', 'desc')
          .limit(10)
          .get()

      // 后台导出Excel逻辑 (对应文档:后台预约名单管理和导出 Excel)
      case 'exportAppoints':
        const wxContext = cloud.getWXContext()
        // 权限校验:确保是管理员(admin)调用
        if (wxContext.OPENID !== 'ADMIN_OPENID') {
          return { code: -1, msg: '权限不足' }
        }
        
        // 这里通常会调用云开发的文件上传或生成 CSV 逻辑
        // 省略具体生成文件的复杂代码,返回数据列表供前端生成
        const list = await db.collection('appointments').get()
        return { code: 0, data: list.data }

      default:
        return { code: -1, msg: '无效操作' }
    }
  } catch (e) {
    console.error(e)
    return { code: -1, msg: e.message }
  }
}

// 后台管理 login.js
Page({
  login() {
    const username = this.data.username; // 如 'admin'
    const password = this.data.password; // 如 '123456'
    
    // 调用云函数验证管理员身份
    wx.cloud.callFunction({
      name: 'mcloud',
      data: { 
        action: 'adminLogin', 
        username, 
        password 
      },
      success: res => {
        if(res.result.code === 0) {
          wx.setStorageSync('adminToken', res.result.token)
          wx.showToast({title: '登录成功'})
          // 跳转至后台首页
        } else {
          wx.showToast({icon: 'none', title: '账号或密码错误'})
        }
      }
    })
  }
})

UI设计

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

管理系统设计

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

git代码下载

点击下载