601 lines
14 KiB
Vue
601 lines
14 KiB
Vue
<script setup>
|
||
import { computed, reactive, ref, watch } from "vue";
|
||
import { ElMessage } from "element-plus";
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
row: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
saveLoading: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(["update:modelValue", "save-remark", "detail-action"]);
|
||
const remarkText = ref("");
|
||
const remarkDialogVisible = ref(false);
|
||
const platformDialogVisible = ref(false);
|
||
const unavailableDialogVisible = ref(false);
|
||
const unextractDialogVisible = ref(false);
|
||
const platformForm = reactive({ platform: "local" });
|
||
|
||
const TYPE_MAP = {
|
||
account: { label: "账号密码", type: "success" },
|
||
account_tk: { label: "账号密码+Token", type: "primary" },
|
||
tk: { label: "Token", type: "warning" },
|
||
};
|
||
|
||
const PLATFORM_MAP = {
|
||
local: { label: "本地", type: "info" },
|
||
xianyu: { label: "闲鱼", type: "warning" },
|
||
taobao: { label: "淘宝", type: "info" },
|
||
pinduoduo: { label: "拼多多", type: "danger" },
|
||
jingdong: { label: "京东", type: "primary" },
|
||
douyin: { label: "抖音", type: "success" },
|
||
ziyoushangcheng: { label: "自有商城", type: "warning" },
|
||
};
|
||
|
||
const statusInfo = computed(() => {
|
||
const status = Number(props.row?.extractStatus || 0);
|
||
if (status === 2) return { label: "补号", type: "warning" };
|
||
if (status === 3) return { label: "续杯", type: "primary" };
|
||
if (props.row?.extracted) return { label: "已提取", type: "success" };
|
||
return { label: "未提取", type: "info" };
|
||
});
|
||
|
||
const typeInfo = computed(() => {
|
||
return (
|
||
TYPE_MAP[props.row?.type] || { label: props.row?.type || "-", type: "info" }
|
||
);
|
||
});
|
||
|
||
const platformInfo = computed(() => {
|
||
const key = props.row?.extractedPlatform;
|
||
if (!key) return { label: "-", type: "info" };
|
||
return PLATFORM_MAP[key] || { label: key, type: "info" };
|
||
});
|
||
|
||
const isUsedInfo = computed(() => {
|
||
const raw = props.row?.isUsed;
|
||
if (raw === null || raw === undefined || raw === "") {
|
||
return { label: "未探测", type: "info" };
|
||
}
|
||
const n = Number(raw);
|
||
if (n === 1) return { label: "可用", type: "success" };
|
||
if (n === 0) return { label: "已用完", type: "danger" };
|
||
return { label: String(raw), type: "info" };
|
||
});
|
||
|
||
const hasAccountPassword = computed(
|
||
() => !!(props.row?.account || props.row?.password),
|
||
);
|
||
const hasToken = computed(() => !!props.row?.token);
|
||
|
||
watch(
|
||
() => props.row,
|
||
(row) => {
|
||
remarkText.value = row?.remark || "";
|
||
platformForm.platform = row?.extractedPlatform || "local";
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
function closeDialog() {
|
||
emit("update:modelValue", false);
|
||
}
|
||
|
||
function openRemarkDialog() {
|
||
remarkText.value = props.row?.remark || "";
|
||
remarkDialogVisible.value = true;
|
||
}
|
||
|
||
function onSaveRemark() {
|
||
if (!props.row?.id) return;
|
||
emit("save-remark", { id: props.row.id, remark: remarkText.value || "" });
|
||
remarkDialogVisible.value = false;
|
||
}
|
||
|
||
function onSetUnavailable() {
|
||
if (!props.row?.id) return;
|
||
emit("detail-action", { action: "unavailable", id: props.row.id });
|
||
unavailableDialogVisible.value = false;
|
||
}
|
||
|
||
function onUpdatePlatform() {
|
||
if (!props.row?.id) return;
|
||
emit("detail-action", {
|
||
action: "platform",
|
||
id: props.row.id,
|
||
platform: platformForm.platform,
|
||
});
|
||
platformDialogVisible.value = false;
|
||
}
|
||
|
||
function onUnextract() {
|
||
if (!props.row?.id) return;
|
||
emit("detail-action", { action: "unextract", id: props.row.id });
|
||
unextractDialogVisible.value = false;
|
||
}
|
||
|
||
async function copyText(text, successText) {
|
||
const val = String(text || "").trim();
|
||
if (!val) {
|
||
ElMessage.warning("暂无可复制内容");
|
||
return;
|
||
}
|
||
try {
|
||
await navigator.clipboard.writeText(val);
|
||
ElMessage.success(successText || "已复制");
|
||
} catch {
|
||
ElMessage.error("复制失败，请检查浏览器权限");
|
||
}
|
||
}
|
||
|
||
function copyAccountPassword() {
|
||
const parts = [];
|
||
if (props.row?.account) parts.push(props.row.account);
|
||
if (props.row?.password) parts.push(props.row.password);
|
||
copyText(parts.join("\n"), "已复制账号+密码");
|
||
}
|
||
|
||
function copyToken() {
|
||
copyText(props.row?.token, "已复制 Token");
|
||
}
|
||
|
||
function copyAll() {
|
||
const parts = [];
|
||
if (props.row?.account) parts.push(`账号：${props.row.account}`);
|
||
if (props.row?.password) parts.push(`密码：${props.row.password}`);
|
||
if (props.row?.token) parts.push(`Token：${props.row.token}`);
|
||
copyText(parts.join("\n"), "已复制完整账号信息");
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<el-dialog
|
||
class="pool-detail-dialog"
|
||
:model-value="modelValue"
|
||
width="760px"
|
||
destroy-on-close
|
||
:show-close="false"
|
||
@update:model-value="(v) => emit('update:modelValue', v)"
|
||
>
|
||
<template #header>
|
||
<div class="detail-header">
|
||
<div>
|
||
<div class="detail-title">账号详情</div>
|
||
<div class="detail-subtitle">
|
||
通过弹窗执行账号状态、平台、备注等维护操作
|
||
</div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<el-button circle plain @click="closeDialog">×</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-if="row" class="detail-body">
|
||
<div class="info-grid">
|
||
<div class="info-card">
|
||
<div class="info-label">ID</div>
|
||
<div class="info-value">{{ row?.id || "-" }}</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<div class="info-label">账号类型</div>
|
||
<div class="info-value">
|
||
<el-tag :type="typeInfo.type" round>{{ typeInfo.label }}</el-tag>
|
||
</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<div class="info-label">提取状态</div>
|
||
<div class="info-value">
|
||
<el-tag :type="statusInfo.type" effect="dark" round>
|
||
{{ statusInfo.label }}
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<div class="info-label">提取平台</div>
|
||
<div class="info-value">
|
||
<el-tag
|
||
v-if="row.extractedPlatform"
|
||
:type="platformInfo.type"
|
||
size="small"
|
||
>
|
||
{{ platformInfo.label }}
|
||
</el-tag>
|
||
<span v-else>-</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<div class="info-label">提取时间</div>
|
||
<div class="info-value">{{ row.extractedAt || "-" }}</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<div class="info-label">可用检测</div>
|
||
<div class="info-value">
|
||
<el-tag :type="isUsedInfo.type" round>
|
||
{{ isUsedInfo.label }}
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<div class="info-label">账号</div>
|
||
<div class="info-value">{{ row.account || "-" }}</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<div class="info-label">密码</div>
|
||
<div class="info-value">{{ row.password || "-" }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-card">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="section-title">Token</div>
|
||
<div class="section-subtitle">
|
||
长 Token 已做自动换行，便于检查与复制
|
||
</div>
|
||
</div>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
plain
|
||
:disabled="!hasToken"
|
||
@click="copyToken"
|
||
>
|
||
复制 Token
|
||
</el-button>
|
||
</div>
|
||
<pre class="token-box">{{ row.token || "暂无 Token" }}</pre>
|
||
</div>
|
||
|
||
<div class="section-card">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="section-title">快捷功能</div>
|
||
<div class="section-subtitle">按使用场景复制账号信息</div>
|
||
</div>
|
||
</div>
|
||
<div class="copy-actions">
|
||
<el-button
|
||
:disabled="!hasAccountPassword"
|
||
@click="copyAccountPassword"
|
||
>
|
||
复制账号+密码
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
:disabled="!hasToken"
|
||
@click="copyToken"
|
||
>
|
||
复制 Token
|
||
</el-button>
|
||
<el-button
|
||
type="success"
|
||
plain
|
||
:disabled="!hasAccountPassword && !hasToken"
|
||
@click="copyAll"
|
||
>
|
||
复制全部
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-card">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="section-title">维护操作</div>
|
||
<div class="section-subtitle">
|
||
点击按钮后打开确认/编辑弹窗，再执行对应操作
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copy-actions">
|
||
<el-button
|
||
type="danger"
|
||
plain
|
||
@click="unavailableDialogVisible = true"
|
||
>
|
||
改不可用
|
||
</el-button>
|
||
<el-button
|
||
type="warning"
|
||
plain
|
||
@click="platformDialogVisible = true"
|
||
>
|
||
改平台
|
||
</el-button>
|
||
<el-button type="info" plain @click="unextractDialogVisible = true">
|
||
反提取
|
||
</el-button>
|
||
<el-button type="primary" plain @click="openRemarkDialog">
|
||
改备注
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-card">
|
||
<div class="section-head">
|
||
<div>
|
||
<div class="section-title">备注</div>
|
||
<div class="section-subtitle">备注改为弹窗编辑，当前仅展示</div>
|
||
</div>
|
||
</div>
|
||
<div class="remark-display">{{ row.remark || "暂无备注" }}</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
v-model="unavailableDialogVisible"
|
||
title="改不可用"
|
||
width="420px"
|
||
append-to-body
|
||
>
|
||
<el-alert type="warning" :closable="false">
|
||
确认将当前账号标记为不可用/已用完？
|
||
</el-alert>
|
||
<template #footer>
|
||
<el-button @click="unavailableDialogVisible = false">取消</el-button>
|
||
<el-button type="danger" :loading="saveLoading" @click="onSetUnavailable">
|
||
确认改不可用
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
v-model="platformDialogVisible"
|
||
title="改平台"
|
||
width="420px"
|
||
append-to-body
|
||
>
|
||
<el-form label-width="84px">
|
||
<el-form-item label="提取平台">
|
||
<el-select v-model="platformForm.platform" style="width: 100%">
|
||
<el-option
|
||
v-for="(v, k) in PLATFORM_MAP"
|
||
:key="k"
|
||
:label="v.label"
|
||
:value="k"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="platformDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="saveLoading" @click="onUpdatePlatform">
|
||
确认修改
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
v-model="unextractDialogVisible"
|
||
title="反提取"
|
||
width="420px"
|
||
append-to-body
|
||
>
|
||
<el-alert type="warning" :closable="false">
|
||
反提取会把账号恢复为未提取，并清空提取时间与提取平台。
|
||
</el-alert>
|
||
<template #footer>
|
||
<el-button @click="unextractDialogVisible = false">取消</el-button>
|
||
<el-button type="warning" :loading="saveLoading" @click="onUnextract">
|
||
确认反提取
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
v-model="remarkDialogVisible"
|
||
title="改备注"
|
||
width="520px"
|
||
append-to-body
|
||
>
|
||
<el-input
|
||
v-model="remarkText"
|
||
type="textarea"
|
||
:rows="5"
|
||
resize="none"
|
||
placeholder="请输入备注"
|
||
/>
|
||
<template #footer>
|
||
<el-button @click="remarkDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="saveLoading" @click="onSaveRemark">
|
||
保存备注
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
:deep(.pool-detail-dialog) {
|
||
max-width: calc(100vw - 28px);
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
:deep(.pool-detail-dialog .el-dialog__header) {
|
||
padding: 18px 22px;
|
||
margin: 0;
|
||
border-bottom: 1px solid #eef0f5;
|
||
}
|
||
|
||
:deep(.pool-detail-dialog .el-dialog__body) {
|
||
padding: 18px 22px 22px;
|
||
background: #f6f8fb;
|
||
}
|
||
|
||
:deep(.el-tag) {
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
.detail-header,
|
||
.header-actions,
|
||
.section-head,
|
||
.copy-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.detail-header {
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
}
|
||
|
||
.detail-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
}
|
||
|
||
.detail-subtitle,
|
||
.section-subtitle {
|
||
margin-top: 4px;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
.header-actions {
|
||
gap: 10px;
|
||
}
|
||
|
||
.header-actions .el-button {
|
||
font-size: 18px;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.detail-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.section-card,
|
||
.info-card {
|
||
background: #fff;
|
||
border: 1px solid #edf0f6;
|
||
box-shadow: 0 10px 28px rgba(31, 41, 55, 0.06);
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.info-card {
|
||
border-radius: 14px;
|
||
padding: 14px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.info-label {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.info-value {
|
||
color: #303133;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
word-break: break-all;
|
||
min-height: 20px;
|
||
}
|
||
|
||
.section-card {
|
||
border-radius: 16px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.section-head {
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #303133;
|
||
}
|
||
|
||
.token-box {
|
||
margin: 0;
|
||
padding: 14px;
|
||
max-height: 220px;
|
||
overflow: auto;
|
||
border-radius: 12px;
|
||
background: #111827;
|
||
color: #d1e7ff;
|
||
font-size: 12px;
|
||
line-height: 1.7;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.copy-actions {
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.copy-actions .el-button {
|
||
margin: 0;
|
||
}
|
||
|
||
.remark-display {
|
||
padding: 12px;
|
||
min-height: 42px;
|
||
border-radius: 10px;
|
||
background: #f8fafc;
|
||
color: #303133;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
:deep(.pool-detail-dialog) {
|
||
width: calc(100vw - 24px) !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
:deep(.pool-detail-dialog .el-dialog__header) {
|
||
padding: 14px 14px;
|
||
}
|
||
|
||
:deep(.pool-detail-dialog .el-dialog__body) {
|
||
padding: 12px;
|
||
max-height: 76vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.detail-header,
|
||
.section-head {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.section-head {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.info-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.copy-actions .el-button,
|
||
.section-head .el-button {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|