zry
1 week ago
5 changed files with 1033 additions and 400 deletions
-
3.env.development
-
2src/router/index.js
-
4src/util/request.js
-
549src/views/usergold/clientCountBalance.vue
-
873src/views/usergold/clientCountDetail.vue
@ -1,3 +1,550 @@ |
|||||
|
<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 isLoadingmarket = ref(false); |
||||
|
const market = ref([]) |
||||
|
const getmarket = async () => { |
||||
|
isLoadingmarket.value = true; |
||||
|
try { |
||||
|
const result = await API({ |
||||
|
url: 'http://192.168.8.220:8081/general/market' |
||||
|
}); |
||||
|
console.log('获取地区数据成功',result) |
||||
|
// 假设后端返回的是字符串数组，转换为 { value, label } 格式 |
||||
|
if (Array.isArray(result.data) && typeof result.data[0] === 'string') { |
||||
|
market.value = result.data.map(item => ({ value: item, label: item })); |
||||
|
} else { |
||||
|
market.value = result.data; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('获取地区数据失败:', error); |
||||
|
ElMessage.error('获取地区数据失败，请稍后重试'); |
||||
|
// 可以提供默认数据 |
||||
|
market.value = []; |
||||
|
} finally { |
||||
|
isLoadingmarket.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]) |
||||
|
|
||||
|
// 新增金币总数变量 |
||||
|
const goldtotal = ref(0) |
||||
|
|
||||
|
// 计算用户各金币总数的不分页对象 |
||||
|
const tableAllData = ref([]) |
||||
|
// 各金币字段 |
||||
|
const permanentGold = ref(0) // 修改为 currentPermanentGold 对应字段 |
||||
|
const freeJuneGold = ref(0) // 修改为 currentFreeJune 对应字段 |
||||
|
const freeDecemberGold = ref(0) // 修改为 currentFreeDecember 对应字段 |
||||
|
const taskGold = ref(0) // 修改为 currentTaskGold 对应字段 |
||||
|
const freeGold = ref(0) // 计算免费金币总数 |
||||
|
|
||||
|
|
||||
|
|
||||
|
//客户消费记录 |
||||
|
const tableCountData = ref([]) |
||||
|
const userInfo = ref({}) |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 搜索=========================================== |
||||
|
//分页总条目 |
||||
|
const total = ref(100) |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]) |
||||
|
// 搜索User |
||||
|
const user = ref({}) |
||||
|
// 不分页的搜索对象 |
||||
|
const getAllObj = ref({}) |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 50 |
||||
|
}) |
||||
|
// 新增排序字段和排序方式 |
||||
|
const sortField = ref('') |
||||
|
const sortOrder = ref('') |
||||
|
|
||||
|
|
||||
|
|
||||
|
// //表格高度 |
||||
|
// const tableHeight = computed(function () { |
||||
|
// return (getObj.value.pageSize + 2) * 38 + "px"; |
||||
|
// }); |
||||
|
|
||||
|
// 方法 |
||||
|
// 搜索=========================================================================== |
||||
|
// 搜索方法 |
||||
|
const get = async function (val) { |
||||
|
try { |
||||
|
// 地区赋值 |
||||
|
// if (adminData.value.market === '泰国') { |
||||
|
// user.value.markets = ['泰国', '越南'] |
||||
|
// } else if (adminData.value.market !== '总部') { |
||||
|
// user.value.market = adminData.value.market |
||||
|
// } |
||||
|
// 搜索参数页码赋值 |
||||
|
if (typeof val === 'number') { |
||||
|
getObj.value.pageNum = val |
||||
|
} |
||||
|
// // 搜索参数时间赋值 |
||||
|
// if (getTime.value != null) { |
||||
|
// if (getTime.value[0] != '' && getTime.value[1] != '') { |
||||
|
// user.value.startDate = getTime.value[0] |
||||
|
// user.value.endDate = getTime.value[1] |
||||
|
// } |
||||
|
// } else { |
||||
|
// user.value.startDate = '' |
||||
|
// user.value.endDate = '' |
||||
|
// } |
||||
|
// 添加排序字段和排序方式到请求参数 |
||||
|
user.value.sortField = sortField.value |
||||
|
user.value.sortOrder = sortOrder.value |
||||
|
console.log('搜索参数', getObj.value) |
||||
|
|
||||
|
// 发送POST请求 |
||||
|
|
||||
|
const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数 |
||||
|
console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数 |
||||
|
|
||||
|
//console.log('请求参数', requestData); |
||||
|
|
||||
|
const result = await API({ |
||||
|
url: 'http://192.168.8.220:8081/goldDetail/getGold', |
||||
|
method: 'post', |
||||
|
data: { ...getObj.value, user: { ...user.value } } |
||||
|
}) |
||||
|
console.log('响应数据', result) |
||||
|
tableData.value = result.data.list |
||||
|
total.value = result.data.total |
||||
|
|
||||
|
|
||||
|
// 获取合计数 |
||||
|
const resultGoldTotal = await API({ |
||||
|
url: 'http://192.168.8.220:8081/goldDetail/goldTotal', |
||||
|
data: { |
||||
|
...getAllObj.value, |
||||
|
user: { ...user.value } |
||||
|
} |
||||
|
}) |
||||
|
// 判断精网号是否存在，假设精网号不存在时 result.data.list 为空数组 |
||||
|
if (result.data.list.length === 0) { |
||||
|
// 将表格数据设置为空数组 |
||||
|
tableData.value = [] |
||||
|
// 将合计数设置为 0 |
||||
|
permanentGold.value = 0 |
||||
|
freeJuneGold.value = 0 |
||||
|
freeDecemberGold.value = 0 |
||||
|
taskGold.value = 0 |
||||
|
goldtotal.value = 0 |
||||
|
|
||||
|
// // 新增金币总数变量 |
||||
|
// const goldtotal = ref(0) |
||||
|
|
||||
|
// 分页总数设置为 0 |
||||
|
total.value = 0 |
||||
|
// ElMessage.warning('精网号不存在，请检查输入') |
||||
|
} else { |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('总数据请求成功', result) |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.list |
||||
|
console.log('tableData', tableData.value) |
||||
|
|
||||
|
// 从接口返回数据中获取各金币数值 |
||||
|
if (resultGoldTotal.data) { |
||||
|
permanentGold.value = parseFloat(resultGoldTotal.data.permanentGold.toFixed(2)) |
||||
|
freeGold.value = parseFloat(resultGoldTotal.data.freeGold.toFixed(2)) |
||||
|
taskGold.value = parseFloat(resultGoldTotal.data.taskGold.toFixed(2)) |
||||
|
goldtotal.value = parseFloat(resultGoldTotal.data.goldtotal.toFixed(2)) |
||||
|
} else { |
||||
|
console.error('合计数数据格式错误', resultGoldTotal) |
||||
|
ElMessage.error('获取合计数失败，请稍后重试') |
||||
|
} |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.total |
||||
|
console.log('total', total.value) |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 精网号去空格，同时处理 user 和 putExcel 中的 jwcode |
||||
|
const trimJwCode = () => { |
||||
|
if (user.value.jwcode) { |
||||
|
user.value.jwcode = user.value.jwcode.replace(/\s/g, ''); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
// 搜索 |
||||
|
const search = function () { |
||||
|
trimJwCode(); |
||||
|
getObj.value.pageNum = 1 |
||||
|
get() |
||||
|
} |
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
user.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 === 'currentPermanentGold') { |
||||
|
sortField.value = 'current_permanent_gold' |
||||
|
} else if (column.prop === 'currentTaskGold') { |
||||
|
sortField.value = 'current_task_gold' |
||||
|
} else if (column.prop === 'currentFreeJune') { |
||||
|
sortField.value = 'current_free_june' |
||||
|
} else if (column.prop === 'currentFreeDecember') { |
||||
|
sortField.value = 'current_free_december' |
||||
|
} |
||||
|
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
||||
|
get() |
||||
|
} |
||||
|
|
||||
|
// //选地区 |
||||
|
// const market = [ |
||||
|
// { |
||||
|
// value: '马来西亚', |
||||
|
// label: '马来西亚' |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '新加坡', |
||||
|
// label: '新加坡' |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '香港', |
||||
|
// label: '香港' |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '泰国', |
||||
|
// label: '泰国' |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '加拿大', |
||||
|
// label: '加拿大' |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '越南HCM', |
||||
|
// label: '越南HCM' |
||||
|
// } |
||||
|
// ] |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await getAdminData() |
||||
|
await get() |
||||
|
await getmarket() |
||||
|
}) |
||||
|
const handlePageSizeChange = function (val) { |
||||
|
getObj.value.pageSize = val |
||||
|
get() |
||||
|
} |
||||
|
const handleCurrentChange = function (val) { |
||||
|
getObj.value.pageNum = val |
||||
|
get() |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<p>1111</p> |
|
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px;margin-top: 10px"> |
||||
|
<div class="head-card"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">精网号：</el-text> |
||||
|
<el-input |
||||
|
v-model="user.jwcode" |
||||
|
style="width: 160px" |
||||
|
placeholder="请输入精网号" |
||||
|
clearable |
||||
|
/> |
||||
|
</div> |
||||
|
<div |
||||
|
class="head-card-element" |
||||
|
> |
||||
|
<el-text class="mx-1" size="large">所属地区：</el-text> |
||||
|
<el-select |
||||
|
v-model="user.market" |
||||
|
placeholder="请选择所属地区" |
||||
|
style="width: 180px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in market" |
||||
|
: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> |
||||
|
<el-button type="primary" @click="exportExcel()">导出Excel</el-button> |
||||
|
</div> |
||||
|
<!-- </div> --> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<div> |
||||
|
金币总数：{{ Math.abs(goldtotal) }} |
||||
|
永久金币：{{ Math.abs(permanentGold) }} |
||||
|
免费金币：{{ Math.abs(freeGold) }} |
||||
|
任务金币：{{ Math.abs(taskGold) }} |
||||
|
</div> |
||||
|
<!-- 设置表格容器的高度和滚动样式 --> |
||||
|
<div style="height: 626px; overflow-y: auto"> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
@cellClick="cellClick" |
||||
|
style="width: 100%" |
||||
|
height="626px" |
||||
|
@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="120" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" width="120" /> |
||||
|
<el-table-column prop="market" label="所属地区" width="120" /> |
||||
|
<el-table-column |
||||
|
prop="allJb" |
||||
|
label="金币总数" |
||||
|
width="120" |
||||
|
aligh="center" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
(scope.row.currentPermanentGold + |
||||
|
scope.row.currentFreeJune + |
||||
|
scope.row.currentFreeDecember + |
||||
|
scope.row.currentTaskGold) |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="currentPermanentGold" |
||||
|
label="永久金币" |
||||
|
sortable="custom" |
||||
|
width="110" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ Math.abs(scope.row.currentPermanentGold) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="currentFreeJune" |
||||
|
label="6月份到期免费金币" |
||||
|
sortable="custom" |
||||
|
width="110" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.currentFreeJune }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="currentFreeDecember" |
||||
|
label="12月份到期免费金币" |
||||
|
sortable="custom" |
||||
|
width="110" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.currentFreeDecember }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="currentTaskGold" |
||||
|
label="任务金币" |
||||
|
sortable="custom" |
||||
|
width="130" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ Math.abs(scope.row.currentTaskGold) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="rcoin" label="历史金币" width="150"> |
||||
|
<template #default="scope"> |
||||
|
<!-- 计算四个字段的和并显示 --> |
||||
|
<span>{{ |
||||
|
(scope.row.sumPermanentGold || 0) + |
||||
|
(scope.row.sumFreeJune || 0) + |
||||
|
(scope.row.sumFreeDecember || 0) + |
||||
|
(scope.row.sumTaskGold || 0) |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="sumConsume" label="历史消费" width="150"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ Math.abs(scope.row.sumConsume) }}</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.market }}</div> |
||||
|
<div>历史充值：{{ userInfo.rcoin }}</div> |
||||
|
<div>历史消费：{{ userInfo.scoin }}</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
|
||||
|
<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> |
</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> |
||||
873
src/views/usergold/clientCountDetail.vue
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