huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大致完成页面

Browse Source
This commit is contained in:
huangzhenbao
2026-02-05 09:01:16 +08:00
parent c411c23b9c
commit d51e6a8f72
40 changed files with 11023 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

529
pages/mall/admin/marketing/seckill/config.uvue
View File

@@ -1,27 +1,528 @@
<template>
<AdminLayout :currentPage="currentPage">
<view class="page">
<view class="header">
<text class="title">{{ title }}</text>
<text class="sub-title">页面占位 (自动生成)</text>
<view class="marketing-seckill-config">
<view class="filter-card border-shadow">
<view class="filter-row">
<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>
</AdminLayout>
<view class="action-bar">
<button class="btn-add" @click="showDrawer = true">添加数据</button>
</view>
<view class="table-card border-shadow">
<view class="table-container">
<view class="table-head">
<view class="th cell-id">编号</view>
<view class="th cell-hour">开启时间(整点)</view>
<view class="th cell-duration">持续时间(整数小时)</view>
<view class="th cell-img">幻灯片</view>
<view class="th cell-sort">排序</view>
<view class="th cell-status">状态</view>
<view class="th cell-op">操作</view>
</view>
<view class="table-body">
<view v-for="item in configList" :key="item.id" class="table-row">
<view class="td cell-id">
<text class="td-txt">{{ item.id }}</text>
</view>
<view class="td cell-hour">
<text class="td-txt">{{ item.start_hour }}</text>
</view>
<view class="td cell-duration">
<text class="td-txt">{{ item.duration }}</text>
</view>
<view class="td cell-img">
<image v-if="item.image" class="thumb" :src="item.image" mode="aspectFill"></image>
<text v-else class="td-txt">-</text>
</view>
<view class="td cell-sort">
<text class="td-txt">{{ item.sort }}</text>
</view>
<view class="td cell-status">
<view class="switch-mock" :class="{ active: item.status }" @click="toggleStatus(item)">
<view class="switch-dot"></view>
<text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
</view>
</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>
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ configList.length }} 条</text>
</view>
<view class="page-select">
<view class="select-mock mini">
<text class="select-val">20条/页</text>
<text class="arrow">▼</text>
</view>
</view>
</view>
</view>
<!-- Drawer Overlay -->
<view v-if="showDrawer || isAnimating" class="drawer-mask" :class="{ active: showDrawer }" @click="closeDrawer"></view>
<!-- Drawer Panel -->
<view class="drawer-panel" :class="{ active: showDrawer }">
<view class="drawer-header">
<text class="drawer-title">添加数据</text>
<text class="drawer-close" @click="closeDrawer">×</text>
</view>
<view class="drawer-content">
<view class="form-item">
<text class="form-label required">开启时间(整点)：</text>
<input class="form-input" placeholder="请输入开启时间(整点)" />
</view>
<view class="form-item">
<text class="form-label required">持续时间(整数小时)：</text>
<input class="form-input" placeholder="请输入持续时间(整数小时)" />
</view>
<view class="form-item">
<text class="form-label">幻灯片：</text>
<view class="upload-mock" @click="handleUpload">
<image v-if="formData.image" :src="formData.image" mode="aspectFill" class="thumb" />
<text v-else class="upload-ic">🖼️</text>
</view>
</view>
<view class="form-item">
<text class="form-label">排序：</text>
<input class="form-input" type="number" v-model="formData.sort" placeholder="1" />
</view>
<view class="form-item">
<text class="form-label">状态：</text>
<view class="radio-group">
<view class="radio-item" @click="formData.status = true">
<view class="radio-circle" :class="{ active: formData.status }"></view>
<text class="radio-txt">显示</text>
</view>
<view class="radio-item" @click="formData.status = false">
<view class="radio-circle" :class="{ active: !formData.status }"></view>
<text class="radio-txt">隐藏</text>
</view>
</view>
</view>
</view>
<view class="drawer-footer">
<button class="btn-cancel" @click="closeDrawer">取消</button>
<button class="btn-confirm" @click="handleSubmit">确定</button>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
const currentPage = ref<string>('seckill-config')
const title = ref<string>('config')
const showDrawer = ref(false)
const isAnimating = ref(false)
const formData = ref({
id: 0,
start_hour: 0,
duration: 1,
image: '',
sort: 1,
status: true
})
const configList = ref([
{
id: 2268,
start_hour: 6,
duration: 18,
image: '',
sort: 1,
status: true
}
])
const toggleStatus = (item: any) => {
item.status = !item.status
uni.showToast({ title: '修改成功', icon: 'success' })
}
const handleEdit = (item: any) => {
formData.value = { ...item }
showDrawer.value = true
}
const handleDelete = (item: any) => {
uni.showModal({
title: '提示',
content: '确定要删除此项配置吗？',
success: (res) => {
if (res.confirm) {
configList.value = configList.value.filter(i => i.id !== item.id)
uni.showToast({ title: '删除成功' })
}
}
})
}
const handleUpload = () => {
uni.chooseImage({
count: 1,
success: (res) => {
formData.value.image = res.tempFilePaths[0]
}
})
}
const handleSubmit = () => {
uni.showToast({ title: '提交成功', icon: 'success' })
closeDrawer()
}
const closeDrawer = () => {
showDrawer.value = false
isAnimating.value = true
setTimeout(() => {
isAnimating.value = false
}, 300)
}
</script>
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.header { padding: $space-lg; border-radius: $radius; background: $background-primary; box-shadow: $shadow-xs; }
.title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $text-primary; }
.sub-title { margin-top: $space-xs; font-size: $font-size-md; color: $text-secondary; }
.marketing-seckill-config {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
position: relative;
overflow: hidden;
}
.border-shadow {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
/* 过滤栏 */
.filter-card {
padding: 24px;
margin-bottom: 16px;
}
.filter-row {
display: flex;
flex-direction: row;
align-items: center;
}
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
}
.label {
font-size: 14px;
color: #606266;
white-space: nowrap;
}
.select-mock {
width: 200px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
justify-content: space-between;
}
.select-mock.mini { width: 100px; height: 28px; }
.select-val { font-size: 13px; color: #606266; }
.arrow { font-size: 10px; color: #c0c4cc; }
/* 操作栏 */
.action-bar {
margin-bottom: 16px;
}
.btn-add {
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: 24px;
}
.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; }
/* 各列宽度 */
.cell-id { width: 80px; }
.cell-hour { width: 150px; text-align: center; }
.cell-duration { width: 150px; text-align: center; }
.cell-img { flex: 1; min-width: 150px; }
.cell-sort { width: 100px; text-align: center; }
.cell-status { width: 100px; text-align: center; }
.cell-op { width: 120px; text-align: right; }
.thumb {
width: 40px;
height: 40px;
border-radius: 4px;
}
.switch-mock {
width: 50px;
height: 24px;
background-color: #bfbfbf;
border-radius: 12px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 4px;
position: relative;
transition: background-color 0.3s;
}
.switch-mock.active { background-color: #1890ff; }
.switch-dot {
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 4px;
transition: left 0.3s;
}
.switch-mock.active .switch-dot { left: 30px; }
.switch-txt { font-size: 11px; color: #fff; margin-left: 20px; }
.switch-mock.active .switch-txt { margin-left: 4px; }
.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; }
/* 分页 */
.pagination-footer {
margin-top: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.total-txt { font-size: 13px; color: #606266; }
/* Drawer Styles */
.drawer-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.45);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.drawer-mask.active {
opacity: 1;
pointer-events: auto;
}
.drawer-panel {
position: fixed;
top: 0;
right: -50%;
width: 50%;
height: 100%;
background-color: #fff;
z-index: 1001;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
transition: right 0.3s ease-out;
}
.drawer-panel.active {
right: 0;
}
.drawer-header {
padding: 16px 24px;
border-bottom: 1px solid #f0f0f0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.drawer-title {
font-size: 16px;
font-weight: 600;
color: #262626;
}
.drawer-close {
font-size: 24px;
color: #bfbfbf;
cursor: pointer;
}
.drawer-content {
flex: 1;
padding: 24px;
overflow-y: auto;
}
.form-item {
margin-bottom: 24px;
}
.form-label {
display: block;
font-size: 14px;
color: #262626;
margin-bottom: 8px;
}
.required::before {
content: '*';
color: #ff4d4f;
margin-right: 4px;
}
.form-input {
width: 100%;
height: 32px;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 0 12px;
font-size: 14px;
}
.upload-mock {
width: 80px;
height: 80px;
border: 1px dashed #d9d9d9;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fafafa;
cursor: pointer;
}
.upload-ic { font-size: 24px; color: #bfbfbf; }
.radio-group {
display: flex;
flex-direction: row;
gap: 24px;
}
.radio-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
cursor: pointer;
}
.radio-circle {
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
border-radius: 50%;
position: relative;
}
.radio-circle.active {
border-color: #1890ff;
}
.radio-circle.active::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
background-color: #1890ff;
border-radius: 50%;
}
.radio-txt { font-size: 14px; color: #262626; }
.drawer-footer {
padding: 10px 16px;
border-top: 1px solid #f0f0f0;
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 8px;
}
.btn-cancel, .btn-confirm {
width: auto;
padding: 0 15px;
height: 32px;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}
.btn-cancel {
background-color: #fff;
border: 1px solid #d9d9d9;
color: #595959;
}
.btn-confirm {
background-color: #1890ff;
border: 1px solid #1890ff;
color: #fff;
}
</style>

27
pages/mall/admin/marketing/seckill/goods.uvue
View File

@@ -1,27 +0,0 @@
<template>
<AdminLayout :currentPage="currentPage">
<view class="page">
<view class="header">
<text class="title">{{ title }}</text>
<text class="sub-title">页面占位 (自动生成)</text>
</view>
</view>
</AdminLayout>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
const currentPage = ref<string>('seckill-goods')
const title = ref<string>('goods')
</script>
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.header { padding: $space-lg; border-radius: $radius; background: $background-primary; box-shadow: $shadow-xs; }
.title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $text-primary; }
.sub-title { margin-top: $space-xs; font-size: $font-size-md; color: $text-secondary; }
</style>

392
pages/mall/admin/marketing/seckill/list.uvue
View File

@@ -1,15 +1,119 @@
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">秒杀列表</text>
<text class="page-subtitle">Component: MarketingSeckill</text>
<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="page-content">
<view class="placeholder-card">
<text class="placeholder-title">页面占位</text>
<text class="placeholder-desc">该功能模块正在开发中</text>
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
<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">
<view class="switch-mock" :class="{ active: item.status }" @click="toggleStatus(item)">
<view class="switch-dot"></view>
<text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
</view>
</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>
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ seckillList.length }} 条</text>
</view>
<view class="page-select">
<view class="select-mock mini">
<text class="select-val">15条/页</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="page-btns">
<text class="p-btn disabled">‹</text>
<text class="p-btn active">1</text>
<text class="p-btn disabled">›</text>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">页</text>
</view>
</view>
</view>
</view>
@@ -18,70 +122,258 @@
<script setup lang="uts">
import { ref } from 'vue'
const pageTitle = ref<string>('秒杀列表')
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: '删除成功' })
}
}
})
}
</script>
<style scoped>
.page-container {
padding: 24px;
background-color: #f0f2f5;
<style scoped lang="scss">
.marketing-seckill-list {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
}
.page-header {
background-color: #ffffff;
.border-shadow {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.mt-16 { margin-top: 16px; }
/* 过滤栏 */
.filter-card {
padding: 24px;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.page-title {
display: block;
font-size: 20px;
font-weight: 600;
color: #262626;
margin-bottom: 8px;
.filter-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
.page-subtitle {
display: block;
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
}
.label {
font-size: 14px;
color: #8c8c8c;
color: #606266;
white-space: nowrap;
}
.page-content {
background-color: #ffffff;
.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: 16px;
}
.btn-add {
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: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.placeholder-card {
text-align: center;
padding: 48px 24px;
.table-head {
display: flex;
flex-direction: row;
background-color: #f8f8f9;
border-bottom: 1px solid #e8eaec;
}
.placeholder-title {
display: block;
font-size: 18px;
font-weight: 600;
color: #262626;
margin-bottom: 12px;
.th {
padding: 12px 8px;
font-size: 13px;
color: #515a6e;
font-weight: bold;
}
.placeholder-desc {
display: block;
font-size: 14px;
color: #8c8c8c;
margin-bottom: 8px;
.table-row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #e8eaec;
align-items: center;
}
.placeholder-info {
display: block;
font-size: 12px;
color: #bfbfbf;
.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; }
.switch-mock {
width: 50px;
height: 24px;
background-color: #bfbfbf;
border-radius: 12px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 4px;
position: relative;
transition: background-color 0.3s;
}
.switch-mock.active { background-color: #1890ff; }
.switch-dot {
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 4px;
transition: left 0.3s;
}
.switch-mock.active .switch-dot { left: 30px; }
.switch-txt { font-size: 11px; color: #fff; margin-left: 20px; }
.switch-mock.active .switch-txt { margin-left: 4px; }
.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; }
/* 分页 */
.pagination-footer {
margin-top: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.total-txt { font-size: 13px; color: #606266; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn {
width: 28px;
height: 28px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #606266;
}
.p-btn.active { background-color: #1890ff; border-color: #1890ff; color: #fff; }
.p-btn.disabled { color: #c0c4cc; cursor: not-allowed; }
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jump-txt { font-size: 13px; color: #606266; }
.jump-input { width: 40px; height: 28px; border: 1px solid #dcdfe6; border-radius: 4px; text-align: center; }
</style>

430
pages/mall/admin/marketing/seckill/product.uvue Normal file
View File

@@ -0,0 +1,430 @@
<template>
<view class="marketing-seckill-product">
<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>
<input class="input-mock" placeholder="请输入活动名称" />
</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-export">导出</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-img">商品图片</view>
<view class="th cell-title">商品标题</view>
<view class="th cell-intro">商品简介</view>
<view class="th cell-activity">活动名称</view>
<view class="th cell-price">售价</view>
<view class="th cell-price">秒杀价</view>
<view class="th cell-num">限量</view>
<view class="th cell-num">限量剩余</view>
<view class="th cell-status-txt">秒杀状态</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 productList" :key="item.id" class="table-row">
<view class="td cell-id">
<text class="td-txt">{{ item.id }}</text>
</view>
<view class="td cell-img">
<image class="thumb" :src="item.image" mode="aspectFill"></image>
</view>
<view class="td cell-title">
<text class="product-title line-clamp-2">{{ item.title }}</text>
</view>
<view class="td cell-intro">
<text class="product-title line-clamp-2">{{ item.intro }}</text>
</view>
<view class="td cell-activity">
<text class="td-txt">{{ item.activity_name }}</text>
</view>
<view class="td cell-price">
<text class="td-txt">{{ item.price.toFixed(2) }}</text>
</view>
<view class="td cell-price">
<text class="td-txt-price">{{ item.seckill_price.toFixed(2) }}</text>
</view>
<view class="td cell-num">
<text class="td-txt">{{ item.limit }}</text>
</view>
<view class="td cell-num">
<text class="td-txt">{{ item.limit_remaining }}</text>
</view>
<view class="td cell-status-txt">
<text class="status-text green">进行中</text>
</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">
<view class="switch-mock" :class="{ active: item.status }" @click="toggleStatus(item)">
<view class="switch-dot"></view>
<text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
</view>
</view>
<view class="td cell-op">
<view class="op-links">
<text class="op-link" @click="handleDelete(item)">删除</text>
<text class="op-split">|</text>
<text class="op-link" @click="handleStats(item)">统计</text>
</view>
</view>
</view>
</view>
</view>
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ productList.length }} 条</text>
</view>
<view class="page-select">
<view class="select-mock mini">
<text class="select-val">15条/页</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="page-btns">
<text class="p-btn disabled">‹</text>
<text class="p-btn active">1</text>
<text class="p-btn disabled">›</text>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">页</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const productList = ref([
{
id: 599,
image: 'https://img0.baidu.com/it/u=2257917711,1359654032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
title: '爱奇艺智能 奇遇LT01 投影仪 家用卧室超...',
intro: '爱奇艺智能 奇遇LT01 投影仪...',
activity_name: '秒杀活动',
price: 44.00,
seckill_price: 1.00,
limit: 100,
limit_remaining: 55,
status: true,
start_date: '2025-07-01 00:00:00',
end_date: '2028-08-22 23:59:59'
},
{
id: 598,
image: 'https://img1.baidu.com/it/u=3175865615,2002599723&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
title: '美式复古阔腿牛仔裤女夏季2024新款高...',
intro: '',
activity_name: '秒杀活动',
price: 49.98,
seckill_price: 20.00,
limit: 750,
limit_remaining: 736,
status: true,
start_date: '2025-07-01 00:00:00',
end_date: '2028-08-22 23:59:59'
},
{
id: 596,
image: 'https://img0.baidu.com/it/u=3023224345,1529124233&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
title: '真力时 (ZENITH) 瑞士手表DEFY系列C...',
intro: '真力时 (ZENITH) 瑞士手表...',
activity_name: '秒杀活动',
price: 61000.00,
seckill_price: 20.00,
limit: 50,
limit_remaining: 46,
status: true,
start_date: '2025-07-01 00:00:00',
end_date: '2028-08-22 23:59:59'
}
])
const toggleStatus = (item: any) => {
item.status = !item.status
uni.showToast({ title: '修改成功', icon: 'success' })
}
const handleDelete = (item: any) => {
uni.showModal({
title: '提示',
content: '确定要删除该秒杀商品吗？',
success: (res) => {
if (res.confirm) {
productList.value = productList.value.filter(i => i.id !== item.id)
uni.showToast({ title: '删除成功' })
}
}
})
}
const handleStats = (item: any) => {
uni.showToast({ title: '统计查看中', icon: 'none' })
}
</script>
<style scoped lang="scss">
.marketing-seckill-product {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
}
.border-shadow {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.mt-16 { margin-top: 16px; }
/* 过滤栏 */
.filter-card {
padding: 24px;
margin-bottom: 16px;
}
.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: 220px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
font-size: 13px;
}
.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;
}
/* 操作栏 */
.action-bar {
margin-bottom: 16px;
}
.btn-export {
width: auto;
padding: 0 16px;
height: 32px;
background-color: #fff;
color: #606266;
border: 1px solid #dcdfe6;
font-size: 14px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* 表格区域 */
.table-card {
padding: 24px;
}
.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-price { font-size: 13px; color: #ff4d4f; font-weight: bold; }
.td-txt-small { font-size: 12px; color: #808695; display: block; }
/* 各列宽度 */
.cell-id { width: 60px; }
.cell-img { width: 80px; }
.cell-title { width: 200px; }
.cell-intro { width: 180px; }
.cell-activity { width: 120px; }
.cell-price { width: 80px; text-align: center; }
.cell-num { width: 80px; text-align: center; }
.cell-status-txt { width: 100px; text-align: center; }
.cell-time { width: 220px; }
.cell-status { width: 100px; text-align: center; }
.cell-op { width: 120px; 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-text { font-size: 12px; }
.status-text.green { color: #52c41a; }
.switch-mock {
width: 50px;
height: 24px;
background-color: #bfbfbf;
border-radius: 12px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 4px;
position: relative;
transition: background-color 0.3s;
}
.switch-mock.active { background-color: #1890ff; }
.switch-dot {
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 4px;
transition: left 0.3s;
}
.switch-mock.active .switch-dot { left: 30px; }
.switch-txt { font-size: 11px; color: #fff; margin-left: 20px; }
.switch-mock.active .switch-txt { margin-left: 4px; }
.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; }
/* 分页 */
.pagination-footer {
margin-top: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.total-txt { font-size: 13px; color: #606266; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn {
width: 28px;
height: 28px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #606266;
}
.p-btn.active { background-color: #1890ff; border-color: #1890ff; color: #fff; }
.p-btn.disabled { color: #c0c4cc; cursor: not-allowed; }
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jump-txt { font-size: 13px; color: #606266; }
.jump-input { width: 40px; height: 28px; border: 1px solid #dcdfe6; border-radius: 4px; text-align: center; }
</style>