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

// pages/index/index.ts

import { apiGetAppCategoryList, apiGetHome } from "../../api/index/index";
import { setGlobalData } from "../../utils/common";

Page({
  data: {
    appName: "",
    searchValue: "",
    isScrolled: false,
    categories: [
      { id: 2, name: "水果鲜花", categoryId: 1, icon: "/icons/fruit.png" },
      {
        id: 3,
        name: "蔬菜豆制品",
        categoryId: 2,
        icon: "/icons/vegetable.png",
      },
      { id: 4, name: "肉禽蛋", categoryId: 3, icon: "/icons/meat.png" },
      { id: 5, name: "海鲜水产", categoryId: 4, icon: "/icons/seafood.png" },
      { id: 6, name: "乳品烘焙", categoryId: 5, icon: "/icons/milk.png" },
      { id: 7, name: "巧克力", categoryId: 6, icon: "/icons/chocolate.png" },
      { id: 8, name: "薯片", icon: "/icons/chips.png" },
      { id: 9, name: "饮料", icon: "/icons/drink.png" },
      { id: 10, name: "休闲零食", icon: "/icons/snack.png" },
    ],
    flashSaleProducts: [
      {
        id: 1,
        name: "冬阴功风味汤底",
        price: 0,
        originalPrice: 16.9,
        image: "/images/soup.jpg",
      },
      {
        id: 2,
        name: "进口香蕉",
        price: 4.95,
        originalPrice: 12.9,
        image: "/images/banana.jpg",
      },
      {
        id: 3,
        name: "巨峰葡萄",
        price: 6.9,
        originalPrice: 16.9,
        image: "/images/grape.jpg",
      },
      {
        id: 3,
        name: "巨峰葡萄",
        price: 6.9,
        originalPrice: 16.9,
        image: "/images/grape.jpg",
      },
    ],
    recommendedProducts: [
      {
        id: 1,
        name: "[七夕]吻月粉红雪山玫瑰花束9枝",
        price: 79,
        originalPrice: 109,
        image: "/images/rose.jpg",
        tags: ["七夕专属仪式", "倍浪漫方程式"],
        sales: "200+",
      },
      {
        id: 2,
        name: "水乳套装礼盒",
        price: 99,
        image: "/images/cosmetic.jpg",
        tags: ["甜颜蜜礼 一见倾心"],
        sales: "500+",
      },
      {
        id: 3,
        name: "百事可乐随变经典香草口味冰淇淋75g*5支",
        price: 29.9,
        image: "/images/icecream.jpg",
        tags: ["化冻必退", "细腻柔滑", "新人首单价", "近90天最低价"],
        sales: "1000+",
      },
      {
        id: 4,
        name: "百事可乐混合装(百事+七喜+美年达)330ml*6罐",
        price: 29.9,
        image: "/images/pepsi.jpg",
        tags: ["真低价，放心购"],
        sales: "800+",
      },
    ],
  },
  // 搜索框输入事件
  onSearchInput(e: any) {
    this.setData({
      searchValue: e.detail.value,
    });
  },
  // 搜索按钮点击事件
  onSearch() {
    // 请求接口
    console.warn("----- my data is this.searchValue: ", this.data.searchValue);
  },

  onPageScroll(e) {
    const scrollTop = e.scrollTop;
    const targetPx = 50 * 0.5;
    if (scrollTop >= targetPx && !this.data.isScrolled) {
      this.setData({ isScrolled: true });
    } else if (scrollTop < targetPx && this.data.isScrolled) {
      this.setData({ isScrolled: false });
    }
  },
  // 去分类
  onGoCategory(e: any) {
    setGlobalData("categoryId", e.currentTarget.dataset.id);
    wx.switchTab({
      url: "/pages/category/index",
      query: {
        categoryId: e.currentTarget.dataset.id,
      },
    });
  },
  // testzc 去商品详情
  onGoCommodity(e: any) {
    wx.navigateTo({
      url: `/pages/H5/index?url=${encodeURIComponent(
        `https://www.baidu.com?id=${e.currentTarget.dataset.id}`
      )}`,
    });
  },
  handleGetHomePage() {
    apiGetHome().then((res: any) => {
      //   console.warn("----- my data is res222: ", res);
      this.setData({
        recommendedProducts: res.data.rows.map((item: any) => ({
          id: item.id,
          name: item.title,
          price: item.showPromotionPrice,
          originalPrice: "",
          image: item.mainImageUrl,
          tags: [],
          sales: item.sales,
        })),
      });
    });
  },
  handleGetAppCategory() {
    apiGetAppCategoryList().then((res: any) => {
      //   console.warn("----- my data is res2333: ", res);
      this.setData({
        categories: res.data.map((item: any) => ({
          id: item.id,
          name: item.name,
          icon: item.categoryImageUrl,
          categoryId: "",
        })),
      });
    });
  },

  onLoad() {
    const app = getApp();
    // 页面加载时逻辑
    this.setData({ appName: app.globalData.appName });
  },
  async onShow() {
    wx.showLoading({ title: "加载中", mask: true });
    await this.handleGetHomePage();
    await this.handleGetAppCategory();
    wx.hideLoading();
  },
});