350 lines
9.5 KiB
Plaintext
350 lines
9.5 KiB
Plaintext
<template>
|
|
<view class="marketing-seckill-list">
|
|
<view class="filter-card border-shadow">
|
|
<view class="filter-row">
|
|
<view class="filter-item">
|
|
<text class="label">活动搜索：</text>
|
|
<input class="input-mock" placeholder="请输入活动名称, ID" />
|
|
</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 class="filter-item">
|
|
<text class="label">活动时段：</text>
|
|
<view class="select-mock">
|
|
<text class="select-val">请选择</text>
|
|
<text class="arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="filter-row mt-16">
|
|
<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>
|
|
<button class="btn-query">查询</button>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="action-bar">
|
|
<button class="btn-add" @click="handleAdd">添加秒杀活动</button>
|
|
</view>
|
|
|
|
<view class="table-card border-shadow">
|
|
<view class="table-container">
|
|
<view class="table-head">
|
|
<view class="th cell-id">ID</view>
|
|
<view class="th cell-title">活动标题</view>
|
|
<view class="th cell-limit">单次限购</view>
|
|
<view class="th cell-total">总购买数量限制</view>
|
|
<view class="th cell-count">商品数量</view>
|
|
<view class="th cell-period">活动时段</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 seckillList" :key="item.id" class="table-row">
|
|
<view class="td cell-id">
|
|
<text class="td-txt">{{ item.id }}</text>
|
|
</view>
|
|
<view class="td cell-title">
|
|
<text class="td-txt">{{ item.title }}</text>
|
|
</view>
|
|
<view class="td cell-limit">
|
|
<text class="td-txt">{{ item.single_limit }}</text>
|
|
</view>
|
|
<view class="td cell-total">
|
|
<text class="td-txt">{{ item.total_limit }}</text>
|
|
</view>
|
|
<view class="td cell-count">
|
|
<text class="td-txt">{{ item.product_count }}</text>
|
|
</view>
|
|
<view class="td cell-period">
|
|
<view class="period-tag">
|
|
<text class="period-txt">{{ item.time_range }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="td cell-time">
|
|
<text class="td-txt-small">开始: {{ item.start_date }}</text>
|
|
<text class="td-txt-small">结束: {{ item.end_date }}</text>
|
|
</view>
|
|
<view class="td cell-status">
|
|
<StatusSwitch v-model="item.status" @change="toggleStatus(item)" />
|
|
</view>
|
|
<view class="td cell-op">
|
|
<view class="op-links">
|
|
<text class="op-link" @click="handleEdit(item)">编辑</text>
|
|
<text class="op-split">|</text>
|
|
<text class="op-link" @click="handleDelete(item)">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分页 -->
|
|
<CommonPagination
|
|
v-if="seckillList.length > 0"
|
|
:total="seckillList.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, computed } from 'vue'
|
|
import StatusSwitch from '@/components/StatusSwitch.uvue'
|
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
|
|
|
const seckillList = ref([
|
|
{
|
|
id: 91,
|
|
title: '秒杀活动',
|
|
single_limit: 1,
|
|
total_limit: 10,
|
|
product_count: 5,
|
|
time_range: '06:00-24:00',
|
|
start_date: '2025-07-01 00:00:00',
|
|
end_date: '2028-08-22 23:59:59',
|
|
status: true
|
|
}
|
|
])
|
|
|
|
const toggleStatus = (item: any) => {
|
|
item.status = !item.status
|
|
uni.showToast({ title: '修改成功', icon: 'success' })
|
|
}
|
|
|
|
const handleAdd = () => {
|
|
uni.showToast({ title: '添加活动功能开发中', icon: 'none' })
|
|
}
|
|
|
|
const handleEdit = (item: any) => {
|
|
uni.showToast({ title: '编辑活动功能开发中', icon: 'none' })
|
|
}
|
|
|
|
const handleDelete = (item: any) => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要删除该活动吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
seckillList.value = seckillList.value.filter(i => i.id !== item.id)
|
|
uni.showToast({ title: '删除成功' })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 分页适配状态
|
|
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(seckillList.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-seckill-list {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.border-shadow {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mt-16 { margin-top: 16px; }
|
|
|
|
/* 过滤栏 */
|
|
.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;
|
|
}
|
|
|
|
.input-mock, .date-picker-mock, .select-mock {
|
|
width: 240px;
|
|
height: 32px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
font-size: 13px;
|
|
}
|
|
.input-mock { width: 200px; }
|
|
.select-mock { width: 160px; 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: 13px; color: #606266; }
|
|
.arrow { font-size: 10px; color: #c0c4cc; }
|
|
|
|
.btn-query {
|
|
width: 64px;
|
|
height: 32px;
|
|
background-color: #1890ff;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* 操作栏 */
|
|
.action-bar {
|
|
margin-bottom: var(--admin-section-gap);
|
|
}
|
|
.btn-add {
|
|
margin-left: 0;
|
|
width: auto;
|
|
padding: 0 16px;
|
|
height: 32px;
|
|
background-color: #1890ff;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 表格区域 */
|
|
.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: 13px; color: #515a6e; }
|
|
.td-txt-small { font-size: 12px; color: #808695; display: block; }
|
|
|
|
/* 各列宽度 */
|
|
.cell-id { width: 60px; }
|
|
.cell-title { flex: 1; min-width: 150px; }
|
|
.cell-limit { width: 100px; text-align: center; }
|
|
.cell-total { width: 150px; text-align: center; }
|
|
.cell-count { width: 100px; text-align: center; }
|
|
.cell-period { width: 120px; text-align: center; }
|
|
.cell-time { width: 220px; }
|
|
.cell-status { width: 100px; text-align: center; }
|
|
.cell-op { width: 120px; text-align: right; }
|
|
|
|
.period-tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border: 1px solid #1890ff;
|
|
border-radius: 4px;
|
|
background-color: #f0f7ff;
|
|
}
|
|
.period-txt { color: #1890ff; font-size: 12px; }
|
|
|
|
.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>
|
|
|
|
|