init

miniprogram/pages/home/home.js

@@ -0,0 +1,243 @@
+import { fetchHome } from '../../services/home/home';
+import { fetchGoodsList } from '../../services/good/fetchGoods';
+import Toast from 'tdesign-miniprogram/toast/index';
+
+Page({
+  data: {
+    imgSrcs: [],
+    tabList: [],
+    goodsList: [],
+    recommendProducts: [],
+    hotProducts: [],
+    goodsListLoadStatus: 0,
+    pageLoading: false,
+    current: 1,
+    autoplay: true,
+    duration: '500',
+    interval: 5000,
+    navigation: { type: 'dots' },
+    swiperImageProps: { mode: 'aspectFill' },
+    currentTabValue: 'hot', // 当前选中的tab值
+    emptyStateConfig: {
+      title: '暂无商品',
+      description: '当前分类下暂时没有商品，试试其他分类吧',
+      icon: 'shop',
+      showAction: true,
+      actionText: '刷新'
+    },
+  },
+
+  goodListPagination: {
+    index: 0,
+    num: 20,
+  },
+
+  privateData: {
+    tabIndex: 0,
+    currentCategoryId: null,
+    isInitialized: false,
+  },
+
+  onShow() {
+    this.getTabBar().init();
+  },
+
+  onLoad() {
+    this.init();
+  },
+
+  onReachBottom() {
+    if (this.data.goodsListLoadStatus === 0) {
+      this.loadGoodsList();
+    }
+  },
+
+  onPullDownRefresh() {
+    this.init();
+  },
+
+  init() {
+    this.loadHomePage();
+  },
+
+  loadHomePage() {
+    wx.stopPullDownRefresh();
+
+    this.setData({
+      pageLoading: true,
+    });
+    fetchHome().then(({ swiper, tabList, recommendProducts, hotProducts }) => {
+      // 转换热门商品数据格式为商品列表格式
+      const hotGoodsList = (hotProducts || []).map(item => ({
+        spuId: item.id,
+        thumb: item.main_image,
+        title: item.name,
+        price: item.price,
+        originPrice: item.orig_price || item.price,
+        tags: [],
+        stock: item.stock || 0,
+        isStock: item.stock > 0,
+      }));
+      
+      this.setData({
+        tabList,
+        imgSrcs: swiper,
+        recommendProducts: recommendProducts || [],
+        hotProducts: hotProducts || [],
+        goodsList: hotGoodsList, // 默认显示热门商品
+        currentTabValue: 'hot', // 重置为热门商品tab
+        pageLoading: false,
+      });
+      
+      // 标记为已初始化，确保默认选中热门商品
+      this.privateData.isInitialized = true;
+      this.privateData.currentCategoryId = null; // 热门商品不需要分类ID
+      this.privateData.tabIndex = 0; // 重置tab索引
+    });
+  },
+
+  tabChangeHandle(e) {
+    const selectedValue = e.detail.value;
+    this.privateData.tabIndex = e.detail.index;
+    
+    // 更新当前选中的tab值
+    this.setData({
+      currentTabValue: selectedValue
+    });
+    
+    // 如果选择的是热门商品tab，显示热门商品数据
+    if (selectedValue === 'hot') {
+      // 转换热门商品数据格式为商品列表格式
+      const hotGoodsList = (this.data.hotProducts || []).map(item => ({
+        spuId: item.id,
+        thumb: item.main_image,
+        title: item.name,
+        price: item.price,
+        originPrice: item.orig_price || item.price,
+        tags: [],
+        stock: item.stock || 0,
+        isStock: item.stock > 0,
+      }));
+      this.setData({
+        goodsList: hotGoodsList,
+        goodsListLoadStatus: 0,
+        emptyStateConfig: {
+          title: '暂无热门商品',
+          description: '当前没有热门商品，稍后再来看看吧',
+          icon: 'heart',
+          showAction: true,
+          actionText: '刷新'
+        }
+      });
+      this.privateData.currentCategoryId = null;
+    } else {
+      // 否则加载对应分类的商品列表
+      const currentCategory = (this.data.tabList || []).find(tab => tab.key === selectedValue);
+      const categoryName = currentCategory ? currentCategory.text : '该分类';
+      
+      this.setData({
+        emptyStateConfig: {
+          title: '暂无商品',
+          description: `${categoryName}下暂时没有商品，试试其他分类吧`,
+          icon: 'shop',
+          showAction: true,
+          actionText: '刷新'
+        }
+      });
+      this.privateData.currentCategoryId = selectedValue;
+      this.loadGoodsList(true);
+    }
+  },
+
+  onReTry() {
+    this.loadGoodsList();
+  },
+
+  async loadGoodsList(fresh = false) {
+    if (fresh) {
+      wx.pageScrollTo({
+        scrollTop: 0,
+      });
+      // 重置分页信息
+      this.goodListPagination.index = 0;
+    }
+
+    this.setData({ goodsListLoadStatus: 1 });
+
+    const pageSize = this.goodListPagination.num;
+    let pageIndex = fresh ? 1 : this.goodListPagination.index + 1;
+    const categoryId = this.privateData.currentCategoryId;
+
+    try {
+      const nextList = await fetchGoodsList(pageIndex, pageSize, categoryId);
+      this.setData({
+        goodsList: fresh ? nextList : this.data.goodsList.concat(nextList),
+        goodsListLoadStatus: 0,
+      });
+
+      this.goodListPagination.index = pageIndex;
+      this.goodListPagination.num = pageSize;
+    } catch (err) {
+      console.error('加载商品列表失败:', err);
+      this.setData({ goodsListLoadStatus: 3 });
+    }
+  },
+
+  goodListClickHandle(e) {
+    const { index } = e.detail;
+    const goodsList = this.data.goodsList || [];
+    if (index >= 0 && index < goodsList.length) {
+      const { spuId } = goodsList[index];
+      wx.navigateTo({
+        url: `/pages/goods/details/index?spuId=${spuId}`,
+      });
+    }
+  },
+
+  goodListAddCartHandle() {
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: '点击加入购物车',
+    });
+  },
+
+  navToSearchPage() {
+    wx.navigateTo({ url: '/pages/goods/search/index' });
+  },
+
+  navToActivityDetail({ detail }) {
+    const { index: promotionID = 0 } = detail || {};
+    wx.navigateTo({
+      url: `/pages/promotion/index?promotion_id=${promotionID}`,
+    });
+  },
+
+  onEmptyAction() {
+    // 空状态操作：刷新当前分类的商品列表
+    if (this.privateData.currentCategoryId === null) {
+      // 如果是热门商品，重新加载首页数据
+      this.init();
+    } else {
+      // 如果是分类商品，重新加载商品列表
+      this.loadGoodsList(true);
+    }
+  },
+
+  // 分享功能
+  onShareAppMessage() {
+    return {
+      title: '精选好物 - 优质商品一站购齐',
+      path: '/pages/home/home',
+      imageUrl: this.data.imgSrcs && this.data.imgSrcs.length > 0 ? this.data.imgSrcs[0].img : ''
+    };
+  },
+
+  // 分享到朋友圈
+  onShareTimeline() {
+    return {
+      title: '精选好物 - 优质商品一站购齐',
+      imageUrl: this.data.imgSrcs && this.data.imgSrcs.length > 0 ? this.data.imgSrcs[0].img : ''
+    };
+  }
+});

miniprogram/pages/home/home.json

@@ -0,0 +1,20 @@
+{
+  "navigationBarTitleText": "首页",
+  "onReachBottomDistance": 10,
+  "backgroundTextStyle": "light",
+  "enablePullDownRefresh": true,
+  "usingComponents": {
+    "t-search": "tdesign-miniprogram/search/search",
+    "t-loading": "tdesign-miniprogram/loading/loading",
+    "t-swiper": "tdesign-miniprogram/swiper/swiper",
+    "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
+    "t-image": "/components/webp-image/index",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-tabs": "tdesign-miniprogram/tabs/tabs",
+    "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
+    "goods-list": "/components/goods-list/index",
+    "load-more": "/components/load-more/index",
+    "empty-state": "/components/empty-state/index"
+  }
+}

miniprogram/pages/home/home.wxml

@@ -0,0 +1,73 @@
+<view style="text-align: center; color: #b9b9b9" wx:if="{{pageLoading}}">
+  <t-loading theme="circular" size="40rpx" text="加载中..." inherit-color />
+</view>
+<view class="home-page-header">
+  <view class="search" bind:tap="navToSearchPage">
+    <t-search
+      t-class-input="t-search__input"
+      t-class-input-container="t-search__input-container"
+      placeholder="搜索商品"
+      leftIcon=""
+      disabled
+    >
+      <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
+    </t-search>
+  </view>
+  <view class="swiper-wrap">
+    <t-swiper
+      wx:if="{{imgSrcs.length > 0}}"
+      current="{{current}}"
+      autoplay="{{autoplay}}"
+      duration="{{duration}}"
+      interval="{{interval}}"
+      navigation="{{navigation}}"
+      imageProps="{{swiperImageProps}}"
+      list="{{imgSrcs}}"
+      bind:click="navToActivityDetail"
+    />
+  </view>
+</view>
+
+
+
+<view class="home-page-container">
+  <view class="home-page-tabs">
+    <t-tabs
+      t-class="t-tabs"
+      t-class-active="tabs-external__active"
+      t-class-item="tabs-external__item"
+      value="{{currentTabValue}}"
+      defaultValue="hot"
+      space-evenly="{{false}}"
+      bind:change="tabChangeHandle"
+    >
+      <t-tab-panel
+        wx:for="{{tabList}}"
+        wx:for-index="index"
+        wx:key="index"
+        label="{{item.text}}"
+        value="{{item.key}}"
+      />
+    </t-tabs>
+  </view>
+
+  <goods-list
+    wr-class="goods-list-container"
+    goodsList="{{goodsList}}"
+    show-cart="{{false}}"
+    bind:click="goodListClickHandle"
+    bind:addcart="goodListAddCartHandle"
+  />
+  <load-more list-is-empty="{{!goodsList.length}}" status="{{goodsListLoadStatus}}" bind:retry="onReTry">
+    <empty-state 
+      slot="empty"
+      title="{{emptyStateConfig.title}}"
+      description="{{emptyStateConfig.description}}"
+      icon="{{emptyStateConfig.icon}}"
+      show-action="{{emptyStateConfig.showAction}}"
+      action-text="{{emptyStateConfig.actionText}}"
+      bind:action="onEmptyAction"
+    />
+  </load-more>
+  <t-toast id="t-toast" />
+</view>

miniprogram/pages/home/home.wxss

@@ -0,0 +1,213 @@
+page {
+  box-sizing: border-box;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx);
+}
+
+.t-tabs.t-tabs--top .t-tabs__scroll {
+  border-bottom: none !important;
+}
+
+.home-page-header {
+  background: linear-gradient(#fff, #f5f5f5);
+}
+
+.home-page-container {
+  background: #f5f5f5;
+}
+
+.home-page-container,
+.home-page-header {
+  display: block;
+  padding: 0 24rpx;
+}
+
+.home-page-header .t-search__input-container {
+  border-radius: 32rpx !important;
+  height: 64rpx !important;
+}
+
+.home-page-header .t-search__input {
+  font-size: 28rpx !important;
+  color: rgb(116, 116, 116) !important;
+}
+
+.home-page-header .swiper-wrap {
+  margin-top: 20rpx;
+}
+
+.home-page-header .t-image__swiper {
+  width: 100%;
+  height: 300rpx;
+  border-radius: 10rpx;
+}
+
+.home-page-container .t-tabs {
+  background: #f5f5f5 !important;
+}
+
+.home-page-container .t-tabs .t-tabs-nav {
+  background-color: transparent;
+  line-height: 80rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.home-page-container .t-tabs .t-tabs-scroll {
+  border: none !important;
+}
+
+/* 半个字 */
+.home-page-container .tab.order-nav .order-nav-item.scroll-width {
+  min-width: 165rpx;
+}
+.home-page-container .tab .order-nav-item.active {
+  color: #fa550f !important;
+}
+
+.home-page-container .tab .bottom-line {
+  border-radius: 4rpx;
+}
+
+.home-page-container .tab .order-nav-item.active .bottom-line {
+  background-color: #fa550f !important;
+}
+
+.home-page-container .tabs-external__item {
+  /* color: #666 !important; */
+  font-size: 28rpx;
+}
+
+.home-page-container .tabs-external__active {
+  color: #333333 !important;
+  font-size: 32rpx;
+}
+
+.home-page-container .tabs-external__track {
+  /* background-color: #fa4126 !important; */
+  height: 6rpx !important;
+  border-radius: 4rpx !important;
+  width: 48rpx !important;
+}
+
+.t-tabs.t-tabs--top .t-tabs__item,
+.t-tabs.t-tabs--bottom .t-tabs__item {
+  height: 86rpx !important;
+}
+
+.home-page-container .goods-list-container {
+  background: #f5f5f5 !important;
+  margin-top: 16rpx;
+}
+
+.home-page-tabs {
+  --td-tab-nav-bg-color: transparent;
+  --td-tab-border-color: transparent;
+  --td-tab-item-color: #666;
+  --td-tab-track-color: red;
+}
+
+/* 推荐商品区域样式 */
+.recommend-section {
+  background: #fff;
+  margin: 20rpx 24rpx;
+  border-radius: 16rpx;
+  padding: 24rpx;
+}
+
+.section-title {
+  margin-bottom: 20rpx;
+}
+
+.title-text {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.recommend-scroll {
+  white-space: nowrap;
+}
+
+.recommend-list {
+  display: flex;
+  gap: 20rpx;
+}
+
+.recommend-item {
+  display: inline-block;
+  width: 200rpx;
+  background: #f8f8f8;
+  border-radius: 12rpx;
+  overflow: hidden;
+}
+
+.recommend-image {
+  width: 100%;
+  height: 200rpx;
+}
+
+.recommend-info {
+  padding: 16rpx;
+}
+
+.recommend-name {
+  display: block;
+  font-size: 24rpx;
+  color: #333;
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recommend-price {
+  font-size: 28rpx;
+  color: #ff4444;
+  font-weight: 600;
+}
+
+/* 热门商品区域样式 */
+.hot-section {
+  background: #fff;
+  margin: 20rpx 24rpx;
+  border-radius: 16rpx;
+  padding: 24rpx;
+}
+
+.hot-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+}
+
+.hot-item {
+  width: calc(50% - 10rpx);
+  background: #f8f8f8;
+  border-radius: 12rpx;
+  overflow: hidden;
+}
+
+.hot-image {
+  width: 100%;
+  height: 200rpx;
+}
+
+.hot-info {
+  padding: 16rpx;
+}
+
+.hot-name {
+  display: block;
+  font-size: 24rpx;
+  color: #333;
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hot-price {
+  font-size: 28rpx;
+  color: #ff4444;
+  font-weight: 600;
+}

miniprogram/pages/home/readme

@@ -0,0 +1,8 @@
+首页功能设定
+1. loading入场
+2. 下拉刷新
+3. 搜索栏
+4. 分类切换
+5. 商品列表
+6. 规格弹层
+7. 加载更多