lihuilin
2 weeks ago
17 changed files with 40 additions and 4471 deletions
-
BINsrc/assets/新logo.png
-
44src/router/index.js
-
0src/views/consume/beanConsume.vue
-
0src/views/consume/coinConsume.vue
-
217src/views/goldBeen/addGoldenBeen.vue
-
253src/views/goldBeen/goldenBeenBalance.vue
-
581src/views/goldBeen/goldenBeenConsum.vue
-
794src/views/goldBeen/goldenBeenDetail.vue
-
582src/views/goldBeen/onLineDetail.vue
-
83src/views/index.vue
-
493src/views/managerecharge/activity.vue
-
964src/views/recharge/allRecharge.vue
-
0src/views/recharge/beanRecharge.vue
-
0src/views/recharge/coinRecharge.vue
-
0src/views/refund/beanRefund.vue
-
0src/views/refund/coinRefund.vue
-
500src/views/usergoldInfo/index.vue
|
After Width: 216 | Height: 216 | Size: 58 KiB |
@ -1,217 +0,0 @@ |
|||
<template> |
|||
<div class="add-goldenbeen"> |
|||
<div class="head-top">新增充值</div> |
|||
<div class="add-box"> |
|||
<el-form |
|||
:model="beenObj" |
|||
ref="ruleFormRef" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
class="add-form" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input v-model="beenObj.jwcode" style="width: 220px" /> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser()" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="type" label="充值类型"> |
|||
<el-radio-group v-model="beenObj.type"> |
|||
<el-radio :value="0">增加</el-radio> |
|||
<el-radio :value="1">减少</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<div style="display: flex"> |
|||
<el-form-item prop="payBeean" label="付费金豆"> |
|||
<el-input-number |
|||
v-model="beenObj.payBeean" |
|||
:controls="false" |
|||
:min="0" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="freeBeean" label="免费金豆"> |
|||
<el-input-number |
|||
v-model="beenObj.freeBeean" |
|||
:controls="false" |
|||
:min="0" |
|||
/> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="beenObj.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="submitter" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
:value="beenObj.submitter" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> --> |
|||
<el-form-item> |
|||
<div class="btn-group"> |
|||
<el-button type="success" @click="resetData(ruleFormRef)">重置</el-button> |
|||
<el-button type="primary" @click="addBean(ruleFormRef)"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 客户信息栏 --> |
|||
<el-card> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<div class="custom-box"> |
|||
<el-text>姓名:{{ user.nickname }}</el-text> |
|||
<el-text>当前付费金豆:{{ user.jinbiBuy }}</el-text> |
|||
<el-text>精网号:{{ user.jwcode }}</el-text> |
|||
<el-text>当前免费金豆:{{ user.jinbiFree }}</el-text> |
|||
<!-- <el-text>负责客服:</el-text> --> |
|||
<el-text>消费次数:{{ user.number }}</el-text> |
|||
<el-text>所属门店:{{ user.masterShop }}</el-text> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue' |
|||
import API from '@/util/http' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
type userType = { |
|||
[key: string]: number | string |
|||
} |
|||
const ruleFormRef = ref<FormInstance>() |
|||
const beenObj = ref({ |
|||
jwcode: '', |
|||
remark: '', |
|||
type: 0, //0是加1是减 |
|||
payBeean: 0, |
|||
freeBeean: 0 |
|||
}) |
|||
let user: userType = reactive({}) |
|||
const rules = ref({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
remark: [{ required: true, message: '请输入备注', trigger: 'blur' }], |
|||
// submitter: [{ required: true, message: '请输入提交人', trigger: 'blur' }], |
|||
type: [{ required: true, message: '请选择充值类型', trigger: 'change' }], |
|||
payBeean: [{ required: true, message: '请输入付费金豆', trigger: 'blur' }], |
|||
freeBeean: [{ required: true, message: '请输入免费金豆', trigger: 'blur' }] |
|||
}) |
|||
const addBean = (formEl) => { |
|||
// 提交表单 |
|||
try { |
|||
formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
// 处理表单提交逻辑 |
|||
const result = await API({ |
|||
url: '/dou/add', |
|||
data: { |
|||
jwcode: beenObj.value.jwcode, |
|||
content: beenObj.value.remark, |
|||
moneyFree: Number(beenObj.value.freeBeean), |
|||
moneyBuy: Number(beenObj.value.payBeean), |
|||
time: Math.floor(Date.now() / 1000), |
|||
data: beenObj.value.type |
|||
} |
|||
}) |
|||
if (result.code === 200) { |
|||
ElMessage.success('充值成功') |
|||
beenObj.value.jwcode = '' |
|||
beenObj.value.remark = '' |
|||
beenObj.value.payBeean = 0 |
|||
beenObj.value.freeBeean = 0 |
|||
} else if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
return |
|||
} |
|||
console.log('请求成功', result) |
|||
} else { |
|||
ElMessage.error('表单验证失败') |
|||
} |
|||
}) |
|||
} catch (error) { |
|||
ElMessage.error('提交失败') |
|||
} |
|||
} |
|||
const resetData = (formEl) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
} |
|||
// 精网号去空格 |
|||
const trimJwCode = () => { |
|||
if (beenObj.value.jwcode) { |
|||
beenObj.value.jwcode = beenObj.value.jwcode.replace(/\s/g, ''); |
|||
} |
|||
} |
|||
const getUser = async function () { |
|||
trimJwCode(); |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/search', |
|||
data: { |
|||
jwcode: beenObj.value.jwcode |
|||
} |
|||
}) |
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
} else { |
|||
if (!result.data.jwcode) { |
|||
ElMessage.error('精网号不存在') |
|||
return |
|||
} |
|||
Object.assign(user, result.data) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('查询失败，请检查精网号是否正确') |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.add-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
column-gap: 50px; |
|||
} |
|||
.btn-group { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
width: 100%; |
|||
} |
|||
.custom-box { |
|||
padding: 20px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
row-gap: 20px; |
|||
box-sizing: border-box; |
|||
.el-text { |
|||
width: 200px; |
|||
} |
|||
} |
|||
.el-card { |
|||
width: 500px; |
|||
} |
|||
.head-top { |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
} |
|||
</style> |
|||
@ -1,253 +0,0 @@ |
|||
<template> |
|||
<!-- 这是客户金豆余额页面 --> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="area"> |
|||
<el-text class="mx-1" size="large">地区：</el-text> |
|||
<el-select |
|||
v-model="detailY.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaArray" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search()" |
|||
>查询</el-button |
|||
> |
|||
<el-button type="success" @click="reset(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<div> |
|||
现有金豆： 付费金豆：{{ getObj.jinbiBuy }} 免费金豆：{{ |
|||
getObj.jinbiFree |
|||
}} 历史消费：{{ getObj.jinbiCostTotal }} |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
:default-sort="{ prop: 'jinbiCostTotal', order: 'descending' }" |
|||
height="584px" |
|||
@sort-change="handleSortChange" |
|||
> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="所属地区" width="120" /> |
|||
|
|||
<el-table-column prop="jinbi" sortable label="金豆数量" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiBuy" sortable label="付费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiFree" sortable label="免费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
width="120" |
|||
prop="jinbiCostTotal" |
|||
label="历史消费" |
|||
></el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
prop="jinbiCostbeenTotal" |
|||
width="160" |
|||
label="历史付费金豆" |
|||
></el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
prop="jinbifreebeenTotal" |
|||
width="160" |
|||
label="历史免费金豆" |
|||
></el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, reactive } from 'vue' |
|||
|
|||
import type { FormInstance } from 'element-plus' |
|||
|
|||
import API from '@/util/http' |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
//搜索表单数据 |
|||
const detailY = reactive({ jwcode: '', area: '' }) |
|||
const ruleFormRef = ref<FormInstance>() |
|||
let areaArray = ref<string[]>([]) |
|||
let getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
jinbiBuy: 0, |
|||
jinbiCostTotal: 0, |
|||
jinbiFree: 0 |
|||
}) |
|||
// 精网号去空格 |
|||
const trimJwCode = () => { |
|||
if (detailY.jwcode) { |
|||
detailY.jwcode = detailY.jwcode.replace(/\s/g, ''); |
|||
} |
|||
} |
|||
const search = function () { |
|||
trimJwCode(); |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
//初始化 |
|||
const getInit = async function ({ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
}) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getYve', |
|||
data: { |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize, |
|||
yve: { |
|||
jwcode: detailY.jwcode, |
|||
ipAddress: detailY.area, |
|||
sortField: sortField, |
|||
sortOrder: sortOrder |
|||
} |
|||
} |
|||
}) |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
const handleSortChange = (column) => { |
|||
const { prop, order } = column |
|||
if (order === 'ascending') { |
|||
getInit({ sortField: prop, sortOrder: 'ASC' }) |
|||
} else if (order === 'descending') { |
|||
getInit({ sortField: prop, sortOrder: 'DESC' }) |
|||
} |
|||
} |
|||
|
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl: FormInstance | undefined) { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
} |
|||
|
|||
const getArea = async () => { |
|||
const result = await API({ |
|||
url: '/dou/getIp' |
|||
}) |
|||
console.log('获取地区', result.data) |
|||
if (result.code == 200) { |
|||
areaArray.value = result.data |
|||
} |
|||
} |
|||
const getCount = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getYveTotal', |
|||
// 传递jwcode和ipAddress参数，可以让金币数随查询变化 |
|||
data: { |
|||
jwcode: detailY.jwcode, |
|||
ipAddress: detailY.area |
|||
} |
|||
}) |
|||
if (result.code === 200) { |
|||
const { jinbiBuy, jinbiFree, jinbiCostTotal } = result.data |
|||
getObj.value.jinbiBuy = jinbiBuy |
|||
getObj.value.jinbiFree = jinbiFree |
|||
getObj.value.jinbiCostTotal = jinbiCostTotal |
|||
} |
|||
} catch (error) { |
|||
console.log('获取统计数据失败', error) |
|||
} |
|||
} |
|||
getArea() |
|||
getCount() |
|||
getInit({}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
@ -1,581 +0,0 @@ |
|||
<template> |
|||
<!-- 这是金豆消费明细页面 --> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="ipAddress"> |
|||
<el-text class="mx-1" size="large">地区：</el-text> |
|||
<el-select |
|||
v-model="detailY.ipAddress" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="sourceType"> |
|||
<el-text class="mx-1" size="large">消费类型：</el-text> |
|||
<el-select |
|||
v-model="detailY.sourceType" |
|||
placeholder="请选择消费类型" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in consumList" |
|||
:key="item.value" |
|||
:label="item.text" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="channel" label="频道"> |
|||
<el-select |
|||
v-model="detailY.channel" |
|||
placeholder="请选择频道" |
|||
style="width: 240px" |
|||
clearable |
|||
filterable |
|||
> |
|||
<el-option |
|||
v-for="item in channelList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item prop="sourceName"> |
|||
<el-text class="mx-1" size="large">直播间：</el-text> |
|||
<el-input |
|||
v-model="detailY.sourceName" |
|||
placeholder="请输入直播间" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="startTime"> |
|||
<el-text class="mx-1" size="large">开始时间：</el-text> |
|||
<el-date-picker |
|||
v-model="detailY.startTime" |
|||
type="date" |
|||
placeholder="开始日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="endTime"> |
|||
<el-text class="mx-1" size="large">结束时间：</el-text> |
|||
<el-date-picker |
|||
v-model="detailY.endTime" |
|||
type="date" |
|||
placeholder="结束日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
/> |
|||
<el-button style="margin-left: 10px" @click="getToday()">今</el-button> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="success" @click="exportExcel">导出Excel</el-button> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<div>合计数：实际用户金豆数：{{ beenCount }}</div> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="地区" width="120" /> |
|||
<el-table-column prop="sourceType" label="消费类型" width="120"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
consumList.find((item) => item.value === scope.row.sourceType)?.text |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiCostTotal" label="金豆价格" width="120"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="chanel" label="频道" width="120"> |
|||
</el-table-column> --> |
|||
<el-table-column prop="room" label="直播间" width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
label="消费时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column fixed="right" label="操作" min-width="120"> |
|||
<template #default> |
|||
<el-tooltip class="box-item" effect="light" placement="top-start"> |
|||
<template #default> |
|||
<el-button link type="primary" size="small"> 返还金豆 </el-button> |
|||
</template> |
|||
<template #content> |
|||
<div>是否申请返还该条消费</div> |
|||
<el-button size="small">确定 </el-button> |
|||
<el-button size="small">取消 </el-button> |
|||
</template> |
|||
</el-tooltip> |
|||
</template> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 导出信息确认对话框 --> |
|||
<el-dialog |
|||
v-model="showExportInfoPanel" |
|||
title="导出信息确认" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div class="info-panel-header">导出信息</div> |
|||
<div v-if="!detailY.jwcode && !detailY.ipAddress && !detailY.sourceType && !detailY.sourceName && (!detailY.startTime || !detailY.endTime)"> |
|||
你正在导出所有数据 |
|||
</div> |
|||
<div v-else> |
|||
你正在导出以下数据 |
|||
</div> |
|||
<div v-if="detailY.jwcode">精网号：{{ detailY.jwcode }}</div> |
|||
<div v-if="detailY.ipAddress">地区：{{ detailY.ipAddress }}</div> |
|||
<div v-if="detailY.sourceType"> |
|||
消费类型：{{ consumList.value.find(item => item.value === detailY.sourceType)?.text }} |
|||
</div> |
|||
<div v-if="detailY.sourceName">直播间：{{ detailY.sourceName }}</div> |
|||
<div v-if="detailY.startTime && detailY.endTime"> |
|||
时间范围：{{ detailY.startTime }} 至 {{ detailY.endTime }} |
|||
</div> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showExportInfoPanel = false">取消</el-button> |
|||
<el-button type="primary" @click="doExportExcel">导出</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<!-- 导出进度对话框 --> |
|||
<el-dialog |
|||
v-model="isExporting" |
|||
title="正在导出" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
:show-close="false" |
|||
> |
|||
<el-progress |
|||
:percentage="exportProgress" |
|||
:stroke-width="15" |
|||
striped |
|||
animated |
|||
/> |
|||
<div class="export-status"> |
|||
已导出 {{ Math.round((exportProgress / 100) * total) }} 条 / 共 {{ total }} 条 |
|||
</div> |
|||
<template #footer> |
|||
<el-button type="danger" @click="cancelExport">取消导出</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import axios from 'axios' |
|||
// 导入 xlsx 库的相关方法 |
|||
import * as XLSX from 'xlsx' |
|||
const { utils, writeFile } = XLSX |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
const areaList = ref<string[]>([]) |
|||
const beenCount = ref(0) |
|||
const consumList = ref<any>([ |
|||
{ value: 1, text: '发礼物' }, |
|||
{ value: 2, text: '发红包' }, |
|||
{ value: 3, text: '发福袋' }, |
|||
{ value: 4, text: '付费直播' }, |
|||
{ value: 5, text: '加⼊粉丝团' }, |
|||
{ value: 6, text: '发弹幕' }, |
|||
{ value: 7, text: '铁粉单次付费' }, |
|||
{ value: 8, text: '铁粉连续包⽉' }, |
|||
{ value: 9, text: '打赏⽂章' }, |
|||
{ value: 10, text: '打赏视频' }, |
|||
{ value: 11, text: '付费购买' } |
|||
]) |
|||
// const channelList = ref<string[]>([]) |
|||
// const liveroomList = ref<string[]>([]) |
|||
const ruleFormRef = ref<FormInstance>() |
|||
//搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
ipAddress: '', |
|||
startTime:'', |
|||
endTime:'', |
|||
// channel: '', //频道 |
|||
sourceName: '', //直播间 |
|||
sourceType: '' //消费类型 |
|||
}) |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
// 格式化开始时间 |
|||
const startDate = moment(today).startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = moment(today).endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = moment().subtract(1, 'days') |
|||
// 格式化开始时间 |
|||
const startDate = yesterday.startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = yesterday.endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
// 格式化开始时间 |
|||
const startDate = moment().subtract(6, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
//初始化 |
|||
const getInit = async function () { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const startTime = detailY.value.startTime |
|||
const endTime = detailY.value.endTime |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getSpend', |
|||
method: 'post', |
|||
data: { |
|||
...getObj.value, |
|||
spend: { |
|||
jwcode: detailY.value.jwcode, //精网号 |
|||
ipAddress: detailY.value.ipAddress, //地区 |
|||
sourceName: detailY.value.sourceName, //直播间 |
|||
sourceType: detailY.value.sourceType, //消费类型 |
|||
startTime, //开始时间 |
|||
endTime //结束时间 |
|||
} |
|||
} |
|||
}) |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 精网号、直播间去空格 |
|||
const trimJwCode = () => { |
|||
if (detailY.value.jwcode) { |
|||
detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, ''); |
|||
} |
|||
if (detailY.value.sourceName) { |
|||
detailY.value.sourceName = detailY.value.sourceName.replace(/\s/g, ''); |
|||
} |
|||
} |
|||
|
|||
// 搜索 |
|||
const search = function () { |
|||
trimJwCode(); |
|||
getObj.value.pageNum = 1 |
|||
getInit() |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
formEl.resetFields() |
|||
} |
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit() |
|||
} |
|||
|
|||
//合计数接口 |
|||
const getCount = async () => { |
|||
const result = await API({ |
|||
url: '/dou/getSpendTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
ipAddress: detailY.value.ipAddress, |
|||
sourceName: detailY.value.sourceName, |
|||
sourceType: detailY.value.sourceType, |
|||
startTime: detailY.value.startTime, |
|||
endTime: detailY.value.endTime |
|||
} |
|||
}) |
|||
if (result.code == 200) { |
|||
//const { jinbiBuy, jinbiFree, jinbiCostTotal } = result.data |
|||
console.log('合计数', result.data) |
|||
beenCount.value = result.data || 0 |
|||
} |
|||
} |
|||
//获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 新增导出相关响应式变量 |
|||
const showExportInfoPanel = ref(false) |
|||
const exportProgress = ref(0) |
|||
const isExporting = ref(false) |
|||
const exportCancelToken = ref<any>(null) |
|||
|
|||
// 导出 Excel 表头 |
|||
const headers = [ |
|||
'序号', |
|||
'姓名', |
|||
'精网号', |
|||
'地区', |
|||
'消费类型', |
|||
'金豆价格', |
|||
'直播间', |
|||
'消费时间' |
|||
] |
|||
|
|||
// 点击导出按钮显示信息面板 |
|||
const exportExcel = () => { |
|||
showExportInfoPanel.value = true |
|||
} |
|||
|
|||
// 执行导出操作 |
|||
const doExportExcel = async () => { |
|||
try { |
|||
isExporting.value = true |
|||
exportProgress.value = 0 |
|||
showExportInfoPanel.value = false |
|||
|
|||
// 初始化 Excel |
|||
const wb = utils.book_new() |
|||
const ws = utils.aoa_to_sheet([headers]) |
|||
utils.book_append_sheet(wb, ws, 'Sheet1') |
|||
|
|||
// 流式写入配置 |
|||
const writer = { |
|||
write: (d: any[][], o: any) => { |
|||
if (!d) return |
|||
utils.sheet_add_aoa(ws, d, { origin: -1 }) |
|||
} |
|||
} |
|||
|
|||
let page = 1 |
|||
let totalExported = 0 |
|||
const pageSize = 5000 // 每次请求 5000 条 |
|||
let totalRecords = 0 |
|||
|
|||
// 首次请求获取总记录数 |
|||
const firstResult = await API({ |
|||
url: '/dou/getSpend', |
|||
method: 'post', |
|||
data: { |
|||
pageNum: 1, |
|||
pageSize, |
|||
spend: { |
|||
...detailY.value |
|||
} |
|||
} |
|||
}) |
|||
totalRecords = firstResult.data.total |
|||
|
|||
// 创建取消令牌 |
|||
const CancelToken = axios.CancelToken |
|||
exportCancelToken.value = CancelToken.source() |
|||
|
|||
// 处理首次请求的数据 |
|||
const firstData = firstResult.data.list |
|||
if (firstData.length) { |
|||
const rows = firstData.map((row: any, index: number) => { |
|||
return [ |
|||
totalExported + index + 1, |
|||
row.nickname || '', |
|||
row.jwcode || '', |
|||
row.ipAddress || '', |
|||
consumList.value.find(item => item.value === row.sourceType)?.text || '', |
|||
row.jinbiCostTotal || 0, |
|||
row.room || '', |
|||
moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || '' |
|||
] |
|||
}) |
|||
writer.write(rows,{}) |
|||
totalExported += firstData.length |
|||
exportProgress.value = Math.round((totalExported / totalRecords) * 100) |
|||
page++ |
|||
} |
|||
|
|||
while (totalExported < totalRecords) { |
|||
const result = await API({ |
|||
url: '/dou/getSpend', |
|||
method: 'post', |
|||
data: { |
|||
pageNum: page, |
|||
pageSize, |
|||
spend: { |
|||
...detailY.value |
|||
} |
|||
}, |
|||
cancelToken: exportCancelToken.value.token |
|||
}) |
|||
|
|||
const data = result.data.list |
|||
if (!data.length) break |
|||
|
|||
// 转换数据 |
|||
const rows = data.map((row: any, index: number) => [ |
|||
totalExported + index + 1, |
|||
row.nickname || '', |
|||
row.jwcode || '', |
|||
row.ipAddress || '', |
|||
consumList.value.find(item => item.value === row.sourceType)?.text || '', |
|||
row.jinbiCostTotal || 0, |
|||
row.room || '', |
|||
moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || '' |
|||
]) |
|||
|
|||
// 流式写入 |
|||
writer.write(rows,{}) |
|||
totalExported += data.length |
|||
exportProgress.value = Math.round((totalExported / totalRecords) * 100) |
|||
|
|||
// 内存控制：每 500 页释放内存 |
|||
if (page % 500 === 0) { |
|||
await new Promise(resolve => setTimeout(resolve, 0)) |
|||
} |
|||
|
|||
page++ |
|||
} |
|||
|
|||
// 生成最终文件 |
|||
writeFile(wb, '金豆消费明细.xlsx') |
|||
exportProgress.value = 100 |
|||
isExporting.value = false |
|||
exportCancelToken.value = null |
|||
ElMessage.success(`导出成功，共${totalExported}条数据`) |
|||
} catch (error) { |
|||
if (!axios.isCancel(error)) { |
|||
ElMessage.error(`导出失败: ${error.message}`) |
|||
} |
|||
isExporting.value = false |
|||
exportCancelToken.value = null |
|||
} |
|||
} |
|||
|
|||
// 取消导出操作 |
|||
const cancelExport = () => { |
|||
if (exportCancelToken.value) { |
|||
exportCancelToken.value.cancel('用户取消导出') |
|||
ElMessage.warning('导出已取消') |
|||
isExporting.value = false |
|||
} |
|||
} |
|||
// 挂载 |
|||
getInit() |
|||
getCount() |
|||
getArea() |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -1,794 +0,0 @@ |
|||
<template> |
|||
<!-- 这是金豆充值明细页面 --> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="deptName" > |
|||
<el-text class="mx-1" size="large">地区：</el-text> |
|||
<el-select |
|||
v-model="detailY.deptName" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="orderNo" > |
|||
<el-text class="mx-1" size="large">订单号：</el-text> |
|||
<el-input |
|||
v-model="detailY.orderNo" |
|||
placeholder="请输入订单号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="type"> |
|||
<el-text class="mx-1" size="large">充值类型：</el-text> |
|||
<el-select |
|||
v-model="detailY.type" |
|||
placeholder="请选择充值类型" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in typeList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<!-- <el-form-item prop="payStyle" label="充值平台"> |
|||
<el-select |
|||
v-model="detailY.payStyle" |
|||
placeholder="请选择充值平台" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in platformList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-row :span="24"> |
|||
<el-form-item prop="startTime"> |
|||
<el-text class="mx-1" size="large">开始时间：</el-text> |
|||
<el-date-picker |
|||
v-model="detailY.startTime" |
|||
type="date" |
|||
placeholder="开始日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="endTime"> |
|||
<el-text class="mx-1" size="large">结束时间：</el-text> |
|||
<el-date-picker |
|||
v-model="detailY.endTime" |
|||
type="date" |
|||
placeholder="结束日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
/> |
|||
</el-form-item> |
|||
<el-button style="margin-left: 10px" @click="getToday()">今</el-button> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
</el-row> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
<el-button type="primary" @click="showExportInfoPanel = true">导出excel</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- 导出excel提前展示的信息面板 --> |
|||
<el-dialog |
|||
v-model="showExportInfoPanel" |
|||
title="导出信息确认" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div class="info-panel-header">导出信息</div> |
|||
<div v-if="!detailY.jwcode && !detailY.deptName && !detailY.orderNo && !detailY.type && !detailY.startTime && !detailY.endTime"> |
|||
你正在导出所有数据 |
|||
</div> |
|||
<div v-else> |
|||
你正在导出以下数据 |
|||
</div> |
|||
<div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div> |
|||
<div v-if="detailY.deptName">所属地区：{{ detailY.deptName || '' }}</div> |
|||
<div v-if="detailY.orderNo">订单号：{{ detailY.orderNo || '' }}</div> |
|||
<div v-if="detailY.type">充值类型：{{ detailY.type || '' }}</div> |
|||
<div v-if="detailY.startTime || detailY.endTime"> |
|||
<span>更新时间：</span> |
|||
<span>{{ detailY.startTime || '无起始时间' }} 至 {{ detailY.endTime || '无结束时间' }}</span> |
|||
</div> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showExportInfoPanel = false">取消</el-button> |
|||
<el-button type="primary" @click="doExportExcel">导出</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
|
|||
<!-- 导出进度弹窗 --> |
|||
<el-dialog |
|||
v-model="isExporting" |
|||
title="正在导出" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
:show-close="false" |
|||
> |
|||
<el-progress |
|||
:percentage="exportProgress" |
|||
:stroke-width="15" |
|||
striped |
|||
animated |
|||
/> |
|||
<div class="export-status"> |
|||
已导出 {{ exportedCount }} 条 / 共 {{ totalExport }} 条 |
|||
</div> |
|||
<template #footer> |
|||
<el-button type="danger" @click="cancelExport">取消导出</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
|
|||
<div class="table-box"> |
|||
<div |
|||
>金豆总数：充值金豆总数：{{ countValue }}，合计金额数：{{ |
|||
priceValue |
|||
}}</div |
|||
> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="地区" width="120" /> |
|||
<el-table-column prop="orderNo" label="订单号" width="120" /> |
|||
<el-table-column prop="money" label="金豆数量" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="moneyBuy" label="付费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="moneyFree" label="免费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="price" label="金额"></el-table-column> |
|||
<el-table-column prop="type" label="类型"></el-table-column> |
|||
<!-- <el-table-column prop="payStyle" label="充值平台" width="140"> |
|||
</el-table-column> |
|||
<el-table-column prop="notes" label="备注" width="210"></el-table-column> --> |
|||
<el-table-column |
|||
prop="time" |
|||
label="充值时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
!!scope.row.time |
|||
? moment.unix(scope.row.time).format('YYYY-MM-DD HH:mm:ss') |
|||
: '-' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
<!-- 这是导出excel的弹窗 --> |
|||
<!-- <el-dialog |
|||
v-model="dialogVisible" |
|||
title="请选择导出条件" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
@close=" |
|||
() => { |
|||
dialogVisible = false |
|||
isExport = false |
|||
} |
|||
" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="excelData" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
status-icon |
|||
> |
|||
<el-form-item prop="activityName" label="精网号:"> |
|||
<el-input |
|||
v-model="excelData.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="所属地区：" |
|||
><el-select |
|||
v-model="excelData.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="更新时间："> |
|||
<el-radio-group v-model="excelData.timegap"> |
|||
<el-radio value="1">今天</el-radio> |
|||
<el-radio value="3">近三天</el-radio> |
|||
<el-radio value="7">近一周</el-radio> |
|||
<el-radio value="30">近一个月</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
@click="exportConfirm()" |
|||
>确定</el-button |
|||
> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> --> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { reactive, ref, onMounted, onUnmounted } from 'vue' |
|||
import { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import { utils, write } from 'xlsx' |
|||
import { saveAs } from 'file-saver' |
|||
|
|||
const showExportInfoPanel = ref(false) |
|||
const isExporting = ref(false) |
|||
const exportProgress = ref(0) |
|||
const totalExport = ref(0) |
|||
const exportedCount = ref(0) |
|||
let cancelToken: any = null |
|||
let allExportData: any[] = [] |
|||
|
|||
// 取消导出 |
|||
const cancelExport = () => { |
|||
if (cancelToken) { |
|||
cancelToken.cancel('导出已取消') |
|||
} |
|||
isExporting.value = false |
|||
exportProgress.value = 0 |
|||
exportedCount.value = 0 |
|||
allExportData = [] |
|||
ElMessage.info('导出已取消') |
|||
} |
|||
|
|||
// 导出 Excel |
|||
const doExportExcel = async () => { |
|||
try { |
|||
isExporting.value = true |
|||
exportProgress.value = 0 |
|||
exportedCount.value = 0 |
|||
allExportData = [] |
|||
|
|||
// 获取总数据量 |
|||
const totalResult = await API({ |
|||
url: '/dou/getPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.startTime || '', |
|||
endTime: detailY.value.endTime || '', |
|||
payStyle: detailY.value.payStyle, |
|||
type: detailY.value.type, |
|||
orderNo: detailY.value.orderNo, |
|||
sortField: '', |
|||
sortOrder: '' |
|||
}, |
|||
pageNum: 1, |
|||
pageSize: 1 |
|||
} |
|||
}) |
|||
totalExport.value = totalResult.data.total |
|||
|
|||
if (totalExport.value === 0) { |
|||
ElMessage.error('没有数据可导出') |
|||
isExporting.value = false |
|||
return |
|||
} |
|||
|
|||
const pageSize = 5000 // 每批次获取 100 条数据 |
|||
const totalPages = Math.ceil(totalExport.value / pageSize) |
|||
|
|||
for (let page = 1; page <= totalPages; page++) { |
|||
if (!isExporting.value) break // 如果取消导出，停止循环 |
|||
|
|||
const result = await API({ |
|||
url: '/dou/getPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.startTime || '', |
|||
endTime: detailY.value.endTime || '', |
|||
payStyle: detailY.value.payStyle, |
|||
type: detailY.value.type, |
|||
orderNo: detailY.value.orderNo, |
|||
sortField: '', |
|||
sortOrder: '' |
|||
}, |
|||
pageNum: page, |
|||
pageSize: pageSize |
|||
} |
|||
}) |
|||
|
|||
const data = result.data.list |
|||
allExportData = allExportData.concat(data) |
|||
exportedCount.value = allExportData.length |
|||
exportProgress.value = Math.round((exportedCount.value / totalExport.value) * 100) |
|||
} |
|||
|
|||
if (isExporting.value) { |
|||
// 导出的数据将字段映射，添加序号列 |
|||
const exportData = allExportData.map((item, index) => { |
|||
return { |
|||
序号: index + 1, // 添加序号列 |
|||
姓名: item.nickname, |
|||
精网号: item.jwcode, |
|||
地区: item.ipAddress, |
|||
订单号: item.orderNo, |
|||
金豆数量: item.money, |
|||
付费金豆: item.moneyBuy, |
|||
免费金豆: item.moneyFree, |
|||
金额: item.price, |
|||
类型: item.type, |
|||
充值时间: !!item.time ? moment.unix(item.time).format('YYYY-MM-DD HH:mm:ss') : '-' |
|||
} |
|||
}) |
|||
|
|||
const worksheet = utils.json_to_sheet(exportData) |
|||
const workbook = utils.book_new() |
|||
utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
const wbout = write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
saveAs( |
|||
new Blob([wbout], { type: 'application/octet-stream' }), |
|||
'金豆充值明细导出.xlsx' |
|||
) |
|||
|
|||
showExportInfoPanel.value = false |
|||
isExporting.value = false |
|||
ElMessage.success('导出成功') |
|||
} |
|||
} catch (error) { |
|||
if (error.message === '导出已取消') { |
|||
return |
|||
} |
|||
console.log('导出失败', error) |
|||
isExporting.value = false |
|||
ElMessage.error('导出失败，请稍后重试') |
|||
} |
|||
} |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
const dialogVisible = ref(false) |
|||
const excelData = reactive({ |
|||
jwcode: '', |
|||
area: '', |
|||
timegap: '', |
|||
startTime: '', |
|||
endTime: '' |
|||
}) |
|||
const priceValue = ref(0) |
|||
const countValue = ref(0) |
|||
// areaList 地区列表 |
|||
const areaList = ref<string[]>([]) |
|||
const isExport = ref<boolean>(false) |
|||
const rules = ref({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
area: [{ required: true, message: '请选择所属地区', trigger: 'change' }] |
|||
}) |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
// 格式化开始时间 |
|||
const startDate = moment(today).startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = moment(today).endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = moment().subtract(1, 'days') |
|||
// 格式化开始时间 |
|||
const startDate = yesterday.startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = yesterday.endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
// 格式化开始时间 |
|||
const startDate = moment().subtract(6, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
//获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getPayIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
const getType = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getType' |
|||
}) |
|||
typeList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
const platformList = ref<string[]>([ |
|||
// 'stripe', |
|||
// 'ios', |
|||
// 'FirstData', |
|||
// 'paymentasia', |
|||
// 'system', |
|||
// '金币系统' |
|||
]) |
|||
const typeList = ref<string[]>([ |
|||
'金币换金豆', |
|||
'金币换免费金豆', |
|||
'赠送金豆', |
|||
'购买金豆', |
|||
'客服操作' |
|||
]) |
|||
//搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
deptName: '', |
|||
orderNo: '', |
|||
payStyle: '', |
|||
type: '', |
|||
startTime:'', |
|||
endTime:'' |
|||
}) |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
// const exportExcel = function () { |
|||
// dialogVisible.value = true |
|||
// isExport.value = true |
|||
// } |
|||
// const exportConfirm = function () { |
|||
// if (excelData.timegap == '1') { |
|||
// excelData.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// } else if (excelData.timegap == '3') { |
|||
// excelData.startTime = moment() |
|||
// .subtract(3, 'days') |
|||
// .startOf('day') |
|||
// .format('YYYY-MM-DD HH:mm:ss') |
|||
// excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// } else if (excelData.timegap == '7') { |
|||
// excelData.startTime = moment() |
|||
// .subtract(7, 'days') |
|||
// .startOf('day') |
|||
// .format('YYYY-MM-DD') |
|||
// excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// } else if (excelData.timegap == '30') { |
|||
// excelData.startTime = moment() |
|||
// .subtract(30, 'days') |
|||
// .startOf('day') |
|||
// .format('YYYY-MM-DD HH:mm:ss') |
|||
// excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// } |
|||
// getInit( |
|||
// { |
|||
// sortField: '', |
|||
// sortOrder: '' |
|||
// }, |
|||
// (data) => { |
|||
// console.log('导出数据', data) |
|||
// //导出的数据将字段映射 |
|||
// data = data.map((item) => { |
|||
// return { |
|||
// 姓名: item.name, |
|||
// 精网号: item.jwcode, |
|||
// 地区: item.deptName, |
|||
// 订单号: item.orderNo, |
|||
// 充值平台: item.payStyle, |
|||
// 金豆数量: item.count, |
|||
// 充值时间: moment(item.successTime).format('YYYY-MM-DD'), |
|||
// 金额: item.price |
|||
// } |
|||
// }) |
|||
// if (data.length == 0) { |
|||
// ElMessage.error('没有数据') |
|||
// isExport.value = false |
|||
// dialogVisible.value = false |
|||
// return |
|||
// } |
|||
// console.log('导出数据', data) |
|||
// excelExport(data) |
|||
// } |
|||
// ) |
|||
// } |
|||
//数据导出excel |
|||
// const excelExport = async function (data) { |
|||
// const worksheet = utils.json_to_sheet(data) |
|||
// const workbook = utils.book_new() |
|||
// utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
// const wbout = write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
// saveAs( |
|||
// new Blob([wbout], { type: 'application/octet-stream' }), |
|||
// '数据导出.xlsx' |
|||
// ) |
|||
// isExport.value = false |
|||
// dialogVisible.value = false |
|||
// } |
|||
const ruleFormRef = ref<FormInstance>() |
|||
//初始化 |
|||
const getInit = async function ( |
|||
{ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
}, |
|||
// callback?: Function |
|||
) { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const startTime = detailY.value.startTime |
|||
const endTime = detailY.value.endTime |
|||
console.log(startTime, endTime) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.startTime || '', |
|||
endTime: detailY.value.endTime || '', |
|||
payStyle: detailY.value.payStyle, |
|||
type: detailY.value.type, |
|||
orderNo: detailY.value.orderNo, |
|||
sortField, |
|||
sortOrder |
|||
}, |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize |
|||
} |
|||
}) |
|||
|
|||
// if (isExport.value) { |
|||
// !!callback && callback(result.data) |
|||
// } else { |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
// } |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
const handleSortChange = (column) => { |
|||
const { prop, order } = column |
|||
if (order === 'ascending') { |
|||
getInit({ sortField: prop, sortOrder: 'ASC' }) |
|||
} else if (order === 'descending') { |
|||
getInit({ sortField: prop, sortOrder: 'DESC' }) |
|||
} |
|||
} |
|||
// 精网号、订单号、充值类型去空格 |
|||
const trim = () => { |
|||
if (detailY.value.jwcode) { |
|||
detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, ''); |
|||
} |
|||
if (detailY.value.orderNo) { |
|||
detailY.value.orderNo = detailY.value.orderNo.replace(/\s/g, ''); |
|||
} |
|||
if (detailY.value.type) { |
|||
detailY.value.type = detailY.value.type.replace(/\s/g, ''); |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
trim(); |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
formEl.resetFields() |
|||
} |
|||
|
|||
//获取支付方式接口 |
|||
const getPayType = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
// typeList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取金豆数接口 |
|||
const getCount = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.startTime, |
|||
endTime: detailY.value.endTime, |
|||
orderNo: detailY.value.orderNo, |
|||
type: detailY.value.type |
|||
// payStyle: detailY.value.payStyle |
|||
} |
|||
}) |
|||
if (!!result.data) { |
|||
const { price, count } = result.data |
|||
console.log('金豆总数', price, count) |
|||
priceValue.value = price |
|||
countValue.value = count |
|||
} else { |
|||
priceValue.value = 0 |
|||
countValue.value = 0 |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getInit({}) |
|||
getPayType() |
|||
getCount() |
|||
getArea() |
|||
getType() |
|||
}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
|
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
</style> |
|||
@ -1,582 +0,0 @@ |
|||
<template> |
|||
<!-- 这是线上充值明细页面 --> |
|||
|
|||
<!-- 这是搜索表单 --> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="deptName"> |
|||
<el-text class="mx-1" size="large">地区：</el-text> |
|||
<el-select |
|||
v-model="detailY.deptName" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="orderNo"> |
|||
<el-text class="mx-1" size="large">订单号：</el-text> |
|||
<el-input |
|||
v-model="detailY.orderNo" |
|||
placeholder="请输入订单号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="payStyle"> |
|||
<el-text class="mx-1" size="large">充值平台：</el-text> |
|||
<el-select |
|||
v-model="detailY.payStyle" |
|||
placeholder="请选择充值平台" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in platformList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="startTime"> |
|||
<el-text class="mx-1" size="large">开始时间：</el-text> |
|||
<el-date-picker |
|||
v-model="detailY.startTime" |
|||
type="date" |
|||
placeholder="开始日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="endTime"> |
|||
<el-text class="mx-1" size="large">结束时间：</el-text> |
|||
<el-date-picker |
|||
v-model="detailY.endTime" |
|||
type="date" |
|||
placeholder="结束日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
/> |
|||
<el-button style="margin-left: 10px" @click="getToday()">今</el-button> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
</el-form-item> |
|||
<el-col :span="10"> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
<!-- 这是重置参数：formEl: FormInstance --> |
|||
<!-- 为啥要这个参数？ --> |
|||
|
|||
<el-button type="primary" @click="showExportInfoPanel = true">导出excel</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<div>金豆总数：充值金豆总数：{{ countValue }}，合计金额数：{{ priceValue }}</div> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="name" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="deptName" label="地区" width="120" /> |
|||
<el-table-column prop="orderNo" label="订单号" width="120" /> |
|||
<el-table-column prop="count" label="金豆数量" width="120" /> |
|||
<el-table-column prop="price" label="金额" /> |
|||
<el-table-column prop="payStyle" label="充值平台" width="140" /> |
|||
<el-table-column |
|||
prop="successTime" |
|||
label="充值时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
!!scope.row.successTime |
|||
? moment.unix(scope.row.successTime).format('YYYY-MM-DD HH:mm:ss') |
|||
: '-' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 导出excel提前展示的信息面板 --> |
|||
<el-dialog |
|||
v-model="showExportInfoPanel" |
|||
title="导出信息确认" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div class="info-panel-header">导出信息</div> |
|||
<div v-if="!detailY.jwcode && !detailY.deptName && !detailY.orderNo && !detailY.payStyle && !detailY.startTime && !detailY.endTime"> |
|||
你正在导出所有数据 |
|||
</div> |
|||
<div v-else> |
|||
你正在导出以下数据 |
|||
</div> |
|||
<div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div> |
|||
<div v-if="detailY.deptName">所属地区：{{ detailY.deptName || '' }}</div> |
|||
<div v-if="detailY.orderNo">订单号：{{ detailY.orderNo || '' }}</div> |
|||
<div v-if="detailY.payStyle">充值平台：{{ platformList.find(item => item === detailY.payStyle) || '' }}</div> |
|||
<div v-if="detailY.startTime || detailY.endTime"> |
|||
<span>更新时间：</span> |
|||
<span>{{ detailY.startTime || '无起始时间' }} 至 {{ detailY.endTime || '无结束时间' }}</span> |
|||
</div> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showExportInfoPanel = false">取消</el-button> |
|||
<el-button type="primary" @click="doExportExcel">导出</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<!-- 导出进度弹窗 --> |
|||
<el-dialog |
|||
v-model="isExporting" |
|||
title="正在导出" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
:show-close="false" |
|||
> |
|||
<el-progress |
|||
:percentage="exportProgress" |
|||
:stroke-width="15" |
|||
striped |
|||
animated |
|||
/> |
|||
<div class="export-status"> |
|||
已导出 {{ Math.round((exportProgress / 100) * totalExport) }} 条 / 共 {{ totalExport }} 条 |
|||
</div> |
|||
<template #footer> |
|||
<el-button type="danger" @click="cancelExport">取消导出</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import { utils, write } from 'xlsx' |
|||
import { saveAs } from 'file-saver' |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 分页总条目 |
|||
const total = ref(100) |
|||
const priceValue = ref(0) |
|||
const countValue = ref(0) |
|||
const areaList = ref<string[]>([]) |
|||
const platformList = ref<string[]>([]) |
|||
|
|||
// 今天 |
|||
const getToday = () => { |
|||
const today = new Date() |
|||
// 格式化开始时间 |
|||
const startDate = moment(today).startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = moment(today).endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
|
|||
// 昨天 |
|||
const getYesterday = () => { |
|||
const yesterday = moment().subtract(1, 'days') |
|||
// 格式化开始时间 |
|||
const startDate = yesterday.startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = yesterday.endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
|
|||
// 近7天 |
|||
const get7Days = () => { |
|||
// 格式化开始时间 |
|||
const startDate = moment().subtract(6, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
// 格式化结束时间 |
|||
const endDate = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
detailY.value.startTime = startDate |
|||
detailY.value.endTime = endDate |
|||
search() |
|||
} |
|||
|
|||
const handlePageSizeChange = (val: number) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
|
|||
const handleCurrentChange = (val: number) => { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
|
|||
// 搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
deptName: '', |
|||
orderNo: '', |
|||
payStyle: '', |
|||
startTime: '', |
|||
endTime: '' |
|||
}) |
|||
|
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
// 这是重置的参数，虽然不知道为什么要这个参数 |
|||
const ruleFormRef = ref<FormInstance>() |
|||
|
|||
// 初始化 |
|||
const getInit = async ( |
|||
{ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
} |
|||
) => { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const startTime = detailY.value.startTime |
|||
const endTime = detailY.value.endTime |
|||
|
|||
console.log(startTime, endTime) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/SearchPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: startTime || '', |
|||
endTime: endTime || '', |
|||
payStyle: detailY.value.payStyle, |
|||
orderNo: detailY.value.orderNo, |
|||
sortField, |
|||
sortOrder |
|||
}, |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize |
|||
} |
|||
}) |
|||
|
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 精网号、订单号去空格 |
|||
const trimJwCode = () => { |
|||
if (detailY.value.jwcode) { |
|||
detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, '') |
|||
} |
|||
if (detailY.value.orderNo) { |
|||
detailY.value.orderNo = detailY.value.orderNo.replace(/\s/g, '') |
|||
} |
|||
} |
|||
|
|||
// 搜索 |
|||
const search = () => { |
|||
trimJwCode() |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
|
|||
// 重置 |
|||
const reset = (formEl: FormInstance) => { |
|||
formEl.resetFields() |
|||
} |
|||
|
|||
// 充值平台接口 |
|||
const getPayPlatform = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/SearchStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// 获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/SearchPayIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// 获取支付方式接口 |
|||
const getPayType = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// 获取金豆数接口 |
|||
const getCount = async () => { |
|||
try { |
|||
// let startTime = '' |
|||
// let endTime = '' |
|||
// if (Array.isArray(detailY.value.createTime) && detailY.value.createTime.length === 2) { |
|||
// [startTime, endTime] = detailY.value.createTime |
|||
// } |
|||
const result = await API({ |
|||
url: '/dou/getRechargeTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.startTime, |
|||
endTime: detailY.value.endTime, |
|||
orderNo: detailY.value.orderNo, |
|||
payStyle: detailY.value.payStyle |
|||
} |
|||
}) |
|||
if (result.data) { |
|||
console.log('合计数', result.data) |
|||
const { priceTotal, countTotal } = result.data |
|||
console.log('金豆总数', priceTotal, countTotal) |
|||
priceValue.value = priceTotal |
|||
countValue.value = countTotal |
|||
} else { |
|||
priceValue.value = 0 |
|||
countValue.value = 0 |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// 导出相关变量 |
|||
const showExportInfoPanel = ref(false) |
|||
const isExporting = ref(false) |
|||
const exportProgress = ref(0) |
|||
const totalExport = ref(0) |
|||
let allExportData: any[] = [] |
|||
let cancelToken: any = null |
|||
|
|||
// 取消导出 |
|||
const cancelExport = () => { |
|||
if (cancelToken) { |
|||
cancelToken.cancel('导出已取消') |
|||
} |
|||
isExporting.value = false |
|||
exportProgress.value = 0 |
|||
allExportData = [] |
|||
ElMessage.info('导出已取消') |
|||
} |
|||
|
|||
// 导出 Excel |
|||
const doExportExcel = async () => { |
|||
try { |
|||
isExporting.value = true |
|||
exportProgress.value = 0 |
|||
allExportData = [] |
|||
|
|||
// let startTime = '' |
|||
// let endTime = '' |
|||
// if (Array.isArray(detailY.value.createTime) && detailY.value.createTime.length === 2) { |
|||
// [startTime, endTime] = detailY.value.createTime |
|||
// } |
|||
// startTime = detailY.value.startTime |
|||
// endTime = detailY.value.endTime |
|||
|
|||
// 获取总数据量 |
|||
const totalResult = await API({ |
|||
url: '/dou/SearchPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.startTime || '', |
|||
endTime: detailY.value.endTime || '', |
|||
payStyle: detailY.value.payStyle, |
|||
orderNo: detailY.value.orderNo |
|||
}, |
|||
pageNum: 1, |
|||
pageSize: 1 |
|||
} |
|||
}) |
|||
totalExport.value = totalResult.data.total |
|||
|
|||
if (totalExport.value === 0) { |
|||
ElMessage.error('没有数据可导出') |
|||
isExporting.value = false |
|||
showExportInfoPanel.value = false |
|||
return |
|||
} |
|||
|
|||
const pageSize = 1000 // 每批次获取 100 条数据 |
|||
const totalPages = Math.ceil(totalExport.value / pageSize) |
|||
|
|||
for (let page = 1; page <= totalPages; page++) { |
|||
if (!isExporting.value) break // 如果取消导出，停止循环 |
|||
|
|||
const result = await API({ |
|||
url: '/dou/SearchPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.startTime || '', |
|||
endTime: detailY.value.endTime || '', |
|||
payStyle: detailY.value.payStyle, |
|||
orderNo: detailY.value.orderNo |
|||
}, |
|||
pageNum: page, |
|||
pageSize: pageSize |
|||
} |
|||
}) |
|||
|
|||
const data = result.data.list |
|||
allExportData = allExportData.concat(data) |
|||
const exportedCount = allExportData.length |
|||
exportProgress.value = Math.round((exportedCount / totalExport.value) * 100) |
|||
} |
|||
|
|||
if (isExporting.value) { |
|||
// 导出的数据将字段映射，添加序号列 |
|||
const exportData = allExportData.map((item, index) => { |
|||
return { |
|||
序号: index + 1, // 添加序号列 |
|||
姓名: item.name, |
|||
精网号: item.jwcode, |
|||
地区: item.deptName, |
|||
订单号: item.orderNo, |
|||
金豆数量: item.count, |
|||
金额: item.price, |
|||
充值平台: item.payStyle, |
|||
充值时间: !!item.successTime ? moment.unix(item.successTime).format('YYYY-MM-DD HH:mm:ss') : '-' |
|||
} |
|||
}) |
|||
|
|||
const worksheet = utils.json_to_sheet(exportData) |
|||
const workbook = utils.book_new() |
|||
utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
const wbout = write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
saveAs( |
|||
new Blob([wbout], { type: 'application/octet-stream' }), |
|||
'线上充值明细导出.xlsx' |
|||
) |
|||
|
|||
isExporting.value = false |
|||
showExportInfoPanel.value = false |
|||
ElMessage.success('导出成功') |
|||
} |
|||
} catch (error) { |
|||
if (error instanceof Error && error.message === '导出已取消') { |
|||
return |
|||
} |
|||
console.log('导出失败', error) |
|||
isExporting.value = false |
|||
showExportInfoPanel.value = false |
|||
ElMessage.error('导出失败，请稍后重试') |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getInit({}) |
|||
getArea() |
|||
getPayType() |
|||
getCount() |
|||
getPayPlatform() |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
|
|||
<<<<<<< HEAD |
|||
|
|||
======= |
|||
>>>>>>> 703486fc8c3f87173c028d61161e502a2e07fdfc |
|||
@ -1,493 +0,0 @@ |
|||
<script setup> |
|||
// 这是活动管理页面 |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import _ from 'lodash' |
|||
import request from '@/util/http' |
|||
|
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/userinfo', |
|||
data: {} |
|||
}) |
|||
adminData.value = result |
|||
addObj.value.adminId = adminData.value.adminId |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
//活动表格数据 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索对象活动 |
|||
const activity = ref({}) |
|||
//搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}) |
|||
// 添加对象 |
|||
const addObj = ref({ |
|||
add: '' |
|||
}) |
|||
// 删除对象 |
|||
const delObj = ref({}) |
|||
|
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value.length === 2) { |
|||
activity.value.startDate = getTime.value[0] |
|||
activity.value.endDate = getTime.value[1] |
|||
} else { |
|||
activity.value.startDate = null |
|||
activity.value.endDate = null |
|||
} |
|||
|
|||
const requestData = { |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize, |
|||
activity: { |
|||
...activity.value, |
|||
activityName: activity.value.activityName, |
|||
status: activity.value.status |
|||
} |
|||
}; |
|||
console.log('搜索参数', requestData) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/recharge/activity/select', |
|||
method: 'post', |
|||
data: requestData |
|||
}) |
|||
|
|||
// 打印响应数据 |
|||
console.log('响应数据', result); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
// 存储分页总条目 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('请求失败') |
|||
} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 活动名称去空格 |
|||
const trim = () => { |
|||
if (activity.value.activityName) { |
|||
activity.value.activityName = activity.value.activityName.replace(/\s/g, ''); |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
trim(); |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
getObj.value = { |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
} |
|||
getTime.value = [] |
|||
activity.value = {} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
get() |
|||
}) |
|||
// 定义控制对话框显示的变量，并初始化为 false |
|||
const addActivityVisible = ref(false) |
|||
|
|||
// 定义 addActivity 方法 |
|||
const addActivity = () => { |
|||
console.log('点击了新增活动按钮'); |
|||
// 更新 addActivityVisible 的值为 true，显示对话框 |
|||
addActivityVisible.value = true; |
|||
}; |
|||
|
|||
// 关闭对话框的方法 |
|||
const closeAddActivityVisible = () => { |
|||
addActivityVisible.value = false; |
|||
}; |
|||
|
|||
// 处理每页显示数量变化 |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
|
|||
// 处理当前页码变化 |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
|
|||
// 定义提交方法 |
|||
const throttledAdd = async () => { |
|||
try { |
|||
// 过滤掉 'add' 字段 |
|||
const { add, ...validData } = addObj.value; |
|||
|
|||
// 发送 POST 请求提交表单数据 |
|||
const result = await request({ |
|||
url: '/recharge/activity/add', // 假设这是新增活动的接口 |
|||
method: 'post', |
|||
data: validData |
|||
}) |
|||
console.log('新增活动成功', result) |
|||
ElMessage.success('新增活动成功') |
|||
// 关闭对话框 |
|||
closeAddActivityVisible() |
|||
// 重新获取数据 |
|||
get() |
|||
} catch (error) { |
|||
console.log('新增活动失败', error) |
|||
ElMessage.error('新增活动失败') |
|||
} |
|||
} |
|||
|
|||
// 删除确认方法 |
|||
const delConfirm = async (row) => { |
|||
try { |
|||
delObj.value = row |
|||
// 发送删除请求 |
|||
const result = await request({ |
|||
url: '/recharge/activity/edit', // 假设这是删除活动的接口 |
|||
method: 'post', |
|||
data: delObj.value |
|||
}) |
|||
console.log('删除活动成功', result) |
|||
ElMessage.success('删除活动成功') |
|||
// 重新获取数据 |
|||
get() |
|||
} catch (error) { |
|||
console.log('删除活动失败', error) |
|||
ElMessage.error('删除活动失败') |
|||
} |
|||
} |
|||
|
|||
// 删除方法 |
|||
const del = (row) => { |
|||
delObj.value = row |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">活动名称：</el-text> |
|||
<el-input |
|||
v-model="activity.activityName" |
|||
style="width: 240px" |
|||
placeholder="请输入活动名称" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">添加时间：</el-text> |
|||
<el-date-picker |
|||
v-model="getTime" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
/> |
|||
<el-button style="margin-left: 10px" @click="getToday()" |
|||
>今</el-button |
|||
> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
</div> |
|||
<div class="head-card-btn"> |
|||
<el-button type="success" @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
<el-button |
|||
plain |
|||
@click="addActivity()" |
|||
style="color: #048efb; border: 1px solid #048efb" |
|||
>新增活动</el-button |
|||
> |
|||
</div> |
|||
<div> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column |
|||
type="index" |
|||
label="序号" |
|||
width="100px" |
|||
fixed="left" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="activityName" label="活动名称" /> |
|||
<el-table-column prop="startTime" label="开始时间"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="endTime" label="结束时间"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="rechargeRatio" label="免费兑换比"> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.rechargeRatio }}:1</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" label="状态"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.status === 1"> |
|||
<div class="status"> |
|||
<span class="green-dot"></span> |
|||
<span>进行中</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 0"> |
|||
<div class="status"> |
|||
<span class="red-dot"></span> |
|||
<span>未开始</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>已结束</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="添加人" /> |
|||
<el-table-column prop="createTime" label="添加时间"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="operation" label="操作"> |
|||
<template #default="scope"> |
|||
<el-popconfirm |
|||
title="确定将此条活动删除吗？" |
|||
@confirm="delConfirm(delObj.value)" |
|||
> |
|||
<template #reference> |
|||
<el-button type="primary" text @click="del(scope.row)"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" @click="confirm"> |
|||
确定 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
></el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-dialog |
|||
v-model="addActivityVisible" |
|||
title="新增活动" |
|||
width="500" |
|||
:before-close="closeAddActivityVisible" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
ref="Ref" |
|||
:model="addObj" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
> |
|||
<el-form-item prop="activityName" label="活动名称:"> |
|||
<el-input |
|||
v-model="addObj.activityName" |
|||
placeholder="请输入活动名称" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="freeGold" label="免费金币:"> |
|||
<el-radio-group v-model="addObj.freeGold"> |
|||
<el-radio value="0" @change="addObj.rechargeRatio = '0'" |
|||
>无赠送</el-radio |
|||
> |
|||
<el-radio value="1">有赠送</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="rechargeRatio" label="免费金币兑换比:"> |
|||
<el-input |
|||
v-model="addObj.rechargeRatio" |
|||
:disabled="addObj.freeGold === '0' ? true : false" |
|||
placeholder="请输入" |
|||
style="width: 80px" |
|||
/>：1 |
|||
<div style="color: grey"> |
|||
(提示：当前规则每{{ addObj.rechargeRatio }}新币可兑换1免费金币) |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="startTime" label="开始时间:"> |
|||
<el-date-picker |
|||
v-model="addObj.startTime" |
|||
type="datetime" |
|||
placeholder="请选择开始时间" |
|||
@change="handleStartTimeChange" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="endTime" label="结束时间:"> |
|||
<el-date-picker |
|||
v-model="addObj.endTime" |
|||
type="datetime" |
|||
placeholder="请选择结束时间" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="添加人:"> |
|||
<el-input v-model="adminData.name" disabled style="width: 220px" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeAddActivityVisible">取消</el-button> |
|||
<el-button type="primary" @click="throttledAdd"> 提交 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -1,964 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed, nextTick } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import { AiFillRead } from 'vue-icons-plus/ai' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import * as XLSX from 'xlsx' // 引入 xlsx 库 |
|||
|
|||
// 提取 XLSX 工具函数 |
|||
const { utils, writeFile } = XLSX |
|||
|
|||
// 变量 |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
adminData.value = result |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 搜索====================================== |
|||
// 搜索rechargeVo |
|||
const rechargeVo = ref({ |
|||
activityId: '', |
|||
rechargeWay: '', |
|||
area: '', |
|||
startDate: '', |
|||
endDate: '', |
|||
status: '' |
|||
}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索活动列表 |
|||
const activity = ref([]) |
|||
// 所有信息 |
|||
const allData = ref([]) |
|||
// 搜索地区列表 |
|||
const area = ref([]) |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref('all') |
|||
|
|||
// 充值方式选项 |
|||
const rechargeWay = ref([]) |
|||
// 获取充值方式的数据的接口 |
|||
const getPayWay = async function () { |
|||
try { |
|||
const result = await API({ url: '/recharge/recharge/getWay', data: {} }) |
|||
rechargeWay.value = result.data.filter((item) => item) |
|||
console.log('请求成功', result) |
|||
console.log('充值方式', rechargeWay.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// 方法 |
|||
// 合计数存储 |
|||
const trueGold = ref(0) |
|||
const trueRGold = ref(0) |
|||
const trueFGold = ref(0) |
|||
//全部 |
|||
const totalmoney = ref(0) |
|||
const totalRcoin = ref(0) |
|||
const totalFcoin = ref(0) |
|||
//待审核 |
|||
const pendingGold = ref(0) |
|||
const pendingRGold = ref(0) |
|||
const pendingFGold = ref(0) |
|||
// 已通过金币数 |
|||
const approvedGold = ref(0) |
|||
const approvedRGold = ref(0) |
|||
const approvedFGold = ref(0) |
|||
// 已驳回金币数 |
|||
const rejectedGold = ref(0) |
|||
const rejectedRGold = ref(0) |
|||
const rejectedFGold = ref(0) |
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 地区赋值 |
|||
if (adminData.value.area === '泰国') { |
|||
rechargeVo.value.areas = ['泰国', '越南'] |
|||
} else if (adminData.value.area !== '总部') { |
|||
rechargeVo.value.area = adminData.value.area |
|||
} |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value[0] && getTime.value[1]) { |
|||
rechargeVo.value.startDate = getTime.value[0] |
|||
rechargeVo.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = '' |
|||
rechargeVo.value.endDate = '' |
|||
} |
|||
|
|||
// 搜索参数赋值 |
|||
rechargeVo.value.sortField = sortField.value |
|||
rechargeVo.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/recharge/recharge', |
|||
data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } } |
|||
}) |
|||
// 复制一份 rechargeVo.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = ref({ |
|||
area: rechargeVo.value.area, |
|||
adminId: rechargeVo.value.adminId, |
|||
startDate: rechargeVo.value.startDate, |
|||
endDate: rechargeVo.value.endDate |
|||
}) |
|||
const result2 = await API({ |
|||
url: '/recharge/recharge/RechargeA', |
|||
data: { |
|||
...detailWithoutSort.value |
|||
} |
|||
}) |
|||
|
|||
// 检查 result2 是否为空 |
|||
if (!result2 || !result2.data || result2.data.length === 0) { |
|||
totalmoney.value = 0 |
|||
totalRcoin.value = 0 |
|||
totalFcoin.value = 0 |
|||
} |
|||
if (result2.data) { |
|||
result2.data.forEach((item) => { |
|||
switch (item.auditStatus) { |
|||
case '待审核': |
|||
// 若 item.raudit 为空则赋值为 0 |
|||
// 若 item.sumRaudit 为空则赋值为 0 |
|||
pendingGold.value = item.sumRaudit || 0 |
|||
pendingRGold.value = item.sumRaudit1 || 0 |
|||
pendingFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
case '已通过': |
|||
approvedGold.value = item.sumRaudit || 0 |
|||
approvedRGold.value = item.sumRaudit1 || 0 |
|||
approvedFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
case '已驳回': |
|||
rejectedGold.value = item.sumRaudit || 0 |
|||
rejectedRGold.value = item.sumRaudit1 || 0 |
|||
rejectedFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
} |
|||
}) |
|||
} |
|||
trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value |
|||
trueRGold.value = |
|||
pendingRGold.value + approvedRGold.value + rejectedRGold.value |
|||
trueFGold.value = |
|||
pendingFGold.value + approvedFGold.value + rejectedFGold.value |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
// 存储分页总数 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
rechargeVo.value.activityId = '' |
|||
rechargeVo.value.rechargeWay = '' |
|||
rechargeVo.value.area = '' |
|||
rechargeVo.value.startDate = '' |
|||
rechargeVo.value.endDate = '' |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
getTime.value = [] |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
// 设置结束时间为当天的 23:59:59 |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
// 格式化时间 |
|||
rechargeVo.value.startDate = moment(startDate).format('YYYY-MM-DD HH:mm:ss') |
|||
rechargeVo.value.endDate = moment(endDate).format('YYYY-MM-DD HH:mm:ss') |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
|
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
// 设置结束时间为昨天的 23:59:59 |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
// 格式化时间 |
|||
rechargeVo.value.startDate = moment(startDate).format('YYYY-MM-DD HH:mm:ss') |
|||
rechargeVo.value.endDate = moment(endDate).format('YYYY-MM-DD HH:mm:ss') |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
|
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
// 设置结束时间为当天的 23:59:59 |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
// 格式化时间 |
|||
rechargeVo.value.startDate = moment(startDate).format('YYYY-MM-DD HH:mm:ss') |
|||
rechargeVo.value.endDate = moment(endDate).format('YYYY-MM-DD HH:mm:ss') |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log('adminAll') |
|||
rechargeVo.value.status = '' |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
//待审核充值明细 |
|||
const adminWait = async function () { |
|||
rechargeVo.value.status = 0 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminWait') |
|||
trueGold.value = pendingGold.value |
|||
trueRGold.value = pendingRGold.value |
|||
trueFGold.value = pendingFGold.value |
|||
} |
|||
//已通过充值明细 |
|||
const adminPass = async function () { |
|||
rechargeVo.value.status = 1 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminPass') |
|||
trueGold.value = approvedGold.value |
|||
trueRGold.value = approvedRGold.value |
|||
trueFGold.value = approvedFGold.value |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = async function () { |
|||
rechargeVo.value.status = 2 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
trueGold.value = rejectedGold.value |
|||
trueRGold.value = rejectedRGold.value |
|||
trueFGold.value = rejectedFGold.value |
|||
console.log('adminReject') |
|||
} |
|||
//点击标签页 |
|||
const handleClick = function (tab, event) { |
|||
if (tab.props.name === 'all') { |
|||
adminAll() |
|||
} else if (tab.props.name === 'wait') { |
|||
adminWait() |
|||
} else if (tab.props.name === 'pass') { |
|||
adminPass() |
|||
} else if (tab.props.name === 'reject') { |
|||
adminReject() |
|||
} |
|||
} |
|||
// 获取活动名称 |
|||
const getActivity = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/recharge/activity/select', data: {} }) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
activity.value = result.data |
|||
console.log('activity', activity.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
console.log('888888888880000000') |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/recharge/user/search', data: {} }) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功地区', result.data) |
|||
// 存储地区信息 |
|||
area.value = result.data |
|||
console.log('地区', area.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
const checkNumber = function () { |
|||
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
|||
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)) |
|||
if ( |
|||
getObj.value.pageNum > 0 && |
|||
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize) |
|||
) { |
|||
getObj.value.pageNum = parseInt(getObj.value.pageNum) |
|||
console.log('输入的数字合法') |
|||
get() |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
getAdminData() |
|||
get() |
|||
getActivity() |
|||
getPayWay() |
|||
getArea() |
|||
}) |
|||
|
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
// 处理排序事件 |
|||
const handleSortChange = (column) => { |
|||
console.log('排序字段：', column.prop) |
|||
console.log('排序方式：', column.order) |
|||
if (column.prop === 'paidGold') { |
|||
sortField.value = 'paid_gold' |
|||
} else if (column.prop === 'freeGold') { |
|||
sortField.value = 'free_gold' |
|||
} else if (column.prop === 'rechargeTime') { |
|||
sortField.value = 'recharge_time' |
|||
} else if (column.prop === 'createTime') { |
|||
sortField.value = 'create_time' |
|||
} else if (column.prop === 'rechargeGold') { |
|||
sortField.value = 'recharge_gold' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
get() |
|||
} |
|||
|
|||
// 导出Excel相关变量和方法 |
|||
const headers = [ |
|||
'序号', |
|||
'姓名', |
|||
'精网号', |
|||
'所属地区', |
|||
'活动名称', |
|||
'货币名称', |
|||
'充值金额', |
|||
'充值方式', |
|||
'永久金币', |
|||
'免费金币', |
|||
'备注', |
|||
'支付方式', |
|||
'提交人', |
|||
'状态', |
|||
'驳回理由', |
|||
'交款时间' |
|||
] |
|||
|
|||
const showExportInfoPanel = ref(false) |
|||
|
|||
// 点击导出按钮直接显示信息面板 |
|||
const exportExcel = async () => { |
|||
try { |
|||
console.log('点击导出按钮，尝试显示信息面板'); |
|||
showExportInfoPanel.value = true; |
|||
await nextTick(); // 组件更新显示信息面板 |
|||
} catch (error) { |
|||
console.error('显示信息面板失败:', error); |
|||
ElMessage.error('显示信息面板失败，请稍后重试'); |
|||
} |
|||
}; |
|||
|
|||
// 新增导出状态相关变量 |
|||
const exportProgress = ref(0) |
|||
const isExporting = ref(false) |
|||
const exportCancelToken = ref(null) |
|||
|
|||
// 移除未使用的映射 |
|||
// const platformMap = { |
|||
// 0: '初始化金币', |
|||
// 1: 'ERP系统', |
|||
// 2: 'Homily Chart', |
|||
// 3: 'Homily Link', |
|||
// 4: '金币系统' |
|||
// }; |
|||
// const updateTypeMap = { |
|||
// 0: '充值', |
|||
// 1: '消费', |
|||
// 2: '退款', |
|||
// 3: '其他' |
|||
// }; |
|||
|
|||
// 优化后的导出方法 |
|||
const doExportExcel = async () => { |
|||
try { |
|||
isExporting.value = true |
|||
exportProgress.value = 0 |
|||
showExportInfoPanel.value = false |
|||
|
|||
// 初始化 Excel |
|||
const wb = utils.book_new() |
|||
const ws = utils.aoa_to_sheet([headers]) |
|||
utils.book_append_sheet(wb, ws, 'Sheet1') |
|||
|
|||
// 流式写入配置 |
|||
const writer = { |
|||
write: (d, o) => { |
|||
if (!d) return |
|||
utils.sheet_add_aoa(ws, d, { origin: -1 }) |
|||
} |
|||
} |
|||
|
|||
let page = 1 |
|||
let totalExported = 0 |
|||
const pageSize = 5000 // 每次请求 5000 条 |
|||
let totalRecords = 0 |
|||
|
|||
// 首次请求获取总记录数 |
|||
const firstResult = await API({ |
|||
url: '/recharge/recharge', |
|||
method: 'post', |
|||
data: { |
|||
pageNum: 1, |
|||
pageSize, |
|||
rechargeVo: { ...rechargeVo.value } |
|||
} |
|||
}) |
|||
totalRecords = firstResult.data.total |
|||
|
|||
// 创建取消令牌 |
|||
const CancelToken = axios.CancelToken |
|||
exportCancelToken.value = CancelToken.source() |
|||
|
|||
// 处理首次请求的数据 |
|||
const firstData = firstResult.data.list |
|||
if (firstData.length) { |
|||
const rows = firstData.map((row, index) => [ |
|||
totalExported + index + 1, |
|||
row.username || '', |
|||
row.jwcode || '', |
|||
row.area || '', |
|||
row.activityName || '', |
|||
// 假设货币名称字段在数据中为 currencyName，若不存在请替换为实际字段 |
|||
row.currencyName || '', |
|||
(row.paidGold / 100).toFixed(2) || '0.00', |
|||
row.rechargeWay || '', |
|||
(row.paidGold / 100).toFixed(2) || '0.00', |
|||
(row.freeGold / 100).toFixed(2) || '0.00', |
|||
row.remark || '', |
|||
row.payWay || '', |
|||
row.name || '', |
|||
// 根据状态值显示对应文本 |
|||
row.status === 1 ? '已通过' : row.status === 0 ? '待审核' : row.status === 2 ? '已驳回' : '', |
|||
row.reson || '', |
|||
moment(row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') || '' |
|||
]) |
|||
writer.write(rows) |
|||
totalExported += firstData.length |
|||
exportProgress.value = Math.round((totalExported / totalRecords) * 100) |
|||
page++ |
|||
} |
|||
|
|||
while (totalExported < totalRecords) { |
|||
const result = await API({ |
|||
url: '/recharge/recharge', |
|||
method: 'post', |
|||
data: { |
|||
pageNum: page, |
|||
pageSize, |
|||
rechargeVo: { ...rechargeVo.value } |
|||
}, |
|||
cancelToken: exportCancelToken.value.token |
|||
}) |
|||
|
|||
const data = result.data.list |
|||
if (!data.length) break |
|||
|
|||
// 转换数据 |
|||
const rows = data.map((row, index) => [ |
|||
totalExported + index + 1, |
|||
row.username || '', |
|||
row.jwcode || '', |
|||
row.area || '', |
|||
row.activityName || '', |
|||
// 假设货币名称字段在数据中为 currencyName，若不存在请替换为实际字段 |
|||
row.currencyName || '', |
|||
(row.paidGold / 100).toFixed(2) || '0.00', |
|||
row.rechargeWay || '', |
|||
(row.paidGold / 100).toFixed(2) || '0.00', |
|||
(row.freeGold / 100).toFixed(2) || '0.00', |
|||
row.remark || '', |
|||
row.payWay || '', |
|||
row.name || '', |
|||
// 根据状态值显示对应文本 |
|||
row.status === 1 ? '已通过' : row.status === 0 ? '待审核' : row.status === 2 ? '已驳回' : '', |
|||
row.reson || '', |
|||
moment(row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') || '' |
|||
]) |
|||
|
|||
// 流式写入 |
|||
writer.write(rows) |
|||
totalExported += data.length |
|||
exportProgress.value = Math.round((totalExported / totalRecords) * 100) |
|||
|
|||
// 内存控制：每 500 页释放内存 |
|||
if (page % 500 === 0) { |
|||
await new Promise(resolve => setTimeout(resolve, 0)) |
|||
} |
|||
|
|||
page++ |
|||
} |
|||
|
|||
// 生成最终文件 |
|||
writeFile(wb, '所有充值明细.xlsx') |
|||
ElMessage.success(`导出成功，共${totalExported}条数据`) |
|||
} catch (error) { |
|||
if (!axios.isCancel(error)) { |
|||
ElMessage.error(`导出失败: ${error.message}`) |
|||
} |
|||
} finally { |
|||
isExporting.value = false |
|||
exportCancelToken.value = null |
|||
} |
|||
} |
|||
|
|||
// 新增取消导出方法 |
|||
const cancelExport = () => { |
|||
if (exportCancelToken.value) { |
|||
exportCancelToken.value.cancel('用户取消导出') |
|||
ElMessage.warning('导出已取消') |
|||
isExporting.value = false |
|||
} |
|||
} |
|||
|
|||
const putExcel = ref({ |
|||
startDate: new Date(), |
|||
endDate: new Date(new Date().setDate(new Date().getDate() + 1)) |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">活动名称：</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.activityId" |
|||
placeholder="请选择活动名称" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in activity" |
|||
:key="item.activityId" |
|||
:label="item.activityName" |
|||
:value="item.activityId" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<!-- <el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">充值方式：</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.rechargeWay" |
|||
placeholder="请选择充值方式" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in rechargeWay" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col>--> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element" v-if="adminData.area == '总部'"> |
|||
<el-text class="mx-1" size="large">所属地区：</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.area" |
|||
placeholder="请选择所属地区" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="16"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">充值时间：</el-text> |
|||
<el-date-picker |
|||
v-model="getTime" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
/> |
|||
<el-button style="margin-left: 10px" @click="getToday()" |
|||
>今</el-button |
|||
> |
|||
<el-button @click="getYesterday()">昨</el-button> |
|||
<el-button @click="get7Days()">近7天</el-button> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-btn"> |
|||
<el-button type="success" @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
<!-- 新增导出按钮 --> |
|||
<el-button type="primary" @click="exportExcel">导出excel</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<el-tabs |
|||
v-model="activeName" |
|||
type="card" |
|||
class="demo-tabs" |
|||
@tab-click="handleClick" |
|||
> |
|||
<el-tab-pane label="全部" name="all"></el-tab-pane> |
|||
<el-tab-pane label="待审核" name="wait"></el-tab-pane> |
|||
<el-tab-pane label="已通过" name="pass"></el-tab-pane> |
|||
<el-tab-pane label="已驳回" name="reject"></el-tab-pane> |
|||
<div> |
|||
充值金额：{{ (trueRGold / 100).toFixed(2) }}新币，永久金币：{{ |
|||
(trueRGold / 100).toFixed(2) |
|||
}}金币，免费金币：{{ (totalFcoin / 100).toFixed(2) }}金币 |
|||
</div> |
|||
</el-tabs> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 520px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
height="520px" |
|||
@sort-change="handleSortChange" |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
label="序号" |
|||
width="70px" |
|||
fixed="left" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="left" |
|||
prop="username" |
|||
label="姓名" |
|||
width="100px" |
|||
/> |
|||
<el-table-column |
|||
fixed="left" |
|||
prop="jwcode" |
|||
label="精网号" |
|||
width="110px" |
|||
/> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column |
|||
prop="activityName" |
|||
label="活动名称" |
|||
width="150px" |
|||
/> |
|||
<el-table-column prop="" label="货币名称" width="120px" /> |
|||
<el-table-column |
|||
prop="paidMoney" |
|||
label="充值金额" |
|||
width="120px" |
|||
sortable=" custom" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.paidGold / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeWay" |
|||
label="充值方式" |
|||
width="100px" |
|||
/> |
|||
<el-table-column |
|||
prop="paidGold" |
|||
label="永久金币" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.paidGold / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="freeGold" |
|||
label="免费金币" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.freeGold / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="payWay" label="支付方式" width="100px" /> |
|||
<el-table-column |
|||
prop="rechargeVoucher" |
|||
label="支付凭证" |
|||
width="150px" |
|||
> |
|||
<template #default="scope"> |
|||
<el-image |
|||
:preview-src-list="[scope.row.rechargeVoucher]" |
|||
:preview-teleported="true" |
|||
:src="scope.row.rechargeVoucher" |
|||
alt="凭证" |
|||
style="width: 50px; height: 50px" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="提交人" width="100px" /> |
|||
<el-table-column prop="status" label="状态" width="100px"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.status === 1"> |
|||
<div class="status"> |
|||
<span class="green-dot"></span> |
|||
<span>已通过</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 0"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>待审核</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="red-dot"></span> |
|||
<span>已驳回</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="reson" |
|||
label="驳回理由" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeTime" |
|||
sortable="“custom”" |
|||
label="交款时间" |
|||
width="200px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ |
|||
moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
sortable="“custom”" |
|||
label="提交时间" |
|||
width="200px" |
|||
/> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
></el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 导出excel提前展示的信息面板 --> |
|||
<el-dialog |
|||
v-model="showExportInfoPanel" |
|||
title="导出信息确认" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div class="info-panel-header">导出信息</div> |
|||
<div v-if="!rechargeVo.activityId && !rechargeVo.area && !rechargeVo.startDate && !rechargeVo.endDate"> |
|||
你正在导出所有数据 |
|||
</div> |
|||
<div v-else> |
|||
你正在导出以下数据 |
|||
</div> |
|||
<div v-if="rechargeVo.activityId">活动名称：{{ rechargeVo.activityId || '' }}</div> |
|||
<div v-if="rechargeVo.area">所属地区：{{ rechargeVo.area || '' }}</div> |
|||
<div v-if="rechargeVo.startDate || rechargeVo.endDate"> |
|||
<span>充值时间：</span> |
|||
<span>{{ rechargeVo.startDate ? moment(rechargeVo.startDate).format('YYYY-MM-DD HH:mm:ss') : '无起始时间' }} 至 {{ rechargeVo.endDate ? moment(rechargeVo.endDate).format('YYYY-MM-DD HH:mm:ss') : '无结束时间' }}</span> |
|||
</div> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showExportInfoPanel = false">取消</el-button> |
|||
<el-button type="primary" @click="doExportExcel">导出</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<!-- 导出进度弹窗 --> |
|||
<el-dialog |
|||
v-model="isExporting" |
|||
title="正在导出" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
:show-close="false" |
|||
> |
|||
<el-progress |
|||
:percentage="exportProgress" |
|||
:format="(percentage) => `${percentage}%`" |
|||
/> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button type="danger" @click="cancelExport">取消导出</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -1,500 +0,0 @@ |
|||
<script setup> |
|||
// 这是客户金币余额页面 |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import { ta } from 'element-plus/es/locales.mjs' |
|||
import API from '@/util/http' |
|||
|
|||
// 变量 |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const dialogVisible = ref(false) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
adminData.value = result |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 计算用户各金币总数的不分页对象 |
|||
const tableAllData = ref([]) |
|||
// 各金币总数 合计数 |
|||
const rechargeCoin = ref(0) |
|||
const freeCoin = ref(0) |
|||
const taskCoin = ref(0) |
|||
//客户消费记录 |
|||
const tableCountData = ref([]) |
|||
const userInfo = ref({}) |
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索detailY |
|||
const detailY = ref({}) |
|||
// 不分页的搜索对象 |
|||
const getAllObj = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
|
|||
// 支付方式选项 |
|||
const updateType = [ |
|||
{ |
|||
value: '0', |
|||
label: '充值' |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '消费' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '退款' |
|||
} |
|||
] |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 2) * 38 + "px"; |
|||
// }); |
|||
|
|||
// 方法 |
|||
// 搜索=========================================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 地区赋值 |
|||
if (adminData.value.area === '泰国') { |
|||
detailY.value.areas = ['泰国', '越南'] |
|||
} else if (adminData.value.area !== '总部') { |
|||
detailY.value.area = adminData.value.area |
|||
} |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value[0] != '' && getTime.value[1] != '') { |
|||
detailY.value.startDate = getTime.value[0] |
|||
detailY.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
detailY.value.startDate = '' |
|||
detailY.value.endDate = '' |
|||
} |
|||
// 添加排序字段和排序方式到请求参数 |
|||
detailY.value.sortField = sortField.value |
|||
detailY.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/detailY/select', |
|||
data: { ...getObj.value, detailYgold: { ...detailY.value } } |
|||
}) |
|||
// 获取合计数 |
|||
const result2 = await API({ |
|||
url: '/detailY', |
|||
data: { |
|||
...getAllObj.value, |
|||
detailY: { ...detailY.value } |
|||
} |
|||
}) |
|||
// 判断精网号是否存在，假设精网号不存在时 result.data.list 为空数组 |
|||
if (result.data.list.length === 0) { |
|||
// 将表格数据设置为空数组 |
|||
tableData.value = [] |
|||
// 将合计数设置为 0 |
|||
rechargeCoin.value = 0 |
|||
freeCoin.value = 0 |
|||
taskCoin.value = 0 |
|||
// 将不分页表格数据设置为 null |
|||
tableAllData.value = null |
|||
// 分页总数设置为 0 |
|||
total.value = 0 |
|||
// ElMessage.warning('精网号不存在，请检查输入') |
|||
} else { |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
tableAllData.value = result2.data |
|||
// 下列各数除以 100 并保留两位小数 |
|||
rechargeCoin.value = parseFloat((tableAllData.value.sumR / 100).toFixed(2)) |
|||
freeCoin.value = parseFloat((tableAllData.value.sumF / 100).toFixed(2)) |
|||
taskCoin.value = parseFloat((tableAllData.value.sumT / 100).toFixed(2)) |
|||
// 存储分页总数 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 精网号去空格，同时处理 detailY 和 putExcel 中的 jwcode |
|||
const trimJwCode = () => { |
|||
if (detailY.value.jwcode) { |
|||
detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, ''); |
|||
} |
|||
|
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
trimJwCode(); |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
detailY.value = {} |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
get() |
|||
} |
|||
const cellClick = function (row, column) { |
|||
console.log('cellClick', column.label) |
|||
if (column.label == '姓名') { |
|||
dialogVisible.value = true |
|||
userInfo.value = row |
|||
} |
|||
} |
|||
// 验证跳转输入框的数字是否合法 |
|||
const checkNumber = function () { |
|||
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
|||
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)) |
|||
if ( |
|||
getObj.value.pageNum > 0 && |
|||
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize) |
|||
) { |
|||
getObj.value.pageNum = parseInt(getObj.value.pageNum) |
|||
console.log('输入的数字合法') |
|||
get() |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 处理排序事件 |
|||
const handleSortChange = (column) => { |
|||
console.log('排序字段：', column.prop) |
|||
console.log('排序方式：', column.order) |
|||
if (column.prop === 'buyJb') { |
|||
sortField.value = 'buy_jb' |
|||
} else if (column.prop === 'coreJb') { |
|||
sortField.value = 'core_jb' |
|||
} else if (column.prop === 'free6') { |
|||
sortField.value = 'free_6' |
|||
} else if (column.prop === 'free12') { |
|||
sortField.value = 'free_12' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
get() |
|||
} |
|||
|
|||
//选地区 |
|||
const area = [ |
|||
{ |
|||
value: '马来西亚', |
|||
label: '马来西亚' |
|||
}, |
|||
{ |
|||
value: '新加坡', |
|||
label: '新加坡' |
|||
}, |
|||
{ |
|||
value: '香港', |
|||
label: '香港' |
|||
}, |
|||
{ |
|||
value: '泰国', |
|||
label: '泰国' |
|||
}, |
|||
{ |
|||
value: '加拿大', |
|||
label: '加拿大' |
|||
}, |
|||
{ |
|||
value: '越南HCM', |
|||
label: '越南HCM' |
|||
} |
|||
] |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
await get() |
|||
}) |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号：</el-text> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
style="width: 240px" |
|||
placeholder="请输入精网号" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div |
|||
class="head-card-element" |
|||
style="margin-left: 50px" |
|||
v-if="adminData.area == '总部'" |
|||
> |
|||
<el-text class="mx-1" size="large">所属地区：</el-text> |
|||
<el-select |
|||
v-model="detailY.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="head-card-btn"> |
|||
<el-button type="success" @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
现有金币：永久金币：{{ Math.abs(rechargeCoin) }}，免费金币：{{ |
|||
Math.abs(freeCoin) |
|||
}}，任务金币：{{ Math.abs(taskCoin) }} |
|||
</div> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 626px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
@cellClick="cellClick" |
|||
style="width: 100%" |
|||
height="715px" |
|||
@sort-change="handleSortChange" |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
label="序号" |
|||
width="100px" |
|||
fixed="left" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="姓名" width="200" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="area" label="所属地区" width="120" /> |
|||
<el-table-column |
|||
prop="allJb" |
|||
label="总金币" |
|||
width="120" |
|||
aligh="center" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
(scope.row.free12 + |
|||
scope.row.free6 + |
|||
scope.row.coreJb + |
|||
scope.row.buyJb) / |
|||
100 |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="buyJb" |
|||
label="永久金币" |
|||
sortable="custom" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.buyJb) / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="freeJb" label="免费金币" width="110"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
Math.abs(scope.row.free6 + scope.row.free12) / 100 |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="free6" |
|||
label=" 6月份到期免费金币" |
|||
sortable="custom" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.free6 / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="free12" |
|||
label="12月份到期免费金币" |
|||
sortable="custom" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.free12 / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="coreJb" |
|||
label="任务金币" |
|||
sortable="custom" |
|||
width="130" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.coreJb) / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="rcoin" label="历史充值" width="150"> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.rcoin / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="scoin" label="历史消费" width="150"> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.scoin) / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<!-- 分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
></el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- 客户信息弹框 --> |
|||
<el-dialog |
|||
title="客户信息" |
|||
v-model="dialogVisible" |
|||
width="50%" |
|||
@before-close="dialogVisible = false" |
|||
> |
|||
<el-card> |
|||
<div class="custom-box"> |
|||
<div>姓名：{{ userInfo.name }}</div> |
|||
<br /> |
|||
<div>精网号：{{ userInfo.jwcode }}</div> |
|||
<div>地区：{{ userInfo.area }}</div> |
|||
<div>历史充值：{{ userInfo.rcoin }}</div> |
|||
<div>历史消费：{{ userInfo.scoin }}</div> |
|||
</div> |
|||
</el-card> |
|||
<!-- t --> |
|||
<div style="height: 450px; overflow-y: auto"> |
|||
<el-table :data="tableCountData" style="width: 100%" height="715px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="" label="商品" width="120" /> |
|||
<el-table-column sortable prop="" label="消费金币总数" width="180" /> |
|||
<el-table-column sortable prop="" label="永久金币" width="120" /> |
|||
<el-table-column sortable prop="" label="免费金币" width="120" /> |
|||
<el-table-column sortable prop="" label="任务金币" width="120" /> |
|||
<el-table-column sortable prop="" label="时间" width="120" /> |
|||
</el-table> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
.custom-box { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 5px; |
|||
div:nth-child(1) { |
|||
flex: 1 0 100%; |
|||
} |
|||
div { |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue