Browse Source
再试一下
再试一下
lihuilin
1 week ago
12 changed files with 2242 additions and 3983 deletions
-
18src/router/index.js
-
316src/views/audit/rechargeAudit.vue
-
1151src/views/audit/refundAudit.vue
-
639src/views/consume/coinConsume.vue
-
9src/views/index.vue
-
79src/views/login.vue
-
232src/views/managerecharge/rate.vue
-
702src/views/recharge/coinRecharge.vue
-
2src/views/refund/beanRefund.vue
-
797src/views/refund/coinRefund.vue
-
798src/views/usergold/index.vue
-
1482src/views/workspace/index.vue
1151
src/views/audit/refundAudit.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,61 +1,602 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 这里放置标签切换的按钮 --> |
|||
<el-button-group> |
|||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|||
<el-button |
|||
:type="activeTab === 'add' ? 'primary' : 'default'" |
|||
@click="goToAdd" |
|||
> |
|||
新增消耗 |
|||
</el-button> |
|||
<el-button |
|||
:type="activeTab === 'detail' ? 'primary' : 'default'" |
|||
@click="goToDetail" |
|||
> |
|||
金币消耗明细 |
|||
</el-button> |
|||
</el-button-group> |
|||
<!-- 渲染子路由组件 --> |
|||
<router-view></router-view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, watch } from 'vue'; |
|||
import { useRouter, useRoute } from 'vue-router'; |
|||
import { reactive, onMounted } from "vue"; |
|||
import { ref, computed, watch } from "vue"; |
|||
import { ElMessage, ElMessageBox } from "element-plus"; |
|||
import { Plus } from "@element-plus/icons-vue"; |
|||
import axios from "axios"; |
|||
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 router = useRouter();// 获取路由实例 |
|||
const route = useRoute();// 获取当前路由信息 |
|||
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
|||
const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add'); |
|||
//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面 |
|||
//此时获取到的路由信息是coinConsume，所以默认是add |
|||
// 这是添加消费信息的表单 |
|||
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 goToAdd = () => { |
|||
// 点击按钮时更新 activeTab 为 add |
|||
activeTab.value = 'add'; |
|||
router.push({ name: 'addCoinConsume' }); |
|||
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); |
|||
|
|||
const goToDetail = () => { |
|||
// 点击按钮时更新 activeTab 为 detail |
|||
activeTab.value = 'detail'; |
|||
router.push({ name: 'coinConsumeDetail' }); |
|||
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("查询失败，请检查精网号是否正确"); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 监听路由变化，更新 activeTab |
|||
watch(() => route.name, (newName) => { |
|||
if (newName === 'addCoinConsume') { |
|||
activeTab.value = 'add'; |
|||
} else if (newName === 'coinConsumeDetail') { |
|||
activeTab.value = 'detail'; |
|||
|
|||
//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。 |
|||
//这是查询用户金币信息的接口 |
|||
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 = ""; |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 当进入父路由时，默认跳转到新增消耗页面 |
|||
if (route.name === 'coinConsume') { |
|||
router.push({ name: 'addCoinConsume' }); |
|||
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)" /> |
|||
<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> |
|||
<!-- 指标选择 --> |
|||
<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 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> |
|||
|
|||
<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> |
|||
@ -0,0 +1,798 @@ |
|||
<!-- 这是客户金币明细页面 --> |
|||
<script setup> |
|||
import { ref, onMounted, computed ,nextTick} from 'vue' |
|||
|
|||
import { ElMessage } from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import { writeFile, utils } from 'xlsx' |
|||
|
|||
// 变量 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ |
|||
url: '/admin/userinfo', |
|||
method: 'post', |
|||
data: {} |
|||
}) |
|||
adminData.value = result |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// 定义加载状态 |
|||
const isLoadingArea = ref(false); |
|||
const area = ref([]) |
|||
const getArea = async () => { |
|||
isLoadingArea.value = true; |
|||
try { |
|||
const result = await API({ |
|||
url: '/detailY/getarea' |
|||
}); |
|||
// 假设后端返回的是字符串数组，转换为 { value, label } 格式 |
|||
if (Array.isArray(result.data) && typeof result.data[0] === 'string') { |
|||
area.value = result.data.map(item => ({ value: item, label: item })); |
|||
} else { |
|||
area.value = result.data; |
|||
} |
|||
} catch (error) { |
|||
console.error('获取地区数据失败:', error); |
|||
ElMessage.error('获取地区数据失败，请稍后重试'); |
|||
// 可以提供默认数据 |
|||
area.value = []; |
|||
} finally { |
|||
isLoadingArea.value = false; |
|||
} |
|||
}; |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 各金币总数 |
|||
const rechargeCoin = ref(0) |
|||
const freeCoin = ref(0) |
|||
const taskCoin = ref(0) |
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索detailY |
|||
const detailY = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
// 开启条件筛选导出excel |
|||
const getPutEX = ref(false) |
|||
|
|||
// 支付方式选项 |
|||
const num = [ |
|||
{ |
|||
value: '1', |
|||
label: '增加' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '减少' |
|||
} |
|||
] |
|||
|
|||
|
|||
// 方法 |
|||
// 搜索=========================================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 地区赋值 |
|||
if (adminData.value.area === '泰国') { |
|||
detailY.value.areas = ['泰国', '越南'] |
|||
} else if (adminData.value.area !== '总部') { |
|||
detailY.value.area = adminData.value.area |
|||
} |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
if (getTime.value.length === 2) { |
|||
detailY.value.startDate = getTime.value[0] |
|||
detailY.value.endDate = getTime.value[1] |
|||
} else { |
|||
detailY.value.startDate = '' |
|||
detailY.value.endDate = '' |
|||
} |
|||
// 添加排序字段和排序方式到请求参数 |
|||
detailY.value.sortField = sortField.value |
|||
detailY.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/detailY', |
|||
method: 'post', |
|||
data: { ...getObj.value, detailY: { ...detailY.value } } |
|||
}) |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 精网号去空格，处理 detailY 中的 jwcode |
|||
const trimJwCode = () => { |
|||
if (detailY.value.jwcode) { |
|||
detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, ''); |
|||
} |
|||
} |
|||
|
|||
// 搜索 |
|||
const search = function () { |
|||
trimJwCode(); |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
|
|||
// 重置 |
|||
const reset = function () { |
|||
delete detailY.value.jwcode |
|||
delete detailY.value.num |
|||
delete detailY.value.startDate |
|||
delete detailY.value.endDate |
|||
delete detailY.value.area |
|||
delete sortField.value |
|||
delete sortOrder.value |
|||
getTime.value = [] |
|||
delete detailY.value.consumePlatform |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = moment() |
|||
const startDate = today.startOf('day').toDate() |
|||
const endDate = today.add(1, 'days').startOf('day').toDate() |
|||
getTime.value = [startDate, endDate] |
|||
search() |
|||
} |
|||
|
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const today = moment() |
|||
const yesterday = moment().subtract(1, 'day') |
|||
const startDate = yesterday.startOf('day').toDate() |
|||
const endDate = today.startOf('day').toDate() |
|||
getTime.value = [startDate, endDate] |
|||
search() |
|||
} |
|||
|
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const startDate = moment().subtract(6, 'day').startOf('day').toDate() |
|||
const endDate = moment().add(1,'days').startOf('day').toDate() |
|||
getTime.value = [startDate, endDate] |
|||
search() |
|||
} |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
const checkNumber = function () { |
|||
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
|||
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)) |
|||
if ( |
|||
getObj.value.pageNum > 0 && |
|||
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize) |
|||
) { |
|||
getObj.value.pageNum = parseInt(getObj.value.pageNum) |
|||
console.log('输入的数字合法') |
|||
get() |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getArea() |
|||
await getAdminData() |
|||
await get() |
|||
}) |
|||
|
|||
// 导出Excel的方法 |
|||
const headers = [ |
|||
'序号', |
|||
'姓名', |
|||
'精网号', |
|||
'所属地区', |
|||
'平台信息', |
|||
'更新数量', |
|||
'更新类型', |
|||
'永久金币', |
|||
'免费金币', |
|||
'任务金币', |
|||
'提交人', |
|||
'更新时间' |
|||
] |
|||
|
|||
const showExportInfoPanel = ref(false) |
|||
|
|||
// 点击导出按钮直接显示信息面板 |
|||
const exportExcel = async () => { |
|||
try { |
|||
console.log('点击导出按钮，尝试显示信息面板'); |
|||
showExportInfoPanel.value = true; |
|||
await nextTick();//组件更新显示信息面板 |
|||
} catch (error) { |
|||
console.error('显示信息面板失败:', error); |
|||
ElMessage.error('显示信息面板失败，请稍后重试'); |
|||
} |
|||
}; |
|||
|
|||
// 新增导出状态相关变量 |
|||
const exportProgress = ref(0) |
|||
const isExporting = ref(false) |
|||
const exportCancelToken = ref(null) |
|||
|
|||
// 优化后的导出方法 |
|||
const doExportExcel = async () => { |
|||
try { |
|||
isExporting.value = true |
|||
exportProgress.value = 0 |
|||
showExportInfoPanel.value = false |
|||
|
|||
// 初始化Excel |
|||
const wb = utils.book_new() |
|||
const ws = utils.aoa_to_sheet([headers]) |
|||
utils.book_append_sheet(wb, ws, 'Sheet1') |
|||
|
|||
// 流式写入配置 |
|||
const writer = { |
|||
write: (d, o) => { |
|||
if (!d) return |
|||
utils.sheet_add_aoa(ws, d, { origin: -1 }) |
|||
} |
|||
} |
|||
|
|||
let page = 1 |
|||
let totalExported = 0 |
|||
const pageSize = 5000 // 每次请求5000条 |
|||
let totalRecords = 0 |
|||
|
|||
// 首次请求获取总记录数 |
|||
const firstResult = await API({ |
|||
url: '/detailY', |
|||
method: 'post', |
|||
data: { |
|||
pageNum: 1, |
|||
pageSize, |
|||
detailY: { ...detailY.value } |
|||
} |
|||
}) |
|||
totalRecords = firstResult.data.total |
|||
|
|||
// 创建取消令牌 |
|||
const CancelToken = axios.CancelToken |
|||
exportCancelToken.value = CancelToken.source() |
|||
|
|||
// 平台信息映射 |
|||
const platformMap = { |
|||
0: '初始化金币', |
|||
1: 'ERP系统', |
|||
2: 'Homily Chart', |
|||
3: 'Homily Link', |
|||
4: '金币系统' |
|||
}; |
|||
// 更新类型映射 |
|||
const updateTypeMap = { |
|||
0: '充值', |
|||
1: '消费', |
|||
2: '退款', |
|||
3: '其他' |
|||
}; |
|||
|
|||
// 处理首次请求的数据 |
|||
const firstData = firstResult.data.list |
|||
if (firstData.length) { |
|||
const rows = firstData.map((row, index) => { |
|||
const consumePlatform = parseInt(row.consumePlatform, 10); // 转换为数字类型 |
|||
const platformInfo = platformMap[consumePlatform] || ''; |
|||
return [ |
|||
totalExported + index + 1, |
|||
row.username || '', |
|||
row.jwcode || '', |
|||
row.area || '', |
|||
platformInfo, |
|||
(row.gold / 100).toFixed(2) || '0.00', |
|||
updateTypeMap[row.updateType] || '', |
|||
(row.rechargeCoin / 100).toFixed(2) || '0.00', |
|||
(row.freeCoin / 100).toFixed(2) || '0.00', |
|||
(row.taskCoin / 100).toFixed(2) || '0.00', |
|||
row.name || '', |
|||
moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || '' |
|||
] |
|||
}) |
|||
writer.write(rows) |
|||
totalExported += firstData.length |
|||
exportProgress.value = Math.round((totalExported / totalRecords) * 100) |
|||
page++ |
|||
} |
|||
|
|||
while (totalExported < totalRecords) { |
|||
const result = await API({ |
|||
url: '/detailY', |
|||
method: 'post', |
|||
data: { |
|||
pageNum: page, |
|||
pageSize, |
|||
detailY: { ...detailY.value } |
|||
}, |
|||
cancelToken: exportCancelToken.value.token |
|||
}) |
|||
|
|||
const data = result.data.list |
|||
if (!data.length) break |
|||
|
|||
// 转换数据 |
|||
const rows = data.map((row, index) => [ |
|||
totalExported + index + 1, |
|||
row.username || '', |
|||
row.jwcode || '', |
|||
row.area || '', |
|||
platformMap[row.consumePlatform] || '', |
|||
(row.gold / 100).toFixed(2) || '0.00', |
|||
updateTypeMap[row.updateType] || '', |
|||
(row.rechargeCoin / 100).toFixed(2) || '0.00', |
|||
(row.freeCoin / 100).toFixed(2) || '0.00', |
|||
(row.taskCoin / 100).toFixed(2) || '0.00', |
|||
row.name || '', |
|||
moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || '' |
|||
]) |
|||
|
|||
// 流式写入 |
|||
writer.write(rows) |
|||
totalExported += data.length |
|||
exportProgress.value = Math.round((totalExported / totalRecords) * 100) |
|||
|
|||
// 内存控制：每500页释放内存 |
|||
if (page % 500 === 0) { |
|||
await new Promise(resolve => setTimeout(resolve, 0)) |
|||
} |
|||
|
|||
page++ |
|||
} |
|||
|
|||
// 生成最终文件 |
|||
writeFile(wb, '客户金币明细.xlsx') |
|||
ElMessage.success(`导出成功，共${totalExported}条数据`) |
|||
} catch (error) { |
|||
if (!axios.isCancel(error)) { |
|||
ElMessage.error(`导出失败: ${error.message}`) |
|||
} |
|||
} finally { |
|||
isExporting.value = false |
|||
exportCancelToken.value = null |
|||
} |
|||
} |
|||
|
|||
// 新增取消导出方法 |
|||
const cancelExport = () => { |
|||
if (exportCancelToken.value) { |
|||
exportCancelToken.value.cancel('用户取消导出') |
|||
ElMessage.warning('导出已取消') |
|||
isExporting.value = false |
|||
} |
|||
} |
|||
|
|||
const putExcel = ref({ |
|||
startDate: new Date(), |
|||
endDate: new Date(new Date().setDate(new Date().getDate() + 1)) |
|||
}) |
|||
|
|||
// 新增校验精网号的方法 |
|||
const checkJwCode = async (jwcode) => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/recharge/user', |
|||
method: 'post', |
|||
data: { |
|||
jwcode, |
|||
area: adminData.value.area |
|||
} |
|||
}) |
|||
// 根据后端返回的 code 判断精网号是否存在 |
|||
return result.code !== 0 |
|||
} catch (error) { |
|||
console.log('校验精网号失败', error) |
|||
return false |
|||
} |
|||
} |
|||
|
|||
// 选消费平台 |
|||
const platform = [ |
|||
{ |
|||
value: '4', |
|||
label: '金币系统' |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: 'ERP系统' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'Homily Chart' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'Homily Link' |
|||
}, |
|||
{ |
|||
value: '0', |
|||
label: '初始化金币' |
|||
} |
|||
] |
|||
|
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
// 处理排序事件 |
|||
const handleSortChange = (column) => { |
|||
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' |
|||
} else if (column.prop === 'gold') { |
|||
sortField.value = 'gold' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
//get（）要写在handleSortChange方法里面，不然会导致排序失效 |
|||
get() |
|||
} |
|||
|
|||
|
|||
|
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
|
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<!-- 导出excel提前展示的信息面板 --> |
|||
<el-dialog |
|||
v-model="showExportInfoPanel" |
|||
title="导出信息确认" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div class="info-panel-header">导出信息</div> |
|||
<!-- 直接使用 detailY 显示信息，添加可选链操作符 --> |
|||
<!-- detailY是一个ref，所以在模板中应该直接使用detailY.consumePlatform， |
|||
而不是detailY.value.consumePlatform。 |
|||
因为在模板中，ref变量会自动解包，不需要.value。 |
|||
例如，在代码中，我们可能错误地在模板中使用了detailY.value，但实际上应该直接使用detailY。 --> |
|||
<div v-if="!detailY.jwcode && !detailY.consumePlatform && !detailY.num && !detailY.area && (getTime.length < 2)"> |
|||
你正在导出所有数据 |
|||
</div> |
|||
<div v-else> |
|||
你正在导出以下数据 |
|||
</div> |
|||
<div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div> |
|||
<div v-if="detailY.consumePlatform">平台信息：{{ detailY.consumePlatform ? (platform.find(item => item.value === detailY.consumePlatform)?.label) : '' }}</div> |
|||
<div v-if="detailY.num">数量更新类型：{{ detailY.num ? (num.find(item => item.value === detailY.num)?.label || '') : '' }}</div> |
|||
<div v-if="detailY.area">所属地区：{{ detailY.area || '' }}</div> |
|||
<div v-if="Array.isArray(getTime) && getTime.length >= 2"> |
|||
<span>更新时间：</span> |
|||
<!-- 修改时间格式为精确到秒 --> |
|||
<span v-if="Array.isArray(getTime) && getTime.length >= 2"> |
|||
{{ moment(getTime[0]).format('YYYY-MM-DD HH:mm:ss') }} 至 {{ moment(getTime[1]).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</span> |
|||
<span v-else></span> |
|||
</div> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showExportInfoPanel = false">取消</el-button> |
|||
<el-button type="primary" @click="doExportExcel">导出</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<!-- 导出进度弹窗 --> |
|||
<el-dialog |
|||
v-model="isExporting" |
|||
title="正在导出" |
|||
width="400px" |
|||
:close-on-click-modal="false" |
|||
:show-close="false" |
|||
> |
|||
<el-progress |
|||
:percentage="exportProgress" |
|||
:stroke-width="15" |
|||
striped |
|||
animated |
|||
/> |
|||
<div class="export-status"> |
|||
已导出 {{ Math.round((exportProgress / 100) * total) }} 条 / 共 {{ total }} 条 |
|||
</div> |
|||
<template #footer> |
|||
<el-button type="danger" @click="cancelExport">取消导出</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<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-input |
|||
v-model="detailY.jwcode" |
|||
style="width: 240px" |
|||
placeholder="请输入精网号" |
|||
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="detailY.consumePlatform" |
|||
placeholder="请选择平台信息" |
|||
style="width: 200px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in platform" |
|||
: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="detailY.num" |
|||
placeholder="请选择更新类型" |
|||
style="width: 200px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in num" |
|||
: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="detailY.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
:loading="isLoadingArea" |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item.value || item" |
|||
:label="item.label || item" |
|||
:value="item.value || item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<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="结束时间" |
|||
style="margin-right: 50px" |
|||
/> |
|||
<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> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div style="height: 584px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
@sort-change="handleSortChange" |
|||
height="584px" |
|||
> |
|||
<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 |
|||
fixed="left" |
|||
prop="username" |
|||
label="姓名" |
|||
width="150" |
|||
/> |
|||
<el-table-column |
|||
fixed="left" |
|||
prop="jwcode" |
|||
label="精网号" |
|||
width="120" |
|||
/> |
|||
<el-table-column prop="area" label="所属地区" width="120" /> |
|||
<el-table-column |
|||
prop="consumePlatform" |
|||
label="平台信息" |
|||
width="140" |
|||
> |
|||
<template #default="scope"> |
|||
<!-- 使用非严格相等比较 --> |
|||
<span v-if="scope.row.consumePlatform == 0">初始化金币</span> |
|||
<span v-if="scope.row.consumePlatform == 1">ERP系统</span> |
|||
<span v-if="scope.row.consumePlatform == 3">Homily Link</span> |
|||
<span v-if="scope.row.consumePlatform == 2">Homily Chart</span> |
|||
<span v-if="scope.row.consumePlatform == 4">金币系统</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="gold" |
|||
label="更新数量" |
|||
width="120" |
|||
sortable="custom" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.gold / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="updateType" label="更新类型" width="110"> |
|||
<!-- 模板内容 --> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.updateType == 1">消费</span> |
|||
<span v-if="scope.row.updateType == 0">充值</span> |
|||
<span v-if="scope.row.updateType == 2">退款</span> |
|||
<span v-if="scope.row.updateType == 3">其他</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
sortable="custom" |
|||
label="永久金币" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.rechargeCoin / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="freeCoin" |
|||
sortable="custom" |
|||
label="免费金币" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.freeCoin / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="taskCoin" |
|||
sortable="custom" |
|||
label="任务金币" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.taskCoin / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="提交人" width="110" /> |
|||
<el-table-column |
|||
prop="createTime" |
|||
sortable="custom" |
|||
label="更新时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 此处分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
: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> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.info-panel-header { |
|||
font-weight: bold; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.dialog-footer { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.export-status { |
|||
margin-top: 15px; |
|||
text-align: center; |
|||
color: #666; |
|||
} |
|||
|
|||
.el-progress-bar__inner { |
|||
transition: width 0.5s ease; |
|||
} |
|||
|
|||
</style> |
|||
1482
src/views/workspace/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue