HarmonyOS 鸿蒙Next 多媒体功能与购物车实现——玩具店购物应用开发实战（四）

多媒体功能与购物车实现——玩具店购物应用开发实战（四）

在前面的文章中，我们完成了玩具店购物应用的项目规划、环境搭建，以及用户注册、登录、商品列表和详情展示功能的实现。本篇文章将详细介绍多媒体功能和购物车的实现，包括将商品添加到购物车、购物车页面的开发、商品数量的修改，以及多媒体功能的优化。

一、功能概述

1. 功能需求

• 多媒体功能优化：

  • 图片放大：在商品详情页，实现图片的放大和缩放查看。
  • 视频播放：优化商品视频的播放体验，支持全屏播放和控制。

• 购物车功能：

  • 添加商品：用户可以将商品添加到购物车。
  • 查看购物车：在购物车页面，展示已添加的商品列表。
  • 修改数量：用户可以在购物车中修改商品的购买数量。
  • 删除商品：用户可以从购物车中移除商品。
  • 总价计算：实时计算购物车中商品的总价。

2. 技术难点

• 状态管理：如何有效地管理购物车的状态，并在不同页面之间共享数据。
• 数据持久化：如何将购物车数据持久化存储，防止应用关闭后数据丢失。
• 多媒体交互：如何优化图片和视频的展示和交互，提高用户体验。

二、购物车数据管理

1. 数据模型

（1）购物车项模型（CartItem）

import { Product } from './ProductModel';

export interface CartItem {
  product: Product;
  quantity: number;
}

（2）购物车模型（CartModel）

由于购物车只是一个包含多个 CartItem 的集合，我们可以直接使用 CartItem[] 作为购物车的数据结构。

2. 状态管理

为了在应用的不同页面共享购物车数据，我们可以使用 AppStorage 或全局的状态管理工具。

（1）使用AppStorage

// 初始化购物车数据
AppStorage.SetOrCreate('cartItems', [] as CartItem[]);

（2）购物车数据的持久化

为了防止应用关闭后购物车数据丢失，我们需要将购物车数据持久化存储。

• 使用本地数据库：将购物车数据存储在本地数据库中。
• 使用本地文件存储：将购物车数据序列化后，存储在本地文件中。

为了简化实现，我们选择使用 AppStorage 加上本地数据库来持久化购物车数据。

三、添加商品到购物车

1. 在商品详情页实现添加功能

import { CartItem } from '../model/CartItemModel';
import prompt from '@ohos.prompt';

@Component
struct ProductDetailPage {
  addToCart() {
    const cartItems = AppStorage.Get('cartItems') as CartItem[];

    // 检查购物车中是否已有该商品
    const index = cartItems.findIndex(item => item.product.id === this.product.id);
    if (index !== -1) {
      // 已有该商品，增加数量
      cartItems[index].quantity += 1;
    } else {
      // 新增商品
      cartItems.push({ product: this.product, quantity: 1 });
    }

    // 更新购物车数据
    AppStorage.Set('cartItems', cartItems);

    prompt.showToast({ message: '已加入购物车' });
  }
}

2. 解释

• 获取购物车数据：从 AppStorage 中获取当前的购物车数据。
• 检查商品是否已存在：如果购物车中已有该商品，则增加数量，否则添加新的购物车项。
• 更新购物车数据：将修改后的购物车数据重新存储到 AppStorage 中。

四、购物车页面开发

1. 页面布局

import { CartItem } from '../model/CartItemModel';
import prompt from '@ohos.prompt';

@Entry
@Component
struct CartPage {
  @State cartItems: CartItem[] = [];

  build() {
    Column() {
      Text('购物车').fontSize(24).margin({ top: 16, bottom: 16 }).textAlign(TextAlign.Center);

      if (this.cartItems.length === 0) {
        Text('购物车为空').fontSize(18).textAlign(TextAlign.Center).margin({ top: 50 });
      } else {
        List() {
          ForEach(this.cartItems, (item, index) => {
            ListItem() {
              Row({ alignItems: ItemAlign.Center }) {
                Image(item.product.images[0])
                  .width(80)
                  .height(80)
                  .objectFit(ImageFit.Cover)
                  .margin(8);
                Column() {
                  Text(item.product.name).fontSize(18);
                  Text(`价格：¥${item.product.price}`).fontSize(16).fontColor(Color.Red);
                }
                Spacer();
                Column({ alignItems: ItemAlign.End }) {
                  Row({ alignItems: ItemAlign.Center }) {
                    Button('-')
                      .onClick(() => this.updateQuantity(index, -1))
                      .margin(4);
                    Text(`${item.quantity}`).fontSize(16).margin(4);
                    Button('+')
                      .onClick(() => this.updateQuantity(index, 1))
                      .margin(4);
                  }
                  Button('删除')
                    .onClick(() => this.removeItem(index))
                    .margin(4);
                }
              }
            }
            .backgroundColor(Color.White);
          });
        }
      }

      // 显示总价和结算按钮
      Row({ alignItems: ItemAlign.Center }) {
        Text(`总价：¥${this.getTotalPrice()}`).fontSize(20).fontColor(Color.Red).margin(16);
        Spacer();
        Button('去结算')
          .onClick(() => this.checkout())
          .margin(16);
      }
    }
    .padding(16)
    .backgroundColor(Color.Background);
  }

  aboutToAppear() {
    this.loadCartItems();
  }

  loadCartItems() {
    this.cartItems = AppStorage.Get('cartItems') as CartItem[] || [];
  }

  updateQuantity(index: number, delta: number) {
    const item = this.cartItems[index];
    item.quantity += delta;
    if (item.quantity <= 0) {
      this.cartItems.splice(index, 1);
    }
    AppStorage.Set('cartItems', this.cartItems);
  }

  removeItem(index: number) {
    this.cartItems.splice(index, 1);
    AppStorage.Set('cartItems', this.cartItems);
  }

  getTotalPrice(): number {
    return this.cartItems.reduce((total, item) => total + item.product.price * item.quantity, 0);
  }

  checkout() {
    if (this.cartItems.length === 0) {
      prompt.showToast({ message: '购物车为空' });
      return;
    }
    // 跳转到订单确认页
    Router.push({ uri: 'OrderConfirmationPage' });
  }
}

2. 解释

• 显示购物车商品列表：使用 List 和 ListItem 展示购物车中的商品。
• 修改商品数量：提供“+”和“–”按钮，调用 updateQuantity() 方法更新数量。
• 删除商品：提供“删除”按钮，调用 removeItem() 方法移除商品。
• 计算总价：使用 getTotalPrice() 方法计算购物车中所有商品的总价。
• 结算按钮：点击“去结算”按钮，跳转到订单确认页（将在下一篇中实现）。