2. 在线商城系统（technical-architecture）

alt

1. 架构设计

alt

2. 技术描述

alt

3. 路由定义

路由路径	页面名称	功能描述
/	首页	展示轮播图、推荐商品、分类入口
/category	分类页	商品分类展示和筛选
/product-list/:category	商品列表	按分类显示商品列表
/product-detail/:id	商品详情	显示商品详细信息和规格选择
/cart	购物车	管理购物车商品和结算
/order-confirm	订单确认	确认订单信息和选择地址
/profile	个人中心	用户信息和功能菜单
/orders	订单列表	查看历史订单和状态
/address	地址管理	管理收货地址
/login	登录页	用户登录和注册

4. 状态管理设计

4.1 Vuex Store结构

// store/index.js
export default createStore({
  state: {
    // 用户信息
    user: {
      id: null,
      name: '',
      avatar: '',
      isLogin: false
    },
    // 购物车数据
    cart: {
      items: [], // 商品列表
      totalCount: 0, // 总数量
      totalPrice: 0 // 总价格
    },
    // 商品数据
    products: [],
    // 订单数据
    orders: [],
    // 地址数据
    addresses: []
  },
  mutations: {
    // 购物车相关
    ADD_TO_CART(state, product) {},
    REMOVE_FROM_CART(state, productId) {},
    UPDATE_CART_QUANTITY(state, {productId, quantity}) {},
    CLEAR_CART(state) {},
    
    // 用户相关
    SET_USER_INFO(state, userInfo) {},
    LOGOUT(state) {}
  },
  actions: {
    // 异步操作
    async addToCart({commit}, product) {},
    async removeFromCart({commit}, productId) {},
    async updateCartQuantity({commit}, payload) {}
  },
  getters: {
    // 计算属性
    cartItemCount: state => state.cart.items.length,
    cartTotalPrice: state => state.cart.totalPrice,
    isProductInCart: state => productId => {
      return state.cart.items.some(item => item.id === productId)
    }
  }
})

4.2 购物车状态管理

购物车状态采用模块化设计，确保数据一致性：

// store/modules/cart.js
const cartModule = {
  namespaced: true,
  state: () => ({
    items: [], // {id, name, price, quantity, image, specs}
    isLoading: false
  }),
  
  mutations: {
    SET_CART_ITEMS(state, items) {
      state.items = items
    },
    ADD_ITEM(state, product) {
      const existingItem = state.items.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity += product.quantity
      } else {
        state.items.push(product)
      }
    },
    REMOVE_ITEM(state, productId) {
      state.items = state.items.filter(item => item.id !== productId)
    },
    UPDATE_QUANTITY(state, {productId, quantity}) {
      const item = state.items.find(item => item.id === productId)
      if (item) {
        item.quantity = quantity
      }
    }
  },
  
  actions: {
    addToCart({commit, state}, product) {
      commit('ADD_ITEM', product)
      // 本地存储持久化
      localStorage.setItem('cart', JSON.stringify(state.items))
    },
    
    loadCartFromStorage({commit}) {
      const savedCart = localStorage.getItem('cart')
      if (savedCart) {
        commit('SET_CART_ITEMS', JSON.parse(savedCart))
      }
    }
  },
  
  getters: {
    totalItems: state => state.items.reduce((sum, item) => sum + item.quantity, 0),
    totalPrice: state => state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0),
    isEmpty: state => state.items.length === 0
  }
}

5. 组件架构

5.1 基础组件结构

src/
├── components/           # 公共组件
│   ├── common/          # 通用组件
│   │   ├── Header.vue   # 顶部导航
│   │   ├── Footer.vue   # 底部导航
│   │   ├── Loading.vue  # 加载组件
│   │   └── Empty.vue    # 空状态组件
│   ├── product/         # 商品相关组件
│   │   ├── ProductCard.vue     # 商品卡片
│   │   ├── ProductList.vue     # 商品列表
│   │   └── ProductSpecs.vue    # 商品规格选择
│   ├── cart/            # 购物车组件
│   │   ├── CartItem.vue # 购物车商品项
│   │   └── CartSummary.vue # 购物车结算
│   └── order/           # 订单组件
│       ├── OrderCard.vue # 订单卡片
│       └── OrderStatus.vue # 订单状态
├── views/               # 页面组件
│   ├── Home.vue         # 首页
│   ├── Category.vue     # 分类页
│   ├── ProductDetail.vue # 商品详情
│   ├── Cart.vue         # 购物车
│   ├── OrderConfirm.vue # 订单确认
│   ├── Profile.vue      # 个人中心
│   └── Orders.vue       # 订单列表
├── store/               # 状态管理
├── router/              # 路由配置
├── utils/               # 工具函数
├── assets/              # 静态资源
└── App.vue              # 根组件

5.2 底部导航组件

底部导航栏作为核心导航组件：

<!-- components/common/FooterNav.vue -->
<template>
  <van-tabbar v-model="active" active-color="#FF6B35" inactive-color="#999">
    <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item name="category" icon="apps-o" to="/category">分类</van-tabbar-item>
    <van-tabbar-item name="cart" icon="shopping-cart-o" to="/cart" :badge="cartCount">购物车</van-tabbar-item>
    <van-tabbar-item name="profile" icon="user-o" to="/profile">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

const route = useRoute()
const store = useStore()

const active = ref('home')
const cartCount = computed(() => store.getters['cart/totalItems'])

// 根据当前路由设置激活状态
watch(() => route.path, (newPath) => {
  if (newPath === '/') active.value = 'home'
  else if (newPath.includes('category')) active.value = 'category'
  else if (newPath.includes('cart')) active.value = 'cart'
  else if (newPath.includes('profile')) active.value = 'profile'
})
</script>

6. 数据模型

6.1 商品数据模型

// 商品实体
interface Product {
  id: string           // 商品ID
  name: string         // 商品名称
  price: number        // 价格
  originalPrice?: number // 原价
  images: string[]     // 商品图片
  description: string  // 商品描述
  specifications: Spec[] // 商品规格
  category: Category   // 所属分类
  stock: number        // 库存数量
  sales: number        // 销量
  rating: number       // 评分
  reviews: Review[]    // 用户评价
}

// 商品规格
interface Spec {
  name: string         // 规格名称（颜色、尺寸等）
  options: string[]    // 可选项
  priceDiff?: number   // 价格差异
}

// 商品分类
interface Category {
  id: string
  name: string
  icon: string
  children?: Category[]
}

6.2 购物车数据模型

// 购物车项
interface CartItem {
  id: string           // 购物车项ID
  productId: string    // 商品ID
  product: Product     // 商品信息
  quantity: number     // 数量
  selectedSpecs: Record<string, string> // 选中的规格
  price: number        // 实际价格（含规格差价）
  addedAt: Date        // 添加时间
}

// 购物车状态
interface CartState {
  items: CartItem[]
  isLoading: boolean
  lastSyncTime?: Date
}

6.3 订单数据模型

// 订单实体
interface Order {
  id: string           // 订单ID
  orderNo: string      // 订单编号
  userId: string       // 用户ID
  items: OrderItem[]   // 订单项
  totalAmount: number  // 总金额
  shippingFee: number  // 运费
  discountAmount: number // 优惠金额
  finalAmount: number  // 实付金额
  status: OrderStatus  // 订单状态
  shippingAddress: Address // 收货地址
  paymentMethod: string // 支付方式
  createdAt: Date      // 创建时间
  paidAt?: Date        // 支付时间
  shippedAt?: Date     // 发货时间
  completedAt?: Date   // 完成时间
}

// 订单项
interface OrderItem {
  id: string
  productId: string
  productName: string
  productImage: string
  quantity: number
  price: number
  specs: string        // 规格描述
}

// 订单状态枚举
enum OrderStatus {
  PENDING_PAYMENT = '待付款',
  PAID = '已付款',
  SHIPPED = '已发货',
  RECEIVED = '已收货',
  COMPLETED = '已完成',
  CANCELLED = '已取消'
}

// 收货地址
interface Address {
  id: string
  name: string         // 收货人姓名
  phone: string        // 手机号
  province: string     // 省份
  city: string         // 城市
  district: string     // 区县
  detail: string       // 详细地址
  isDefault: boolean   // 是否默认地址
}