325 lines
13 KiB
Plaintext
325 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>
|
|
|
|
<!-- 分页 -->
|
|
<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>
|
|
|