feat(F006): 列表页UI统一 - 8页状态胶囊化(el-tag全局胶囊+st-pill圆点) + 修复拼团/秒杀缺失主表 + 批量栏通用样式
This commit is contained in:
parent
092d1991c7
commit
30cc69f43b
@ -192,15 +192,19 @@ onMounted(() => { load() })
|
||||
|
||||
/* 状态徽章(4 种) - 浅底色块(套设计规范 §5.4) */
|
||||
.rr-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11.5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 17.25px;
|
||||
height: 21.25px;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.rr-badge::before {
|
||||
content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
|
||||
}
|
||||
.rr-badge-pending { background: var(--amber-soft); color: var(--amber); }
|
||||
.rr-badge-quoting { background: var(--brand-soft); color: var(--brand); }
|
||||
.rr-badge-done { background: var(--green-soft); color: var(--green); }
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
import { ref, onMounted, reactive, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Clock } from '@element-plus/icons-vue'
|
||||
import { httpGet } from '@/utils/request'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
@ -46,6 +47,14 @@ interface Order {
|
||||
const STATUS_LABEL: Record<number, string> = {
|
||||
1: '待支付', 2: '待发货', 3: '待收货', 4: '待付尾款', 5: '待评价', 6: '已完成', 7: '已取消', 8: '采购单待审核', 9: '付款单待审核'
|
||||
}
|
||||
// 状态胶囊配色 (已完成=绿/已取消=灰/其余=品牌蓝, 引用全局 --st-* 变量暗色自适应)
|
||||
const STATUS_PILL: Record<number, { color: string; bg: string }> = {
|
||||
6: { color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
|
||||
7: { color: 'var(--st-lv4-fg)', bg: 'var(--st-lv4-bg)' }
|
||||
}
|
||||
function statusPill(status: number) {
|
||||
return STATUS_PILL[status] || { color: 'var(--primary)', bg: 'var(--primary-soft, #dbeafe)' }
|
||||
}
|
||||
|
||||
const STATUS_TABS = [
|
||||
{ value: '', label: '全部' },
|
||||
@ -259,19 +268,15 @@ onMounted(load)
|
||||
<span v-else class="rr-muted">--</span>
|
||||
</template>
|
||||
<template #time="{ row }">
|
||||
<span class="rr-time">{{ fmtDate(row.createDate) }}</span>
|
||||
<span class="rr-time"><el-icon style="vertical-align:-2px;margin-right:4px"><Clock /></el-icon>{{ fmtDate(row.createDate) }}</span>
|
||||
</template>
|
||||
<template #amount="{ row }">
|
||||
<span class="rr-amount">¥ {{ row.totalAmount.toLocaleString() }}</span>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag
|
||||
:type="(STATUS_LABEL[row.status] === '已完成' ? 'success' : STATUS_LABEL[row.status] === '已取消' ? 'info' : 'primary') as any"
|
||||
size="small"
|
||||
effect="light"
|
||||
>
|
||||
{{ STATUS_LABEL[row.status] || `状态${row.status}` }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="{ color: statusPill(row.status).color, background: statusPill(row.status).bg }">
|
||||
<span class="st-dot"></span>{{ STATUS_LABEL[row.status] || `状态${row.status}` }}
|
||||
</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<TableActions
|
||||
|
||||
@ -29,9 +29,9 @@ interface Groupbuy {
|
||||
raw: any
|
||||
}
|
||||
|
||||
const STATUS_MAP: Record<number, { label: string; type: string }> = {
|
||||
1: { label: '启用', type: 'success' },
|
||||
2: { label: '停用', type: 'danger' }
|
||||
const STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
|
||||
1: { label: '启用', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
|
||||
2: { label: '停用', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
|
||||
}
|
||||
|
||||
const FALLBACK: Groupbuy[] = [
|
||||
@ -116,6 +116,33 @@ onMounted(load)
|
||||
/>
|
||||
|
||||
<div class="rr-card">
|
||||
<div class="batch-bar" :class="{ 'has-selection': selection.length > 0 }">
|
||||
<span v-if="selection.length > 0" class="batch-count">已选 <strong>{{ selection.length }}</strong> 个活动</span>
|
||||
<span v-else class="batch-hint">勾选活动后可批量操作</span>
|
||||
<span class="batch-actions">
|
||||
<el-button size="small" type="danger" plain :disabled="!selection.length" @click="onBatchDelete">批量删除</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<el-table :data="list" v-loading="loading" style="width: 100%" @selection-change="onSelectionChange" row-key="id" empty-text="暂无拼团活动">
|
||||
<el-table-column type="selection" width="48" align="center" />
|
||||
<el-table-column prop="name" label="活动名称" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="enterpriseName" label="活动商家" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="groupBeginTime" label="开始时间" width="150" />
|
||||
<el-table-column prop="groupEndTime" label="结束时间" width="150" />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="st-pill" :style="{ color: STATUS_MAP[row.status]?.color, background: STATUS_MAP[row.status]?.bg }"><span class="st-dot"></span>{{ STATUS_MAP[row.status]?.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createDate" label="创建时间" width="165" />
|
||||
<el-table-column label="操作" width="170" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" text @click="onView(row)">详情</el-button>
|
||||
<el-button :type="row.status === 1 ? 'warning' : 'success'" size="small" text @click="onToggleStatus(row)">{{ row.status === 1 ? '停用' : '启用' }}</el-button>
|
||||
<el-button type="danger" size="small" text @click="onDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="rr-pagination">
|
||||
<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="onLimitChange" @current-change="onPageChange" />
|
||||
</div>
|
||||
@ -129,7 +156,7 @@ onMounted(load)
|
||||
<el-descriptions-item label="结束时间">{{ viewData.groupEndTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="活动商品" :span="2">{{ viewData.type }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="(STATUS_MAP[viewData.status]?.type as any)" size="small">{{ STATUS_MAP[viewData.status]?.label }}</el-tag>
|
||||
<span class="st-pill" :style="{ color: STATUS_MAP[viewData.status]?.color, background: STATUS_MAP[viewData.status]?.bg }"><span class="st-dot"></span>{{ STATUS_MAP[viewData.status]?.label }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ viewData.createDate }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
@ -29,9 +29,9 @@ interface Seckill {
|
||||
raw: any
|
||||
}
|
||||
|
||||
const STATUS_MAP: Record<number, { label: string; type: string }> = {
|
||||
0: { label: '启用', type: 'success' },
|
||||
1: { label: '停用', type: 'danger' }
|
||||
const STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
|
||||
0: { label: '启用', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
|
||||
1: { label: '停用', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
|
||||
}
|
||||
|
||||
const FALLBACK: Seckill[] = [
|
||||
@ -117,6 +117,33 @@ onMounted(load)
|
||||
/>
|
||||
|
||||
<div class="rr-card">
|
||||
<div class="batch-bar" :class="{ 'has-selection': selection.length > 0 }">
|
||||
<span v-if="selection.length > 0" class="batch-count">已选 <strong>{{ selection.length }}</strong> 个活动</span>
|
||||
<span v-else class="batch-hint">勾选活动后可批量操作</span>
|
||||
<span class="batch-actions">
|
||||
<el-button size="small" type="danger" plain :disabled="!selection.length" @click="onBatchDelete">批量删除</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<el-table :data="list" v-loading="loading" style="width: 100%" @selection-change="onSelectionChange" row-key="id" empty-text="暂无秒杀活动">
|
||||
<el-table-column type="selection" width="48" align="center" />
|
||||
<el-table-column prop="name" label="活动名称" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="enterpriseName" label="活动商家" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="beginTime" label="开始时间" width="150" />
|
||||
<el-table-column prop="endTime" label="结束时间" width="150" />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="st-pill" :style="{ color: STATUS_MAP[row.status]?.color, background: STATUS_MAP[row.status]?.bg }"><span class="st-dot"></span>{{ STATUS_MAP[row.status]?.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createDate" label="创建时间" width="165" />
|
||||
<el-table-column label="操作" width="170" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" text @click="onView(row)">详情</el-button>
|
||||
<el-button :type="row.status === 0 ? 'warning' : 'success'" size="small" text @click="onToggleStatus(row)">{{ row.status === 0 ? '停用' : '启用' }}</el-button>
|
||||
<el-button type="danger" size="small" text @click="onDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="rr-pagination">
|
||||
<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="onLimitChange" @current-change="onPageChange" />
|
||||
</div>
|
||||
@ -130,7 +157,7 @@ onMounted(load)
|
||||
<el-descriptions-item label="结束时间">{{ viewData.endTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="活动商品" :span="2">{{ viewData.type }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="(STATUS_MAP[viewData.status]?.type as any)" size="small">{{ STATUS_MAP[viewData.status]?.label }}</el-tag>
|
||||
<span class="st-pill" :style="{ color: STATUS_MAP[viewData.status]?.color, background: STATUS_MAP[viewData.status]?.bg }"><span class="st-dot"></span>{{ STATUS_MAP[viewData.status]?.label }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ viewData.createDate }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
@ -33,10 +33,10 @@ interface Brand {
|
||||
raw: any
|
||||
}
|
||||
|
||||
const STATUS_MAP: Record<number, { label: string; type: string }> = {
|
||||
1: { label: '待审核', type: 'warning' },
|
||||
2: { label: '审核通过', type: 'success' },
|
||||
3: { label: '审核拒绝', type: 'danger' }
|
||||
const STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
|
||||
1: { label: '待审核', color: 'var(--st-warn-fg)', bg: 'var(--st-warn-bg)' },
|
||||
2: { label: '审核通过', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
|
||||
3: { label: '审核拒绝', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
|
||||
}
|
||||
|
||||
const list = ref<Brand[]>([])
|
||||
@ -212,7 +212,7 @@ onMounted(load)
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="审核状态" header-align="center" align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="STATUS_MAP[row.status]?.type || 'info'" size="small">{{ STATUS_MAP[row.status]?.label || row.status }}</el-tag>
|
||||
<span class="st-pill" :style="{ color: STATUS_MAP[row.status]?.color || 'var(--st-lv4-fg)', background: STATUS_MAP[row.status]?.bg || 'var(--st-lv4-bg)' }"><span class="st-dot"></span>{{ STATUS_MAP[row.status]?.label || row.status }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createDate" label="申请时间" header-align="center" align="center" width="170" show-overflow-tooltip />
|
||||
@ -265,7 +265,7 @@ onMounted(load)
|
||||
<el-table-column prop="sourceEnterpriseName" label="品牌来源" header-align="center" align="center" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="审核状态" header-align="center" align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="STATUS_MAP[row.status]?.type || 'info'" size="small">{{ STATUS_MAP[row.status]?.label || row.status }}</el-tag>
|
||||
<span class="st-pill" :style="{ color: STATUS_MAP[row.status]?.color || 'var(--st-lv4-fg)', background: STATUS_MAP[row.status]?.bg || 'var(--st-lv4-bg)' }"><span class="st-dot"></span>{{ STATUS_MAP[row.status]?.label || row.status }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createDate" label="申请时间" header-align="center" align="center" width="170" />
|
||||
|
||||
@ -168,9 +168,9 @@ onMounted(load)
|
||||
</el-table-column>
|
||||
<el-table-column label="满减配置" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="(row.type === 1 ? 'warning' : 'success') as any" size="small" effect="light">
|
||||
{{ fmtConfig(row) }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="row.type === 1 ? { color: 'var(--st-warn-fg)', background: 'var(--st-warn-bg)' } : { color: 'var(--st-ok-fg)', background: 'var(--st-ok-bg)' }">
|
||||
<span class="st-dot"></span>{{ fmtConfig(row) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="适用商品" min-width="180" show-overflow-tooltip>
|
||||
@ -191,9 +191,9 @@ onMounted(load)
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="(row.onShelf === 1 ? 'success' : 'info') as any" size="small" effect="light">
|
||||
{{ row.onShelf === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="row.onShelf === 1 ? { color: 'var(--st-ok-fg)', background: 'var(--st-ok-bg)' } : { color: 'var(--st-lv4-fg)', background: 'var(--st-lv4-bg)' }">
|
||||
<span class="st-dot"></span>{{ row.onShelf === 1 ? '启用' : '停用' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
@ -221,9 +221,9 @@ onMounted(load)
|
||||
<el-table-column prop="userName" label="领取人" align="center" />
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.status === 1" size="small" type="info" effect="light">已使用</el-tag>
|
||||
<el-tag v-else-if="row.status === 2" size="small" type="success" effect="light">未使用</el-tag>
|
||||
<el-tag v-else size="small" type="warning" effect="light">未知</el-tag>
|
||||
<span v-if="row.status === 1" class="st-pill" style="color: var(--st-lv4-fg); background: var(--st-lv4-bg)"><span class="st-dot"></span>已使用</span>
|
||||
<span v-else-if="row.status === 2" class="st-pill" style="color: var(--st-ok-fg); background: var(--st-ok-bg)"><span class="st-dot"></span>未使用</span>
|
||||
<span v-else class="st-pill" style="color: var(--st-warn-fg); background: var(--st-warn-bg)"><span class="st-dot"></span>未知</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="领取时间" align="center" width="200" />
|
||||
|
||||
@ -60,15 +60,15 @@ interface SkuItem {
|
||||
}
|
||||
|
||||
// 状态映射 (沿用老 vue checkStatus 1=待审核 2=已通过 3=已驳回, onShelf 0=下架 1=在售)
|
||||
const CHECK_STATUS_MAP: Record<number, { label: string; type: string }> = {
|
||||
1: { label: '待审核', type: 'warning' },
|
||||
2: { label: '已通过', type: 'success' },
|
||||
3: { label: '已驳回', type: 'danger' }
|
||||
const CHECK_STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
|
||||
1: { label: '待审核', color: 'var(--st-warn-fg)', bg: 'var(--st-warn-bg)' },
|
||||
2: { label: '已通过', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
|
||||
3: { label: '已驳回', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
|
||||
}
|
||||
|
||||
const ONSHELF_STATUS_MAP: Record<number, { label: string; type: string }> = {
|
||||
0: { label: '已下架', type: 'info' },
|
||||
1: { label: '已上架', type: 'success' }
|
||||
const ONSHELF_STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
|
||||
0: { label: '已下架', color: 'var(--st-lv4-fg)', bg: 'var(--st-lv4-bg)' },
|
||||
1: { label: '已上架', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' }
|
||||
}
|
||||
|
||||
const STATUS_TABS = [
|
||||
@ -395,14 +395,10 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
|
||||
<span>{{ [row.firstCategoryName, row.secondCategoryName, row.thirdCategoryName].filter(Boolean).join(' / ') || '--' }}</span>
|
||||
</template>
|
||||
<template #onShelf="{ row }">
|
||||
<el-tag :type="(ONSHELF_STATUS_MAP[row.onShelf]?.type as any)" size="small" effect="light">
|
||||
{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[row.onShelf]?.color, background: ONSHELF_STATUS_MAP[row.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}</span>
|
||||
</template>
|
||||
<template #checkStatus="{ row }">
|
||||
<el-tag :type="(CHECK_STATUS_MAP[row.checkStatus]?.type as any)" size="small" effect="light">
|
||||
{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="{ color: CHECK_STATUS_MAP[row.checkStatus]?.color, background: CHECK_STATUS_MAP[row.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<TableActions
|
||||
@ -451,17 +447,13 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
|
||||
<el-table-column prop="unitName" label="单位" width="80" align="center" />
|
||||
<el-table-column label="铺货" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="(ONSHELF_STATUS_MAP[row.onShelf]?.type as any)" size="small" effect="light">
|
||||
{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[row.onShelf]?.color, background: ONSHELF_STATUS_MAP[row.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="checkOpinion" label="审核意见" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="(CHECK_STATUS_MAP[row.checkStatus]?.type as any)" size="small" effect="light">
|
||||
{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="{ color: CHECK_STATUS_MAP[row.checkStatus]?.color, background: CHECK_STATUS_MAP[row.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="申请时间" prop="createDate" width="170" />
|
||||
@ -491,14 +483,10 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
|
||||
{{ [detailData.firstCategoryName, detailData.secondCategoryName, detailData.thirdCategoryName].filter(Boolean).join(' / ') }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="(CHECK_STATUS_MAP[detailData.checkStatus]?.type as any)" size="small">
|
||||
{{ CHECK_STATUS_MAP[detailData.checkStatus]?.label }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="{ color: CHECK_STATUS_MAP[detailData.checkStatus]?.color, background: CHECK_STATUS_MAP[detailData.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[detailData.checkStatus]?.label }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="铺货">
|
||||
<el-tag :type="(ONSHELF_STATUS_MAP[detailData.onShelf]?.type as any)" size="small">
|
||||
{{ ONSHELF_STATUS_MAP[detailData.onShelf]?.label }}
|
||||
</el-tag>
|
||||
<span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[detailData.onShelf]?.color, background: ONSHELF_STATUS_MAP[detailData.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[detailData.onShelf]?.label }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="审核意见" :span="2">{{ detailData.checkOpinion || '--' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
@ -36,14 +36,14 @@ interface ServiceGood {
|
||||
raw: any
|
||||
}
|
||||
|
||||
const CHECK_STATUS_MAP: Record<number, { label: string; type: string }> = {
|
||||
1: { label: '待审核', type: 'warning' },
|
||||
2: { label: '已通过', type: 'success' },
|
||||
3: { label: '已驳回', type: 'danger' }
|
||||
const CHECK_STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
|
||||
1: { label: '待审核', color: 'var(--st-warn-fg)', bg: 'var(--st-warn-bg)' },
|
||||
2: { label: '已通过', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
|
||||
3: { label: '已驳回', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
|
||||
}
|
||||
const ONSHELF_STATUS_MAP: Record<number, { label: string; type: string }> = {
|
||||
0: { label: '已下架', type: 'info' },
|
||||
1: { label: '已上架', type: 'success' }
|
||||
const ONSHELF_STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
|
||||
0: { label: '已下架', color: 'var(--st-lv4-fg)', bg: 'var(--st-lv4-bg)' },
|
||||
1: { label: '已上架', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' }
|
||||
}
|
||||
const STATUS_TABS = [
|
||||
{ value: '', label: '全部' },
|
||||
@ -309,10 +309,10 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
|
||||
<span class="rr-price">¥ {{ Number(row.price || 0).toLocaleString() }} / {{ row.unit }}</span>
|
||||
</template>
|
||||
<template #onShelf="{ row }">
|
||||
<el-tag :type="(ONSHELF_STATUS_MAP[row.onShelf]?.type as any)" size="small" effect="light">{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}</el-tag>
|
||||
<span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[row.onShelf]?.color, background: ONSHELF_STATUS_MAP[row.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}</span>
|
||||
</template>
|
||||
<template #checkStatus="{ row }">
|
||||
<el-tag :type="(CHECK_STATUS_MAP[row.checkStatus]?.type as any)" size="small" effect="light">{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}</el-tag>
|
||||
<span class="st-pill" :style="{ color: CHECK_STATUS_MAP[row.checkStatus]?.color, background: CHECK_STATUS_MAP[row.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<TableActions
|
||||
@ -337,10 +337,10 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
|
||||
<el-descriptions-item label="服务区域">{{ detailData.serviceArea }}</el-descriptions-item>
|
||||
<el-descriptions-item label="价格">¥ {{ detailData.price.toLocaleString() }} / {{ detailData.unit }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="(CHECK_STATUS_MAP[detailData.checkStatus]?.type as any)" size="small">{{ CHECK_STATUS_MAP[detailData.checkStatus]?.label }}</el-tag>
|
||||
<span class="st-pill" :style="{ color: CHECK_STATUS_MAP[detailData.checkStatus]?.color, background: CHECK_STATUS_MAP[detailData.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[detailData.checkStatus]?.label }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="铺货">
|
||||
<el-tag :type="(ONSHELF_STATUS_MAP[detailData.onShelf]?.type as any)" size="small">{{ ONSHELF_STATUS_MAP[detailData.onShelf]?.label }}</el-tag>
|
||||
<span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[detailData.onShelf]?.color, background: ONSHELF_STATUS_MAP[detailData.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[detailData.onShelf]?.label }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="审核意见" :span="2">{{ detailData.checkOpinion || '--' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
@ -46,6 +46,32 @@
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* ---------- 5. el-tag 统一胶囊外观 (所有页面状态/徽标一致) ---------- */
|
||||
/* EP 变量级联下 --el-tag-border-radius 仍被覆盖为 4px, 直接属性 !important 兜底 */
|
||||
.el-tag {
|
||||
border-radius: 999px !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ---------- 6. 通用状态胶囊 (圆点+胶囊, 颜色经 inline style 传 var() 或 --st-* 变量) ---------- */
|
||||
.st-pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
font-size: 12px; font-weight: 500; padding: 3px 12px; border-radius: 999px; white-space: nowrap;
|
||||
}
|
||||
.st-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
|
||||
/* ---------- 7. 批量操作栏通用样式 (所有列表页复用) ---------- */
|
||||
.batch-bar {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 12px 16px; border-bottom: 1px solid var(--border);
|
||||
transition: background .2s;
|
||||
}
|
||||
.batch-bar.has-selection { background: var(--primary-soft, #e0ecff); }
|
||||
.batch-count { font-size: 13px; color: var(--ink-2); }
|
||||
.batch-count strong { color: var(--primary); font-size: 15px; }
|
||||
.batch-hint { font-size: 12px; color: var(--ink-3); }
|
||||
.batch-actions { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
|
||||
|
||||
/* ---------- 4. 状态色暗色适配 ---------- */
|
||||
/* 状态语义色 token (亮色默认) — 各页面状态标签通过 var() 引用, 主题切换自动适配 */
|
||||
:root,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user