第一次提交：微信小程序前端最新完整代码

pages/dashoudingdan/dashoudingdan.js

@@ -0,0 +1,307 @@
+const app = getApp();
+import request from '../../utils/request.js';
+import { reconnectForRole } from '../../utils/role-tab-bar.js';
+
+Page({
+  data: {
+    // 商品类型
+    shangpinleixing: [],
+    xuanzhongLeixingId: null,
+
+    // 订单类型: normal 普通, peihu 陪护
+    orderType: 'normal',
+
+    // 搜索关键字
+    searchKeyword: '',
+
+    // 状态列表（增加全部）
+    statusList: [
+      { name: '全部', key: 'all', zhuangtaiList: [], color: '#333333' },
+      { name: '进行中', key: 'jinxingzhong', zhuangtaiList: [2], color: '#2196F3' },
+      { name: '退款中', key: 'tuikuanzhong', zhuangtaiList: [4], color: '#FF9800' },
+      { name: '已退款', key: 'yituikuan', zhuangtaiList: [5], color: '#9E9E9E' },
+      { name: '退款失败', key: 'tuikuanshibai', zhuangtaiList: [6], color: '#F44336' },
+      { name: '已完成', key: 'yiwancheng', zhuangtaiList: [3], color: '#4CAF50' },
+      { name: '结算中', key: 'jiesuanzhong', zhuangtaiList: [8], color: '#FF5722' }
+    ],
+    currentStatusKey: 'all',
+
+    // 每个状态独立的数据集
+    dsDingdanShuju: {
+      all: { list: [], page: 1, hasMore: true, isLoading: false },
+      jinxingzhong: { list: [], page: 1, hasMore: true, isLoading: false },
+      tuikuanzhong: { list: [], page: 1, hasMore: true, isLoading: false },
+      yituikuan: { list: [], page: 1, hasMore: true, isLoading: false },
+      tuikuanshibai: { list: [], page: 1, hasMore: true, isLoading: false },
+      yiwancheng: { list: [], page: 1, hasMore: true, isLoading: false },
+      jiesuanzhong: { list: [], page: 1, hasMore: true, isLoading: false }
+    },
+
+    currentList: [],
+    hasMore: true,
+    isLoading: false,
+    isLoadingMore: false,
+    scrollViewRefreshing: false,
+    defaultImg: '/images/default-order.png',
+    ossImageUrl: app.globalData.ossImageUrl || '',
+  },
+
+  onLoad() {
+    wx.setNavigationBarTitle({ title: '我的接单' });
+    this.loadShangpinLeixing();
+    this.registerNotificationComponent();
+  },
+
+  onShow() {
+    this.registerNotificationComponent();
+    if (wx.getStorageSync('uid')) {
+      reconnectForRole('dashou');
+      if (app.startImWhenReady) app.startImWhenReady();
+    }
+    if (this.data.currentStatusKey && this.data.xuanzhongLeixingId) {
+      this.loadCurrentStatusOrders(true);
+    }
+  },
+
+  registerNotificationComponent() {
+    const notificationComp = this.selectComponent('#global-notification');
+    if (notificationComp && notificationComp.showNotification) {
+      app.globalData.globalNotification = {
+        show: (data) => notificationComp.showNotification(data),
+        hide: () => notificationComp.hideNotification()
+      };
+    }
+  },
+
+  // 加载商品类型（图片拼接）
+  async loadShangpinLeixing() {
+    try {
+      const res = await request({
+        url: '/dingdan/dsqdhqddlx',
+        method: 'POST',
+        header: { 'content-type': 'application/json' }
+      });
+      if (res.data && (res.data.code === 200 || res.data.code === 0)) {
+        let list = res.data.data.list || res.data.data || [];
+        if (!Array.isArray(list)) list = [];
+        const oss = this.data.ossImageUrl;
+        const processed = list.map(item => ({
+          ...item,
+          full_tupian_url: item.tupian_url && !item.tupian_url.startsWith('http')
+            ? oss + item.tupian_url
+            : (item.tupian_url || '/images/default-type.png')
+        }));
+        this.setData({
+          shangpinleixing: processed,
+          xuanzhongLeixingId: processed[0]?.id || null
+        });
+        this.loadCurrentStatusOrders(true);
+      }
+    } catch (e) {
+      console.error('加载商品类型失败', e);
+    }
+  },
+
+  selectLeixing(e) {
+    const id = e.currentTarget.dataset.id;
+    if (id === this.data.xuanzhongLeixingId) return;
+    this.setData({ xuanzhongLeixingId: id });
+    this.resetCurrentStatusData();
+    this.loadCurrentStatusOrders(true);
+  },
+
+  switchOrderType(e) {
+    const type = e.currentTarget.dataset.type;
+    if (type === this.data.orderType) return;
+    this.setData({ orderType: type });
+    this.resetCurrentStatusData();
+    this.loadCurrentStatusOrders(true);
+  },
+
+  onSearchInput(e) {
+    this.setData({ searchKeyword: e.detail.value });
+    if (this._searchTimer) clearTimeout(this._searchTimer);
+    this._searchTimer = setTimeout(() => {
+      this.onSearchConfirm();
+    }, 500);
+  },
+
+  onSearchConfirm() {
+    this.resetCurrentStatusData();
+    this.loadCurrentStatusOrders(true);
+  },
+
+  clearSearch() {
+    this.setData({ searchKeyword: '' });
+    this.resetCurrentStatusData();
+    this.loadCurrentStatusOrders(true);
+  },
+
+  switchStatus(e) {
+    const key = e.currentTarget.dataset.key;
+    if (key === this.data.currentStatusKey) return;
+    this.setData({ currentStatusKey: key });
+    const tabData = this.data.dsDingdanShuju[key];
+    if (tabData.list.length === 0 && tabData.hasMore && !tabData.isLoading) {
+      this.loadCurrentStatusOrders(true);
+    } else {
+      this.refreshCurrentListView();
+    }
+  },
+
+  // 加载订单（核心）
+  async loadCurrentStatusOrders(isRefresh = false) {
+    const key = this.data.currentStatusKey;
+    const tabData = this.data.dsDingdanShuju[key];
+    if (tabData.isLoading) return;
+    const page = isRefresh ? 1 : tabData.page;
+
+    this.setData({
+      [`dsDingdanShuju.${key}.isLoading`]: true,
+      isLoading: true,
+      isLoadingMore: !isRefresh
+    });
+
+    try {
+      const apiUrl = this.data.orderType === 'peihu'
+        ? '/dingdan/phddlbhq'
+        : '/dingdan/dshqdingdan';
+
+      const statusItem = this.data.statusList.find(s => s.key === key);
+      const zhuangtaiList = statusItem.zhuangtaiList.length > 0 ? statusItem.zhuangtaiList : undefined;
+      const params = {
+        zhuangtai_list: zhuangtaiList,
+        page: page,
+        page_size: 5,
+        leixing_id: this.data.xuanzhongLeixingId,
+        keyword: this.data.searchKeyword || undefined
+      };
+
+      const res = await request({
+        url: apiUrl,
+        method: 'POST',
+        data: params,
+        header: { 'content-type': 'application/json' }
+      });
+
+      const code = res.data.code;
+      if (code === 200 || code === 0) {
+        const newList = res.data.data.list || [];
+        const hasMore = res.data.data.has_more || false;
+
+        // ✅ 图片URL拼接（核心）
+        const processed = newList.map(item => ({
+          ...item,
+          zhuangtaiZh: this.getZhuangtaiZh(item.zhuangtai),
+          zhuangtaiColor: statusItem.color,
+          tupian: item.tupian
+            ? (item.tupian.startsWith('http') ? item.tupian : this.data.ossImageUrl + item.tupian)
+            : this.data.defaultImg
+        }));
+
+        const currentList = this.data.dsDingdanShuju[key].list;
+        const updatedList = isRefresh ? processed : [...currentList, ...processed];
+
+        this.setData({
+          [`dsDingdanShuju.${key}.list`]: updatedList,
+          [`dsDingdanShuju.${key}.page`]: page,
+          [`dsDingdanShuju.${key}.hasMore`]: hasMore,
+          [`dsDingdanShuju.${key}.isLoading`]: false,
+          isLoading: false,
+          isLoadingMore: false,
+          scrollViewRefreshing: false
+        });
+        this.refreshCurrentListView();
+      } else {
+        throw new Error(res.data.msg || '加载失败');
+      }
+    } catch (err) {
+      console.error('加载订单失败', err);
+      wx.showToast({ title: err.message || '加载失败', icon: 'none' });
+      this.setData({
+        [`dsDingdanShuju.${key}.isLoading`]: false,
+        isLoading: false,
+        isLoadingMore: false,
+        scrollViewRefreshing: false
+      });
+      this.refreshCurrentListView();
+    }
+  },
+
+  refreshCurrentListView() {
+    const key = this.data.currentStatusKey;
+    const tabData = this.data.dsDingdanShuju[key];
+    this.setData({
+      currentList: tabData.list,
+      hasMore: tabData.hasMore,
+      isLoading: tabData.isLoading
+    });
+  },
+
+  resetCurrentStatusData() {
+    const key = this.data.currentStatusKey;
+    this.setData({
+      [`dsDingdanShuju.${key}.list`]: [],
+      [`dsDingdanShuju.${key}.page`]: 1,
+      [`dsDingdanShuju.${key}.hasMore`]: true,
+      [`dsDingdanShuju.${key}.isLoading`]: false
+    });
+    this.refreshCurrentListView();
+  },
+
+  // 下拉刷新（由 scroll-view 触发）
+  onPullDownRefresh() {
+    if (this.data.isLoading) {
+      this.setData({ scrollViewRefreshing: false });
+      return;
+    }
+    this.setData({ scrollViewRefreshing: true });
+    this.resetCurrentStatusData();
+    this.loadCurrentStatusOrders(true);
+  },
+
+  // 上拉加载更多（由 scroll-view 触发）
+  onReachBottom() {
+    const key = this.data.currentStatusKey;
+    const tabData = this.data.dsDingdanShuju[key];
+    if (tabData.isLoading || !tabData.hasMore) return;
+    this.setData({ [`dsDingdanShuju.${key}.page`]: tabData.page + 1 });
+    this.loadCurrentStatusOrders(false);
+  },
+
+  // ✅ 手动点击“加载更多”按钮
+  onLoadMoreTap() {
+    const key = this.data.currentStatusKey;
+    const tabData = this.data.dsDingdanShuju[key];
+    if (tabData.isLoading || !tabData.hasMore) return;
+    this.setData({ [`dsDingdanShuju.${key}.page`]: tabData.page + 1 });
+    this.loadCurrentStatusOrders(false);
+  },
+
+  getZhuangtaiZh(zhuangtai) {
+    const map = {
+      1: '已下单', 2: '进行中', 3: '已完成',
+      4: '退款中', 5: '已退款', 6: '退款失败',
+      7: '指定中', 8: '结算中'
+    };
+    return map[zhuangtai] || '未知状态';
+  },
+
+  goToDsDingdanXiangqing(e) {
+    const item = e.currentTarget.dataset.item;
+    if (!item) return;
+    const dataStr = encodeURIComponent(JSON.stringify(item));
+
+    if (this.data.orderType === 'peihu') {
+      wx.navigateTo({
+        url: `/pages/peihuDingdan/peihuDingdan?dingdanData=${dataStr}`
+      });
+    } else {
+      wx.navigateTo({
+        url: `/pages/dsddxq/dsddxq?dingdanData=${dataStr}`
+      });
+    }
+  },
+
+  onImageError() {}
+});

pages/dashoudingdan/dashoudingdan.json

@@ -0,0 +1,8 @@
+{
+    "usingComponents": {
+        "global-notification": "/components/global-notification/global-notification"
+    },
+    "navigationBarTitleText": "我的接单",
+    "enablePullDownRefresh": false,
+    "onReachBottomDistance": 50
+  }

pages/dashoudingdan/dashoudingdan.wxml

@@ -0,0 +1,112 @@
+<view class="ds-page">
+  <!-- 顶部商品类型滑动 -->
+  <view class="leixing-area">
+    <scroll-view class="leixing-scroll" scroll-x enhanced show-scrollbar="{{false}}">
+      <view class="leixing-container">
+        <block wx:for="{{shangpinleixing}}" wx:key="id">
+          <view
+            class="leixing-item {{xuanzhongLeixingId == item.id ? 'leixing-active' : ''}}"
+            data-id="{{item.id}}"
+            bindtap="selectLeixing"
+          >
+            <image class="leixing-img" src="{{item.full_tupian_url}}" mode="aspectFill"/>
+            <text class="leixing-name">{{item.jieshao || '类型'}}</text>
+          </view>
+        </block>
+      </view>
+    </scroll-view>
+  </view>
+
+  <!-- 筛选行 -->
+  <view class="filter-row">
+    <view class="type-switch">
+      <view class="type-btn {{orderType == 'normal' ? 'type-active' : ''}}" data-type="normal" bindtap="switchOrderType">普通订单</view>
+      <view class="type-btn {{orderType == 'peihu' ? 'type-active' : ''}}" data-type="peihu" bindtap="switchOrderType">陪护订单</view>
+    </view>
+    <view class="search-box">
+      <image class="search-icon" src="/images/icon_search.svg" mode="aspectFit"/>
+      <input class="search-input" placeholder="搜索订单ID/介绍" value="{{searchKeyword}}" bindinput="onSearchInput" bindconfirm="onSearchConfirm" confirm-type="search"/>
+      <view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch"><text>✕</text></view>
+    </view>
+  </view>
+
+  <!-- 主体：左右布局 -->
+  <view class="main-container">
+    <!-- 左侧状态栏（固定） -->
+    <view class="left-status">
+      <block wx:for="{{statusList}}" wx:key="key">
+        <view class="status-item {{currentStatusKey == item.key ? 'status-active' : ''}}" data-key="{{item.key}}" bindtap="switchStatus">
+          <text class="status-name">{{item.name}}</text>
+          <view class="status-dot" wx:if="{{currentStatusKey == item.key}}"></view>
+        </view>
+      </block>
+    </view>
+
+    <!-- 右侧包裹：撑出右边距，里面是 scroll-view -->
+    <view class="right-wrapper">
+      <scroll-view
+        class="right-list"
+        scroll-y enhanced show-scrollbar="{{false}}"
+        refresher-enabled="{{true}}"
+        refresher-threshold="80"
+        refresher-default-style="black"
+        refresher-background="#f5f6fa"
+        refresher-triggered="{{scrollViewRefreshing}}"
+        bindrefresherrefresh="onPullDownRefresh"
+        bindscrolltolower="onReachBottom"
+        lower-threshold="50"
+      >
+        <view class="refresher-slot" slot="refresher">
+          <text wx:if="{{scrollViewRefreshing}}" class="refreshing-text">⚡ 正在刷新...</text>
+          <text wx:else class="pull-text">▼ 下拉刷新</text>
+        </view>
+
+        <!-- 内容容器：仅设置左侧 padding，右侧间距由 wrapper 控制 -->
+        <view class="list-inner">
+          <view wx:if="{{isLoading && currentList.length === 0}}" class="loading-state">
+            <view class="loading-spinner"></view>
+            <text class="loading-tip">加载订单中...</text>
+          </view>
+
+          <view wx:elif="{{!isLoading && currentList.length === 0}}" class="empty-state">
+            <image class="empty-img" src="/images/empty-order.png" mode="aspectFit"/>
+            <text class="empty-text">暂无订单</text>
+          </view>
+
+          <block wx:for="{{currentList}}" wx:key="dingdan_id">
+            <view class="order-card" data-item="{{item}}" bindtap="goToDsDingdanXiangqing">
+              <image class="card-img" src="{{item.tupian}}" mode="aspectFill" binderror="onImageError"/>
+              <view class="card-info">
+                <view class="card-title">{{item.jieshao || '暂无描述'}}</view>
+                <view class="card-id" wx:if="{{item.dingdan_id}}">ID: {{item.dingdan_id}}</view>
+              </view>
+              <view class="card-right">
+                <view class="card-status" style="color: {{item.zhuangtaiColor}};">{{item.zhuangtaiZh}}</view>
+                <view class="card-price">¥{{item.jine || '0.00'}}</view>
+              </view>
+            </view>
+          </block>
+
+          <view class="load-more" wx:if="{{hasMore && currentList.length > 0 && !isLoadingMore}}">
+            <text class="load-more-text">上拉加载更多</text>
+          </view>
+
+          <view class="loading-more-state" wx:if="{{isLoadingMore}}">
+            <view class="mini-spinner"></view>
+            <text>加载中...</text>
+          </view>
+
+          <view class="manual-load-more" wx:if="{{hasMore && currentList.length > 0 && !isLoadingMore}}">
+            <button class="load-more-btn" bindtap="onLoadMoreTap" loading="{{false}}">点击加载更多</button>
+          </view>
+
+          <view class="no-more" wx:if="{{!hasMore && currentList.length > 0}}">
+            <text>—— 没有更多了 ——</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</view>
+<global-notification id="global-notification" />
+<custom-tab-bar />

pages/dashoudingdan/dashoudingdan.wxss

@@ -0,0 +1,349 @@
+/* 页面容器：禁止整体滚动 */
+page {
+    height: 100%;
+    overflow: hidden;
+  }
+  .ds-page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #f5f6fa;
+  }
+  
+  /* 商品类型区 */
+  .leixing-area {
+    background: #fff;
+    padding: 24rpx 0;
+    border-bottom: 1rpx solid #f0f0f0;
+    flex-shrink: 0;
+  }
+  .leixing-scroll {
+    white-space: nowrap;
+  }
+  .leixing-container {
+    display: inline-flex;
+    padding: 0 24rpx;
+  }
+  .leixing-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 32rpx;
+    padding: 12rpx 20rpx;
+    border-radius: 28rpx;
+    transition: all 0.2s;
+  }
+  .leixing-item.leixing-active {
+    background: linear-gradient(135deg, #e8f0fe, #d4e4ff);
+    box-shadow: 0 4rpx 12rpx rgba(33,150,243,0.15);
+  }
+  .leixing-img {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: #f0f0f0;
+    margin-bottom: 8rpx;
+  }
+  .leixing-name {
+    font-size: 24rpx;
+    color: #333;
+    max-width: 100rpx;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  /* 筛选行 */
+  .filter-row {
+    display: flex;
+    align-items: center;
+    padding: 20rpx 24rpx;
+    background: #fff;
+    border-bottom: 1rpx solid #f0f0f0;
+    flex-shrink: 0;
+  }
+  .type-switch {
+    display: flex;
+    background: #f0f2f5;
+    border-radius: 36rpx;
+    padding: 4rpx;
+    margin-right: 24rpx;
+  }
+  .type-btn {
+    padding: 12rpx 32rpx;
+    font-size: 26rpx;
+    color: #666;
+    border-radius: 32rpx;
+    transition: all 0.2s;
+  }
+  .type-btn.type-active {
+    background: #fff;
+    color: #1976D2;
+    font-weight: 600;
+    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.06);
+  }
+  .search-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    background: #f0f2f5;
+    border-radius: 36rpx;
+    padding: 0 20rpx;
+    height: 68rpx;
+  }
+  .search-icon {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 12rpx;
+    opacity: 0.5;
+  }
+  .search-input {
+    flex: 1;
+    font-size: 26rpx;
+    color: #333;
+  }
+  .search-clear {
+    width: 40rpx;
+    height: 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ccc;
+    border-radius: 50%;
+    margin-left: 8rpx;
+  }
+  .search-clear text {
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: bold;
+  }
+  
+  /* 主体布局 */
+  .main-container {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+  
+  /* 左侧状态栏（固定） */
+  .left-status {
+    width: 180rpx;
+    background: #fff;
+    border-right: 1rpx solid #f0f0f0;
+    padding: 28rpx 0;
+    flex-shrink: 0;
+  }
+  .status-item {
+    padding: 28rpx 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .status-item.status-active {
+    background: linear-gradient(to right, #e3f2fd, #fff);
+  }
+  .status-name {
+    font-size: 28rpx;
+    color: #555;
+  }
+  .status-active .status-name {
+    color: #1976D2;
+    font-weight: 600;
+  }
+  .status-dot {
+    width: 14rpx;
+    height: 14rpx;
+    border-radius: 50%;
+    background: #1976D2;
+  }
+  
+  /* ✅ 右侧包裹：通过 padding-right 制造右侧间距 */
+  .right-wrapper {
+    flex: 1;
+    padding-right: 30rpx;          /* 卡片距离屏幕右侧 30rpx */
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  
+  /* 右侧滚动区 */
+  .right-list {
+    width: 100%;
+    height: 100%;
+    background: #f5f6fa;
+  }
+  .refresher-slot {
+    text-align: center;
+    padding: 14rpx 0;
+    font-size: 24rpx;
+    color: #999;
+  }
+  
+  /* 内容容器：仅左侧 padding，右侧间距由 wrapper 负责 */
+  .list-inner {
+    padding: 24rpx 0 200rpx 20rpx;  /* 上、右、下、左 —— 右边无 padding */
+    box-sizing: border-box;
+  }
+  
+  /* 订单卡片（严格限制宽度） */
+  .order-card {
+    display: flex;
+    align-items: center;
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 24rpx;
+    margin-bottom: 24rpx;
+    box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.04);
+    box-sizing: border-box;
+    width: 100%;                  /* 占满父容器宽度 */
+  }
+  .order-card:active {
+    transform: scale(0.98);
+  }
+  .card-img {
+    width: 130rpx;
+    height: 130rpx;
+    border-radius: 18rpx;
+    background: #f0f0f0;
+    margin-right: 24rpx;
+    flex-shrink: 0;
+  }
+  .card-info {
+    flex: 1;
+    height: 130rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: 0;
+  }
+  .card-title {
+    font-size: 28rpx;
+    color: #222;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+  .card-id {
+    font-size: 22rpx;
+    color: #999;
+    margin-top: 8rpx;
+  }
+  
+  /* ✅ 状态和价格区：压缩宽度，强制不换行 */
+  .card-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    height: 130rpx;
+    margin-left: 20rpx;
+    flex-shrink: 0;
+    max-width: 160rpx;           /* 限制最大宽度 */
+  }
+  .card-status {
+    font-size: 24rpx;
+    font-weight: 500;
+    padding: 4rpx 12rpx;
+    background: #f5f5f5;
+    border-radius: 20rpx;
+    margin-bottom: 8rpx;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .card-price {
+    font-size: 34rpx;
+    font-weight: 700;
+    color: #333;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  /* 加载与空状态 */
+  .loading-state, .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 120rpx 0;
+  }
+  .loading-spinner {
+    width: 52rpx;
+    height: 52rpx;
+    border: 4rpx solid #e0e0e0;
+    border-top-color: #1976D2;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-bottom: 24rpx;
+  }
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  .empty-img {
+    width: 200rpx;
+    height: 200rpx;
+    opacity: 0.4;
+    margin-bottom: 24rpx;
+  }
+  .empty-text, .loading-tip {
+    font-size: 28rpx;
+    color: #999;
+  }
+  
+  .load-more {
+    text-align: center;
+    padding: 36rpx 0 20rpx 0;
+    font-size: 26rpx;
+    color: #999;
+  }
+  .loading-more-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20rpx 0;
+    font-size: 26rpx;
+    color: #999;
+  }
+  .mini-spinner {
+    display: inline-block;
+    width: 26rpx;
+    height: 26rpx;
+    border: 3rpx solid #ccc;
+    border-top-color: #1976D2;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+    vertical-align: middle;
+    margin-right: 10rpx;
+  }
+  
+  .manual-load-more {
+    display: flex;
+    justify-content: center;
+    padding: 30rpx 0 10rpx 0;
+  }
+  .load-more-btn {
+    background: #ffffff;
+    color: #1976D2;
+    font-size: 28rpx;
+    font-weight: 500;
+    border: 2rpx solid #1976D2;
+    border-radius: 40rpx;
+    padding: 16rpx 60rpx;
+    text-align: center;
+    box-shadow: 0 4rpx 12rpx rgba(33,150,243,0.1);
+  }
+  .load-more-btn::after {
+    border: none;
+  }
+  
+  .no-more {
+    text-align: center;
+    padding: 40rpx 0;
+    font-size: 26rpx;
+    color: #999;
+  }