donghaolin
5 months ago
5 changed files with 447 additions and 27 deletions
-
2vue/gold-system/src/router/index.js
-
46vue/gold-system/src/views/index.vue
-
6vue/gold-system/src/views/recharge/addRecharge.vue
-
76vue/gold-system/src/views/usergold/index.vue
-
344vue/gold-system/src/views/usergoldInfo/index.vue
@ -0,0 +1,344 @@ |
|||||
|
<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 "../../api/index.js"; |
||||
|
|
||||
|
// 充值明细表格 |
||||
|
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 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 (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 = ""; |
||||
|
} |
||||
|
console.log("搜索参数", getObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await API.post("http://192.168.8.93:10010/detailY", { |
||||
|
...getObj.value, |
||||
|
detailY: { ...detailY.value }, |
||||
|
}); |
||||
|
const result2 = await API.post("http://192.168.8.93:10010/detailY", { |
||||
|
...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; |
||||
|
console.log("tableAllData", tableAllData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.total; |
||||
|
console.log("total", total.value); |
||||
|
// 计算各金币总数 |
||||
|
rechargeCoin.value = tableAllData.value.sumR; |
||||
|
freeCoin.value = tableAllData.value.sumF; |
||||
|
taskCoin.value = tableAllData.value.sumT; |
||||
|
// for (let i = 0; i < tableAllData.value.length; i++) { |
||||
|
// rechargeCoin.value += tableAllData.value[i].rechargeCoin; |
||||
|
// freeCoin.value += tableAllData.value[i].freeCoin; |
||||
|
// taskCoin.value += tableAllData.value[i].taskCoin; |
||||
|
// } |
||||
|
console.log( |
||||
|
"各金币总数", |
||||
|
rechargeCoin.value, |
||||
|
freeCoin.value, |
||||
|
taskCoin.value |
||||
|
); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 搜索 |
||||
|
const search = function () { |
||||
|
getObj.value.pageNum = 1; |
||||
|
get(); |
||||
|
}; |
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
detailY.value.jwcode = ""; |
||||
|
detailY.value.updateType = ""; |
||||
|
detailY.value.startDate = ""; |
||||
|
detailY.value.endDate = ""; |
||||
|
getTime.value = {}; |
||||
|
}; |
||||
|
|
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
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: "请检查输入内容", |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
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"> |
||||
|
<el-text class="mx-1" size="large">更新类型：</el-text> |
||||
|
<el-select |
||||
|
v-model="detailY.updateType" |
||||
|
placeholder="请选择更新类型" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in updateType" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">更新时间：</el-text> |
||||
|
<el-date-picker |
||||
|
v-model="getTime" |
||||
|
type="datetimerange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="起始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
/> |
||||
|
</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> |
||||
|
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
||||
|
<el-table-column prop="uname" label="姓名" width="130" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" width="170" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="170" /> |
||||
|
<el-table-column prop="platform" label="平台信息" width="170" /> |
||||
|
<el-table-column prop="gold" label="更新数量" width="160"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
Math.abs( |
||||
|
scope.row.rechargeCoin + |
||||
|
scope.row.freeCoin + |
||||
|
scope.row.taskCoin |
||||
|
) |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="updateType" label="更新类型" width="150"> |
||||
|
<!-- 模板内容 --> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.updateType == 1"> |
||||
|
<span>消费</span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.updateType == 0"> |
||||
|
<span>充值</span> |
||||
|
</span> |
||||
|
<span v-if="scope.row.updateType == 2"> |
||||
|
<span>退款</span> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="freeCoin" label="免费金币" width="130"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ Math.abs(scope.row.freeCoin) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="rechargeCoin" label="充值金币" width="150"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ Math.abs(scope.row.rechargeCoin) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="taskCoin" label="任务金币" width="130"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ Math.abs(scope.row.taskCoin) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="提交人" width="150" /> |
||||
|
<el-table-column |
||||
|
prop="createTime" |
||||
|
label="更新时间" |
||||
|
width="210" |
||||
|
show-overflow-tooltip |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") |
||||
|
}}</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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue