类别	技术栈
前端框架	Vue3 + TypeScript + Element Plus + Axios + Vue Router
后端框架	Spring Boot 3.x + Spring Security + MyBatis-Plus + Lombok
数据库	MySQL 8.0 + Redis 7.0（缓存和会话管理）
权限控制	JWT Token + Spring Security
支付集成	支付宝开放平台沙箱环境 + 微信支付API
地图服务	高德地图API
短信服务	阿里云短信服务
部署	Nginx + Docker + Jenkins

二、系统模块划分

1. 用户端功能

- 用户注册/登录（手机验证码）
- 服务分类浏览（保洁/月嫂/家电维修）
- 服务搜索与筛选
- 服务预约（时间选择+服务人员选择）
- 在线支付（支付宝/微信）
- 订单管理（状态跟踪）
- 评价系统（星级+文字）
- 个人中心（地址管理/优惠券）

2. 管理端功能

- 用户管理（客户/服务人员）
- 服务项目管理（类目/价格/库存）
- 订单管理（状态修改）
- 评价审核
- 数据统计（热销服务/营收报表）
- 通知推送（系统公告）

三、数据库设计（核心表）

-- 用户表
CREATE TABLE `user` (
  `id` BIGINT PRIMARY KEY AUTO_INCREMENT,
  `phone` VARCHAR(11) NOT NULL UNIQUE,
  `password` VARCHAR(100),
  `user_type` TINYINT COMMENT '0-客户 1-服务人员 2-管理员',
  `avatar` VARCHAR(255),
  `real_name` VARCHAR(20),
  `create_time` DATETIME
);

-- 服务表
CREATE TABLE `service` (
  `id` BIGINT PRIMARY KEY AUTO_INCREMENT,
  `title` VARCHAR(50) NOT NULL,
  `category_id` BIGINT COMMENT '服务分类',
  `price` DECIMAL(10,2) NOT NULL,
  `duration` INT COMMENT '服务时长（分钟）',
  `cover_image` VARCHAR(255),
  `description` TEXT,
  `worker_id` BIGINT COMMENT '默认服务人员'
);

-- 订单表
CREATE TABLE `order` (
  `id` VARCHAR(32) PRIMARY KEY COMMENT '订单号',
  `user_id` BIGINT NOT NULL,
  `service_id` BIGINT NOT NULL,
  `total_fee` DECIMAL(10,2),
  `status` TINYINT DEFAULT 0 COMMENT '0-待支付 1-已支付 2-服务中 3-已完成 4-已取消',
  `appointment_time` DATETIME COMMENT '预约时间',
  `address` VARCHAR(200),
  `pay_time` DATETIME,
  `transaction_id` VARCHAR(32) COMMENT '支付平台交易号'
);

四、后端核心实现

1. 订单支付接口（Spring Boot）

@RestController
@RequestMapping("/api/order")
public class OrderController {

    @PostMapping("/create")
    public Result<String> createOrder(@RequestBody OrderCreateDTO dto) {
        // 1. 验证服务库存
        Service service = serviceService.getById(dto.getServiceId());
        if (service.getStock() < 1) {
            throw new BusinessException("服务库存不足");
        }

        // 2. 生成订单号（雪花算法）
        String orderId = IdUtil.getSnowflakeNextIdStr();

        // 3. 创建订单
        Order order = new Order();
        order.setId(orderId);
        order.setUserId(SecurityUtils.getUserId());
        order.setServiceId(dto.getServiceId());
        order.setTotalFee(service.getPrice());
        orderMapper.insert(order);

        // 4. 减库存
        serviceService.deductStock(dto.getServiceId());

        return Result.success(orderId);
    }
}

2. 支付回调处理

@Slf4j
@RestController
@RequestMapping("/api/pay")
public class PayController {

    @PostMapping("/alipay/callback")
    public String alipayCallback(HttpServletRequest request) {
        // 验证签名
        boolean signVerified = AlipaySignature.rsaCheckV1(...);
        if (!signVerified) {
            return "failure";
        }

        // 处理业务逻辑
        String orderId = request.getParameter("out_trade_no");
        Order order = orderService.getById(orderId);
        if (order.getStatus() == 0) {
            order.setStatus(1);
            order.setPayTime(new Date());
            orderService.updateById(order);

            // 发送通知给服务人员
            messageService.sendNewOrderNotify(order);
        }

        return "success";
    }
}

五、前端核心实现（Vue3）

1. 服务预约组件

<template>
  <el-form :model="form">
    <el-date-picker 
      v-model="form.appointmentTime"
      type="datetime"
      :disabled-date="disabledDate"
    />

    <el-select v-model="form.workerId">
      <el-option 
        v-for="worker in availableWorkers" 
        :key="worker.id"
        :label="worker.realName"
        :value="worker.id"
      />
    </el-select>
  </el-form>
</template>

<script setup>
const loadAvailableWorkers = async () => {
  const res = await axios.get('/api/workers/available', {
    params: {
      serviceId: props.serviceId,
      date: form.appointmentTime
    }
  });
  availableWorkers.value = res.data;
};
</script>

2. 支付流程

// 发起支付
const handlePayment = async () => {
  const res = await axios.post('/api/pay/create', {
    orderId: orderId.value,
    channel: 'alipay' // 或 'wechat'
  });

  // 生成支付二维码
  if (res.data.qrCode) {
    QRCode.toCanvas(canvasRef.value, res.data.qrCode);
    startPollingPaymentStatus();
  }
};

// 轮询支付状态
const startPolling = () => {
  timer.value = setInterval(async () => {
    const res = await axios.get(`/api/order/${orderId.value}/status`);
    if (res.data.status !== 0) {
      clearInterval(timer.value);
      handlePaymentResult(res.data);
    }
  }, 3000);
};

六、部署方案

1. 前端：
   - 使用Vite打包生成dist
   - Nginx配置：
     location / {
         root   /home/housekeeping-front;
         try_files $uri $uri/ /index.html;
     }

2. 后端：
   - 使用Dockerfile构建Jar包镜像
   - docker-compose配置：
     services:
       app:
         image: housekeeping-backend:1.0
         ports:
           - "8080:8080"
         depends_on:
           - redis
           - mysql

3. 数据库：
   - 使用MySQL主从复制
   - Redis配置持久化