wangxiangwen4
4 weeks ago
6 changed files with 280 additions and 24 deletions
-
1activitylink/package-lock.json
-
1activitylink/package.json
-
22activitylink/src/api/manage/gift.js
-
5activitylink/src/router/index.js
-
13activitylink/src/views/zhongchou/index.vue
-
262activitylink/src/views/zhongchou/user/index.vue
@ -0,0 +1,262 @@ |
|||
<template> |
|||
<el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh;"> |
|||
<!-- 搜索栏 --> |
|||
<div class="gray-container"> |
|||
<h2>中奖管理</h2> |
|||
<el-form :inline="true" class="search-bar"> |
|||
<el-form-item label="姓名"> |
|||
<el-input v-model="searchParams.username" placeholder="请输入姓名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="精网号"> |
|||
<el-input |
|||
v-model="searchParams.jwcode" |
|||
placeholder="请输入精网号" |
|||
@input="handleJingwangIdInput" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="中奖等级"> |
|||
<el-select |
|||
v-model="searchParams.gradeId" |
|||
placeholder="请选择" |
|||
class="prize-level-select" |
|||
style="width: 220px" |
|||
> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="item in gradeOptions" |
|||
:key="item.id" |
|||
:label="item.gradeName" |
|||
:value="item.id" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleSearch">搜索</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="handleReset">重置</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleExport">导出数据</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<!-- 表格 --> |
|||
<div class="table-container"> |
|||
<el-table :data="tableData" style="width: 100%" :row-style="{ height: '55px' }"> |
|||
<el-table-column prop="username" label="姓名" width="180" align="center"></el-table-column> |
|||
<el-table-column prop="jwcode" label="精网号" width="250" align="center"></el-table-column> |
|||
<el-table-column prop="gradeName" label="中奖等级" width="200" align="center"></el-table-column> |
|||
<el-table-column prop="prizeName" label="所中礼品" width="300" align="center"></el-table-column> |
|||
<el-table-column prop="winTime" label="中奖时间" align="center"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 分页组件 --> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="searchParams.pageNum" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="searchParams.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted } from 'vue' |
|||
import { useactivityStone } from '@/stone/activityStone' |
|||
import { useWinStone } from '@/stone/winStone' |
|||
import { getWinList, getWinLevelList ,exportWinExcel} from '@/api/manage/win' |
|||
import { onBeforeRouteLeave } from 'vue-router' |
|||
import { ElMessage } from 'element-plus' |
|||
const activityStone = useactivityStone() |
|||
const winStone = useWinStone() |
|||
|
|||
// 搜索参数（初始化时使用持久化值） |
|||
const searchParams = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
username: "", |
|||
gradeId: "", |
|||
jwcode: "" |
|||
}) |
|||
|
|||
// 中奖等级选项 |
|||
const gradeOptions = ref([]) |
|||
|
|||
// 表格数据 |
|||
const tableData = ref([]) |
|||
const total = ref(0) |
|||
|
|||
// 获取中奖等级列表 |
|||
const fetchWinLevelList = async () => { |
|||
try { |
|||
const res = await getWinLevelList() |
|||
if (res.code === 200) { |
|||
gradeOptions.value = res.data |
|||
} |
|||
} catch (error) { |
|||
console.error('获取中奖等级列表失败:', error) |
|||
} |
|||
} |
|||
|
|||
const handleSizeChange = (val) => { |
|||
searchParams.value.pageSize = val |
|||
searchParams.value.pageNum = 1 |
|||
fetchWinList() |
|||
} |
|||
|
|||
const handleCurrentChange = (val) => { |
|||
searchParams.value.pageNum = val |
|||
fetchWinList() |
|||
} |
|||
// 获取中奖列表 |
|||
const fetchWinList = async () => { |
|||
try { |
|||
const requestData = { |
|||
username: activityStone.searchUsername, |
|||
gradeId: winStone.searchgradeId, |
|||
jwcode: activityStone.searchJwcode, |
|||
pageNum: searchParams.value.pageNum, |
|||
pageSize: searchParams.value.pageSize |
|||
} |
|||
console.log('请求参数:', requestData) |
|||
const res = await getWinList(requestData) |
|||
if (res.code === 200) { |
|||
tableData.value = res.data.list |
|||
console.log('获取中奖列表成功:', tableData.value) |
|||
total.value = res.data.total |
|||
} |
|||
} catch (error) { |
|||
console.error('获取中奖列表失败:', error) |
|||
} |
|||
} |
|||
|
|||
// 搜索 |
|||
const handleSearch = () => { |
|||
searchParams.value.pageNum = 1 |
|||
|
|||
// 更新持久化值 |
|||
activityStone.setSearchUsername(searchParams.value.username) |
|||
activityStone.setSearchJwcode(searchParams.value.jwcode) |
|||
winStone.setSearchgradeId(searchParams.value.gradeId) |
|||
|
|||
fetchWinList() |
|||
} |
|||
|
|||
// 导出数据 |
|||
const handleExport = async () => { |
|||
try { |
|||
|
|||
const username = activityStone.searchUsername; |
|||
const jwcode = activityStone.searchJwcode; |
|||
const gradeId = winStone.searchgradeId; |
|||
|
|||
// 构造请求参数 |
|||
const exportData = { |
|||
gradeId, |
|||
username, |
|||
jwcode |
|||
}; |
|||
|
|||
// 调用导出接口（返回的是 blob 数据） |
|||
const response = await exportWinExcel(exportData); |
|||
|
|||
// 创建 Blob 对象 |
|||
const blob = new Blob([response], { |
|||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
}); |
|||
|
|||
// 创建下载链接 |
|||
const downloadUrl = window.URL.createObjectURL(blob); |
|||
|
|||
// 创建 <a> 标签并模拟点击 |
|||
const link = document.createElement('a'); |
|||
link.href = downloadUrl; |
|||
link.setAttribute('download', '中奖用户.xlsx'); // 指定文件名为“周年庆活动.xlsx” |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
|
|||
// 清理资源 |
|||
link.remove(); |
|||
window.URL.revokeObjectURL(downloadUrl); |
|||
} catch (error) { |
|||
console.error('导出数据失败:', error); |
|||
ElMessage.error('导出数据失败'); |
|||
} |
|||
}; |
|||
|
|||
|
|||
// 重置搜索 |
|||
const handleReset = () => { |
|||
searchParams.value = { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
username: '', |
|||
gradeId: '', |
|||
jwcode: '' |
|||
} |
|||
|
|||
// 清空持久化值 |
|||
activityStone.setSearchUsername('') |
|||
activityStone.setSearchJwcode('') |
|||
winStone.setSearchgradeId('') |
|||
|
|||
fetchWinList() |
|||
} |
|||
|
|||
// 精网号输入处理 |
|||
const handleJingwangIdInput = (value) => { |
|||
searchParams.value.jwcode = value.replace(/\D/g, '') |
|||
} |
|||
|
|||
// 页面加载时获取数据 |
|||
onMounted(() => { |
|||
fetchWinLevelList() |
|||
fetchWinList() |
|||
}) |
|||
|
|||
onBeforeRouteLeave((to, from, next) => { |
|||
// 判断是否跳转到 activity/index 页面 |
|||
if (to.name !== 'zhongchouwinning') { |
|||
// 清空 winStone 中的 gradeId |
|||
winStone.setSearchgradeId('') |
|||
|
|||
// 清空 activityStone 中的搜索值 |
|||
activityStone.setSearchUsername('') |
|||
activityStone.setSearchJwcode('') |
|||
} |
|||
|
|||
next() // 必须调用 next() |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.gray-container { |
|||
width: 100%; |
|||
background-color: #ffffff; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
min-height: 80vh; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.search-bar { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.prize-level-select { |
|||
width: 220px; |
|||
} |
|||
|
|||
.table-container { |
|||
height: 600px; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue