zry
6 days ago
5 changed files with 1033 additions and 400 deletions
-
3.env.development
-
2src/router/index.js
-
4src/util/request.js
-
551src/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> |
|||
<p>1111</p> |
|||
</template> |
|||
<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> |
|||
|
|||
<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