lihuilin
18 hours ago
11 changed files with 34 additions and 2456 deletions
-
4.env.development
-
2.env.test
-
586src/views/consume/beanConsume.vue
-
31src/views/home.vue
-
44src/views/index.vue
-
267src/views/login-hxl.vue
-
9src/views/login.vue
-
797src/views/recharge/beanRecharge.vue
-
734src/views/refund/beanRefund.vue
-
6src/views/workspace/index.vue
-
2stats.html
@ -1,5 +1,5 @@ |
|||
VITE_API_BASE='https://hwjb.homilychart.com/admin/' |
|||
# VITE_API_BASE='https://hwjb.homilychart.com/admin/' |
|||
# VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev' |
|||
# VITE_API_BASE='http://54.251.137.151:10704/' |
|||
VITE_API_BASE='http://192.168.8.242:8081/' |
|||
# VITE_API_BASE='http://18.143.76.3:10704/' |
|||
|
|||
@ -1,5 +1,3 @@ |
|||
# VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_prod' |
|||
#VITE_API_BASE='http://54.251.137.151:10704/' |
|||
VITE_API_BASE='https://hwjb.homilychart.com/admin/' |
|||
#VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev' |
|||
# VITE_API_BASE='http://18.143.76.3:10704/' |
|||
@ -1,586 +1,4 @@ |
|||
<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.startTime != '' && getTime.value.endTime != '') { |
|||
detailVo.value.startTime = getTime.value[0] |
|||
detailVo.value.endTime = getTime.value[1] |
|||
} |
|||
} else { |
|||
detailVo.value.startTime = '' |
|||
detailVo.value.endTime = '' |
|||
} |
|||
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.consumePlatform = '' |
|||
detailVo.value.consumeType = '' |
|||
detailVo.value.startTime = '' |
|||
detailVo.value.endTime = '' |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startTime = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endTime = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
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 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"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="8"> |
|||
<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: 240px" |
|||
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="8"> |
|||
<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: 240px" |
|||
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> |
|||
</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> |
|||
<script> |
|||
</script> |
|||
@ -1,44 +0,0 @@ |
|||
<template> |
|||
<!-- ... 已有代码 ... --> |
|||
|
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-top: 20px"> |
|||
<template #header> |
|||
<div class="card-header"> |
|||
<div class="card-title">导出列表</div> |
|||
</div> |
|||
</template> |
|||
<div style="height: 300px; overflow-y: auto"> |
|||
<el-table :data="exportList" style="width: 100%" :loading="isExportListLoading"> |
|||
<el-table-column prop="fileName" label="文件名" width="200" /> |
|||
<el-table-column prop="createTime" label="导出时间" width="200"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" label="状态" width="100"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.status === 'processing'">处理中</span> |
|||
<span v-if="scope.row.status === 'completed'">已完成</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="100"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
size="small" |
|||
type="primary" |
|||
@click="downloadExportFile(scope.row)" |
|||
:disabled="scope.row.status !== 'completed'" |
|||
> |
|||
下载 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
<script></script> |
|||
@ -1,267 +0,0 @@ |
|||
<template> |
|||
<div class="total"> |
|||
<div |
|||
class="box" |
|||
:class="{ 'box-animaToR': isAnimating, 'box-animaToL': !isAnimating }" |
|||
@click="startAnimation1" |
|||
> |
|||
<div v-if="!isTextAnimating"> |
|||
<span class="title" :class="{ 'title-animaT': isAnimating }" |
|||
>管理员登录</span |
|||
> |
|||
<el-icon |
|||
class="right" |
|||
:class="{ 'arrow-anima': !isAnimating, 'title-animaT': isAnimating }" |
|||
> |
|||
<Right /> |
|||
</el-icon> |
|||
</div> |
|||
|
|||
<div v-else> |
|||
<span class="title" :class="{ 'title-animaT': !isAnimating }" |
|||
>用户登录</span |
|||
> |
|||
<el-icon |
|||
class="left" |
|||
:class="{ 'arrow-anima': isAnimating, 'title-animaT': !isAnimating }" |
|||
> |
|||
<Back /> |
|||
</el-icon> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="login admin"> |
|||
<div class="loginTitle">管理员登录</div> |
|||
<el-form :model="userInfo" label-width="auto" style="max-width: 600px"> |
|||
<el-form-item label="账号"> |
|||
<el-input v-model="userInfo.username" /> |
|||
</el-form-item> |
|||
<el-form-item label="密码"> |
|||
<el-input v-model="userInfo.password" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="success" style="width: 100%" @click="login()" |
|||
>登录</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted } from "vue"; |
|||
import axios from "axios"; |
|||
import API from "@/util/http"; |
|||
import { useRouter } from "vue-router"; |
|||
import { ElMessage, ElMessageBox } from "element-plus"; |
|||
const router = useRouter(); |
|||
const firstAnimating = ref(false); |
|||
const isAnimating = ref(false); |
|||
const isTextAnimating = ref(false); |
|||
const startAnimation = () => { |
|||
isAnimating.value = !isAnimating.value; |
|||
setTimeout(() => { |
|||
isTextAnimating.value = !isTextAnimating.value; |
|||
}, 400); |
|||
}; |
|||
|
|||
const userInfo = ref({ |
|||
username: "12345678", |
|||
password: "123456", |
|||
}); |
|||
|
|||
const getQueryVariable = (variable) => { |
|||
const href = window.location.href; |
|||
const query = href.split("?")[1]; |
|||
console.log("query", query); |
|||
const vars = query.split("&"); |
|||
for (let i = 0; i < vars.length; i++) { |
|||
const pair = vars[i].split("="); |
|||
if (pair[0] === variable) { |
|||
return pair[1]; |
|||
} |
|||
} |
|||
return ""; |
|||
}; |
|||
|
|||
const login = async function () { |
|||
const machineId = getQueryVariable("machineId"); |
|||
console.log(machineId); |
|||
try { |
|||
const result = await axios.post(`http://192.168.8.220:8081/admin/login`, { |
|||
account: userInfo.value.username, |
|||
password: userInfo.value.password, |
|||
machineId: machineId, |
|||
}); |
|||
if (result.data.code == 200) { |
|||
console.log("请求成功", result); |
|||
ElMessage.success('登录成功'); |
|||
router.push('/workspace') |
|||
} else { |
|||
console.log("请求失败result", result); |
|||
ElMessage.error(result.data.msg); |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.login { |
|||
position: absolute; |
|||
z-index: 1; |
|||
width: 30%; |
|||
} |
|||
|
|||
.loginTitle { |
|||
font-size: 48px; |
|||
font-weight: bold; |
|||
margin-bottom: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.user { |
|||
top: 30%; |
|||
left: 10%; |
|||
} |
|||
|
|||
.admin { |
|||
top: 30%; |
|||
left: 55%; |
|||
} |
|||
|
|||
.total { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
} |
|||
|
|||
.title { |
|||
position: absolute; |
|||
font-size: 48px; |
|||
font-weight: bold; |
|||
top: 40%; |
|||
left: 30%; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.title-animaT { |
|||
animation: textAnimaT 0.7s forwards; |
|||
} |
|||
|
|||
.title-animaF { |
|||
animation: textAnimaF 0.7s forwards; |
|||
} |
|||
|
|||
@keyframes textAnimaF { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
50% { |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes textAnimaT { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
50% { |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
.box { |
|||
width: 50%; |
|||
height: 100%; |
|||
margin: 0; |
|||
background: linear-gradient(90deg, #ffae00, #ffffff); |
|||
border-radius: 5%; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.box-animaToR { |
|||
animation: animaToR 1s forwards; |
|||
} |
|||
|
|||
.box-animaToL { |
|||
animation: animaToL 1s forwards; |
|||
} |
|||
|
|||
@keyframes animaToR { |
|||
0% { |
|||
transform: translateX(0) scaleX(1); |
|||
background: linear-gradient(90deg, #ffffff, #29e6ff); |
|||
} |
|||
|
|||
/* 50% { |
|||
transform: translateX(50%) scaleX(2); |
|||
} */ |
|||
|
|||
100% { |
|||
transform: translateX(100%) scaleX(1); |
|||
background: linear-gradient(90deg, #ffffff, #29e6ff); |
|||
} |
|||
} |
|||
|
|||
@keyframes animaToL { |
|||
0% { |
|||
transform: translateX(100%) scaleX(1); |
|||
} |
|||
|
|||
/* 50% { |
|||
transform: translateX(50%) scaleX(2); |
|||
} */ |
|||
|
|||
100% { |
|||
transform: translateX(0%) scaleX(1); |
|||
background: linear-gradient(90deg, #ffae00, #ffffff); |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
position: absolute; |
|||
right: 10%; |
|||
top: 40%; |
|||
font-size: 72px; |
|||
} |
|||
|
|||
.left { |
|||
position: absolute; |
|||
left: 10%; |
|||
top: 40%; |
|||
font-size: 72px; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.arrow-anima { |
|||
animation: arrowAnima 1s infinite; |
|||
} |
|||
|
|||
@keyframes arrowAnima { |
|||
0% { |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
50% { |
|||
transform: translateX(10px); |
|||
} |
|||
|
|||
100% { |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,797 +1,4 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import { AiFillRead } from 'vue-icons-plus/ai' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
adminData.value = result |
|||
rechargeVo.value.adminId = adminData.value.adminId |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 变量 |
|||
// 充值明细表格 |
|||
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 activity = ref([]) |
|||
// 所有信息 |
|||
const allData = ref([]) |
|||
// 搜索地区列表 |
|||
const area = ref([]) |
|||
//标签页默认高亮选项 |
|||
const activeName = ref('all') |
|||
// 支付方式选项 |
|||
const payWay = [ |
|||
{ |
|||
value: '微信', |
|||
label: '微信' |
|||
}, |
|||
{ |
|||
value: '支付宝', |
|||
label: '支付宝' |
|||
}, |
|||
{ |
|||
value: '银联', |
|||
label: '银联' |
|||
}, |
|||
{ |
|||
value: '信用卡', |
|||
label: '信用卡' |
|||
}, |
|||
{ |
|||
value: '借记卡', |
|||
label: '借记卡' |
|||
}, |
|||
{ |
|||
value: '现金充值', |
|||
label: '现金充值' |
|||
} |
|||
] |
|||
// 删除========================================================== |
|||
// 删除对象 |
|||
const delObj = ref({}) |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 2) * 60 + "px"; |
|||
// }); |
|||
|
|||
// 方法 |
|||
// 合计数存储 |
|||
const trueGold = ref(0) |
|||
const trueRGold = ref(0) |
|||
const trueFGold = ref(0) |
|||
//全部 |
|||
const totalmoney = ref(0) |
|||
const totalRcoin = ref(0) |
|||
const totalFcoin = ref(0) |
|||
//待审核 |
|||
const pendingGold = ref(0) |
|||
const pendingRGold = ref(0) |
|||
const pendingFGold = ref(0) |
|||
// 已通过金币数 |
|||
const approvedGold = ref(0) |
|||
const approvedRGold = ref(0) |
|||
const approvedFGold = ref(0) |
|||
// 已驳回金币数 |
|||
const rejectedGold = ref(0) |
|||
const rejectedRGold = ref(0) |
|||
const rejectedFGold = 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.startTime != '' && getTime.value.endTime != '') { |
|||
rechargeVo.value.startTime = getTime.value[0] |
|||
rechargeVo.value.endTime = getTime.value[1] |
|||
} |
|||
} else { |
|||
rechargeVo.value.startTime = '' |
|||
rechargeVo.value.endTime = '' |
|||
} |
|||
// 搜索参数赋值 |
|||
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 } } |
|||
}) |
|||
// 复制一份 rechargeVo.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = ref({ |
|||
area: rechargeVo.value.area, |
|||
adminId: rechargeVo.value.adminId, |
|||
startTime: rechargeVo.value.startTime, |
|||
endTime: rechargeVo.value.endTime |
|||
}) |
|||
const result2 = await API({ |
|||
url: '/recharge/recharge/RechargeA', |
|||
data: { |
|||
...detailWithoutSort.value |
|||
} |
|||
}) |
|||
// 检查 result2 是否为空 |
|||
if (!result2 || !result2.data || result2.data.length === 0) { |
|||
totalmoney.value = 0 |
|||
totalRcoin.value = 0 |
|||
totalFcoin.value = 0 |
|||
} |
|||
if (result2.data) { |
|||
result2.data.forEach((item) => { |
|||
switch (item.auditStatus) { |
|||
case '待审核': |
|||
// 若 item.raudit 为空则赋值为 0 |
|||
// 若 item.sumRaudit 为空则赋值为 0 |
|||
pendingGold.value = item.sumRaudit || 0 |
|||
pendingRGold.value = item.sumRaudit1 || 0 |
|||
pendingFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
case '已通过': |
|||
approvedGold.value = item.sumRaudit || 0 |
|||
approvedRGold.value = item.sumRaudit1 || 0 |
|||
approvedFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
case '已驳回': |
|||
rejectedGold.value = item.sumRaudit || 0 |
|||
rejectedRGold.value = item.sumRaudit1 || 0 |
|||
rejectedFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
} |
|||
}) |
|||
} |
|||
trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value |
|||
trueRGold.value = |
|||
pendingRGold.value + approvedRGold.value + rejectedRGold.value |
|||
trueFGold.value = |
|||
pendingFGold.value + approvedFGold.value + rejectedFGold.value |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
// 存储分页总数 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
delete rechargeVo.value.activityId |
|||
delete rechargeVo.value.payWay |
|||
delete rechargeVo.value.area |
|||
delete rechargeVo.value.startTime |
|||
delete rechargeVo.value.endTime |
|||
delete sortField.value |
|||
delete sortOrder.value |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
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 startTime = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endTime = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log('adminAll') |
|||
rechargeVo.value.status = '' |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
//待审核充值明细 |
|||
const adminWait = async function () { |
|||
rechargeVo.value.status = 0 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminWait') |
|||
|
|||
trueGold.value = pendingGold.value |
|||
trueRGold.value = pendingRGold.value |
|||
trueFGold.value = pendingFGold.value |
|||
} |
|||
//已通过充值明细 |
|||
const adminPass = async function () { |
|||
rechargeVo.value.status = 1 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
trueGold.value = approvedGold.value |
|||
trueRGold.value = approvedRGold.value |
|||
trueFGold.value = approvedFGold.value |
|||
console.log('adminPass') |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = async function () { |
|||
rechargeVo.value.status = 2 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminReject') |
|||
trueGold.value = rejectedGold.value |
|||
trueRGold.value = rejectedRGold.value |
|||
trueFGold.value = rejectedFGold.value |
|||
} |
|||
//点击标签页 |
|||
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 getActivity = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/recharge/activity/select', data: {} }) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
activity.value = result.data |
|||
console.log('activity', activity.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 获取地区 |
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/general/market', data: {} }) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储地区信息 |
|||
area.value = result.data |
|||
console.log('地区', area.value) |
|||
} catch (error) { |
|||
console.log('请求失败', 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 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 getAdminData() |
|||
await get() |
|||
await getActivity() |
|||
await getArea() |
|||
}) |
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
// 处理排序事件 |
|||
const handleSortChange = (column) => { |
|||
|
|||
console.log('排序字段：', column.prop) |
|||
console.log('排序方式：', column.order) |
|||
if (column.prop === 'paidGold') { |
|||
sortField.value = 'paid_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' |
|||
} else if(column.prop === 'rechargeGold'){ |
|||
sortField.value = 'recharge_gold' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
console.log('传递给后端的排序字段：', sortField.value) |
|||
console.log('传递给后端的排序方式：', sortOrder.value) |
|||
get() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="8"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">活动名称：</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.activityId" |
|||
placeholder="请选择活动名称" |
|||
size="large" |
|||
style="width: 240px" |
|||
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="8"> |
|||
<!-- <div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">支付方式：</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.payWay" |
|||
placeholder="请选择支付方式" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in payWay" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> --> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<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="请选择所属地区" |
|||
size="large" |
|||
style="width: 240px" |
|||
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> |
|||
</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> |
|||
</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> |
|||
<div> |
|||
充值金额：{{ trueRGold.toFixed(2) }}新币，永久金币：{{ |
|||
trueRGold.toFixed(2) |
|||
}}金币，免费金币：{{ trueFGold }}金币 |
|||
</div> |
|||
</el-tabs> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 520px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
height="520px" |
|||
@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 |
|||
fixed="left" |
|||
prop="username" |
|||
label="姓名" |
|||
width="100px" |
|||
/> |
|||
<el-table-column |
|||
fixed="left" |
|||
prop="jwcode" |
|||
label="精网号" |
|||
width="110px" |
|||
/> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column |
|||
prop="activityName" |
|||
label="活动名称" |
|||
width="150px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<!-- <el-table-column prop="" label="货币名称" width="120px" /> --> |
|||
<el-table-column |
|||
prop="paidGold" |
|||
sortable="custom" |
|||
label="充值金额" |
|||
width="120px" |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeGold" |
|||
label="永久金币" |
|||
sortable="custom" |
|||
width="110px" |
|||
/> |
|||
<el-table-column |
|||
prop="freeGold" |
|||
label="免费金币" |
|||
sortable="custom" |
|||
width="110px" |
|||
/> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="payWay" label="支付方式" width="100px" /> |
|||
<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="createTime" |
|||
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="rechargeTime" |
|||
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> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
<script> |
|||
</script> |
|||
@ -1,734 +1,4 @@ |
|||
<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 moment from 'moment' |
|||
import API from '@/util/http' |
|||
// 变量 |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
|
|||
adminData.value = result |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 充值明细表格 |
|||
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 tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 2) * 45 + "px"; |
|||
// }); |
|||
|
|||
// 方法 |
|||
// 统计合计数 |
|||
const trueGold = ref(0) |
|||
const trueRgold = ref(0) |
|||
const trueFgold = ref(0) |
|||
const trueTgold = ref(0) |
|||
// 待审核各种类金币数 |
|||
const pendingRgold = ref(0) |
|||
const pendingFgold = ref(0) |
|||
const pendingTgold = ref(0) |
|||
// 待审核金币数 |
|||
const pendingGold = ref(0) |
|||
// 已通过各种类金币数 |
|||
const approvedRgold = ref(0) |
|||
const approvedFgold = ref(0) |
|||
const approvedTgold = ref(0) |
|||
// 已通过金币数 |
|||
const approvedGold = ref(0) |
|||
// 已驳回各种类金币数 |
|||
const rejectedRgold = 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.startTime != '' && getTime.value.endTime != '') { |
|||
detail.value.startTime = getTime.value[0] |
|||
detail.value.endTime = getTime.value[1] |
|||
} |
|||
} else { |
|||
detail.value.startTime = '' |
|||
detail.value.endTime = '' |
|||
} |
|||
// 添加排序字段和排序方式到请求参数 |
|||
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 |
|||
pendingRgold.value = item.sumRaudit1 || 0 |
|||
pendingFgold.value = item.sumRaudit2 || 0 |
|||
pendingTgold.value = item.sumRaudit3 || 0 |
|||
// 若 item.sumRaudit 为空则赋值为 0 |
|||
pendingGold.value = item.sumRaudit || 0 |
|||
break |
|||
case '已通过': |
|||
approvedRgold.value = item.sumRaudit1 || 0 |
|||
approvedFgold.value = item.sumRaudit2 || 0 |
|||
approvedTgold.value = item.sumRaudit3 || 0 |
|||
approvedGold.value = item.sumRaudit || 0 |
|||
break |
|||
case '已驳回': |
|||
rejectedRgold.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 |
|||
trueRgold.value = |
|||
pendingRgold.value + approvedRgold.value + rejectedRgold.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) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
detail.value.refundGoods = '' |
|||
detail.value.refundType = '' |
|||
detail.value.area = '' |
|||
detail.value.startTime = '' |
|||
detail.value.endTime = '' |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startTime = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endTime = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endTime = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startTime, endTime] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log('adminAll') |
|||
detail.value.status = '' |
|||
getObj.value.pageNum = 1 |
|||
|
|||
get() |
|||
trueFgold.value = |
|||
pendingFgold.value + approvedFgold.value + rejectedFgold.value |
|||
trueRgold.value = |
|||
pendingRgold.value + approvedRgold.value + rejectedRgold.value |
|||
trueTgold.value = |
|||
pendingTgold.value + approvedTgold.value + rejectedTgold.value |
|||
trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value |
|||
} |
|||
//待审核充值明细 |
|||
const adminWait = async function () { |
|||
detail.value.status = 0 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminWait') |
|||
trueFgold.value = pendingFgold.value |
|||
trueRgold.value = pendingRgold.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('adminPass') |
|||
trueFgold.value = approvedFgold.value |
|||
trueRgold.value = approvedRgold.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('adminReject') |
|||
trueFgold.value = rejectedFgold.value |
|||
trueRgold.value = rejectedRgold.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 { |
|||
// 发送POST请求 |
|||
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) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
//删除气泡 |
|||
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) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 查询商品的接口 |
|||
const goods = ref([]) |
|||
const getGoods = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/product', data: {} }) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储全部数据 |
|||
goods.value = result.data |
|||
console.log('allData', allData.value) |
|||
console.log('地区', area.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
} |
|||
getGoods() |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
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 getAdminData() |
|||
await get() |
|||
await getArea() |
|||
}) |
|||
// 新增排序字段和排序方式 |
|||
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' |
|||
} else if (column.prop === 'auditTime') { |
|||
sortField.value = 'audit_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() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="8"> |
|||
<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: 240px" |
|||
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="8"> |
|||
<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: 240px" |
|||
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="8"> |
|||
<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: 240px" |
|||
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> |
|||
</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> |
|||
</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(trueRgold) |
|||
}}，免费金币：{{ Math.abs(trueFgold) }}，任务金币：{{ |
|||
Math.abs(trueTgold) |
|||
}} |
|||
</div> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 520px; overflow-y: auto"> |
|||
<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="150px" |
|||
/> |
|||
<el-table-column |
|||
prop="jwcode" |
|||
label="精网号" |
|||
fixed="left" |
|||
width="110px" |
|||
/> |
|||
<el-table-column prop="area" label="所属地区" width="110px" /> |
|||
<el-table-column prop="refundType" label="退款类型" width="100px" /> |
|||
<el-table-column prop="refundGoods" label="退款商品" width="110px"> |
|||
</el-table-column> |
|||
<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="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="auditTime" |
|||
sortable="custom" |
|||
label="审核时间" |
|||
width="180px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.auditTime).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" |
|||
></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> |
|||
<script> |
|||
</script> |
|||
2
stats.html
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