huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 新增消耗（完成） 消耗明细（总计金币数[后端不能筛选]） 汇率页面（完成）

lihui/feature-20250623144029-金币前端lihui
lihui 4 days ago
parent
49807ae9e3
commit
bae599c1e2
2 changed files with 121 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 143
      src/views/consume/addCoinConsume.vue
  2. 90
      src/views/consume/coinConsumeDetail.vue

143
src/views/consume/addCoinConsume.vue
View File

@ -5,8 +5,9 @@ import moment from "moment";
import request from "@/util/http";
/*====================工具方法==============================*/
/*
====================工具方法==============================
*/
// 精网号去空格
const trimJwCode = () => {
if (addConsume.value.jwcode) {
@ -23,35 +24,11 @@ const trimJwCode = () => {
}
}
// ====================数据=================================
/*====================方法=================================*/
/*====================监听=================================*/
/*====================挂载=================================*/
//这是获取当前登录的用户信息的接口
/*
====================数据=================================
*/
//这是获取当前登录的用户信息
const adminData = ref({});
const getAdminData = async function () {
try {//await 暂停函数执行，直到请求完成
const result = await request({
url: "/admin/userinfo",
data: {},
});
adminData.value = result;
addConsume.value.adminId = adminData.value.adminId;
addConsume.value.name = adminData.value.name;
console.log("请求成功", result);
console.log("用户信息", adminData.value);
} catch (error) {
console.log("请求失败", error);
}
};
// 通过精网号查询用户（客户）信息 表单
const user = ref({
jwcode: null,
@ -71,12 +48,11 @@ const user = ref({
nowFreeGold: null,
nowSumGold: null
})
// 这是添加消费信息的表单（金币）
const addConsume = ref({
// jwcode 是数字
jwcode: null, //精网号
goodsName: "",// 商品名称 // todo 之后会用3楼的接口 已改用
goodsName: "",// 商品名称
sumGold: null, // 消费金币总数
freeGold: null, // 免费金币
permanentGold: null, // 永久金币
@ -85,6 +61,40 @@ const addConsume = ref({
adminId: null,// 当前管理员id
});
// 表单验证
const Ref = ref(null);
// 表单验证规则
const rules = reactive({
jwcode: [{required: true, message: "请输入精网号", trigger: "blur"}],
goodsName: [{required: true, message: "请选择消费商品", trigger: "change"}], // 修改为 change
sumGold: [
{required: true, message: "消费金币总数不能为空", trigger: "blur"},
],
});
// 查询商品的表单
const goods = ref([]);
/*
====================方法=================================
*/
const getAdminData = async function () {
try {//await 暂停函数执行，直到请求完成
const result = await request({
url: "/admin/userinfo",
data: {},
});
adminData.value = result;
addConsume.value.adminId = adminData.value.adminId;
addConsume.value.name = adminData.value.name;
console.log("请求成功", result);
console.log("用户信息", adminData.value);
} catch (error) {
console.log("请求失败", error);
}
};
// 消耗金币计算函数
function calculateCoins(sumGold) {
@ -119,24 +129,6 @@ function calculateCoins(sumGold) {
return {free: 0, permanent: 0, task: 0};
}
// 监听消费总金额变化，自动计算三类金币
watch(
() => addConsume.value.sumGold,
(newValue) => {
if (newValue > 0) {
const {free, permanent, task} = calculateCoins(newValue);
addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task;
} else {
addConsume.value.freeGold = null;
addConsume.value.permanentGold = null;
addConsume.value.taskGold = null;
}
}
);
// 输入验证函数
function validateInput() {
const sumGold = addConsume.value.sumGold;
@ -170,8 +162,6 @@ function validateInput() {
return true;
}
// 这是添加消费信息的接口
const add = async function () {
try {
@ -201,7 +191,6 @@ const add = async function () {
ElMessage.error("添加失败，请检查网络连接或联系管理员");
}
};
// 响应处理函数
function handleResponse(result) {
console.log("响应结果", result)
@ -212,7 +201,6 @@ function handleResponse(result) {
ElMessage.error(result.msg || "添加失败，未知错误");
}
}
// 重置表单函数
function resetForm() {
// 清空表单数据
@ -251,7 +239,7 @@ function resetForm() {
// user.value.jwcode = null;
// user.value = null;
}
// 添加前验证
const addBefore = () => {
Ref.value.validate(async (valid) => {
if (valid) {
@ -274,22 +262,6 @@ const addBefore = () => {
}
});
};
// 表单验证
// 开始时间改变时，重新验证结束时间
const Ref = ref(null);
const rules = reactive({
jwcode: [{required: true, message: "请输入精网号", trigger: "blur"}],
goodsName: [{required: true, message: "请选择消费商品", trigger: "change"}], // 修改为 change
sumGold: [
{required: true, message: "消费金币总数不能为空", trigger: "blur"},
],
});
// 查询客户信息（通过精网号）
const getUser = async function (jwcode) {
trimJwCode();
@ -320,10 +292,7 @@ const getUser = async function (jwcode) {
// 在这里可以处理错误逻辑，比如显示错误提示等
}
};
// 查询商品的接口
const goods = ref([]);
// 获取商品信息(三楼接口)
const getGoods = async function () {
try {
// 发送POST请求
@ -348,7 +317,30 @@ const getGoods = async function () {
}
};
/*
====================监听=================================
*/
// 监听消费总金额变化，自动计算三类金币
watch(
() => addConsume.value.sumGold,
(newValue) => {
if (newValue > 0) {
const {free, permanent, task} = calculateCoins(newValue);
addConsume.value.freeGold = free;
addConsume.value.permanentGold = permanent;
addConsume.value.taskGold = task;
} else {
addConsume.value.freeGold = null;
addConsume.value.permanentGold = null;
addConsume.value.taskGold = null;
}
}
);
/*
====================挂载=================================
*/
// 挂载
onMounted(async function () {
await getAdminData();
@ -356,7 +348,6 @@ onMounted(async function () {
});
</script>
<template>

90
src/views/consume/coinConsumeDetail.vue
View File

@ -1,8 +1,10 @@
<script setup>
import {onMounted, ref} from 'vue'
import {computed, onMounted, ref} from 'vue'
import {dayjs, ElMessage} from 'element-plus'
import request from '@/util/http'
// 之后整理一下
// 时间格式化
const formatTime = (val) => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : ''
@ -92,7 +94,13 @@ const permanentGold = ref(0)
const freeGold = ref(0)
const taskGold = ref(0)
const totalGold = ref(0)
// 定义响应式变量存储金币合计数
const permanentGolds = ref(0)
const freeGolds = ref(0)
const taskGolds = ref(0)
// 计算总金币数
const sumGold = computed(() => permanentGolds.value + freeGolds.value + taskGolds.value)
// 方法
// 搜索=========================================================================================================================================================
@ -142,47 +150,58 @@ const ConsumeSelectBy = async function (val) {
delete detailWithoutSort.sortField
delete detailWithoutSort.sortOrder
// 这个接口不知道传什么
const result2 = await request({
const resultTotalGold = await request({
// url: 'http://192.168.8.247:8081/consume/statsGold',
url: 'http://192.168.8.247:8081/consume/statsGold',
data: {
...detailWithoutSort
}
// data: {
// pageNum: getObj.value.pageNum,
// pageSize: getObj.value.pageSize,
// consumeUser: consumeUser.value
// }
})
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
console.log('请求成功2', result2)
console.log("总计",resultTotalGold)
if (resultTotalGold.code === 200 && resultTotalGold.data) {
const data = resultTotalGold.data
console.log('获取到的金币数据:', data)
permanentGolds.value = Number(data.permanentGolds) || 0
freeGolds.value = Number(data.freeGolds) || 0
taskGolds.value = Number(data.taskGolds) || 0
}
// 存储表格数据
tableData.value = result.data.list
tableDataTotal.value = result2.data
if (result2.data == null) {
console.log('请求成功2', result2)
tableDataTotal.value = resultTotalGold.data
if (resultTotalGold.data == null) {
console.log('请求成功2', resultTotalGold)
// 这是啥东西啊
tableDataTotal.value = {
sumRcion: 0,
sumFcion: 0,
sumTcion: 0,
sumcion: 0
}
tableDataTotal.value = resultTotalGold.data
}
console.log('tableDataT', tableDataTotal)
// 修改为保留两位小数
permanentGold.value = parseFloat(
(tableDataTotal.value.sumRcion / 100).toFixed(2)
)
freeGold.value = parseFloat(
(tableDataTotal.value.sumFcion / 100).toFixed(2)
)
taskGold.value = parseFloat(
(tableDataTotal.value.sumTcion / 100).toFixed(2)
)
totalGold.value = parseFloat(
(tableDataTotal.value.sumcion / 100).toFixed(2)
)
const sumGoldList = tableData.value.map(item => item.sumGold);
console.log("sumGold",sumGoldList); // 输出包含所有 sumGold 值的数组
console.log('@@@@@@@@@@tableDataT', tableDataTotal.value.list)
// totalGold.value = tableData.value.sum
// // 修改为保留两位小数
// permanentGold.value = parseFloat(
// (tableDataTotal.value.list.sumGold / 100).toFixed(2)
// )
// freeGold.value = parseFloat(
// (tableDataTotal.value.sumFcion / 100).toFixed(2)
// )
// taskGold.value = parseFloat(
// (tableDataTotal.value.sumTcion / 100).toFixed(2)
// )
// totalGold.value = parseFloat(
// (tableDataTotal.value.sumcion / 100).toFixed(2)
// )
console.log('tableData', tableData.value)
// 存储分页总数
@ -299,7 +318,6 @@ const getMarket = async function () {
try {
// 发送请求获取地区列表
const result = await request({
// todo 接口不对
// url: '/general/market',
url: 'http://192.168.8.247:8081/general/market', // todo 换成实际接口地址
data: {}
@ -500,9 +518,9 @@ onMounted(async function () {
<el-col>
<el-card>
<div>
消耗金额：{{ Math.abs(totalGold) }}新币，永久金币：{{ Math.abs(permanentGold) }}，免费金币：{{
Math.abs(freeGold)
}}，任务金币：{{ Math.abs(taskGold) }}
消耗金额：{{ Math.abs(sumGold) }}新币，永久金币：{{ Math.abs(permanentGolds) }}，免费金币：{{
Math.abs(freeGolds)
}}，任务金币：{{ Math.abs(taskGolds) }}
</div>
<!-- 设置表格容器的高度和滚动样式 -->
<div style="height: 576px; overflow-y: auto">

Write Preview
Loading…
Cancel
Save