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

迁移金币前端功能代码，包括对充值、消耗、退款、金币明细余额文件，还有消耗和金币明细余额制作标签切换时用到了router-view

pull/1/head
zry 1 week ago
parent
b7b069d177
commit
40a4576699
11 changed files with 2984 additions and 748 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. BIN
      src/assets/blue.png
  2. 20
      src/router/index.js
  3. 706
      src/views/consume/addCoinConsume.vue
  4. 723
      src/views/consume/coinConsume.vue
  5. 629
      src/views/consume/coinConsumeDetail.vue
  6. 2
      src/views/index.vue
  7. 702
      src/views/recharge/coinRecharge.vue
  8. 795
      src/views/refund/coinRefund.vue
  9. 60
      src/views/usergold/clientCount.vue
  10. 3
      src/views/usergold/clientCountBalance.vue
  11. 88
      src/views/usergold/clientCountDetail.vue

BIN
src/assets/blue.png
View File

Side by Side

After

Width: 800  |  Height: 800  |  Size: 416 KiB

20
src/router/index.js
View File

@ -18,7 +18,14 @@ const router = createRouter({
// 退款审核
{ path: '/refundAudit', name: "refundAudit", component: () => import("../views/audit/refundAudit.vue") },
// 金币消耗
{ path: '/coinConsume', name: "coinConsume", component: () => import("../views/consume/coinConsume.vue") },
{ path: '/coinConsume', name: "coinConsume", component: () => import("../views/consume/coinConsume.vue"),
children: [
// 金币新增消耗
{ path: 'add', name: "addCoinConsume", component: () => import("../views/consume/addCoinConsume.vue") },
// 金币消耗明细详情
{ path: 'detail', name: "coinConsumeDetail", component: () => import("../views/consume/coinConsumeDetail.vue") }
]
},
// 金豆消耗
{ path: '/beanConsume', name: "beanConsume", component: () => import("../views/consume/beanConsume.vue") },
// 汇率管理
@ -31,8 +38,15 @@ const router = createRouter({
{ path: '/coinRefund', name: "coinRefund", component: () => import("../views/refund/coinRefund.vue") },
// 金豆退款
{ path: '/beanRefund', name: "beanRefund", component: () => import("../views/refund/beanRefund.vue") },
// 客户金币明细
{ path: '/usergold', name: "usergold", component: () => import("../views/usergold/index.vue") },
// 客户账户明细
{ path: '/usergold', name: "usergold", component: () => import("../views/usergold/clientCount.vue"),
children: [
// 金币明细
{ path: 'detail', name: "clientCountDetail", component: () => import("../views/usergold/clientCountDetail.vue") },
// 金币余额
{ path: 'balance', name: "clientCountBalance", component: () => import("../views/usergold/clientCountBalance.vue") },
]
},
// 权限管理
{ path: '/permissions', name: "permissions", component: () => import("../views/permissions/index.vue") },
// 没有权限

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

@ -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>

723
src/views/consume/coinConsume.vue
View File

@ -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>
<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
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>
<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>
<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>

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

@ -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>

2
src/views/index.vue
View File

@ -7,7 +7,7 @@ import { VscGlobe } from 'vue-icons-plus/vsc'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import API from '@/util/http'
import dmmn from '../assets/avator.png'
import dmmn from '../assets/blue.png'
import { useRoute } from 'vue-router'
const router = useRouter()

702
src/views/recharge/coinRecharge.vue
View File

@ -1,14 +1,18 @@
<script setup>
import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import ElementPlus from 'element-plus'
import { ElMessage,ElMessageBox } from 'element-plus'
import { AiFillRead } from 'vue-icons-plus/ai'
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import API from '@/util/http'
import request from '@/util/http'
import moment from 'moment'
import { range, re } from 'mathjs'
import { utils, read } from 'xlsx'
import throttle from 'lodash/throttle'
//新增充值------------------------------------------------------------------------------
// 精网号去空格
const trimJwCode = () => {
if (addRecharge.value.jwcode) {
@ -29,11 +33,13 @@ const beforeAvatarUpload = (file) => {
}
return (isJPG || isPNG) && isLt2M
}
// 这是添加上传图片的接口
const imageUrl = ref('')
const rechargeVoucher = ref('')
const Rate = ref()
const adminData = ref({})
const imageUrl = ref('')//上传图片的url
const rechargeVoucher = ref('')//充值凭证
const Rate = ref()//汇率
//请求管理员的接口，充值明细也需要获取到
const adminData = ref({})//管理员信息
const getAdminData = async function () {
try {
const result = await API({
@ -43,8 +49,8 @@ const getAdminData = async function () {
adminData.value = result
addRecharge.value.adminId = adminData.value.adminId
addRecharge.value.area = adminData.value.area
console.log('请求成功', result)
console.log('用户信息', user.value)
console.log('管理员信息请求成功', result)
// console.log('用户信息', user.value),user.value打印的没有什么意义
} catch (error) {
console.log('请求失败', error)
}
@ -74,7 +80,7 @@ const add = async function () {
return
}
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
console.log('/recharge/recharge/add请求成功', result)
// 显示成功消息
ElMessage.success('添加成功')
// 重置表单
@ -228,7 +234,7 @@ const getActivity = async function () {
})
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
console.log('请求成功activity', result)
// 存储表格数据
activity.value = result.data
console.log('活动信息', activity.value)
@ -252,7 +258,7 @@ const getCurrency = async function () {
console.log('货币请求成功', result)
// 存储表格数据
currency.value = result.data
console.log('tableData', currency.value)
console.log('currency', currency.value)
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
} catch (error) {
console.log('请求失败', error)
@ -350,7 +356,7 @@ const getJwcodeList = async function () {
jwcodeSet = new Set(jwcodeList.value)
console.log('精网号set', jwcodeSet)
} catch (error) {
console.log('请求失败', error)
console.log('请求失败jwcodelist', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
@ -376,7 +382,6 @@ const validateInput = function (row, index) {
// 批量充值弹窗
const batchRechargeVisible = ref(false)
const i = ref(1)
const delObj = ref({})
const batchDelObj = ref([])
const resetObj = ref({})
// 批量充值表格数据
@ -853,20 +858,360 @@ const batchSettingConfirm = function () {
closeBatchSettingVisible()
}
//充值明细表单-------------------------------------------------------------------------------
//获取管理员用户信息的接口*
//变量
//充值明细表格
const tableData = ref([])
//搜索=========================================
//搜索recharge
const rechargeVo = ref({
adminId: adminData.value.adminId
})
//搜索对象
const getObj = ref({
pageNum: 1,
pageSize: 50
})
//分页总条目
const total = ref(100)
// 搜索对象时间
const getTime = ref([])
// 搜索活动列表*
// 所有信息
const allData = ref([])
// 搜索地区列表
const area = ref([])
//标签页默认高亮选项
const activeName = ref('all')
//充值方式选项
const rechargeWay = [
{
value: '客户储值',
label: '客户储值'
},
{
value: '平台充值',
label: '平台充值'
}
]
// 支付方式选项
const payWay = [
{
value: '现金',
label: '现金'
},
{
value: '支票',
label: '支票'
},
{
value: '刷卡',
label: '刷卡'
},
{
value: '其他(各地区电子支付)',
label: '其他(各地区电子支付)'
}
]
// 删除==========================================================
// 删除对象
const delObj = ref({})
// 方法
// 合计数存储
const trueGold = ref(0)
const trueRGold = ref(0)
const trueFGold = ref(0)
// 搜索===========================================================================
// 搜索方法
const get = async function (val) {
try {
// 地区赋值
if (adminData.value.area === '泰国') {
rechargeVo.value.areas = ['泰国', '越南']
} else if (adminData.value.area !== '总部') {
rechargeVo.value.area = adminData.value.area
}
// 搜索参数页码赋值
if (typeof val === 'number') {
getObj.value.pageNum = val
}
// 搜索参数时间赋值
if (getTime.value != null) {
if (getTime.value.startDate != '' && getTime.value.endDate != '') {
rechargeVo.value.startDate = getTime.value[0]
rechargeVo.value.endDate = getTime.value[1]
}
} else {
rechargeVo.value.startDate = ''
rechargeVo.value.endDate = ''
}
// 搜索参数赋值
rechargeVo.value.sortField = sortField.value
rechargeVo.value.sortOrder = sortOrder.value
console.log('搜索参数', getObj.value)
// 发送POST请求
const result = await API({
url: '/recharge/recharge',
data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } }
})
console.log('请求成功get',result)
// 计算充值金额、永久金币、免费金币总和
trueGold.value = 0
trueRGold.value = 0
trueFGold.value = 0
if (result.data && result.data.list) {
result.data.list.forEach((item) => {
trueGold.value += item.paidGold || 0
trueRGold.value += item.paidGold || 0
trueFGold.value += item.freeGold || 0
})
}
// 将响应结果存储到响应式数据中
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('请求失败get', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
// 搜索
const search = function () {
getObj.value.pageNum = 1
get()
}
// 重置
const reset = function () {
delete rechargeVo.value.jwcode
delete rechargeVo.value.activityId
delete rechargeVo.value.rechargeWay
delete rechargeVo.value.area
delete rechargeVo.value.startDate
delete rechargeVo.value.endDate
delete sortField.value
delete sortOrder.value
getTime.value = []
}
// 新增排序字段和排序方式
const sortField = ref('')
const sortOrder = ref('')
// 处理排序事件
const handleSortChange = (column) => {
get()
console.log('排序字段：', column.prop)
console.log('排序方式：', column.order)
if (column.prop === 'paidGold') {
sortField.value = 'recharge_gold'
} else if (column.prop === 'freeGold') {
sortField.value = 'free_gold'
} else if (column.prop === 'rechargeTime') {
sortField.value = 'recharge_time'
} else if (column.prop === 'createTime') {
sortField.value = 'create_time'
}
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
console.log('传递给后端的排序字段：', sortField.value)
console.log('传递给后端的排序方式：', sortOrder.value)
get()
}
// 今天
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 handlePageSizeChange = function (val) {
getObj.value.pageSize = val
get()
}
const handleCurrentChange = function (val) {
getObj.value.pageNum = val
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 getArea = async function () {
try {
const result = await request({
url: '/recharge/user/search',
data: {}
})
//将响应结果存储到响应式数据中
console.log('area请求成功',result)
//存储地区信息
area.value = result.data
console.log('area',area.value)
} catch (error) {
console.log('area请求失败',error)
ElMessage.error('获取地区数据失败')
}
}
// 删除=================================
// 点击删除按钮
const del = function (row) {
delObj.value.rechargeId = row.rechargeId
console.log('delObj1', delObj.value)
}
// 确认删除按钮
const delConfirm = async function () {
try {
console.log('delObj2', delObj.value)
const result = await API({
url: '/recharge/recharge/edit',
data: delObj.value
})
console.log('删除成功', result)
// 刷新表格数据
get()
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
// 验证跳转输入框的数字是否合法
const checkNumber = function () {
if (typeof !isNaN(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 activeTab = ref('addRecharge')
// 切换标签页的方法
const changeTab = async (tabName) => {
activeTab.value = tabName
if(tabName === 'detail'){
//切换至明细标签时调用get方法
await get()
}
}
// 挂载
onMounted(async function () {
await getAdminData()
await getCurrency()
await getActivity()
await getArea()
await getJwcodeList()
//调用get方法获取明细数据
//await get()
})
</script>
<template>
<div style="display: flex">
<div>
<el-button-group>
<!-- 切换后状态显示样式否则是默认样式 -->
<el-button
:type="activeTab === 'addRecharge' ? 'primary' : 'default'"
@click="changeTab('addRecharge')"
>
新增充值
</el-button>
<el-button
:type="activeTab === 'detail' ? 'primary' : 'default'"
@click="changeTab('detail')"
>
金币充值明细
</el-button>
</el-button-group>
<!-- 根据activeTab切换显示内容 -->
<!-- 新增充值的布局------------------------------------------------------------------- -->
<div v-if="activeTab === 'addRecharge'">
<!-- <div style="display: flex">
<div style="margin-right: 20px">新增充值</div>
<!-- <el-button type="primary" plain @click="batchInit()">批量充值</el-button> -->
</div>
</div> -->
<el-form
:model="addRecharge"
@ -956,7 +1301,7 @@ onMounted(async function () {
style="margin-bottom: 5px"
>
<el-upload
action="http://54.251.137.151:10704/upload"
action="http://39.101.133.168:8828/hljw/api/aws/upload"
class="avatar-uploader"
:show-file-list="false"
:on-success="handleAvatarSuccess"
@ -978,7 +1323,7 @@ onMounted(async function () {
</el-icon>
</el-upload>
<p style="margin-left: 10px; color: rgb(177, 176, 176)">
仅支持.jpg .png格式，文件≤1MB
仅支持.jpg .png格式，文件≤2MB
</p>
</el-form-item>
<el-form-item prop="remark" label="备注">
@ -1007,7 +1352,7 @@ onMounted(async function () {
<!-- 客户信息栏 -->
<el-card
style="width: 1200px; float: right"
style="width: 1200px; float: right;margin-bottom:20px;margin-top: 10px;"
class="customer-info"
width="3000px"
>
@ -1288,7 +1633,7 @@ onMounted(async function () {
<el-table-column property="rechargeVoucher" label="充值凭证">
<template #default="scope">
<el-upload
action="http://54.251.137.151:10704/upload"
action="http://39.101.133.168:8828/hljw/api/aws/upload"
class="avatar-uploader"
:show-file-list="false"
:on-success="handleBatchAvatarSuccess"
@ -1453,7 +1798,7 @@ onMounted(async function () {
</el-form-item>
<el-form-item prop="rechargeVoucher" label="交款凭证">
<el-upload
action="http://54.251.137.151:10704/upload"
action="http://39.101.133.168:8828/hljw/api/aws/upload"
class="avatar-uploader"
:show-file-list="false"
:on-success="batchSettingHandleAvatarSuccess"
@ -1488,6 +1833,319 @@ onMounted(async function () {
>
<el-button type="primary" @click="batchSettingConfirm()"> 确认 </el-button>
</el-dialog>
</div>
<!-- 金币充值明细的布局---------------------------------------------------------- -->
<div v-else-if="activeTab === 'detail'">
<el-row>
<el-col>
<el-card style="margin-bottom: 20px;margin-top: 10px">
<el-row style="margin-bottom: 10px">
<el-col :span="5">
<div class="head-card-element">
<el-text class="mx-1" size="large">精网号：</el-text>
<el-input v-model="rechargeVo.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
</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="rechargeVo.activityId" placeholder="请选择活动名称" style="width: 180px"
clearable>
<el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
:value="item.activityId" />
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="head-card-element" v-if="adminData.area == '总部'">
<el-text class="mx-1" size="large">所属地区：</el-text>
<el-select v-model="rechargeVo.area" placeholder="请选择所属地区" style="width: 180px" clearable>
<el-option v-for="item in area" :key="item" :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="rechargeVo.rechargeWay" placeholder="请选择支付方式" style="width: 180px" clearable>
<el-option v-for="item in rechargeWay" :key="item.value" :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>
充值金额：{{ trueRGold.toFixed(2) }}新币，永久金币：{{
trueRGold.toFixed(2)
}}金币，免费金币：{{ trueFGold }}金币
</div>
<!-- 设置表格容器的高度和滚动样式 -->
<div style="height: 520px; overflow-y: auto;margin-top: 10px;">
<el-table
:data="tableData"
style="width: 100%"
height="520px"
@sort-change="handleSortChange"
>
<el-table-column
type="index"
label="序号"
width="80px"
fixed="left"
>
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
</template>
</el-table-column>
<el-table-column
fixed="left"
prop="username"
label="姓名"
width="80px"
/>
<el-table-column
fixed="left"
prop="jwcode"
label="精网号"
width="80px"
/>
<el-table-column prop="area" label="所属地区" width="100px" />
<el-table-column
prop="activityName"
label="活动名称"
width="100px"
/>
<el-table-column prop="" label="货币名称" width="110px" />
<el-table-column
prop="paidGold"
sortable="custom"
label="充值金额"
width="110px"
/>
<el-table-column
prop="paidGold"
label="永久金币"
sortable="custom"
width="110px"
/>
<el-table-column
prop="freeGold"
label="免费金币"
sortable="custom"
width="110px"
/>
<el-table-column
prop="rechargeWay"
label="充值方式"
width="100px"
/>
<el-table-column prop="payWay" label="支付方式" width="100px" />
<el-table-column
prop="remark"
label="备注"
width="150px"
show-overflow-tooltip
/>
<!-- <el-table-column
prop="rechargeVoucher"
label="支付凭证"
width="150px"
>
<template #default="scope">
<el-image
:preview-src-list="[scope.row.rechargeVoucher]"
preview-teleported="true"
:src="scope.row.rechargeVoucher"
alt="凭证"
style="width: 50px; height: 50px"
/>
</template>
</el-table-column> -->
<el-table-column prop="name" label="提交人" width="100px" />
<!-- <el-table-column prop="status" label="状态" width="100px">
<template #default="scope">
<span v-if="scope.row.status === 1">
<div class="status">
<span class="green-dot"></span>
<span>已通过</span>
</div>
</span>
<span v-if="scope.row.status === 0">
<div class="status">
<span class="grey-dot"></span>
<span>待审核</span>
</div>
</span>
<span v-if="scope.row.status === 2">
<div class="status">
<span class="red-dot"></span>
<span>已驳回</span>
</div>
</span>
</template>
</el-table-column>
<el-table-column
prop="reson"
label="驳回理由"
width="200px"
show-overflow-tooltip
/> -->
<el-table-column
prop="rechargeTime"
sortable
label="充值时间"
width="200px"
>
<template #default="scope">
{{
moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss')
}}
</template>
</el-table-column>
<!-- <el-table-column
prop="createTime"
sortable="custom"
label="提交时间"
width="200px"
/>
<el-table-column
fixed="right"
prop="operation"
label="操作"
width="150px"
>
<template #default="scope">
<el-popconfirm
title="确定将此条活动删除吗？"
@confirm="delConfirm"
>
<template #reference>
<el-button type="primary" text @click="del(scope.row)">
删除
</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button type="primary" size="small" @click="confirm">
确定
</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column> -->
</el-table>
</div>
<!-- 分页 -->
<div class="pagination" style="margin-top: 20px">
<el-pagination
background
:page-size="getObj.pageSize"
:page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</el-card>
</el-col>
</el-row>
<!-- 编辑弹窗 -->
<el-dialog
v-model="editRechargeVisible"
title="新增活动"
width="500"
:before-close="closeEditRechargeVisible"
>
<template #footer>
<el-form :model="editObj" label-width="auto" style="max-width: 600px">
<el-form-item label="活动名称:">
<el-input
v-model="addObj.activityName"
placeholder="请输入活动名称"
style="width: 220px"
/>
</el-form-item>
<el-form-item label="免费金币:">
<el-radio-group v-model="addObj.freeGold">
<el-radio value="0">无赠送</el-radio>
<el-radio value="1">有赠送</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="免费金币兑换比:">
<el-input
v-model="addObj.rechargeRatio"
placeholder="请输入"
style="width: 80px"
/>：1
<div style="color: grey">(提示：当前规则每10新币可兑换1免费金币)</div>
</el-form-item>
<el-form-item label="开始时间:">
<el-time-picker v-model="addObj.startTime" />
</el-form-item>
<el-form-item label="结束时间:">
<el-time-picker v-model="addObj.endTime" />
</el-form-item>
<el-form-item label="添加人:">
<el-input v-model="addObj.adminName" disabled style="width: 220px" />
</el-form-item>
</el-form>
<div class="dialog-footer">
<el-button @click="closeAddActivityVisible">取消</el-button>
<el-button type="primary" @click="closeAddActivityVisible">
提交
</el-button>
</div>
</template>
</el-dialog>
</div>
</div>
</template>
<style scoped>

795
src/views/refund/coinRefund.vue
View File

@ -1,7 +1,8 @@
<script setup>
import { onMounted, reactive } from 'vue'
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { AiFillRead } from 'vue-icons-plus/ai'
import { ElMessage,ElRadioGroup, ElRadio, } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
@ -9,20 +10,22 @@ import API from '@/util/http'
import moment from 'moment'
// import _ from 'lodash'
//新增退款相关逻辑---------------------------------------------------------------------------
const addRe = ref({
typeR: '0'
})
//这是获取用户信息的接口
//这是获取用户信息的接口，金币退款明细也会用到
const adminData = ref({})
const getAdminData = async function () {
try {
const result = await API({ url: '/admin/userinfo', data: {} })
adminData.value = result
addRefund.value.adminId = adminData.value.adminId
console.log('请求成功', result)
console.log('用户信息', user.value)
console.log('用户信息请求成功', user.value)
console.log('adminData信息', adminData.value)
} catch (error) {
console.log('请求失败', error)
console.log('用户信息请求失败', error)
}
}
// 精网号去空格
@ -61,7 +64,7 @@ const add = async function () {
ElMessage.error(result.msg)
return
}
console.log('请求成功', result)
console.log('add请求成功', result)
ElMessage.success('添加成功')
// 重置表单
addRefund.value = {}
@ -76,7 +79,7 @@ const add = async function () {
addRefund.value.typeR = 0
user.value = {}
} catch (error) {
console.log('请求失败', error)
console.log('添加退款请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
@ -190,9 +193,8 @@ const getUser = async function (jwcode) {
//ElMessage.success(result.msg)
}
} catch (error) {
console.log('请求失败', error)
console.log('用户信息请求失败', error)
ElMessage.error('查询失败，请检查精网号是否正确')
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
const calculatedAllGold = computed(() => {
@ -222,7 +224,7 @@ const refundType = [
]
// 根据精网号查询商品
// 查什么？？？？？
// 查询对应精网号购买过的商品
const goods = ref([])
const getGoods = async function (jwcode) {
trimJwCode();
@ -235,7 +237,7 @@ const getGoods = async function (jwcode) {
area: adminData.value.area
}
})
console.log('请求成功', result)
console.log('goods请求成功', result)
if (result.code === 0) {
ElMessage.error(result.msg)
@ -246,8 +248,8 @@ const getGoods = async function (jwcode) {
ElMessage.success(result.msg)
}
} catch (error) {
console.log('请求失败', error)
ElMessage.error('查询失败，请检查精网号是否正确')
console.log('商品goods请求失败', error)
ElMessage.error('商品查询失败')
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
@ -287,14 +289,14 @@ const getProductByOrderCode = async function (item) {
result.data.freeCoin * -1 +
result.data.rechargeCoin * -1) /
100
console.log('请求成功', addRefund.value)
console.log('addRefund请求成功', addRefund.value)
if (result.data.code === 0) {
ElMessage.error(result.data.msg)
} else {
ElMessage.success('选择成功')
}
} catch (error) {
console.log('请求失败', error)
console.log('精网号查询请求失败', error)
ElMessage.error('查询失败，请检查精网号是否正确')
// 在这里可以处理错误逻辑，比如显示错误提示等
}
@ -304,14 +306,456 @@ const handleSelectionChange = (value) => {
console.log('选择的订单号', value)
const selectedItem = goods.value.find((item) => item.detailId === value)
}
// 金币退款明细相关逻辑----------------------------------------------------------------------
//充值明细表格
const tableData = ref([])
//搜索==================================
//搜索detail
const detail = ref([])
// 搜索对象
const getObj = ref({
pageNum: 1,
pageSize: 50
})
//分页总条目
const total = ref(100)
// 搜索对象时间
const getTime = ref([])
// 所有信息
const allData = ref([])
// 搜索地区列表
const area = ref([])
//标签页默认高亮选项
const activeName = ref('all')
//退款类型
const consumeType = [
{
value:"退款商品",
label:"退款商品"
}
]
// 方法
// 统计合计数
const trueGold = ref(0)
const truePgold = ref(0)
const trueFgold = ref(0)
const trueTgold = ref(0)
// 待审核各种类金币数
const pendingPgold = ref(0)
const pendingFgold = ref(0)
const pendingTgold = ref(0)
// 待审核金币数
const pendingGold = ref(0)
// 已通过各种类金币数
const approvedPgold = ref(0)
const approvedFgold = ref(0)
const approvedTgold = ref(0)
// 已通过金币数
const approvedGold = ref(0)
// 已驳回各种类金币数
const rejectedPgold = ref(0)
const rejectedFgold = ref(0)
const rejectedTgold = ref(0)
// 已驳回金币数
const rejectedGold = ref(0)
// 搜索==============================================================
// 搜索方法
const get = async function (val) {
try {
// 地区赋值
if (adminData.value.area === '泰国') {
detail.value.areas = ['泰国', '越南']
} else if (adminData.value.area !== '总部') {
detail.value.area = adminData.value.area
}
// 搜索参数页码赋值
if (typeof val === 'number') {
getObj.value.pageNum = val
}
// 搜索参数时间赋值
if (getTime.value != null) {
if (getTime.value.startDate != '' && getTime.value.endDate != '') {
detail.value.startDate = getTime.value[0]
detail.value.endDate = getTime.value[1]
}
} else {
detail.value.startDate = ''
detail.value.endDate = ''
}
// 添加排序字段和排序方式到请求参数
detail.value.sortField = sortField.value
detail.value.sortOrder = sortOrder.value
console.log('搜索参数', getObj.value)
// 发送POST请求
const result = await API({
url: '/refund/search',
data: {
...getObj.value,
detail: { ...detail.value }
}
})
// 复制一份 detail.value 并移除排序字段和排序方式，这是不同审核状态时使用的参数
const detailWithoutSort = { ...detail.value }
delete detailWithoutSort.sortField
delete detailWithoutSort.sortOrder
const result2 = await API({
url: '/refund/RefundA',
data: {
...detailWithoutSort
}
})
// 统计合计数
if (result2.data) {
result2.data.forEach((item) => {
switch (item.status) {
case '待审核':
// 若 item.raudit 为空则赋值为 0
pendingPgold.value = item.sumRaudit1 || 0
pendingFgold.value = item.sumRaudit2 || 0
pendingTgold.value = item.sumRaudit3 || 0
// 若 item.sumRaudit 为空则赋值为 0
pendingGold.value = item.sumRaudit || 0
break
case '已通过':
approvedPgold.value = item.sumRaudit1 || 0
approvedFgold.value = item.sumRaudit2 || 0
approvedTgold.value = item.sumRaudit3 || 0
approvedGold.value = item.sumRaudit || 0
break
case '已驳回':
rejectedPgold.value = item.sumRaudit1 || 0
rejectedFgold.value = item.sumRaudit2 || 0
rejectedTgold.value = item.sumRaudit3 || 0
rejectedGold.value = item.sumRaudit || 0
break
}
})
}
trueFgold.value =
pendingFgold.value + approvedFgold.value + rejectedFgold.value
truePgold.value =
pendingPgold.value + approvedPgold.value + rejectedPgold.value
trueTgold.value =
pendingTgold.value + approvedTgold.value + rejectedTgold.value
trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
// 将响应结果存储到响应式数据中
//console.log('请求成功', result)
// 存储表格数据
tableData.value = result.data.list
console.log('tableData请求成功', tableData.value)
// 存储分页总数
total.value = result.data.total
console.log('total', total.value)
// 调用分类的方法
handleClick()
} catch (error) {
console.log('表格数据请求失败', error)
}
}
//搜索
//每次搜索都执行对应搜索操作，并将页码重置为1
const search = function () {
getObj.value.pageNum = 1
get()
}
//重置
const reset = function () {
detail.value.jwcode = ''
detail.value.refundGoods = ''
detail.value.refundType = ''
detail.value.area = ''
detail.value.startDate = ''
detail.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.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.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('近7天', getTime.value)
get()
}
//全部充值明细
const adminAll = function () {
console.log('全部充值明细')
detail.value.status = ''
getObj.value.pageNum = 1
get()
//计算免费金币、永久金币、任务金币所有审核状态分别的总数以及总金币数
trueFgold.value =
pendingFgold.value + approvedFgold.value + rejectedFgold.value
truePgold.value =
pendingPgold.value + approvedPgold.value + rejectedPgold.value
trueTgold.value =
pendingTgold.value + approvedTgold.value + rejectedTgold.value
trueGold.value =
pendingGold.value + approvedGold.value + rejectedGold.value
}
//三个审核状态采用的async和await方法，因为需要等待异步请求结果，才能计算总金币数；
// 而上边的adminAll方法不需要等待异步请求结果，所以采用同步方法。
//待审核充值明细
const adminWait = async function () {
detail.value.status = 0
getObj.value.pageNum = 1
await get()
console.log('待审核充值明细')
trueFgold.value = pendingFgold.value
truePgold.value = pendingPgold.value
trueTgold.value = pendingTgold.value
trueGold.value = pendingGold.value
}
//已通过充值明细
const adminPass = async function () {
detail.value.status = 1
getObj.value.pageNum = 1
await get()
console.log('已通过充值明细')
trueFgold.value = approvedFgold.value
truePgold.value = approvedPgold.value
trueTgold.value = approvedTgold.value
trueGold.value = approvedGold.value
}
//已驳回充值明细
const adminReject = async function () {
detail.value.status = 2
getObj.value.pageNum = 1
await get()
console.log('已驳回充值明细')
trueFgold.value = rejectedFgold.value
truePgold.value = rejectedPgold.value
trueTgold.value = rejectedTgold.value
trueGold.value = rejectedGold.value
}
//点击标签页
// 设置tab.props.name默认为all
const tabName = ref('all')
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()
}
}
//获取地区
const getArea = async function () {
try {
const result = await API({url:'/recharge/user/search',data:{}})
//console.log('地区请求成功', result)
area.value = result.data
console.log('地区请求成功', area.value)
}catch (error) {
console.log('地区请求失败', error)
ElMessage.error('获取地区失败')
}
}
//删除气泡的id标识
const delObj = ref({})
const del = function (row) {
delObj.value.detailId = row.detailId
console.log('delObj', delObj.value)
}
//删除按钮的气泡弹框
const delConfirm = async function () {
try {
console.log('delObj', delObj.value)
// 发送请求POST
const result = await API({
url: '/refund/softDelete?detailId=' + delObj.value.detailId,
data: {}
})
//将响应结果存储到响应式数据中
console.log('气泡弹窗请求成功', result)
get()
}catch(error){
console.log('删除的气泡弹窗请求失败', error)
ElMessage.error('删除失败')
}
}
// 查询商品的接口
const allGoods = ref([])
const getAllGoods = async function () {
try {
// 发送POST请求
const result = await API({ url: '/product', data: {} })
// 将响应结果存储到响应式数据中
console.log('allGoods请求成功', result)
// 存储全部数据
goods.value = result.data
} catch (error) {
console.log('商品请求失败', error)
ElMessage.error('商品查询失败')
}
}
getAllGoods()
// 验证跳转输入框的数字是否合法，此处待检查是否用上
const checPagekNumber = 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 sortField = ref('')
const sortOrder = ref('')
//处理排序事件
const handleSortChange = (column) => {
console.log('column',column.prop)
console.log('column',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' ? 'asc' : 'desc'
get()
}
const handlePageSizeChange = function (val){
getObj.value.pageSize = val
get()
}
const handleCurrentChange = function (val){
getObj.value.pageNum = val
get()
}
//导出Excel，注意这里是虚拟接口，后端写完后替换正确的地址
const exportExcel = function () {
window.open('/refund/exportExcel?detail=' + JSON.stringify(detail.value))
}
//切换新增退款和明细逻辑标签---------------------------------------------------------------
// 用于控制显示内容的变量
const activeTab = ref('addRefund')
// 切换标签页的方法
const changeTab = async (tabName) => {
activeTab.value = tabName
//切换至detail标签页时，再请求get方法，就不用挂载了，可减轻浏览器压力加快页面加载速度
if (activeTab.value === 'detail') {
await get()
}
}
// 挂载
onMounted(async function () {
await getAdminData()
await getArea()
//await get()
})
</script>
<template>
<div style="font-weight: bold">新增退款</div>
<div>
<el-button-group>
<!-- 切换后状态显示样式否则是默认样式 -->
<el-button
:type="activeTab === 'addRefund' ? 'primary' : 'default'"
@click="changeTab('addRefund')"
>
新增退款
</el-button>
<el-button
:type="activeTab === 'detail' ? 'primary' : 'default'"
@click="changeTab('detail')"
>
金币退款明细
</el-button>
</el-button-group>
<!-- 根据activeTab切换显示内容 -->
<!-- 新增退款的布局---------------------------------------------------------- -->
<div v-if="activeTab === 'addRefund'">
<!-- <div style="font-weight: bold">新增退款</div> -->
<el-form
:model="addRefund"
@ -488,11 +932,7 @@ onMounted(async function () {
<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>
@ -503,19 +943,318 @@ onMounted(async function () {
<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'">
<el-row>
<el-col>
<el-card style="margin-bottom: 20px;margin-top:10px">
<el-row style="margin-bottom: 10px">
<el-col :span="5">
<div class="head-card-element">
<el-text class="mx-1" size="large">精网号：</el-text>
<el-input
v-model="detail.jwcode"
placeholder="请输入精网号"
size="large"
style="width: 150px"
clearable
/>
</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="detail.refundType"
placeholder="请选择退款类型"
size="large"
style="width: 180px"
clearable
>
<el-option
v-for="item in consumeType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</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="detail.refundGoods"
placeholder="请选择退款商品"
size="large"
style="width: 180px"
clearable
>
<el-option
v-for="item in goods"
:key="item.value"
:label="item.name"
:value="item.name"
/>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="head-card-element" v-if="adminData.area == '总部'">
<el-text class="mx-1" size="large">所属地区：</el-text>
<el-select
v-model="detail.area"
placeholder="请选择所属地区"
size="large"
style="width: 180px"
clearable
>
<el-option
v-for="item in area"
:key="item"
:label="item"
:value="item"
/>
</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>
<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>
<!-- <el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="全部" name="all"></el-tab-pane>
<el-tab-pane label="待审核" name="wait"></el-tab-pane>
<el-tab-pane label="已通过" name="pass"></el-tab-pane>
<el-tab-pane label="已驳回" name="reject"></el-tab-pane>
</el-tabs> -->
<div>
退款金币总数：{{ Math.abs(trueGold) }}，永久金币：{{
Math.abs(truePgold)
}}，免费金币：{{ Math.abs(trueFgold) }}，任务金币：{{
Math.abs(trueTgold)
}}
</div>
<!-- 设置表格容器的高度和滚动样式 -->
<div style="height: 520px; overflow-y: auto;margin-top:10px">
<el-table
:data="tableData"
style="width: 100%"
@sort-change="handleSortChange"
height="520px"
>
<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="姓名"
fixed="left"
width="100px"
/>
<el-table-column
prop="jwcode"
label="精网号"
fixed="left"
width="110px"
/>
<el-table-column prop="area" label="所属地区" width="110px" />
<el-table-column prop="refundGoods" label="商品名称" width="100px" />
<el-table-column prop="refundType" label="退款类型" width="100px" />
<el-table-column label="退款金币总数" width="110px">
<template #default="scope">
{{
scope.row.rechargeCoin +
scope.row.freeCoin +
scope.row.taskCoin
}}
</template>
</el-table-column>
<el-table-column prop="typeR" label="退款方式" width="110px"/>
<el-table-column
prop="rechargeCoin"
label="永久金币"
width="110px"
sortable="“custom”"
/>
<el-table-column
prop="freeCoin"
sortable="“custom”"
label="免费金币"
width="110px"
/>
<el-table-column
prop="taskCoin"
sortable="“custom”"
label="任务金币"
width="110px"
/>
<!-- 修改prop为taskGold -->
<el-table-column
prop="remark"
label="退款原因"
width="160px"
show-overflow-tooltip
/>
<el-table-column prop="adminName" label="提交人" width="100px" />
<!-- <el-table-column prop="status" label="审核状态" width="120px">
<template #default="scope">
<span v-if="scope.row.status == 1">
<div class="status">
<span class="green-dot"></span>
<span>已通过</span>
</div>
</span>
<span v-if="scope.row.status == 0">
<div class="status">
<span class="grey-dot"></span>
<span>待审核</span>
</div>
</span>
<span v-if="scope.row.status == 2">
<div class="status">
<span class="red-dot"></span>
<span>已驳回</span>
</div>
</span>
</template>
</el-table-column>
<el-table-column
prop="reson"
label="驳回理由"
width="200px"
show-overflow-tooltip
/> -->
<el-table-column
prop="createTime"
sortable="“custom”"
label="提交时间"
width="180px"
>
<template #default="scope">
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<!-- <el-table-column
prop="operation"
label="操作"
fixed="right"
width="120px"
>
<template #default="scope">
<el-popconfirm
title="确定将此条活动删除吗？"
@confirm="delConfirm"
>
<template #reference>
<el-button type="primary" text @click="del(scope.row)">
删除
</el-button>
</template>
<template #actions="{ delConfirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button type="primary" size="small" @click="delConfirm">
确定
</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column> -->
</el-table>
</div>
<!-- 分页 -->
<div class="pagination" style="margin-top: 20px">
<el-pagination
background
:page-size="getObj.pageSize"
:page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"
@jump="checkPageNumber"
></el-pagination>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<style scoped>
.status {
display: flex;
}
.head-card {
display: flex;
}
.head-card-element {
margin-right: 10px;
}
.head-card-btn {
margin-left: auto;
}
.pagination {
display: flex;
margin-top: 20px;
}
p {
margin: 0px;
}

60
src/views/usergold/clientCount.vue
View File

@ -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>

3
src/views/usergold/clientCountBalance.vue
View File

@ -0,0 +1,3 @@
<template>
<p>1111</p>
</template>

88
src/views/usergold/index.vue → src/views/usergold/clientCountDetail.vue
View File

@ -202,12 +202,14 @@ const checkNumber = function () {
}
}
// 挂载
onMounted(async function () {
await getArea()
await getAdminData()
await get()
})
// 计算金币数量的方法
const calculateGoldAmount = (row) => {
const totalGold = (row.rechargeCoin + row.freeCoin + row.taskCoin) / 100;
if (row.updateType === 1) { // 消费
return -totalGold;
}
return totalGold;
}
// 导出Excel的方法
const headers = [
@ -216,8 +218,9 @@ const headers = [
'精网号',
'所属地区',
'平台信息',
'更新数量',
//'更新数量',
'更新类型',
'金币数量',
'永久金币',
'免费金币',
'任务金币',
@ -474,9 +477,48 @@ const handleCurrentChange = function (val) {
getObj.value.pageNum = val
get()
}
// 用于控制显示内容的变量
const activeTab = ref('detailY')
// 切换标签页的方法
const changeTab = (tabName) => {
activeTab.value = tabName
}
// 挂载
onMounted(async function () {
await getArea()
await getAdminData()
await get()
})
</script>
<template>
<div>
<!-- <el-button-group>
<el-button
:type="activeTab === 'detailY' ? 'primary' : 'default'"
@click="changeTab('detailY')"
>
金币明细
</el-button>
<el-button
:type="activeTab === 'goldInfo' ? 'primary' : 'default'"
@click="changeTab('goldInfo')"
>
金币余额
</el-button>
</el-button-group> -->
<!-- 根据activeTab切换显示内容 -->
<!-- 客户金币明细的布局---------------------------------------------------------- -->
<!-- <div v-if="activeTab === 'detailY'"> -->
<!-- 导出excel提前展示的信息面板 -->
<el-dialog
v-model="showExportInfoPanel"
@ -540,14 +582,14 @@ const handleCurrentChange = function (val) {
<el-row>
<el-col>
<el-card style="margin-bottom: 20px">
<el-card style="margin-bottom: 20px;margin-top: 10px;">
<el-row style="margin-bottom: 10px">
<el-col :span="6">
<el-col :span="5">
<div class="head-card-element">
<el-text class="mx-1" size="large">精网号：</el-text>
<el-input
v-model="detailY.jwcode"
style="width: 240px"
style="width: 150px"
placeholder="请输入精网号"
clearable
/>
@ -559,7 +601,7 @@ const handleCurrentChange = function (val) {
<el-select
v-model="detailY.consumePlatform"
placeholder="请选择平台信息"
style="width: 200px"
style="width: 180px"
clearable
>
<el-option
@ -577,7 +619,7 @@ const handleCurrentChange = function (val) {
<el-select
v-model="detailY.num"
placeholder="请选择更新类型"
style="width: 200px"
style="width: 180px"
clearable
>
<el-option
@ -595,7 +637,7 @@ const handleCurrentChange = function (val) {
<el-select
v-model="detailY.area"
placeholder="请选择所属地区"
style="width: 240px"
style="width: 180px"
clearable
:loading="isLoadingArea"
>
@ -623,9 +665,10 @@ const handleCurrentChange = function (val) {
<el-button @click="getToday()">今</el-button>
<el-button @click="getYesterday()">昨</el-button>
<el-button @click="get7Days()">近7天</el-button>
<el-button type="success" @click="exportExcel">导出Excel表格</el-button>
<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-card>
</el-col>
@ -679,7 +722,7 @@ const handleCurrentChange = function (val) {
<span v-if="scope.row.consumePlatform == 4">金币系统</span>
</template>
</el-table-column>
<el-table-column
<!-- <el-table-column
prop="gold"
label="更新数量"
width="120"
@ -688,7 +731,7 @@ const handleCurrentChange = function (val) {
<template #default="scope">
<span>{{ scope.row.gold / 100 }}</span>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column prop="updateType" label="更新类型" width="110">
<!-- 模板内容 -->
<template #default="scope">
@ -698,6 +741,13 @@ const handleCurrentChange = function (val) {
<span v-if="scope.row.updateType == 3">其他</span>
</template>
</el-table-column>
<el-table-column label="金币数量" width="120">
<template #default="scope">
<span>{{ calculateGoldAmount(scope.row) }}</span>
</template>
</el-table-column>
<el-table-column
prop="rechargeCoin"
sortable="custom"
@ -760,6 +810,12 @@ const handleCurrentChange = function (val) {
</el-card>
</el-col>
</el-row>
<!-- </div> -->
<!-- 客户金币余额的布局---------------------------------------------------------- -->
<!-- <div v-else-if="activeTab === 'goldInfo'"> -->
<!-- </div> -->
</div>
</template>
<style scoped>
Write Preview
Loading…
Cancel
Save