zhaoln
4 weeks 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