博客主页 | 起凡Code闲聊

飞鸽邮筒

商品/购物车/订单/寄信/小程序

ChatGPT二次开发实战

spring websocket/stream 请求/markdown/vue3

多模块微服务实战

用maven构建多模块的项目，每个项目采用六边形领域驱动架构，最后用docker部署

起凡商城

全栈项目，电商经典业务商品规格，优惠券，订单状态机，支付，拉新营销等等

dive-into-spring-ai

《动手学SpringAI》SSE流/Agent智能体/知识图谱RAG/FunctionCall/历史消息/图片生成/图片理解/Embedding/向量库

提交订单

订单创建（图1）

页面：box-order-create.vue

表设计

从创建订单的页面中可以分成三类信息

盲盒信息，购买的盲盒id以及盲盒数量。
通用信息，地址/优惠券/备注/物流信息（发货后显示）
价格计算，vip优惠/优惠券优惠/邮费/商品总价/实付金额

盲盒订单

create table mystery_box_order
(
    id            varchar(32) not null
        primary key,
    created_time  datetime(6) not null,
    edited_time   datetime(6) not null,
    creator_id    varchar(32) not null,
    editor_id     varchar(32) not null,
    status        varchar(32) not null comment '订单状态',
    base_order_id varchar(32) not null comment '基础订单id'
)
    comment '盲盒订单';

起凡大约 6 分钟

运费模板

表设计

前端的输入表单可以看见是比较动态且复杂的，这种配置数据适合用json类型存储。configs字段用来存储运费配置。

valid字段标识全局唯一生效的运费模板。

create table carriage_template
(
    id           varchar(36)   not null
        primary key,
    created_time datetime(6)   not null,
    edited_time  datetime(6)   not null,
    creator_id   varchar(36)   not null,
    editor_id    varchar(36)   not null,
    name         varchar(255)  not null comment '模板名称',
    description  varchar(1000) not null comment '运费模板描述',
    configs      json          not null comment '运费配置',
    valid        tinyint(1)    not null comment '是否生效（全局只能存在一个生效）'
)
    comment '运费模板';

起凡大约 3 分钟

会员

会员页面（图1）

开通会员（图2）

表设计

在图二中用户购买套餐（vip_package），在后端会生成一个vip订单(vip_order)记录了要购买的套餐，支付成功后会在vip中增加到期时间（图1中展示）。

create table vip
(
    id           varchar(32) not null
        primary key,
    created_time datetime(6) not null,
    edited_time  datetime(6) not null,
    creator_id   varchar(32) not null,
    editor_id    varchar(32) not null,
    user_id      varchar(32) not null comment '用户id',
    end_time     datetime(6) not null comment '到期时间'
)
    comment '会员信息';

起凡大约 4 分钟

订单支付

1-3 订单创建阶段，包含盲盒、地址、优惠券等信息
4-8 预支付阶段，后端会调用微信支付接口生成一个预支付订单，订单信息，包括订单金额、支付人信息、支付相关参数等。
9-15 小程序支付，小程序端发起支付用户输入密码确认支付阶段。
16-19 支付回调，随机生成从盲盒中挑选商品生成

起凡大约 2 分钟

用户优惠券

优惠券列表

优惠券展示和选择

用户优惠券的入口有两个，一个是用户中心页面，一个是订单创建页面。下面介绍各种操作在不同的来源下的逻辑

优惠券列表查询
- 来自订单创建：传商品总金额过滤符合使用门槛且可使用的优惠券
- 来自用户中心：查询所有可使用的优惠券
立即使用按钮
- 来自订单创建：点击立即使用，返回到订单创建页面，并传送已选的优惠券
- 来自用户中心：跳转到盲盒列表
取消使用按钮：
- 来自订单创建：跳转到优惠券列表时传输已选的优惠券id，此时优惠券会显示取消使用，点击即可返回到订单创建页面并取消优惠券

起凡大约 3 分钟

优惠券中心

起凡小于 1 分钟

优惠券

优惠券创建（图1）

优惠券赠送（图2）

表设计

图1中的表单字段和优惠券表的字段可以一一对应。如果优惠类型是打折，那么discount字段就是必填，amount字段可为空。如果优惠券类型是满减，那么相反。

create table coupon
(
    id                varchar(36)    not null
        primary key,
    created_time      datetime(6)    not null,
    edited_time       datetime(6)    not null,
    creator_id        varchar(36)    not null,
    editor_id         varchar(36)    not null,
    name              varchar(255)   not null comment '优惠券名称',
    threshold_amount  decimal(10, 2) not null comment '使用门槛',
    released_quantity int            not null comment '发放数量',
    coupon_type       varchar(36)    not null comment '优惠类型（打折，满减）',
    scope_type        varchar(36)    not null comment '使用范围（通用，指定商品，类别）',
    amount            decimal(10, 2) null comment '优惠金额',
    discount          decimal(4, 2)  null comment '折扣',
    status            tinyint(1)     null comment '是否启用',
    effective_date    datetime       not null comment '生效日期',
    expiration_dae    datetime       not null comment '失效日期',
    constraint coupon_pk
        unique (name)
)
    comment '优惠券';

起凡大约 3 分钟

地址簿

起凡小于 1 分钟

地址列表

长按菜单

表设计

地址表没有太复杂的逻辑，结合页面就可以看出每个字段的含义了

create table address
(
    id           varchar(36)  not null
        primary key,
    created_time datetime(6)  not null,
    edited_time  datetime(6)  not null,
    creator_id   varchar(36)  not null,
    editor_id    varchar(36)  not null,
    latitude     double       not null comment '维度',
    longitude    double       not null comment '经度',
    details      varchar(255) not null comment '详细地址',
    province     varchar(255) not null comment '省',
    city         varchar(255) not null comment '市',
    district     varchar(255) not null comment '区',
    phone_number varchar(255) not null comment '手机号',
    real_name    varchar(255) not null comment '真实姓名',
    house_number varchar(255) not null comment '门牌号',
    top          tinyint(1)   not null comment '是否置顶'
)
    comment '地址表';

起凡大约 3 分钟

地址保存

地址保存（图1）

地址选择（图2）

实现解析

整个代码可以分3块

调用Taro.chooseLocation选地点，如图2所示，选择完后只会返回经度、维度、地址详情。少了省、市、区。
地址回显，如果是编辑地址，需要加载地址信息回显。创建地址则不需要
地址保存，填写完地址，进行字段校验后提交到后端

起凡大约 3 分钟

起凡code闲聊

表设计

盲盒订单

表设计

表设计

优惠券展示和选择

表设计

表设计

实现解析