1917 行
51 KiB
Vue
1917 行
51 KiB
Vue
<template>
|
||
<view class="workspace-container">
|
||
<!-- 顶部状态栏与在线接单开关 -->
|
||
<view class="expert-status-card">
|
||
<view class="status-left">
|
||
<image class="expert-avatar" :src="expert.avatar" mode="aspectFill" />
|
||
<view class="expert-info">
|
||
<view class="name-row">
|
||
<text class="expert-name">{{ expert.nickname }}</text>
|
||
<text class="badge-gold">金牌导师</text>
|
||
</view>
|
||
<view class="status-indicator">
|
||
<view class="dot-status" :class="{ online: isReceivingOrders }"></view>
|
||
<text class="status-text">{{ isReceivingOrders ? '接单中 (派单池活跃)' : '已打烊休息' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="switch-wrap btn-active" @click="toggleReceivingStatus">
|
||
<text class="switch-label">{{ isReceivingOrders ? '停止接单' : '开启接单' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 今日经营看板 -->
|
||
<view class="stats-board">
|
||
<view class="stat-col">
|
||
<text class="stat-label">今日预计收益 (元)</text>
|
||
<text class="stat-val green-val">¥{{ todayIncome }}</text>
|
||
</view>
|
||
<view class="stat-divider"></view>
|
||
<view class="stat-col">
|
||
<text class="stat-label">今日履约单数</text>
|
||
<text class="stat-val">{{ todayOrdersCount }} 单</text>
|
||
</view>
|
||
<view class="stat-divider"></view>
|
||
<view class="stat-col">
|
||
<text class="stat-label">待签到核销</text>
|
||
<text class="stat-val gold-val">{{ waitingVerifyCount }} 人</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 多维收益走势统计图表面板 (近7天/近4周/近6个月) -->
|
||
<view class="section-card revenue-trends-card">
|
||
<view class="sec-head">
|
||
<view class="title-wrap">
|
||
<image class="sec-svg" :src="ICONS.chart" mode="aspectFit" />
|
||
<text class="sec-title">收益走势统计分析</text>
|
||
</view>
|
||
<!-- 周期切换胶囊 -->
|
||
<view class="trend-tabs">
|
||
<view
|
||
class="trend-tab-btn btn-active"
|
||
:class="{ active: trendPeriod === 'daily' }"
|
||
@click="trendPeriod = 'daily'"
|
||
>
|
||
近7天
|
||
</view>
|
||
<view
|
||
class="trend-tab-btn btn-active"
|
||
:class="{ active: trendPeriod === 'weekly' }"
|
||
@click="trendPeriod = 'weekly'"
|
||
>
|
||
近4周
|
||
</view>
|
||
<view
|
||
class="trend-tab-btn btn-active"
|
||
:class="{ active: trendPeriod === 'monthly' }"
|
||
@click="trendPeriod = 'monthly'"
|
||
>
|
||
近6个月
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 周期汇总指标看板 -->
|
||
<view class="period-summary-row">
|
||
<view class="sum-item">
|
||
<text class="sum-label">周期总收益</text>
|
||
<text class="sum-val green-val">¥{{ currentPeriodSummary.totalIncome }}</text>
|
||
</view>
|
||
<view class="sum-divider"></view>
|
||
<view class="sum-item">
|
||
<text class="sum-label">完成总单数</text>
|
||
<text class="sum-val">{{ currentPeriodSummary.totalOrders }} 单</text>
|
||
</view>
|
||
<view class="sum-divider"></view>
|
||
<view class="sum-item">
|
||
<text class="sum-label">平均客单价</text>
|
||
<text class="sum-val gold-val">¥{{ currentPeriodSummary.avgPrice }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 指标维度切换器 -->
|
||
<view class="metric-switch-row">
|
||
<view
|
||
class="metric-pill btn-active"
|
||
:class="{ active: trendMetric === 'income' }"
|
||
@click="trendMetric = 'income'"
|
||
>
|
||
接单总额 (元)
|
||
</view>
|
||
<view
|
||
class="metric-pill btn-active"
|
||
:class="{ active: trendMetric === 'orders' }"
|
||
@click="trendMetric = 'orders'"
|
||
>
|
||
完单量 (单)
|
||
</view>
|
||
<view
|
||
class="metric-pill btn-active"
|
||
:class="{ active: trendMetric === 'avgPrice' }"
|
||
@click="trendMetric = 'avgPrice'"
|
||
>
|
||
客单价 (元/单)
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 纯矢量响应式可视化柱状图表 -->
|
||
<view class="chart-container">
|
||
<view class="chart-bars-wrap">
|
||
<view
|
||
v-for="(item, idx) in currentTrendsList"
|
||
:key="idx"
|
||
class="chart-bar-col"
|
||
@click="activeTooltip = activeTooltip === idx ? null : idx"
|
||
>
|
||
<!-- 激活时的数据气泡 Tooltip -->
|
||
<view class="tooltip-bubble" v-if="activeTooltip === idx">
|
||
<text class="tip-val">{{ trendMetric === 'income' ? `¥${item.income}` : (trendMetric === 'orders' ? `${item.orders}单` : `¥${item.avgPrice}`) }}</text>
|
||
</view>
|
||
|
||
<!-- 柱子顶部实时数值 -->
|
||
<text class="bar-val-text">{{ trendMetric === 'income' ? item.income : (trendMetric === 'orders' ? item.orders : item.avgPrice) }}</text>
|
||
|
||
<!-- 柱子主体 -->
|
||
<view class="bar-track">
|
||
<view
|
||
class="bar-fill"
|
||
:class="trendMetric"
|
||
:style="{ height: `${Math.max(12, Math.round(((Number(item[trendMetric]) || 0) / maxTrendValue) * 100))}%` }"
|
||
></view>
|
||
</view>
|
||
|
||
<!-- 底部时间轴标签 -->
|
||
<text class="bar-label">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 大神专属服务包与接单类目管理卡片 -->
|
||
<view class="section-card services-manage-card">
|
||
<view class="sec-head">
|
||
<view class="title-wrap">
|
||
<image class="sec-svg" :src="ICONS.expertBadge" mode="aspectFit" />
|
||
<text class="sec-title">陪玩服务管理 ({{ expertServices.length }})</text>
|
||
</view>
|
||
<view class="service-actions">
|
||
<button class="btn-wd-records btn-active" @click="goToWithdrawPage">收益提现</button>
|
||
<button class="btn-wd-records btn-active" @click="openWithdrawRecords">提现记录</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="services-list" v-if="expertServices.length > 0">
|
||
<view v-for="srv in expertServices" :key="srv.id" class="service-item-row">
|
||
<view class="srv-info">
|
||
<view class="srv-title-row">
|
||
<text class="srv-title">{{ srv.title }}</text>
|
||
<text class="srv-badge">{{ srv.category }}</text>
|
||
<text class="srv-mode">{{ srv.mode }}</text>
|
||
</view>
|
||
<text class="srv-desc">{{ srv.desc }}</text>
|
||
<view class="srv-price-row">
|
||
<text class="srv-price">¥{{ srv.price }}</text>
|
||
<text class="srv-unit">/{{ srv.unit }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 独立上下架切换开关 -->
|
||
<view
|
||
class="srv-switch-btn btn-active"
|
||
:class="{ active: srv.status }"
|
||
@click="toggleServiceStatus(srv)"
|
||
>
|
||
<view class="dot"></view>
|
||
<text class="switch-txt">{{ srv.status ? '接单中' : '已打烊' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 核心亮点功能：4 位数字门票现场核销中心 (严格依 UIUX 规范 4.2 落地) -->
|
||
<view class="verify-section-card">
|
||
<view class="sec-head">
|
||
<view class="title-wrap">
|
||
<image class="sec-svg" :src="ICONS.ticket" mode="aspectFit" />
|
||
<text class="sec-title">4位活动门票现场核销工具</text>
|
||
</view>
|
||
<text class="sec-sub">车队房主专属</text>
|
||
</view>
|
||
|
||
<view class="verify-box">
|
||
<text class="input-tips">输入参与人出示的 4 位门票码完成入队签到：</text>
|
||
|
||
<!-- 4位独立方块卡槽 PIN Code -->
|
||
<view class="pin-slots-wrap" :class="{ shake: isCodeError }">
|
||
<view
|
||
v-for="i in 4"
|
||
:key="i"
|
||
class="pin-slot"
|
||
:class="{
|
||
filled: inputDigits.length >= i,
|
||
active: inputDigits.length === i - 1,
|
||
error: isCodeError
|
||
}"
|
||
>
|
||
<text class="pin-char">{{ inputDigits[i - 1] || '' }}</text>
|
||
<view class="cursor-line" v-if="inputDigits.length === i - 1"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自定义九宫格大按键数字键盘 (触控热区 >= 88rpx，无原生键盘遮挡) -->
|
||
<view class="keypad-grid">
|
||
<view v-for="num in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="num" class="key-btn btn-active" @click="pressKey(num)">
|
||
<text class="key-num">{{ num }}</text>
|
||
</view>
|
||
<view class="key-btn action-key btn-active" @click="clearCode">
|
||
<image class="key-svg" :src="ICONS.clearKey" mode="aspectFit" />
|
||
<text class="action-text">清空</text>
|
||
</view>
|
||
<view class="key-btn btn-active" @click="pressKey(0)">
|
||
<text class="key-num">0</text>
|
||
</view>
|
||
<view class="key-btn action-key btn-active" @click="backspace">
|
||
<image class="key-svg" :src="ICONS.deleteKey" mode="aspectFit" />
|
||
<text class="action-text">删除</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="quick-demo" @click="fillDemoCode">
|
||
<text>点击自动填入演示码 [8392] 并触发核销</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 参与人身份核验确认卡弹窗 (Modal) -->
|
||
<view class="verify-modal-mask" v-if="showConfirmModal" @click.self="showConfirmModal = false">
|
||
<view class="verify-modal-content">
|
||
<view class="modal-header">
|
||
<text class="modal-title">参与人身份核验确认</text>
|
||
<view class="badge-ready">门票有效</view>
|
||
</view>
|
||
|
||
<view class="participant-card">
|
||
<image class="part-avatar" :src="verifiedParticipant.avatar" mode="aspectFill" />
|
||
<view class="part-info">
|
||
<view class="part-name-row">
|
||
<text class="part-name">{{ verifiedParticipant.nickname }}</text>
|
||
<text class="part-tag">VIP 黄金玩家</text>
|
||
</view>
|
||
<text class="part-activity">活动：{{ verifiedParticipant.activityTitle }}</text>
|
||
<view class="part-code-row">
|
||
<text class="label">核销码：</text>
|
||
<text class="code-val highlight">{{ verifiedParticipant.code }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="verify-fee-box">
|
||
<text class="fee-k">已付 AA 分摊款：</text>
|
||
<text class="fee-v">¥{{ verifiedParticipant.fee }}</text>
|
||
</view>
|
||
|
||
<view class="modal-actions">
|
||
<button class="btn-cancel btn-active" @click="showConfirmModal = false">取消</button>
|
||
<button class="btn-confirm-checkin btn-active" @click="confirmCheckin">确认核销签到</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 待抢订单池 (即时匹配派单) -->
|
||
<view class="section-card">
|
||
<view class="sec-head">
|
||
<view class="title-wrap">
|
||
<image class="sec-svg" :src="ICONS.bolt" mode="aspectFit" />
|
||
<text class="sec-title">即时抢单派单池 ({{ poolOrders.length }})</text>
|
||
</view>
|
||
<view class="pulse-live">
|
||
<view class="pulse-circle"></view>
|
||
<text class="live-text">实时派单中</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pool-list" v-if="poolOrders.length > 0">
|
||
<view v-for="order in poolOrders" :key="order.id" class="pool-card">
|
||
<view class="pool-top">
|
||
<text class="game-tag">{{ order.game }}</text>
|
||
<text class="pool-price">¥{{ order.price }}</text>
|
||
</view>
|
||
<text class="pool-desc">{{ order.desc }}</text>
|
||
<view class="pool-foot">
|
||
<text class="pool-time">倒计时: {{ order.countdown }}s</text>
|
||
<button class="btn-grab btn-active" @click="grabOrder(order)">立即抢单</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="empty-pool">
|
||
<text>暂无待抢订单，保持在线有更高派单权重</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 进行中的服务履约订单 -->
|
||
<view class="section-card">
|
||
<view class="sec-head">
|
||
<view class="title-wrap">
|
||
<image class="sec-svg" :src="ICONS.orderList" mode="aspectFit" />
|
||
<text class="sec-title">进行中履约服务 ({{ activeOrders.length }})</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="active-list">
|
||
<view v-for="order in activeOrders" :key="order.id" class="active-order-card">
|
||
<view class="order-buyer">
|
||
<image class="buyer-avatar" :src="order.buyerAvatar" mode="aspectFill" />
|
||
<view class="buyer-info">
|
||
<text class="buyer-name">{{ order.buyerName }}</text>
|
||
<text class="service-tag">{{ order.serviceTitle }} · {{ order.hours }}小时</text>
|
||
</view>
|
||
<text class="order-amount">¥{{ order.totalAmount }}</text>
|
||
</view>
|
||
|
||
<view class="order-progress-row">
|
||
<text class="prog-text">状态：{{ order.statusText }}</text>
|
||
<view class="order-btns">
|
||
<button class="btn-chat btn-active" @click="chatWithBuyer">联系老板</button>
|
||
<button class="btn-complete btn-active" @click="completeOrder(order.id)">
|
||
申请验收结算
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提现历史与审批记录跟踪弹窗 -->
|
||
<view class="verify-modal-mask" v-if="showWithdrawRecordsModal" @click.self="showWithdrawRecordsModal = false">
|
||
<view class="verify-modal-content withdraw-records-modal">
|
||
<view class="modal-header">
|
||
<text class="modal-title">提现记录与审批状态</text>
|
||
<view class="btn-close btn-active" @click="showWithdrawRecordsModal = false">
|
||
<image class="close-svg" :src="ICONS.close" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="records-scroll-list" v-if="withdrawRecords.length > 0">
|
||
<view v-for="rec in withdrawRecords" :key="rec.id" class="wd-record-item">
|
||
<view class="wd-rec-top">
|
||
<text class="wd-no">{{ rec.withdrawNo }}</text>
|
||
<text
|
||
class="wd-status-badge"
|
||
:class="{
|
||
pending: rec.status === '待审核',
|
||
success: rec.status === '已打款',
|
||
rejected: rec.status === '已驳回'
|
||
}"
|
||
>
|
||
{{ rec.status }}
|
||
</text>
|
||
</view>
|
||
<view class="wd-rec-main">
|
||
<text class="wd-amount">¥{{ rec.amount }}</text>
|
||
<text class="wd-channel">{{ rec.channel }}</text>
|
||
</view>
|
||
<view class="wd-rec-footer">
|
||
<text class="wd-time">{{ rec.applyTime }}</text>
|
||
<text class="wd-reason" v-if="rec.reason">驳回理由：{{ rec.reason }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="empty-records" v-else>
|
||
<text>暂无提现历史申请记录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部切回玩家端 -->
|
||
<view class="bottom-switch-wrap">
|
||
<button class="btn-back-player btn-active" @click="switchBackToPlayer">
|
||
退出工作台 · 切回玩家大厅
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import { ICONS } from '@/common/icons.js';
|
||
import { isExpertCertified } from '@/common/role.js';
|
||
import {
|
||
queryCheckinCode,
|
||
universalVerifyCheckin,
|
||
getOrders,
|
||
getOrdersPool,
|
||
getExpertStats,
|
||
claimOrder,
|
||
getExpertRevenueTrends,
|
||
getExpertServices,
|
||
updateExpertServiceStatus,
|
||
getUserWithdrawals
|
||
} from '@/common/api.js';
|
||
|
||
const expert = ref({
|
||
id: 101,
|
||
nickname: '认证大神',
|
||
avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300'
|
||
});
|
||
const isReceivingOrders = ref(true);
|
||
const todayIncome = ref('0.00');
|
||
const todayOrdersCount = ref(0);
|
||
const waitingVerifyCount = ref(0);
|
||
|
||
// 多维收益统计走势状态
|
||
const trendPeriod = ref('daily');
|
||
const trendMetric = ref('income');
|
||
const rawTrendsData = ref({ daily: [], weekly: [], monthly: [] });
|
||
const activeTooltip = ref(null);
|
||
|
||
const currentTrendsList = computed(() => {
|
||
const list = rawTrendsData.value[trendPeriod.value] || [];
|
||
if (list.length > 0) return list;
|
||
if (trendPeriod.value === 'daily') {
|
||
return [
|
||
{ label: '10-07', income: 120, orders: 3, avgPrice: 40 },
|
||
{ label: '10-08', income: 85, orders: 2, avgPrice: 42.5 },
|
||
{ label: '10-09', income: 160, orders: 4, avgPrice: 40 },
|
||
{ label: '10-10', income: 210, orders: 5, avgPrice: 42 },
|
||
{ label: '10-11', income: 140, orders: 3, avgPrice: 46.7 },
|
||
{ label: '10-12', income: 290, orders: 6, avgPrice: 48.3 },
|
||
{ label: '10-13', income: 180, orders: 4, avgPrice: 45 }
|
||
];
|
||
} else if (trendPeriod.value === 'weekly') {
|
||
return [
|
||
{ label: '3周前', income: 950, orders: 22, avgPrice: 43.2 },
|
||
{ label: '2周前', income: 1120, orders: 25, avgPrice: 44.8 },
|
||
{ label: '上周', income: 1350, orders: 28, avgPrice: 48.2 },
|
||
{ label: '本周', income: 890, orders: 19, avgPrice: 46.8 }
|
||
];
|
||
} else {
|
||
return [
|
||
{ label: '5月', income: 3200, orders: 75, avgPrice: 42.7 },
|
||
{ label: '6月', income: 3800, orders: 86, avgPrice: 44.2 },
|
||
{ label: '7月', income: 4500, orders: 98, avgPrice: 45.9 },
|
||
{ label: '8月', income: 4200, orders: 90, avgPrice: 46.7 },
|
||
{ label: '9月', income: 5100, orders: 105, avgPrice: 48.6 },
|
||
{ label: '10月', income: 2800, orders: 58, avgPrice: 48.3 }
|
||
];
|
||
}
|
||
});
|
||
|
||
const currentPeriodSummary = computed(() => {
|
||
const list = currentTrendsList.value;
|
||
const totalInc = list.reduce((sum, item) => sum + (Number(item.income) || 0), 0);
|
||
const totalOrd = list.reduce((sum, item) => sum + (Number(item.orders) || 0), 0);
|
||
const avg = totalOrd > 0 ? (totalInc / totalOrd).toFixed(2) : '0.00';
|
||
return {
|
||
totalIncome: totalInc.toFixed(2),
|
||
totalOrders: totalOrd,
|
||
avgPrice: avg
|
||
};
|
||
});
|
||
|
||
const maxTrendValue = computed(() => {
|
||
const list = currentTrendsList.value;
|
||
const vals = list.map(item => Number(item[trendMetric.value]) || 0);
|
||
return Math.max(...vals, 1);
|
||
});
|
||
|
||
// 大神服务包管理状态
|
||
const expertServices = ref([]);
|
||
|
||
const loadExpertServices = async () => {
|
||
try {
|
||
const list = await getExpertServices(101);
|
||
if (list && list.length > 0) {
|
||
expertServices.value = list;
|
||
}
|
||
} catch (_) {}
|
||
};
|
||
|
||
const toggleServiceStatus = async (item) => {
|
||
const newStatus = !item.status;
|
||
try {
|
||
await updateExpertServiceStatus(101, item.id, newStatus);
|
||
item.status = newStatus;
|
||
uni.showToast({
|
||
title: newStatus ? `【${item.title}】已上架接单` : `【${item.title}】已暂停下架`,
|
||
icon: 'none'
|
||
});
|
||
} catch (e) {
|
||
uni.showToast({ title: '操作失败', icon: 'none' });
|
||
}
|
||
};
|
||
|
||
// 提现记录弹窗状态
|
||
const showWithdrawRecordsModal = ref(false);
|
||
const withdrawRecords = ref([]);
|
||
|
||
const goToWithdrawPage = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/user/withdraw'
|
||
});
|
||
};
|
||
|
||
const openWithdrawRecords = async () => {
|
||
try {
|
||
const list = await getUserWithdrawals(1001);
|
||
withdrawRecords.value = list || [];
|
||
} catch (_) {}
|
||
showWithdrawRecordsModal.value = true;
|
||
};
|
||
const inputDigits = ref([]);
|
||
const isCodeError = ref(false);
|
||
const showConfirmModal = ref(false);
|
||
|
||
|
||
const verifiedParticipant = ref({
|
||
nickname: '电竞萌新小可爱',
|
||
avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop',
|
||
activityTitle: 'AA制五排王者百星车队',
|
||
code: '8392',
|
||
fee: '25.00'
|
||
});
|
||
|
||
const poolOrders = ref([
|
||
{
|
||
id: 'pool_101',
|
||
game: '王者荣耀',
|
||
price: 35,
|
||
desc: 'QQ区/星耀1晋级赛冲王者/需连麦/射手或辅助',
|
||
countdown: 48
|
||
},
|
||
{
|
||
id: 'pool_102',
|
||
game: '和平精英',
|
||
price: 45,
|
||
desc: '微信区/四排海岛/刚枪上分/kd保4以上',
|
||
countdown: 32
|
||
},
|
||
{
|
||
id: 'pool_103',
|
||
game: '美食陪吃',
|
||
price: 68,
|
||
desc: '朝阳大悦城海底捞/周末饭搭子/消费现场AA/需守时礼貌',
|
||
countdown: 56
|
||
}
|
||
]);
|
||
|
||
const activeOrders = ref([
|
||
{
|
||
id: 'ord_active_1',
|
||
buyerName: '超能电竞玩家',
|
||
buyerAvatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150&h=150&fit=crop',
|
||
serviceTitle: '排位包胜率',
|
||
hours: 2,
|
||
totalAmount: 70,
|
||
statusText: '正在开黑连麦对局中'
|
||
},
|
||
{
|
||
id: 'ord_active_2',
|
||
buyerName: '北京吃货小张',
|
||
buyerAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop',
|
||
serviceTitle: '火锅探店饭搭子',
|
||
hours: 2,
|
||
totalAmount: 136,
|
||
statusText: '已核销4位码入座，服务中'
|
||
}
|
||
]);
|
||
|
||
const toggleReceivingStatus = () => {
|
||
isReceivingOrders.value = !isReceivingOrders.value;
|
||
uni.showToast({
|
||
title: isReceivingOrders.value ? '已开启在线接单通道！' : '已打烊停止接单',
|
||
icon: 'none'
|
||
});
|
||
};
|
||
|
||
const pressKey = (num) => {
|
||
if (inputDigits.value.length >= 4) return;
|
||
inputDigits.value.push(num);
|
||
if (inputDigits.value.length === 4) {
|
||
verifyInputCode();
|
||
}
|
||
};
|
||
|
||
const backspace = () => {
|
||
if (inputDigits.value.length > 0) {
|
||
inputDigits.value.pop();
|
||
isCodeError.value = false;
|
||
}
|
||
};
|
||
|
||
const clearCode = () => {
|
||
inputDigits.value = [];
|
||
isCodeError.value = false;
|
||
};
|
||
|
||
const fillDemoCode = () => {
|
||
inputDigits.value = [8, 3, 9, 2];
|
||
verifyInputCode();
|
||
};
|
||
|
||
const loadWorkspaceOrders = async () => {
|
||
try {
|
||
const stats = await getExpertStats(101);
|
||
if (stats) {
|
||
if (stats.income !== undefined) todayIncome.value = stats.income;
|
||
if (stats.orders !== undefined) todayOrdersCount.value = stats.orders;
|
||
if (stats.waitingVerify !== undefined) waitingVerifyCount.value = stats.waitingVerify;
|
||
}
|
||
|
||
const pool = await getOrdersPool();
|
||
if (pool && pool.length > 0) {
|
||
poolOrders.value = pool.map(p => ({
|
||
id: p.id,
|
||
game: p.category || '同城陪伴',
|
||
price: p.reward || 68,
|
||
desc: p.title || '同城线下生活陪伴，需准时到场',
|
||
countdown: p.countdown || 50
|
||
}));
|
||
}
|
||
|
||
const list = await getOrders();
|
||
if (Array.isArray(list) && list.length > 0) {
|
||
const active = list.filter(o => o.status === 'IN_SERVICE').map(o => ({
|
||
id: o.id,
|
||
buyerName: o.expert.nickname || '客户老板',
|
||
buyerAvatar: o.expert.avatar || 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150',
|
||
serviceTitle: o.serviceTitle,
|
||
hours: o.quantity,
|
||
totalAmount: o.totalAmount,
|
||
statusText: o.verifyCode ? `现场码[${o.verifyCode}]到场核销服务中` : '正在履约服务中'
|
||
}));
|
||
if (active.length > 0) {
|
||
activeOrders.value = active;
|
||
}
|
||
}
|
||
|
||
try {
|
||
const trends = await getExpertRevenueTrends(101);
|
||
if (trends && (trends.daily || trends.weekly || trends.monthly)) {
|
||
rawTrendsData.value = trends;
|
||
}
|
||
} catch (_) {}
|
||
|
||
loadExpertServices();
|
||
} catch (err) {
|
||
console.warn('[Workspace] 加载服务列表异常:', err);
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
if (isExpertCertified()) {
|
||
loadWorkspaceOrders();
|
||
}
|
||
});
|
||
|
||
onShow(() => {
|
||
if (!isExpertCertified()) {
|
||
uni.showToast({
|
||
title: '非认证大神禁止访问工作台',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
setTimeout(() => {
|
||
uni.reLaunch({ url: '/pages/user/index' });
|
||
}, 400);
|
||
return;
|
||
}
|
||
loadWorkspaceOrders();
|
||
});
|
||
|
||
const verifyInputCode = async () => {
|
||
const codeStr = inputDigits.value.join('');
|
||
uni.showLoading({ title: '核验核销码中...' });
|
||
try {
|
||
const info = await queryCheckinCode(codeStr);
|
||
uni.hideLoading();
|
||
if (info.checkedIn) {
|
||
isCodeError.value = true;
|
||
uni.showToast({
|
||
title: `核销码 [${codeStr}] 已核销完成，请勿重复签到`,
|
||
icon: 'none'
|
||
});
|
||
setTimeout(() => { isCodeError.value = false; }, 1200);
|
||
return;
|
||
}
|
||
verifiedParticipant.value = {
|
||
id: info.id,
|
||
nickname: info.nickname || '同城搭子',
|
||
avatar: info.avatar || 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150',
|
||
activityTitle: info.title || '同城生活组局',
|
||
code: info.code,
|
||
fee: info.fee || '50.00',
|
||
};
|
||
isCodeError.value = false;
|
||
showConfirmModal.value = true;
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
isCodeError.value = true;
|
||
uni.showToast({
|
||
title: err.message || `核销码 [${codeStr}] 无效`,
|
||
icon: 'none'
|
||
});
|
||
setTimeout(() => { isCodeError.value = false; }, 1000);
|
||
}
|
||
};
|
||
|
||
const confirmCheckin = async () => {
|
||
const codeStr = verifiedParticipant.value.code;
|
||
uni.showLoading({ title: '确认核销中...' });
|
||
try {
|
||
await universalVerifyCheckin(codeStr, 1001);
|
||
uni.hideLoading();
|
||
showConfirmModal.value = false;
|
||
const gainedFee = Number(verifiedParticipant.value.fee) || 25;
|
||
todayIncome.value = (Number(todayIncome.value) + gainedFee).toFixed(2);
|
||
inputDigits.value = [];
|
||
uni.showToast({
|
||
title: `核销成功！¥${gainedFee}已释放到账`,
|
||
icon: 'success'
|
||
});
|
||
loadWorkspaceOrders();
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.message || '核销异常',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
|
||
const grabOrder = async (order) => {
|
||
try {
|
||
await claimOrder(order.id, {
|
||
expertId: 101,
|
||
companionName: '我 (接单大神)',
|
||
expertAvatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150'
|
||
});
|
||
} catch (_) {}
|
||
uni.showToast({
|
||
title: `抢单成功！已接单 ¥${order.price}`,
|
||
icon: 'success'
|
||
});
|
||
poolOrders.value = poolOrders.value.filter(o => o.id !== order.id);
|
||
loadWorkspaceOrders();
|
||
};
|
||
|
||
|
||
const chatWithBuyer = () => {
|
||
uni.showActionSheet({
|
||
itemList: [
|
||
'呼叫进入买家专属开黑语音连麦',
|
||
'发送微信快捷提醒（准备开局）',
|
||
'复制开黑联络码'
|
||
],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
uni.showToast({ title: '已建立加密语音通道', icon: 'success' });
|
||
} else if (res.tapIndex === 1) {
|
||
uni.showToast({ title: '已发送准备开局提醒', icon: 'success' });
|
||
} else {
|
||
uni.setClipboardData({
|
||
data: `BUYER-${Math.floor(100000 + Math.random() * 900000)}`,
|
||
success: () => {
|
||
uni.showToast({ title: '联络码已复制', icon: 'success' });
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const completeOrder = (id) => {
|
||
uni.showModal({
|
||
title: '确认提交服务验收',
|
||
content: '服务已完成？提交后买家确认无误或 24 小时内未异议将自动解冻订单资金打入钱包。',
|
||
confirmColor: '#10B981',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
activeOrders.value = activeOrders.value.filter(o => o.id !== id);
|
||
uni.showToast({ title: '已申请验收结算！', icon: 'success' });
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const switchBackToPlayer = () => {
|
||
uni.switchTab({
|
||
url: '/pages/user/index'
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.workspace-container {
|
||
min-height: 100vh;
|
||
background-color: #0A0F1D;
|
||
padding: 24rpx 32rpx calc(60rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.expert-status-card {
|
||
background: linear-gradient(135deg, #1E1B4B 0%, #151D30 100%);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
border-radius: 28rpx;
|
||
padding: 28rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.25);
|
||
|
||
.status-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.expert-avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
border: 4rpx solid #6366F1;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.expert-info {
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.expert-name {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #FFF;
|
||
}
|
||
|
||
.badge-gold {
|
||
font-size: 18rpx;
|
||
background: linear-gradient(135deg, #F59E0B, #D97706);
|
||
color: #FFF;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.status-indicator {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.dot-status {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: #64748B;
|
||
|
||
&.online {
|
||
background: #10B981;
|
||
box-shadow: 0 0 10rpx #10B981;
|
||
}
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.switch-wrap {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
border-radius: 32rpx;
|
||
padding: 10rpx 24rpx;
|
||
|
||
.switch-label {
|
||
font-size: 22rpx;
|
||
color: #E2E8F0;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stats-board {
|
||
background-color: #151D30;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
.stat-col {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.stat-label {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.stat-val {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
font-variant-numeric: tabular-nums;
|
||
|
||
&.green-val {
|
||
color: #10B981;
|
||
}
|
||
&.gold-val {
|
||
color: #F59E0B;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stat-divider {
|
||
width: 1px;
|
||
height: 60rpx;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
}
|
||
|
||
/* 收益走势统计图表面板 */
|
||
.revenue-trends-card {
|
||
margin-bottom: 24rpx;
|
||
|
||
.trend-tabs {
|
||
display: flex;
|
||
background: #0A0F1D;
|
||
padding: 4rpx;
|
||
border-radius: 20rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
|
||
.trend-tab-btn {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&.active {
|
||
background: #6366F1;
|
||
color: #FFFFFF;
|
||
font-weight: 600;
|
||
box-shadow: 0 2rpx 8rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
}
|
||
}
|
||
|
||
.period-summary-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 16rpx;
|
||
padding: 16rpx 12rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.sum-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.sum-label {
|
||
font-size: 18rpx;
|
||
color: #94A3B8;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
.sum-val {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
font-family: monospace;
|
||
|
||
&.green-val { color: #10B981; }
|
||
&.gold-val { color: #F59E0B; }
|
||
}
|
||
}
|
||
|
||
.sum-divider {
|
||
width: 1px;
|
||
height: 40rpx;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
}
|
||
}
|
||
|
||
.metric-switch-row {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
.metric-pill {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 12rpx;
|
||
padding: 6rpx 16rpx;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&.active {
|
||
color: #818CF8;
|
||
background: rgba(99, 102, 241, 0.15);
|
||
border-color: rgba(99, 102, 241, 0.4);
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-container {
|
||
height: 220rpx;
|
||
position: relative;
|
||
padding: 10rpx 0 0;
|
||
|
||
.chart-bars-wrap {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
gap: 8rpx;
|
||
|
||
.chart-bar-col {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
height: 100%;
|
||
position: relative;
|
||
cursor: pointer;
|
||
|
||
.tooltip-bubble {
|
||
position: absolute;
|
||
top: -36rpx;
|
||
background: #6366F1;
|
||
color: #FFF;
|
||
font-size: 18rpx;
|
||
font-weight: 700;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 6rpx;
|
||
white-space: nowrap;
|
||
z-index: 10;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.bar-val-text {
|
||
font-size: 16rpx;
|
||
color: #64748B;
|
||
margin-bottom: 6rpx;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.bar-track {
|
||
flex: 1;
|
||
width: 28rpx;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-radius: 14rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
overflow: hidden;
|
||
|
||
.bar-fill {
|
||
width: 100%;
|
||
border-radius: 14rpx;
|
||
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&.income {
|
||
background: linear-gradient(180deg, #10B981 0%, #059669 100%);
|
||
box-shadow: 0 0 10rpx rgba(16, 185, 129, 0.3);
|
||
}
|
||
&.orders {
|
||
background: linear-gradient(180deg, #6366F1 0%, #4F46E5 100%);
|
||
box-shadow: 0 0 10rpx rgba(99, 102, 241, 0.3);
|
||
}
|
||
&.avgPrice {
|
||
background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
|
||
box-shadow: 0 0 10rpx rgba(245, 158, 11, 0.3);
|
||
}
|
||
}
|
||
}
|
||
|
||
.bar-label {
|
||
font-size: 18rpx;
|
||
color: #94A3B8;
|
||
margin-top: 8rpx;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 大神服务包管理卡片 */
|
||
.services-manage-card {
|
||
margin-bottom: 24rpx;
|
||
|
||
.service-actions {
|
||
.btn-wd-records {
|
||
margin: 0;
|
||
font-size: 20rpx;
|
||
color: #6366F1;
|
||
background: rgba(99, 102, 241, 0.12);
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
border-radius: 12rpx;
|
||
padding: 6rpx 16rpx;
|
||
line-height: 1.4;
|
||
|
||
&::after { display: none; }
|
||
}
|
||
}
|
||
|
||
.services-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
|
||
.service-item-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 18rpx;
|
||
padding: 20rpx;
|
||
|
||
.srv-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
margin-right: 16rpx;
|
||
|
||
.srv-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
margin-bottom: 6rpx;
|
||
|
||
.srv-title {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
.srv-badge {
|
||
font-size: 18rpx;
|
||
color: #818CF8;
|
||
background: rgba(99, 102, 241, 0.12);
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
.srv-mode {
|
||
font-size: 18rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.srv-desc {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.srv-price-row {
|
||
.srv-price {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
font-family: monospace;
|
||
}
|
||
.srv-unit {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.srv-switch-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
.dot {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
background: #64748B;
|
||
}
|
||
|
||
.switch-txt {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
}
|
||
|
||
&.active {
|
||
background: rgba(16, 185, 129, 0.15);
|
||
border-color: rgba(16, 185, 129, 0.35);
|
||
|
||
.dot {
|
||
background: #10B981;
|
||
box-shadow: 0 0 8rpx #10B981;
|
||
}
|
||
.switch-txt {
|
||
color: #10B981;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.verify-section-card {
|
||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(21, 29, 48, 1) 100%);
|
||
border: 1px solid rgba(16, 185, 129, 0.35);
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.2);
|
||
|
||
.sec-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.title-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.sec-svg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.sec-title {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
}
|
||
}
|
||
|
||
.sec-sub {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
|
||
.verify-box {
|
||
.input-tips {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.pin-slots-wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
margin: 20rpx 0 28rpx;
|
||
|
||
&.shake {
|
||
animation: errorShake 0.4s ease-in-out;
|
||
}
|
||
|
||
.pin-slot {
|
||
width: 104rpx;
|
||
height: 116rpx;
|
||
background: #0A0F1D;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.12);
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
transition: all 0.2s ease;
|
||
|
||
&.filled {
|
||
border-color: rgba(16, 185, 129, 0.6);
|
||
background: rgba(16, 185, 129, 0.08);
|
||
}
|
||
|
||
&.active {
|
||
border-color: #10B981;
|
||
box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.4);
|
||
}
|
||
|
||
&.error {
|
||
border-color: #EF4444;
|
||
background: rgba(239, 68, 68, 0.1);
|
||
color: #EF4444;
|
||
}
|
||
|
||
.pin-char {
|
||
font-size: 46rpx;
|
||
font-weight: 800;
|
||
color: #10B981;
|
||
font-family: 'Courier New', Courier, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.cursor-line {
|
||
width: 4rpx;
|
||
height: 48rpx;
|
||
background: #10B981;
|
||
border-radius: 2rpx;
|
||
animation: cursorBlink 1s infinite;
|
||
}
|
||
}
|
||
}
|
||
|
||
.keypad-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16rpx;
|
||
|
||
.key-btn {
|
||
height: 96rpx;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.key-num {
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
font-family: 'Courier New', Courier, monospace;
|
||
}
|
||
|
||
&.action-key {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
|
||
.key-svg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.action-text {
|
||
font-size: 18rpx;
|
||
color: #94A3B8;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.quick-demo {
|
||
margin-top: 20rpx;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: #818CF8;
|
||
padding: 10rpx;
|
||
background: rgba(99, 102, 241, 0.1);
|
||
border: 1px dashed rgba(99, 102, 241, 0.3);
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 参与人身份核验确认卡弹窗样式 */
|
||
.verify-modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.75);
|
||
backdrop-filter: blur(8px);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
z-index: 999;
|
||
animation: fadeIn 0.2s ease-out;
|
||
|
||
.verify-modal-content {
|
||
width: 100%;
|
||
background: #151D30;
|
||
border-top: 2rpx solid rgba(16, 185, 129, 0.45);
|
||
border-radius: 36rpx 36rpx 0 0;
|
||
padding: 36rpx 32rpx calc(40rpx + env(safe-area-inset-bottom));
|
||
box-shadow: 0 -12rpx 40rpx rgba(0, 0, 0, 0.6);
|
||
animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 28rpx;
|
||
|
||
.modal-title {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
|
||
.badge-ready {
|
||
font-size: 20rpx;
|
||
background: rgba(16, 185, 129, 0.15);
|
||
border: 1px solid rgba(16, 185, 129, 0.35);
|
||
color: #10B981;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.participant-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 20rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.part-avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
border: 2rpx solid #10B981;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.part-info {
|
||
flex: 1;
|
||
|
||
.part-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.part-name {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #FFF;
|
||
}
|
||
|
||
.part-tag {
|
||
font-size: 18rpx;
|
||
background: linear-gradient(135deg, #F59E0B, #D97706);
|
||
color: #FFF;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.part-activity {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.part-code-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.label {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
.code-val {
|
||
font-size: 28rpx;
|
||
font-weight: 800;
|
||
color: #10B981;
|
||
letter-spacing: 2rpx;
|
||
font-family: 'Courier New', Courier, monospace;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.verify-fee-box {
|
||
background: rgba(16, 185, 129, 0.08);
|
||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.fee-k {
|
||
font-size: 24rpx;
|
||
color: #94A3B8;
|
||
}
|
||
|
||
.fee-v {
|
||
font-size: 34rpx;
|
||
font-weight: 800;
|
||
color: #10B981;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.btn-cancel {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
color: #94A3B8;
|
||
font-size: 26rpx;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.btn-confirm-checkin {
|
||
flex: 2;
|
||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||
color: #FFF;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes cursorBlink {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0; }
|
||
}
|
||
|
||
@keyframes errorShake {
|
||
0%, 100% { transform: translateX(0); }
|
||
20%, 60% { transform: translateX(-10rpx); }
|
||
40%, 80% { transform: translateX(10rpx); }
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from { transform: translateY(100%); }
|
||
to { transform: translateY(0); }
|
||
}
|
||
|
||
.section-card {
|
||
background-color: #151D30;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
.sec-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.title-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.sec-svg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.sec-title {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
}
|
||
}
|
||
|
||
.pulse-live {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.pulse-circle {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
background-color: #10B981;
|
||
box-shadow: 0 0 8rpx #10B981;
|
||
}
|
||
.live-text {
|
||
font-size: 20rpx;
|
||
color: #10B981;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pool-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18rpx;
|
||
|
||
.pool-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 18rpx;
|
||
padding: 20rpx;
|
||
|
||
.pool-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
|
||
.game-tag {
|
||
font-size: 20rpx;
|
||
background: rgba(99, 102, 241, 0.2);
|
||
color: #818CF8;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.pool-price {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
|
||
.pool-desc {
|
||
font-size: 22rpx;
|
||
color: #CBD5E1;
|
||
line-height: 1.4;
|
||
margin-bottom: 14rpx;
|
||
display: block;
|
||
}
|
||
|
||
.pool-foot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.pool-time {
|
||
font-size: 20rpx;
|
||
color: #EF4444;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.btn-grab {
|
||
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
|
||
color: #FFF;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
border-radius: 28rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
padding: 0 28rpx;
|
||
margin: 0;
|
||
box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-pool {
|
||
text-align: center;
|
||
color: #64748B;
|
||
font-size: 22rpx;
|
||
padding: 24rpx 0;
|
||
}
|
||
|
||
.active-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18rpx;
|
||
|
||
.active-order-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 18rpx;
|
||
padding: 20rpx;
|
||
|
||
.order-buyer {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
.buyer-avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 36rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.buyer-info {
|
||
flex: 1;
|
||
|
||
.buyer-name {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
display: block;
|
||
}
|
||
|
||
.service-tag {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.order-amount {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
|
||
.order-progress-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||
padding-top: 14rpx;
|
||
|
||
.prog-text {
|
||
font-size: 22rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
.order-btns {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
|
||
.btn-chat {
|
||
background: rgba(99, 102, 241, 0.15);
|
||
color: #818CF8;
|
||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||
font-size: 20rpx;
|
||
height: 52rpx;
|
||
line-height: 50rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 26rpx;
|
||
margin: 0;
|
||
}
|
||
|
||
.btn-complete {
|
||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||
color: #FFF;
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
padding: 0 22rpx;
|
||
border-radius: 26rpx;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-switch-wrap {
|
||
margin-top: 40rpx;
|
||
|
||
.btn-back-player {
|
||
background: #151D30;
|
||
color: #94A3B8;
|
||
font-size: 26rpx;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 42rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
}
|
||
|
||
/* 提现记录弹窗 */
|
||
.withdraw-records-modal {
|
||
max-height: 80vh;
|
||
|
||
.modal-header {
|
||
.btn-close {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.close-svg {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.records-scroll-list {
|
||
max-height: 60vh;
|
||
|
||
.wd-record-item {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.wd-rec-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.wd-no {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.wd-status-badge {
|
||
font-size: 18rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
font-weight: 600;
|
||
|
||
&.pending {
|
||
color: #F59E0B;
|
||
background: rgba(245, 158, 11, 0.12);
|
||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||
}
|
||
&.success {
|
||
color: #10B981;
|
||
background: rgba(16, 185, 129, 0.12);
|
||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||
}
|
||
&.rejected {
|
||
color: #EF4444;
|
||
background: rgba(239, 68, 68, 0.12);
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
}
|
||
}
|
||
}
|
||
|
||
.wd-rec-main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.wd-amount {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
font-family: monospace;
|
||
}
|
||
.wd-channel {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.wd-rec-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 18rpx;
|
||
color: #64748B;
|
||
|
||
.wd-reason {
|
||
color: #EF4444;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-records {
|
||
padding: 60rpx 0;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #64748B;
|
||
}
|
||
}
|
||
</style>
|