dachui/order_site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui优化-2

Browse Source
This commit is contained in:
yml2213
2026-05-14 20:16:04 +08:00
parent cfe2c03f1b
commit 0288e8f578
9 changed files with 665 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminManualRedeemView.vue
+65 -87
View File
@@ -77,34 +77,31 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
<template>
<section class="admin-panel manual-redeem-panel">
<header class="panel-header">
<div>
<h1>人工兑换</h1>
<p>客服在后台创建唯一任务、发送二维码、复核角色并完成兑换。</p>
</div>
<div class="header-actions">
<RouterLink v-if="taskDetailLink" :to="taskDetailLink" class="task-link">
查看任务详情
</RouterLink>
<el-button
v-if="hasActiveTask"
:loading="closeLoading"
plain
type="danger"
@click="closeTaskNow"
>
关闭当前任务
</el-button>
<el-button
v-if="canStartNextTask"
plain
type="primary"
@click="resetCurrentTask"
>
开始下一单
</el-button>
</div>
</header>
<AdminPageHeader
title="人工兑换"
description="客服在后台创建唯一任务、发送二维码、复核角色并完成兑换。"
>
<template v-if="taskDetailLink">
<RouterLink :to="taskDetailLink" class="task-link">查看任务详情</RouterLink>
</template>
<el-button
v-if="hasActiveTask"
:loading="closeLoading"
plain
type="danger"
@click="closeTaskNow"
>
关闭当前任务
</el-button>
<el-button
v-if="canStartNextTask"
plain
type="primary"
@click="resetCurrentTask"
>
开始下一单
</el-button>
</AdminPageHeader>
<section class="create-card">
<div class="card-head">
@@ -117,19 +114,17 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
<div class="form-grid">
<div class="field">
<span>唯一凭据</span>
<input
<el-input
v-model="form.proofValue"
class="text-input"
placeholder="输入订单号、客户名或其他唯一可追踪信息"
/>
</div>
<div class="field">
<span>内部履约 SKU</span>
<input
<el-input
v-model="form.skuCode"
list="manual-redeem-sku-suggestions"
class="text-input"
placeholder="选择或输入内部履约 SKU"
/>
<datalist id="manual-redeem-sku-suggestions">
@@ -144,9 +139,10 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
<div class="field field-remark">
<span>备注</span>
<textarea
<el-input
v-model="form.remark"
class="text-input text-area"
type="textarea"
:rows="3"
placeholder="可选：记录客户补充信息、兑换要求或客服备注"
/>
</div>
@@ -333,13 +329,12 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
gap: 18px;
}
.panel-header,
.header-actions,
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
gap: var(--space-4);
}
.header-actions {
@@ -347,7 +342,7 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
}
.task-link {
color: #245db6;
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
}
@@ -355,22 +350,22 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
.create-card,
.summary-card,
.review-card {
padding: 22px 24px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(86, 108, 138, 0.1);
box-shadow: 0 20px 60px rgba(30, 49, 78, 0.08);
padding: 22px var(--space-6);
border-radius: var(--radius-xl);
background: var(--bg-surface);
border: 1px solid var(--border-default);
box-shadow: var(--shadow-lg);
}
.card-head h2 {
margin: 0;
font-size: 18px;
color: #203551;
font-size: var(--text-lg);
color: var(--text-primary);
}
.card-head p {
margin: 6px 0 0;
color: #64748b;
color: var(--text-secondary);
line-height: 1.7;
}
@@ -378,17 +373,17 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
margin-top: 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
gap: var(--space-4);
}
.field {
display: grid;
gap: 8px;
gap: var(--space-2);
}
.field span {
color: #4a607f;
font-size: 13px;
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: 600;
}
@@ -396,58 +391,41 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
grid-column: 1 / -1;
}
.text-input {
width: 100%;
min-height: 46px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid #dbe4ee;
background: #f8fbff;
color: #21344d;
font-size: 14px;
}
.text-area {
min-height: 96px;
padding: 12px 14px;
resize: vertical;
}
.action-row {
margin-top: 18px;
display: flex;
gap: 12px;
gap: var(--space-3);
}
.summary-card {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
gap: var(--space-3);
}
.summary-card article {
padding: 14px;
border-radius: 16px;
background: #f7f9fc;
border-radius: var(--radius-md);
background: var(--bg-page);
}
.summary-card span {
display: block;
font-size: 12px;
color: #708096;
font-size: var(--text-xs);
color: var(--text-muted);
}
.summary-card strong {
display: block;
margin-top: 8px;
color: #203551;
margin-top: var(--space-2);
color: var(--text-primary);
word-break: break-word;
}
.layout-grid {
display: grid;
grid-template-columns: minmax(340px, 392px) minmax(0, 1fr);
gap: 16px;
gap: var(--space-4);
align-items: stretch;
}
@@ -457,10 +435,10 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
.review-stage {
margin-top: 18px;
border-radius: 20px;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid #dbe4ee;
background: #f8fbff;
border: 1px solid var(--border-default);
background: var(--bg-page);
}
.screenshot-button {
@@ -481,27 +459,27 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
.empty-block {
min-height: 180px;
padding: 24px;
border-radius: 24px;
padding: var(--space-6);
border-radius: var(--radius-xl);
display: grid;
place-items: center;
text-align: center;
background: rgba(255, 255, 255, 0.92);
border: 1px dashed #d5dfec;
color: #64748b;
background: var(--bg-surface);
border: 1px dashed var(--border-default);
color: var(--text-secondary);
}
.empty-block strong {
color: #24384f;
font-size: 16px;
color: var(--text-primary);
font-size: var(--text-lg);
}
.empty-block p {
margin: 8px 0 0;
margin: var(--space-2) 0 0;
line-height: 1.7;
}
@media (max-width: 1140px) {
@media (max-width: 900px) {
.summary-card,
.layout-grid,
.form-grid {