第14次课 - 综合项目——点餐系统（下）

1

教学目标

掌握购物车的状态管理与交互
理解订单的完整流程
能够完成点餐系统全部功能
案例：案例6 点餐系统(下)

2

重点、难点与课时分配

◎

教学重点

购物车、订单、个人中心开发

△

教学难点

购物车状态管理、订单流程

课时分配（共 3 学时）

理论 0.5 学时

实践 2.5 学时

以项目实战为主，仅用 0.5 学时讲订单流程要点

3

课件要点

购物车功能

添加商品: 点击加购按钮, 数量+1

数量修改: 加减按钮控制商品数量

全选/取消全选: 复选框联动

合计金额: 实时计算选中商品总价

删除商品: 左滑删除或长按删除

购物车数据: 本地缓存 vs 全局状态

订单功能

确认订单: 展示选中商品、金额、备注

收货地址: wx.chooseAddress 获取微信地址

提交订单: 调用后端接口创建订单

订单列表: 按状态分类(待付款/待收货/已完成)

订单详情: 展示订单完整信息

个人中心

用户信息: 头像/昵称展示

我的订单: 快捷入口(待付款/待收货/退款/全部)

收货地址管理: 增删改查

设置页面: 关于/清除缓存/退出登录

登录态管理: token存储与过期处理

项目优化与总结

性能优化: setData优化、图片懒加载、分包加载

体验优化: 骨架屏、加载动画、空状态

代码规范: ESLint、命名规范、注释

测试: 功能测试、兼容性测试

发布: 体验版 → 审核版 → 线上版

4

代码示例与讲解

购物车功能

                cart.js
                购物车效果
              
1// 购物车核心逻辑 cart.js
2const app = getApp()
3
4Page({
data: { cartList: [], totalPrice: 0, totalCount: 0, isAllChecked: true },
6
onShow() {
  this.refreshCart()
},
10
// 刷新购物车数据
refreshCart() {
  const cartList = app.globalData.cartList
  const totalPrice = cartList.reduce((sum, item) => {
    return item.checked ? sum + item.price * item.count : sum
  }, 0)
  const totalCount = cartList.reduce((sum, item) => {
    return item.checked ? sum + item.count : sum
  }, 0)
  this.setData({ cartList, totalPrice, totalCount })
},
22
// 添加商品（菜单页调用）
addToCart(dish) {
  const cartList = app.globalData.cartList
  const exist = cartList.find(item => item.id === dish.id)
  if (exist) {
    exist.count++  // 已存在则数量+1
  } else {
    cartList.push({ ...dish, count: 1, checked: true })
  }
  this.refreshCart()
},
34
// 数量增减
changeCount(e) {
  const { id, type } = e.currentTarget.dataset
  const item = app.globalData.cartList.find(i => i.id === id)
  if (type === 'add') item.count++
  if (type === 'minus') {
    if (item.count <= 1) {
      this.removeItem(id); return
    }
    item.count--
  }
  this.refreshCart()
},
48
// 删除商品
removeItem(id) {
  app.globalData.cartList = app.globalData.cartList.filter(i => i.id !== id)
  this.refreshCart()
},
54
// 全选/取消全选
toggleAllCheck() {
  const isAllChecked = !this.data.isAllChecked
  app.globalData.cartList.forEach(item => item.checked = isAllChecked)
  this.refreshCart()
}
61})

购物车核心逻辑：数据存在 app.globalData.cartList 全局共享。addToCart 添加商品时先 find 查找是否已存在，存在则 count++，不存在则 push 新项。changeCount 数量增减，减到1再减则 removeItem 删除。refreshCart 用 reduce 计算选中商品总价和总数，全选按钮 toggleAllCheck 切换所有商品 checked 状态。页面 onShow 时刷新数据。

订单功能

                order.js
                订单确认页效果
              
1// 订单确认页 order.js
2const app = getApp()
3import { createOrder } from '../../api/order'
4
5Page({
data: {
  checkedItems: [], totalPrice: 0,
  address: null, remark: ''
},
10
onLoad() {
  // 筛选选中商品
  const checkedItems = app.globalData.cartList.filter(item => item.checked)
  const totalPrice = checkedItems.reduce((sum, i) => sum + i.price * i.count, 0)
  this.setData({ checkedItems, totalPrice })
},
17
// 选择收货地址
chooseAddress() {
  wx.chooseAddress({
    success: (res) => {
      this.setData({ address: res })
      // res包含: userName, telNumber, provinceName...
    }
  })
},
27
// 提交订单
submitOrder() {
  if (!this.data.address) {
    return wx.showToast({ title: '请选择地址', icon: 'none' })
  }
  wx.showLoading({ title: '提交中...' })
  createOrder({
    items: this.data.checkedItems.map(i => ({
      dishId: i.id, count: i.count, price: i.price
    })),
    address: this.data.address,
    totalPrice: this.data.totalPrice,
    remark: this.data.remark
  }).then(res => {
    wx.hideLoading()
    // 清除已下单的购物车商品
    app.globalData.cartList = app.globalData.cartList.filter(i => !i.checked)
    wx.navigateTo({ url: '/pages/orderSuccess/orderSuccess?id=' + res.data.orderId })
  }).catch(() => {
    wx.hideLoading()
  })
}
50})
51
52// ⚠️ 订单要点
53// 1. chooseAddress 需用户授权
54// 2. 提交前校验地址和商品
55// 3. 下单成功后清除已选购物车项
56// 4. 防重复提交：提交时禁用按钮

订单确认页：onLoad 时 filter 筛选购物车中 checked 的商品，reduce 计算总价。wx.chooseAddress 调用微信地址选择器，返回 userName、telNumber、provinceName 等字段，需用户授权。submitOrder 提交订单前校验地址，showLoading 防止重复点击，调用 createOrder API 提交，成功后清除已下单的购物车商品并跳转成功页。注意防重复提交需在提交时禁用按钮。

个人中心

                mine.js
                个人中心效果
              
1// 个人中心 mine.js
2const app = getApp()
3
4Page({
data: {
  userInfo: null,
  orderStats: { pending: 0, paid: 0, done: 0 }
},
9
onShow() {
  this.refreshUserInfo()
  this.loadOrderStats()
},
14
// 登录/刷新用户信息
refreshUserInfo() {
  const userInfo = app.globalData.userInfo
  if (userInfo) {
    this.setData({ userInfo })
  }
},
22
// 登录操作
handleLogin() {
  wx.login({ success: (res) => {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (profileRes) => {
        app.globalData.userInfo = profileRes.userInfo
        this.setData({ userInfo: profileRes.userInfo })
      }
    })
  }})
},
35
// 加载订单统计
loadOrderStats() {
  getOrderStats().then(res => {
    this.setData({ orderStats: res.data })
  })
},
42
// 订单快捷入口
goToOrders(e) {
  const tab = e.currentTarget.dataset.tab
  wx.navigateTo({ url: `/pages/orderList/orderList?tab=${tab}` })
},
48
// 地址管理
goToAddress() {
  wx.navigateTo({ url: '/pages/addressList/addressList' })
}
53})
54
55<!-- mine.wxml 关键结构 -->
56<view class="user-card" wx:if="{{userInfo}}">
<image src="{{userInfo.avatarUrl}}" class="avatar"/>
<text>{{userInfo.nickName}}</text>
59</view>
60<view class="login-btn" wx:else bindtap="handleLogin">
点击登录
62</view>

个人中心页面：顶部用户卡片，未登录显示登录按钮，已登录显示头像和昵称。登录用 wx.login + getUserProfile 获取信息存入 globalData。中部订单快捷入口，显示待付款、待配送、已完成数量，点击跳转对应订单列表。下部功能菜单包括收货地址管理、联系客服、设置等。页面 onShow 时刷新用户信息和订单统计数据。

项目优化与总结

                optimization.js
                优化与发布流程
              
1// 1. 骨架屏优化首屏体验
2<!-- skeleton.wxml -->
3<view wx:if="{{loading}}">
4  <view class="skeleton-banner"></view>
5  <view class="skeleton-rect"></view>
6  <view class="skeleton-circle"></view>
7</view>
8<view wx:else>...真实内容...</view>
9
10/* 骨架屏样式 */
11.skeleton-banner { background: #f0f0f0; height: 360rpx; }
12.skeleton-rect { background: #f0f0f0; height: 40rpx; margin: 20rpx; border-radius: 8rpx; }
13
14// 2. setData 性能优化
15// ❌ 频繁调用 setData
16this.setData({ name: 'A' })
17this.setData({ age: 20 })
18// ✅ 合并调用
19this.setData({ name: 'A', age: 20 })
20
21// ❌ 传递大量不需要的数据
22this.setData({ list: hugeArray })
23// ✅ 只更新变化的部分
24this.setData({ 'list[0].count': 2 })
25
26// 3. 图片优化
27// 使用 mode="aspectFill" 避免变形
28// 使用 lazy-load 懒加载
29<image mode="aspectFill" lazy-load />
30
31// 4. 代码规范
32// • 统一命名：页面小写，组件驼峰
33// • 公共逻辑提取到 utils
34// • 请求统一走 request.js 封装
35// • 及时清除定时器和监听器
36
37// 5. 发布流程
38// ① 上传代码 → ② 提交审核 → ③ 发布上线
39// 开发版 → 体验版 → 审核版 → 线上版

项目优化要点：骨架屏在数据加载前显示灰色占位元素，提升首屏感知速度；setData 优化——合并多次调用为一次，只更新变化的数据路径如 'list[0].count' 而非整个数组；图片优化用 aspectFill 防变形、lazy-load 懒加载。代码规范：统一命名、公共逻辑提取 utils、请求统一走封装。发布流程：上传代码→体验版测试→提交审核→发布上线。

5

课件预览与下载