XingQue/Wechat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
XingQue
2026-06-12 21:55:06 +08:00
commit 84be8489b4
330 changed files with 74263 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
pages/sjdingdan/sjdingdan.js Normal file
View File

@@ -0,0 +1,327 @@
// pages/sjdingdan/sjdingdan.js
const app = getApp();
import request from '../../utils/request.js';
import { reconnectForRole } from '../../utils/role-tab-bar.js';
Page({
data: {
// 商品类型（和打手端用同一个接口）
shangpinleixing: [],
xuanzhongLeixingId: null,
// 搜索关键字（模糊搜索）
searchKeyword: '',
// 状态列表（含全部）
statusList: [
{ name: '全部', key: 'all', zhuangtaiList: [1, 2, 3, 4, 5, 6, 7, 8], 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',
// 每个状态独立的数据集
sjDingdanShuju: {
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 || '',
// 待结算数量
pendingCount: 0,
},
onLoad() {
wx.setNavigationBarTitle({ title: '我的派单' });
this.loadShangpinLeixing();
this.registerNotificationComponent();
},
onShow() {
this.registerNotificationComponent();
this.loadPendingCount();
if (wx.getStorageSync('uid')) {
reconnectForRole('shangjia');
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()
};
}
},
// 🆕 加载商品类型（和打手端用同一个接口 /dingdan/dsqdhqddlx）
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;
// 拼接图片完整URL
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);
},
// 搜索输入（防抖）
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);
},
// 切换状态Tab
switchStatus(e) {
const key = e.currentTarget.dataset.key;
if (key === this.data.currentStatusKey) return;
this.setData({ currentStatusKey: key });
const tabData = this.data.sjDingdanShuju[key];
// 如果该状态没有数据，则加载；否则只刷新视图
if (tabData.list.length === 0 && tabData.hasMore && !tabData.isLoading) {
this.loadCurrentStatusOrders(true);
} else {
this.refreshCurrentListView();
}
},
// 🆕 加载订单（核心方法，接口固定用商家订单接口 /dingdan/sjdingdanhq）
async loadCurrentStatusOrders(isRefresh = false) {
const key = this.data.currentStatusKey;
const tabData = this.data.sjDingdanShuju[key];
if (tabData.isLoading) return;
const page = isRefresh ? 1 : tabData.page;
this.setData({
[`sjDingdanShuju.${key}.isLoading`]: true,
isLoading: true,
isLoadingMore: !isRefresh
});
try {
const statusItem = this.data.statusList.find(s => s.key === key);
const zhuangtaiList = statusItem.zhuangtaiList;
// 构建请求参数
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: '/dingdan/sjdingdanhq', // 商家订单接口（和原来一样）
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;
// 处理数据：拼接图片、转换状态中文
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.sjDingdanShuju[key].list;
const updatedList = isRefresh ? processed : [...currentList, ...processed];
this.setData({
[`sjDingdanShuju.${key}.list`]: updatedList,
[`sjDingdanShuju.${key}.page`]: page,
[`sjDingdanShuju.${key}.hasMore`]: hasMore,
[`sjDingdanShuju.${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({
[`sjDingdanShuju.${key}.isLoading`]: false,
isLoading: false,
isLoadingMore: false,
scrollViewRefreshing: false
});
this.refreshCurrentListView();
}
},
// 刷新当前视图
refreshCurrentListView() {
const key = this.data.currentStatusKey;
const tabData = this.data.sjDingdanShuju[key];
this.setData({
currentList: tabData.list,
hasMore: tabData.hasMore,
isLoading: tabData.isLoading
});
},
// 重置当前状态数据
resetCurrentStatusData() {
const key = this.data.currentStatusKey;
this.setData({
[`sjDingdanShuju.${key}.list`]: [],
[`sjDingdanShuju.${key}.page`]: 1,
[`sjDingdanShuju.${key}.hasMore`]: true,
[`sjDingdanShuju.${key}.isLoading`]: false
});
this.refreshCurrentListView();
},
// 🆕 加载待结算数量
async loadPendingCount() {
try {
const res = await request({
url: '/dingdan/sjdingdanhq',
method: 'POST',
data: {
zhuangtai_list: [8],
page: 1,
page_size: 1
}
});
if (res && res.data.code === 0) {
this.setData({ pendingCount: res.data.data.pending_count || 0 });
}
} catch (error) {
console.error('加载待结算数量失败:', error);
}
},
// 下拉刷新（由 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.sjDingdanShuju[key];
if (tabData.isLoading || !tabData.hasMore) return;
this.setData({ [`sjDingdanShuju.${key}.page`]: tabData.page + 1 });
this.loadCurrentStatusOrders(false);
},
// 🆕 手动点击"加载更多"按钮
onLoadMoreTap() {
const key = this.data.currentStatusKey;
const tabData = this.data.sjDingdanShuju[key];
if (tabData.isLoading || !tabData.hasMore) return;
this.setData({ [`sjDingdanShuju.${key}.page`]: tabData.page + 1 });
this.loadCurrentStatusOrders(false);
},
// 状态码转中文
getZhuangtaiZh(zhuangtai) {
const map = {
1: '已下单', 2: '进行中', 3: '已完成',
4: '退款中', 5: '已退款', 6: '退款失败',
7: '指定中', 8: '结算中'
};
return map[zhuangtai] || '未知状态';
},
// 跳转订单详情
goToSjDingdanXiangqing(e) {
const item = e.currentTarget.dataset.item;
if (!item) return;
const dataStr = encodeURIComponent(JSON.stringify(item));
wx.navigateTo({
url: `/pages/sjddxq/sjddxq?dingdanData=${dataStr}`
});
},
// 图片加载失败
onImageError() {}
});

9
pages/sjdingdan/sjdingdan.json Normal file
View File

@@ -0,0 +1,9 @@
{
"navigationBarTitleText": "我的派单",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark",
"backgroundColor": "#f8f9fa",
"usingComponents": {
"global-notification": "/components/global-notification/global-notification"
}
}

135
pages/sjdingdan/sjdingdan.wxml Normal file
View File

@@ -0,0 +1,135 @@
<!--pages/sjdingdan/sjdingdan.wxml-->
<view class="sj-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="search-box">
<image class="search-icon" src="/images/icon_search.svg" mode="aspectFit"/>
<input class="search-input" placeholder="搜索订单ID/介绍/昵称/打手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="sj-pending-tip" wx:if="{{pendingCount > 0}}">
<text class="sj-pending-icon"></text>
<text class="sj-pending-text">待结算订单</text>
<view class="sj-pending-badge">{{pendingCount}}</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 wx:if="{{item.key === 'jiesuanzhong' && pendingCount > 0}}" class="sj-status-badge">{{pendingCount}}</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>
<!-- 内容容器 -->
<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>
<text class="empty-subtext">快去派发订单吧</text>
</view>
<!-- 订单卡片列表 -->
<block wx:for="{{currentList}}" wx:key="dingdan_id">
<view class="order-card {{item.zhuangtai === 8 ? 'sj-card-jiesuan' : ''}}" data-item="{{item}}" bindtap="goToSjDingdanXiangqing">
<!-- 创建时间 -->
<view class="card-time" wx:if="{{item.create_time}}">{{item.create_time}}</view>
<!-- 内容行 -->
<view class="card-content-row">
<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 class="card-nicheng" wx:if="{{item.nicheng}}">昵称: {{item.nicheng}}</view>
</view>
<view class="card-right">
<view class="card-status {{item.zhuangtai === 8 ? 'sj-status-jiesuan' : ''}}" style="color: {{item.zhuangtaiColor}};">{{item.zhuangtaiZh}}</view>
<view class="card-price">
<text class="price-symbol">¥</text>
<text class="price-number">{{item.jine || '0.00'}}</text>
</view>
</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 />

430
pages/sjdingdan/sjdingdan.wxss Normal file
View File

@@ -0,0 +1,430 @@
/* pages/sjdingdan/sjdingdan.wxss */
/* 页面容器：禁止整体滚动 */
page {
height: 100%;
overflow: hidden;
}
.sj-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;
}
.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;
}
/* ========== 待结算提示条（保留原样式） ========== */
.sj-pending-tip {
margin: 20rpx 24rpx;
padding: 16rpx 24rpx;
background: linear-gradient(145deg, #ffe8cc, #ffdbb5);
border-left: 8rpx solid #ffaa00;
border-radius: 16rpx;
display: flex;
align-items: center;
gap: 16rpx;
box-shadow: 0 8rpx 20rpx rgba(255,170,0,0.3);
flex-shrink: 0;
}
.sj-pending-icon {
font-size: 36rpx;
color: #ffaa00;
}
.sj-pending-text {
font-size: 28rpx;
color: #b25700;
font-weight: 600;
}
.sj-pending-badge {
min-width: 44rpx;
height: 44rpx;
padding: 0 12rpx;
background: linear-gradient(145deg, #ff3b3b, #d10000);
color: #fff;
font-size: 26rpx;
font-weight: 700;
line-height: 44rpx;
text-align: center;
border-radius: 22rpx;
margin-left: auto;
box-shadow: 0 4rpx 12rpx rgba(255,0,0,0.5);
}
/* ========== 主体布局 ========== */
.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;
position: relative;
}
.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;
}
/* 结算中状态的小红点数字 */
.sj-status-badge {
min-width: 36rpx;
height: 36rpx;
padding: 0 8rpx;
background: linear-gradient(145deg, #ff4d4f, #d10000);
color: #fff;
font-size: 22rpx;
font-weight: 700;
line-height: 36rpx;
text-align: center;
border-radius: 18rpx;
margin-left: 8rpx;
box-shadow: 0 4rpx 8rpx rgba(255,0,0,0.4);
}
/* 右侧包裹 */
.right-wrapper {
flex: 1;
padding-right: 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;
}
/* 内容容器 */
.list-inner {
padding: 24rpx 0 200rpx 20rpx;
box-sizing: border-box;
}
/* ========== 订单卡片 ========== */
.order-card {
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%;
display: flex;
flex-direction: column;
}
/* 结算中卡片特殊边框 */
.sj-card-jiesuan {
border: 2rpx solid #ff5722;
box-shadow: 0 6rpx 20rpx rgba(255,87,34,0.15);
}
.order-card:active {
transform: scale(0.98);
}
/* 创建时间 */
.card-time {
font-size: 24rpx;
color: #999;
margin-bottom: 12rpx;
padding-bottom: 8rpx;
border-bottom: 1rpx dashed rgba(0,120,255,0.15);
}
/* 内容行 */
.card-content-row {
display: flex;
align-items: flex-start;
}
/* 商品图片 */
.card-img {
width: 130rpx;
height: 130rpx;
border-radius: 18rpx;
background: #f0f0f0;
margin-right: 24rpx;
flex-shrink: 0;
}
/* 中间信息区 */
.card-info {
flex: 1;
min-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: 6rpx;
}
.card-nicheng {
font-size: 22rpx;
color: #666;
margin-top: 4rpx;
}
/* 右侧状态和价格 */
.card-right {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
min-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;
}
/* 结算中状态红色高亮（保留原样式） */
.sj-status-jiesuan {
background: linear-gradient(145deg, #ff4d4f, #d10000) !important;
color: #fff !important;
border-color: #ffaa00;
box-shadow: 0 0 15rpx #ff4d4f;
}
.card-price {
display: flex;
align-items: baseline;
white-space: nowrap;
}
.price-symbol {
font-size: 28rpx;
color: #ffaa00;
font-weight: 700;
margin-right: 4rpx;
}
.price-number {
font-size: 36rpx;
font-weight: 700;
color: #333;
}
/* ========== 加载与空状态 ========== */
.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;
}
.empty-subtext {
font-size: 26rpx;
color: #b0b0b0;
margin-top: 10rpx;
}
.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;
}