Browse Source
Merge pull request '迁移金币前端功能代码，包括对充值、消耗、退款、金币明细余额文件，还有消耗和金币明细余额制作标签切换时用到了router-view' (#1) from zhangrenyuan/feature-20250623112851-金币前端zry into milestone-20250623-金币前端
Merge pull request '迁移金币前端功能代码，包括对充值、消耗、退款、金币明细余额文件，还有消耗和金币明细余额制作标签切换时用到了router-view' (#1) from zhangrenyuan/feature-20250623112851-金币前端zry into milestone-20250623-金币前端
Reviewed-on: http://39.101.133.168:8807/huangqizhen/gold-vue/pulls/1master
11 changed files with 2984 additions and 748 deletions
-
BINsrc/assets/blue.png
-
20src/router/index.js
-
706src/views/consume/addCoinConsume.vue
-
723src/views/consume/coinConsume.vue
-
629src/views/consume/coinConsumeDetail.vue
-
2src/views/index.vue
-
702src/views/recharge/coinRecharge.vue
-
795src/views/refund/coinRefund.vue
-
60src/views/usergold/clientCount.vue
-
3src/views/usergold/clientCountBalance.vue
-
88src/views/usergold/clientCountDetail.vue
|
After Width: 800 | Height: 800 | Size: 416 KiB |
@ -0,0 +1,706 @@ |
|||||
|
<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 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 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 addConsume = ref({ |
||||
|
freeCoin: 0, |
||||
|
rechargeCoin: 0, |
||||
|
taskCoin: 0, |
||||
|
updateType: "1", |
||||
|
indexName:"", //这个是指标字段，后面绑定 |
||||
|
}); |
||||
|
// 这是添加消费信息的接口 |
||||
|
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.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("添加失败，请检查输入内容是否正确"); |
||||
|
|
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
const addBefore = () => { |
||||
|
Ref.value.validate(async (valid) => { |
||||
|
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); |
||||
|
add(); |
||||
|
console.log("添加成功"); |
||||
|
imageUrl.value = ""; |
||||
|
addConsume.value = {}; |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
console.log("取消添加"); |
||||
|
}); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: "error", |
||||
|
message: "请检查输入内容", |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 表单验证 |
||||
|
// 开始时间改变时，重新验证结束时间 |
||||
|
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: [ |
||||
|
{ 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(); |
||||
|
} |
||||
|
}, |
||||
|
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) { |
||||
|
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 { |
||||
|
user.value = result.data; |
||||
|
user.value.A = |
||||
|
Number(user.value.pendingRechargeTimes) + |
||||
|
Number(user.value.pendingSpendTimes); |
||||
|
console.log("用户信息", user.value); |
||||
|
ElMessage.success(result.msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
ElMessage.error("查询失败，请检查精网号是否正确"); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。 |
||||
|
//这是查询用户金币信息的接口 |
||||
|
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() { |
||||
|
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", |
||||
|
data: {}, |
||||
|
}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
|
||||
|
console.log("请求成功", result); |
||||
|
// 存储全部数据 |
||||
|
goods.value = result.data; |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 获取指标的方法 |
||||
|
const index = ref([]); |
||||
|
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 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); |
||||
|
}; |
||||
|
|
||||
|
// 商品选择处理（重点修改） |
||||
|
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> |
||||
|
|
||||
|
<div> |
||||
|
|
||||
|
|
||||
|
<!-- 根据activeTab切换显示内容 --> |
||||
|
<!-- 新增消耗的布局---------------------------------------------------------- --> |
||||
|
<!-- <div v-if="activeTab === 'addConsume'"> --> |
||||
|
<!-- <div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> --> |
||||
|
|
||||
|
<el-form |
||||
|
:model="addConsume" |
||||
|
ref="Ref" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
style="max-width: 750px;" |
||||
|
class="form-style" |
||||
|
> |
||||
|
<el-form-item prop="jwcode" label="精网号"> |
||||
|
<el-input |
||||
|
v-model="addConsume.jwcode" |
||||
|
style="width: 220px" |
||||
|
@change="getUserGold(addConsume.jwcode)" |
||||
|
/> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click="getUser(addConsume.jwcode)" |
||||
|
style="margin-left: 20px" |
||||
|
>查询</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
<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" |
||||
|
> |
||||
|
<template #default="{ item }"> |
||||
|
<div>{{ item.name }}</div> |
||||
|
</template> |
||||
|
</el-autocomplete> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- 指标选择 --> |
||||
|
<!-- 使用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" |
||||
|
style="width: 100px" |
||||
|
@change="calculateCoins()" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<div style="display: flex; align-items: center"> |
||||
|
<el-form-item prop="rechargeCoin" label="永久金币" style="float: left"> |
||||
|
<el-input |
||||
|
disabled |
||||
|
v-model="addConsume.rechargeCoin" |
||||
|
style="width: 100px; margin-left: -5px" |
||||
|
/> |
||||
|
<p style="margin-right: 0px">个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="freeCoin" |
||||
|
label="免费金币" |
||||
|
style="float: left; margin-left: -20px" |
||||
|
> |
||||
|
<el-input |
||||
|
disabled |
||||
|
v-model="addConsume.freeCoin" |
||||
|
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-input |
||||
|
disabled |
||||
|
v-model="addConsume.taskCoin" |
||||
|
style="width: 100px; margin-left: -5px" |
||||
|
/> |
||||
|
<p style="margin-right: 20px">个</p> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<el-form-item prop="remark" label="备注"> |
||||
|
<el-input |
||||
|
v-model="addConsume.remark" |
||||
|
style="width: 300px" |
||||
|
:rows="2" |
||||
|
maxlength="100" |
||||
|
show-word-limit |
||||
|
type="textarea" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="commitName" label="提交人"> |
||||
|
<el-input |
||||
|
style="width: 300px" |
||||
|
:value="adminData.name" |
||||
|
disabled |
||||
|
placeholder="提交人姓名" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button> |
||||
|
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 客户信息栏 --> |
||||
|
<el-card style="width: 850px; float: right" class="customer-info"> |
||||
|
<el-form |
||||
|
:model="user" |
||||
|
label-width="auto" |
||||
|
style="max-width: 1200px" |
||||
|
label-position="left" |
||||
|
> |
||||
|
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
||||
|
<el-row style="margin-top: 20px"> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item label="姓名:"> |
||||
|
<p>{{ user.name }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="14"> |
||||
|
<el-form-item label="历史金币总数"> |
||||
|
<!-- 检查 user.totalRechargeGold 是否为有效的数字 --> |
||||
|
<p v-if="!isNaN(Number(user.totalRechargeGold))"> |
||||
|
{{ Number(user.totalRechargeGold / 100) }} |
||||
|
</p> |
||||
|
<!-- 如果不是有效的数字，显示默认值 --> |
||||
|
<p v-else></p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item label="精网号"> |
||||
|
<p>{{ user.jwcode }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="14"> |
||||
|
<el-form-item label="当前金币总数" style="width: 500px"> |
||||
|
<span |
||||
|
style="color: #2fa1ff; margin-right: 5px" |
||||
|
v-if="user.buyJb !== undefined" |
||||
|
>{{ |
||||
|
(user.buyJb + user.free6 + user.free12 + user.coreJb) / 100 |
||||
|
}}</span |
||||
|
> |
||||
|
<span |
||||
|
style="display: inline; white-space: nowrap; color: #b1b1b1" |
||||
|
v-if="user.buyJb !== undefined" |
||||
|
>(永久金币:{{ user.buyJb / 100 }};免费金币:{{ |
||||
|
(user.free6 + user.free12) / 100 |
||||
|
}};任务金币:{{ user.coreJb / 100 }})</span |
||||
|
> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item label="首次充值日期"> |
||||
|
<p v-if="user.firstRechargeDate"> |
||||
|
{{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }} |
||||
|
</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="14"> |
||||
|
<el-form-item label="充值次数"> |
||||
|
<p style="color: #2fa1ff">{{ user.rechargeTimes }}</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.spendTimes }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item label="所属门店"> |
||||
|
<p>{{ adminData.area }}</p> |
||||
|
</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> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 金币消耗明细的布局------------------------------------------------------- --> |
||||
|
<!-- <div v-else-if="activeTab === 'detail'"> --> |
||||
|
|
||||
|
<!-- </div> |
||||
|
</div> --> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
p { |
||||
|
margin: 0px; |
||||
|
} |
||||
|
|
||||
|
.el-form-item { |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
|
||||
|
/* 上传图片的格式 */ |
||||
|
.avatar-uploader .avatar { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
.avatar-uploader .el-upload { |
||||
|
border: 1px dashed var(--el-border-color); |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
transition: var(--el-transition-duration-fast); |
||||
|
} |
||||
|
|
||||
|
.avatar-uploader .el-upload:hover { |
||||
|
border-color: var(--el-color-primary); |
||||
|
} |
||||
|
|
||||
|
.el-icon.avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.form-style { |
||||
|
margin-top: 50px; |
||||
|
max-width: 50%; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.form-style2 { |
||||
|
max-width: 60%; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 13px; |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
</style> |
||||
@ -1,690 +1,61 @@ |
|||||
<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 API from "../../api/index.js"; |
|
||||
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 adminData = ref({}); |
|
||||
const getAdminData = async function () { |
|
||||
try { |
|
||||
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 addConsume = ref({ |
|
||||
freeCoin: 0, |
|
||||
rechargeCoin: 0, |
|
||||
taskCoin: 0, |
|
||||
updateType: "1", |
|
||||
indexName:"", //这个是指标字段，后面绑定 |
|
||||
}); |
|
||||
// 这是添加消费信息的接口 |
|
||||
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.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("添加失败，请检查输入内容是否正确"); |
|
||||
|
|
||||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
||||
} |
|
||||
}; |
|
||||
const addBefore = () => { |
|
||||
Ref.value.validate(async (valid) => { |
|
||||
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); |
|
||||
add(); |
|
||||
console.log("添加成功"); |
|
||||
imageUrl.value = ""; |
|
||||
addConsume.value = {}; |
|
||||
}) |
|
||||
.catch(() => { |
|
||||
console.log("取消添加"); |
|
||||
}); |
|
||||
} else { |
|
||||
//提示 |
|
||||
ElMessage({ |
|
||||
type: "error", |
|
||||
message: "请检查输入内容", |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
// 表单验证 |
|
||||
// 开始时间改变时，重新验证结束时间 |
|
||||
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: [ |
|
||||
{ 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(); |
|
||||
} |
|
||||
}, |
|
||||
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) { |
|
||||
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 { |
|
||||
user.value = result.data; |
|
||||
user.value.A = |
|
||||
Number(user.value.pendingRechargeTimes) + |
|
||||
Number(user.value.pendingSpendTimes); |
|
||||
console.log("用户信息", user.value); |
|
||||
ElMessage.success(result.msg); |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.log("请求失败", error); |
|
||||
ElMessage.error("查询失败，请检查精网号是否正确"); |
|
||||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。 |
|
||||
//这是查询用户金币信息的接口 |
|
||||
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() { |
|
||||
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", |
|
||||
data: {}, |
|
||||
}); |
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
|
|
||||
console.log("请求成功", result); |
|
||||
// 存储全部数据 |
|
||||
goods.value = result.data; |
|
||||
} catch (error) { |
|
||||
console.log("请求失败", error); |
|
||||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
||||
} |
|
||||
}; |
|
||||
// 获取指标的方法 |
|
||||
const index = ref([]); |
|
||||
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 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); |
|
||||
}; |
|
||||
|
|
||||
// 商品选择处理（重点修改） |
|
||||
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> |
<template> |
||||
<div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> |
|
||||
|
|
||||
<el-form |
|
||||
:model="addConsume" |
|
||||
ref="Ref" |
|
||||
:rules="rules" |
|
||||
label-width="auto" |
|
||||
style="max-width: 750px;" |
|
||||
class="form-style" |
|
||||
> |
|
||||
<el-form-item prop="jwcode" label="精网号"> |
|
||||
<el-input |
|
||||
v-model="addConsume.jwcode" |
|
||||
style="width: 220px" |
|
||||
@change="getUserGold(addConsume.jwcode)" |
|
||||
/> |
|
||||
|
<div> |
||||
|
<!-- 这里放置标签切换的按钮 --> |
||||
|
<el-button-group> |
||||
|
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
||||
<el-button |
<el-button |
||||
type="primary" |
|
||||
@click="getUser(addConsume.jwcode)" |
|
||||
style="margin-left: 20px" |
|
||||
>查询</el-button |
|
||||
> |
|
||||
</el-form-item> |
|
||||
<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" |
|
||||
> |
|
||||
<template #default="{ item }"> |
|
||||
<div>{{ item.name }}</div> |
|
||||
</template> |
|
||||
</el-autocomplete> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<!-- 指标选择 --> |
|
||||
<!-- 使用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" |
|
||||
style="width: 100px" |
|
||||
@change="calculateCoins()" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<div style="display: flex; align-items: center"> |
|
||||
<el-form-item prop="rechargeCoin" label="永久金币" style="float: left"> |
|
||||
<el-input |
|
||||
disabled |
|
||||
v-model="addConsume.rechargeCoin" |
|
||||
style="width: 100px; margin-left: -5px" |
|
||||
/> |
|
||||
<p style="margin-right: 0px">个</p> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
prop="freeCoin" |
|
||||
label="免费金币" |
|
||||
style="float: left; margin-left: -20px" |
|
||||
|
:type="activeTab === 'add' ? 'primary' : 'default'" |
||||
|
@click="goToAdd" |
||||
> |
> |
||||
<el-input |
|
||||
disabled |
|
||||
v-model="addConsume.freeCoin" |
|
||||
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-input |
|
||||
disabled |
|
||||
v-model="addConsume.taskCoin" |
|
||||
style="width: 100px; margin-left: -5px" |
|
||||
/> |
|
||||
<p style="margin-right: 20px">个</p> |
|
||||
</el-form-item> |
|
||||
|
新增消耗 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
:type="activeTab === 'detail' ? 'primary' : 'default'" |
||||
|
@click="goToDetail" |
||||
|
> |
||||
|
金币消耗明细 |
||||
|
</el-button> |
||||
|
</el-button-group> |
||||
|
<!-- 渲染子路由组件 --> |
||||
|
<router-view></router-view> |
||||
</div> |
</div> |
||||
<el-form-item prop="remark" label="备注"> |
|
||||
<el-input |
|
||||
v-model="addConsume.remark" |
|
||||
style="width: 300px" |
|
||||
:rows="2" |
|
||||
maxlength="100" |
|
||||
show-word-limit |
|
||||
type="textarea" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="commitName" label="提交人"> |
|
||||
<el-input |
|
||||
style="width: 300px" |
|
||||
:value="adminData.name" |
|
||||
disabled |
|
||||
placeholder="提交人姓名" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button> |
|
||||
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
|
||||
</el-form> |
|
||||
|
|
||||
<!-- 客户信息栏 --> |
|
||||
<el-card style="width: 850px; float: right" class="customer-info"> |
|
||||
<el-form |
|
||||
:model="user" |
|
||||
label-width="auto" |
|
||||
style="max-width: 1200px" |
|
||||
label-position="left" |
|
||||
> |
|
||||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|
||||
<el-row style="margin-top: 20px"> |
|
||||
<el-col :span="10"> |
|
||||
<el-form-item label="姓名:"> |
|
||||
<p>{{ user.name }}</p> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="14"> |
|
||||
<el-form-item label="历史金币总数"> |
|
||||
<!-- 检查 user.totalRechargeGold 是否为有效的数字 --> |
|
||||
<p v-if="!isNaN(Number(user.totalRechargeGold))"> |
|
||||
{{ Number(user.totalRechargeGold / 100) }} |
|
||||
</p> |
|
||||
<!-- 如果不是有效的数字，显示默认值 --> |
|
||||
<p v-else></p> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="10"> |
|
||||
<el-form-item label="精网号"> |
|
||||
<p>{{ user.jwcode }}</p> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="14"> |
|
||||
<el-form-item label="当前金币总数" style="width: 500px"> |
|
||||
<span |
|
||||
style="color: #2fa1ff; margin-right: 5px" |
|
||||
v-if="user.buyJb !== undefined" |
|
||||
>{{ |
|
||||
(user.buyJb + user.free6 + user.free12 + user.coreJb) / 100 |
|
||||
}}</span |
|
||||
> |
|
||||
<span |
|
||||
style="display: inline; white-space: nowrap; color: #b1b1b1" |
|
||||
v-if="user.buyJb !== undefined" |
|
||||
>(永久金币:{{ user.buyJb / 100 }};免费金币:{{ |
|
||||
(user.free6 + user.free12) / 100 |
|
||||
}};任务金币:{{ user.coreJb / 100 }})</span |
|
||||
> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="10"> |
|
||||
<el-form-item label="首次充值日期"> |
|
||||
<p v-if="user.firstRechargeDate"> |
|
||||
{{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }} |
|
||||
</p> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="14"> |
|
||||
<el-form-item label="充值次数"> |
|
||||
<p style="color: #2fa1ff">{{ user.rechargeTimes }}</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.spendTimes }}</p> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="10"> |
|
||||
<el-form-item label="所属门店"> |
|
||||
<p>{{ adminData.area }}</p> |
|
||||
</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> |
|
||||
</el-card> |
|
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
|
||||
p { |
|
||||
margin: 0px; |
|
||||
} |
|
||||
|
|
||||
.el-form-item { |
|
||||
margin-left: 50px; |
|
||||
} |
|
||||
|
|
||||
/* 上传图片的格式 */ |
|
||||
.avatar-uploader .avatar { |
|
||||
width: 50px; |
|
||||
height: 50px; |
|
||||
display: block; |
|
||||
} |
|
||||
</style> |
|
||||
|
<script setup> |
||||
|
import { ref, watch } from 'vue'; |
||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||
|
|
||||
<style> |
|
||||
.avatar-uploader .el-upload { |
|
||||
border: 1px dashed var(--el-border-color); |
|
||||
border-radius: 6px; |
|
||||
cursor: pointer; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
transition: var(--el-transition-duration-fast); |
|
||||
} |
|
||||
|
const router = useRouter();// 获取路由实例 |
||||
|
const route = useRoute();// 获取当前路由信息 |
||||
|
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
||||
|
const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add'); |
||||
|
//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面 |
||||
|
//此时获取到的路由信息是coinConsume，所以默认是add |
||||
|
|
||||
.avatar-uploader .el-upload:hover { |
|
||||
border-color: var(--el-color-primary); |
|
||||
} |
|
||||
|
|
||||
.el-icon.avatar-uploader-icon { |
|
||||
font-size: 28px; |
|
||||
color: #8c939d; |
|
||||
width: 50px; |
|
||||
height: 50px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
const goToAdd = () => { |
||||
|
// 点击按钮时更新 activeTab 为 add |
||||
|
activeTab.value = 'add'; |
||||
|
router.push({ name: 'addCoinConsume' }); |
||||
|
}; |
||||
|
|
||||
.form-style { |
|
||||
margin-top: 50px; |
|
||||
max-width: 50%; |
|
||||
float: left; |
|
||||
} |
|
||||
|
const goToDetail = () => { |
||||
|
// 点击按钮时更新 activeTab 为 detail |
||||
|
activeTab.value = 'detail'; |
||||
|
router.push({ name: 'coinConsumeDetail' }); |
||||
|
}; |
||||
|
|
||||
.form-style2 { |
|
||||
max-width: 60%; |
|
||||
|
// 监听路由变化，更新 activeTab |
||||
|
watch(() => route.name, (newName) => { |
||||
|
if (newName === 'addCoinConsume') { |
||||
|
activeTab.value = 'add'; |
||||
|
} else if (newName === 'coinConsumeDetail') { |
||||
|
activeTab.value = 'detail'; |
||||
} |
} |
||||
|
}); |
||||
|
|
||||
p { |
|
||||
font-size: 13px; |
|
||||
transform: scale(1); |
|
||||
|
// 当进入父路由时，默认跳转到新增消耗页面 |
||||
|
if (route.name === 'coinConsume') { |
||||
|
router.push({ name: 'addCoinConsume' }); |
||||
} |
} |
||||
</style> |
|
||||
|
</script> |
||||
@ -0,0 +1,629 @@ |
|||||
|
<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 request from '@/util/http' |
||||
|
// 变量 |
||||
|
//这是获取用户信息的接口 |
||||
|
const adminData = ref({}) |
||||
|
const getAdminData = async function () { |
||||
|
try { |
||||
|
const result = await request({ |
||||
|
url: '/admin/userinfo', |
||||
|
data: {} |
||||
|
}) |
||||
|
adminData.value = result |
||||
|
console.log('请求成功', result) |
||||
|
console.log('用户信息', adminData.value) |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
} |
||||
|
} |
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]) |
||||
|
// 搜索====================================== |
||||
|
// 搜索detailVo |
||||
|
const detailVo = ref({}) |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 50 |
||||
|
}) |
||||
|
//分页总条目 |
||||
|
const total = ref(100) |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]) |
||||
|
// 搜索活动列表 |
||||
|
const activity = ref([]) |
||||
|
// 所有信息 |
||||
|
const allData = ref([]) |
||||
|
// 搜索地区列表 |
||||
|
const area = ref([]) |
||||
|
|
||||
|
//标签页默认高亮选项 |
||||
|
const activeName = ref('all') |
||||
|
|
||||
|
// 消费平台选项 |
||||
|
const consumePlatform = [ |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: '金币系统' |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
value: '1', |
||||
|
label: 'Homily Chart' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: 'Homily Link' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: 'ERP系统' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
// //表格高度 |
||||
|
// const tableHeight = computed(function () { |
||||
|
// return (getObj.value.pageSize + 1) * 41 + "px"; |
||||
|
// }); |
||||
|
// 方法 |
||||
|
// 合计数的显示数据 |
||||
|
const tableDataTotal = ref({}) |
||||
|
const rechargeCoin = ref(0) |
||||
|
const freeCoin = ref(0) |
||||
|
const taskCoin = ref(0) |
||||
|
const totalCoin = ref(0) |
||||
|
// 搜索========================================================================================================================================================= |
||||
|
// 搜索方法 |
||||
|
const get = async function (val) { |
||||
|
try { |
||||
|
// 地区赋值 |
||||
|
if (adminData.value.area != '总部') { |
||||
|
detailVo.value.area = adminData.value.area |
||||
|
} |
||||
|
// 搜索参数页码赋值 |
||||
|
if (typeof val === 'number') { |
||||
|
getObj.value.pageNum = val |
||||
|
} |
||||
|
// 搜索参数时间赋值 |
||||
|
if (getTime.value != null) { |
||||
|
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
||||
|
detailVo.value.startDate = getTime.value[0] |
||||
|
detailVo.value.endDate = getTime.value[1] |
||||
|
} |
||||
|
} else { |
||||
|
detailVo.value.startDate = '' |
||||
|
detailVo.value.endDate = '' |
||||
|
} |
||||
|
detailVo.value.sortField = sortField.value |
||||
|
detailVo.value.sortOrder = sortOrder.value |
||||
|
console.log('搜索参数', getObj.value) |
||||
|
// 发送POST请求 |
||||
|
const result = await request({ |
||||
|
url: '/consume/select', |
||||
|
data: { |
||||
|
...getObj.value, |
||||
|
consumeDetail: { ...detailVo.value } |
||||
|
} |
||||
|
}) |
||||
|
// 合计数的接口 |
||||
|
// 复制一份 detail.value 并移除排序字段和排序方式 |
||||
|
const detailWithoutSort = { ...detailVo.value } |
||||
|
delete detailWithoutSort.sortField |
||||
|
delete detailWithoutSort.sortOrder |
||||
|
const result2 = await request({ |
||||
|
url: '/consume/SumConsume', |
||||
|
data: { |
||||
|
...detailWithoutSort |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result) |
||||
|
console.log('请求成功2', result2) |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.list |
||||
|
tableDataTotal.value = result2.data |
||||
|
if (result2.data == null) { |
||||
|
console.log('请求成功2', result2) |
||||
|
tableDataTotal.value = { |
||||
|
sumRcion: 0, |
||||
|
sumFcion: 0, |
||||
|
sumTcion: 0, |
||||
|
sumcion: 0 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
console.log('tableDataT', tableDataTotal) |
||||
|
|
||||
|
// 修改为保留两位小数 |
||||
|
rechargeCoin.value = parseFloat( |
||||
|
(tableDataTotal.value.sumRcion / 100).toFixed(2) |
||||
|
) |
||||
|
freeCoin.value = parseFloat( |
||||
|
(tableDataTotal.value.sumFcion / 100).toFixed(2) |
||||
|
) |
||||
|
taskCoin.value = parseFloat( |
||||
|
(tableDataTotal.value.sumTcion / 100).toFixed(2) |
||||
|
) |
||||
|
totalCoin.value = parseFloat( |
||||
|
(tableDataTotal.value.sumcion / 100).toFixed(2) |
||||
|
) |
||||
|
console.log('tableData', tableData.value) |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.total |
||||
|
console.log('total', total.value) |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 搜索 |
||||
|
const search = function () { |
||||
|
getObj.value.pageNum = 1 |
||||
|
get() |
||||
|
} |
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
detailVo.value.productName = '' |
||||
|
detailVo.value.area = '' |
||||
|
detailVo.value.consumePlatform = '' |
||||
|
detailVo.value.consumeType = '' |
||||
|
detailVo.value.startDate = '' |
||||
|
detailVo.value.endDate = '' |
||||
|
sortField.value = '' |
||||
|
sortOrder.value = '' |
||||
|
getTime.value = {} |
||||
|
} |
||||
|
// 今天 |
||||
|
const getToday = function () { |
||||
|
const today = new Date() |
||||
|
const startDate = new Date( |
||||
|
today.getFullYear(), |
||||
|
today.getMonth(), |
||||
|
today.getDate() |
||||
|
) |
||||
|
const endDate = new Date( |
||||
|
today.getFullYear(), |
||||
|
today.getMonth(), |
||||
|
today.getDate() + 1 |
||||
|
) |
||||
|
getTime.value = [startDate, endDate] |
||||
|
console.log('getTime', getTime.value) |
||||
|
get() |
||||
|
} |
||||
|
// 昨天 |
||||
|
const getYesterday = function () { |
||||
|
const yesterday = new Date() |
||||
|
yesterday.setDate(yesterday.getDate() - 1) |
||||
|
const startDate = new Date( |
||||
|
yesterday.getFullYear(), |
||||
|
yesterday.getMonth(), |
||||
|
yesterday.getDate() |
||||
|
) |
||||
|
const endDate = new Date( |
||||
|
yesterday.getFullYear(), |
||||
|
yesterday.getMonth(), |
||||
|
yesterday.getDate() + 1 |
||||
|
) |
||||
|
getTime.value = [startDate, endDate] |
||||
|
console.log('getTime', getTime.value) |
||||
|
get() |
||||
|
} |
||||
|
// 近7天 |
||||
|
const get7Days = function () { |
||||
|
const today = new Date() |
||||
|
const startDate = new Date( |
||||
|
today.getFullYear(), |
||||
|
today.getMonth(), |
||||
|
today.getDate() - 6 |
||||
|
) |
||||
|
const endDate = new Date( |
||||
|
today.getFullYear(), |
||||
|
today.getMonth(), |
||||
|
today.getDate() + 1 |
||||
|
) |
||||
|
getTime.value = [startDate, endDate] |
||||
|
console.log('getTime', getTime.value) |
||||
|
get() |
||||
|
} |
||||
|
//点击标签页 |
||||
|
const handleClick = function (tab, event) { |
||||
|
if (tab.props.name === 'all') { |
||||
|
adminAll() |
||||
|
} else if (tab.props.name === 'wait') { |
||||
|
adminWait() |
||||
|
} else if (tab.props.name === 'pass') { |
||||
|
adminPass() |
||||
|
} else if (tab.props.name === 'reject') { |
||||
|
adminReject() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await getAdminData() |
||||
|
await get() |
||||
|
// getActivity(); |
||||
|
await getArea(); |
||||
|
}) |
||||
|
|
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
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 goods = ref([]) |
||||
|
const getGoods = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await request({ |
||||
|
url: '/product/findProductName', |
||||
|
data: {} |
||||
|
}) |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功product', result) |
||||
|
// 存储全部数据 |
||||
|
goods.value = result.data |
||||
|
console.log('goods 数据', goods.value) // 修改日志输出 |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error) |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
getGoods() |
||||
|
|
||||
|
// 获取地区列表的方法，虚拟接口，替换为实际的地区列表接口地址 |
||||
|
const getArea = async function () { |
||||
|
try { |
||||
|
// 发送请求获取地区列表 |
||||
|
const result = await request({ |
||||
|
url: '/area/list', |
||||
|
data: {} |
||||
|
}) |
||||
|
console.log('请求地区列表成功', result) |
||||
|
// 存储地区数据 |
||||
|
area.value = result.data |
||||
|
console.log('地区数据', area.value) |
||||
|
} catch (error) { |
||||
|
console.log('请求地区列表失败', error) |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '获取地区列表失败，请稍后重试' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// 新增排序字段和排序方式 |
||||
|
const sortField = ref('') |
||||
|
const sortOrder = ref('') |
||||
|
// 处理排序事件 |
||||
|
const handleSortChange = (column) => { |
||||
|
console.log('排序字段：', column.prop) |
||||
|
console.log('排序方式：', column.order) |
||||
|
if (column.prop === 'rechargeCoin') { |
||||
|
sortField.value = 'recharge_coin' |
||||
|
} else if (column.prop === 'taskCoin') { |
||||
|
sortField.value = 'task_coin' |
||||
|
} else if (column.prop === 'freeCoin') { |
||||
|
sortField.value = 'free_coin' |
||||
|
} else if (column.prop === 'createTime') { |
||||
|
sortField.value = 'create_time' |
||||
|
} |
||||
|
sortOrder.value = column.order === 'ascending' ? 'DESC' : 'ASC' |
||||
|
get() |
||||
|
} |
||||
|
const handlePageSizeChange = function (val) { |
||||
|
getObj.value.pageSize = val |
||||
|
get() |
||||
|
} |
||||
|
const handleCurrentChange = function (val) { |
||||
|
getObj.value.pageNum = val |
||||
|
get() |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px;margin-top:10px"> |
||||
|
<el-row style="margin-bottom: 10px"> |
||||
|
<el-col :span="6"> |
||||
|
<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-for 绑定逻辑 --> |
||||
|
<el-option |
||||
|
v-for="(item, index) in goods" |
||||
|
:key="index" |
||||
|
:label="item" |
||||
|
:value="item" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<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 |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="(item, index) in area" |
||||
|
:key="index" |
||||
|
:label="item" |
||||
|
:value="item" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<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 |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in consumePlatform" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<!-- <el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">消费类型：</el-text> |
||||
|
<el-select |
||||
|
v-model="detailVo.consumeType" |
||||
|
placeholder="请选择消费类型" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in consumeType" |
||||
|
:key="item" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> --> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="21"> |
||||
|
<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="结束时间" |
||||
|
/> |
||||
|
<el-button style="margin-left: 10px" @click="getToday()" |
||||
|
>今</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"> --> |
||||
|
<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> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<div> |
||||
|
消费金币总数：{{ Math.abs(totalCoin) }}，永久金币：{{ |
||||
|
Math.abs(rechargeCoin) |
||||
|
}}，免费金币：{{ Math.abs(freeCoin) }}，任务金币：{{ |
||||
|
Math.abs(taskCoin) |
||||
|
}} |
||||
|
</div> |
||||
|
<!-- 设置表格容器的高度和滚动样式 --> |
||||
|
<div style="height: 576px; overflow-y: auto"> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%" |
||||
|
height="576px" |
||||
|
@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="username" |
||||
|
label="姓名" |
||||
|
width="150px" |
||||
|
fixed="left" |
||||
|
/> |
||||
|
<!-- 固定精网号列 --> |
||||
|
<el-table-column |
||||
|
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="consumePlatform" |
||||
|
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> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column |
||||
|
prop="consumeType" |
||||
|
label="消费类型" |
||||
|
width="120px" |
||||
|
/> --> |
||||
|
<el-table-column |
||||
|
prop="rechargeTotal" |
||||
|
label="消费金币总数" |
||||
|
width="120px" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
{{ |
||||
|
(scope.row.taskCoin * -1 + |
||||
|
scope.row.freeCoin * -1 + |
||||
|
scope.row.rechargeCoin * -1) / |
||||
|
100 |
||||
|
}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="rechargeCoin" |
||||
|
label="永久金币" |
||||
|
sortable="“custom”" |
||||
|
width="110px" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
{{ (scope.row.rechargeCoin * -1) / 100 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="freeCoin" |
||||
|
label="免费金币" |
||||
|
sortable="“custom”" |
||||
|
width="110px" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
{{ (scope.row.freeCoin * -1) / 100 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="taskCoin" |
||||
|
label="任务金币" |
||||
|
sortable="“custom”" |
||||
|
width="110px" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
{{ (scope.row.taskCoin * -1) / 100 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="remark" |
||||
|
label="备注" |
||||
|
width="200px" |
||||
|
show-overflow-tooltip |
||||
|
/> |
||||
|
<el-table-column prop="name" label="提交人" width="110px" /> |
||||
|
<el-table-column |
||||
|
prop="createTime" |
||||
|
label="消费时间" |
||||
|
sortable="“custom”" |
||||
|
width="180px" |
||||
|
/> |
||||
|
</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> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,60 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- 这里放置标签切换的按钮 --> |
||||
|
<el-button-group> |
||||
|
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
||||
|
<el-button |
||||
|
:type="activeTab === 'detail' ? 'primary' : 'default'" |
||||
|
@click="goToDetail" |
||||
|
> |
||||
|
金币明细 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
:type="activeTab === 'balance' ? 'primary' : 'default'" |
||||
|
@click="goToBalance" |
||||
|
> |
||||
|
金币余额 |
||||
|
</el-button> |
||||
|
</el-button-group> |
||||
|
<!-- 渲染子路由组件 --> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, watch } from 'vue'; |
||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||
|
|
||||
|
const router = useRouter();// 获取路由实例 |
||||
|
const route = useRoute();// 获取当前路由信息 |
||||
|
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
||||
|
const activeTab = ref(route.name === 'clientCountBalance' ? 'balance' : 'detail'); |
||||
|
//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面 |
||||
|
//此时获取到的路由信息是clientCountDetail，所以默认是detail |
||||
|
|
||||
|
|
||||
|
const goToDetail = () => { |
||||
|
// 点击按钮时更新 activeTab 为 detail |
||||
|
activeTab.value = 'detail'; |
||||
|
router.push({ name: 'clientCountDetail' }); |
||||
|
}; |
||||
|
|
||||
|
const goToBalance = () => { |
||||
|
// 点击按钮时更新 activeTab 为balance |
||||
|
activeTab.value = 'balance'; |
||||
|
router.push({ name: 'clientCountBalance' }); |
||||
|
}; |
||||
|
|
||||
|
// 监听路由变化，更新 activeTab |
||||
|
watch(() => route.name, (newName) => { |
||||
|
if (newName === 'clientCountDetail') { |
||||
|
activeTab.value = 'detail'; |
||||
|
} else if (newName === 'clientCountBalance') { |
||||
|
activeTab.value = 'balance'; |
||||
|
}}); |
||||
|
|
||||
|
// 当进入父路由时，默认跳转到金币明细页面 |
||||
|
if (route.name === 'usergold') { |
||||
|
router.push({ name: 'clientCountDetail' }); |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,3 @@ |
|||||
|
<template> |
||||
|
<p>1111</p> |
||||
|
</template> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue