init

miniprogram/pages/goods/list/index.js

@@ -0,0 +1,373 @@
+import { fetchGoodsList } from '../../../services/good/fetchGoodsList';
+import Toast from 'tdesign-miniprogram/toast/index';
+
+const initFilters = {
+  overall: 1,
+  sorts: '',
+  layout: 0,
+};
+
+Page({
+  data: {
+    goodsList: [],
+    layout: 0,
+    sorts: '',
+    overall: 1,
+    show: false,
+    minVal: '',
+    maxVal: '',
+    prices: [],
+    filter: initFilters,
+    hasLoaded: false,
+    loadMoreStatus: 0,
+    loading: true,
+    categoryId: '',
+    categoryName: '',
+    keywords: '',
+  },
+
+  pageNum: 1,
+  pageSize: 30,
+  total: 0,
+
+  handleFilterChange(e) {
+    const { layout, overall, sorts } = e.detail;
+    const { sorts: oldSorts, overall: oldOverall, layout: oldLayout } = this.data;
+    
+    console.log('[GoodsList] 筛选条件变化:', {
+      oldState: {
+        layout: oldLayout === 1 ? '列表' : '网格',
+        overall: oldOverall === 1 ? '综合排序' : '其他排序',
+        sorts: oldSorts || '默认'
+      },
+      newState: {
+        layout: layout === 1 ? '列表' : '网格',
+        overall: overall === 1 ? '综合排序' : '其他排序',
+        sorts: sorts || '默认'
+      },
+      sortText: sorts === 'asc' ? '价格从低到高' : sorts === 'desc' ? '价格从高到低' : '默认排序',
+      timestamp: new Date().toLocaleString(),
+      action: '重置页码并重新加载商品列表'
+    });
+    
+    this.pageNum = 1;
+    this.setData({
+      layout,
+      sorts,
+      overall,
+      filter: {
+        layout,
+        overall,
+        sorts,
+      },
+      loadMoreStatus: 0,
+    });
+    
+    console.log('[GoodsList] 开始重新加载商品列表:', {
+      pageNum: this.pageNum,
+      timestamp: new Date().toLocaleString()
+    });
+    
+    this.init(true);
+  },
+
+  generalQueryData(reset = false) {
+    const { keywords, minVal, maxVal, sorts, overall } = this.data;
+    const { pageNum, pageSize } = this;
+    const params = {
+      sort: overall === 1 ? 0 : 1, // 0 综合，1 价格
+      pageNum: reset ? 1 : pageNum,
+      pageSize: pageSize,
+      keyword: keywords || '',
+    };
+
+    console.log('[GoodsList] 构建查询参数 - 基础参数:', {
+      overall: overall === 1 ? '综合排序' : '其他排序',
+      sorts: sorts || '默认',
+      pageNum: params.pageNum,
+      pageSize: params.pageSize,
+      keyword: params.keyword,
+      reset: reset,
+      timestamp: new Date().toLocaleString()
+    });
+
+    // 添加分类ID参数
+    if (this.categoryId) {
+      params.category_id = this.categoryId;
+      console.log('[GoodsList] 添加分类参数:', {
+        categoryId: this.categoryId,
+        categoryName: this.data.categoryName || '未知分类'
+      });
+    }
+
+    // 设置排序参数
+    if (sorts && sorts !== '') {
+      params.sort = 1;
+      params.sortType = sorts === 'desc' ? 1 : 0;
+      console.log('[GoodsList] 设置价格排序参数:', {
+        sorts: sorts,
+        sortType: params.sortType,
+        sortText: sorts === 'desc' ? '价格从高到低' : '价格从低到高'
+      });
+    }
+
+    // 设置价格筛选参数（传输单位改为“分”，乘以100并取整）
+    const min = Number(minVal);
+    const max = Number(maxVal);
+    if (!Number.isNaN(min) && min > 0) {
+      params.minPrice = Math.round(min * 100);
+      console.log('[GoodsList] 设置最低价格(分):', params.minPrice);
+    }
+    if (!Number.isNaN(max) && max > 0) {
+      params.maxPrice = Math.round(max * 100);
+      console.log('[GoodsList] 设置最高价格(分):', params.maxPrice);
+    }
+
+    console.log('[GoodsList] 最终查询参数:', {
+      params: params,
+      timestamp: new Date().toLocaleString()
+    });
+
+    if (reset) return params;
+    return {
+      ...params,
+      pageNum: pageNum + 1,
+    };
+  },
+
+  async init(reset = true) {
+    const { loadMoreStatus, goodsList = [] } = this.data;
+    const params = this.generalQueryData(reset);
+    if (loadMoreStatus !== 0) return;
+    this.setData({
+      loadMoreStatus: 1,
+      loading: true,
+    });
+    try {
+      const result = await fetchGoodsList(params);
+      console.log('[GoodsList] API调用结果:', {
+        result: result,
+        hasSpuList: !!result.spuList,
+        spuListLength: result.spuList ? result.spuList.length : 0,
+        totalCount: result.totalCount,
+        timestamp: new Date().toLocaleString()
+      });
+      
+      if (result && result.spuList) {
+        const { spuList, totalCount = 0 } = result;
+        if (totalCount === 0 && reset) {
+          this.total = totalCount;
+          this.setData({
+            emptyInfo: {
+              tip: '抱歉，未找到相关商品',
+            },
+            hasLoaded: true,
+            loadMoreStatus: 0,
+            loading: false,
+            goodsList: [],
+          });
+          return;
+        }
+
+        const _goodsList = reset ? spuList : goodsList.concat(spuList);
+        const _loadMoreStatus = _goodsList.length === totalCount ? 2 : 0;
+        this.pageNum = params.pageNum || 1;
+        this.total = totalCount;
+        
+        console.log('[GoodsList] 更新商品列表数据:', {
+          reset: reset,
+          oldGoodsListLength: goodsList.length,
+          newGoodsListLength: _goodsList.length,
+          totalCount: totalCount,
+          loadMoreStatus: _loadMoreStatus,
+          timestamp: new Date().toLocaleString()
+        });
+        
+        this.setData({
+          goodsList: _goodsList,
+          loadMoreStatus: _loadMoreStatus,
+        });
+      } else {
+        console.error('[GoodsList] API返回数据格式错误:', result);
+        this.setData({
+          loading: false,
+        });
+        wx.showToast({
+          title: '查询失败，请稍候重试',
+        });
+      }
+    } catch (error) {
+      this.setData({
+        loading: false,
+      });
+    }
+    this.setData({
+      hasLoaded: true,
+      loading: false,
+    });
+  },
+
+  onLoad(options) {
+    // 接收分类参数
+    if (options.categoryId) {
+      this.categoryId = options.categoryId;
+      this.setData({
+        categoryId: options.categoryId,
+        categoryName: decodeURIComponent(options.categoryName || ''),
+      });
+    }
+    
+    // 接收搜索关键词参数
+    if (options.keyword) {
+      this.setData({
+        keywords: decodeURIComponent(options.keyword),
+      });
+    }
+    
+    this.init(true);
+  },
+
+  onReachBottom() {
+    const { goodsList } = this.data;
+    const { total = 0 } = this;
+    if (goodsList.length === total) {
+      this.setData({
+        loadMoreStatus: 2,
+      });
+      return;
+    }
+    this.init(false);
+  },
+
+  handleAddCart() {
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: '点击加购',
+    });
+  },
+
+  tagClickHandle() {
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: '点击标签',
+    });
+  },
+
+  gotoGoodsDetail(e) {
+    const { index } = e.detail;
+    const { spuId } = this.data.goodsList[index];
+    wx.navigateTo({
+      url: `/pages/goods/details/index?spuId=${spuId}`,
+    });
+  },
+
+  showFilterPopup() {
+    this.setData({
+      show: true,
+    });
+  },
+
+  showFilterPopupClose() {
+    this.setData({
+      show: false,
+    });
+  },
+
+  onMinValAction(e) {
+    const { value } = e.detail;
+    this.setData({ minVal: value });
+  },
+
+  onMaxValAction(e) {
+    const { value } = e.detail;
+    this.setData({ maxVal: value });
+  },
+
+  reset() {
+    this.pageNum = 1;
+    this.setData({
+      minVal: '',
+      maxVal: '',
+      prices: [],
+      goodsList: [],
+      loadMoreStatus: 0,
+    }, () => {
+      this.init(true);
+    });
+  },
+
+  confirm() {
+    const { minVal, maxVal } = this.data;
+    
+    // 验证价格范围
+    if (minVal && maxVal && parseFloat(minVal) > parseFloat(maxVal)) {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '最低价不能大于最高价',
+      });
+      return;
+    }
+    
+    // 构建价格筛选数组
+    const prices = [];
+    if (minVal || maxVal) {
+      prices.push({
+        min: minVal || 0,
+        max: maxVal || '不限'
+      });
+    }
+    
+    // 应用价格筛选
+    this.pageNum = 1;
+    this.setData(
+      {
+        show: false,
+        prices: prices,
+        goodsList: [],
+        loadMoreStatus: 0,
+      },
+      () => {
+        this.init(true);
+      },
+    );
+  },
+
+  // 分享功能
+  onShareAppMessage() {
+    const { categoryName, keywords } = this.data;
+    let title = '精选商品列表';
+    let path = '/pages/goods/list/index';
+    
+    if (categoryName) {
+      title = `${categoryName} - 精选商品`;
+      path = `/pages/goods/list/index?categoryId=${this.categoryId}&categoryName=${encodeURIComponent(categoryName)}`;
+    } else if (keywords) {
+      title = `${keywords} - 搜索结果`;
+      path = `/pages/goods/list/index?keywords=${encodeURIComponent(keywords)}`;
+    }
+    
+    return {
+      title: title,
+      path: path
+    };
+  },
+
+  // 分享到朋友圈
+  onShareTimeline() {
+    const { categoryName, keywords } = this.data;
+    let title = '精选商品列表';
+    
+    if (categoryName) {
+      title = `${categoryName} - 精选商品`;
+    } else if (keywords) {
+      title = `${keywords} - 搜索结果`;
+    }
+    
+    return {
+      title: title
+    };
+  }
+});

miniprogram/pages/goods/list/index.json

@@ -0,0 +1,12 @@
+{
+  "navigationBarTitleText": "商品列表",
+  "usingComponents": {
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-empty": "tdesign-miniprogram/empty/empty",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "goods-list": "/components/goods-list/index",
+    "filter": "/components/filter/index",
+    "filter-popup": "/components/filter-popup/index",
+    "load-more": "/components/load-more/index"
+  }
+}

miniprogram/pages/goods/list/index.wxml

@@ -0,0 +1,56 @@
+<view class="goods-list-container">
+  <filter
+    wr-class="filter-container"
+    bind:change="handleFilterChange"
+    layout="{{layout}}"
+    sorts="{{sorts}}"
+    overall="{{overall}}"
+    prices="{{prices}}"
+    bind:showFilterPopup="showFilterPopup"
+  >
+    <filter-popup
+      slot="filterPopup"
+      show="{{show}}"
+      bind:showFilterPopupClose="showFilterPopupClose"
+      bind:reset="reset"
+      bind:confirm="confirm"
+    >
+      <view class="price-container" slot="filterSlot">
+        <view class="price-between">价格区间</view>
+        <view class="price-ipts-wrap">
+          <t-input
+            align="center"
+            type="number"
+            t-class="price-ipt"
+            placeholder="最低价"
+            value="{{minVal}}"
+            bindchange="onMinValAction"
+          />
+          <view class="price-divided">-</view>
+          <t-input
+            align="center"
+            type="number"
+            t-class="price-ipt"
+            placeholder="最高价"
+            value="{{maxVal}}"
+            bindchange="onMaxValAction"
+          />
+        </view>
+      </view>
+    </filter-popup>
+  </filter>
+  <view class="empty-wrap" wx:if="{{goodsList.length === 0 && hasLoaded}}">
+    <t-empty t-class="empty-tips" size="240rpx" description="暂无相关商品" />
+  </view>
+  <view class="category-goods-list" wx:if="{{goodsList.length}}">
+    <goods-list
+      wr-class="wr-goods-list"
+      goodsList="{{goodsList}}"
+      show-cart="{{false}}"
+      bind:click="gotoGoodsDetail"
+      bind:addcart="handleAddCart"
+    />
+  </view>
+  <load-more wx:if="{{goodsList.length > 0}}" status="{{loadMoreStatus}}" no-more-text="没有更多了" />
+</view>
+<t-toast id="t-toast" />

miniprogram/pages/goods/list/index.wxss

@@ -0,0 +1,99 @@
+page {
+  background-color: #fff;
+}
+
+.goods-list-container {
+  display: block;
+}
+
+.goods-list-container .t-search {
+  padding: 0 30rpx;
+  background-color: #fff;
+}
+
+.goods-list-container .t-class__input-container {
+  height: 64rpx !important;
+  border-radius: 32rpx !important;
+}
+
+.goods-list-container .t-search__left-icon {
+  display: flex;
+  align-items: center;
+}
+
+.goods-list-container .t-search__input {
+  font-size: 28rpx !important;
+  color: rgb(116, 116, 116) !important;
+}
+
+.goods-list-container .category-goods-list {
+  background-color: #f2f2f2;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  padding: 20rpx 24rpx;
+  -webkit-overflow-scrolling: touch;
+}
+
+.goods-list-container .wr-goods-list {
+  background: #f2f2f2 !important;
+}
+
+.goods-list-container .t-image__mask {
+  display: flex !important;
+}
+
+.goods-list-container .empty-wrap {
+  margin-top: 184rpx;
+  margin-bottom: 120rpx;
+  height: 300rpx;
+}
+
+.goods-list-container .empty-wrap .empty-tips .empty-content .content-text {
+  margin-top: 40rpx;
+}
+
+.goods-list-container .price-container {
+  padding: 32rpx;
+  height: 100vh;
+  max-width: 632rpx;
+  background-color: #fff;
+  border-radius: 30rpx 0 0 30rpx;
+  box-sizing: border-box;
+}
+
+.goods-list-container .price-between {
+  font-size: 26rpx;
+  font-weight: 500;
+  color: rgba(51, 51, 51, 1);
+}
+
+.goods-list-container .price-ipts-wrap {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 24rpx;
+
+  --td-input-bg-color: rgba(245, 245, 245, 1);
+  --td-input-vertical-padding: 4rpx;
+  --td-input-border-color: transparent;
+}
+
+.goods-list-container .price-ipts-wrap .price-divided {
+  width: 16rpx;
+  margin: 0 24rpx;
+  color: #333333;
+}
+
+.goods-list-container .price-ipts-wrap .t-input__wrapper {
+  margin: 0 !important;
+}
+
+.goods-list-container .price-ipts-wrap .t-input__content,
+.goods-list-container .price-ipts-wrap .t-input__placeholder {
+  font-size: 24rpx !important;
+}
+
+.goods-list-container .price-ipts-wrap .price-ipt {
+  border-radius: 8rpx;
+}