Vue3项目开发专题精讲【左扬精讲】—— 商城网站系统（基于 Vue3+TypeScript+Vite 的天天新鲜商城网站系统设计与实现）

商城网站系统（基于 Vue3+TypeScript+Vite 的天天新鲜商城网站系统设计与实现）

https://vue3-fresh-mall.zuoyang.tech/

      在前端技术高速迭代的当下，用户对 web 应用的性能、稳定性与开发效率提出了更高要求。Vue3 凭借 Composition API 带来的逻辑复用灵活性、基于 Proxy 的响应式优化，TypeScript 提供的静态类型检查与代码可维护性保障，以及 Vite 基于 ES 模块的极速热更新与构建能力，共同构成了现代化商城系统开发的最优技术栈之一。

      本文将详细介绍如何使用 Vue3+TypeScript+Vite 搭建 “天天新鲜商城” 网站系统，涵盖系统分析、系统运行配置及主要功能实现等核心内容，助力开发者快速掌握商城类项目的搭建流程。

一、系统设计（从需求到架构）

1.1、需求分析（明确核心目标与用户场景）

“天天新鲜商城”聚焦“新鲜商品线上零售”，核心用户分为普通消费者与后台运营人员，需覆盖“浏览 - 下单 - 支付 - 履约 - 售后”全链路场景：

用户角色
核心需求
关键场景
普通消费者
快速找到新鲜商品、了解商品详情、便捷下单、跟踪订单
1. 首页浏览推荐商品
2. 按分类筛选水果 / 蔬菜
3. 查看商品规格与评价
4. 结算时修改收货地址
5. 支付后查看物流
运营人员
管理商品上下架、配置优惠活动、查看订单数据
1. 上传新品并设置库存
2. 制作首页 Banner 促销活动
3. 处理用户退款申请

1.2、系统功能设计（7个核心页面）

“天天新鲜商城”以满足用户在线购买新鲜商品的需求为核心，围绕用户全链路场景（首页、商品详情页、商品分类页、商品结算页、个人信息页、订单信息页、支付详情页），设计七个核心页面，确保功能完整且逻辑连贯：​

      1. 首页功能：展示热门商品推荐、新品上架、优惠活动 Banner、商品分类导航入口，支持用户快速浏览和搜索商品，同时提供购物车入口和用户登录 / 注册入口。​
      2. 商品详情页功能：展示商品的详细信息（包括商品图片、名称、价格、规格、库存、详情描述等），支持用户选择商品规格、数量，加入购物车或直接购买，还提供相关商品推荐功能。​
      3. 商品分类页功能：按商品类型（如水果、蔬菜、肉类、海鲜等）进行分类展示，支持按价格、销量、好评率等条件筛选和排序商品，用户可快速找到目标分类下的所需商品。​
      4. 商品结算页功能：展示用户选中的待结算商品列表（含商品名称、单价、数量、小计），支持修改商品数量或删除商品，提供收货地址选择与编辑功能，计算订单总金额（含商品总价、运费、优惠抵扣等），并提供提交订单按钮。​
      5. 个人信息页功能：展示用户基本信息（如头像、昵称、手机号、会员等级等），支持用户修改个人信息（上传头像、编辑昵称等），提供收货地址管理（新增、编辑、删除地址）、账户安全设置（修改密码、绑定手机）等功能。​
      6. 订单信息页功能：按订单状态（全部、待付款、待发货、待收货、待评价、已完成、已取消）分类展示用户订单，支持查看订单详情（商品信息、收货信息、支付信息、物流信息等），提供取消订单、申请退款、确认收货、评价商品等操作按钮。​
      7. 支付详情页功能：展示订单待支付金额、订单编号、创建时间等信息，提供多种支付方式（如微信支付、支付宝支付、银行卡支付）选择，支持用户发起支付操作，同时提供查看订单详情和返回首页的入口，支付完成后跳转至订单详情页或支付成功提示页。

1.3、系统功能结构图

天天新鲜商城网站系统
├── 首页
│   ├── 顶部导航（logo、搜索框、购物车、用户入口）
│   ├── Banner轮播（优惠活动）
│   ├── 商品分类导航
│   ├── 热门商品推荐
│   ├── 新品上架区域
│   └── 底部信息（关于我们、联系方式、售后政策）
├── 商品详情页
│   ├── 商品图片展示（多图切换、放大查看）
│   ├── 商品基本信息（名称、价格、规格、库存）
│   ├── 商品规格选择（尺寸、重量、口味等）
│   ├── 商品数量调整
│   ├── 操作按钮（加入购物车、立即购买）
│   ├── 商品详情描述（图文）
│   ├── 相关商品推荐
│   └── 评价展示区域
├── 商品分类页
│   ├── 左侧分类菜单（按商品类型层级展示）
│   ├── 筛选条件区（价格区间、销量、好评率、品牌等）
│   ├── 排序选项（默认、价格升序/降序、销量降序、好评率降序）
│   ├── 商品列表（卡片式展示，含图片、名称、价格、销量、好评率）
│   └── 分页控件
├── 商品结算页
│   ├── 结算商品列表（商品图片、名称、单价、数量、小计、删除按钮）
│   ├── 收货地址区域（选择地址、编辑地址、新增地址）
│   ├── 订单金额计算区（商品总价、运费、优惠抵扣、实付金额）
│   └── 提交订单按钮
├── 个人信息页
│   ├── 用户信息展示（头像、昵称、手机号、会员等级）
│   ├── 信息编辑按钮（修改头像、昵称等）
│   ├── 功能菜单（收货地址管理、账户安全、我的收藏、售后服务）
│   └── 退出登录按钮
├── 订单信息页
│   ├── 订单状态筛选 tabs（全部、待付款、待发货等）
│   ├── 订单列表（每个订单含订单编号、创建时间、商品缩略图、总金额、订单状态、操作按钮）
│   └── 分页控件
└── 支付详情页
    ├── 待支付订单信息（订单编号、金额、创建时间）
    ├── 支付方式选择（微信、支付宝、银行卡）
    ├── 支付操作按钮（确认支付）
    ├── 辅助入口（查看订单详情、返回首页）
    └── 支付须知提示

二、​商城网站系统运行

2.1、系统文件结构

使用 Vue3+TypeScript+Vite 搭建的“天天新鲜商城”项目，采用模块化、规范化的文件结构，便于后期维护和扩展，具体结构如下：

fresh-mall-system/
├── .vscode/                # VSCode 配置文件
├── node_modules/           # 项目依赖包
├── public/                 # 静态资源（不经过打包处理）
│   ├── favicon.ico         # 网站图标
│   └── images/             # 公共图片（如默认头像、占位图）
├── src/                    # 项目源代码
│   ├── api/                # 接口请求相关
│   │   ├── index.ts        # 接口请求封装（axios 配置、请求拦截、响应拦截）
│   │   ├── goods.ts        # 商品相关接口（获取商品列表、商品详情）
│   │   ├── order.ts        # 订单相关接口（创建订单、获取订单列表）
│   │   ├── user.ts         # 用户相关接口（登录、获取个人信息、地址管理）
│   │   └── pay.ts          # 支付相关接口（创建支付、查询支付状态）
│   ├── assets/             # 静态资源（经过打包处理）
│   │   ├── css/            # 全局样式文件
│   │   │   ├── reset.css   # 样式重置文件
│   │   │   └── main.css    # 全局主样式
│   │   ├── icons/          # 图标资源（如购物车图标、用户图标）
│   │   └── images/         # 页面专用图片（如首页Banner图、分类图标）
│   ├── components/         # 公共组件
│   │   ├── common/         # 通用基础组件
│   │   │   ├── Navbar.vue  # 顶部导航栏组件
│   │   │   ├── Footer.vue  # 底部组件
│   │   │   ├── Card.vue    # 商品卡片组件
│   │   │   ├── Pagination.vue # 分页组件
│   │   │   └── Loading.vue # 加载组件
│   │   ├── goods/          # 商品相关组件
│   │   │   ├── GoodsList.vue # 商品列表组件
│   │   │   ├── GoodsDetail.vue # 商品详情组件（规格选择、数量调整）
│   │   │   └── GoodsFilter.vue # 商品筛选组件
│   │   ├── order/          # 订单相关组件
│   │   │   ├── OrderList.vue # 订单列表组件
│   │   │   ├── OrderDetail.vue # 订单详情组件
│   │   │   └── Settlement.vue # 结算组件（商品列表、金额计算）
│   │   ├── user/           # 用户相关组件
│   │   │   ├── UserInfo.vue # 个人信息组件
│   │   │   └── AddressList.vue # 地址列表组件
│   │   └── pay/            # 支付相关组件
│   │       └── PayMethod.vue # 支付方式选择组件
│   ├── router/             # 路由配置
│   │   └── index.ts        # 路由规则定义（首页、商品详情页等路由）
│   ├── store/              # 状态管理（Pinia）
│   │   ├── index.ts        # Pinia 实例创建
│   │   ├── modules/        # 模块划分
│   │   │   ├── cartStore.ts # 购物车状态管理（商品列表、数量修改）
│   │   │   ├── userStore.ts # 用户状态管理（登录状态、个人信息）
│   │   │   └── orderStore.ts # 订单状态管理（当前订单、订单列表）
│   ├── types/              # TypeScript 类型定义
│   │   ├── goods.ts        # 商品相关类型（商品信息、规格类型）
│   │   ├── order.ts        # 订单相关类型（订单信息、订单状态类型）
│   │   ├── user.ts         # 用户相关类型（用户信息、地址类型）
│   │   └── common.ts       # 通用类型（分页参数、接口响应类型）
│   ├── utils/              # 工具函数
│   │   ├── format.ts       # 格式化工具（时间格式化、价格格式化）
│   │   ├── storage.ts      # 本地存储工具（localStorage、sessionStorage 封装）
│   │   └── validator.ts    # 表单验证工具（手机号验证、地址验证）
│   ├── views/              # 页面组件（对应七个核心页面）
│   │   ├── Home.vue        # 首页
│   │   ├── GoodsDetail.vue # 商品详情页
│   │   ├── GoodsCategory.vue # 商品分类页
│   │   ├── Settlement.vue # 商品结算页
│   │   ├── UserInfo.vue    # 个人信息页
│   │   ├── OrderList.vue   # 订单信息页
│   │   └── PayDetail.vue   # 支付详情页
│   ├── App.vue             # 根组件
│   ├── main.ts             # 入口文件（创建Vue实例、挂载路由、Pinia等）
│   └── vite-env.d.ts       # Vite 环境类型声明
├── .env.development        # 开发环境配置（接口基础地址等）
├── .env.production         # 生产环境配置
├── .eslintrc.js            # ESLint 配置文件
├── .prettierrc             # Prettier 配置文件
├── index.html              # 入口HTML文件
├── package.json            # 项目依赖配置、脚本命令
├── tsconfig.json           # TypeScript 配置文件
├── tsconfig.node.json      # TypeScript 节点环境配置
└── vite.config.ts          # Vite 配置文件（端口、代理、插件等）

2.2、运行系统

2.2.1、环境准备

在运行项目前，需确保本地已安装以下环境：

      • Node.js（推荐 v18+，可通过 node -v 命令查看版本）​
      • npm 或 yarn（Node.js 自带 npm，可通过 npm -v 查看版本）

2.2.2、项目初始化与依赖安装

1、打开终端，创建项目（vue3-fresh-mall）：

> npm install -g create-vue
> create-vue vue3-fresh-mall

┌  Vue.js - The Progressive JavaScript Framework
│
◇  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  TypeScript, Router（单页面应用开发）, Pinia（状态管理）, ESLint（错误预防）, Prettier（代码格式化）
│
◇  选择要包含的试验特性： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  rolldown-vite（试验阶段）
│
◇  跳过所有示例代码，创建一个空白的 Vue 项目？
│  No

正在初始化项目 D:\workspace\vue3-fresh-mall...
│
└  项目初始化完成，可执行以下命令：

   cd vue3-fresh-mall
   npm install
   npm run format
   npm run dev

| 可选：使用以下命令在项目目录中初始化 Git：

   git init && git add -A && git commit -m "initial commit"

2、安装依赖包

npm install axios @types/axios tailwindcss @tailwindcss/typography @tailwindcss/forms autoprefixer postcss element-plus @element-plus/icons-vue

image

让我们手动创建 Tailwind 配置文件（vue3-fresh-mall/tailwind.config.js 和 vue3-fresh-mall/postcss.config.js）： 

/** vue3-fresh-mall/tailwind.config.js */

/** @type {import('tailwindcss').Config} */
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0fdf4',
          100: '#dcfce7',
          200: '#bbf7d0',
          300: '#86efac',
          400: '#4ade80',
          500: '#22c55e',
          600: '#16a34a',
          700: '#15803d',
          800: '#166534',
          900: '#14532d',
        },
        fresh: {
          green: '#00c851',
          orange: '#ff9800',
          red: '#e74c3c',
        },
      },
      fontFamily: {
        sans: ['PingFang SC', 'Microsoft YaHei', 'sans-serif'],
      },
    },
  },
  plugins: [forms, typography],
}
/** vue3-fresh-mall/postcss.config.js */

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3、安装过程中，终端会自动下载项目所需的依赖包，安装完成后会生成 node_modules 文件夹。

4、现在让我们更新main.css文件来引入Tailwind CSS：

遇到了问题，这个 Unknown at rule @tailwind css(unknownAtRules) 错误是因为 VS Code 的 CSS 语言服务不认识 Tailwind CSS 的 @tailwind 指令。虽然项目配置是正确的（有 postcss.config.js 和 tailwind.config.js），但 IDE 无法识别这些指令，解决办法如下（.vscode\settings.json）：

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "postcss.validate": false,
  "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    ["class:\\s*[\"'`]([^\"'`]*)[\"'`]", "[\"'`]([^\"'`]*)[\"'`]"],
    ["class\\s*=\\s*[\"'`]([^\"'`]*)[\"'`]", "[\"'`]([^\"'`]*)[\"'`]"]
  ],
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

现在让我也创建一个推荐的扩展配置文件（.vscode\extensions.json），确保项目使用正确的 VS Code 扩展：

{
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next"
  ]
}

5、现在让我们检查一下项目是否安装了所有依赖：

image

2.2.3、配置环境变量

根据实际开发需求，修改 .env.development（开发环境）和 .env.production（生产环境）中的配置，例如接口基础地址：​

        • 在 .env.development 中添加：VITE_API_BASE_URL = 'http://localhost:3000/api'（本地后端接口地址）​
        • 在 .env.production 中添加：VITE_API_BASE_URL = 'https://api.fresh-mall.com/api'（线上后端接口地址）

2.2.4、启动开发服务器

执行启动命令：

cd vue3-fresh-mall
npm install
npm run format
npm run dev

启动成功后，终端会显示类似以下信息：​

此时，在浏览器中访问 http://localhost:5173，即可看到 “天天新鲜商城” 的首页，开始进行开发调试。

image

2.2.4、创建必要文件目录

mkdir src\api

mkdir src\types, src\utils, src\stores\modules, src\components\common, src\components\goods, src\components\order, src\components\user, src\components\pay

现在创建一个public/images目录来存放图片资源：
mkdir public\images\banners, public\images\products, public\images\categories, public\images\avatars

2.2.5、构建生产版本

当项目开发完成后，执行构建命令生成生产环境的代码：

npm run build

构建完成后，会在项目根目录生成 dist 文件夹，该文件夹中包含了可部署到服务器的静态资源文件（HTML、CSS、JS、图片等）。将 dist 文件夹中的内容部署到 Nginx、Apache 等服务器上，即可实现商城系统的线上访问。​

三、系统主要功能实现

以下框架按 “页面模块→功能模块→实现要点→技术依赖→接口需求” 五级结构设计，明确每个功能的技术边界、实现逻辑与协作要求，便于需求对齐与进度跟踪。

3.1、首页的实现（/）

首页作为商城的入口页面，承载着展示品牌形象、引导用户浏览商品、促进转化的重要使命。基于Vue3的响应式设计和组件化开发，首页功能实现包含以下核心模块：

页面模块功能模块实现要点技术依赖接口需求
首页导航区 1. 顶部导航栏 1. Logo 点击跳转首页
2. 搜索框支持关键词联想（输入时实时触发接口）
3. 购物车图标显示商品数量红点（基于 Pinia 状态）
4. 用户入口：未登录显示 “登录 / 注册”，已登录显示头像下拉菜单（包含 “个人中心”“退出登录”）
5. 响应式适配：移动端隐藏搜索框，点击 “搜索图标” 弹出搜索面板		 1. Vue Router（路由跳转）
2. Pinia（userStore、cartStore）
3. Element Plus（ElInput、ElDropdown）
4. 自定义防抖函数（搜索输入节流）		 1. 搜索联想接口：GET /api/search/suggest?keyword={val}
2. 用户信息接口：GET /api/user/info（已登录时调用）
首页 Banner 区 2. 轮播图展示 1. 自动播放：默认 3 秒 / 次，支持循环播放
2. 交互控制：鼠标悬停暂停、点击指示器切换、左右箭头切换
3. 图片加载：优先加载首图，其余图片懒加载（使用loading占位图）
4. 跳转逻辑：点击 Banner 跳转活动页（路由/activity/:id）或商品页（/goods/:id）
5. 响应式：移动端自适应屏幕宽度，禁止缩放		 1. Element Plus（ElCarousel）
2. Vue3 生命周期（onMounted 初始化轮播，onUnmounted 清除定时器）
3. 图片懒加载指令（自定义v-lazy或使用vue-lazyload）		 1. Banner 列表接口：GET /api/banner/list?type=home（返回 Banner 图 URL、跳转类型、目标 ID）
分类导航区 3. 商品分类导航 1. 一级分类展示：图标 + 文字（水果 / 蔬菜 / 肉类 / 海鲜等）
2. 二级分类触发：鼠标 hover 一级分类时，下拉显示二级分类列表（如 “水果→苹果 / 香蕉 / 橙子”）
3. 选中状态：当前分类标红（匹配路由/category/:id时同步）
4. 移动端适配：点击一级分类弹出二级分类弹窗，支持关闭		 1. 递归组件（处理多级分类结构）
2. Vue Router（跳转/category/:id，携带分类 ID）
3. Tailwind CSS（下拉菜单样式、弹窗布局）		 1. 分类列表接口：GET /api/category/tree（返回id/name/icon/children层级结构）
商品推荐区 4. 热门推荐商品 1. 数据筛选：按近 30 天销量排序，取 TOP10 商品
2. 展示样式：2 列（移动端）/4 列（PC 端）卡片布局，每张卡片包含 “商品图、名称（超出 2 行省略）、原价（划线价）、现价、销量标签（已售 XX）”
3. 交互效果：鼠标 hover 时卡片上浮（transform: translateY(-4px)），显示 “快速加购” 按钮
4. 加载状态：数据未返回时显示骨架屏（Skeleton）		 1. Pinia（无状态，纯接口渲染）
2. 自定义组件（GoodsCard.vue）
3. 骨架屏组件（SkeletonGoods.vue）
4. Tailwind CSS（响应式网格布局）		 1. 热门商品接口：GET /api/goods/hot?limit=10（返回商品id/name/price/originalPrice/sales/image）
商品推荐区 5. 新品上市展示 1. 数据筛选：按上架时间倒序，取近 7 天新增商品（最多 8 个）
2. 标签标识：商品卡片左上角显示 “新品” 标签（红色背景，白色文字）
3. 加载逻辑：与热门商品共用骨架屏，支持 “查看更多”（跳转/category/new）
4. 库存提示：库存≤10 时标注 “库存紧张”		 1. 自定义组件（GoodsCard.vue，支持标签插槽）
2. Vue Router（“查看更多” 跳转）		 1. 新品列表接口：GET /api/goods/new?limit=8（返回商品信息 + 库存stock字段）
2. 新品更多接口：GET /api/goods/new?page={page}&limit=12（“查看更多” 触发）
商品推荐区 6. 限时特价商品 1. 数据筛选：后台配置的限时活动商品（含startTime/endTime/discountPrice）
2. 倒计时展示：每个商品卡片显示 “剩余 XX:XX:XX”，实时更新（基于dayjs计算）
3. 折扣标识：显示 “直降 XX 元” 或 “X 折” 标签
4. 库存控制：库存为 0 时卡片置灰，隐藏 “加购” 按钮
5. 活动失效：倒计时结束后自动隐藏该商品		 1. dayjs（时间格式化与倒计时计算）
2. Vue3 watchEffect（监听时间变化）
3. 自定义指令（v-countdown处理倒计时）		 1. 限时商品接口：GET /api/goods/discount（返回商品信息 +startTime/endTime/discountPrice）
商品推荐区 7. 热销排行榜 1. 排行维度：分为 “综合排行”（销量 + 好评率）、“分类排行”（当前选中分类下销量 TOP5）
2. 切换逻辑：顶部 Tabs 切换排行维度，切换时重新请求数据
3. 展示样式：左侧排名（1-5 标红，6-10 标灰）、右侧商品信息（同 GoodsCard）
4. 实时更新：每 10 分钟刷新一次排行数据（定时调用接口）		 1. Element Plus（ElTabs）
2. 定时任务（setInterval，组件卸载时清除）
3. Tailwind CSS（排名数字样式）		 1. 综合排行接口：GET /api/goods/rank?type=comprehensive&limit=10
2. 分类排行接口：GET /api/goods/rank?type=category&categoryId={id}&limit=10
首页底部区 8. 品牌特色展示 1. 特色模块：4 列布局，每列包含 “图标 + 标题 + 描述”（如 “新鲜保证→产地直采，全程冷链”）
2. 跳转逻辑：点击 “查看更多” 跳转 “关于我们” 页（/about）
3. 底部信息：包含 “售后政策”“联系方式”“微信公众号二维码”（PC 端显示完整，移动端折叠）		 1. Vue Router（跳转/about）
2. Tailwind CSS（网格布局、响应式折叠）		 无（静态数据，可配置在src/config/brand.ts）

3.2、商品详情页 (/goods/:id)

页面模块功能模块实现要点技术依赖接口需求
商品展示区 1. 商品图片系统 1. 多图切换：左侧缩略图列表（点击切换主图），右侧主图区域（支持左右滑动）
2. 图片放大：主图鼠标 hover 时显示局部放大（基于vue-photo-zoom-pro）
3. 视频支持：若商品有视频，主图区域显示 “播放按钮”，点击切换视频播放（暂停时显示封面图）
4. 加载优化：缩略图懒加载，主图优先加载 WebP 格式		 1. vue-photo-zoom-pro（图片放大）
2. Element Plus（ElImageViewer，全屏查看）
3. 自定义视频组件（VideoPlayer.vue）		 1. 商品图片接口：GET /api/goods/images?id={goodsId}（返回mainImages（主图列表）、videoUrl（视频地址，可选））
商品信息区 2. 基础信息展示 1. 标题：商品名称（PC 端显示完整，移动端超出 1 行省略，hover 显示完整）
2. 价格模块：现价（红色加粗）、原价（灰色划线）、会员价（若有，标注 “会员专享”）
3. 评分销量：星级评分（基于el-rate）、好评率（“98% 好评”）、累计销量（“已售 1.2 万 +”）
4. 优惠标签：满减标签（“满 39 减 5”）、新品标签（“NEW”），多个标签横向排列（超出滚动）		 1. Element Plus（ElRate、ElTag）
2. Tailwind CSS（价格样式、标签布局）		 1. 商品基础信息接口：GET /api/goods/info?id={goodsId}（返回name/price/originalPrice/memberPrice/sales/score/commentRate/tags）
商品操作区 3. 规格选择器 1. 规格展示：按 “维度分组”（如 “重量：500g/1kg”“口味：甜口 / 酸口”），每组规格为按钮组
2. 选中逻辑：同一维度只能选 1 个，选中后按钮标红 + 边框，未选中为灰色
3. 库存联动：选择规格后，实时显示对应库存（如 “库存：23 件”），库存为 0 时规格按钮置灰禁用
4. 价格联动：不同规格对应不同价格时，实时更新 “现价”（如选 “1kg” 后价格从 29.9→55.9）		 1. Pinia（无状态，纯本地计算）
2. 自定义规格组件（SpecSelector.vue）		 1. 商品规格接口：GET /api/goods/specs?id={goodsId}（返回specGroups（规格分组列表，含specName/specOptions）、specPrices（规格 - 价格映射）、specStocks（规格 - 库存映射））
商品操作区 4. 购买控制器 1. 数量调整：支持 “-/+” 按钮（最小 1，最大 = 当前规格库存）、手动输入（输入非数字时自动修正为 1）
2. 按钮功能：
- “加入购物车”：点击后调用接口，成功后弹出ElMessage提示，同时更新 cartStore 状态
- “立即购买”：点击后校验规格是否选中，选中则跳转结算页（/settlement?goodsId={id}&specId={specId}&num={num}）
3. 收藏功能：图标默认灰色，已收藏标红，点击切换收藏状态（调用接口）		 1. Pinia（cartStore，更新购物车数量）
2. Element Plus（ElButton、ElMessage、ElIcon）
3. 自定义数量组件（NumberInput.vue）		 1. 加入购物车接口：POST /api/cart/add（参数：goodsId/specId/num）
2. 收藏接口：POST /api/user/collect（参数：goodsId，切换收藏状态）
3. 收藏状态接口：GET /api/user/collect/status?id={goodsId}（判断是否已收藏）
商品详情区 5. 详情与评价 1. 标签切换：“商品详情”“用户评价”“售后保障” 三个 Tabs
2. 商品详情：富文本渲染（支持图片、文字、表格，后台配置）
3. 用户评价：
- 筛选：按 “好评 / 中评 / 差评” 切换
- 展示：评价列表（含用户头像、昵称、评分、评价内容、晒图（最多 3 张）、评价时间）
- 分页：每页 10 条，支持 “下一页”
4. 售后保障：静态文本（7 天无理由退货、质量问题包赔等）		 1. Element Plus（ElTabs、ElPagination、ElAvatar）
2. 富文本渲染组件（v-html，需过滤 XSS）
3. 自定义评价组件（CommentItem.vue）		 1. 商品详情接口：GET /api/goods/detail?id={goodsId}（返回richText（富文本内容））
2. 评价列表接口：GET /api/goods/comments?id={goodsId}&type={type}&page={page}&limit=10（type：all/good/middle/bad）
相关推荐区 6. 相关商品推荐 1. 数据逻辑：基于当前商品分类，推荐 3-5 个同类商品（排除当前商品）
2. 展示样式：横向滚动卡片（同首页 GoodsCard），PC 端显示 5 个，移动端显示 3 个
3. 加载状态：数据未返回时显示骨架屏		 1. 自定义组件（GoodsCard.vue）
2. Tailwind CSS（横向滚动布局）		 1. 相关商品接口：GET /api/goods/related?id={goodsId}&limit=5（返回商品基础信息，同首页热门商品）

3.3、商品分类页 (/category/:id)

页面模块功能模块实现要点技术依赖接口需求
分类筛选区 1. 左侧分类菜单 1. 层级展示：一级分类 + 二级分类（如 “水果→热带水果 / 温带水果”）
2. 选中状态：当前分类（路由/category/:id）标红，父分类展开
3. 交互逻辑：点击二级分类切换路由（/category/:id），更新右侧商品列表
4. 移动端适配：点击 “分类图标” 弹出侧边栏（ElDrawer），关闭后返回当前页		 1. Vue Router（路由参数监听）
2. Element Plus（ElDrawer、ElMenu）
3. 递归组件（CategoryMenu.vue）		 1. 分类树接口：GET /api/category/tree（同首页分类接口，返回层级结构）
分类筛选区 2. 筛选条件面板 1. 筛选维度：
- 价格区间：手动输入 “min-max”，或选择预设区间（0-20/20-50/50+）
- 品牌筛选：多选，选中品牌显示 “标签”（可删除）
- 特色标签：多选（如 “有机”“今日达”“进口”）
2. 筛选记忆：刷新页面或切换分类时，保留当前筛选条件（基于localStorage或路由参数）
3. 重置功能：“重置” 按钮清除所有筛选条件，恢复默认状态		 1. Element Plus（ElInputNumber、ElCheckboxGroup、ElTag）
2. localStorage（存储筛选条件，key：categoryFilter_{categoryId}）
3. 路由参数同步（将筛选条件拼接到 URL：/category/:id?priceMin=0&priceMax=20&brands=1,2）		 1. 筛选维度接口：GET /api/category/filters?id={categoryId}（返回priceRanges（价格区间）、brands（品牌列表）、tags（特色标签））
商品列表区 3. 排序控制器 1. 排序选项：下拉选择 “默认排序”“价格升序”“价格降序”“销量降序”“好评率降序”
2. 状态同步：选中排序项标红，且更新路由参数（&sort=price_asc）
3. 触发逻辑：切换排序时，重置页码为 1，重新请求商品列表		 1. Element Plus（ElSelect）
2. Vue Router（路由参数更新）		 无（排序参数通过商品列表接口传递）
商品列表区 4. 商品列表展示 1. 布局切换：支持 “网格布局”（PC 端 4 列、移动端 2 列）和 “列表布局”（1 列，显示更多商品信息），切换按钮在排序区右侧
2. 卡片内容：
- 网格布局：同首页 GoodsCard
- 列表布局：新增 “规格简介”“配送时间” 字段
3. 空状态：无匹配商品时，显示 “暂无商品，换个筛选条件试试～”+ 图标
4. 分页控件：显示 “当前页 / 总页数”，支持		    

3.4、结算页面 (/settlement)

页面模块功能模块实现要点技术依赖接口需求
结算头部区 1. 页面导航与标题 1. 标题：显示 “确认订单”，左侧 “返回” 按钮跳转上一页（基于$router.go(-1)）
2. 步骤指示器：显示 “购物车→确认订单→支付→完成”，当前处于 “确认订单” 步骤（标红激活）
3. 移动端适配：步骤指示器简化为 “确认订单” 文字，隐藏其他步骤		 1. Vue Router（路由回退）
2. 自定义步骤组件（StepIndicator.vue）		 无（静态导航，无需接口）
商品清单区 2. 结算商品列表 1. 商品展示：每张商品卡片包含 “缩略图、名称（超出 2 行省略）、规格（如 “500g / 份”）、单价、数量、小计（单价 × 数量）、删除按钮”
2. 数量调整：支持 “-/+” 按钮（最小 1，最大 = 库存，超出提示 “库存不足”），手动输入时校验合法性（非数字 / 超库存自动修正）
3. 删除逻辑：点击 “删除” 弹出确认弹窗（ElMessageBox），确认后移除商品并刷新金额计算
4. 空状态：商品列表为空时，显示 “购物车为空，去首页逛逛～”，提供 “去首页” 按钮（跳转/）		 1. Pinia（cartStore：获取商品列表、更新数量、删除商品）
2. Element Plus（ElMessageBox、ElButton）
3. 自定义商品卡片组件（SettlementGoodsCard.vue）		 1. 商品库存校验接口：GET /api/goods/stock?id={goodsId}&specId={specId}（数量调整时实时校验）
2. 购物车列表接口：GET /api/cart/list（页面初始化时拉取，与 cartStore 同步）
收货地址区 3. 地址选择与管理 1. 地址展示：
- 有默认地址：显示 “默认地址” 标签、收货人姓名、手机号（中间 4 位隐藏，如 “138****5678”）、详细地址（省 + 市 + 区 + 详细地址）
- 无地址：显示 “请添加收货地址” 占位图，提供 “添加地址” 按钮
2. 地址操作：
- 选择地址：点击 “选择地址” 弹出地址列表弹窗（AddressListPopup.vue），支持切换地址
- 新增地址：点击 “新增地址” 跳转地址编辑页（/user/address/add）
- 编辑地址：默认地址右侧显示 “编辑” 按钮，点击跳转/user/address/edit?id={addressId}
3. 弹窗逻辑：地址列表弹窗支持 “新增地址”（跳转编辑页）、“编辑地址”（当前地址右侧编辑按钮）		 1. Pinia（userStore：存储默认地址 ID）
2. Element Plus（ElPopup、ElRadioGroup：地址选择单选）
3. 自定义地址组件（AddressCard.vue、AddressListPopup.vue）		 1. 地址列表接口：GET /api/user/address/list（弹窗初始化、页面加载时拉取）
2. 默认地址接口：GET /api/user/address/default（页面加载时优先拉取默认地址）
费用计算区 4. 订单金额计算 1. 金额明细：
- 商品总价：所有商品 “小计” 求和（如 “商品总价：¥129.70”）
- 运费：满 59 元免运费，否则显示 “运费：¥8.00”（运费规则可配置）
- 优惠抵扣：若有可用优惠券 / 积分，显示 “优惠抵扣：-¥15.00”（点击 “优惠抵扣” 可跳转选择优惠券页/user/coupons）
- 实付金额：商品总价 + 运费 - 优惠抵扣，红色加粗（如 “实付：¥122.70”）
2. 实时更新：商品数量修改、地址切换（部分地区运费不同）、优惠变更时，立即重新计算所有金额
3. 优惠券状态：无可用优惠券时显示 “暂无可用优惠券”，点击跳转领券中心（/activity/coupons）		 1. Pinia（couponStore：存储选中的优惠券 ID）
2. 自定义计算工具（src/utils/priceCalculate.ts：封装金额求和、运费计算逻辑）
3. Tailwind CSS（金额样式，实付金额加大加粗）		 1. 运费计算接口：GET /api/order/freight?addressId={addressId}&goodsList={JSON.stringify(goods)}（地址切换、商品变更时调用）
2. 可用优惠券接口：GET /api/user/coupons/available?goodsList={JSON.stringify(goods)}（页面加载、商品变更时拉取可用优惠券）
下单操作区 5. 提交订单按钮 1. 按钮状态：
- 禁用场景：商品列表为空、无收货地址、金额计算异常时，按钮置灰禁用，hover 显示提示（如 “请先选择收货地址”）
- 正常场景：按钮红色，hover 加深，显示 “提交订单”
2. 点击逻辑：
1. 前置校验：再次校验商品库存（防止页面停留时库存变化）、地址合法性
2. 提交订单：调用创建订单接口，成功后获取orderId，跳转支付页（/pay/:orderId）
3. 异常处理：接口失败时弹出提示（如 “库存不足，请重新选择商品”），支持 “重试”
3. 加载状态：点击后按钮显示 “提交中...”，禁用点击（防止重复提交）		 1. Element Plus（ElButton、ElMessage、ElLoading）
2. Vue Router（跳转支付页）
3. 防抖处理（防止重复点击）		 1. 订单创建接口：POST /api/order/create（参数：goodsList（商品列表）、addressId（收货地址 ID）、couponId（优惠券 ID，可选）、payType（支付方式，默认微信支付））
2. 库存最终校验接口：POST /api/goods/stock/batchCheck（参数：goodsList，提交订单前二次校验）

3.5、个人中心 (/user)

页面模块功能模块实现要点技术依赖接口需求
用户信息区 1. 个人信息卡片 1. 头像展示与修改：
- 展示：圆形头像，默认使用public/images/avatars/default.png（未上传时）
- 修改：点击头像弹出文件选择器，支持上传图片（格式：JPG/PNG，大小≤2MB），上传后实时预览并调用接口保存
2. 基础信息：
- 昵称：显示用户昵称，右侧 “编辑” 图标（点击弹出输入框修改，支持实时保存）
- 手机号：显示 “138****5678”（中间 4 位隐藏，不可修改）
- 会员等级：显示等级图标 + 名称（如 “普通会员”），下方显示 “成长值：126/500（距离下一级还差 374）”
3. 会员入口：点击会员等级区域，跳转会员权益页（/user/member）		 1. Pinia（userStore：存储用户信息、更新头像 / 昵称）
2. Element Plus（ElUpload（头像上传）、ElInput（昵称修改）、ElMessage）
3. 图片压缩工具（src/utils/imageCompress.ts：上传前压缩图片，减少请求体积）		 1. 用户信息接口：GET /api/user/info（页面初始化时拉取）
2. 头像更新接口：POST /api/user/avatar/update（FormData 格式，参数avatar（图片文件））
3. 昵称更新接口：POST /api/user/nickname/update（参数nickname）
4. 会员信息接口：GET /api/user/member/info（点击会员区域时拉取等级与成长值）
功能菜单区 2. 核心功能列表 1. 菜单布局：2 列网格布局（PC 端）/1 列布局（移动端），每个菜单项包含 “图标 + 文字 + 右箭头”
2. 菜单列表：
- 我的订单：图标（订单），点击跳转/orders（订单列表页）
- 收货地址：图标（地址），点击跳转/user/address（地址管理页）
- 我的收藏：图标（星星），点击跳转/user/collect（收藏商品页）
- 我的优惠券：图标（优惠券），点击跳转/user/coupons（优惠券列表页）
- 售后服务：图标（售后），点击跳转/user/aftersale（售后申请页）
- 账户安全：图标（盾牌），点击跳转/user/security（修改密码、绑定手机页）
3. 交互效果：鼠标 hover（PC 端）/ 点击（移动端）时，菜单项背景色变浅，右箭头颜色加深		 1. Element Plus（ElIcon：使用官方图标，如 Order、Location、Star）
2. Vue Router（跳转对应功能页）
3. Tailwind CSS（菜单布局、hover 样式）		 无（纯导航功能，接口在目标页面拉取）
底部操作区 3. 退出登录功能 1. 按钮样式：居中显示，灰色边框，文字灰色（PC 端）/ 通栏按钮（移动端），hover 时背景色变浅
2. 退出逻辑：
1. 点击弹出确认弹窗（“确定要退出登录吗？”）
2. 确认后：调用退出接口→清除 Pinia 状态（userStore、cartStore、couponStore）→清除 localStorage（token、用户信息）→跳转首页（/）
3. 取消后：关闭弹窗，停留当前页
3. 状态同步：退出后，全局导航栏的 “用户入口” 恢复为 “登录 / 注册”		 1. Pinia（各 Store 的$reset()方法，清除状态）
2. Element Plus（ElMessageBox、ElMessage）
3. Vue Router（跳转首页）		 1. 退出登录接口：POST /api/user/logout（清除服务端 token，可选，若用 JWT 则客户端清除即可）

3.6、订单列表 (/orders)

页面模块功能模块实现要点技术依赖接口需求
状态筛选区 1. 订单状态 Tabs 1. Tabs 列表：按 “全部、待付款、待发货、待收货、待评价、已完成、已取消” 顺序排列，支持横向滚动（移动端）
2. 状态高亮：当前选中的状态标红，底部显示红色下划线，未选中为灰色
3. 数量提示：待付款 / 待收货 / 待评价状态右侧显示数量红点（如 “待付款 (3)”），数量为 0 时隐藏红点
4. 切换逻辑：点击不同状态，重置页码为 1，拉取对应状态的订单列表，更新列表内容		 1. Element Plus（ElTabs、ElBadge：数量红点）
2. Vue Router（可选：将状态拼接到 URL，如/orders?status=pending_pay，支持刷新页面保留状态）		 1. 订单状态数量接口：GET /api/order/status/count（页面初始化时拉取，用于红点数量）
2. 订单列表接口：GET /api/order/list?status={status}&page={page}&limit=10（切换状态、分页时调用）
订单列表区 2. 订单卡片展示 1. 卡片结构（每个订单为 1 张卡片）：
- 订单头部：订单编号（“订单编号：123456789”，右侧 “复制” 按钮，点击复制到剪贴板）、创建时间（“2024-05-20 14:30”）、订单状态（如 “待付款”，标橙）
- 商品预览：1-2 个商品缩略图（多商品时显示 “+X 件”）、商品名称（超出 1 行省略）、规格（如 “500g / 份”）、单价、数量
- 金额信息：“实付：¥98.00”（右侧显示，红色加粗）
- 操作按钮：根据订单状态显示不同按钮（如待付款显示 “去支付”“取消订单”）
2. 空状态：当前状态下无订单时，显示对应提示（如 “暂无待付款订单”）+ 图标，提供 “去首页逛逛” 按钮（跳转/）
3. 加载状态：数据未返回时显示订单骨架屏（SkeletonOrderCard.vue）		 1. Element Plus（ElButton、ElMessage、ElSkeleton）
2. 复制工具（src/utils/clipboard.ts：封装复制到剪贴板功能）
3. 自定义订单卡片组件（OrderCard.vue）		 1. 订单详情预览接口：GET /api/order/preview?id={orderId}（订单卡片加载时拉取商品预览信息，可选：列表接口返回商品预览则无需单独调用）
2. 复制成功提示：无需接口，客户端实现
订单操作区 3. 订单状态按钮 1. 按状态匹配按钮（每个订单卡片底部显示）：
- 待付款：
① “去支付”：点击跳转支付页（/pay/:orderId）
② “取消订单”：点击弹出确认弹窗，确认后调用取消接口，成功后卡片消失 / 状态变为 “已取消”
- 待发货：
① “查看物流”：若已发货，点击跳转物流页（/order/logistics?id={orderId}）；未发货时按钮置灰，hover 提示 “商家未发货”
② “申请退款”：点击跳转退款申请页（/order/refund?id={orderId}）
- 待收货：
① “确认收货”：点击弹出确认弹窗（“确认已收到商品吗？”），确认后调用确认收货接口，状态变为 “待评价”
② “查看物流”：点击跳转物流页
- 待评价：
① “去评价”：点击跳转评价页（/order/comment?id={orderId}）
- 已完成：
① “再次购买”：点击跳转对应商品页（/goods/:id）
② “申请售后”：点击跳转售后申请页（/user/aftersale?id={orderId}）
- 已取消：
① “删除订单”：点击弹出确认弹窗，确认后调用删除接口，卡片消失
2. 按钮样式：主要操作（如 “去支付”“确认收货”）为红色，次要操作（如 “查看物流”）为灰色边框		 1. Element Plus（ElButton、ElMessageBox、ElMessage）
2. Vue Router（跳转对应操作页）
3. Tailwind CSS（按钮样式，区分主要 / 次要操作）		 1. 取消订单接口：POST /api/order/cancel?id={orderId}（待付款订单调用）
2. 确认收货接口：POST /api/order/confirm?id={orderId}（待收货订单调用）
3. 删除订单接口：POST /api/order/delete?id={orderId}（已完成 / 已取消订单调用）
4. 物流信息接口：GET /api/order/logistics?id={orderId}（点击 “查看物流” 时调用）
分页控件区 4. 订单分页 1. 分页布局：居中显示 “上一页、页码、下一页”，右侧显示 “共 X 条，共 Y 页”
2. 交互逻辑：
- 页码切换：点击页码跳转对应页，当前页标红
- 上一页 / 下一页：首页时 “上一页” 禁用，末页时 “下一页” 禁用
- 数据同步：分页切换时，拉取对应页的订单列表，更新卡片内容
3. 移动端适配：隐藏页码，仅保留 “上一页 / 下一页”+“当前页 / 总页数”（如 “1/3”）		 1. Element Plus（ElPagination）
2. Vue Router（可选：将页码拼接到 URL，如 `/orders?status		  

3.7、支付详情页 (/pay/:orderId)

页面模块功能模块实现要点技术依赖接口需求
支付头部区 1. 页面导航与状态控制 1. 导航逻辑：
- 未支付：左侧 “返回” 按钮跳转订单详情页（/order/detail/:orderId），标题 “确认支付”
- 已支付：左侧 “返回” 按钮跳转订单列表页（/orders），标题 “支付结果”
2. 步骤指示器：
- 未支付：显示 “确认订单→支付→完成”，“支付” 步骤标红激活
- 已支付：显示 “确认订单→支付→完成”，“完成” 步骤标绿激活，“支付” 步骤标灰
3. 超时控制（仅未支付）：
- 显示 “剩余支付时间：XX:XX:XX”（倒计时，基于订单创建时间 + 30 分钟计算）
- 超时触发：自动调用取消订单接口，弹窗提示 “支付超时，订单已取消”，3 秒后跳转订单列表页
4. 响应式适配：移动端简化步骤指示器，仅保留当前步骤文字		 1. Vue Router（路由跳转与参数获取）
2. 自定义步骤组件（StepIndicator.vue，支持状态切换）
3. 倒计时工具（src/utils/countdown.ts，含超时回调）
4. Pinia（payStore：存储订单支付状态isPaid）		 1. 订单状态查询接口：GET /api/order/status?id={orderId}（页面初始化 / 倒计时结束前 30 秒轮询，返回isPaid（是否支付）、expireTime（过期时间））
2. 订单取消接口：POST /api/order/cancel?id={orderId}（超时未支付时自动调用）
核心内容区 2. 订单信息与支付结果展示 2.1 未支付状态：
1. 基础信息：
- 订单编号：显示完整编号，右侧 “复制” 按钮（点击复制到剪贴板，提示 “复制成功”）
- 创建时间：格式 “2024-05-20 15:30:20”
- 商品概要：显示 “X 件商品”（如 “2 件商品”），点击展开 / 折叠商品列表（含缩略图、名称、规格、单价、数量）
2. 收货信息：
- 收货人：姓名 + 手机号（中间 4 位隐藏，如 “张三 138****5678”）
- 收货地址：省 + 市 + 区 + 详细地址（超出 2 行省略，hover 显示完整）
3. 金额确认：
- 明细项：商品总价（如 “¥129.70”）、运费（如 “¥0.00（满 59 元免运费）”）、优惠抵扣（如 “-¥15.00”）
- 实付金额：大号红色字体（如 “¥114.70”），下方标注 “含税费 ¥2.30”（若有）

2.2 已支付状态：
1. 结果提示：
- 图标：大尺寸绿色对勾（表示支付成功）
- 文字：“支付成功”（24 号字体，绿色）、“您的订单已提交，商家将尽快为您发货”（14 号字体，灰色）
2. 关键信息：
- 订单编号：“订单编号：123456789”（支持复制）
- 支付信息：“支付方式：微信支付”“支付时间：2024-05-20 16:00:30”
- 金额信息：“实付金额：¥114.70”（红色字体）		 1. Element Plus（ElIcon（复制 / Check 图标）、ElCollapse（商品列表折叠）、ElMessage）
2. 复制工具（src/utils/clipboard.ts，封装剪贴板操作）
3. Tailwind CSS（金额样式层级、成功状态配色）		 1. 支付订单详情接口：GET /api/order/pay/detail?id={orderId}（页面初始化拉取，返回订单基础信息、商品列表、收货信息、金额明细）
2. 支付成功详情接口：GET /api/pay/success/detail?id={orderId}（已支付时拉取，返回支付方式、支付时间）
核心内容区 3. 支付方式选择（仅未支付） 1. 选项列表：
- 微信支付：图标 +“微信支付” 文字，默认选中（右侧显示对勾 + 蓝色边框）
- 支付宝支付：图标 +“支付宝支付” 文字，未选中为灰色边框
- 银行卡支付：图标 +“银行卡支付” 文字，支持展开选择 “储蓄卡 / 信用卡”
- 余额支付：
- 余额充足（≥实付金额）：显示 “可用余额：¥150.00”，支持选中
- 余额不足：文字置灰，标注 “余额不足（¥80.00）”，禁用选中
2. 交互逻辑：
- 单选规则：同一时间仅 1 种支付方式可选中，点击切换时更新 Pinia 状态
- 支付说明：每种方式下方显示小字说明（如 “微信支付：支持微信零钱、绑定银行卡”）
- 安全标识：选项区底部显示 “支付安全由天天支付保障”+ 盾牌图标		 1. Pinia（payStore：存储选中支付方式selectedPayType、账户余额balance）
2. Element Plus（ElRadioGroup、ElRadioButton（单选）、ElCollapse（银行卡类型选择））
3. 自定义支付选项组件（PayOption.vue，支持余额状态判断）		 1. 账户余额接口：GET /api/user/balance（页面初始化拉取，返回balance（可用余额））
2. 支持支付方式接口：GET /api/pay/methods（返回系统支持的支付渠道列表，动态渲染选项）
操作按钮区 4. 功能按钮（分状态适配） 4.1 未支付状态：
1. 确认支付按钮：
- 禁用场景：未选支付方式、订单已超时、余额不足（选余额支付时），按钮置灰，hover 提示原因（如 “请选择支付方式”）
- 正常场景：红色按钮（100% 宽度），文字 “确认支付 ¥XXX.XX”（金额与实付金额一致）
- 点击逻辑：
① 前置校验：调用订单状态接口确认未支付
② 发起支付：调用统一支付接口，获取对应渠道参数（如微信prepayId）
③ 加载状态：按钮显示 “支付中...”，禁用点击（防止重复提交）
④ 结果处理：
- 同步成功：跳转当前页（刷新为已支付状态）
- 失败 / 取消：弹窗提示（如 “支付已取消，请重新尝试”），恢复按钮可点击
2. 辅助按钮：
- “查看订单详情”：文字按钮（左对齐），点击跳转/order/detail/:orderId
- “返回首页”：文字按钮（右对齐），点击跳转/

4.2 已支付状态：
1. 主要按钮：
- “查看订单详情”：红色按钮（100% 宽度），点击跳转/order/detail/:orderId
2. 次要按钮：
- “继续购物”：灰色边框按钮（100% 宽度，margin-top: 12px），点击跳转/		 1. Element Plus（ElButton、ElMessage、ElLoading）
2. 支付 SDK（微信：weixin-js-sdk，支付宝：alipay-sdk，处理渠道支付逻辑）
3. WebSocket / 轮询（src/utils/ws.ts/setInterval，监听异步支付结果，30 秒超时）		 1. 统一支付接口：POST /api/pay/create（参数：orderId、payType（wechat/alipay/bank/balance），返回支付参数）
2. 支付结果查询接口：GET /api/pay/result?id={orderId}（支付后每 3 秒轮询，返回isSuccess（是否成功）、failReason（失败原因））
辅助信息区 5. 支付须知与客服入口 1. 支付须知（折叠面板）：
- 默认收起，标题 “支付须知”+ 下拉箭头
- 展开内容：
① 支付说明：“支付成功后订单将自动确认，若 10 分钟内未显示成功，请刷新页面”
② 退款政策：“未发货订单支持全额退款，已发货订单需联系客服处理”
③ 常见问题：点击 “查看更多” 跳转帮助中心（/help/pay）
2. 客服入口：
- 位置：页面右下角悬浮（固定定位）
- 交互：点击弹出客服对话框（显示 “在线客服” 入口、客服电话 “400-XXX-XXXX”）		 1. Element Plus（ElCollapse、ElDialog、ElIcon（客服图标））
2. Tailwind CSS（悬浮图标定位、折叠面板样式）		 1. 支付须知内容接口：GET /api/pay/instructions（页面初始化拉取，返回须知文本）
2. 客服信息接口：GET /api/service/online（点击客服图标拉取，返回在线状态、客服链接）
posted @ 2025-09-10 13:27  左扬  阅读(98)  评论(0)    收藏  举报