上门服务小程序订单系统框架设计

发布于:2025-06-05 ⋅ 阅读:(25) ⋅ 点赞:(0)

一、逻辑分析

上门服务小程序订单系统主要涉及服务展示、用户下单、订单处理、服务人员接单与服务完成反馈等核心流程。

  1. 服务展示:不同类型的上门服务(如家政、维修等)需要在小程序中展示详细信息,包括服务名称、价格、服务内容介绍等,以便用户了解并选择。
  2. 用户下单:用户选择服务、填写服务地址、预约服务时间等信息后提交订单。系统需要记录订单相关信息,并生成订单号。
  3. 订单处理:订单提交后,系统进行初步审核,检查订单信息完整性等。同时,将订单分配给合适的服务人员,或者由服务人员自行接单。
  4. 服务人员接单:服务人员收到订单通知后,确认是否接单。若接单,可查看订单详细信息并与用户沟通服务细节。
  5. 服务完成反馈:服务完成后,服务人员提交服务完成信息,用户对服务进行评价,系统记录评价信息,用于后续服务质量评估等。

二、程序框架结构化输出

前端部分

  1. 服务列表页面:展示各种上门服务类型,每个服务项包含图片、名称、价格等基本信息,点击可进入服务详情页。
  2. 服务详情页面:详细展示服务内容、服务时长、注意事项等,提供下单按钮。
  3. 下单页面:用户填写服务地址、预约时间、备注信息等,确认订单信息并提交。
  4. 订单列表页面:用户可查看自己的订单列表,包括订单状态(待处理、已接单、服务中、已完成等),点击订单可查看订单详情。
  5. 订单详情页面:展示订单详细信息,如服务内容、服务人员信息(若已接单)、服务时间、地址等,已完成订单可进行评价操作。

后端部分

  1. 用户管理模块:负责用户注册、登录信息的管理,以及用户基本信息(如姓名、联系方式等)的存储与查询。
  2. 服务管理模块:管理上门服务的信息,包括服务的添加、修改、删除,以及服务信息的查询展示。
  3. 订单管理模块:处理订单的创建、分配、状态更新等操作,记录订单相关的所有信息。
  4. 服务人员管理模块:管理服务人员的信息,包括服务人员注册、登录、服务技能、工作状态等信息的维护,以及服务人员与订单的关联。
  5. 数据库:存储用户信息、服务信息、订单信息、服务人员信息等所有系统相关数据。

三、解决方案

前端代码示例(以支付宝小程序为例)

  1. 服务列表页面(serviceList.axml)
<view class="service-list">
  <block wx:for="{{serviceList}}" wx:key="id">
    <view class="service-item" bindtap="navigateToServiceDetail">
      <image src="{{item.imageUrl}}" class="service-image" />
      <text class="service-name">{{item.serviceName}}</text>
      <text class="service-price">价格:{{item.price}}元</text>
    </view>
  </block>
</view>

  1. 服务列表页面样式(serviceList.acss)
.service-list {
  padding: 10px;
}

.service-item {
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
}

.service-name {
  font-size: 16px;
  margin-top: 10px;
}

.service-price {
  font-size: 14px;
  color: #f00;
  margin-top: 5px;
}

  1. 服务列表页面逻辑(serviceList.js)
Page({
  data: {
    serviceList: []
  },

  onLoad: function() {
    // 模拟从后端获取服务列表数据
    this.setData({
      serviceList: [
        {
          id: 1,
          serviceName: '家电维修',
          imageUrl: 'https://example.com/appliance-repair.jpg
   ,
          price: 100
        },
        {
          id: 2,
          serviceName: '家政保洁',
          imageUrl: 'https://example.com/housekeeping.jpg',
          price: 150
        }
      ]
    });
  },

  navigateToServiceDetail: function(event) {
    const serviceId = event.currentTarget.dataset.id;
    my.navigateTo({
      url: `/pages/serviceDetail/serviceDetail?id=${serviceId}`
    });
  }
});
  1. 服务详情页面(serviceDetail.axml)
<view class="service-detail">
  <image src="{{service.imageUrl}}" class="service-image" />
  <text class="service-name">{{service.serviceName}}</text>
  <text class="service-content">服务内容:{{service.content}}</text>
  <text class="service-price">价格:{{service.price}}元</text>
  <button bindtap="navigateToOrderPage">立即下单</button>
</view>

  1. 服务详情页面样式(serviceDetail.acss)
.service-detail {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
}

.service-name {
  font-size: 18px;
  margin-top: 10px;
}

.service-content {
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.6;
}

.service-price {
  font-size: 16px;
  color: #f00;
  margin-top: 10px;
}

button {
  margin-top: 20px;
  width: 150px;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}

  1. 服务详情页面逻辑(serviceDetail.js)
Page({
  data: {
    service: {}
  },

  onLoad: function(options) {
    const serviceId = options.id;
    // 模拟从后端获取服务详情数据
    const serviceList = this.data.serviceList;
    const service = serviceList.find(item => item.id === parseInt(serviceId));
    this.setData({
      service
    });
  },

  navigateToOrderPage: function() {
    my.navigateTo({
      url: `/pages/orderPage/orderPage?serviceId=${this.data.service.id}`
    });
  }
});

后端代码示例(以 Python + Django 为例)

  1. 项目初始化
mkdir service_order_system
cd service_order_system
python -m venv venv
source venv/bin/activate  # Windows下使用 `venv\Scripts\activate`
pip install django
django-admin startproject service_order_project
cd service_order_project
python manage.py startapp service_app

  1. 定义模型(service_app/models.py)
from django.db import models

class User(models.Model):
    username = models.CharField(max_length=50)
    phone_number = models.CharField(max_length=15)
    # 其他用户信息字段

class Service(models.Model):
    service_name = models.CharField(max_length=100)
    content = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)
    # 其他服务信息字段

class Order(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    service = models.ForeignKey(Service, on_delete=models.CASCADE)
    order_time = models.DateTimeField(auto_now_add=True)
    service_time = models.DateTimeField()
    address = models.CharField(max_length=200)
    status = models.CharField(max_length=20, choices=(
        ('pending', '待处理'),
        ('accepted', '已接单'),
        ('in_progress', '服务中'),
        ('completed', '已完成')
    ), default='pending')
    # 其他订单信息字段

class ServiceProvider(models.Model):
    name = models.CharField(max_length=50)
    phone_number = models
 # 其他服务人员信息字段
    skills = models.CharField(max_length=200)
    status = models.CharField(max_length=20, choices=(
        ('available', '空闲'),
        ('busy', '忙碌')
    ), default='available')

 

  1. 配置数据库(service_order_project/settings.py)
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

  1. 创建视图(service_app/views.py)
from django.shortcuts import render, HttpResponse
from.models import Service, Order
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json


def get_services(request):
    services = Service.objects.all()
    service_list = []
    for service in services:
        service_info = {
            "id": service.id,
            "serviceName": service.service_name,
            "imageUrl": "",  # 这里假设暂时没有图片字段,后续可添加
            "content": service.content,
            "price": float(service.price)
        }
        service_list.append(service_info)
    return JsonResponse(service_list, safe=False)


@csrf_exempt
def create_order(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        user_id = data.get('userId')
        service_id = data.get('serviceId')
        service_time = data.get('serviceTime')
        address = data.get('address')

        from.models import User
        user = User.objects.get(id=user_id)
        service = Service.objects.get(id=service_id)

        new_order = Order(
            user=user,
            service=service,
            service_time=service_time,
            address=address
        )
        new_order.save()
        return JsonResponse({"message": "订单创建成功", "orderId": new_order.id}, status=201)
    return JsonResponse({"message": "无效的请求方法"}, status=405)


def get_orders(request):
    orders = Order.objects.all()
    order_list = []
    for order in orders:
        order_info = {
            "id": order.id,
            "userId": order.user.id,
            "serviceId": order.service.id,
            "orderTime": str(order.order_time),
            "serviceTime": str(order.service_time),
            "address": order.address,
            "status": order.status
        }
        order_list.append(order_info)
    return JsonResponse(order_list, safe=False)


def update_order_status(request, order_id):
    if request.method == 'PUT':
        data = json.loads(request.body)
        new_status = data.get('status')
        try:
            order = Order.objects.get(id=order_id)
            order.status = new_status
            order.save()
            return JsonResponse({"message": "订单状态更新成功"}, status=200)
        except Order.Doesn'tExist:
            return JsonResponse({"message": "订单未找到"}, status=404)
    return JsonResponse({"message": "无效的请求方法"}, status=405)

  1. 定义路由(service_app/urls.py)
from django.urls import path
from. import views

urlpatterns = [
    path('services/', views.get_services, name='get_services'),
    path('orders/', views.get_orders, name='get_orders'),
    path('orders/create/', views.create_order, name='create_order'),
    path('orders/<int:order_id>/status/', views.update_order_status, name='update_order_status')
]

  1. 配置总路由(service_order_project/urls.py)
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('service_app.urls'))
]

代码解释

  1. 前端代码
    • 以支付宝小程序为例,通过多个页面(服务列表、服务详情、下单等页面)实现用户与系统的交互。每个页面有相应的布局(.axml 文件)、样式(.acss 文件)和逻辑处理(.js 文件)。例如,服务列表页面展示服务项并提供进入详情页的入口,详情页展示服务详细信息并提供下单按钮,

      下单后跳转到下单页面进行订单信息填写等操作。
      2. 后端代码

    • 使用 Python 的 Django 框架搭建后端服务。
    • 模型定义:在 models.py 中定义了 User(用户)、Service(服务)、Order(订单)和 ServiceProvider(服务人员)等模型,用于存储系统相关数据,各模型之间通过外键建立关联关系。
    • 视图函数views.py 中定义了多个视图函数来处理不同的业务逻辑。例如,get_services 函数用于获取所有服务信息并以 JSON 格式返回给前端;create_order 函数处理用户下单请求,创建新订单并保存到数据库;get_orders 函数获取所有订单信息并返回;update_order_status 函数用于更新订单状态。
    • 路由设置:在 service_app/urls.py 中定义了各个视图函数对应的 URL 路径,然后在项目总路由 service_order_project/urls.py 中包含了应用的路由。

总结

以上前端和后端代码示例共同构建了一个简单的上门服务小程序订单系统的基本框架。前端负责用户界面展示和用户交互,后端负责数据存储、业务逻辑处理以及与前端的数据交互。通过这样的设计,用户可以在小程序中浏览服务、下单,系统能够处理订单并跟踪订单状态,服务人员也可以根据订单状态进行相应操作。在实际应用中,还需要进一步完善功能,如用户认证、服务人员管理功能、更复杂的订单分配逻辑、数据验证以及性能优化等方面的内容 。

 


网站公告

今日签到

点亮在社区的每一天
去签到