You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
444 lines
12 KiB
444 lines
12 KiB
<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 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 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.startDate != '' && getTime.value.endDate != '') {
|
|
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 }
|
|
}
|
|
})
|
|
// 将响应结果存储到响应式数据中
|
|
console.log('请求成功', result)
|
|
// console.log("请求成功2", result2);
|
|
// 存储表格数据
|
|
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))
|
|
// console.log("tableAllData", tableAllData.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 () {
|
|
detailY.value = {}
|
|
sortField.value = ''
|
|
sortOrder.value = ''
|
|
get()
|
|
}
|
|
|
|
// 验证跳转输入框的数字是否合法
|
|
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 === 'taskJb') {
|
|
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()
|
|
})
|
|
</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 @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"
|
|
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"
|
|
layout="slot"
|
|
:total="total"
|
|
>
|
|
<div>共{{ total }}条,每页</div>
|
|
<el-select
|
|
v-model="getObj.pageSize"
|
|
class="page-size"
|
|
@change="get()"
|
|
style="width: 80px"
|
|
>
|
|
<el-option
|
|
v-for="item in [5, 10, 20, 50, 100]"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
></el-option>
|
|
</el-select>
|
|
<div>条</div>
|
|
</el-pagination>
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next,slot"
|
|
:page-size="getObj.pageSize"
|
|
:total="total"
|
|
:current-page="getObj.pageNum"
|
|
@current-change="get"
|
|
>
|
|
<div>跳至</div>
|
|
<el-input
|
|
v-model="getObj.pageNum"
|
|
style="width: 40px"
|
|
@change="checkNumber"
|
|
/>
|
|
<div>页</div>
|
|
</el-pagination>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</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>
|