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-25 11:39:54 +08:00
parent 92d6e8144d
commit 8ec05b331b
131 changed files with 5273 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
pages/mall/admin/marketing/bargain/index.uvue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">砍价活动</text>
<text class="page-subtitle">Component: MarketingBargain</text>
</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>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
// TODO: 实现 砍价活动 的具体功能
const loading = ref<boolean>(false)
</script>
<style scoped lang="scss">
.page-container {
/* 使用 Layout 的背景和内边距 */
min-height: 100vh;
}
.page-header {
margin-bottom: 20px;
}
.page-title {
display: block;
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.page-subtitle {
display: block;
font-size: 14px;
color: #999;
}
.page-content {
background: #fff;
border-radius: 4px;
padding: 24px;
}
.placeholder-card {
text-align: center;
padding: 60px 20px;
}
.placeholder-title {
display: block;
font-size: 18px;
font-weight: 600;
color: #666;
margin-bottom: 12px;
}
.placeholder-desc {
display: block;
font-size: 14px;
color: #999;
margin-bottom: 8px;
}
.placeholder-info {
display: block;
font-size: 12px;
color: #1890ff;
}
</style>

4
pages/mall/admin/marketing/bargain/list.uvue
View File

@@ -25,7 +25,9 @@ const loading = ref<boolean>(false)
<style scoped lang="scss">
.page-container {
/* 使用 Layout 的背景和内边距 */
min-height: 100vh;
padding: 0;
background-color: transparent;
min-height: auto;
}
.page-header {

4
pages/mall/admin/marketing/checkin/config.uvue
View File

@@ -113,9 +113,7 @@ const handleSave = () => {
<style scoped lang="scss">
.marketing-checkin-config {
padding: 16px;
background: #f0f2f5;
min-height: 100vh;
padding: 0px;
}
.border-shadow {

6
pages/mall/admin/marketing/checkin/reward.uvue
View File

@@ -168,9 +168,9 @@ const handleSubmit = () => {
<style scoped lang="scss">
.marketing-checkin-reward {
padding: 16px;
background: #f0f2f5;
min-height: 100vh;
padding: 0;
background: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/combination/create.uvue
View File

@@ -204,9 +204,9 @@ const prevStep = () => {
<style scoped lang="scss">
.marketing-combination-create {
background-color: #f5f7fa;
min-height: 100vh;
padding: 20px;
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {

433
pages/mall/admin/marketing/combination/index.uvue Normal file
View File

@@ -0,0 +1,433 @@
<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>
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ combos.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">‹</text>
<text class="p-btn active">1</text>
<text class="p-btn">›</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, reactive } from 'vue'
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)
}
</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; }
/* 分页 */
.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; }
.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>

6
pages/mall/admin/marketing/combination/list.uvue
View File

@@ -232,9 +232,9 @@ const completeGroup = (item: any) => {
<style scoped lang="scss">
.marketing-combination-list {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/combination/product.uvue
View File

@@ -223,9 +223,9 @@ const toggleShow = (item: CombinationProduct) => {
<style scoped lang="scss">
.marketing-combination-product {
background-color: #f5f7fa;
min-height: 100vh;
padding: 20px;
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {

324
pages/mall/admin/marketing/coupon/index.uvue Normal file
View File

@@ -0,0 +1,324 @@
<template>
<view class="admin-marketing-coupon">
<view class="content-body">
<!-- 搜索过滤栏 -->
<view class="filter-card border-shadow">
<view class="filter-row">
<view class="filter-item item-w">
<text class="label-txt">优惠券名称:</text>
<view class="input-wrap">
<input class="search-input" placeholder="请输入优惠券名称" v-model="filter.name" />
<text class="count-txt">0/18</text>
</view>
</view>
<view class="filter-item item-w">
<text class="label-txt">优惠券类型:</text>
<view class="select-mock">
<text class="select-val">请选择</text>
<text class="arrow-down">▼</text>
</view>
</view>
<view class="filter-item item-w">
<text class="label-txt">是否有效:</text>
<view class="select-mock">
<text class="select-val">请选择</text>
<text class="arrow-down">▼</text>
</view>
</view>
</view>
<view class="filter-row mt-20">
<view class="filter-item item-w">
<text class="label-txt">发放方式:</text>
<view class="select-mock">
<text class="select-val">请选择</text>
<text class="arrow-down">▼</text>
</view>
</view>
<view class="btn-query" @click="handleQuery">
<text class="query-txt">查询</text>
</view>
</view>
</view>
<!-- 数据展示区域 -->
<view class="table-card border-shadow">
<view class="card-header">
<view class="btn-primary-blue" @click="handleAdd">
<text class="btn-txt">添加优惠券</text>
</view>
</view>
<!-- 表格主体 -->
<view class="table-container">
<view class="table-header-row">
<view class="th" style="width: 80px;">ID</view>
<view class="th" style="width: 180px;">优惠券名称</view>
<view class="th" style="width: 120px;">优惠券类型</view>
<view class="th" style="width: 100px;">面值</view>
<view class="th" style="width: 120px;">领取方式</view>
<view class="th" style="width: 150px;">领取日期</view>
<view class="th" style="width: 120px;">使用时间</view>
<view class="th" style="width: 120px;">发布数量</view>
<view class="th" style="width: 100px;">是否开启</view>
<view class="th" style="flex: 1; min-width: 220px;">操作</view>
</view>
<view class="table-body">
<view v-for="(item, index) in dataList" :key="item.id" class="table-row">
<view class="td" style="width: 80px;"><text class="td-txt">{{ item.id }}</text></view>
<view class="td" style="width: 180px;"><text class="td-txt name-bold">{{ item.name }}</text></view>
<view class="td" style="width: 120px;"><text class="td-txt">{{ item.type }}</text></view>
<view class="td" style="width: 100px;"><text class="td-txt price-txt">{{ item.value.toFixed(2) }}</text></view>
<view class="td" style="width: 120px;"><text class="td-txt">{{ item.receiveType }}</text></view>
<view class="td" style="width: 150px;">
<text v-if="item.id === 1628" class="td-txt date-small">2023-10-18 00:00 - 2025-11-05 00:00</text>
<text v-else class="td-txt">{{ item.receiveDate }}</text>
</view>
<view class="td" style="width: 120px;"><text class="td-txt">{{ item.useTime }}</text></view>
<view class="td" style="width: 120px;">
<view v-if="item.publishTotal > 0" class="pub-info">
<text class="pub-txt">发布: {{ item.publishTotal }}</text>
<text class="pub-txt danger">剩余: {{ item.publishRemain }}</text>
</view>
<text v-else class="td-txt">不限量</text>
</view>
<view class="td" style="width: 100px;">
<view :class="['switch-box', item.isOpen ? 'active' : '']" @click="toggleStatus(index)">
<view class="switch-dot"></view>
</view>
</view>
<view class="td" style="flex: 1; min-width: 220px;">
<view class="op-links">
<text class="op-link">领取记录</text>
<text class="op-split">|</text>
<text class="op-link">编辑</text>
<text class="op-split">|</text>
<text class="op-link">复制</text>
<text class="op-split">|</text>
<text class="op-link text-danger">删除</text>
</view>
</view>
</view>
</view>
</view>
<!-- 分页 -->
<view class="pagination-footer">
<text class="total-txt">共 16 条</text>
<view class="page-select">
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
<text class="p-btn active">1</text>
<text class="p-btn">2</text>
<text class="p-btn">></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>
</view>
</template>
<script setup lang="uts">
import { ref, reactive } from 'vue'
interface CouponItem {
id: number
name: string
type: string
value: number
receiveType: string
receiveDate: string
useTime: string
publishTotal: number
publishRemain: number
isOpen: boolean
}
const filter = reactive({
name: ''
})
const dataList = ref<CouponItem[]>([
{ id: 1643, name: '满100减30', type: '通用券', value: 30.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '10天', publishTotal: 0, publishRemain: 0, isOpen: false },
{ id: 1642, name: '满10减7', type: '通用券', value: 7.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '10天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1641, name: '会员优惠券', type: '通用券', value: 200.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '200天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1640, name: '会员优惠券', type: '通用券', value: 29.90, receiveType: '用户领取', receiveDate: '不限时', useTime: '200天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1639, name: '会员优惠券', type: '通用券', value: 1.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '200天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1638, name: '商品券', type: '商品券', value: 1.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '200天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1636, name: '测试多个商品消耗一个券', type: '商品券', value: 500.00, receiveType: '系统赠送', receiveDate: '不限时', useTime: '3天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1635, name: '优惠券', type: '通用券', value: 10.00, receiveType: '系统赠送', receiveDate: '不限时', useTime: '10天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1634, name: '限时优惠', type: '通用券', value: 20.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '5天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1633, name: '店庆券', type: '品类券', value: 100.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '10天', publishTotal: 0, publishRemain: 0, isOpen: true },
{ id: 1632, name: '优惠券', type: '品类券', value: 99.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '10天', publishTotal: 8999, publishRemain: 8604, isOpen: true },
{ id: 1628, name: '全场通用券', type: '通用券', value: 9.90, receiveType: '用户领取', receiveDate: 'RANGE', useTime: '不限时', publishTotal: 59999, publishRemain: 59331, isOpen: true }
])
const handleQuery = () => { console.log('Querying...') }
const handleAdd = () => { console.log('Adding coupon...') }
const toggleStatus = (index: number) => {
dataList.value[index].isOpen = !dataList.value[index].isOpen
}
</script>
<style scoped lang="scss">
.admin-marketing-coupon {
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.content-body {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 过滤栏 */
.filter-card { padding: 24px; }
.filter-row { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 24px; }
.mt-20 { margin-top: 20px; }
.filter-item { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.item-w { width: 320px; }
.label-txt { font-size: 14px; color: #606266; min-width: 80px; text-align: right; }
.input-wrap {
flex: 1;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 10px;
}
.search-input { flex: 1; height: 100%; font-size: 14px; }
.count-txt { font-size: 12px; color: #c0c4cc; }
.select-mock {
flex: 1;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 12px;
cursor: pointer;
}
.select-val { font-size: 14px; color: #c0c4cc; }
.arrow-down { font-size: 10px; color: #c0c4cc; }
.btn-query {
background-color: #2d8cf0;
padding: 0 20px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
}
.query-txt { color: #fff; font-size: 14px; }
/* 表格区域 */
.table-card { background-color: #fff; display: flex; flex-direction: column; }
.card-header { padding: 24px; }
.btn-primary-blue {
background-color: #2d8cf0;
padding: 8px 16px;
border-radius: 4px;
display: inline-flex;
cursor: pointer;
}
.btn-txt { color: #fff; font-size: 14px; }
.table-container { padding: 0 24px 24px; }
.table-header-row { display: flex; flex-direction: row; background-color: #f8f8f9; border-bottom: 1px solid #e8eaec; }
.th { padding: 12px 10px; font-size: 14px; color: #515a6e; font-weight: bold; }
.table-row { display: flex; flex-direction: row; border-bottom: 1px solid #e8eaec; border-left: 1px solid transparent; }
.table-row:hover { background-color: #ebf7ff; }
.td { padding: 12px 10px; display: flex; align-items: center; }
.td-txt { font-size: 14px; color: #515a6e; }
.name-bold { font-weight: 500; color: #333; }
.price-txt { color: #515a6e; }
.date-small { font-size: 12px; line-height: 1.4; color: #999; }
.pub-info { display: flex; flex-direction: column; }
.pub-txt { font-size: 12px; color: #2d8cf0; }
.pub-txt.danger { color: #ed4014; }
/* Switch 开关 */
.switch-box {
width: 44px;
height: 22px;
background-color: #dcdfe6;
border-radius: 11px;
position: relative;
transition: all 0.3s;
cursor: pointer;
}
.switch-box.active { background-color: #2d8cf0; }
.switch-dot {
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 9px;
position: absolute;
top: 2px;
left: 2px;
transition: all 0.3s;
}
.switch-box.active .switch-dot { transform: translateX(22px); }
.op-links { display: flex; flex-direction: row; align-items: center; }
.op-link { color: #2d8cf0; font-size: 14px; cursor: pointer; margin: 0 5px; }
.op-split { color: #e8eaec; margin: 0 5px; }
.text-danger { color: #ed4014; }
/* 分页 */
.pagination-footer {
padding: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
border-top: 1px solid #f0f0f0;
}
.total-txt { font-size: 14px; color: #606266; }
.page-val { font-size: 14px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn {
width: 32px; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px;
display: flex; align-items: center; justify-content: center; font-size: 14px; color: #666;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; }
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jump-txt { font-size: 14px; color: #606266; }
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
</style>

4
pages/mall/admin/marketing/coupon/list.uvue
View File

@@ -173,9 +173,7 @@ const toggleStatus = (index: number) => {
<style scoped lang="scss">
.admin-marketing-coupon {
background-color: #f0f2f5;
min-height: 100vh;
padding: 24px;
padding: 0px;
}
.border-shadow {

2
pages/mall/admin/marketing/coupon/receive.uvue
View File

@@ -29,7 +29,7 @@ onLoad((options) => {
<style>
.Page {
padding: 24rpx;
padding: 0;
}
.Header {
padding: 24rpx;

6
pages/mall/admin/marketing/coupon/user.uvue
View File

@@ -125,9 +125,9 @@ const handleQuery = () => { console.log('Querying redemption records...') }
<style scoped lang="scss">
.admin-marketing-coupon-user {
background-color: #f0f2f5;
min-height: 100vh;
padding: 24px;
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {

2
pages/mall/admin/marketing/groupbuy/goods.uvue
View File

@@ -18,7 +18,7 @@ const title = ref<string>('goods')
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.page { padding: 0; }
.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; }

27
pages/mall/admin/marketing/groupbuy/index.uvue Normal file
View File

@@ -0,0 +1,27 @@
<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>('groupbuy-list')
const title = ref<string>('list')
</script>
<stylang="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>

2
pages/mall/admin/marketing/index.uvue
View File

@@ -18,7 +18,7 @@ const title = ref<string>('营销看板')
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.page { padding: 0; }
.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; }

4
pages/mall/admin/marketing/integral/config.uvue
View File

@@ -125,9 +125,7 @@ const handleSubmit = () => {
<style scoped>
.admin-marketing-integral-config {
padding: 16px;
background-color: #f5f7f9;
min-height: 100vh;
padding: 0px;
}
.box-shadow {

398
pages/mall/admin/marketing/integral/index.uvue Normal file
View File

@@ -0,0 +1,398 @@
<template>
<view class="admin-marketing-integral-product">
<view class="content-body">
<!-- 搜索过滤栏 -->
<view class="filter-card border-shadow">
<view class="filter-row">
<view class="filter-item">
<text class="label-txt">创建时间:</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-txt">上架状态:</text>
<view class="select-mock">
<text class="select-val">请选择</text>
<text class="arrow-down">▼</text>
</view>
</view>
<view class="filter-item">
<text class="label-txt">商品搜索:</text>
<input class="search-input" placeholder="请输入商品名称, ID" v-model="searchQuery" />
</view>
<view class="btn-query" @click="handleSearch">
<text class="query-txt">查询</text>
</view>
</view>
</view>
<!-- 主要内容区域 -->
<view class="table-card border-shadow">
<view class="card-header">
<view class="btn-primary-blue" @click="handleAdd">
<text class="btn-txt">+ 添加积分商品</text>
</view>
</view>
<!-- 表格 -->
<view class="table-container">
<view class="table-header-row">
<view class="th th-id">ID</view>
<view class="th th-img">商品图片</view>
<view class="th th-title">活动标题</view>
<view class="th th-integral">兑换积分</view>
<view class="th th-limit">限量</view>
<view class="th th-remain">限量剩余</view>
<view class="th th-time">创建时间</view>
<view class="th th-sort">排序</view>
<view class="th th-status">状态</view>
<view class="th th-ops">操作</view>
</view>
<view class="table-body">
<view v-for="(item, index) in productList" :key="item.id" class="table-row">
<view class="td td-id"><text class="td-txt">{{ item.id }}</text></view>
<view class="td td-img">
<image class="product-thumb" :src="item.image" mode="aspectFill"></image>
</view>
<view class="td td-title">
<text class="title-txt line-clamp-2">{{ item.title }}</text>
</view>
<view class="td td-integral"><text class="td-txt">{{ item.integral }}</text></view>
<view class="td td-limit"><text class="td-txt">{{ item.limit }}</text></view>
<view class="td td-remain"><text class="td-txt">{{ item.remain }}</text></view>
<view class="td td-time"><text class="td-txt-small">{{ item.createTime }}</text></view>
<view class="td td-sort"><text class="td-txt">{{ item.sort }}</text></view>
<view class="td td-status">
<view :class="['switch-box', item.status ? 'active' : '']" @click="toggleStatus(index)">
<view class="switch-dot"></view>
</view>
</view>
<view class="td td-ops">
<view class="op-links">
<text class="op-link">兑换记录</text>
<text class="op-split">|</text>
<text class="op-link" @click="handleEdit(item)">编辑</text>
<text class="op-split">|</text>
<text class="op-link">复制</text>
<text class="op-split">|</text>
<text class="op-link text-danger">删除</text>
</view>
</view>
</view>
</view>
</view>
<!-- 分页 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn"><</text>
<text class="p-btn active">1</text>
<text class="p-btn">></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>
</view>
</template>
<script setup lang="uts">
import { ref, reactive } from 'vue'
interface ProductItem {
id: number
image: string
title: string
integral: number
limit: number
remain: number
createTime: string
sort: number
status: boolean
}
const searchQuery = ref('')
const total = ref(3)
const productList = ref<ProductItem[]>([
{
id: 48,
image: 'https://img14.360buyimg.com/n1/jfs/t1/172605/32/17036/114175/609a473eE6997455c/df82c6168e36712b.jpg',
title: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
integral: 0,
limit: 4,
remain: 0,
createTime: '2025-10-24 14:29:19',
sort: 9999,
status: true
},
{
id: 43,
image: 'https://img12.360buyimg.com/n1/jfs/t1/185449/19/11995/4379/60d96d27E6a877c8e/3c38d4e92a2a7a5a.jpg',
title: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇水蓝/传...',
integral: 100,
limit: 1,
remain: 0,
createTime: '2025-05-13 15:37:46',
sort: 9998,
status: true
},
{
id: 44,
image: 'https://img13.360buyimg.com/n1/jfs/t1/192173/5/11913/21447/60e57e95Ef82688f3/bc875f643e8c95a3.jpg',
title: '劳伦斯意式极简大平层设计师款直排真皮沙发简约客厅别墅大小户型',
integral: 6860,
limit: 1,
remain: 0,
createTime: '2025-05-13 15:38:02',
sort: 9996,
status: true
}
])
const handleSearch = () => { console.log('Searching...') }
const handleAdd = () => { console.log('Adding...') }
const handleEdit = (item: ProductItem) => { console.log('Editing...', item.id) }
const toggleStatus = (index: number) => {
productList.value[index].status = !productList.value[index].status
}
</script>
<style scoped lang="scss">
.admin-marketing-integral-product {
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.content-body {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 过滤栏 */
.filter-card {
padding: 24px;
}
.filter-row {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.label-txt { font-size: 14px; color: #606266; white-space: nowrap; }
.date-picker-mock {
width: 280px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
gap: 8px;
}
.calendar-ic { font-size: 14px; color: #c0c4cc; }
.date-placeholder { font-size: 13px; color: #c0c4cc; }
.select-mock {
width: 180px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 12px;
}
.select-val { font-size: 14px; color: #c0c4cc; }
.arrow-down { font-size: 10px; color: #c0c4cc; }
.search-input {
width: 220px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 12px;
font-size: 13px;
}
.btn-query {
background-color: #2d8cf0;
padding: 0 20px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
}
.query-txt { color: #fff; font-size: 14px; }
/* 表格卡片 */
.table-card {
background-color: #fff;
}
.card-header { padding: 20px; }
.btn-primary-blue {
background-color: #2d8cf0;
padding: 8px 16px;
border-radius: 4px;
display: inline-flex;
}
.btn-txt { color: #fff; font-size: 14px; }
.table-container { padding: 0 20px 20px; }
.table-header-row {
display: flex;
flex-direction: row;
background-color: #f8f8f9;
border-bottom: 1px solid #e8eaec;
}
.th {
padding: 12px 10px;
font-size: 14px;
color: #515a6e;
font-weight: bold;
display: flex;
align-items: center;
}
.table-row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #e8eaec;
align-items: center;
}
.td {
padding: 12px 10px;
display: flex;
align-items: center;
}
.td-txt { font-size: 14px; color: #515a6e; }
.td-txt-small { font-size: 13px; color: #515a6e; }
/* 列表各列宽度控制 */
.th-id, .td-id { width: 60px; }
.th-img, .td-img { width: 80px; }
.th-title, .td-title { flex: 1; min-width: 200px; }
.th-integral, .td-integral { width: 100px; }
.th-limit, .td-limit { width: 80px; }
.th-remain, .td-remain { width: 100px; }
.th-time, .td-time { width: 160px; }
.th-sort, .td-sort { width: 80px; }
.th-status, .td-status { width: 80px; }
.th-ops, .td-ops { width: 220px; justify-content: flex-end; }
.product-thumb {
width: 50px;
height: 50px;
border-radius: 4px;
background-color: #f5f5f5;
}
.title-txt { font-size: 13px; color: #333; line-height: 1.5; }
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* Switch 开关 */
.switch-box {
width: 44px;
height: 22px;
background-color: #dcdfe6;
border-radius: 11px;
position: relative;
transition: background-color 0.3s;
cursor: pointer;
}
.switch-box.active { background-color: #2d8cf0; }
.switch-dot {
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 9px;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s;
}
.switch-box.active .switch-dot { transform: translateX(22px); }
.op-links { display: flex; flex-direction: row; align-items: center; }
.op-link { color: #2d8cf0; font-size: 13px; cursor: pointer; margin: 0 5px; }
.op-split { color: #e8eaec; margin: 0 5px; }
.text-danger { color: #ed4014; }
/* 分页 */
.pagination-footer {
padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.total-txt { font-size: 13px; color: #606266; }
.page-val { font-size: 13px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn {
width: 32px;
height: 32px;
border: 1px solid #e8eaec;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #666;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jump-txt { font-size: 13px; color: #606266; }
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 13px; }
</style>

6
pages/mall/admin/marketing/integral/list.uvue
View File

@@ -173,9 +173,9 @@ const toggleStatus = (index: number) => {
<style scoped lang="scss">
.admin-marketing-integral-product {
background-color: #f0f2f5;
min-height: 100vh;
padding: 24px;
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/integral/order.uvue
View File

@@ -222,9 +222,9 @@ export default {
<style scoped>
.admin-marketing-integral-order {
padding: 16px;
background-color: #f5f7f9;
min-height: 100vh;
padding: 0;
background-color: transparent;
min-height: auto;
}
.box-shadow {

6
pages/mall/admin/marketing/integral/record.uvue
View File

@@ -143,9 +143,9 @@ export default {
<style scoped>
.admin-marketing-integral-record {
padding: 16px;
background-color: #f5f7f9;
min-height: 100vh;
padding: 0;
background-color: transparent;
min-height: auto;
}
.box-shadow {

6
pages/mall/admin/marketing/integral/statistic.uvue
View File

@@ -190,9 +190,9 @@ const toggleConsumeStyle = () => {
<style scoped lang="scss">
.admin-marketing-integral-statistic {
background-color: #f0f2f5;
min-height: 100vh;
padding: 24px;
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/live/anchor.uvue
View File

@@ -147,9 +147,9 @@ const handleSubmit = () => {
<style scoped lang="scss">
.marketing-live-anchor {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
min-height: auto;
background: transparent;
padding: 0;
}
.border-shadow {

741
pages/mall/admin/marketing/live/index.uvue Normal file
View File

@@ -0,0 +1,741 @@
<template>
<view class="marketing-live-room">
<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 class="filter-item ml-24">
<text class="label">搜索：</text>
<input class="input-mock" placeholder="请输入直播间名称/ID/主播昵称/微信号" />
</view>
<button class="btn-query ml-16">查询</button>
</view>
</view>
<view class="action-bar">
<button class="btn-add" @click="showDrawer = true">添加直播间</button>
<button class="btn-sync ml-16">同步直播间</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-name">直播间名称</view>
<view class="th cell-nick">主播昵称</view>
<view class="th cell-wechat">主播微信号</view>
<view class="th cell-time">直播开始时间</view>
<view class="th cell-time">计划结束时间</view>
<view class="th cell-time">创建时间</view>
<view class="th cell-status">显示状态</view>
<view class="th cell-live-status">直播状态</view>
<view class="th cell-sort">排序</view>
<view class="th cell-op">操作</view>
</view>
<view class="table-body">
<view v-for="item in roomList" :key="item.id" class="table-row">
<view class="td cell-id"><text class="td-txt">{{ item.id }}</text></view>
<view class="td cell-name"><text class="td-txt">{{ item.name }}</text></view>
<view class="td cell-nick"><text class="td-txt">{{ item.anchor_nick }}</text></view>
<view class="td cell-wechat"><text class="td-txt">{{ item.anchor_wechat }}</text></view>
<view class="td cell-time"><text class="td-txt-small">{{ item.start_time }}</text></view>
<view class="td cell-time"><text class="td-txt-small">{{ item.end_time }}</text></view>
<view class="td cell-time"><text class="td-txt-small">{{ item.create_time }}</text></view>
<view class="td cell-status">
<view class="switch-mock" :class="{ active: item.is_show }" @click="toggleStatus(item)">
<view class="switch-dot"></view>
<text class="switch-txt">{{ item.is_show ? '开启' : '关闭' }}</text>
</view>
</view>
<view class="td cell-live-status"><text class="td-txt">{{ item.live_status }}</text></view>
<view class="td cell-sort"><text class="td-txt">{{ item.sort }}</text></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">共 {{ roomList.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 class="page-btns">
<text class="p-btn disabled">‹</text>
<text class="p-btn active">1</text>
<text class="p-btn disabled">›</text>
</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">
<view class="header-left">
<text class="back-btn" @click="closeDrawer">‹ 返回</text>
<text class="drawer-title">直播间管理</text>
</view>
</view>
<view class="drawer-content">
<view class="alert-info">
<text class="alert-txt">提示：必须前往微信小程序官方后台开通直播权限，关注【小程序直播】获知直播状态</text>
</view>
<view class="form-item">
<view class="form-label required">选择主播：</view>
<view class="select-mock full" @click="handleSelectAnchor">
<text class="select-val">{{ formData.anchor_nick || '请选择' }}</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="form-item">
<view class="form-label required">直播间名称：</view>
<view class="input-wrap">
<input class="form-input" v-model="formData.name" placeholder="请输入直播间名称" />
<text class="char-count">{{ formData.name.length }}/80</text>
</view>
</view>
<view class="form-item">
<view class="form-label required">背景图：</view>
<view class="upload-box" @click="handleUpload('background')">
<view class="upload-placeholder" v-if="!formData.background">
<text class="up-ic">🖼️</text>
</view>
<image v-else :src="formData.background" class="upload-preview" mode="aspectFill" />
<text class="up-tip blue-bg">尺寸：1080*1920px</text>
</view>
</view>
<view class="form-item">
<view class="form-label required">分享图：</view>
<view class="upload-box" @click="handleUpload('share')">
<view class="upload-placeholder" v-if="!formData.share_img">
<text class="up-ic">🖼️</text>
</view>
<image v-else :src="formData.share_img" class="upload-preview" mode="aspectFill" />
<text class="up-tip">尺寸：800*640px</text>
</view>
</view>
<view class="form-item">
<view class="form-label">联系电话：</view>
<view class="input-wrap">
<input class="form-input" v-model="formData.phone" placeholder="请输入主播联系电话" />
<text class="char-count">{{ formData.phone.length }}/11</text>
</view>
</view>
<view class="form-item">
<view class="form-label required">直播时间：</view>
<view class="date-range-mock" @click="handleOpenDatePicker">
<text class="calendar-ic">📅</text>
<text class="date-val">{{ formData.start_time || '开始日期' }} - {{ formData.end_time || '结束日期' }}</text>
</view>
</view>
<view class="form-item">
<view class="form-label">排序：</view>
<input class="form-input w-extra-small" type="number" v-model="formData.sort" />
</view>
<view class="form-item">
<view class="form-label">直播间类型：</view>
<view class="radio-group">
<view class="radio-item" @click="formData.type = 'phone'">
<view class="radio-circle" :class="{ active: formData.type === 'phone' }"></view>
<text class="radio-txt">手机直播</text>
</view>
</view>
</view>
<view class="form-item flex-row">
<view class="form-label">直播间点赞：</view>
<view class="switch-mock" :class="{ active: formData.like_enabled }" @click="formData.like_enabled = !formData.like_enabled">
<view class="switch-dot"></view>
<text class="switch-txt">{{ formData.like_enabled ? '开启' : '关闭' }}</text>
</view>
</view>
<view class="form-item flex-row">
<view class="form-label">直播卖货：</view>
<view class="switch-mock" :class="{ active: formData.sale_enabled }" @click="formData.sale_enabled = !formData.sale_enabled">
<view class="switch-dot"></view>
<text class="switch-txt">{{ formData.sale_enabled ? '开启' : '关闭' }}</text>
</view>
</view>
<view class="form-item flex-row">
<view class="form-label">直播间评论：</view>
<view class="switch-mock" :class="{ active: formData.comment_enabled }" @click="formData.comment_enabled = !formData.comment_enabled">
<view class="switch-dot"></view>
<text class="switch-txt">{{ formData.comment_enabled ? '开启' : '关闭' }}</text>
</view>
</view>
<view class="form-actions-bottom">
<button class="btn-submit" @click="handleSubmit">提交</button>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const showDrawer = ref(false)
const isAnimating = ref(false)
const formData = ref({
anchor_nick: '',
name: '',
background: '',
share_img: '',
phone: '',
start_time: '',
end_time: '',
sort: 0,
type: 'phone',
like_enabled: true,
sale_enabled: true,
comment_enabled: true
})
const roomList = ref([
{
id: 88,
name: 'CRMEB 年中618活动开始',
anchor_nick: '打羽毛球',
anchor_wechat: 'evoxwht',
start_time: '2025-06-17 00:00:00',
end_time: '2025-06-18 00:00:00',
create_time: '2025-06-16 14:56:53',
is_show: true,
live_status: '已结束',
sort: 1
},
{
id: 90,
name: '123456789',
anchor_nick: '万万',
anchor_wechat: 'xiao112032014',
start_time: '2025-07-07 10:20:00',
end_time: '2025-07-07 12:00:00',
create_time: '2025-07-07 10:05:43',
is_show: true,
live_status: '已结束',
sort: 0
},
{
id: 89,
name: '测试1111111',
anchor_nick: '打羽毛球',
anchor_wechat: '',
start_time: '2025-05-20 14:50:00',
end_time: '2025-05-20 15:22:00',
create_time: '2025-06-17 10:03:08',
is_show: true,
live_status: '已结束',
sort: 0
},
{
id: 10,
name: '开学季，最后一天',
anchor_nick: '等风来',
anchor_wechat: 'welalnidaobel',
start_time: '2021-09-01 19:00:00',
end_time: '2021-09-01 20:00:00',
create_time: '2021-08-30 11:53:01',
is_show: false,
live_status: '已结束',
sort: 0
}
])
const toggleStatus = (item: any) => {
item.is_show = !item.is_show
uni.showToast({ title: '状态修改成功', icon: 'success' })
}
const handleEdit = (item: any) => {
formData.value = { ...item, like_enabled: true, sale_enabled: true, comment_enabled: true }
showDrawer.value = true
}
const handleDelete = (item: any) => {
uni.showModal({
title: '提示',
content: '确定要删除该直播间吗？',
success: (res) => {
if (res.confirm) {
roomList.value = roomList.value.filter(i => i.id !== item.id)
uni.showToast({ title: '删除成功' })
}
}
})
}
const handleSelectAnchor = () => {
uni.showToast({ title: '功能开发中', icon: 'none' })
}
const handleUpload = (type: string) => {
uni.chooseImage({
count: 1,
success: (res) => {
if (type === 'background') {
formData.value.background = res.tempFilePaths[0]
} else {
formData.value.share_img = res.tempFilePaths[0]
}
}
})
}
const handleOpenDatePicker = () => {
uni.showToast({ title: '日期选择功能开发中', icon: 'none' })
}
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">
.marketing-live-room {
min-height: auto;
}
.border-shadow {
background: #fff;
border-radius: 4px;
}
.ml-16 { margin-left: 16px; }
.ml-24 { margin-left: 24px; }
.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;
}
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
}
.label {
font-size: 14px;
color: #606266;
white-space: nowrap;
}
.input-mock, .select-mock {
width: 200px;
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: 300px; }
.select-mock { width: 160px; justify-content: space-between; }
.select-mock.mini { width: 100px; height: 28px; }
.select-mock.full { width: 100%; }
.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;
display: flex;
flex-direction: row;
}
.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;
}
.btn-sync {
width: auto;
padding: 0 16px;
height: 32px;
background-color: #fff;
color: #1890ff;
border: 1px solid #1890ff;
font-size: 14px;
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: 70px; }
.cell-name { flex: 1; min-width: 150px; }
.cell-nick { width: 120px; }
.cell-wechat { width: 120px; }
.cell-time { width: 150px; }
.cell-status { width: 100px; text-align: center; }
.cell-live-status { width: 100px; text-align: center; }
.cell-sort { width: 60px; text-align: center; }
.cell-op { width: 120px; text-align: right; }
.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;
}
.header-left {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
.back-btn {
font-size: 14px;
color: #8c8c8c;
cursor: pointer;
}
.drawer-title {
font-size: 16px;
font-weight: 600;
color: #262626;
}
.drawer-content {
flex: 1;
padding: 24px;
overflow-y: auto;
}
.alert-info {
background-color: #fff7e6;
border: 1px solid #ffe7ba;
padding: 12px 16px;
margin-bottom: 24px;
border-radius: 4px;
}
.alert-txt {
font-size: 13px;
color: #fa8c16;
}
.form-item {
margin-bottom: 24px;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.form-label {
display: block;
font-size: 14px;
color: #262626;
margin-bottom: 8px;
width: 120px;
}
.flex-row .form-label { margin-bottom: 0; }
.required::before {
content: '*';
color: #ff4d4f;
margin-right: 4px;
}
.input-wrap {
position: relative;
width: 100%;
}
.form-input {
width: 100%;
height: 32px;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 0 40px 0 12px;
font-size: 14px;
}
.w-extra-small { width: 80px; }
.char-count {
position: absolute;
right: 12px;
top: 6px;
font-size: 12px;
color: #bfbfbf;
}
.upload-box {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 12px;
}
.upload-placeholder {
width: 80px;
height: 80px;
border: 1px dashed #d9d9d9;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fafafa;
}
.up-ic { font-size: 24px; color: #bfbfbf; }
.up-tip {
font-size: 12px;
color: #1890ff;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
padding: 2px 8px;
border-radius: 2px;
}
.up-tip.blue-bg {
background-color: #1890ff;
color: #fff;
border: none;
}
.date-range-mock {
width: 100%;
height: 32px;
border: 1px solid #d9d9d9;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
gap: 8px;
}
.calendar-ic { font-size: 14px; color: #bfbfbf; }
.date-val { font-size: 14px; color: #bfbfbf; }
.radio-group {
display: flex;
flex-direction: row;
gap: 24px;
}
.radio-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.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; }
.form-actions-bottom {
margin-top: 40px;
}
.btn-submit {
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;
}
</style>

6
pages/mall/admin/marketing/live/product.uvue
View File

@@ -200,9 +200,9 @@ const handleGenerate = () => {
<style scoped lang="scss">
.marketing-live-product {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
min-height: auto;
background: transparent;
padding: 0;
}
.border-shadow {

6
pages/mall/admin/marketing/lottery/config.uvue
View File

@@ -111,9 +111,9 @@ const handleSave = () => {
<style scoped>
.admin-marketing-lottery-config {
padding: 16px;
background-color: #f5f7f9;
min-height: 100vh;
padding: 0;
background-color: transparent;
min-height: auto;
}
.box-shadow {

6
pages/mall/admin/marketing/lottery/list.uvue
View File

@@ -215,9 +215,9 @@ export default {
<style scoped>
.admin-marketing-lottery-list {
padding: 16px;
background-color: #f5f7f9;
min-height: 100vh;
padding: 0;
background-color: transparent;
min-height: auto;
}
.box-shadow {

28
pages/mall/admin/marketing/marketing-statistics/index.uvue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<view class="admin-page-container">
<text class="placeholder-title">Marketing Statistics</text>
<view class="chart-box">
<EChartsView :option="chartOption" class="chart-view" />
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import EChartsView from '@/uni_modules/charts/EChartsView.uvue'
const chartOption = ref({
title: { text: 'Marketing Statistics Demo' },
tooltip: {},
xAxis: { data: ['A', 'B', 'C', 'D'] },
yAxis: {},
series: [{ type: 'bar', data: [5, 20, 36, 10] }]
})
</script>
<style scoped>
.admin-page-container { padding: 20px; }
.placeholder-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; }
.chart-box { height: 300px; background: #fff; border: 1px solid #eee; }
.chart-view { width: 100%; height: 100%; }
</style>

6
pages/mall/admin/marketing/member/record.uvue
View File

@@ -65,9 +65,9 @@ const records = ref([
<style scoped lang="scss">
.marketing-member-record {
padding: 16px;
background: #f0f2f5;
min-height: 100vh;
padding: 0;
background: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/member/right.uvue
View File

@@ -58,9 +58,9 @@ const handleEdit = (item: any) => {
<style scoped lang="scss">
.marketing-member-right {
padding: 16px;
background: #f0f2f5;
min-height: 100vh;
padding: 0;
background: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/member/type.uvue
View File

@@ -60,9 +60,9 @@ const handleEdit = (item: any) => {
<style scoped lang="scss">
.marketing-member-type {
padding: 16px;
background: #f0f2f5;
min-height: 100vh;
padding: 0;
background: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/newcomer/index.uvue
View File

@@ -193,9 +193,9 @@ function handleSubmit() {
<style scoped lang="scss">
.admin-main {
padding: 24px;
background-color: #f0f2f5;
min-height: 100vh;
padding: 0;
background-color: transparent;
min-height: auto;
}
.card-container {

2
pages/mall/admin/marketing/points/config.uvue
View File

@@ -18,7 +18,7 @@ const title = ref<string>('config')
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.page { padding: 0; }
.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; }

2
pages/mall/admin/marketing/points/goods.uvue
View File

@@ -18,7 +18,7 @@ const title = ref<string>('goods')
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.page { padding: 0; }
.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; }

2
pages/mall/admin/marketing/points/index.uvue
View File

@@ -59,7 +59,7 @@ const currentPage = computed(() => {
<style>
.Page {
padding: 24rpx;
padding: 0;
}
.Header {
padding: 24rpx;

2
pages/mall/admin/marketing/points/record.uvue
View File

@@ -18,7 +18,7 @@ const title = ref<string>('record')
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.page { padding: 0; }
.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; }

2
pages/mall/admin/marketing/points/stats.uvue
View File

@@ -18,7 +18,7 @@ const title = ref<string>('积分统计')
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.page { padding: 0; }
.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; }

6
pages/mall/admin/marketing/recharge/config.uvue
View File

@@ -89,9 +89,9 @@ const handleSave = () => {
<style scoped lang="scss">
.marketing-recharge-config {
padding: 16px;
background: #f0f2f5;
min-height: 100vh;
padding: 0;
background: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/recharge/quota.uvue
View File

@@ -193,9 +193,9 @@ const handleSubmit = () => {
<style scoped lang="scss">
.marketing-recharge-quota {
padding: 16px;
background: #f0f2f5;
min-height: 100vh;
padding: 0;
background: transparent;
min-height: auto;
}
.content-layout {

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

@@ -201,9 +201,9 @@ const closeDrawer = () => {
<style scoped lang="scss">
.marketing-seckill-config {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
min-height: auto;
background: transparent;
padding: 0;
position: relative;
overflow: hidden;
}

377
pages/mall/admin/marketing/seckill/index.uvue Normal file
View File

@@ -0,0 +1,377 @@
<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">
<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>
</template>
<script setup lang="uts">
import { ref } from 'vue'
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 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; }
.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>

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

@@ -165,9 +165,9 @@ const handleDelete = (item: any) => {
<style scoped lang="scss">
.marketing-seckill-list {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {

6
pages/mall/admin/marketing/seckill/product.uvue
View File

@@ -203,9 +203,9 @@ const handleStats = (item: any) => {
<style scoped lang="scss">
.marketing-seckill-product {
min-height: 100vh;
background: #f0f2f5;
padding: 16px;
min-height: auto;
background: transparent;
padding: 0;
}
.border-shadow {