跳至主要內容
商品SKU对话框

商品SKU对话框

效果

商品SKU对话框

源码解析

对话框

对话框内滚动区域

商品SKU展示骨架

sku选择

选择属性确定SKU

封面/名称/描述

封面名称描述

加入购物车


起凡大约 5 分钟起凡商城小程序商品SKU
购物车

购物车

购物车

购物车store

全局存储购物车的数据

import { ProductDto } from "@/apis/__generated/model/dto";
import Taro from "@tarojs/taro";
import { defineStore } from "pinia";
import { computed, ref, watchEffect } from "vue";
type ProductSkuFetcherDto = ProductDto["ProductRepository/PRODUCT_SKU_FETCHER"];
export type CartItem = {
  product: ProductSkuFetcherDto;
  sku: ProductSkuFetcherDto["skuList"][0];
  count: number;
  checked: boolean;
};
export const useCartStore = defineStore("cart", () => {
  // 购物车是否显示
  const visible = ref(false);
  // 从本地存储中获取购物车列表
  const cartList = ref<CartItem[]>(
    JSON.parse(Taro.getStorageSync("cart") || "[]"),
  );
  // cartList有变动就缓存到本地存储
  watchEffect(() => {
    Taro.setStorageSync("cart", JSON.stringify(cartList.value));
  });
  const checkedItems = computed(() =>
    cartList.value.filter((item) => item.checked),
  );
  // 总价
  const totalPrice = computed(() =>
    checkedItems.value
      // 计算每个商品的总价
      .map((item) => item.count * item.sku.price)
      // 求和
      .reduce((prev, curr) => prev + curr, 0),
  );
  // 购物车添加商品
  const pushItem = (cartItem: CartItem) => {
    const index = cartList.value.findIndex(
      (item) => item.sku.id === cartItem.sku.id,
    );
    if (index === -1) {
      cartList.value.push(cartItem);
    } else {
      plusItem(index);
    }
  };
  // 购物车减少商品数量
  const plusItem = (index: number) => {
    cartList.value[index].count++;
  };
  // 购物车减少商品数量
  const minusItem = (index: number) => {
    const item = cartList.value[index];
    if (item.count === 1) {
      // 少于1时移除购物车
      cartList.value.splice(index, 1);
    } else {
      item.count--;
    }
  };
  // 清空购物车
  const clearCart = () => {
    cartList.value = [];
  };
  // 全选或者反选
  const toggleCart = () => {
    // 如果已选的数量等于购物车数量反向否则全勋。
    const value = checkedItems.value.length !== cartList.value.length;
    cartList.value.forEach((item) => {
      item.checked = value;
    });
  };

  return {
    visible,
    checkedItems,
    cartList,
    totalPrice,
    pushItem,
    plusItem,
    minusItem,
    clearCart,
    toggleCart,
  };
});


起凡大约 5 分钟小程序起凡商城购物车
分页工具类

分页工具类

使用方法

  • api.productOrderController.queryByUser 是一个后端API方法,用于根据用户查询产品订单。
  • 第二个参数传入了api.productOrderController,API方法需要在控制器实例上下文中执行, 即this指向当前组件实例。
  • 初始化查询参数为空对象 {}。
const { pageData } = usePageHelper(
  api.productOrderController.queryByUser,
  api.productOrderController,
  {},
);

起凡大约 5 分钟起凡商城小程序分页工具
瀑布流组件

瀑布流组件

效果

网格布局左右两列

计算属性+插槽显示数据


起凡大约 1 分钟起凡商城小程序瀑布流
商品纵向详情

商品纵向详情

效果

源码解析

骨架

从上到下分别显示

  • 封面
  • 标题
  • 标签
  • 价格和品牌

提示

mode="widthFix"可以使得图片的宽度固定,高度自适应

封面和标题


起凡大约 2 分钟起凡商城小程序商品详情