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

fix: 会员数据分析页深色主题与默认每页10条

Browse Source 
统一输入框/下拉/日期/分页为深色样式，去掉表格白条纹；默认分页改为10条。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
2026-07-05 18:33:39 +08:00
parent 288d001579
commit fa81909065
1 changed files with 121 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/views/member/Data.vue
View File

@@ -5,16 +5,16 @@
<div class="filter-card">
<el-form :inline="true" :model="filters" class="filter-form" @submit.prevent="search">
<el-form-item label="订单ID">
<el-input v-model="filters.dingdan_id" clearable placeholder="订单ID" style="width: 160px" />
<el-input v-model="filters.dingdan_id" clearable placeholder="订单ID" class="dark-input" style="width: 160px" />
</el-form-item>
<el-form-item label="购买人ID">
<el-input v-model="filters.yonghuid" clearable placeholder="打手ID" style="width: 120px" />
<el-input v-model="filters.yonghuid" clearable placeholder="打手ID" class="dark-input" style="width: 120px" />
</el-form-item>
<el-form-item label="购买人昵称">
<el-input v-model="filters.buyer_keyword" clearable placeholder="昵称关键词" style="width: 140px" />
<el-input v-model="filters.buyer_keyword" clearable placeholder="昵称关键词" class="dark-input" style="width: 140px" />
</el-form-item>
<el-form-item label="会员类型">
<el-select v-model="filters.huiyuan_id" clearable filterable placeholder="全部" style="width: 180px">
<el-select v-model="filters.huiyuan_id" clearable filterable placeholder="全部" class="dark-select" style="width: 180px">
<el-option
v-for="item in huiyuanOptions"
:key="item.huiyuan_id"
@@ -24,39 +24,39 @@
</el-select>
</el-form-item>
<el-form-item label="支付状态">
<el-select v-model="filters.zhuangtai" clearable placeholder="全部" style="width: 120px">
<el-select v-model="filters.zhuangtai" clearable placeholder="全部" class="dark-select" style="width: 120px">
<el-option label="已支付" :value="3" />
<el-option label="待支付" :value="9" />
</el-select>
</el-form-item>
<el-form-item label="订单类型">
<el-select v-model="filters.is_trial" clearable placeholder="全部" style="width: 120px">
<el-select v-model="filters.is_trial" clearable placeholder="全部" class="dark-select" style="width: 120px">
<el-option label="正式会员" :value="false" />
<el-option label="体验会员" :value="true" />
</el-select>
</el-form-item>
<el-form-item label="总会员单">
<el-select v-model="filters.is_bundle" clearable placeholder="全部" style="width: 120px">
<el-select v-model="filters.is_bundle" clearable placeholder="全部" class="dark-select" style="width: 120px">
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
<el-form-item label="已分红">
<el-select v-model="filters.has_fenhong" clearable placeholder="全部" style="width: 120px">
<el-select v-model="filters.has_fenhong" clearable placeholder="全部" class="dark-select" style="width: 120px">
<el-option label="已分红" :value="true" />
<el-option label="未分红" :value="false" />
</el-select>
</el-form-item>
<el-form-item label="管事ID">
<el-input v-model="filters.guanshi_id" clearable placeholder="管事ID" style="width: 120px" />
<el-input v-model="filters.guanshi_id" clearable placeholder="管事ID" class="dark-input" style="width: 120px" />
</el-form-item>
<el-form-item label="组长ID">
<el-input v-model="filters.zuzhang_id" clearable placeholder="组长ID" style="width: 120px" />
<el-input v-model="filters.zuzhang_id" clearable placeholder="组长ID" class="dark-input" style="width: 120px" />
</el-form-item>
<el-form-item label="金额区间">
<el-input-number v-model="filters.jine_min" :min="0" :precision="2" controls-position="right" placeholder="最低" style="width: 120px" />
<el-input-number v-model="filters.jine_min" :min="0" :precision="2" controls-position="right" placeholder="最低" class="dark-input-number" style="width: 120px" />
<span class="range-sep">-</span>
<el-input-number v-model="filters.jine_max" :min="0" :precision="2" controls-position="right" placeholder="最高" style="width: 120px" />
<el-input-number v-model="filters.jine_max" :min="0" :precision="2" controls-position="right" placeholder="最高" class="dark-input-number" style="width: 120px" />
</el-form-item>
<el-form-item label="购买时间">
<el-date-picker
@@ -66,11 +66,12 @@
start-placeholder="开始"
end-placeholder="结束"
value-format="YYYY-MM-DD HH:mm:ss"
class="dark-date-picker"
style="width: 360px"
/>
</el-form-item>
<el-form-item label="关键词">
<el-input v-model="filters.keyword" clearable placeholder="订单/用户/说明" style="width: 160px" />
<el-input v-model="filters.keyword" clearable placeholder="订单/用户/说明" class="dark-input" style="width: 160px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search" :loading="loading">查询</el-button>
@@ -111,7 +112,7 @@
</div>
<div class="table-card" v-loading="loading">
<el-table :data="list" stripe border style="width: 100%" row-key="dingdan_id">
<el-table :data="list" border class="member-data-table" style="width: 100%" row-key="dingdan_id">
<el-table-column type="expand">
<template #default="{ row }">
<div class="expand-panel" v-if="row.fenhong">
@@ -183,7 +184,7 @@
v-model:current-page="page"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[20, 50, 100]"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="fetchData"
@size-change="onSizeChange"
@@ -205,7 +206,7 @@ const loading = ref(false)
const list = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const pageSize = ref(10)
const huiyuanOptions = ref([])
const dateRange = ref([])
@@ -398,13 +399,113 @@ onMounted(fetchData)
.empty-fenhong {
color: #8fb8e8;
}
.table-card :deep(.el-table) {
/* 表单控件深色 */
.filter-form :deep(.el-input__wrapper),
.filter-form :deep(.el-select .el-input__wrapper),
.filter-form :deep(.el-input-number .el-input__wrapper),
.filter-form :deep(.el-date-editor .el-input__wrapper) {
background: #0a121c !important;
border: 1px solid #2a6f8f !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.filter-form :deep(.el-input__inner),
.filter-form :deep(.el-input-number__input),
.filter-form :deep(.el-range-input) {
color: #e6f3ff !important;
background: transparent !important;
}
.filter-form :deep(.el-input__inner::placeholder),
.filter-form :deep(.el-range-input::placeholder) {
color: rgba(159, 197, 255, 0.45) !important;
}
.filter-form :deep(.el-range-separator) {
color: #8fb8e8 !important;
}
.filter-form :deep(.el-input-number__decrease),
.filter-form :deep(.el-input-number__increase) {
background: #0d1824 !important;
border-color: #2a6f8f !important;
color: #9ec5ff !important;
}
.filter-form :deep(.el-select .el-select__caret),
.filter-form :deep(.el-input__suffix),
.filter-form :deep(.el-input__prefix) {
color: #8fb8e8 !important;
}
/* 表格统一深色，去掉白条纹 */
.member-data-table :deep(.el-table) {
--el-table-bg-color: transparent;
--el-table-tr-bg-color: rgba(12, 18, 28, 0.5);
--el-table-header-bg-color: rgba(20, 30, 45, 0.9);
--el-table-row-hover-bg-color: rgba(64, 158, 255, 0.08);
--el-table-tr-bg-color: rgba(12, 18, 28, 0.55);
--el-table-header-bg-color: rgba(20, 30, 45, 0.95);
--el-table-row-hover-bg-color: rgba(64, 158, 255, 0.1);
--el-table-text-color: #d8ebff;
--el-table-header-text-color: #9ec5ff;
--el-table-border-color: rgba(64, 158, 255, 0.12);
background: transparent;
}
.member-data-table :deep(.el-table th.el-table__cell) {
background: rgba(20, 30, 45, 0.95) !important;
color: #9ec5ff !important;
}
.member-data-table :deep(.el-table td.el-table__cell) {
background: rgba(12, 18, 28, 0.55) !important;
color: #d8ebff !important;
border-bottom: 1px solid rgba(64, 158, 255, 0.1) !important;
}
.member-data-table :deep(.el-table__body tr:hover > td.el-table__cell) {
background: rgba(64, 158, 255, 0.1) !important;
}
.member-data-table :deep(.el-table__empty-text) {
color: rgba(159, 197, 255, 0.55);
}
.member-data-table :deep(.el-table__expand-icon) {
color: #9ec5ff;
}
/* 分页深色 */
.pager :deep(.el-pagination) {
--el-pagination-bg-color: transparent;
--el-pagination-text-color: #9ec5ff;
--el-pagination-button-color: #9ec5ff;
--el-pagination-hover-color: #6cc3e8;
}
.pager :deep(.el-pagination .el-select .el-input__wrapper),
.pager :deep(.el-pagination .btn-prev),
.pager :deep(.el-pagination .btn-next),
.pager :deep(.el-pagination .el-pager li) {
background: #0a121c !important;
border: 1px solid #2a6f8f !important;
color: #9ec5ff !important;
}
.pager :deep(.el-pagination .el-pager li.is-active) {
background: rgba(64, 158, 255, 0.25) !important;
color: #e6f3ff !important;
border-color: #409eff !important;
}
.pager :deep(.el-pagination__total),
.pager :deep(.el-pagination__jump) {
color: #9ec5ff !important;
}
.pager :deep(.el-pagination__editor.el-input .el-input__wrapper) {
background: #0a121c !important;
border: 1px solid #2a6f8f !important;
}
.pager :deep(.el-pagination__editor.el-input .el-input__inner) {
color: #e6f3ff !important;
}
/* 按钮 */
.filter-form :deep(.el-button:not(.el-button--primary)) {
background: #0a121c;
border-color: #2a6f8f;
color: #9ec5ff;
}
.filter-form :deep(.el-button:not(.el-button--primary):hover) {
background: rgba(64, 158, 255, 0.12);
border-color: #409eff;
color: #e6f3ff;
}
</style>