434 lines
12 KiB
Plaintext
434 lines
12 KiB
Plaintext
<template>
|
|
<view class="marketing-combination-list">
|
|
<view class="filter-card border-shadow">
|
|
<view class="filter-row">
|
|
<view class="filter-item">
|
|
<text class="label">时间选择：</text>
|
|
<view class="date-picker-mock">
|
|
<text class="calendar-ic">📅</text>
|
|
<text class="date-placeholder">开始日期 - 结束日期</text>
|
|
</view>
|
|
</view>
|
|
<view class="filter-item">
|
|
<text class="label">拼团状态：</text>
|
|
<view class="select-mock">
|
|
<text class="select-val">请选择</text>
|
|
<text class="arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="stats-board">
|
|
<view class="stat-card border-shadow">
|
|
<view class="stat-icon-box bg-blue">
|
|
<text class="stat-ic">👥</text>
|
|
</view>
|
|
<view class="stat-info">
|
|
<text class="stat-value">349</text>
|
|
<text class="stat-label">参与人数(人)</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-card border-shadow">
|
|
<view class="stat-icon-box bg-orange">
|
|
<text class="stat-ic">📦</text>
|
|
</view>
|
|
<view class="stat-info">
|
|
<text class="stat-value">44</text>
|
|
<text class="stat-label">成团数量(个)</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="table-card border-shadow">
|
|
<view class="table-container">
|
|
<view class="table-head">
|
|
<view class="th cell-avatar">头像</view>
|
|
<view class="th cell-leader">开团团长</view>
|
|
<view class="th cell-time">开团时间</view>
|
|
<view class="th cell-product">拼团商品</view>
|
|
<view class="th cell-group">几人团</view>
|
|
<view class="th cell-num">几人参加</view>
|
|
<view class="th cell-time">结束时间</view>
|
|
<view class="th cell-status">状态</view>
|
|
<view class="th cell-op">操作</view>
|
|
</view>
|
|
|
|
<view class="table-body">
|
|
<view v-for="item in combos" :key="item.id" class="table-row">
|
|
<view class="td cell-avatar">
|
|
<image class="thumb" :src="item.avatar" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="td cell-leader">
|
|
<text class="td-txt">{{ item.nickname }} / {{ item.uid }}</text>
|
|
</view>
|
|
<view class="td cell-time">
|
|
<text class="td-txt-small">{{ item.start_time }}</text>
|
|
</view>
|
|
<view class="td cell-product">
|
|
<text class="product-title line-clamp-2">{{ item.title }} / {{ item.cid }}</text>
|
|
</view>
|
|
<view class="td cell-group">
|
|
<text class="td-txt">{{ item.people }}</text>
|
|
</view>
|
|
<view class="td cell-num">
|
|
<text class="td-txt-bold">{{ item.count_people }}</text>
|
|
</view>
|
|
<view class="td cell-time">
|
|
<text class="td-txt-small">{{ item.stop_time }}</text>
|
|
</view>
|
|
<view class="td cell-status">
|
|
<view :class="['status-tag', item.status]">
|
|
<text class="tag-txt">{{ statusLabels[item.status] }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="td cell-op">
|
|
<view class="op-links">
|
|
<text class="op-link" @click="viewDetails(item)">查看详情</text>
|
|
<text class="op-split" v-if="item.status === 'ongoing'">|</text>
|
|
<text class="op-link" v-if="item.status === 'ongoing'" @click="completeGroup(item)">立即成团</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分页 -->
|
|
<CommonPagination
|
|
v-if="combos.length > 0"
|
|
:total="combos.length"
|
|
:loading="false"
|
|
:currentPage="currentPage"
|
|
:pageSize="pageSize"
|
|
:pageSizeOptionLabels="pageSizeOptionLabels"
|
|
:pageSizeIndex="pageSizeIndex"
|
|
:visiblePages="visiblePages"
|
|
:totalPage="totalPage"
|
|
:jumpPageInput="jumpPageInput"
|
|
@page-size-change="handlePageSizeChange"
|
|
@page-change="handlePageChange"
|
|
@update:jumpPageInput="(val : string) => { jumpPageInput = val }"
|
|
@jump-page="handleJumpPage"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, reactive, computed } from 'vue'
|
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
|
|
|
const statusLabels = {
|
|
ongoing: '进行中',
|
|
pending: '未完成',
|
|
ended: '已成功',
|
|
}
|
|
|
|
const combos = ref([
|
|
{
|
|
id: 101,
|
|
avatar: 'https://img0.baidu.com/it/u=3033502919,1657850259&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
nickname: '1岁上班22岁退休',
|
|
uid: 82713,
|
|
start_time: '2026-02-03 10:09',
|
|
stop_time: '2026-02-04 10:09',
|
|
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
|
cid: 191,
|
|
people: 2,
|
|
count_people: 1,
|
|
status: 'ongoing',
|
|
},
|
|
{
|
|
id: 102,
|
|
avatar: 'https://img1.baidu.com/it/u=2295552459,2083538461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
nickname: '132****8769',
|
|
uid: 82683,
|
|
start_time: '2026-02-01 13:29',
|
|
stop_time: '2026-02-02 13:29',
|
|
title: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270',
|
|
cid: 192,
|
|
people: 2,
|
|
count_people: 1,
|
|
status: 'ongoing',
|
|
},
|
|
{
|
|
id: 103,
|
|
avatar: 'https://img0.baidu.com/it/u=1550993072,4086699313&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
nickname: 'Jk',
|
|
uid: 82598,
|
|
start_time: '2026-01-28 16:10',
|
|
stop_time: '2026-01-29 16:10',
|
|
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
|
cid: 191,
|
|
people: 2,
|
|
count_people: 1,
|
|
status: 'ongoing',
|
|
},
|
|
{
|
|
id: 104,
|
|
avatar: 'https://img1.baidu.com/it/u=3175865615,2002599723&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
nickname: '177****1523',
|
|
uid: 82565,
|
|
start_time: '2026-01-27 07:19',
|
|
stop_time: '2026-01-28 07:19',
|
|
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
|
cid: 191,
|
|
people: 2,
|
|
count_people: 1,
|
|
status: 'ongoing',
|
|
},
|
|
{
|
|
id: 105,
|
|
avatar: 'https://img2.baidu.com/it/u=2719717192,3826027113&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
nickname: '0-1',
|
|
uid: 79417,
|
|
start_time: '2026-01-25 23:53',
|
|
stop_time: '2026-01-26 23:53',
|
|
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
|
cid: 191,
|
|
people: 2,
|
|
count_people: 1,
|
|
status: 'ongoing',
|
|
},
|
|
{
|
|
id: 106,
|
|
avatar: 'https://img0.baidu.com/it/u=1893322197,2940863863&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
nickname: 'abc',
|
|
uid: 75343,
|
|
start_time: '2026-01-22 21:29',
|
|
stop_time: '2026-01-23 21:29',
|
|
title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
|
|
cid: 191,
|
|
people: 2,
|
|
count_people: 1,
|
|
status: 'ongoing',
|
|
},
|
|
{
|
|
id: 107,
|
|
avatar: 'https://img2.baidu.com/it/u=176219800,2487920112&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
nickname: '181****6910',
|
|
uid: 81141,
|
|
start_time: '2026-01-19 16:16',
|
|
stop_time: '2026-01-19 16:45',
|
|
title: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
|
|
cid: 190,
|
|
people: 2,
|
|
count_people: 1,
|
|
status: 'pending',
|
|
},
|
|
])
|
|
|
|
const viewDetails = (item: any) => {
|
|
console.log('查看详情', item.id)
|
|
}
|
|
|
|
const completeGroup = (item: any) => {
|
|
console.log('立即成团', item.id)
|
|
}
|
|
|
|
// 分页适配状态
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(15)
|
|
let jumpPageInput = ''
|
|
const pageSizeOptions = [10, 15, 20, 30, 50]
|
|
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
|
|
const pageSizeIndex = computed(() => {
|
|
const idx = pageSizeOptions.indexOf(pageSize.value)
|
|
return idx >= 0 ? idx : 0
|
|
})
|
|
const totalPage = computed(() => Math.max(1, Math.ceil(combos.value.length / pageSize.value)))
|
|
const visiblePages = computed(() => {
|
|
const t = totalPage.value
|
|
const cur = currentPage.value
|
|
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
|
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
|
|
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
|
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
|
})
|
|
const handlePageChange = (p: number) => { currentPage.value = p }
|
|
const handlePageSizeChange = (e: any) => {
|
|
const idx = Number(e.detail.value)
|
|
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
|
|
currentPage.value = 1
|
|
}
|
|
const handleJumpPage = () => {
|
|
const p = parseInt(jumpPageInput)
|
|
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.marketing-combination-list {
|
|
min-height: auto;
|
|
}
|
|
|
|
.border-shadow {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 过滤栏 */
|
|
.filter-card {
|
|
padding: var(--admin-card-padding);
|
|
margin-bottom: var(--admin-section-gap);
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.label {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.date-picker-mock, .select-mock {
|
|
width: 280px;
|
|
height: 32px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
}
|
|
.select-mock { width: 220px; justify-content: space-between; }
|
|
.select-mock.mini { width: 100px; height: 28px; }
|
|
|
|
.calendar-ic { font-size: 14px; color: #c0c4cc; margin-right: 8px; }
|
|
.date-placeholder { font-size: 13px; color: #c0c4cc; }
|
|
.select-val { font-size: 14px; color: #c0c4cc; }
|
|
.arrow { font-size: 10px; color: #c0c4cc; }
|
|
|
|
/* 统计卡片 */
|
|
.stats-board {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: var(--admin-section-gap);
|
|
margin-bottom: var(--admin-section-gap);
|
|
}
|
|
|
|
.stat-card {
|
|
flex: 1;
|
|
height: 120px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 40px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.stat-icon-box {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.bg-blue { background-color: #ecf5ff; }
|
|
.bg-orange { background-color: #fff7eb; }
|
|
.stat-ic { font-size: 32px; }
|
|
|
|
.stat-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.stat-value { font-size: 32px; font-weight: 600; color: #303133; }
|
|
.stat-label { font-size: 13px; color: #909399; margin-top: 4px; }
|
|
|
|
/* 表格区域 */
|
|
.table-card {
|
|
padding: var(--admin-card-padding);
|
|
}
|
|
|
|
.table-head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #f8f8f9;
|
|
border-bottom: 1px solid #e8eaec;
|
|
}
|
|
|
|
.th {
|
|
padding: 12px 8px;
|
|
font-size: 13px;
|
|
color: #515a6e;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid #e8eaec;
|
|
align-items: center;
|
|
}
|
|
|
|
.td {
|
|
padding: 16px 8px;
|
|
}
|
|
|
|
.td-txt { font-size: 14px; color: #515a6e; }
|
|
.td-txt-small { font-size: 13px; color: #808695; }
|
|
.td-txt-bold { font-size: 14px; color: #515a6e; font-weight: bold; }
|
|
|
|
/* 各列宽度 */
|
|
.cell-avatar { width: 80px; }
|
|
.cell-leader { width: 160px; }
|
|
.cell-time { width: 160px; }
|
|
.cell-product { flex: 1; min-width: 260px; }
|
|
.cell-group { width: 80px; text-align: center; }
|
|
.cell-num { width: 80px; text-align: center; }
|
|
.cell-status { width: 100px; text-align: center; }
|
|
.cell-op { width: 160px; text-align: right; }
|
|
|
|
.thumb {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.product-title {
|
|
font-size: 13px;
|
|
color: #515a6e;
|
|
line-height: 1.6;
|
|
}
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.status-tag {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
.status-tag.ongoing { background-color: #f0f7ff; border: 1px solid #d1e9ff; }
|
|
.status-tag.ongoing .tag-txt { color: #1890ff; }
|
|
.status-tag.pending { background-color: #fff7e6; border: 1px solid #ffe7ba; }
|
|
.status-tag.pending .tag-txt { color: #fa8c16; }
|
|
|
|
.op-links {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
.op-link { color: #1890ff; font-size: 13px; cursor: pointer; }
|
|
.op-split { color: #e8eaec; margin: 0 8px; }
|
|
|
|
/* 分页区域已迁至 CommonPagination 组件 */
|
|
</style>
|