zhaoln
7 months ago
9 changed files with 561 additions and 52 deletions
-
2gold-system/src/router/index.js
-
31gold-system/src/views/goldBeen/goldenBeenConsum.vue
-
53gold-system/src/views/goldBeen/goldenBeenDetail.vue
-
494gold-system/src/views/goldBeen/onLineDetail.vue
-
1gold-system/src/views/index.vue
-
2gold-system/src/views/login.vue
-
4gold-system/src/views/recharge/adminRecharge.vue
-
24gold-system/src/views/recharge/allRecharge.vue
-
2gold-system/stats.html
@ -0,0 +1,494 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="deptName" label="地区"> |
|||
<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" label="订单号"> |
|||
<el-input |
|||
v-model="detailY.orderNo" |
|||
placeholder="请输入订单号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="type" label="充值类型"> |
|||
<el-input |
|||
v-model="detailY.type" |
|||
placeholder="请输入充值类型" |
|||
style="width: 220px" |
|||
/> |
|||
</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-form-item prop="createTime" label="充值时间"> |
|||
<el-date-picker |
|||
v-model="detailY.createTime" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:unlinkPanels="true" |
|||
/> |
|||
</el-form-item> |
|||
<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="exportExcel">导出excel</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<p>金豆总数：充值金豆总数：{{ countValue }}合计金额数:{{ priceValue }}</p> |
|||
<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> |
|||
<!-- <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="successTime" |
|||
label="充值时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
!!scope.row.successTime |
|||
? 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 } 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 dialogVisible = ref(false) |
|||
const excelData = reactive({ |
|||
jwcode: '', |
|||
area: '', |
|||
timegap: '', |
|||
startTime: '', |
|||
endTime: '' |
|||
}) |
|||
const priceValue = ref(0) |
|||
const countValue = ref(0) |
|||
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 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: '', |
|||
createTime: '' |
|||
}) |
|||
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, endTime] = detailY.value.createTime |
|||
console.log(startTime, endTime) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/SearchPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: isExport.value ? excelData.jwcode : detailY.value.jwcode, |
|||
deptName: isExport.value ? excelData.area : detailY.value.deptName, |
|||
startTime: isExport.value ? excelData.startTime : startTime || '', |
|||
endTime: isExport.value ? excelData.endTime : endTime || '', |
|||
payStyle: isExport.value ? '' : detailY.value.payStyle, |
|||
// type: isExport.value ? '' : detailY.value.type, |
|||
orderNo: isExport.value ? '' : detailY.value.orderNo, |
|||
sortField, |
|||
sortOrder |
|||
}, |
|||
pageNum: isExport.value ? '' : getObj.value.pageNum, |
|||
pageSize: isExport.value ? '' : 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 search = function () { |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
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 |
|||
// typeList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取金豆数接口 |
|||
const getCount = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getRechargeTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.createTime[0], |
|||
endTime: detailY.value.createTime[1], |
|||
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) |
|||
} |
|||
} |
|||
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> |
|||
2
gold-system/stats.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue