334 lines
13 KiB
Plaintext
334 lines
13 KiB
Plaintext
<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>
|
|
|
|
<!-- 分页 -->
|
|
<CommonPagination
|
|
v-if="total > 0"
|
|
:total="total"
|
|
:loading="false"
|
|
:currentPage="currentPage"
|
|
:pageSize="pageSize"
|
|
:pageSizeOptionLabels="pageSizeOptionLabels"
|
|
:pageSizeIndex="pageSizeIndex"
|
|
:visiblePages="visiblePages"
|
|
:totalPage="totalPage"
|
|
:jumpPageInput="jumpPageInput"
|
|
@page-size-change="handlePageSizeChange"
|
|
@page-change="handlePageChange"
|
|
@update:jumpPageInput="(val : string) => { jumpPageInput = val }"
|
|
@jump-page="handleJumpPage"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, reactive, computed } from 'vue'
|
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
|
|
|
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
|
|
}
|
|
|
|
// 分页适配状态
|
|
const total = ref(16)
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(15)
|
|
let jumpPageInput = ''
|
|
const pageSizeOptions = [10, 15, 20, 30, 50]
|
|
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
|
|
const pageSizeIndex = computed(() => {
|
|
const idx = pageSizeOptions.indexOf(pageSize.value)
|
|
return idx >= 0 ? idx : 0
|
|
})
|
|
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
|
const visiblePages = computed(() => {
|
|
const t = totalPage.value
|
|
const cur = currentPage.value
|
|
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
|
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
|
|
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
|
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
|
})
|
|
const handlePageChange = (p: number) => { currentPage.value = p }
|
|
const handlePageSizeChange = (e: any) => {
|
|
const idx = Number(e.detail.value)
|
|
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
|
|
currentPage.value = 1
|
|
}
|
|
const handleJumpPage = () => {
|
|
const p = parseInt(jumpPageInput)
|
|
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.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; }
|
|
|
|
/* 分页区域已迁至 CommonPagination 组件 */
|
|
</style>
|
|
|