预约咨询小程序源码预约咨询小程序源码 TP+uniapp

2501_91795279

于 2025-04-24 09:16:16 发布

阅读量712

点赞数 23

文章标签： uni-app

本文链接：https://blog.csdn.net/2501_91795279/article/details/147468977

版权

预约咨询小程序源码开源：TP+uniapp全栈开发实践

一、项目概述

本项目是一个基于ThinkPHP 6和uniapp的全栈预约咨询小程序解决方案，现已完全开源。系统包含完整的预约流程、咨询师管理、用户中心、消息通知等核心功能模块。

技术栈组成

后端：ThinkPHP 6 + MySQL + Redis
前端：uniapp + Vuex + uView UI
部署：Docker + Nginx
微信生态：小程序原生API + 云开发能力
源码地址：pan.baidu.com/s/1zTf0tLpwRR0VcvKpSrujxg?pwd=fqre 提取码: fqre

二、源码获取与项目初始化

2.1 源码仓库

复制

下载

GitHub仓库: https://github.com/yourname/appointment-miniprogram
Gitee镜像: https://gitee.com/yourname/appointment-miniprogram

2.2 环境准备

bash

复制

下载

# 后端依赖安装
cd api
composer install

# 前端依赖安装
cd ../uniapp
npm install

2.3 数据库初始化

sql

复制

下载

-- 创建数据库
CREATE DATABASE `appointment_db` DEFAULT CHARACTER SET utf8mb4;

-- 导入SQL文件（位于database目录）
mysql -u root -p appointment_db < database/schema.sql

三、核心模块源码解析

3.1 预约流程时序图

微信服务MySQLRedis后端前端用户微信服务MySQLRedis后端前端用户选择咨询师/日期获取可预约时间返回时间段列表选择时间/提交表单提交预约请求加锁防止并发创建预约记录发送订阅消息返回预约结果

3.2 数据库ER图关键部分

3.3 特色功能实现代码

3.3.1 智能时间推荐算法

php

复制

下载

// app/service/TimeRecommendService.php
public function recommendTimes($consultantId, $userId)
{
    // 获取用户历史偏好
    $userPrefs = $this->getUserTimePreferences($userId);
    
    // 获取咨询师空闲时间
    $available = $this->appointmentService
                ->getAvailableTimes($consultantId, date('Y-m-d'));
    
    // 使用加权算法推荐
    $recommended = [];
    foreach ($available as $time) {
        $hour = date('H', strtotime($time));
        $weight = $userPrefs[$hour] ?? 1; // 默认权重1
        
        // 周末上午时段加权
        if ($this->isWeekend() && $hour < 12) {
            $weight *= 1.5;
        }
        
        $recommended[] = [
            'time' => $time,
            'weight' => $weight
        ];
    }
    
    // 按权重排序
    usort($recommended, function($a, $b) {
        return $b['weight'] <=> $a['weight'];
    });
    
    return array_column($recommended, 'time');
}

3.3.2 可视化日历组件

vue

复制

下载

<!-- components/Calendar.vue -->
<template>
  <view class="calendar">
    <view class="header">
      <text @click="prevMonth">◀</text>
      <text>{{ currentYear }}年{{ currentMonth }}月</text>
      <text @click="nextMonth">▶</text>
    </view>
    <view class="weekdays">
      <text v-for="day in weekdays" :key="day">{{ day }}</text>
    </view>
    <view class="days">
      <text 
        v-for="(day, index) in days" 
        :key="index"
        :class="[
          'day', 
          day.status,
          { 'today': day.isToday }
        ]"
        @click="selectDay(day)"
      >
        {{ day.date }}
        <view v-if="day.hasAppoint" class="dot"></view>
      </text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    appointments: Array,
    consultantId: Number
  },
  data() {
    return {
      currentDate: new Date(),
      weekdays: ['日', '一', '二', '三', '四', '五', '六']
    }
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear()
    },
    currentMonth() {
      return this.currentDate.getMonth() + 1
    },
    days() {
      // 生成当月日历数据
      const days = []
      const firstDay = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth(),
        1
      )
      const lastDay = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth() + 1,
        0
      )
      
      // 上个月补全
      for (let i = 0; i < firstDay.getDay(); i++) {
        days.push({ date: '', status: 'disabled' })
      }
      
      // 当月日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(
          this.currentDate.getFullYear(),
          this.currentDate.getMonth(),
          i
        )
        const dateStr = date.toISOString().split('T')[0]
        const isToday = this.isToday(date)
        const hasAppoint = this.appointments.some(
          a => a.appoint_time.startsWith(dateStr)
        )
        
        days.push({
          date: i,
          dateObj: date,
          status: this.getDayStatus(date),
          isToday,
          hasAppoint
        })
      }
      
      return days
    }
  },
  methods: {
    getDayStatus(date) {
      // 实现日期状态判断逻辑
      // 返回 'available' | 'booked' | 'disabled'
    },
    selectDay(day) {
      if (day.status === 'available') {
        this.$emit('select', day.dateObj)
      }
    }
  }
}
</script>

四、项目部署指南

4.1 Docker部署方案

dockerfile

复制

下载

# docker-compose.yml
version: '3'
services:
  app:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "8000:80"
    volumes:
      - ./api:/var/www/html
    depends_on:
      - mysql
      - redis

  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: appointment_db
    ports:
      - "3306:3306"
    volumes:
      - ./data/mysql:/var/lib/mysql

  redis:
    image: redis:alpine
    ports:
      - "6379:6379"

4.2 微信小程序配置

javascript

复制

下载

// uniapp/src/manifest.json
{
  "mp-weixin": {
    "appid": "YOUR_APPID",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "postcss": true
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "用于推荐附近的咨询师"
      }
    }
  }
}

五、二次开发指南

5.1 自定义字段扩展

数据库迁移：

php

复制

下载

// database/migrations/2023_add_custom_field.php
class AddCustomField extends Migration
{
    public function up()
    {
        Schema::table('appointments', function (Blueprint $table) {
            $table->string('custom_field')->nullable()->comment('自定义字段');
        });
    }
}

前端表单扩展：

vue

复制

下载

<!-- 在预约表单中添加 -->
<view class="form-item">
  <text>自定义需求</text>
  <input v-model="form.custom_field" placeholder="请输入您的特殊需求" />
</view>

5.2 多咨询类型支持改造

数据模型修改：

php

复制

下载

// app/model/Appointment.php
protected $fillable = [
    // 原有字段...
    'consult_type', // 新增咨询类型字段
    'type_specific' // 类型特定数据
];

业务逻辑调整：

php

复制

下载

public function create(array $data)
{
    // 根据咨询类型验证不同规则
    if ($data['consult_type'] === 'video') {
        $this->validateVideoConsultData($data);
    } elseif ($data['consult_type'] === 'onsite') {
        $this->validateOnsiteData($data);
    }
    
    // 后续创建逻辑...
}