第15课：实战项目

电商应用、社交应用

课程概述

本课程将通过两个完整的实战项目——电商应用和社交应用，综合运用前面所学的UniApp知识。我们将从项目架构设计到功能实现，带你完成一个完整的应用开发流程。

项目一：电商应用

1.1 项目概述

电商应用是一个功能完整的购物平台，包含商品展示、购物车、订单管理、用户中心等核心功能。

1.2 项目结构

ecommerce-app/
├── pages/
│   ├── index/              # 首页
│   │   ├── index.vue
│   │   └── components/
│   ├── category/          # 分类页
│   ├── product/           # 商品相关
│   │   ├── list.vue        # 商品列表
│   │   └── detail.vue     # 商品详情
│   ├── cart/              # 购物车
│   ├── order/             # 订单相关
│   │   ├── list.vue       # 订单列表
│   │   └── detail.vue     # 订单详情
│   └── user/              # 用户中心
│       ├── profile.vue    # 个人资料
│       └── address.vue    # 地址管理
├── components/            # 公共组件
│   ├── ProductCard.vue   # 商品卡片
│   ├── CartItem.vue       # 购物车项
│   └── TabBar.vue         # 底部导航
├── store/                 # 状态管理
│   ├── index.js
│   ├── modules/
│   │   ├── cart.js        # 购物车模块
│   │   ├── user.js        # 用户模块
│   │   └── product.js     # 商品模块
├── api/                   # API接口
│   ├── index.js
│   ├── product.js
│   ├── cart.js
│   └── order.js
├── utils/                 # 工具函数
│   ├── request.js         # 请求封装
│   ├── storage.js         # 存储工具
│   └── auth.js            # 认证工具
└── static/                # 静态资源
    ├── images/
    └── icons/

1.3 首页实现

1.4 商品详情页

1.5 购物车模块

const CART_KEY = 'shopping_cart'

export default {
    namespaced: true,
    
    state: {
        cartItems: []
    },
    
    mutations: {
        SET_CART_ITEMS(state, items) {
            state.cartItems = items
            uni.setStorageSync(CART_KEY, items)
        },
        
        ADD_TO_CART(state, item) {
            const existingIndex = state.cartItems.findIndex(
                i => i.productId === item.productId && 
                JSON.stringify(i.specs) === JSON.stringify(item.specs)
            )
            
            if (existingIndex !== -1) {
                state.cartItems[existingIndex].quantity += item.quantity
            } else {
                state.cartItems.push(item)
            }
            
            uni.setStorageSync(CART_KEY, state.cartItems)
        },
        
        UPDATE_QUANTITY(state, { index, quantity }) {
            if (state.cartItems[index]) {
                state.cartItems[index].quantity = quantity
                uni.setStorageSync(CART_KEY, state.cartItems)
            }
        },
        
        REMOVE_ITEM(state, index) {
            state.cartItems.splice(index, 1)
            uni.setStorageSync(CART_KEY, state.cartItems)
        },
        
        CLEAR_CART(state) {
            state.cartItems = []
            uni.removeStorageSync(CART_KEY)
        },
        
        TOGGLE_SELECT(state, index) {
            if (state.cartItems[index]) {
                state.cartItems[index].selected = !state.cartItems[index].selected
            }
        },
        
        SELECT_ALL(state, selected) {
            state.cartItems.forEach(item => {
                item.selected = selected
            })
        }
    },
    
    actions: {
        initCart({ commit }) {
            const items = uni.getStorageSync(CART_KEY) || []
            commit('SET_CART_ITEMS', items)
        },
        
        addToCart({ commit, dispatch }, item) {
            commit('ADD_TO_CART', item)
            dispatch('updateCartCount')
        },
        
        updateQuantity({ commit, dispatch }, payload) {
            commit('UPDATE_QUANTITY', payload)
            dispatch('updateCartCount')
        },
        
        removeItem({ commit, dispatch }, index) {
            commit('REMOVE_ITEM', index)
            dispatch('updateCartCount')
        },
        
        clearCart({ commit }) {
            commit('CLEAR_CART')
        },
        
        toggleSelect({ commit }, index) {
            commit('TOGGLE_SELECT', index)
        },
        
        selectAll({ commit }, selected) {
            commit('SELECT_ALL', selected)
        },
        
        updateCartCount({ state, rootState }) {
            const count = state.cartItems.reduce((sum, item) => sum + item.quantity, 0)
            rootState.cartCount = count
        }
    },
    
    getters: {
        cartCount: state => state.cartItems.reduce((sum, item) => sum + item.quantity, 0),
        
        selectedItems: state => state.cartItems.filter(item => item.selected),
        
        selectedTotal: state => {
            return state.cartItems
                .filter(item => item.selected)
                .reduce((total, item) => total + item.price * item.quantity, 0)
        },
        
        allSelected: state => {
            if (state.cartItems.length === 0) return false
            return state.cartItems.every(item => item.selected)
        }
    }
}

项目二：社交应用

2.1 项目概述

社交应用是一个功能完整的社交平台，包含动态发布、好友互动、消息通知、个人主页等核心功能。

2.2 动态发布功能