wechat-shop/miniprogram/pages/category/index.ts

import { Option } from "./../../miniprogram_npm/@vant/weapp/dropdown-item/shared.d";
import {
  apiGetAppCategoryList,
  apiGetCommodityList,
} from "../../api/index/index";
import { getGlobalData } from "../../utils/common";

// pages/index/index.ts
Page({
  data: {
    appName: "",
    statusBarHeight: 0,
    navBarHeight: 44,
    searchValue: "",
    curCategoryId: NaN,
    categories: [
      /*  { id: 1, name: "水果鲜花", icon: "🍎", categoryId: 1, children: [] },
      { id: 2, name: "蔬菜豆制品", icon: "🥬", categoryId: 2, children: [] },
      { id: 3, name: "肉禽蛋", icon: "🥩", categoryId: 3, children: [] },
      { id: 4, name: "海鲜水产", icon: "🐟", categoryId: 4, children: [] },
      { id: 5, name: "乳品烘焙", icon: "🥛", categoryId: 5, children: [] },
      { id: 6, name: "熟食快", icon: "🍱", categoryId: 6, children: [] }, */
    ],
    recommendTags: ["销量", "折扣", "价格"],
    activeTag: "荐 时令推荐",
    leftCategories: [
      /*  { id: 1, name: "鲜花/绿植", active: true },
      { id: 2, name: "西梅/桃李枣", active: false },
      { id: 3, name: "橘/柚/橙/柑", active: false },
      { id: 4, name: "苹果/新梨/蕉", active: false },
      { id: 5, name: "石榴/龙眼", active: false },
      { id: 6, name: "西瓜/蜜瓜", active: false },
      { id: 7, name: "严选", active: false },
      { id: 8, name: "果切/小番茄", active: false },
      { id: 9, name: "榴莲/热带果", active: false },
      { id: 7, name: "严选", active: false },
      { id: 8, name: "果切/小番茄", active: false },
      { id: 9, name: "榴莲/热带果", active: false }, */
    ],
    products: [
      /*  {
        id: 1,
        name: "【五彩心语】洋桔梗混色5枝",
        desc: "绚烂多姿 | 无刺玫瑰",
        tags: ["近90天最低价"],
        currentPrice: 7.96,
        originalPrice: 19.9,
        image: "/images/product1.jpg",
        badge: "出清价",
      },
      {
        id: 2,
        name: "【节节高升】剑兰粉色 5枝",
        desc: "淡粉色颜值高 | 温柔浪漫",
        tags: ["近90天最低价"],
        currentPrice: 7.96,
        originalPrice: 19.9,
        image: "/images/product2.jpg",
        badge: "出清价",
      },
      {
        id: 3,
        name: "时令【小玲珑】雏菊混搭花束",
        desc: "文艺装扮 | 玲珑可爱",
        tags: ["近30天最低价"],
        currentPrice: 3.95,
        originalPrice: 7.9,
        image: "/images/product3.jpg",
        badge: "出清价",
      },
      {
        id: 4,
        name: "【清香宜人】茉莉花30枝",
        desc: "百个花头 | 芳香怡人",
        tags: ["近90天最低价"],
        currentPrice: 10.68,
        originalPrice: 17.8,
        image: "/images/product4.jpg",
        badge: "出清价",
      },
      {
        id: 5,
        name: "时令【粉韵流光】粉色吸色牡丹菊 3枝",
        desc: "8cm大花头 | 菊花吸色工艺",
        tags: ["限时特价"],
        currentPrice: 15.8,
        originalPrice: 25.8,
        image: "/images/product5.jpg",
        badge: "秒杀",
        countdown: "01:18:44",
      }, */
    ],
  },

  onLoad() {
    const app = getApp();
    this.setData({ appName: app.globalData.appName });
    this.getSystemInfo();
  },

  getSystemInfo() {
    const systemInfo = wx.getSystemInfoSync();
    this.setData({
      statusBarHeight: systemInfo.statusBarHeight,
    });
  },

  onSearchInput(e: WechatMiniprogram.InputInput) {
    this.setData({
      searchValue: e.detail.value,
    });
  },

  onSearch() {
    if (this.data.searchValue.trim()) {
      wx.showToast({
        title: `搜索: ${this.data.searchValue}`,
        icon: "none",
      });
    }
  },

  // 选择大类目
  onChooseCategory(e: any) {
    this.setData({
      curCategoryId: e.currentTarget.dataset.id,
      leftCategories: this.data.categories
        .find((item: any) => item.id === e.currentTarget.dataset.id)
        ?.children.map((item: any, index: number) => ({
          id: item.id,
          name: item.name,
          active: index === 0,
        })),
    });
  },
  // 选择左边的类目
  onChooseLeftCategory(e: WechatMiniprogram.TouchEvent) {
    const { index } = e.currentTarget.dataset;
    const categories = this.data.leftCategories.map((item, i) => ({
      ...item,
      active: i === index,
    }));
    this.setData({ leftCategories: categories });
    this.handleGetProducts(this.data.leftCategories[index].id);
  },
  // 获取商品列表
  handleGetProducts(categoryId: number) {
    apiGetCommodityList({ categoryId }).then((res: any) => {
      //   console.warn("----- my data is res2444: ", res);
      this.setData({
        products: res.data.rows.map((item: any) => ({
          id: item.id,
          name: item.title,
          desc: item.description,
          tags: [],
          currentPrice: item.showPromotionPrice,
          originalPrice: item.showSalePrice,
          image: item.mainImageUrl,
        })),
      });
    });
  },

  // 选择排序
  onChooseTab(e: WechatMiniprogram.TouchEvent) {
    const { tag } = e.currentTarget.dataset;
    this.setData({ activeTag: tag });
  },

  onGoCommodity(e: WechatMiniprogram.TouchEvent) {
    wx.navigateTo({
      url: `/pages/H5/index?url=${encodeURIComponent(
        `https://www.baidu.com?id=${e.currentTarget.dataset.id}`
      )}`,
    });
  },

  onAddToCart(e: WechatMiniprogram.TouchEvent) {
    const { id } = e.currentTarget.dataset;
    wx.showToast({
      title: "已加入购物车",
      icon: "success",
    });
  },
  handleGetAppCategory() {
    const initCategoryId = getGlobalData("categoryId");
    apiGetAppCategoryList().then((res: any) => {
      console.warn("----- my data is res2333: ", res);
      let curCategoryIdIndex = res.data.findIndex(
        (item: any) => item.id == initCategoryId
      );
      curCategoryIdIndex = curCategoryIdIndex === -1 ? 0 : curCategoryIdIndex;
      this.setData({
        curCategoryId: initCategoryId ? initCategoryId : res.data[0].id,
        categories: res.data.map((item: any) => ({
          id: item.id,
          name: item.name,
          icon: item.categoryImageUrl,
          categoryId: "",
          children: item.childrens.map((child: any) => ({
            id: child.id,
            name: child.name,
          })),
        })),
        leftCategories: res.data[curCategoryIdIndex].childrens.map(
          (item: any, index: number) => ({
            id: item.id,
            name: item.name,
            active: index === 0,
          })
        ),
      });
      this.handleGetProducts(res.data[0].childrens[0].id);
    });
  },
  async onShow() {
    wx.showLoading({ title: "加载中", mask: true });
    await this.handleGetAppCategory();
    wx.hideLoading();
  },
});

interface PageData {
  statusBarHeight: number;
  navBarHeight: number;
  searchValue: string;
  categories: Category[];
  recommendTags: string[];
  activeTag: string;
  leftCategories: LeftCategory[];
  products: Product[];
}

interface Category {
  id: number;
  name: string;
  icon: string;
}

interface LeftCategory {
  id: number;
  name: string;
  active: boolean;
}

interface Product {
  id: number;
  name: string;
  desc: string;
  tags: string[];
  currentPrice: number;
  originalPrice: number;
  image: string;
  badge: string;
  countdown?: string;
}

interface Coupon {
  title: string;
  status: string;
  expireTime: string;
}