首页细节调整
This commit is contained in:
@@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<template>
|
||||
<view class="admin-marketing-lottery-list">
|
||||
<!-- 绛涢€夊尯鍩?-->
|
||||
<!-- 筛选区域 -->
|
||||
<view class="filter-card box-shadow">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">娲诲姩鏃堕棿锛?/text>
|
||||
<text class="label">活动时间:</text>
|
||||
<view class="date-range-mock">
|
||||
<text class="date-text">寮€濮嬫棩鏈?- 缁撴潫鏃ユ湡</text>
|
||||
<text class="date-text">开始日期 - 结束日期</text>
|
||||
<text class="iconfont icon-calendar"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label">娲诲姩鐘舵€侊細</text>
|
||||
<text class="label">活动状态:</text>
|
||||
<picker :range="statusOptions" range-key="label" @change="statusChange">
|
||||
<view class="picker-value">{{ getStatusLabel(currentStatus) }} <text class="iconfont icon-arrow-down"></text></view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label">娲诲姩绫诲瀷锛?/text>
|
||||
<text class="label">活动类型:</text>
|
||||
<picker :range="typeOptions" range-key="label" @change="typeChange">
|
||||
<view class="picker-value">{{ getTypeLabel(currentType) }} <text class="iconfont icon-arrow-down"></text></view>
|
||||
</picker>
|
||||
@@ -25,34 +25,34 @@
|
||||
</view>
|
||||
<view class="filter-row second-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">鎼滅储鎶藉锛?/text>
|
||||
<input class="admin-input" placeholder="璇疯緭鍏ユ椿鍔ㄥ悕绉? v-model="searchQuery" style="width: 200px;" />
|
||||
<text class="label">搜索抽奖:</text>
|
||||
<input class="admin-input" placeholder="请输入活动名称" v-model="searchQuery" style="width: 200px;" />
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<button class="admin-btn admin-btn-primary search-btn" @click="handleSearch">鎼滅储</button>
|
||||
<button class="admin-btn admin-btn-primary search-btn" @click="handleSearch">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 鎿嶄綔宸ュ叿鏍?-->
|
||||
<!-- 操作工具栏 -->
|
||||
<view class="table-toolbar">
|
||||
<button class="admin-btn admin-btn-primary">鍒涘缓鎶藉娲诲姩</button>
|
||||
<button class="admin-btn admin-btn-primary">创建抽奖活动</button>
|
||||
</view>
|
||||
|
||||
<!-- 琛ㄦ牸鍖哄煙 -->
|
||||
<!-- 表格区域 -->
|
||||
<view class="table-card box-shadow">
|
||||
<view class="table-header">
|
||||
<text class="col-60 center">ID</text>
|
||||
<text class="col-120">娲诲姩鍚嶇О</text>
|
||||
<text class="col-100">娲诲姩绫诲瀷</text>
|
||||
<text class="col-80 center">鎶藉浜烘暟</text>
|
||||
<text class="col-80 center">涓浜烘暟</text>
|
||||
<text class="col-80 center">鎶藉娆℃暟</text>
|
||||
<text class="col-80 center">涓娆℃暟</text>
|
||||
<text class="col-80 center">娲诲姩鐘舵€?/text>
|
||||
<text class="col-80 center">寮€鍚姸鎬?/text>
|
||||
<text class="col-180">娲诲姩鏃堕棿</text>
|
||||
<text class="col-120 center">鎿嶄綔</text>
|
||||
<text class="col-120">活动名称</text>
|
||||
<text class="col-100">活动类型</text>
|
||||
<text class="col-80 center">抽奖人数</text>
|
||||
<text class="col-80 center">中奖人数</text>
|
||||
<text class="col-80 center">抽奖次数</text>
|
||||
<text class="col-80 center">中奖次数</text>
|
||||
<text class="col-80 center">活动状态</text>
|
||||
<text class="col-80 center">开启状态</text>
|
||||
<text class="col-180">活动时间</text>
|
||||
<text class="col-120 center">操作</text>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
@@ -74,31 +74,31 @@
|
||||
</view>
|
||||
<view class="col-180">
|
||||
<view class="time-range">
|
||||
<text class="time-label">寮€濮? {{ item.startTime }}</text>
|
||||
<text class="time-label">缁撴潫: {{ item.endTime }}</text>
|
||||
<text class="time-label">开始: {{ item.startTime }}</text>
|
||||
<text class="time-label">结束: {{ item.endTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="col-120 center ops-cell">
|
||||
<text class="op-link">缂栬緫</text>
|
||||
<text class="op-link">鎶藉璁板綍</text>
|
||||
<text class="op-link">鏇村 <text class="iconfont icon-arrow-down" style="font-size: 10px;"></text></text>
|
||||
<text class="op-link">编辑</text>
|
||||
<text class="op-link">抽奖记录</text>
|
||||
<text class="op-link">更多 <text class="iconfont icon-arrow-down" style="font-size: 10px;"></text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 鍒嗛〉鍖哄煙 -->
|
||||
<!-- 分页区域 -->
|
||||
<view class="table-pagination">
|
||||
<text class="total-text">鍏?{{ total }} 鏉?/text>
|
||||
<text class="total-text">共 {{ total }} 条</text>
|
||||
<view class="page-ops">
|
||||
<picker :range="pageSizes" @change="pageSizeChange">
|
||||
<view class="size-picker">{{ currentSize }}鏉?椤?<text class="iconfont icon-arrow-down"></text></view>
|
||||
<view class="size-picker">{{ currentSize }}条/页 <text class="iconfont icon-arrow-down"></text></view>
|
||||
</picker>
|
||||
<button class="page-btn" disabled>涓婁竴椤?/button>
|
||||
<button class="page-btn" disabled>上一页</button>
|
||||
<text class="current-page">1</text>
|
||||
<button class="page-btn" disabled>涓嬩竴椤?/button>
|
||||
<text class="jump-text">鍓嶅線</text>
|
||||
<button class="page-btn" disabled>下一页</button>
|
||||
<text class="jump-text">前往</text>
|
||||
<input class="jump-input" value="1" />
|
||||
<text class="jump-text">椤?/text>
|
||||
<text class="jump-text">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -114,68 +114,68 @@ export default {
|
||||
currentType: 0,
|
||||
total: 4,
|
||||
currentSize: 15,
|
||||
pageSizes: ['15鏉?椤?, '30鏉?椤?, '50鏉?椤?],
|
||||
pageSizes: ['15条/页', '30条/页', '50条/页'],
|
||||
statusOptions: [
|
||||
{ label: '鍏ㄩ儴', value: 0 },
|
||||
{ label: '鏈紑濮?, value: 1 },
|
||||
{ label: '杩涜涓?, value: 2 },
|
||||
{ label: '宸茬粨鏉?, value: 3 }
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '未开始', value: 1 },
|
||||
{ label: '进行中', value: 2 },
|
||||
{ label: '已结束', value: 3 }
|
||||
] as any[],
|
||||
typeOptions: [
|
||||
{ label: '鍏ㄩ儴', value: 0 },
|
||||
{ label: '绉垎鎶藉', value: 1 },
|
||||
{ label: '璁㈠崟璇勪环', value: 2 },
|
||||
{ label: '璁㈠崟鏀粯', value: 3 }
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '积分抽奖', value: 1 },
|
||||
{ label: '订单评价', value: 2 },
|
||||
{ label: '订单支付', value: 3 }
|
||||
] as any[],
|
||||
tableData: [
|
||||
{
|
||||
id: 87,
|
||||
name: '绉垎鎶藉',
|
||||
typeName: '绉垎鎶藉彇',
|
||||
name: '积分抽奖',
|
||||
typeName: '积分抽取',
|
||||
memberCount: 166,
|
||||
winningMemberCount: 0,
|
||||
lotteryTimes: 329,
|
||||
winningTimes: 0,
|
||||
statusText: '宸茬粨鏉?,
|
||||
statusText: '已结束',
|
||||
isOpen: true,
|
||||
startTime: '2025-12-04 00:00:00',
|
||||
endTime: '2026-01-31 23:59:59'
|
||||
},
|
||||
{
|
||||
id: 86,
|
||||
name: '璇勪环鎶藉',
|
||||
typeName: '璁㈠崟璇勪环',
|
||||
name: '评价抽奖',
|
||||
typeName: '订单评价',
|
||||
memberCount: 3,
|
||||
winningMemberCount: 3,
|
||||
lotteryTimes: 4,
|
||||
winningTimes: 3,
|
||||
statusText: '宸茬粨鏉?,
|
||||
statusText: '已结束',
|
||||
isOpen: true,
|
||||
startTime: '2023-12-12 00:00:00',
|
||||
endTime: '2024-01-16 23:59:59'
|
||||
},
|
||||
{
|
||||
id: 82,
|
||||
name: '璁㈠崟鎶藉',
|
||||
typeName: '璁㈠崟鏀粯',
|
||||
name: '订单抽奖',
|
||||
typeName: '订单支付',
|
||||
memberCount: 100,
|
||||
winningMemberCount: 5,
|
||||
lotteryTimes: 124,
|
||||
winningTimes: 6,
|
||||
statusText: '宸茬粨鏉?,
|
||||
statusText: '已结束',
|
||||
isOpen: true,
|
||||
startTime: '2023-08-16 00:00:00',
|
||||
endTime: '2024-01-31 23:59:59'
|
||||
},
|
||||
{
|
||||
id: 75,
|
||||
name: '绉垎',
|
||||
typeName: '绉垎鎶藉彇',
|
||||
name: '积分',
|
||||
typeName: '积分抽取',
|
||||
memberCount: 1288,
|
||||
winningMemberCount: 1130,
|
||||
lotteryTimes: 3413,
|
||||
winningTimes: 2628,
|
||||
statusText: '宸茬粨鏉?,
|
||||
statusText: '已结束',
|
||||
isOpen: true,
|
||||
startTime: '2025-10-01 00:00:00',
|
||||
endTime: '2025-11-30 23:59:59'
|
||||
@@ -186,11 +186,11 @@ export default {
|
||||
methods: {
|
||||
getStatusLabel(val : number) : string {
|
||||
const found = this.statusOptions.find((item : any) : boolean => item.value == val)
|
||||
return found != null ? (found['label'] as string) : '鍏ㄩ儴'
|
||||
return found != null ? (found['label'] as string) : '全部'
|
||||
},
|
||||
getTypeLabel(val : number) : string {
|
||||
const found = this.typeOptions.find((item : any) : boolean => item.value == val)
|
||||
return found != null ? (found['label'] as string) : '鍏ㄩ儴'
|
||||
return found != null ? (found['label'] as string) : '全部'
|
||||
},
|
||||
statusChange(e : any) {
|
||||
this.currentStatus = this.statusOptions[e.detail.value].value
|
||||
@@ -200,14 +200,14 @@ export default {
|
||||
},
|
||||
pageSizeChange(e : any) {
|
||||
const val = this.pageSizes[e.detail.value]
|
||||
this.currentSize = parseInt(val.replace('鏉?椤?, ''))
|
||||
this.currentSize = parseInt(val.replace('条/页', ''))
|
||||
},
|
||||
handleSearch() {
|
||||
uni.showToast({ title: '鎼滅储', icon: 'none' })
|
||||
uni.showToast({ title: '搜索', icon: 'none' })
|
||||
},
|
||||
toggleStatus(item : any) {
|
||||
item.isOpen = !item.isOpen
|
||||
uni.showToast({ title: '鐘舵€佸凡鍙樻洿', icon: 'none' })
|
||||
uni.showToast({ title: '状态已变更', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -227,7 +227,7 @@ export default {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 绛涢€夊尯鍩?*/
|
||||
/* 筛选区域 */
|
||||
.filter-card {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
@@ -293,12 +293,12 @@ export default {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* 琛ㄦ牸宸ュ叿鏍?*/
|
||||
/* 表格工具栏 */
|
||||
.table-toolbar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 琛ㄦ牸涓讳綋 */
|
||||
/* 表格主体 */
|
||||
.table-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -322,7 +322,7 @@ export default {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
/* 鍒楀畾涔?*/
|
||||
/* 列定义 */
|
||||
.col-60 { width: 60px; }
|
||||
.col-80 { width: 80px; }
|
||||
.col-100 { width: 100px; }
|
||||
@@ -334,7 +334,7 @@ export default {
|
||||
.id-text { font-size: 13px; color: #808695; }
|
||||
.status-text { font-size: 13px; color: #515a6e; }
|
||||
|
||||
/* 寮€鍏崇粍浠?*/
|
||||
/* 开关组件 */
|
||||
.switch-box {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
@@ -382,7 +382,7 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 鍒嗛〉 */
|
||||
/* 分页 */
|
||||
.table-pagination {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
@@ -424,7 +424,7 @@ export default {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
|
||||
background-color: #2d8cf0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
@@ -443,4 +443,3 @@ export default {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user