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

feat: 新增消耗 消耗明细80% 汇率页面（缺接口）

lihui/feature-20250623144029-金币前端lihui
lihui 5 days ago
parent
fa25cb17df
commit
64ee464b6e
3 changed files with 650 additions and 952 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. 697
      src/views/consume/addCoinConsume.vue
  2. 440
      src/views/consume/coinConsumeDetail.vue
  3. 465
      src/views/managerecharge/rate.vue

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

@ -1,21 +1,26 @@
<script setup>
import {reactive, onMounted} from "vue";
import {ref, computed, watch} from "vue";
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";
import {onMounted, reactive, ref, watch} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import moment from "moment";
import _ from "lodash";
import request from "@/util/http";
// 精网号去空格
const trimJwCode = () => {
if (addConsume.value.jwcode) {
addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, '');
// 去除所有空格，并尝试转换为整数
const trimmed = addConsume.value.jwcode.toString().replace(/\s/g, '');
const numeric = Number(trimmed);
// 如果转换为数字成功，保存为数字，否则提示错误
if (!isNaN(numeric)) {
addConsume.value.jwcode = numeric;
} else {
ElMessage.error("精网号格式不正确，请输入数字");
}
}
}
//这是获取当前登录的用户信息的接口
const adminData = ref({});
const getAdminData = async function () {
@ -34,102 +39,105 @@ const getAdminData = async function () {
}
};
// 通过精网号查询用户（客户）信息
// 通过精网号查询用户（客户）信息 表单
const user = ref({
jwcode: null,
name: "",
jwcode: 0,
market: "",
historySumGold: 0,
historyPermanentGold: 0,
historyFreeGold: 0,
historyTaskGold: 0,
rechargeNum: 0,
consumeNum: 0,
historySumGold: null,
historyPermanentGold: null,
historyFreeGold: null,
historyTaskGold: null,
rechargeNum: null,
consumeNum: null,
firstRecharge: "",
nowPermanentGold: 0,
nowPermanentGold: null,
nowFreeJune: null,
nowTaskGold: 0,
nowTaskGold: null,
nowFreeDecember: null,
nowFreeGold: 0,
nowSumGold: 0
nowFreeGold: null,
nowSumGold: null
})
// 这是添加消费信息的表单（金币）
const addConsume = ref({
jwcode:0, //精网号
goodsName: "",// 商品名称 // todo 之后会用3楼的接口
sumGold: 0, // 消费金币总数
freeGold: 0, // 免费金币
permanentGold: 0, // 永久金币
taskGold: 0, // 任务金币
// jwcode 是数字
jwcode: null, //精网号
goodsName: "",// 商品名称 // todo 之后会用3楼的接口 已改用
sumGold: null, // 消费金币总数
freeGold: null, // 免费金币
permanentGold: null, // 永久金币
taskGold: null, // 任务金币
remark: "",//备注
adminId: 0,// 当前管理员id
adminId: null,// 当前管理员id
});
// updateType: "1", 根据字段,不用了
// 消耗金币计算函数
function calculateCoins(sumGold) {
const {nowFreeGold, nowPermanentGold, nowTaskGold} = user.value;
if (user.value.jwcode) {
if (sumGold <= 0) return {free: 0, permanent: 0, task: 0};
// indexName: "", //这个是指标字段，后面绑定 根据需求，不用了
});
let remaining = sumGold;
let freeUsed = 0, permanentUsed = 0, taskUsed = 0;
// 这是添加消费信息的接口
// const add = async function () {
// try {
// // 处理数据，使用楼上接口后需要隐藏
//
// // addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100);
// // addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100);
// // addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100);
//
// addConsume.value.sumGold = Number(addConsume.value.sumGold);
// addConsume.value.freeGold = Number(addConsume.value.freeGold);
// addConsume.value.permanentGold = Number(addConsume.value.permanentGold);
// addConsume.value.taskGold = Number(addConsume.value.taskGold);
//
// // addConsume.value.productName = indexs.value.productName;
//
// // 发送POST请求
// const result = await request({
// url: "/consume/add",
// data: addConsume.value,
// });
// if (result.code === 0) {
// ElMessage.error(result.msg);
// return;
// } else {
// ElMessage.success("添加成功");
// }
// //重置表单
// addConsume.value = {};
// addConsume.value.adminId = adminData.value.adminId;
// addConsume.value.adminName = adminData.value.adminName;
// // addConsume.value.updateType = "1";
// addConsume.value.freeCoin = 0;
// addConsume.value.rechargeCoin = 0;
// addConsume.value.taskCoin = 0;
// indexs.value = {};
// console.log("请求成功", result);
// user.value = {};
// } catch (error) {
// console.log("请求失败", error);
// ElMessage.error("添加失败，请检查输入内容是否正确");
//
// // 在这里可以处理错误逻辑，比如显示错误提示等
// }
// };
// 优先消耗免费金币
if (nowFreeGold > 0) {
freeUsed = Math.min(nowFreeGold, remaining);
remaining -= freeUsed;
}
// 其次消耗永久金币
if (remaining > 0 && nowPermanentGold > 0) {
permanentUsed = Math.min(nowPermanentGold, remaining);
remaining -= permanentUsed;
}
// 最后消耗任务金币
if (remaining > 0 && nowTaskGold > 0) {
taskUsed = remaining;
}
return {free: freeUsed, permanent: permanentUsed, task: taskUsed};
}
// 提示
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;
}
}
);
// 这是添加消费信息的接口
const add = async function () {
try {
// 验证输入数据
// 验证输入数据 再验证一次
if (!validateInput()) {
return;
}
// 数据转换
formatConsumeData();
// 发送POST请求
const result = await request({
url: "/consume/add",
// url: "/consume/add",
url: "http://192.168.8.247:8081/consume/add",
data: addConsume.value,
});
// 处理响应
@ -145,18 +153,31 @@ const add = async function () {
// 输入验证函数
function validateInput() {
const { sumGold, freeGold, permanentGold, taskGold } = addConsume.value;
const sumGold = addConsume.value.sumGold;
if (user.value.jwcode == null) {
ElMessage.error("请先查询用户信息");
addConsume.value.sumGold = null;
}
// 验证金币数值
if (sumGold <= 0) {
if (user.value.jwcode && sumGold <= 0) {
ElMessage.error("消费金币总数必须大于0");
// 将sunGold设置为null
addConsume.value.sumGold = null;
return false;
}
// 验证金币总和
const totalAvailableGold = freeGold + permanentGold + taskGold;
if (sumGold > totalAvailableGold) {
const totalAvailableGold = user.value.nowSumGold
console.log("可用金币总和", totalAvailableGold);
console.log("可用金币总和", sumGold);
if (user.value.jwcode && sumGold > totalAvailableGold) {
ElMessage.error("消费金币总数超过可用金币总和");
// 将sunGold设置为null
addConsume.value.sumGold = null;
return false;
}
@ -172,7 +193,7 @@ function formatConsumeData() {
addConsume.value.taskGold = Number(addConsume.value.taskGold);
// 计算金币使用情况
const { usedFreeGold, usedPermanentGold, usedTaskGold } =
const {usedFreeGold, usedPermanentGold, usedTaskGold} =
calculateCoins(
addConsume.value.sumGold,
addConsume.value.freeGold,
@ -196,25 +217,41 @@ function handleResponse(result) {
}
}
// 重置表单函数
function resetForm() {
addConsume.value = {
jwcode: 0,
jwcode: null,
goodsName: "",
sumGold: 0,
freeGold: 0,
permanentGold: 0,
taskGold: 0,
sumGold: null,
freeGold: null,
permanentGold: null,
taskGold: null,
remark: "",
adminId: adminData.value.adminId,
adminName: adminData.value.adminName,
freeCoin: 0,
rechargeCoin: 0,
taskCoin: 0,
};
indexs.value = {};
user.value = {};
console.log("重置表单")
user.value = {
jwcode: null,
name: "",
market: "",
historySumGold: null,
historyPermanentGold: null,
historyFreeGold: null,
historyTaskGold: null,
rechargeNum: null,
consumeNum: null,
firstRecharge: "",
nowPermanentGold: null,
nowFreeJune: null,
nowTaskGold: null,
nowFreeDecember: null,
nowFreeGold: null,
nowSumGold: null
}
// user.value.jwcode = null;
// user.value = null;
}
const addBefore = () => {
@ -222,11 +259,11 @@ const addBefore = () => {
if (valid) {
ElMessageBox.confirm("确认添加？")
.then(() => {
addConsume.value.freeCoin = Number(-addConsume.value.freeCoin);
addConsume.value.rechargeCoin = Number(
-addConsume.value.rechargeCoin
);
addConsume.value.taskCoin = Number(-addConsume.value.taskCoin);
addConsume.value.freeGold = Number(addConsume.value.freeGold);
addConsume.value.permanentGold = Number(addConsume.value.permanentGold);
addConsume.value.taskGold = Number(-addConsume.value.taskGold);
// trimJwCode();
console.log("这里是jwcode", addConsume.value.jwcode)
add();
console.log("添加成功");
imageUrl.value = "";
@ -249,58 +286,33 @@ const addBefore = () => {
// 开始时间改变时，重新验证结束时间
const Ref = ref(null);
const checkFreeGoldRadio = function (rule, value, callback) {
if (value == "0" || value == null || value == "") {
callback(new Error("请输入消费金币总数"));
} else if (value < 0 || isNaN(value)) {
callback(new Error("请输入正确的格式"));
} else {
callback();
}
};
const rules = reactive({
jwcode: [{required: true, message: "请输入精网号", trigger: "blur"}],
productName: [{required: true, message: "请选择消费商品", trigger: "change"}], // 修改为 change
taskCoin: [{required: true, message: "请输入任务金币", trigger: "blur"}],
freeCoin: [{required: true, message: "请输入免费金币", trigger: "blur"}],
rechargeCoin: [
{required: true, message: "请输入免费金币", trigger: "blur"},
],
allGold: [
goodsName: [{required: true, message: "请选择消费商品", trigger: "change"}], // 修改为 change
// taskCoin: [{required: true, message: "请输入任务金币", trigger: "blur"}],
// freeCoin: [{required: true, message: "请输入免费金币", trigger: "blur"}],
// rechargeCoin: [
// {required: true, message: "请输入免费金币", trigger: "blur"},
// ],
sumGold: [
{required: true, message: "消费金币总数不能为空", trigger: "blur"},
{validator: checkFreeGoldRadio, trigger: "blur"},
],
indexName: [
{
required: true,
validator: (rule, value, callback) => {
if (isHC.value === 1 && !value) {
callback(new Error("请选择指标"));
} else {
callback();
}
/* indexName: [
{
required: true,
validator: (rule, value, callback) => {
if (isHC.value === 1 && !value) {
callback(new Error("请选择指标"));
} else {
callback();
}
},
trigger: ["change", "blur"],
},
trigger: ["change", "blur"],
},
]
]*/
});
//这是重置方法
const delteConsume = function () {
addConsume.value = {};
addConsume.value.adminId = adminData.value.adminId;
addConsume.value.adminName = adminData.value.adminName;
addConsume.value.updateType = "1";
addConsume.value.freeCoin = 0;
addConsume.value.rechargeCoin = 0;
addConsume.value.taskCoin = 0;
indexs.value = {};
isHC.value = 0;
};
// 查找客户信息的方法
// const user = ref({
// firstRechargeTime: "",
// });
// 查询客户信息（通过精网号）
const getUser = async function (jwcode) {
@ -308,23 +320,21 @@ const getUser = async function (jwcode) {
try {
// 发送POST请求
const result = await request({
url: "user/selectUser",
// url: "user/selectUser",
url: "http://192.168.8.247:8081/user/selectUser", // todo 服务器改回无ip的
data: {
// 只需要传精网号
jwcode: addConsume.value.jwcode,
// area: adminData.value.area,
},
});
console.log("请求成功", result);
if (result.code === 0) {
ElMessage.error(result.msg);
} else if (result.data === null) {
ElMessage.error("用户不存在");
} else {
user.value = result.data;
/* user.value.A =
Number(user.value.pendingRechargeTimes) +
Number(user.value.pendingSpendTimes);*/
console.log("用户信息", user.value);
ElMessage.success(result.msg);
}
@ -335,284 +345,50 @@ const getUser = async function (jwcode) {
}
};
// 为什么写两次?
/*//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
//这是查询用户金币信息的接口
const userGold = ref({});
const getUserGold = async function (jwcode) {
trimJwCode();
try {
// 发送POST请求
const result = await request({
// url: "/recharge/user",
data: {
jwcode: addConsume.value.jwcode,
area: adminData.value.area,
},
});
// 将响应结果存储到响应式数据中
console.log("请求成功", result);
if (result.code === 0) {
//ElMessage.error(result.msg);
} else {
// 存储表格数据
userGold.value = result.data;
addConsume.value.username = result.data.name;
addConsume.value.area = result.data.area;
// ElMessage.success(result.msg);
}
} catch (error) {
console.log("请求失败", error);
//ElMessage.error("无此精网号");
addConsume.value.jwcode = "";
// 在这里可以处理错误逻辑，比如显示错误提示等
}
};*/
function calculateCoins(sumGold, nowFreeGold, nowPermanentGold, nowTaskGold) {
let remaining = sumGold;
let usedFreeGold = 0;
let usedPermanentGold = 0;
let usedTaskGold = 0;
// 优先消耗免费金币
if (remaining > 0) {
usedFreeGold = Math.min(remaining, nowFreeGold);
remaining -= usedFreeGold;
}
// 其次消耗永久金币
if (remaining > 0) {
usedPermanentGold = Math.min(remaining, nowPermanentGold);
remaining -= usedPermanentGold;
}
// 最后消耗任务金币
if (remaining > 0) {
usedTaskGold = Math.min(remaining, nowTaskGold);
remaining -= usedTaskGold;
}
// 返回使用情况和剩余金币数量
return {
usedFreeGold,
usedPermanentGold,
usedTaskGold,
remaining,
finalFreeGold: nowFreeGold - usedFreeGold,
finalPermanentGold: nowPermanentGold - usedPermanentGold,
finalTaskGold: nowTaskGold - usedTaskGold
};
}
// 先注释掉
/*
function calculateCoins() {
if (
(userGold.value.coreJb +
userGold.value.free6 +
userGold.value.free12 +
userGold.value.buyJb) /
100 <
addConsume.value.allGold
) {
addConsume.value.allGold = 0;
addConsume.value.taskCoin = 0;
addConsume.value.freeCoin = 0;
addConsume.value.rechargeCoin = 0;
ElMessage.error("金币不足，请充值");
return;
}
// 这是计算用户的三种金币的接口
else {
// 保存原始的allGold值
const originalAllGold = addConsume.value.allGold;
// 确保todayTask和todayFree是有效的数字
const todayTask =
typeof userGold.value.coreJb === "number"
? userGold.value.coreJb / 100
: 0;
const todayFree =
typeof (userGold.value.free6 + userGold.value.free12) === "number"
? (userGold.value.free6 + userGold.value.free12) / 100
: 0;
// 根据用户输入的消费金币总数和已有的金币数量进行计算
addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
let remainingGold = originalAllGold - addConsume.value.taskCoin;
addConsume.value.freeCoin = Math.min(remainingGold, todayFree);
remainingGold -= addConsume.value.freeCoin;
addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币
// 恢复allGold的原始值
addConsume.value.allGold = originalAllGold;
// 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0
if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0;
if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0;
if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0;
console.log("计算结果", addConsume.value);
}
}
*/
// 查询商品的接口
const goods = ref([]);
const getGoods = async function () {
try {
// 发送POST请求
const result = await request({
// url: "/product", // todo 后续换3楼的
data: {},
// url: "/product", // todo 后续换3楼的 2025年6月27日10:38:26 解决
url: "http://39.101.133.168:8828/live_mall/api/product/all",
});
// 将响应结果存储到响应式数据中
console.log("请求成功", result);
// 存储全部数据
goods.value = result.data;
goods.value = result.data.map(item => ({
id: item.id,
label: item.name,
value: item.name
}));
// // 存储全部数据
// goods.value = result.data;
} catch (error) {
console.log("请求失败", error);
// 在这里可以处理错误逻辑，比如显示错误提示等
}
};
// 获取指标的方法
const index = ref([]);
// todo 根据需求，不需要指标
/*const getIndexs = async function (type) {
try {
// 发送POST请求
const result = await request({
// url: "/product/index",
data: {
type: type,
},
});
// 将响应结果存储到响应式数据中
console.log("请求成功", result);
// 存储全部数据
index.value = result.data;
} catch (error) {
console.log("请求失败", error);
// 在这里可以处理错误逻辑，比如显示错误提示等
}
};*/
// 选择商品名称是时触发的方法
const isHC = ref(0);
// const handleProductSelect = (productName) => {
// // 根据商品名称获取对应的商品信息
// // indexs.value.productName = productName;为什么直接绑定？？？
// if (productName === "homilychart") {
// isHC.value = 1;
// addConsume.value.productName = "homilychart"; // 商品名
// addConsume.value.indexName = ""; // 指标名
// } else {
// isHC.value = 0;
// addConsume.value.productName = productName;
// addConsume.value.indexName = "";
// }
// };
const indexs = ref([]);
// const handleIndexSelect = () => {
// if (isHC.value === 1 && addConsume.value.indexName) {
// addConsume.value.productName = "homilychart" + addConsume.value.indexName;
// }
// const getGoodsList = async () => {
// const result = await request({ url: '/goods/list' });
// goodsList.value = result.map(item => ({
// label: item.name,
// value: item.name
// }));
// };
// 商品搜索逻辑
const queryProductSearch = (queryString, cb) => {
const results = queryString
? goods.value.filter(item =>
item.name.toLowerCase().includes(queryString.toLowerCase())
)
: goods.value;
cb(results);
};
// 指标搜索逻辑
const queryIndexSearch = (queryString, cb) => {
const results = queryString
? index.value.filter(item => // 将 indexData 替换为 index
item.name.toLowerCase().includes(queryString.toLowerCase())
)
: index.value;
cb(results);
};
// todo 这里的 homilychart 对应问题 homilyChart
// 商品选择处理（重点修改）
const handleProductSelect = async (selectedItem) => {
const productName = typeof selectedItem === 'string'
? selectedItem
: selectedItem?.name || '';
if (productName === "homilychart") {
isHC.value = 1;
addConsume.value.productName = "homilychart";
addConsume.value.indexName = "";
// 动态获取指标数据
await getIndexs("homilychart");
} else {
isHC.value = 0;
addConsume.value.productName = productName;
addConsume.value.indexName = "";
}
};
// 指标选择处理（重点修改）
const handleIndexSelect = (selectedItem) => {
if (isHC.value === 1) {
const indexName = typeof selectedItem === 'string'
? selectedItem
: selectedItem?.name || '';
// 仅更新指标名称字段
addConsume.value.indexName = indexName;
}
};
// 处理自由输入指标
const handleIndexBlur = (e) => {
if (isHC.value === 1 && e.target.value) {
// 仅更新指标名称字段
addConsume.value.indexName = e.target.value;
}
};
// 挂载
onMounted(async function () {
await getAdminData();
await getGoods();
await getIndexs(1);
});
const handleSelectBlur = (value) => {
// 这里可以根据需求添加额外逻辑，比如验证输入值是否有效
// 目前直接将输入值同步到 v-model 绑定的值上
if (value) {
// 若选择的是商品名称
if (addConsume.value.productName === value) {
addConsume.value.productName = value;
}
// 若选择的是指标名称
else if (indexs.value.name === value) {
indexs.value.name = value;
}
}
};
</script>
<template>
@ -636,11 +412,7 @@ const handleSelectBlur = (value) => {
<!-- todo 添加错误提示-->
<el-form-item prop="jwcode" label="精网号">
<!-- <el-input
v-model="addConsume.jwcode"
style="width: 220px"
@change="getUserGold(addConsume.jwcode)"
/>-->
<el-input
v-model="addConsume.jwcode"
style="width: 220px"
@ -657,62 +429,56 @@ const handleSelectBlur = (value) => {
<div style="display: flex; align-items: center; gap: 20px;">
<el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px">
<el-autocomplete
v-model="addConsume.productName"
:fetch-suggestions="queryProductSearch"
placeholder="请输入或选择商品"
style="width: 300px"
@select="handleProductSelect"
value-key="name"
clearable
:trigger-on-focus="true"
<!-- <el-autocomplete
v-model="addConsume.goodsName"
:fetch-suggestions="queryProductSearch"
placeholder="请选择商品"
style="width: 300px"
@select="handleProductSelect"
value-key="name"
clearable
:trigger-on-focus="true"
>
<template #default="{ item }">
<div>{{ item.name }}</div>
</template>
</el-autocomplete>-->
<el-select
v-model="addConsume.goodsName"
placeholder="请选择商品"
style="width: 450px"
>
<template #default="{ item }">
<div>{{ item.name }}</div>
</template>
</el-autocomplete>
</el-form-item>
<el-option
v-for="item in goods"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<!-- 指标选择 -->
<!-- 使用flex布局会使页面更灵活好用，修改之前选中商品名称后才会正常布局的bug -->
<!-- <el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px">
<el-autocomplete
v-model="addConsume.indexName"
:fetch-suggestions="queryIndexSearch"
placeholder="请输入或选择指标"
style="width: 140px"
@select="handleIndexSelect"
@blur="handleIndexBlur"
value-key="name"
:disabled="isHC !== 1"
clearable
free-solo
allow-create
>
<template #default="{ item }">
<div>{{ item.name }}</div>
</template>
</el-autocomplete>
</el-form-item>
<el-form-item label="指标" v-else style="flex:1;margin-left: -5px;">
<el-input disabled placeholder="无" style="width: 100px" />
</el-form-item> -->
</div>
<el-form-item prop="allGold" label="消费金币总数">
<el-input
v-model="addConsume.allGold"
v-model="addConsume.sumGold"
style="width: 100px"
@input="validateInput()"
@change="calculateCoins()"
/>
</el-form-item>
<!-- 三类金币自动计算（禁用状态，不可编辑） -->
<div style="display: flex; align-items: center">
<el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
<el-form-item prop="permanentGold" label="永久金币" style="float: left">
<el-input
disabled
v-model="addConsume.rechargeCoin"
v-model="addConsume.permanentGold"
style="width: 100px; margin-left: -5px"
/>
<p style="margin-right: 0px">个</p>
@ -724,15 +490,15 @@ const handleSelectBlur = (value) => {
>
<el-input
disabled
v-model="addConsume.freeCoin"
v-model="addConsume.freeGold"
style="width: 100px; margin-left: -5px"
/>
<p style="margin-right: 0px">个</p>
</el-form-item>
<el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
<el-form-item prop="taskGold" label="任务金币" style="margin-left: -20px">
<el-input
disabled
v-model="addConsume.taskCoin"
v-model="addConsume.taskGold"
style="width: 100px; margin-left: -5px"
/>
<p style="margin-right: 20px">个</p>
@ -759,7 +525,7 @@ const handleSelectBlur = (value) => {
/>
</el-form-item>
<el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
<el-button type="success" @click="resetForm()" style="margin-left: 280px">重置</el-button>
<el-button type="primary" @click="addBefore"> 提交</el-button>
</el-form>
@ -767,7 +533,7 @@ const handleSelectBlur = (value) => {
<!-- todo 这里少客户信息栏的卸载 -->
<!-- 客户信息栏 -->
<el-card style="width: 850px; float: right" class="customer-info">
<el-card style="width: 850px; float: right" class="customer-info">
<el-form
:model="user"
label-width="auto"
@ -783,13 +549,8 @@ const handleSelectBlur = (value) => {
</el-col>
<el-col :span="14">
<el-form-item label="历史金币总数">
<!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
<p v-if="!isNaN(Number(user.historySumGold))">
<!-- {{ Number(user.historySumGold / 100) }}-->
{{ Number(user.historySumGold) }}
</p>
<!-- 如果不是有效的数字，显示默认值 -->
<p v-else></p>
<p>{{ user.historySumGold }}</p>
</el-form-item>
</el-col>
<el-col :span="10">
@ -807,7 +568,7 @@ const handleSelectBlur = (value) => {
>
<span
style="display: inline; white-space: nowrap; color: #b1b1b1"
v-if="user.nowSumGold !== undefined"
v-if="user.nowSumGold !== null "
>(永久金币:{{ user.nowPermanentGold }};免费金币:{{
(user.nowFreeGold)
}};任务金币:{{ user.nowTaskGold }})</span>
@ -826,11 +587,6 @@ const handleSelectBlur = (value) => {
<p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
</el-form-item>
</el-col>
<!-- <el-col :span="10">
<el-form-item label="负责客服">
<p>{{ adminData.name }}</p>
</el-form-item>
</el-col> -->
<el-col :span="10">
<el-form-item label="消费次数">
<p style="color: #2fa1ff">{{ user.consumeNum }}</p>
@ -842,11 +598,6 @@ const handleSelectBlur = (value) => {
</el-form-item>
</el-col>
<el-col :span="14">
<!-- <el-form-item label="待审核">
<p style="color: #2fa1ff">
{{ user.A }}
</p>
</el-form-item> -->
</el-col>
</el-row>
</el-form>

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

@ -1,10 +1,11 @@
<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import ElementPlus from 'element-plus'
import { AiFillRead } from 'vue-icons-plus/ai'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import {onMounted, ref, watch} 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') : ''
// 变量
//这是获取用户信息的接口
const adminData = ref({})
@ -24,8 +25,17 @@ const getAdminData = async function () {
// 充值明细表格
const tableData = ref([])
// 搜索======================================
// 搜索detailVo
const detailVo = ref({})
// 搜索detailVo 表单
const consumeUser = ref({
jwcode: null,
payPlatform: "",
market: "",
startTime: '',
endTime: '',
goodsName: ""
})
// 搜索对象
const getObj = ref({
pageNum: 1,
@ -34,7 +44,10 @@ const getObj = ref({
//分页总条目
const total = ref(100)
// 搜索对象时间
const getTime = ref([])
const getTime = ref({
startTime: '',
endTime: ''
})
// 搜索活动列表
const activity = ref([])
// 所有信息
@ -42,6 +55,7 @@ const allData = ref([])
// 搜索地区列表
const area = ref([])
//标签页默认高亮选项
const activeName = ref('all')
@ -49,20 +63,20 @@ const activeName = ref('all')
// todo 死数据吗？
const consumePlatform = [
{
value: '4',
value: '金币系统',
label: '金币系统'
},
{
value: '1',
value: 'Homily Chart',
label: 'Homily Chart'
},
{
value: '2',
value: 'Homily Link',
label: 'Homily Link'
},
{
value: '3',
value: 'ERP系统',
label: 'ERP系统'
}
]
@ -74,51 +88,66 @@ const consumePlatform = [
// 方法
// 合计数的显示数据
const tableDataTotal = ref({})
const rechargeCoin = ref(0)
const freeCoin = ref(0)
const taskCoin = ref(0)
const totalCoin = ref(0)
const permanentGold = ref(0)
const freeGold = ref(0)
const taskGold = ref(0)
const totalGold = ref(0)
// 搜索=========================================================================================================================================================
// 搜索方法
const get = async function (val) {
const ConsumeSelectBy = async function (val) {
try {
// 地区赋值
if (adminData.value.area != '总部') {
detailVo.value.area = adminData.value.area
}
/* // 地区赋值
if (adminData.value.area != '总部') {
consumeUser.value.area = adminData.value.area
}*/
// 搜索参数页码赋值
if (typeof val === 'number') {
getObj.value.pageNum = val
}
// 搜索参数时间赋值
console.log('时间时间111', getTime.value[0])
console.log('时间时间22', formatTime(getTime.value[0]))
if (getTime.value != null) {
if (getTime.value.startDate != '' && getTime.value.endDate != '') {
detailVo.value.startDate = getTime.value[0]
detailVo.value.endDate = getTime.value[1]
if (getTime.value.startTime != '' && getTime.value.endTime != '') {
consumeUser.value.startTime = formatTime(getTime.value[0])
consumeUser.value.endTime = formatTime(getTime.value[1])
}
} else {
detailVo.value.startDate = ''
detailVo.value.endDate = ''
consumeUser.value.startTime = ''
consumeUser.value.endTime = ''
}
detailVo.value.sortField = sortField.value
detailVo.value.sortOrder = sortOrder.value
console.log('搜索参数', getObj.value)
consumeUser.value.sortField = sortField.value
consumeUser.value.sortOrder = sortOrder.value
console.log('搜索参数_时间', consumeUser.value.startTime)
console.log('搜索参数1', getObj.value)
console.log('搜索参数2', consumeUser.value)
// 发送POST请求
const result = await request({
// todo redis 寄了?
url: '/consume/select',
// url: 'consumeUser/selectBy',
url: 'http://192.168.8.247:8081/consume/selectBy',
data: {
...getObj.value,
consumeDetail: { ...detailVo.value }
pageNum: getObj.value.pageNum,
pageSize: getObj.value.pageSize,
consumeUser: consumeUser.value
}
})
// 合计数的接口
// 复制一份 detail.value 并移除排序字段和排序方式
const detailWithoutSort = { ...detailVo.value }
const detailWithoutSort = {...consumeUser.value}
delete detailWithoutSort.sortField
delete detailWithoutSort.sortOrder
const result2 = await request({
url: '/consume/SumConsume',
// url: 'http://192.168.8.247:8081/consume/statsGold',
url: 'http://192.168.8.247:8081/consume/statsGold',
data: {
...detailWithoutSort
}
@ -132,6 +161,7 @@ const get = async function (val) {
tableDataTotal.value = result2.data
if (result2.data == null) {
console.log('请求成功2', result2)
// 这是啥东西啊
tableDataTotal.value = {
sumRcion: 0,
sumFcion: 0,
@ -143,17 +173,17 @@ const get = async function (val) {
console.log('tableDataT', tableDataTotal)
// 修改为保留两位小数
rechargeCoin.value = parseFloat(
(tableDataTotal.value.sumRcion / 100).toFixed(2)
permanentGold.value = parseFloat(
(tableDataTotal.value.sumRcion / 100).toFixed(2)
)
freeCoin.value = parseFloat(
(tableDataTotal.value.sumFcion / 100).toFixed(2)
freeGold.value = parseFloat(
(tableDataTotal.value.sumFcion / 100).toFixed(2)
)
taskCoin.value = parseFloat(
(tableDataTotal.value.sumTcion / 100).toFixed(2)
taskGold.value = parseFloat(
(tableDataTotal.value.sumTcion / 100).toFixed(2)
)
totalCoin.value = parseFloat(
(tableDataTotal.value.sumcion / 100).toFixed(2)
totalGold.value = parseFloat(
(tableDataTotal.value.sumcion / 100).toFixed(2)
)
console.log('tableData', tableData.value)
// 存储分页总数
@ -167,71 +197,82 @@ const get = async function (val) {
// 搜索
const search = function () {
getObj.value.pageNum = 1
get()
ConsumeSelectBy()
}
// 重置
const reset = function () {
detailVo.value.productName = ''
detailVo.value.area = ''
detailVo.value.consumePlatform = ''
detailVo.value.consumeType = ''
detailVo.value.startDate = ''
detailVo.value.endDate = ''
console.log('兄弟，你点了重置')
consumeUser.value.goodsName = ''
consumeUser.value.market = ''
consumeUser.value.payPlatform = ''
consumeUser.value.startTime = ''
consumeUser.value.endTime = ''
sortField.value = ''
sortOrder.value = ''
getTime.value = {}
// 点完重置后，重新请求数据
ConsumeSelectBy()
console.log('consumeUser', consumeUser.value)
}
// 今天
const getToday = function () {
const today = new Date()
const startDate = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate()
const startTime = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate()
)
const endDate = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() + 1
const endTime = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() + 1
)
getTime.value = [startDate, endDate]
getTime.value = [startTime, endTime]
console.log('getTime', getTime.value)
get()
ConsumeSelectBy()
}
// 昨天
const getYesterday = function () {
const yesterday = new Date()
yesterday.setDate(yesterday.getDate() - 1)
const startDate = new Date(
yesterday.getFullYear(),
yesterday.getMonth(),
yesterday.getDate()
const startTime = new Date(
yesterday.getFullYear(),
yesterday.getMonth(),
yesterday.getDate()
)
const endDate = new Date(
yesterday.getFullYear(),
yesterday.getMonth(),
yesterday.getDate() + 1
const endTime = new Date(
yesterday.getFullYear(),
yesterday.getMonth(),
yesterday.getDate() + 1
)
getTime.value = [startDate, endDate]
getTime.value = [startTime, endTime]
console.log('getTime', getTime.value)
get()
ConsumeSelectBy()
}
// 近7天
const get7Days = function () {
const today = new Date()
const startDate = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() - 6
const startTime = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() - 6
)
const endDate = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() + 1
const endTime = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() + 1
)
getTime.value = [startDate, endDate]
getTime.value = [startTime, endTime]
console.log('getTime', getTime.value)
get()
ConsumeSelectBy()
}
//点击标签页
const handleClick = function (tab, event) {
@ -249,7 +290,7 @@ const handleClick = function (tab, event) {
// 挂载
onMounted(async function () {
await getAdminData()
await get()
await ConsumeSelectBy()
// getActivity();
await getArea();
})
@ -259,12 +300,12 @@ 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 > 0 &&
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
) {
getObj.value.pageNum = parseInt(getObj.value.pageNum)
console.log('输入的数字合法')
get()
ConsumeSelectBy()
} else {
//提示
ElMessage({
@ -286,7 +327,7 @@ const getGoods = async function () {
try {
// 发送POST请求
const result = await request({
url: '/product/findProductName',
url: 'http://192.168.8.247:8081/general/goods',
data: {}
})
// 将响应结果存储到响应式数据中
@ -307,7 +348,8 @@ const getArea = async function () {
// 发送请求获取地区列表
const result = await request({
// todo 接口不对
url: '/area/list',
// url: '/general/market',
url: 'http://192.168.8.247:8081/general/market', // todo 换成实际接口地址
data: {}
})
console.log('请求地区列表成功', result)
@ -331,25 +373,25 @@ const sortOrder = ref('')
const handleSortChange = (column) => {
console.log('排序字段：', column.prop)
console.log('排序方式：', column.order)
if (column.prop === 'rechargeCoin') {
if (column.prop === 'permanentGold') {
sortField.value = 'recharge_coin'
} else if (column.prop === 'taskCoin') {
} else if (column.prop === 'taskGold') {
sortField.value = 'task_coin'
} else if (column.prop === 'freeCoin') {
} else if (column.prop === 'freeGold') {
sortField.value = 'free_coin'
} else if (column.prop === 'createTime') {
sortField.value = 'create_time'
}
sortOrder.value = column.order === 'ascending' ? 'DESC' : 'ASC'
get()
ConsumeSelectBy()
}
const handlePageSizeChange = function (val) {
getObj.value.pageSize = val
get()
ConsumeSelectBy()
}
const handleCurrentChange = function (val) {
getObj.value.pageNum = val
get()
ConsumeSelectBy()
}
</script>
@ -362,18 +404,18 @@ const handleCurrentChange = function (val) {
<div class="head-card-element">
<el-text class="mx-1" size="large">商品名称：</el-text>
<el-select
v-model="detailVo.productName"
placeholder="请选择商品名称"
size="large"
style="width: 180px"
clearable
v-model="consumeUser.goodsName"
placeholder="请选择商品名称"
size="large"
style="width: 180px"
clearable
>
<!-- 修改 v-for 绑定逻辑 -->
<el-option
v-for="(item, index) in goods"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in goods"
:key="index"
:label="item"
:value="item"
/>
</el-select>
</div>
@ -382,17 +424,17 @@ const handleCurrentChange = function (val) {
<div class="head-card-element">
<el-text class="mx-1" size="large">所属地区：</el-text>
<el-select
v-model="detailVo.area"
placeholder="请选择所属地区"
size="large"
style="width: 180px"
clearable
v-model="consumeUser.market"
placeholder="请选择所属地区"
size="large"
style="width: 180px"
clearable
>
<el-option
v-for="(item, index) in area"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in area"
:key="index"
:label="item"
:value="item"
/>
</el-select>
</div>
@ -401,17 +443,17 @@ const handleCurrentChange = function (val) {
<div class="head-card-element">
<el-text class="mx-1" size="large">消耗平台：</el-text>
<el-select
v-model="detailVo.consumePlatform"
placeholder="请选择消耗平台"
size="large"
style="width: 180px"
clearable
v-model="consumeUser.payPlatform"
placeholder="请选择消耗平台"
size="large"
style="width: 180px"
clearable
>
<el-option
v-for="item in consumePlatform"
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in consumePlatform"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
@ -420,7 +462,7 @@ const handleCurrentChange = function (val) {
<div class="head-card-element">
<el-text class="mx-1" size="large">消费类型：</el-text>
<el-select
v-model="detailVo.consumeType"
v-model="consumeUser.consumeType"
placeholder="请选择消费类型"
size="large"
style="width: 240px"
@ -441,23 +483,25 @@ const handleCurrentChange = function (val) {
<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="结束时间"
v-model="getTime"
type="datetimerange"
range-separator="至"
start-placeholder="起始时间"
end-placeholder="结束时间"
/>
<el-button style="margin-left: 10px" @click="getToday()"
>今</el-button
>今
</el-button
>
<el-button @click="getYesterday()">昨</el-button>
<el-button @click="get7Days()">近7天</el-button>
<!-- </div>
</el-col>
<el-col :span="3">
<div class="head-card-btn"> -->
<!-- </div>
</el-col>
<el-col :span="3">
<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>
</el-col>
@ -469,59 +513,56 @@ const handleCurrentChange = function (val) {
<el-col>
<el-card>
<div>
消费金币总数：{{ Math.abs(totalCoin) }}，永久金币：{{
Math.abs(rechargeCoin)
}}，免费金币：{{ Math.abs(freeCoin) }}，任务金币：{{
Math.abs(taskCoin)
}}
消耗金额：{{ Math.abs(totalGold) }}新币，永久金币：{{ Math.abs(permanentGold) }}，免费金币：{{
Math.abs(freeGold)
}}，任务金币：{{ Math.abs(taskGold) }}
</div>
<!-- 设置表格容器的高度和滚动样式 -->
<div style="height: 576px; overflow-y: auto">
<el-table
:data="tableData"
style="width: 100%"
height="576px"
@sort-change="handleSortChange"
:data="tableData"
style="width: 100%"
height="576px"
@sort-change="handleSortChange"
>
<el-table-column
type="index"
label="序号"
width="100px"
fixed="left"
type="index"
label="序号"
width="100px"
fixed="left"
>
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
</template>
</el-table-column>
<!-- 固定姓名列 -->
<el-table-column
prop="username"
label="姓名"
width="150px"
fixed="left"
prop="name"
label="姓名"
width="150px"
fixed="left"
/>
<!-- 固定精网号列 -->
<el-table-column
prop="jwcode"
label="精网号"
width="110px"
fixed="left"
prop="jwcode"
label="精网号"
width="110px"
fixed="left"
/>
<el-table-column prop="area" label="所属地区" width="110px" />
<el-table-column prop="productName" label="商品" width="160px" />
<el-table-column prop="market" label="所属地区" width="110px"/>
<el-table-column prop="goodsName" label="商品" width="160px"/>
<el-table-column
prop="consumePlatform"
label="消费平台"
width="120px"
prop="payPlatform"
label="消费平台"
width="120px"
>
<template #default="scope">
<!-- 使用非严格相等比较 -->
<span v-if="scope.row.consumePlatform == 1">Homily Chart</span>
<span v-if="scope.row.consumePlatform == 2">Homily Link</span>
<span v-if="scope.row.consumePlatform == 3">ERP系统</span>
<span v-if="scope.row.consumePlatform == 4">金币系统</span>
{{ scope.row.payPlatform }}
<!-- <span scope.row.consumePlatform == 1">Homily Chart</span>-->
</template>
</el-table-column>
<!-- <el-table-column
@ -530,63 +571,62 @@ const handleCurrentChange = function (val) {
width="120px"
/> -->
<el-table-column
prop="rechargeTotal"
label="消费金币总数"
width="120px"
prop="sumGold"
label="消费金币总数"
width="120px"
>
<template #default="scope">
{{
(scope.row.taskCoin * -1 +
scope.row.freeCoin * -1 +
scope.row.rechargeCoin * -1) /
100
(scope.row.taskGold +
scope.row.freeGold +
scope.row.permanentGold)
}}
</template>
</el-table-column>
<el-table-column
prop="rechargeCoin"
label="永久金币"
sortable="“custom”"
width="110px"
prop="permanentGold"
label="永久金币"
sortable="“custom”"
width="110px"
>
<template #default="scope">
{{ (scope.row.rechargeCoin * -1) / 100 }}
{{ scope.row.permanentGold }}
</template>
</el-table-column>
<el-table-column
prop="freeCoin"
label="免费金币"
sortable="“custom”"
width="110px"
prop="freeGold"
label="免费金币"
sortable="“custom”"
width="110px"
>
<template #default="scope">
{{ (scope.row.freeCoin * -1) / 100 }}
{{ scope.row.freeGold }}
</template>
</el-table-column>
<el-table-column
prop="taskCoin"
label="任务金币"
sortable="“custom”"
width="110px"
prop="taskCold"
label="任务金币"
sortable="“custom”"
width="110px"
>
<template #default="scope">
{{ (scope.row.taskCoin * -1) / 100 }}
{{ scope.row.taskGold }}
</template>
</el-table-column>
<el-table-column
prop="remark"
label="备注"
width="200px"
show-overflow-tooltip
prop="remark"
label="备注"
width="200px"
show-overflow-tooltip
/>
<el-table-column prop="name" label="提交人" width="110px" />
<el-table-column prop="adminName" label="提交人" width="110px"/>
<el-table-column
prop="createTime"
label="消费时间"
sortable="“custom”"
width="180px"
prop="createTime"
label="消费时间"
sortable="“custom”"
width="180px"
/>
</el-table>
</div>
@ -594,13 +634,13 @@ const handleCurrentChange = function (val) {
<!-- 分页 -->
<div class="pagination">
<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"
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>

465
src/views/managerecharge/rate.vue
View File

@ -1,8 +1,6 @@
<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { createApp } from 'vue'
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import moment from 'moment'
import _ from 'lodash'
@ -22,7 +20,6 @@ const getAdminData = async function () {
rateAdd.value.adminId = adminData.value.adminId
rateEdit.value.adminId = adminData.value.adminId
console.log('请求成功', result)
// console.log('用户信息', user.value)
} catch (error) {
console.log('请求失败', error)
}
@ -31,6 +28,8 @@ getAdminData()
const regeAdd = ref(false)
const regeEdit = ref(false)
// 表单引用
const editFormRef = ref(null)
//汇率表格数据
const tableData = ref([])
//搜索对象
@ -51,33 +50,8 @@ const formatDateTime = (date) => {
return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
// 今天
const getToday = () => {
const today = new Date()
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
timeRange.value = [formatDateTime(start), formatDateTime(end)]
search()
}
// 昨天
const getYesterday = () => {
const yesterday = new Date()
yesterday.setDate(yesterday.getDate() - 1)
const start = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 0, 0, 0)
const end = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1, 0, 0, 0)
timeRange.value = [formatDateTime(start), formatDateTime(end)]
search()
}
// 近7天
const get7Days = () => {
const today = new Date()
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0)
const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
timeRange.value = [formatDateTime(start), formatDateTime(end)]
search()
}
// const startTime = ref('2023-01-01 00:00:00')
// const endTime = ref('2025-12-31 23:59:59')
const get = async function (val) {
try {
@ -91,14 +65,14 @@ const get = async function (val) {
if (timeRange.value.length === 2) {
time.startTime = moment(timeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
time.endTime = moment(timeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
} else {
time.startTime = ''
time.endTime = ''
} else { // 这是对时间的模拟，根据需求不需要传时间
time.startTime = '2023-01-01 00:00:00'
time.endTime = '2025-12-31 23:59:59'
}
console.log('搜索参数', {
...getObj.value,
rate: { ...time }
rate: {...time}
});
// 发送POST请求
const result = await request({
@ -106,7 +80,7 @@ const get = async function (val) {
method: 'POST',
data: {
...getObj.value,
rate: { ...time }
rate: {...time}
}
});
@ -114,10 +88,8 @@ const get = async function (val) {
console.log('请求成功', result);
// 存储表格数据
tableData.value = result.data.list;
console.log('tableData', tableData.value);
// 存储分页总条目
total.value = result.data.total;
console.log('total', total.value);
} catch (error) {
console.log('请求失败', error);
ElMessage.error('请求失败');
@ -137,14 +109,14 @@ const addRate = async function () {
const date = new Date(rateAdd.value.startTime)
date.setHours(0, 0, 0, 0)
rateAdd.value.startTime = `${date.getFullYear()}-${String(
date.getMonth() + 1
date.getMonth() + 1
).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 00:00:00`
}
if (rateAdd.value.endTime) {
const date = new Date(rateAdd.value.endTime)
date.setHours(23, 59, 59, 999)
rateAdd.value.endTime = `${date.getFullYear()}-${String(
date.getMonth() + 1
date.getMonth() + 1
).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 23:59:59`
}
try {
@ -167,7 +139,6 @@ const addRate = async function () {
get()
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
@ -175,18 +146,18 @@ const add = () => {
Ref.value.validate(async (valid) => {
if (valid) {
ElMessageBox.confirm('确认添加？')
.then(() => {
addRate()
rateAdd.value = {}
timeRange.value = {
startTime: '',
endTime: ''
}
regeAdd.value = false
})
.catch(() => {
regeAdd.value = false
})
.then(() => {
addRate()
rateAdd.value = {}
timeRange.value = {
startTime: '',
endTime: ''
}
regeAdd.value = false
})
.catch(() => {
regeAdd.value = false
})
} else {
//提示
ElMessage({
@ -205,11 +176,16 @@ const handleCurrentChange = function (val) {
get()
}
// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
const throttledAdd = _.throttle(add, 5000, { trailing: false })
const throttledAdd = _.throttle(add, 5000, {trailing: false})
// 编辑方法
const rateEdit = ref({})
//查询已有的数据
const getEditData = async function (row) {
// 重置表单
if (editFormRef.value) {
editFormRef.value.resetFields()
}
try {
console.log('搜索参数', getObj.value)
// 发送POST请求
@ -224,10 +200,8 @@ const getEditData = async function (row) {
rateEdit.value = result.data
rateEdit.value.adminId = adminData.value.adminId
console.log('这是编辑的数值', rateEdit.value)
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
const editRate = async function () {
@ -235,14 +209,14 @@ const editRate = async function () {
const date = new Date(rateEdit.value.startTime)
date.setHours(0, 0, 0, 0)
rateEdit.value.startTime = `${date.getFullYear()}-${String(
date.getMonth() + 1
date.getMonth() + 1
).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 00:00:00`
}
if (rateEdit.value.endTime) {
const date = new Date(rateEdit.value.endTime)
date.setHours(23, 59, 59, 999)
rateEdit.value.endTime = `${date.getFullYear()}-${String(
date.getMonth() + 1
date.getMonth() + 1
).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 23:59:59`
}
try {
@ -257,34 +231,30 @@ const editRate = async function () {
get()
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
const edit = () => {
ElMessageBox.confirm('确认修改？')
.then(() => {
editRate()
regeEdit.value = false
})
.catch(() => {
regeEdit.value = false
})
.then(() => {
editRate()
regeEdit.value = false
})
.catch(() => {
regeEdit.value = false
})
}
// 删除方法
const deleteRate = async function (row) {
try {
// 发送POST请求
const result = await request({
url: '/rates/delete/ ' + row.rateId,
data: {}
})
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
get()
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
// 关闭编辑弹窗时重置表单
const cancelEdit = () => {
regeEdit.value = false
if (editFormRef.value) {
editFormRef.value.resetFields()
}
}
const handleEditDialogClose = () => {
if (editFormRef.value) {
editFormRef.value.resetFields()
}
}
@ -292,10 +262,12 @@ const deleteRate = async function (row) {
onMounted(async function () {
get()
})
//分页
function handlePageChange(currentPage, pageSize) {
get()
}
//货币条目
const options = [
{
@ -347,6 +319,7 @@ function formatDate(value) {
const seconds = date.getSeconds().toString().padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
function formatDateTwe(value) {
if (!value) return ''
const date = new Date(value)
@ -356,11 +329,6 @@ function formatDateTwe(value) {
return `${year}-${month}-${day}`
}
// //表格高度
// const tableHeight = computed(function () {
// return (getObj.value.pageSize + 1) * 50 + "px";
// });
// 新增数据规则
// 表单验证ref
const Ref = ref(null)
@ -393,141 +361,94 @@ const checkFreeGoldRadio = function (rule, value, callback) {
}
}
const rules = reactive({
currency: [{ required: true, message: '请选择货币名称', trigger: 'blur' }],
exchangeRate: [{ validator: checkFreeGoldRadio, trigger: 'blur' }],
startTime: [
{ required: true, message: '请选择开始时间', trigger: 'blur' },
{ validator: checkStartTime, trigger: 'blur' }
],
endTime: [
{ required: true, message: '请选择结束时间', trigger: 'blur' },
{ validator: checkEndTime, trigger: 'blur' }
]
currency: [{required: true, message: '请选择货币名称', trigger: 'blur'}],
exchangeRate: [{validator: checkFreeGoldRadio, trigger: 'blur'}],
// startTime: [
// {required: true, message: '请选择开始时间', trigger: 'blur'},
// {validator: checkStartTime, trigger: 'blur'}
// ],
// endTime: [
// {required: true, message: '请选择结束时间', trigger: 'blur'},
// {validator: checkEndTime, trigger: 'blur'}
// ]
})
// 重置的按钮
const handledelete = function () {
timeRange.value = {}
getObj.value.pageNum = 1
}
// 验证跳转输入框的数字是否合法
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: '请检查输入内容'
})
// 这是限制输入小数不超过七位并验证格式的方法
function handleInput(value) {
// 检测是否包含非法符号
const invalidChars = /[^0-9.]/.test(value);
if (invalidChars) {
ElMessage.warning('只能输入数字和小数点');
}
}
// 删除=========================================================
// 删除按钮
// 过滤非法字符，只保留数字、小数点
let validValue = value.replace(/[^\d.]/g, '');
// 删除按钮的气泡弹出框确认按钮
const delConfirm = async function (row) {
try {
// 发送POST请求
const result = await request({
url: '/rates/delete/ ' + row.rateId,
data: {}
})
if (result.code == 200) {
ElMessage({
type: 'success',
message: '删除成功'
})
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
// 刷新表格数据
get()
} else {
ElMessage({
type: 'error',
message: '删除失败'
})
}
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
// 确保只有一个小数点
validValue = validValue.replace(/\.{2,}/g, '.');
// 限制只能有一个小数点
if (validValue.split('.').length > 2) {
validValue = validValue.replace(/\.$/, '');
ElMessage.warning('注意！只能使用一个小数点');
}
}
//这是限制输入小数不超过七位的限制方法
function handleInput(value) {
// 限制小数点后7位，这里使用正则表达式来实现
rateAdd.value.exchangeRate = value
.replace(/(\.\d{7})\d+/, '$1')
.replace(/^(\d+)(\.\d{0,7})?$/, '$1$2')
// 限制小数点后7位
const originalDecimalPart = validValue.split('.')[1] || '';
validValue = validValue.replace(/(\.\d{7})\d+/, '$1');
// 如果截断了小数部分，提示用户
const newDecimalPart = validValue.split('.')[1] || '';
if (originalDecimalPart.length > 7 && originalDecimalPart !== newDecimalPart) {
ElMessage.warning('最多只能输入7位小数');
}
// 根据需求这里先不用，这里是用防御性编程，直接不允许输入，先留一下，之后可能用
// 应用最终处理后的值
// rateAdd.value.exchangeRate = validValue;
// rateEdit.value.exchangeRate = validValue;
// 验证最终格式
if (validValue && !/^\d+(\.\d{0,7})?$/.test(validValue)) {
ElMessage.warning('请输入正确的数字格式');
}
}
// 表单大小
const formSize = ref('default')
</script>
<template>
<el-row>
<el-col>
<el-card>
<div class="demo-range">
<el-row>
<el-col :span="9">
<el-form-item>
<el-text class="mx-1" size="large">时间范围：</el-text>
<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" style="width: 300px" format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-button @click="getToday">今</el-button>
<el-button @click="getYesterday">昨</el-button>
<el-button @click="get7Days">近7天</el-button>
</el-col>
<el-col :span="4">
<el-button class="button-item" type="success" @click="handledelete()">重置</el-button>
<el-button type="primary" @click="search">查询</el-button>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
<template>
<!-- 这是主页面 -->
<el-row>
<el-col>
<el-card class="box-card" style="max-width: 100%">
<div class="add-item">
<el-button style="color: #048efb; border: 1px solid #048efb" @click="regeAdd = true">新增汇率</el-button>
</div>
<!-- 添加 -->
<!-- 表格 -->
<div>
<el-table :data="tableData" v-if="(tableData.flag = 1)" :height="tableHeight" style="width: 100%">
<el-table-column type="index" label="序号" width="100px" fixed="left">
<!-- 这里有个小bug，应该是>0-->
<el-table
:data="tableData"
v-if="(tableData.flag = 1)"
>
<el-table-column
type="index"
label="序号"
width="100px"
fixed="left"
>
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
</template>
</el-table-column>
<el-table-column prop="currency" label="货币名称" :span="2" />
<el-table-column prop="currency" label="货币名称" :span="2"/>
<el-table-column prop="exchangeRate" label="汇率" :span="2">
<template #default="scope">
<p>
{{ scope.row.exchangeRate }}{{ scope.row.currency }} ：1新币
{{ scope.row.exchangeRate }} ：1
</p>
</template>
</el-table-column>
@ -537,112 +458,93 @@ function handleInput(value) {
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" :span="3">
<template #default="scope">
<el-button type="text" @click="
() => {
regeEdit = true
getEditData(scope.row)
}
">编辑</el-button>
<el-popconfirm title="确定将此条活动删除吗？" @confirm="delConfirm">
<template #reference>
<el-button type="primary" text> 删除 </el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button type="primary" size="small" @click="confirm(scope.row)">
确定
</el-button>
</template>
</el-popconfirm>
<el-button
type="text"
@click="
() => {
regeEdit = true
getEditData(scope.row)
}
"
>编辑
</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination">
<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>
<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 v-model="regeAdd" title="新增汇率" width="500" :close-on-click-modal="false">
<!-- 这是编辑弹窗 -->
<el-dialog
v-model="regeEdit"
title="修改汇率"
width="500"
:close-on-click-modal="false"
@close="handleEditDialogClose"
>
<template #footer>
<el-form ref="Ref" style="max-width: 600px" :model="rateAdd" :rules="rules" label-width="auto"
class="demo-ruleForm" :size="formSize" status-icon>
<el-form
ref="editFormRef"
style="max-width: 600px"
:model="rateEdit"
:rules="rules"
label-width="auto"
class="demo-ruleForm"
:size="formSize"
status-icon
>
<el-form-item prop="currency" label="货币名称:">
<el-select v-model.number="rateAdd.currency" placeholder="请选择" style="width: 240px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
<el-select
v-model="rateEdit.currency"
placeholder="请选择"
style="width: 240px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="exchangeRate" label="汇率:">
<el-input v-model="rateAdd.exchangeRate" @update:modelValue="handleInput" style="width: 120px" />
<el-input
v-model="rateEdit.exchangeRate"
@update:modelValue="handleInput"
style="width: 120px"
/>
<p class="unit">:1</p>
<p>
(提示：当前规则每 {{ rateAdd.exchangeRate }}
{{ rateAdd.currency }}可兑换 1 新币)
</p>
</el-form-item>
<el-form-item prop="adminId" label="提交人:">
<el-input :value="adminData.name" disabled style="width: 240px" />
</el-form-item>
<el-form-item prop="startTime" label="开始时间:">
<el-date-picker v-model="rateAdd.startTime" type="date" placeholder="请选择时间" :default-value="new Date()"
@change="handleStartTimeChange" value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item prop="endTime" label="结束时间:">
<el-date-picker v-model="rateAdd.endTime" type="date" placeholder="请选择时间" :default-value="new Date()"
value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item>
<div class="dialog-footer">
<el-button type="primary" @click="throttledAdd">添加</el-button>
<el-button @click="regeAdd = false">取消</el-button>
</div>
</el-form-item>
</el-form>
</template>
</el-dialog>
<!-- 这是编辑弹窗 -->
<el-dialog v-model="regeEdit" title="修改汇率" width="500" :close-on-click-modal="false">
<template #footer>
<el-form ref="ruleFormRef" style="max-width: 600px" :model="rateEdit" :rules="rules" label-width="auto"
class="demo-ruleForm" :size="formSize" status-icon>
<el-form-item label="货币名称:">
<el-select v-model="rateEdit.currency" placeholder="请选择" style="width: 240px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="汇率:">
<el-input v-model="rateEdit.exchangeRate" style="width: 120px" />
<p class="unit">:1</p>
<p>
(提示：当前规则每 {{ rateEdit.exchangeRate }}
{{ rateEdit.currency }}可兑换 1 新币)
<p class="rate-tip">
(提示：当前规则每
<span>{{ rateEdit.exchangeRate }}</span>
<span>{{ rateEdit.currency }}</span>
可兑换 1 新币)
</p>
</el-form-item>
<el-form-item label="提交人:">
<el-input disabled :value="adminData.name" style="width: 240px" />
</el-form-item>
<el-form-item label="开始时间:">
<el-date-picker v-model="rateEdit.startTime" type="date" placeholder="请选择时间" :default-value="new Date()"
value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item label="结束时间:">
<el-date-picker v-model="rateEdit.endTime" type="date" placeholder="请选择时间" :default-value="new Date()"
value-format="YYYY-MM-DD" />
<el-input disabled :value="adminData.name" style="width: 240px"/>
</el-form-item>
<el-form-item>
<div class="dialog-footer">
<el-button type="primary" @click="edit">修改</el-button>
<el-button @click="regeEdit = false">取消</el-button>
<el-button @click="cancelEdit">取消</el-button>
</div>
</el-form-item>
</el-form>
@ -650,6 +552,7 @@ function handleInput(value) {
</el-dialog>
</template>
<style scoped>
p {
margin: 0px;
@ -702,4 +605,8 @@ p {
.status {
display: flex;
}
</style>
.rate-tip {
hyphens: auto;
}
</style>
Write Preview
Loading…
Cancel
Save