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

统一排行榜对齐星雀UI，页面资源后台配置实时刷新

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
2026-06-27 01:26:11 +08:00
parent 1ab2e2080a
commit 21112173f2
292 changed files with 64010 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

467
miniprogram/pages/jiedanchi/jiedanchi.js Normal file
View File

@@ -0,0 +1,467 @@
// pages/jiedanchi/jiedanchi.js
const app = getApp();
import request from '../../utils/request.js';
import PopupService from '../../services/popupService.js';
Page({
data: {
// 1. 商品类型相关
shangpinleixing: [], // 商品类型列表 {id, jieshao, tupian_url}
xuanzhongLeixingId: null, // 当前选中的类型ID
// 2. 订单列表与分页相关
dingdanList: [], // 当前展示的订单列表
page: 1,
pageSize: 10,
hasMore: true,
isLoading: false,
// 3. 全局状态字段
dashoustatus: null,
zhuanghaoStatus: null, // 注意变量名：zhuanghaoStatus
dashouzhuangtai: null,
uid: null,
huiyuanList: [], // clumber 列表
yajin: 0,
jifen: 0,
// 4. 刷新控制字段
scrollViewRefreshing: false,
lastRefreshTime: 0,
refreshCooldown: 2000,
isLoadingMore: false,
// 5. 切换类型冷却时间控制
lastSwitchTime: 0,
switchCooldown: 1500,
isSwitching: false,
// 6. 全局OSS地址
ossImageUrl: app.globalData.ossImageUrl || '',
// 7. 授权状态控制
showUnauthorized: false,
unauthorizedMsg: '您尚未开启此功能',
},
async onLoad(options) {
this.loadGlobalStatus();
this.checkAuthorization();
},
// 🆕 页面隐藏时清理弹窗视图
onHide: function () {
const popupComp = this.selectComponent('#popupNotice');
if (popupComp && popupComp.cleanup) {
popupComp.cleanup();
}
},
onShow() {
this.registerNotificationComponent();
this.loadGlobalStatus();
this.checkAuthorization();
},
registerNotificationComponent() {
const notificationComp = this.selectComponent('#global-notification');
if (notificationComp && notificationComp.showNotification) {
app.globalData.globalNotification = {
show: (data) => notificationComp.showNotification(data),
hide: () => notificationComp.hideNotification()
};
}
},
loadGlobalStatus() {
const globalData = app.globalData;
// 从缓存读取，确保与抢单时使用的数据源一致
const dashoustatusCache = wx.getStorageSync('dashoustatus');
const dashoustatus = dashoustatusCache !== '' ? dashoustatusCache : null;
// 从 globalData 或缓存获取 zhuanghaoStatus（注意字段名可能有差异）
let zhuanghaoStatus = globalData.zhanghaoStatus;
if (zhuanghaoStatus === undefined || zhuanghaoStatus === null) {
zhuanghaoStatus = wx.getStorageSync('zhanghaoStatus');
}
this.setData({
dashoustatus: dashoustatus,
zhuanghaoStatus: zhuanghaoStatus,
dashouzhuangtai: globalData.dashouzhuangtai,
uid: wx.getStorageSync('uid'),
huiyuanList: globalData.clumber || [],
yajin: globalData.yajin || 0,
jifen: globalData.jinfen || 0
});
// 打印当前值，方便调试
//console.log('loadGlobalStatus -> dashoustatus:', dashoustatus, 'zhuanghaoStatus:', zhuanghaoStatus);
},
checkAuthorization() {
const { dashoustatus, zhuanghaoStatus } = this.data;
//console.log('checkAuthorization -> dashoustatus:', dashoustatus, 'zhuanghaoStatus:', zhuanghaoStatus);
// 完全复制抢单时的判断逻辑
const isDashouValid = (dashoustatus && dashoustatus == 1) || false; // 存在且等于1
const isZhuanghaoValid = (zhuanghaoStatus == 1); // 宽松比较，null/undefined/0 均视为 false
const isAuthorized = isDashouValid && isZhuanghaoValid;
if (!isAuthorized) {
this.setData({ showUnauthorized: true });
let msg = '';
if (!isDashouValid) msg = '您尚未开启身份';
//else if (!isZhuanghaoValid) msg = '您的账号状态异常';
this.setData({ unauthorizedMsg: msg || '无法使用抢单功能' });
} else {
this.setData({ showUnauthorized: false });
if (!this.data.shangpinleixing.length) {
this.loadShangpinLeixing();
} else if (this.data.xuanzhongLeixingId) {
this.loadDingdanList(true);
}
PopupService.checkAndShow(this, 'jiedanchi');
}
},
async loadShangpinLeixing() {
wx.showLoading({ title: '加载商品类型...' });
try {
const res = await request({
url: '/dingdan/dsqdhqddlx',
method: 'POST',
header: { 'content-type': 'application/json' }
});
if (res.statusCode === 200 && res.data) {
const data = res.data;
let list = [];
if (data.code === 200 || data.code === 0) {
if (data.data && Array.isArray(data.data.list)) {
list = data.data.list;
} else if (data.data && Array.isArray(data.data)) {
list = data.data;
} else if (Array.isArray(data.list)) {
list = data.list;
} else if (Array.isArray(data)) {
list = data;
}
}
const processedList = this.processTupianUrl(list);
this.setData({
shangpinleixing: processedList,
xuanzhongLeixingId: processedList[0]?.id || null
});
if (this.data.xuanzhongLeixingId) {
this.loadDingdanList(true);
}
} else {
wx.showToast({ title: res.data?.msg || '加载商品类型失败', icon: 'none', duration: 2000 });
}
} catch (error) {
console.error('加载商品类型失败:', error);
wx.showToast({ title: '网络错误，加载失败', icon: 'none', duration: 2000 });
} finally {
wx.hideLoading();
}
},
processTupianUrl(list) {
const ossUrl = app.globalData.ossImageUrl || '';
return list.map(item => ({
...item,
full_tupian_url: item.tupian_url && !item.tupian_url.startsWith('http') ? ossUrl + item.tupian_url : (item.tupian_url || '/images/default-type.png')
}));
},
async selectLeixing(e) {
const now = Date.now();
if (now - this.data.lastSwitchTime < this.data.switchCooldown) {
wx.showToast({
title: `操作太快，请${Math.ceil((this.data.switchCooldown - (now - this.data.lastSwitchTime)) / 1000)}秒后再试`,
icon: 'none',
duration: 1500
});
return;
}
if (this.data.isSwitching) return;
const leixingId = e.currentTarget.dataset.id;
if (leixingId === this.data.xuanzhongLeixingId) return;
this.setData({ isSwitching: true, lastSwitchTime: now });
wx.showLoading({ title: '切换中...' });
try {
this.setData({
xuanzhongLeixingId: leixingId,
dingdanList: [],
page: 1,
hasMore: true
});
await this.loadDingdanList(true);
} catch (error) {
console.error('切换类型失败:', error);
} finally {
this.setData({ isSwitching: false });
wx.hideLoading();
}
},
async loadDingdanList(isRefresh = false) {
if (this.data.isLoading || !this.data.xuanzhongLeixingId) return;
const loadPage = isRefresh ? 1 : this.data.page;
if (!isRefresh && !this.data.hasMore) return;
this.setData({
isLoading: true,
isLoadingMore: !isRefresh
});
try {
const res = await request({
url: '/dingdan/ddhq',
method: 'POST',
data: {
leixing_id: this.data.xuanzhongLeixingId,
page: loadPage,
page_size: this.data.pageSize
}
});
this.setData({
isLoading: false,
isLoadingMore: false,
scrollViewRefreshing: false
});
if (res.data.code === 200 || res.data.code === 0) {
const newList = res.data.data.list || [];
const hasMore = res.data.data.has_more || false;
const processedList = newList.map(item => this.processDingdanItem(item));
const updatedList = isRefresh ? processedList : [...this.data.dingdanList, ...processedList];
updatedList.sort((a, b) => (b.creat_time || '').localeCompare(a.creat_time || ''));
this.setData({
dingdanList: updatedList,
page: loadPage,
hasMore: hasMore
});
if (isRefresh) {
this.setData({ lastRefreshTime: Date.now() });
}
} else {
wx.showToast({ title: res.data.msg || '加载失败', icon: 'none' });
}
} catch (error) {
console.error('加载订单失败:', error);
this.setData({
isLoading: false,
isLoadingMore: false,
scrollViewRefreshing: false
});
wx.showToast({ title: '网络请求失败', icon: 'none' });
}
},
processDingdanItem(item) {
const ossUrl = app.globalData.ossImageUrl || '';
let fullTupianUrl = '';
if (item.tupian) {
fullTupianUrl = !item.tupian.startsWith('http') ? ossUrl + item.tupian : item.tupian;
} else {
const leixing = this.data.shangpinleixing.find(l => l.id === item.leixing_id);
fullTupianUrl = leixing ? leixing.full_tupian_url : '/images/default-order.png';
}
const isZhiding = item.zhuangtai === 7;
let zhidingAvatar = '';
if (item.zhiding_avatar) {
zhidingAvatar = !item.zhiding_avatar.startsWith('http') ? ossUrl + item.zhiding_avatar : item.zhiding_avatar;
}
const zhidingNicheng = item.zhiding_nicheng || '';
return {
...item,
full_tupian_url: fullTupianUrl,
isZhiding: isZhiding,
isPingtai: item.pingtai == 1,
isShangjia: item.pingtai == 2,
zhiding_avatar_full: zhidingAvatar,
zhiding_nicheng: zhidingNicheng
};
},
goToChongzhiPage(failureType, huiyuanId = null, requiredYajin = 0) {
let url = '/pages/dashouchongzhi/dashouchongzhi';
let params = {};
switch (failureType) {
case 'huiyuan':
params = { needScroll: '0', scrollTo: 'member' };
break;
case 'yajin':
params = { needScroll: '1', scrollTo: 'bottom', requiredYajin: requiredYajin };
break;
case 'jifen':
params = { needScroll: '1', scrollTo: 'bottom' };
break;
}
if (huiyuanId) params.huiyuanId = huiyuanId;
const queryString = Object.keys(params).map(key => `${key}=${encodeURIComponent(params[key])}`).join('&');
const fullUrl = `${url}?${queryString}`;
wx.navigateTo({
url: fullUrl,
fail: (err) => {
console.error('跳转失败:', err);
wx.showToast({ title: '跳转失败，请稍后重试', icon: 'none' });
}
});
},
async onQiangdanTap(e) {
const dingdanItem = e.currentTarget.dataset.item;
if (!dingdanItem) return;
if (!this.data.dashoustatus || this.data.dashoustatus != 1) {
wx.showToast({ title: '请先开启打手身份', icon: 'none' });
return;
}
if (this.data.zhuanghaoStatus != 1) {
wx.showToast({ title: '账号异常，无法接单', icon: 'none' });
return;
}
if (this.data.dashouzhuangtai != 1) {
wx.showToast({ title: '您有订单正在接待中', icon: 'none' });
return;
}
if (dingdanItem.isZhiding) {
if (!this.data.uid || this.data.uid != dingdanItem.zhiding_uid) {
wx.showToast({ title: '此订单为指定单', icon: 'none' });
return;
}
}
if (dingdanItem.yaoqiuleixing == 1) {
const hasHuiyuan = this.data.huiyuanList.some(h => h.huiyuanid == dingdanItem.huiyuan_id);
if (!hasHuiyuan) {
wx.showToast({ title: '未开通对应会员，无法抢单', icon: 'none', duration: 2000 });
setTimeout(() => this.goToChongzhiPage('huiyuan', dingdanItem.huiyuan_id), 500);
return;
}
}
if (dingdanItem.yaoqiuleixing == 2) {
if (this.data.yajin < dingdanItem.yajin) {
wx.showToast({ title: `押金不足，需${dingdanItem.yajin}`, icon: 'none', duration: 2000 });
setTimeout(() => this.goToChongzhiPage('yajin', null, dingdanItem.yajin), 500);
return;
}
}
if (this.data.jifen < 5) {
wx.showToast({ title: '积分不足，至少需要5积分', icon: 'none', duration: 2000 });
setTimeout(() => this.goToChongzhiPage('jifen'), 500);
return;
}
const that = this;
wx.showModal({
title: '确认抢单',
content: `确定要抢此订单吗？${dingdanItem.isZhiding ? '(指定订单)' : ''}`,
success: async function (res) {
if (res.confirm) {
wx.showLoading({ title: '抢单中...', mask: true });
try {
const qiangdanRes = await request({
url: '/dingdan/qiangdan',
method: 'POST',
data: { dingdan_id: dingdanItem.dingdan_id }
});
wx.hideLoading();
if (qiangdanRes.data.code === 200 || qiangdanRes.data.code === 0) {
that.showQiangdanSuccessEffect();
if (app.globalData) {
app.globalData.dashouzhuangtai = 0;
that.setData({ dashouzhuangtai: 0 });
}
const newList = that.data.dingdanList.filter(item => item.dingdan_id !== dingdanItem.dingdan_id);
that.setData({ dingdanList: newList });
} else {
wx.showToast({ title: qiangdanRes.data.msg || '抢单失败', icon: 'none' });
}
} catch (error) {
wx.hideLoading();
console.error('抢单请求失败:', error);
wx.showToast({ title: '网络错误，抢单失败', icon: 'none' });
}
}
}
});
},
showQiangdanSuccessEffect() {
wx.showToast({ title: '抢单成功！', icon: 'success', duration: 2000 });
},
onViewDetail(e) {
const { type, content } = e.currentTarget.dataset;
wx.showModal({
title: type === 'jieshao' ? '订单介绍' : '订单备注',
content: content,
showCancel: false,
confirmText: '知道了'
});
},
onReachBottom() {
const now = Date.now();
if (now - this.data.lastRefreshTime < this.data.refreshCooldown) {
wx.showToast({
title: `操作太快，请${Math.ceil((this.data.refreshCooldown - (now - this.data.lastRefreshTime)) / 1000)}秒后再试`,
icon: 'none',
duration: 1500
});
return;
}
if (this.data.isLoading || this.data.isLoadingMore) return;
if (this.data.hasMore && !this.data.isLoading && this.data.xuanzhongLeixingId) {
this.setData({ page: this.data.page + 1 });
this.loadDingdanList(false);
}
},
onPullDownRefresh() {
const now = Date.now();
if (now - this.data.lastRefreshTime < this.data.refreshCooldown) {
this.setData({ scrollViewRefreshing: false });
wx.showToast({
title: `操作太快，请${Math.ceil((this.data.refreshCooldown - (now - this.data.lastRefreshTime)) / 1000)}秒后再试`,
icon: 'none',
duration: 1500
});
return;
}
if (this.data.isLoading) {
this.setData({ scrollViewRefreshing: false });
return;
}
this.setData({
scrollViewRefreshing: true,
lastRefreshTime: now
});
if (this.data.xuanzhongLeixingId) {
this.setData({ page: 1, hasMore: true });
this.loadDingdanList(true);
} else {
this.setData({ scrollViewRefreshing: false });
}
},
goToDashouRegister() {
wx.navigateTo({
url: '/pages/dashouduan/dashouduan'
});
}
});

9
miniprogram/pages/jiedanchi/jiedanchi.json Normal file
View File

@@ -0,0 +1,9 @@
{
"navigationBarTitleText": "接单池",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark",
"backgroundColor": "#f5f7fa",
"usingComponents": {
"global-notification": "/components/global-notification/global-notification"
}
}

263
miniprogram/pages/jiedanchi/jiedanchi.wxml Normal file
View File

@@ -0,0 +1,263 @@
<!--pages/qiangdan/qiangdan.wxml-->
<view class="qiangdan-page">
<!-- 授权提示页（未开启打手功能时显示） -->
<view class="unauthorized-container" wx:if="{{showUnauthorized}}">
<view class="unauthorized-card">
<view class="card-glow"></view>
<view class="card-content-unauth">
<view class="icon-lock">🔒</view>
<text class="title">功能未开启</text>
<text class="message">{{unauthorizedMsg}}</text>
<text class="description">请先注册为服务者，即可使用抢单功能</text>
<view class="btn-register" bindtap="goToDashouRegister">
<text class="btn-text">立即注册</text>
<view class="btn-shine"></view>
</view>
</view>
</view>
</view>
<!-- 正常内容（授权后显示） -->
<block wx:else>
<!-- 顶部区域：商品类型选择 -->
<view class="leixing-quyu">
<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"
>
<!-- 选中态的光晕特效 -->
<view wx:if="{{xuanzhongLeixingId == item.id}}" class="guangyun-effect"></view>
<image
class="leixing-tupian"
src="{{item.full_tupian_url}}"
mode="aspectFill"
/>
<text class="leixing-jieshao">{{item.jieshao}}</text>
</view>
</block>
</view>
</scroll-view>
</view>
<!-- 分割线 -->
<view class="fenge-xian"></view>
<!-- 订单列表容器 -->
<view class="dingdan-container">
<scroll-view
class="dingdan-scroll-view"
scroll-y
enhanced
show-scrollbar="{{false}}"
refresher-enabled="{{xuanzhongLeixingId != null}}"
refresher-threshold="80"
refresher-default-style="black"
refresher-background="#f5f5f5"
refresher-triggered="{{scrollViewRefreshing}}"
bindrefresherrefresh="onPullDownRefresh"
bindscrolltolower="onReachBottom"
>
<!-- 下拉刷新区域 -->
<view class="refresher-container" slot="refresher">
<text wx:if="{{scrollViewRefreshing}}" class="refreshing-text">正在刷新...</text>
<text wx:else class="pull-down-text">下拉刷新订单</text>
</view>
<!-- 订单列表 -->
<view class="dingdan-list">
<!-- 状态提示 -->
<view wx:if="{{!xuanzhongLeixingId}}" class="empty-tip">
<image src="/images/icon_select.png" class="tip-icon"></image>
<text class="tip-text">请先选择上方订单类型</text>
</view>
<view wx:elif="{{dingdanList.length === 0 && !isLoading}}" class="empty-tip">
<image src="/images/icon_empty_order.png" class="tip-icon"></image>
<text class="tip-text">当前类型暂无待抢订单</text>
</view>
<!-- 订单卡片列表 -->
<block wx:for="{{dingdanList}}" wx:key="dingdan_id">
<!-- 平台订单卡片 (pingtai == 1) -->
<view
wx:if="{{item.isPingtai}}"
class="dingdan-card pingtai-card"
data-item="{{item}}"
>
<!-- 顶部信息区 -->
<view class="card-top">
<text class="creat-time">{{item.creat_time}}</text>
<view class="top-line"></view>
<text class="pingtai-tag">平台订单</text>
</view>
<!-- 指定单标识行 - 新增头像和昵称 -->
<view wx:if="{{item.isZhiding}}" class="zhiding-row">
<text class="zhiding-icon">指定</text>
<image
wx:if="{{item.zhiding_avatar_full}}"
class="zhiding-avatar"
src="{{item.zhiding_avatar_full}}"
mode="aspectFill"
/>
<text class="zhiding-nicheng">{{item.zhiding_nicheng || '指定打手'}}</text>
<text class="zhiding-uid">UID: {{item.zhiding_uid || '未知'}}</text>
</view>
<!-- 内容区：圆形图片 + 介绍 -->
<view class="card-content">
<image
class="neirong-tupian"
src="{{item.full_tupian_url}}"
mode="aspectFill"
/>
<view
class="jieshao-box {{item.jieshao && item.jieshao.length > 60 ? 'jieshao-ellipsis' : ''}}"
data-type="jieshao"
data-content="{{item.jieshao}}"
bindtap="onViewDetail"
>
<text class="jieshao-label">介绍：</text>
<text class="jieshao-text">{{item.jieshao || '暂无介绍'}}</text>
<text wx:if="{{item.jieshao && item.jieshao.length > 60}}" class="view-more">[点击查看]</text>
</view>
</view>
<!-- 备注区 -->
<view
wx:if="{{item.beizhu}}"
class="beizhu-box {{item.beizhu.length > 40 ? 'beizhu-ellipsis' : ''}}"
data-type="beizhu"
data-content="{{item.beizhu}}"
bindtap="onViewDetail"
>
<text class="beizhu-label">备注：</text>
<text class="beizhu-text">{{item.beizhu}}</text>
<text wx:if="{{item.beizhu.length > 40}}" class="view-more">[点击查看]</text>
</view>
<!-- 底部：分佣 + 抢单按钮 -->
<view class="card-bottom">
<view class="fenyong-box">
<text class="fenyong-icon">💰</text>
<text class="fenyong-text">分佣</text>
<text class="fenyong-price">{{item.dashou_fencheng || 0}}</text>
<text class="fenyong-unit">元</text>
</view>
<view
class="qiangdan-btn pingtai-btn"
data-item="{{item}}"
bindtap="onQiangdanTap"
>
<text class="btn-text">立即抢单</text>
<view class="btn-shine"></view>
</view>
</view>
</view>
<!-- 商家订单卡片 (pingtai == 2) -->
<view
wx:elif="{{item.isShangjia}}"
class="dingdan-card shangjia-card"
data-item="{{item}}"
>
<!-- 顶部信息区 -->
<view class="card-top">
<text class="creat-time">{{item.creat_time}}</text>
<view class="top-line"></view>
<text class="pingtai-tag">商家发单</text>
</view>
<!-- 指定单标识行 - 新增头像和昵称 -->
<view wx:if="{{item.isZhiding}}" class="zhiding-row">
<text class="zhiding-icon">指定</text>
<image
wx:if="{{item.zhiding_avatar_full}}"
class="zhiding-avatar"
src="{{item.zhiding_avatar_full}}"
mode="aspectFill"
/>
<text class="zhiding-nicheng">{{item.zhiding_nicheng || '指定打手'}}</text>
<text class="zhiding-uid">UID: {{item.zhiding_uid || '未知'}}</text>
</view>
<!-- 内容区：圆形商家头像 + 昵称 -->
<view class="shangjia-info">
<image
class="shangjia-touxiang"
src="{{item.full_tupian_url}}"
mode="aspectFill"
/>
<text class="shangjia-nicheng">{{item.sjnicheng || '未知商家'}}</text>
</view>
<!-- 介绍区 -->
<view
class="shangjia-jieshao {{item.jieshao && item.jieshao.length > 50 ? 'jieshao-ellipsis' : ''}}"
data-type="jieshao"
data-content="{{item.jieshao}}"
bindtap="onViewDetail"
>
<text class="jieshao-label">订单介绍：</text>
<text class="jieshao-text">{{item.jieshao || '暂无介绍'}}</text>
<text wx:if="{{item.jieshao && item.jieshao.length > 50}}" class="view-more">[点击查看]</text>
</view>
<!-- 备注区 -->
<view
wx:if="{{item.beizhu}}"
class="shangjia-beizhu {{item.beizhu.length > 30 ? 'beizhu-ellipsis' : ''}}"
data-type="beizhu"
data-content="{{item.beizhu}}"
bindtap="onViewDetail"
>
<text class="beizhu-label">商家备注：</text>
<text class="beizhu-text">{{item.beizhu}}</text>
<text wx:if="{{item.beizhu.length > 30}}" class="view-more">[点击查看]</text>
</view>
<!-- 底部：分佣 + 抢单按钮 -->
<view class="card-bottom">
<view class="fenyong-box">
<text class="fenyong-icon">💰</text>
<text class="fenyong-text">分佣</text>
<text class="fenyong-price">{{item.dashou_fencheng || 0}}</text>
<text class="fenyong-unit">元</text>
</view>
<view
class="qiangdan-btn shangjia-btn"
data-item="{{item}}"
bindtap="onQiangdanTap"
>
<text class="btn-text">立即抢单</text>
<view class="btn-shine"></view>
</view>
</view>
</view>
</block>
<!-- 加载更多状态 -->
<view wx:if="{{isLoadingMore && dingdanList.length > 0}}" class="loading-more">
<text class="loading-text">加载更多订单中...</text>
</view>
<view wx:if="{{!hasMore && dingdanList.length > 0}}" class="no-more">
<text class="no-more-text">没有更多订单了</text>
</view>
</view>
</scroll-view>
<!-- 全局加载遮罩 -->
<view wx:if="{{isLoading && dingdanList.length === 0 && xuanzhongLeixingId}}" class="loading-mask">
<view class="loading-spinner"></view>
<text class="loading-mask-text">订单加载中...</text>
</view>
</view>
</block>
<global-notification id="global-notification" />
<popup-notice id="popupNotice" />
</view>

655
miniprogram/pages/jiedanchi/jiedanchi.wxss Normal file
View File

@@ -0,0 +1,655 @@
/* pages/qiangdan/qiangdan.wxss */
.qiangdan-page {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #f5f7fa;
overflow: hidden;
position: relative;
}
/* ====== 授权提示页（机甲风格）====== */
.unauthorized-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at top, #0b0f1a, #03050a);
z-index: 100;
}
.unauthorized-card {
width: 600rpx;
padding: 60rpx 40rpx;
background: linear-gradient(145deg, #1a1f30, #0f1422);
border-radius: 60rpx;
position: relative;
overflow: hidden;
border: 2rpx solid rgba(0, 247, 255, 0.3);
box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.8), 0 0 30rpx rgba(0, 247, 255, 0.2);
}
.card-glow {
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background: radial-gradient(circle at 30% 30%, rgba(0, 247, 255, 0.2), transparent 60%);
animation: rotateGlow 10s linear infinite;
z-index: 0;
}
@keyframes rotateGlow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.card-content-unauth {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
color: #ffffff;
}
.icon-lock {
font-size: 100rpx;
margin-bottom: 30rpx;
background: rgba(255, 255, 255, 0.1);
width: 160rpx;
height: 160rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4rpx solid #00f7ff;
box-shadow: 0 0 50rpx #00f7ff;
text-shadow: 0 0 20rpx #00f7ff;
}
.title {
font-size: 48rpx;
font-weight: 700;
letter-spacing: 4rpx;
margin-bottom: 20rpx;
text-shadow: 0 0 15rpx #00f7ff;
background: linear-gradient(135deg, #ffffff, #aaddff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.message {
font-size: 32rpx;
color: #ffaa00;
margin-bottom: 16rpx;
font-weight: 600;
text-shadow: 0 0 10rpx #ffaa00;
}
.description {
font-size: 28rpx;
color: #a0b0d0;
margin-bottom: 50rpx;
text-align: center;
}
.btn-register {
position: relative;
padding: 24rpx 80rpx;
background: linear-gradient(145deg, #2a3050, #181e38);
border-radius: 60rpx;
overflow: hidden;
border: 2rpx solid #00f7ff;
box-shadow: 0 10rpx 30rpx rgba(0, 247, 255, 0.4);
transition: transform 0.2s;
}
.btn-register:active {
transform: scale(0.96);
}
.btn-text {
font-size: 32rpx;
color: #fff;
font-weight: 700;
letter-spacing: 4rpx;
position: relative;
z-index: 2;
text-shadow: 0 0 10rpx #00f7ff;
}
.btn-shine {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
animation: btn-shimmer 2.8s infinite linear;
z-index: 1;
}
@keyframes btn-shimmer {
0% { transform: translateX(-100%) rotate(30deg); }
100% { transform: translateX(100%) rotate(30deg); }
}
/* ====== 原有样式（保持不变，仅略作调整以兼容提示页）====== */
.leixing-quyu {
padding: 30rpx 0 20rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-bottom: 1rpx solid #eaeaea;
position: relative;
z-index: 10;
flex-shrink: 0;
}
.leixing-scroll {
width: 100%;
white-space: nowrap;
height: 180rpx;
}
.leixing-container {
display: inline-flex;
padding: 0 30rpx;
}
.leixing-item {
display: inline-flex;
flex-direction: column;
align-items: center;
width: 160rpx;
margin-right: 24rpx;
position: relative;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.leixing-active {
transform: translateY(-6rpx);
}
.guangyun-effect {
position: absolute;
top: -12rpx;
left: -12rpx;
right: -12rpx;
bottom: -12rpx;
background: radial-gradient(circle at center, rgba(82, 196, 26, 0.15) 0%, transparent 70%);
border-radius: 40rpx;
z-index: 0;
animation: guangyun-pulse 2s infinite ease-in-out;
}
@keyframes guangyun-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.05); }
}
.leixing-tupian {
width: 120rpx;
height: 120rpx;
border-radius: 28rpx;
z-index: 1;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.leixing-active .leixing-tupian {
box-shadow: 0 16rpx 40rpx rgba(82, 196, 26, 0.3);
border: 4rpx solid #52c41a;
}
.leixing-jieshao {
margin-top: 16rpx;
font-size: 24rpx;
color: #666;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
z-index: 1;
}
.leixing-active .leixing-jieshao {
color: #52c41a;
font-weight: 600;
}
.fenge-xian {
height: 16rpx;
background: linear-gradient(to bottom, #f0f2f5, #f8f9fa);
flex-shrink: 0;
}
.dingdan-container {
flex: 1;
overflow: hidden;
}
.dingdan-scroll-view {
height: 100%;
-webkit-overflow-scrolling: touch;
}
.refresher-container {
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
}
.refreshing-text,
.pull-down-text {
font-size: 26rpx;
color: #999;
}
.empty-tip {
padding: 120rpx 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tip-icon {
width: 160rpx;
height: 160rpx;
opacity: 0.4;
margin-bottom: 30rpx;
}
.tip-text {
font-size: 28rpx;
color: #aaa;
}
.dingdan-card {
margin: 20rpx 24rpx;
border-radius: 20rpx;
padding: 28rpx;
position: relative;
overflow: hidden;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
border: 1rpx solid rgba(0, 0, 0, 0.08);
}
.dingdan-card:active {
transform: scale(0.995);
}
.pingtai-card {
background: linear-gradient(145deg, #f8fff8 0%, #f0f9f0 100%);
}
.shangjia-card {
background: linear-gradient(145deg, #f9f0ff 0%, #f3e8ff 100%);
}
.card-top {
display: flex;
align-items: center;
margin-bottom: 20rpx;
padding-bottom: 16rpx;
border-bottom: 1rpx dashed #e0e0e0;
}
.creat-time {
font-size: 26rpx;
color: #555;
font-weight: 500;
}
.top-line {
flex: 1;
height: 1rpx;
background: linear-gradient(to right, transparent, #ddd, transparent);
margin: 0 20rpx;
}
.pingtai-tag {
font-size: 24rpx;
color: #666;
padding: 6rpx 16rpx;
background: rgba(0, 0, 0, 0.04);
border-radius: 20rpx;
}
.zhiding-row {
display: flex;
align-items: center;
margin-bottom: 20rpx;
padding: 10rpx 16rpx;
background: rgba(255, 77, 79, 0.08);
border-radius: 12rpx;
border-left: 4rpx solid #ff4d4f;
gap: 10rpx;
}
.zhiding-icon {
font-size: 26rpx;
margin-right: 4rpx;
}
.zhiding-avatar {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
border: 2rpx solid #ff4d4f;
object-fit: cover;
}
.zhiding-nicheng {
font-size: 24rpx;
color: #ff4d4f;
font-weight: 500;
max-width: 120rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zhiding-uid {
font-size: 24rpx;
color: #ff4d4f;
font-weight: 400;
flex: 1;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-content {
display: flex;
margin-bottom: 20rpx;
}
.neirong-tupian {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
margin-right: 24rpx;
flex-shrink: 0;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
object-fit: cover;
}
.jieshao-box {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 140rpx;
padding: 16rpx 0;
}
.jieshao-label {
font-size: 26rpx;
color: #333;
font-weight: 600;
margin-bottom: 8rpx;
}
.jieshao-text {
font-size: 26rpx;
color: #666;
line-height: 1.4;
}
.jieshao-ellipsis .jieshao-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
.shangjia-info {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.shangjia-touxiang {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
margin-right: 20rpx;
border: 2rpx solid rgba(114, 46, 209, 0.15);
box-shadow: 0 6rpx 18rpx rgba(114, 46, 209, 0.12);
object-fit: cover;
}
.shangjia-nicheng {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.shangjia-jieshao,
.shangjia-beizhu {
margin-bottom: 16rpx;
padding: 14rpx 18rpx;
background: rgba(255, 255, 255, 0.6);
border-radius: 12rpx;
}
.shangjia-jieshao .jieshao-label,
.shangjia-beizhu .beizhu-label {
display: block;
margin-bottom: 6rpx;
font-size: 24rpx;
}
.shangjia-jieshao .jieshao-text,
.shangjia-beizhu .beizhu-text {
font-size: 24rpx;
color: #555;
line-height: 1.4;
}
.shangjia-jieshao.jieshao-ellipsis .jieshao-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.shangjia-beizhu.beizhu-ellipsis .beizhu-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.beizhu-box {
margin-bottom: 20rpx;
padding: 14rpx 18rpx;
background: rgba(255, 255, 255, 0.6);
border-radius: 12rpx;
}
.beizhu-label {
font-size: 24rpx;
color: #333;
font-weight: 600;
margin-bottom: 6rpx;
display: block;
}
.beizhu-text {
font-size: 24rpx;
color: #666;
line-height: 1.4;
}
.beizhu-ellipsis .beizhu-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.view-more {
display: block;
font-size: 22rpx;
color: #1890ff;
margin-top: 6rpx;
text-align: right;
}
.card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20rpx;
border-top: 1rpx solid rgba(0, 0, 0, 0.06);
}
.fenyong-box {
display: flex;
align-items: baseline;
}
.fenyong-icon {
font-size: 30rpx;
margin-right: 10rpx;
}
.fenyong-text {
font-size: 24rpx;
color: #999;
margin-right: 6rpx;
}
.fenyong-price {
font-size: 40rpx;
color: #ff4d4f;
font-weight: 700;
margin-right: 4rpx;
}
.fenyong-unit {
font-size: 24rpx;
color: #999;
}
.qiangdan-btn {
position: relative;
padding: 18rpx 40rpx;
border-radius: 50rpx;
overflow: hidden;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}
.pingtai-btn {
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}
.shangjia-btn {
background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
}
.btn-text {
font-size: 28rpx;
color: white;
font-weight: 600;
letter-spacing: 1rpx;
position: relative;
z-index: 2;
}
.btn-shine {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
animation: btn-shimmer 3s infinite linear;
z-index: 1;
}
@keyframes btn-shimmer {
0% { transform: translateX(-100%) rotate(30deg); }
100% { transform: translateX(100%) rotate(30deg); }
}
.qiangdan-btn:active {
transform: scale(0.96);
}
.loading-more,
.no-more {
padding: 30rpx 0;
text-align: center;
}
.loading-text {
font-size: 26rpx;
color: #999;
}
.no-more-text {
font-size: 26rpx;
color: #ccc;
}
.loading-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
.loading-spinner {
width: 70rpx;
height: 70rpx;
border: 6rpx solid #f0f0f0;
border-top: 6rpx solid #52c41a;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 24rpx;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-mask-text {
font-size: 28rpx;
color: #666;
}