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

feat: 将地区选择改为级联下拉框 

feat:添加地区映射
zhangrenyuan/feature-20250728113353-金币前端三期
lihui 3 weeks ago
parent
dcd335b0ac
commit
083b74675c
12 changed files with 779 additions and 483 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      src/utils/marketMap.js
  2. 34
      src/utils/menuUtils.js
  3. 33
      src/views/audit/audit.vue
  4. 108
      src/views/audit/rechargeAudit.vue
  5. 167
      src/views/audit/refundAudit.vue
  6. 140
      src/views/consume/coinConsumeDetail.vue
  7. 4
      src/views/login.vue
  8. 29
      src/views/recharge/coinRechargeDetail.vue
  9. 149
      src/views/refund/coinRefundDetail.vue
  10. 152
      src/views/usergold/clientCountBalance.vue
  11. 7
      src/views/usergold/clientCountDetail.vue
  12. 115
      src/views/workspace/index.vue

32
src/utils/marketMap.js
View File

@ -0,0 +1,32 @@
// 地区映射表
export const marketMapping = {
1: "Capt",
2: "公司",
3: "市场部",
4: "新加坡",
5: "马来西亚",
6: "Marymount",
7: "City Hall",
8: "Jurong",
9: "研发部",
10: "Tampines",
11: "吉隆坡",
13: "香港",
14: "湾仔",
24016: "加拿大",
24018: "泰国",
24019: "Asoke",
24020: "槟城",
24021: "新山",
24022: "越南HCM",
24027: "韩国",
24028: "深圳运营",
24029: "深圳",
24030: "未知",
null:"---"
};
// 反向映射
export const reverseMarketMapping = Object.entries(marketMapping).reduce((acc, [key, value]) => {
acc[value] = key;
return acc;
}, {});

34
src/utils/menuUtils.js
View File

@ -72,37 +72,3 @@ export const getRoutePath = (menu) => {
return routeMap[menu.menuName] || '/noPermission' return routeMap[menu.menuName] || '/noPermission'
} }
// 路由映射(获取第一个菜单)
export const getFirstRoutePath = (menu) => {
// 路由映射表：key为接口menuName，value为对应路由路径
const routeMap = {
'工作台展示': '/workspace',
'金币审核': '/audit',
'金豆审核': '/beanAudit',
'汇率管理': '/rate',
'金币充值': '/coinRecharge',
'金豆充值': '/beanRecharge',
'金币消耗': '/coinConsume',
'金豆消耗': '/beanConsume',
'金币退款': '/coinRefund',
// '金豆退款': '/beanRefund',
'权限管理': '/permissions',
'金币客户账户明细': '/usergold',
'金豆客户账户明细': '/userbean',
};
// 未匹配的菜单默认使用id作为路由（可根据实际需求调整）
return routeMap[menu.menuName] || '/noPermission'
}

33
src/views/audit/audit.vue
View File

@ -4,12 +4,14 @@
<el-button <el-button
:type="activeTab === 'rechargeAudit' ? 'primary' : 'default'" :type="activeTab === 'rechargeAudit' ? 'primary' : 'default'"
@click="navigateTo('rechargeAudit')" @click="navigateTo('rechargeAudit')"
:disabled="!hasRecharge"
> >
充值审核 充值审核
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'refundAudit' ? 'primary' : 'default'" :type="activeTab === 'refundAudit' ? 'primary' : 'default'"
@click="navigateTo('refundAudit')" @click="navigateTo('refundAudit')"
:disabled="!hasRefund"
> >
退款审核 退款审核
</el-button> </el-button>
@ -23,6 +25,7 @@ import {ref, watch, onMounted} from 'vue';
import {useRouter, useRoute} from 'vue-router'; import {useRouter, useRoute} from 'vue-router';
import {storeToRefs} from 'pinia'; import {storeToRefs} from 'pinia';
import {useAdminStore} from '@/store/index.js'; import {useAdminStore} from '@/store/index.js';
import {permissionMapping} from "@/utils/menuTreePermission.js";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -30,29 +33,40 @@ const adminStore = useAdminStore();
const {menuTree} = storeToRefs(adminStore); const {menuTree} = storeToRefs(adminStore);
const activeTab = ref(''); const activeTab = ref('');
const hasRecharge = ref(false);
const hasRefund = ref(false);
// 导航方法 // 导航方法
const navigateTo = (name) => { const navigateTo = (name) => {
activeTab.value = name; activeTab.value = name;
router.push({name}); router.push({name});
}; };
// 递归判断某个 menuName 是否存在
const hasMenuPermission = (tree, targetName) => {
// 递归判断某个 menuId 是否存在
const hasMenuPermission = (tree, targetId) => {
for (const node of tree) { for (const node of tree) {
if (node.menuName === targetName) return true;
if (node.children && hasMenuPermission(node.children, targetName)) return true;
console.log(node.id)
if (node.id === targetId) return true;
if (node.children && hasMenuPermission(node.children, targetId)) return true;
} }
return false; return false;
}; };
// 默认路由判断
// 默认路由判断 - 使用 ID 匹配
const getDefaultAuditRoute = () => { const getDefaultAuditRoute = () => {
if (!menuTree.value) return 'rechargeAudit';
if (!menuTree.value || !menuTree.value.length) return 'rechargeAudit';
// 使用 ID
hasRecharge.value = hasMenuPermission(menuTree.value, permissionMapping.Recharge_Audit);
hasRefund.value = hasMenuPermission(menuTree.value, permissionMapping.Refund_Audit);
const hasRecharge = hasMenuPermission(menuTree.value, '充值审核');
return hasRecharge ? 'rechargeAudit' : 'refundAudit';
// 优先判断充值权限，没有则判断退款权限
if (hasRecharge) return 'rechargeAudit';
if (hasRefund) return 'refundAudit';
return 'rechargeAudit'; // 默认回退选项
}; };
// 监听路由变化更新标签状态 // 监听路由变化更新标签状态
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
if (newName === 'rechargeAudit' || newName === 'refundAudit') { if (newName === 'rechargeAudit' || newName === 'refundAudit') {
@ -64,7 +78,6 @@ watch(() => route.name, (newName) => {
} }
}); });
// 初始化逻辑 // 初始化逻辑
onMounted(() => { onMounted(() => {
if (route.name === 'audit') { if (route.name === 'audit') {

108
src/views/audit/rechargeAudit.vue
View File

@ -21,12 +21,15 @@
</el-select> </el-select>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="head-card-element">
<el-text size="large">所属地区：</el-text>
<el-select v-model="rechargeAudit.market" placeholder="请选择所属地区" style="width: 240px" clearable>
<el-option v-for="item in market" :key="item" :label="item" :value="item"/>
</el-select>
</div>
<el-text class="mx-1" size="large">所属地区：</el-text>
<el-cascader
v-model="selectedMarketPath"
:options="market"
placeholder="请选择所属地区"
clearable
style="width:180px"
@change="handleMarketChange"
/>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
@ -85,7 +88,11 @@
</el-table-column> </el-table-column>
<el-table-column fixed="left" prop="name" label="姓名" width="150px"/> <el-table-column fixed="left" prop="name" label="姓名" width="150px"/>
<el-table-column fixed="left" prop="jwcode" label="精网号" width="110px"/> <el-table-column fixed="left" prop="jwcode" label="精网号" width="110px"/>
<el-table-column prop="market" label="所属地区" width="100px"/>
<el-table-column prop="market" label="所属地区" width="100px">
<template #default="scope">
{{ marketMapping[scope.row.market] || scope.row.market }}
</template>
</el-table-column>
<el-table-column prop="activity" label="活动名称" width="100px" show-overflow-tooltip/> <el-table-column prop="activity" label="活动名称" width="100px" show-overflow-tooltip/>
<el-table-column prop="money" label="充值金额" sortable="custom" width="110px"> <el-table-column prop="money" label="充值金额" sortable="custom" width="110px">
<template #default="scope">{{ scope.row.permanentGold / 100 }}</template> <template #default="scope">{{ scope.row.permanentGold / 100 }}</template>
@ -176,13 +183,15 @@
</template> </template>
<script setup> <script setup>
import {computed, onMounted, reactive, ref} from 'vue'
import {onMounted, reactive, ref} from 'vue'
import {marketMapping, reverseMarketMapping} from '@/utils/marketMap.js'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import request from '@/util/http' import request from '@/util/http'
import moment from 'moment'
import API from '@/util/http' import API from '@/util/http'
import moment from 'moment'
import {useAdminStore} from "@/store/index.js"; import {useAdminStore} from "@/store/index.js";
import {storeToRefs} from "pinia"; import {storeToRefs} from "pinia";
import {findMenuById, permissionMapping} from "@/utils/menuTreePermission.js"
// 精网号去空格 // 精网号去空格
const trimJwCode = () => { const trimJwCode = () => {
if (rechargeAudit.value.jwcode) { if (rechargeAudit.value.jwcode) {
@ -365,8 +374,10 @@ const resetSearch = function () {
startTime: "", startTime: "",
endTime: "", endTime: "",
market: "", market: "",
auditStatus: rechargeAudit.value.auditStatus
auditStatus: rechargeAudit.value.auditStatus,
} }
selectedMarketPath.value = []
getTime.value = [] getTime.value = []
activeTimeRange.value = '' // 清除激活状态 activeTimeRange.value = '' // 清除激活状态
getRecharge() getRecharge()
@ -485,21 +496,6 @@ const getActivity = async function () {
} }
} }
// 地区下拉框
const getMarket = async function () {
try {
const result = await request({
url: '/general/adminMarkets',
data: {
account: adminData.value.account
}
})
market.value = result.data
console.log('地区', market.value)
} catch (error) {
console.log('请求失败', error)
}
}
const handlePagination = (type, val) => { const handlePagination = (type, val) => {
if (type === 'size') { if (type === 'size') {
@ -513,7 +509,6 @@ const handlePagination = (type, val) => {
const adminStore = useAdminStore(); const adminStore = useAdminStore();
const {menuTree} = storeToRefs(adminStore); const {menuTree} = storeToRefs(adminStore);
import {permissionMapping, findMenuById} from "@/utils/menuTreePermission.js"
// 处理通过操作 // 处理通过操作
@ -534,7 +529,7 @@ const handleApprove = async (row) => {
console.error('审核通过失败', error) console.error('审核通过失败', error)
ElMessage.error('操作失败') ElMessage.error('操作失败')
} }
}else {
} else {
ElMessage.error('无权限') ElMessage.error('无权限')
} }
@ -624,6 +619,65 @@ const previewImage = (imageUrl) => {
}); });
}; };
// 存储地区选择变化
const selectedMarketPath = ref([])
//处理地区选择变化
const handleMarketChange = (value) => {
if (value && value.length > 0) {
const lastValue = value[value.length - 1];
let selectedName = lastValue.endsWith('_all')
? lastValue.replace('_all', '')
: lastValue;
// 反向映射
rechargeAudit.value.market = reverseMarketMapping[selectedName] || '';
} else {
rechargeAudit.value.market = '';
}
};
// 获取地区，修改为级联下拉框
const getMarket = async function () {
console.log('获取地区adminid', adminData.value)
try {
// 发送POST请求
const result = await API({
url: '/market/selectMarket',
data: {account: adminData.value.account}
});
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
// 递归转换树形结构为级联选择器需要的格式
const transformTree = (nodes) => {
return nodes.map(node => {
const children = node.children && node.children.length
? transformTree(node.children)
: null;
// 如果有子节点，添加“全部”选项
if (children) {
children.unshift({
value: `${node.name}_all`, // 唯一标识
label: '全部',
children: null
});
}
return {
value: node.name, //使用地区名称作为值
label: node.name, //显示名称
children
};
});
}
// 存储地区信息
market.value = transformTree(result.data)
console.log('转换后的地区树', market.value)
} catch (error) {
console.log('请求失败', error)
}
}
// 挂载 // 挂载
onMounted(async function () { onMounted(async function () {
await getAdminData() await getAdminData()

167
src/views/audit/refundAudit.vue
View File

@ -6,26 +6,31 @@
<el-row style="margin-bottom: 5px"> <el-row style="margin-bottom: 5px">
<el-col :span="6"> <el-col :span="6">
<el-text size="large">精网号：</el-text> <el-text size="large">精网号：</el-text>
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 240px" clearable />
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 240px" clearable/>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-text size="large">商品名：</el-text> <el-text size="large">商品名：</el-text>
<el-select v-model="searchForm.goodsName" placeholder="请输入商品名" style="width: 240px" clearable> <el-select v-model="searchForm.goodsName" placeholder="请输入商品名" style="width: 240px" clearable>
<el-option v-for="item in refundGoodsOptions" :key="item" :label="item" :value="item"> </el-option>
<el-option v-for="item in refundGoodsOptions" :key="item" :label="item" :value="item"></el-option>
</el-select> </el-select>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-text size="large">退款方式：</el-text> <el-text size="large">退款方式：</el-text>
<el-select v-model="searchForm.refundModel" placeholder="请选择" style="width: 240px" clearable> <el-select v-model="searchForm.refundModel" placeholder="请选择" style="width: 240px" clearable>
<el-option label="全部退款" value="0" />
<el-option label="部分退款" value="1" />
<el-option label="全部退款" value="0"/>
<el-option label="部分退款" value="1"/>
</el-select> </el-select>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-text size="large">所属地区：</el-text>
<el-select v-model="searchForm.market" placeholder="请选择" style="width: 240px" clearable>
<el-option v-for="item in marketOptions" :key="item" :label="item" :value="item" />
</el-select>
<el-text class="mx-1" size="large">所属地区：</el-text>
<el-cascader
v-model="selectedMarketPath"
:options="market"
placeholder="请选择所属地区"
clearable
style="width:180px"
@change="handleMarketChange"
/>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
@ -33,11 +38,18 @@
<div class="time-controls"> <div class="time-controls">
<div class="time-group"> <div class="time-group">
<el-text size="large" style="width: 80px">提交时间：</el-text> <el-text size="large" style="width: 80px">提交时间：</el-text>
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"/> end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"/>
<el-button @click="getToday()" style="margin-left: 10px" :type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
<el-button @click="getYesterday()" style="margin-left: 10px" :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
<el-button @click="get7Days()" style="margin-left: 10px" :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天</el-button>
<el-button @click="getToday()" style="margin-left: 10px"
:type="activeTimeRange === 'today' ? 'primary' : ''"> 今
</el-button>
<el-button @click="getYesterday()" style="margin-left: 10px"
:type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
</el-button>
<el-button @click="get7Days()" style="margin-left: 10px"
:type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天
</el-button>
<el-button type="success" @click="resetSearch">重置</el-button> <el-button type="success" @click="resetSearch">重置</el-button>
<el-button type="primary" @click="handleSearch">查询</el-button> <el-button type="primary" @click="handleSearch">查询</el-button>
</div> </div>
@ -65,17 +77,21 @@
</div> </div>
<el-table :data="tableData" height="540px" @sort-change="handleSortChange"> <el-table :data="tableData" height="540px" @sort-change="handleSortChange">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="name" label="姓名" width="120" />
<el-table-column prop="jwcode" label="精网号" width="120" />
<el-table-column prop="market" label="所属地区" width="120" />
<el-table-column prop="refundType" label="退款类型" width="120" />
<el-table-column type="index" label="序号" width="60"/>
<el-table-column prop="name" label="姓名" width="120"/>
<el-table-column prop="jwcode" label="精网号" width="120"/>
<el-table-column prop="market" label="所属地区" width="120">
<template #default="scope">
{{ marketMapping[scope.row.market] || scope.row.market }}
</template>
</el-table-column>
<el-table-column prop="refundType" label="退款类型" width="120"/>
<el-table-column prop="refundModel" label="退款方式" width="120"> <el-table-column prop="refundModel" label="退款方式" width="120">
<template #default="{ row }"> <template #default="{ row }">
{{ row.refundModel === 0 ? '全部退款' : '部分退款' }} {{ row.refundModel === 0 ? '全部退款' : '部分退款' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="goodsName" label="退款商品" width="120" show-overflow-tooltip />
<el-table-column prop="goodsName" label="退款商品" width="120" show-overflow-tooltip/>
<el-table-column prop="sumGold" label="退款金额" width="120" sortable="custom"> <el-table-column prop="sumGold" label="退款金额" width="120" sortable="custom">
<template #default="{ row }"> <template #default="{ row }">
{{ row.sumGold / 100 }} {{ row.sumGold / 100 }}
@ -96,10 +112,11 @@
{{ row.taskGold / 100 }} {{ row.taskGold / 100 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip /><!-- 当内容过长被隐藏时显示 tooltip -->
<el-table-column prop="adminName" label="提交人" width="120" />
<el-table-column v-if="checkTab === 'reject'" prop="rejectReason" label="驳回理由" width="150" show-overflow-tooltip />
<el-table-column v-if="checkTab !== 'pending'" prop="auditName" label="审核人" width="120" />
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip/><!-- 当内容过长被隐藏时显示 tooltip -->
<el-table-column prop="adminName" label="提交人" width="120"/>
<el-table-column v-if="checkTab === 'reject'" prop="rejectReason" label="驳回理由" width="150"
show-overflow-tooltip/>
<el-table-column v-if="checkTab !== 'pending'" prop="auditName" label="审核人" width="120"/>
<el-table-column prop="createTime" label="提交时间" width="180" sortable="custom"> <el-table-column prop="createTime" label="提交时间" width="180" sortable="custom">
<template #default="{ row }"> <template #default="{ row }">
{{ moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') }} {{ moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
@ -129,14 +146,16 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" <el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handlePageSizeChange"
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination> @current-change="handleCurrentChange"></el-pagination>
</el-card> </el-card>
<el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px"> <el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px">
<el-form> <el-form>
<el-form-item label="驳回理由" required> <el-form-item label="驳回理由" required>
<el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200" show-word-limit/>
<el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
show-word-limit/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -149,10 +168,11 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {onMounted, reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import API from '@/util/http' import API from '@/util/http'
import moment from 'moment' import moment from 'moment'
import {marketMapping, reverseMarketMapping} from "@/utils/marketMap.js";
// 标记当前激活的时间范围按钮 // 标记当前激活的时间范围按钮
const activeTimeRange = ref('') const activeTimeRange = ref('')
@ -215,11 +235,11 @@ const sortField = ref('')
const sortOrder = ref('') const sortOrder = ref('')
// 表单验证 // 表单验证
const rules = reactive({ const rules = reactive({
reason: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }]
reason: [{required: true, message: '请输入驳回理由', trigger: 'blur'}]
}) })
const getAdminData = async function () { const getAdminData = async function () {
try { try {
const result = await API({ url: '/admin/userinfo', data: {} })
const result = await API({url: '/admin/userinfo', data: {}})
adminInfo.value = result adminInfo.value = result
console.log('请求成功', result) console.log('请求成功', result)
console.log('用户信息', adminInfo.value) console.log('用户信息', adminInfo.value)
@ -245,11 +265,11 @@ const handleSortChange = (column) => {
sortField.value = 'permanent_gold' sortField.value = 'permanent_gold'
} else if (column.prop === 'freeGold') { } else if (column.prop === 'freeGold') {
sortField.value = 'freeGold' sortField.value = 'freeGold'
}else if (column.prop === 'taskGold') {
} else if (column.prop === 'taskGold') {
sortField.value = 'task_gold' sortField.value = 'task_gold'
}else if (column.prop === 'createTime') {
} else if (column.prop === 'createTime') {
sortField.value = 'create_time' sortField.value = 'create_time'
}else if (column.prop === 'auditTime') {
} else if (column.prop === 'auditTime') {
sortField.value = 'audit_time' sortField.value = 'audit_time'
} else { } else {
sortField.value = '' sortField.value = ''
@ -266,20 +286,52 @@ const showRejectDialog = (row) => {
rejectDialogVisible.value = true rejectDialogVisible.value = true
} }
// 查地区 // 查地区
const getmarkets = async () => {
const market = ref([])
// 获取地区，修改为级联下拉框
const getMarket = async function () {
console.log('获取地区adminid', adminInfo.value)
try { try {
const result = await API({ url: '/general/adminMarkets', data: {
account: adminInfo.value.account,
} })
marketOptions.value = result.data || []
// 发送POST请求
const result = await API({
url: '/market/selectMarket',
data: {account: adminInfo.value.account}
});
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
// 递归转换树形结构为级联选择器需要的格式
const transformTree = (nodes) => {
return nodes.map(node => {
const children = node.children && node.children.length
? transformTree(node.children)
: null;
// 如果有子节点，添加“全部”选项
if (children) {
children.unshift({
value: `${node.name}_all`, // 唯一标识
label: '全部',
children: null
});
}
return {
value: node.name, //使用地区名称作为值
label: node.name, //显示名称
children
};
});
}
// 存储地区信息
market.value = transformTree(result.data)
console.log('转换后的地区树', market.value)
} catch (error) { } catch (error) {
console.error('获取地区列表失败', error)
console.log('请求失败', error)
} }
} }
// 查商品名 // 查商品名
const getRefundGoods = async () => { const getRefundGoods = async () => {
try { try {
const res = await API({ url: '/general/goods' })
const res = await API({url: '/general/goods'})
refundGoodsOptions.value = res.data || [] refundGoodsOptions.value = res.data || []
} catch (error) { } catch (error) {
console.error('获取商品列表失败', error) console.error('获取商品列表失败', error)
@ -304,12 +356,12 @@ const get = async function (val) {
pageSize: pagination.value.pageSize, pageSize: pagination.value.pageSize,
refundAudit: { refundAudit: {
...searchForm.value, ...searchForm.value,
sortField:sortField.value,
sortOrder:sortOrder.value
sortField: sortField.value,
sortOrder: sortOrder.value
} }
} }
console.log('看看传给后端的参数：', params) console.log('看看传给后端的参数：', params)
const res = await API({ url: '/audit/selectRefund', data: params })
const res = await API({url: '/audit/selectRefund', data: params})
tableData.value = res.list || [] tableData.value = res.list || []
pagination.value.total = res.total || 0 pagination.value.total = res.total || 0
console.log('查全部的total', pagination.value.total, res.total) console.log('查全部的total', pagination.value.total, res.total)
@ -326,7 +378,7 @@ const handleApprove = async (row) => {
action: 1,// action的1是通过,2是驳回 action: 1,// action的1是通过,2是驳回
rejectReason: '' rejectReason: ''
} }
await API({ url: '/audit/audit', data: params })// 试一下能不能发
await API({url: '/audit/audit', data: params})// 试一下能不能发
ElMessage.success('审核通过成功') ElMessage.success('审核通过成功')
get() get()
getStats() getStats()
@ -350,12 +402,12 @@ const handleReject = async () => {
action: 2, action: 2,
rejectReason: rejectReason.value rejectReason: rejectReason.value
} }
await API({ url: '/audit/audit', data: params })
await API({url: '/audit/audit', data: params})
ElMessage.success('驳回成功') ElMessage.success('驳回成功')
rejectDialogVisible.value = false rejectDialogVisible.value = false
get() get()
getStats() getStats()
console.log('aaaaaaaaaa这是驳回调用',params)
console.log('aaaaaaaaaa这是驳回调用', params)
} catch (error) { } catch (error) {
console.error('驳回失败', error) console.error('驳回失败', error)
ElMessage.error('操作失败') ElMessage.error('操作失败')
@ -404,12 +456,13 @@ const resetSearch = function () {
market: '', market: '',
startTime: '', startTime: '',
endTime: '', endTime: '',
sortField:'',
sortOrder:'',
auditStatus:auditStatus
sortField: '',
sortOrder: '',
auditStatus: auditStatus
} }
dateRange.value = [] dateRange.value = []
activeTimeRange.value = '' // 清除激活状态 activeTimeRange.value = '' // 清除激活状态
selectedMarketPath.value = []
} }
// 今天 // 今天
@ -512,10 +565,28 @@ const adminReject = async function () {
console.log('aaaaaaaaaaaaaaaaaa看看checkTab，这是点击已驳回调用', checkTab.value) console.log('aaaaaaaaaaaaaaaaaa看看checkTab，这是点击已驳回调用', checkTab.value)
} }
// 存储地区选择变化
const selectedMarketPath = ref([])
//处理地区选择变化
const handleMarketChange = (value) => {
if (value && value.length > 0) {
const lastValue = value[value.length - 1];
let selectedName = lastValue.endsWith('_all')
? lastValue.replace('_all', '')
: lastValue;
// 反向映射
searchForm.value.market = reverseMarketMapping[selectedName] || '';
} else {
searchForm.value.market = '';
}
};
onMounted(async () => { onMounted(async () => {
await getAdminData() await getAdminData()
getRefundGoods() getRefundGoods()
getmarkets()
await getMarket()
await get() await get()
await getStats() await getStats()
console.log('aaaaaaaaaa这是挂载后调用') console.log('aaaaaaaaaa这是挂载后调用')

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

@ -1,9 +1,10 @@
<script setup> <script setup>
import { computed, onMounted, ref } from 'vue'
import { dayjs, ElMessage } from 'element-plus'
import {computed, onMounted, ref} from 'vue'
import {dayjs, ElMessage} from 'element-plus'
import request from '@/util/http' import request from '@/util/http'
import API from '@/util/http' import API from '@/util/http'
import moment from 'moment' import moment from 'moment'
import {marketMapping, reverseMarketMapping} from "@/utils/marketMap.js";
// 之后整理一下 // 之后整理一下
/* /*
@ -181,7 +182,7 @@ const ConsumeSelectBy = async function (val) {
// 合计数的接口 // 合计数的接口
// 复制一份 detail.value 并移除排序字段和排序方式 // 复制一份 detail.value 并移除排序字段和排序方式
const detailWithoutSort = { ...consumeUser.value }
const detailWithoutSort = {...consumeUser.value}
delete detailWithoutSort.sortField delete detailWithoutSort.sortField
delete detailWithoutSort.sortOrder delete detailWithoutSort.sortOrder
@ -277,6 +278,7 @@ const reset = function () {
sortOrder.value = '' sortOrder.value = ''
getTime.value = {} getTime.value = {}
activeTimeRange.value = '' // 清除激活状态 activeTimeRange.value = '' // 清除激活状态
selectedMarketPath.value = []
// 点完重置后，重新请求数据 // 点完重置后，重新请求数据
@ -361,28 +363,50 @@ const getGoods = async function () {
} }
// 获取地区列表的方法 // 获取地区列表的方法
// 获取地区，修改为级联下拉框
const getMarket = async function () { const getMarket = async function () {
console.log('获取地区adminid', adminData.value)
try { try {
// 发送请求获取地区列表
const result = await request({
// url: '/general/market',
// 发送POST请求
const result = await API({
url: '/general/adminMarkets', // todo 换成实际接口地址
data: {account:adminData.value.account}
})
console.log('请求地区列表成功', result)
// 存储地区数据
market.value = result.data
console.log('地区数据', market.value)
url: '/market/selectMarket',
data: {account: adminData.value.account}
});
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
// 递归转换树形结构为级联选择器需要的格式
const transformTree = (nodes) => {
return nodes.map(node => {
const children = node.children && node.children.length
? transformTree(node.children)
: null;
// 如果有子节点，添加“全部”选项
if (children) {
children.unshift({
value: `${node.name}_all`, // 唯一标识
label: '全部',
children: null
});
}
return {
value: node.name, //使用地区名称作为值
label: node.name, //显示名称
children
};
});
}
// 存储地区信息
market.value = transformTree(result.data)
console.log('转换后的地区树', market.value)
} catch (error) { } catch (error) {
console.log('请求地区列表失败', error)
ElMessage({
type: 'error',
message: '获取地区列表失败，请稍后重试'
})
console.log('请求失败', error)
} }
} }
// 处理排序事件 // 处理排序事件
const handleSortChange = (column) => { const handleSortChange = (column) => {
console.log('排序字段：', column.prop) console.log('排序字段：', column.prop)
@ -447,7 +471,7 @@ const exportExcel = async function () {
sortOrder: sortOrder.value || '' sortOrder: sortOrder.value || ''
} }
} }
const res = await API({ url: '/export/exportConsume', data: params })
const res = await API({url: '/export/exportConsume', data: params})
if (res.code === 200) { if (res.code === 200) {
ElMessage.success('导出成功') ElMessage.success('导出成功')
} }
@ -468,7 +492,7 @@ const exportListLoading = ref(false)
const getExportList = async () => { const getExportList = async () => {
exportListLoading.value = true exportListLoading.value = true
try { try {
const result = await API({ url: '/export/export' })
const result = await API({url: '/export/export'})
if (result.code === 200) { if (result.code === 200) {
const filteredData = result.data.filter(item => { const filteredData = result.data.filter(item => {
return item.type === 4; //4表示金币消耗列表 return item.type === 4; //4表示金币消耗列表
@ -525,6 +549,24 @@ const getTagText = (state) => {
return '未知状态'; return '未知状态';
} }
} }
// 存储地区选择变化
const selectedMarketPath = ref([])
//处理地区选择变化
const handleMarketChange = (value) => {
if (value && value.length > 0) {
const lastValue = value[value.length - 1];
let selectedName = lastValue.endsWith('_all')
? lastValue.replace('_all', '')
: lastValue;
// 反向映射
consumeUser.value.market = reverseMarketMapping[selectedName] || '';
} else {
consumeUser.value.market = '';
}
};
</script> </script>
<template> <template>
@ -535,33 +577,37 @@ const getTagText = (state) => {
<el-col :span="5"> <el-col :span="5">
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1">精网号：</el-text> <el-text class="mx-1">精网号：</el-text>
<el-input v-model="consumeUser.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
<el-input v-model="consumeUser.jwcode" placeholder="请输入精网号" style="width: 150px" clearable/>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" size="large">商品名称：</el-text> <el-text class="mx-1" size="large">商品名称：</el-text>
<el-select v-model="consumeUser.goodsName" placeholder="请选择商品名称" size="large" style="width: 180px"
<el-select v-model="consumeUser.goodsName" placeholder="请选择商品名称" style="width: 180px"
clearable> clearable>
<!-- 修改 v-for 绑定逻辑 --> <!-- 修改 v-for 绑定逻辑 -->
<el-option v-for="(item, index) in goods" :key="index" :label="item" :value="item" />
<el-option v-for="(item, index) in goods" :key="index" :label="item" :value="item"/>
</el-select> </el-select>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="head-card-element">
<el-text class="mx-1" size="large">所属地区：</el-text> <el-text class="mx-1" size="large">所属地区：</el-text>
<el-select v-model="consumeUser.market" placeholder="请选择所属地区" size="large" style="width: 180px" clearable>
<el-option v-for="(item, index) in market" :key="index" :label="item" :value="item" />
</el-select>
</div>
<el-cascader
v-model="selectedMarketPath"
:options="market"
placeholder="请选择所属地区"
clearable
style="width:180px"
@change="handleMarketChange"
/>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" size="large">消耗平台：</el-text> <el-text class="mx-1" size="large">消耗平台：</el-text>
<el-select v-model="consumeUser.payPlatform" placeholder="请选择消耗平台" size="large" style="width: 180px"
<el-select v-model="consumeUser.payPlatform" placeholder="请选择消耗平台"
style="width: 180px"
clearable> clearable>
<el-option v-for="item in consumePlatform" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in consumePlatform" :key="item.value" :label="item.label" :value="item.value"/>
</el-select> </el-select>
</div> </div>
</el-col> </el-col>
@ -571,13 +617,16 @@ const getTagText = (state) => {
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" size="large">消耗时间：</el-text> <el-text class="mx-1" size="large">消耗时间：</el-text>
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间" <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange" />
end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"/>
<el-button @click="getToday()" style="margin-left: 10px" <el-button @click="getToday()" style="margin-left: 10px"
:type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
:type="activeTimeRange === 'today' ? 'primary' : ''"> 今
</el-button>
<el-button @click="getYesterday()" style="margin-left: 10px" <el-button @click="getYesterday()" style="margin-left: 10px"
:type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
:type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
</el-button>
<el-button @click="get7Days()" style="margin-left: 10px" <el-button @click="get7Days()" style="margin-left: 10px"
:type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天</el-button>
:type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天
</el-button>
<!-- </div> <!-- </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
@ -611,11 +660,15 @@ const getTagText = (state) => {
</template> </template>
</el-table-column> </el-table-column>
<!-- 固定姓名列 --> <!-- 固定姓名列 -->
<el-table-column prop="name" label="姓名" width="150px" fixed="left" />
<el-table-column prop="name" label="姓名" width="150px" fixed="left"/>
<!-- 固定精网号列 --> <!-- 固定精网号列 -->
<el-table-column prop="jwcode" label="精网号" width="110px" fixed="left" />
<el-table-column prop="market" label="所属地区" width="110px" />
<el-table-column prop="goodsName" label="商品" width="160px" show-overflow-tooltip />
<el-table-column prop="jwcode" label="精网号" width="110px" fixed="left"/>
<el-table-column prop="market" label="所属地区" width="110px">
<template #default="scope">
{{ marketMapping[scope.row.market] || scope.row.market }}
</template>
</el-table-column>
<el-table-column prop="goodsName" label="商品" width="160px" show-overflow-tooltip/>
<el-table-column prop="payPlatform" label="消耗平台" width="120px"> <el-table-column prop="payPlatform" label="消耗平台" width="120px">
<template #default="scope"> <template #default="scope">
<!-- 使用非严格相等比较 --> <!-- 使用非严格相等比较 -->
@ -655,16 +708,17 @@ const getTagText = (state) => {
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
<el-table-column prop="adminName" label="提交人" width="110px" />
<el-table-column prop="createTime" label="消耗时间" sortable="custom" width="180px" />
<el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip/>
<el-table-column prop="adminName" label="提交人" width="110px"/>
<el-table-column prop="createTime" label="消耗时间" sortable="custom" width="180px"/>
</el-table> </el-table>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
<div class="pagination"> <div class="pagination">
<el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]" <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"
layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination> @current-change="handleCurrentChange"></el-pagination>
</div> </div>
</el-card> </el-card>
@ -674,7 +728,7 @@ const getTagText = (state) => {
<!-- 导出弹窗 --> <!-- 导出弹窗 -->
<el-dialog v-model="exportListVisible" title="导出列表" width="80%"> <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
<el-table :data="exportList" style="width: 100%" :loading="exportListLoading"> <el-table :data="exportList" style="width: 100%" :loading="exportListLoading">
<el-table-column prop="fileName" label="文件名" />
<el-table-column prop="fileName" label="文件名"/>
<el-table-column prop="state" label="状态"> <el-table-column prop="state" label="状态">
<template #default="scope"> <template #default="scope">
<el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'"> <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">

4
src/views/login.vue
View File

@ -6,7 +6,7 @@ import {useRouter} from 'vue-router'
import API from "@/util/http.js"; import API from "@/util/http.js";
import {useAdminStore} from '@/store' import {useAdminStore} from '@/store'
// 方法抽出来 三个地方会用到 // 方法抽出来 三个地方会用到
import {filterFirstMenu, findFirstThirdLevelMenu, getFirstRoutePath,} from "../utils/menuUtils.js"
import {filterFirstMenu, findFirstThirdLevelMenu, getRoutePath,} from "../utils/menuUtils.js"
const router = useRouter() // 获取路由实例 const router = useRouter() // 获取路由实例
//获取当前浏览器地址 //获取当前浏览器地址
@ -69,7 +69,7 @@ const login = async function () {
console.log('获取到的第一个可访问的菜单', firstMenu) console.log('获取到的第一个可访问的菜单', firstMenu)
// 获取第一个可访问的菜单的 path // 获取第一个可访问的菜单的 path
const redirectPath = firstMenu ? getFirstRoutePath(firstMenu) : '/noPermission'
const redirectPath = firstMenu ? getRoutePath(firstMenu) : '/noPermission'
// 跳转 // 跳转
router.push(redirectPath) router.push(redirectPath)

29
src/views/recharge/coinRechargeDetail.vue
View File

@ -6,6 +6,7 @@ import {AiFillRead} from 'vue-icons-plus/ai'
import axios from 'axios' import axios from 'axios'
import moment from 'moment' import moment from 'moment'
import API from '@/util/http' import API from '@/util/http'
import {marketMapping, reverseMarketMapping} from '@/utils/marketMap.js';
//这是获取用户信息的接口 //这是获取用户信息的接口
const adminData = ref({}) const adminData = ref({})
const getAdminData = async function () { const getAdminData = async function () {
@ -39,19 +40,19 @@ const rechargeUser = ref({
const selectedMarketPath = ref([]) const selectedMarketPath = ref([])
//处理地区选择变化 //处理地区选择变化
const handleMarketChange = (value) => { const handleMarketChange = (value) => {
if(value && value.length > 0){
if (value && value.length > 0) {
const lastValue = value[value.length - 1]; const lastValue = value[value.length - 1];
if (lastValue.endsWith('_all')) {
// 选中“全部”，取父节点名称
rechargeUser.value.market = lastValue.replace('_all', '');
} else {
// 取路径的最后一项作为选中的地区
rechargeUser.value.market = lastValue;
}
let selectedName = lastValue.endsWith('_all')
? lastValue.replace('_all', '')
: lastValue;
// 反向映射
rechargeUser.value.market = reverseMarketMapping[selectedName] || '';
} else { } else {
rechargeUser.value.market = ''
rechargeUser.value.market = '';
} }
}
};
// 搜索对象 // 搜索对象
const getObj = ref({ const getObj = ref({
@ -507,6 +508,8 @@ const getTagText = (state) => {
return '未知状态'; return '未知状态';
} }
} }
</script> </script>
<template> <template>
@ -604,7 +607,11 @@ const getTagText = (state) => {
</el-table-column> </el-table-column>
<el-table-column fixed="left" prop="name" label="姓名" width="150px"/> <el-table-column fixed="left" prop="name" label="姓名" width="150px"/>
<el-table-column fixed="left" prop="jwcode" label="精网号" width="110px"/> <el-table-column fixed="left" prop="jwcode" label="精网号" width="110px"/>
<el-table-column prop="market" label="所属地区" width="100px"/>
<el-table-column prop="market" label="所属地区" width="100px">
<template #default="scope">
<span>{{ marketMapping[scope.row.market] || scope.row.market}}</span>
</template>
</el-table-column>
<el-table-column prop="activity" label="活动名称" width="110px" show-overflow-tooltip/> <el-table-column prop="activity" label="活动名称" width="110px" show-overflow-tooltip/>
<el-table-column prop="rateName" label="货币名称" width="110px"/> <el-table-column prop="rateName" label="货币名称" width="110px"/>
<el-table-column prop="money" sortable="custom" label="充值金额" width="110px"/> <el-table-column prop="money" sortable="custom" label="充值金额" width="110px"/>

149
src/views/refund/coinRefundDetail.vue
View File

@ -1,13 +1,11 @@
<script setup> <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 {computed, onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import moment from 'moment' import moment from 'moment'
import API from '@/util/http' import API from '@/util/http'
import request from '@/util/http' import request from '@/util/http'
import {marketMapping, reverseMarketMapping} from "@/utils/marketMap.js";
// 精网号去空格 // 精网号去空格
const trimJwCode = () => { const trimJwCode = () => {
@ -83,12 +81,13 @@ const getRefundTypes = async function () {
// 发送请求获取退款类型 // 发送请求获取退款类型
const result = await API({ const result = await API({
url: '/refund/refundType', //这里应该写上一个退款类型的接口 url: '/refund/refundType', //这里应该写上一个退款类型的接口
data: {} })
data: {}
})
console.log('退款类型请求成功', result) console.log('退款类型请求成功', result)
// 检查返回的数据是否为数组 // 检查返回的数据是否为数组
if (Array.isArray(result.data)) { if (Array.isArray(result.data)) {
// 将字符串数组转换为 { value, label } 格式 // 将字符串数组转换为 { value, label } 格式
refundType.value = result.data.map(item => ({ value: item, label: item }));
refundType.value = result.data.map(item => ({value: item, label: item}));
} else { } else {
console.error('退款类型数据格式错误', result) console.error('退款类型数据格式错误', result)
ElMessage.error('退款类型数据格式错误，请联系管理员') ElMessage.error('退款类型数据格式错误，请联系管理员')
@ -130,11 +129,11 @@ const getSelectBy = async function (val) {
url: '/refund/selectBy', url: '/refund/selectBy',
data: { data: {
...getObj.value, ...getObj.value,
refundUser: { ...refundUser.value }
refundUser: {...refundUser.value}
} }
}) })
// 复制一份 refundUser.value 并移除排序字段和排序方式 // 复制一份 refundUser.value 并移除排序字段和排序方式
const detailWithoutSort = { ...refundUser.value }
const detailWithoutSort = {...refundUser.value}
delete detailWithoutSort.sortField delete detailWithoutSort.sortField
delete detailWithoutSort.sortOrder delete detailWithoutSort.sortOrder
@ -189,7 +188,7 @@ const reset = function () {
sortOrder.value = '' sortOrder.value = ''
getTime.value = {} getTime.value = {}
activeTimeRange.value = '' // 清除激活状态 activeTimeRange.value = '' // 清除激活状态
selectedMarketPath.value = []
getSelectBy() getSelectBy()
} }
// 今天 // 今天
@ -266,18 +265,43 @@ const handleClick = function (tab, event) {
} }
} }
// 获取地区列表的方法
// 获取地区，修改为级联下拉框
const getMarket = async function () { const getMarket = async function () {
console.log('获取地区adminid', adminData.value)
try { try {
// 发送POST请求 // 发送POST请求
const result = await API({ url: '/general/adminMarkets', data: {
account:adminData.value.account,
} })
const result = await API({
url: '/market/selectMarket',
data: {account: adminData.value.account}
});
// 将响应结果存储到响应式数据中 // 将响应结果存储到响应式数据中
console.log('请求成功', result) console.log('请求成功', result)
// 递归转换树形结构为级联选择器需要的格式
const transformTree = (nodes) => {
return nodes.map(node => {
const children = node.children && node.children.length
? transformTree(node.children)
: null;
// 如果有子节点，添加“全部”选项
if (children) {
children.unshift({
value: `${node.name}_all`, // 唯一标识
label: '全部',
children: null
});
}
return {
value: node.name, //使用地区名称作为值
label: node.name, //显示名称
children
};
});
}
// 存储地区信息 // 存储地区信息
market.value = result.data
console.log('地区', market.value)
market.value = transformTree(result.data)
console.log('转换后的地区树', market.value)
} catch (error) { } catch (error) {
console.log('请求失败', error) console.log('请求失败', error)
} }
@ -378,18 +402,18 @@ const exportExcel = async function () {
const params = { const params = {
refundUser: { refundUser: {
jwcode: refundUser.value.jwcode || '', jwcode: refundUser.value.jwcode || '',
refundModel : refundUser.value.refundModel || '',
refundModel: refundUser.value.refundModel || '',
market: refundUser.value.market || '', market: refundUser.value.market || '',
startTime: refundUser.value.startTime || '', startTime: refundUser.value.startTime || '',
endTime: refundUser.value.endTime || '', endTime: refundUser.value.endTime || '',
goodsName: refundUser.value.goodsName || '', goodsName: refundUser.value.goodsName || '',
}, },
page:getObj.pageNum,
size:total.value
page: getObj.pageNum,
size: total.value
} }
try{
const res = await API({ url: '/export/exportRefund', data: params })
try {
const res = await API({url: '/export/exportRefund', data: params})
if (res.code === 200) { if (res.code === 200) {
ElMessage.success('导出成功') ElMessage.success('导出成功')
} else { } else {
@ -417,7 +441,7 @@ const exportListLoading = ref(false)
const getExportList = async () => { const getExportList = async () => {
exportListLoading.value = true exportListLoading.value = true
try { try {
const result = await API({ url: '/export/export' })
const result = await API({url: '/export/export'})
if (result.code === 200) { if (result.code === 200) {
const filteredData = result.data.filter(item => { const filteredData = result.data.filter(item => {
return item.type === 3; //3表示金币退款列表 return item.type === 3; //3表示金币退款列表
@ -452,7 +476,7 @@ const getTagType = (state) => {
case 1: case 1:
return 'primary'; return 'primary';
case 2: case 2:
return'success';
return 'success';
case 3: case 3:
return 'danger'; return 'danger';
default: default:
@ -467,13 +491,31 @@ const getTagText = (state) => {
case 1: case 1:
return '执行中'; return '执行中';
case 2: case 2:
return'执行完成';
return '执行完成';
case 3: case 3:
return '执行出错'; return '执行出错';
default: default:
return '未知状态'; return '未知状态';
} }
} }
// 存储地区选择变化
const selectedMarketPath = ref([])
//处理地区选择变化
const handleMarketChange = (value) => {
if (value && value.length > 0) {
const lastValue = value[value.length - 1];
let selectedName = lastValue.endsWith('_all')
? lastValue.replace('_all', '')
: lastValue;
// 反向映射
refundUser.value.market = reverseMarketMapping[selectedName] || '';
} else {
refundUser.value.market = '';
}
};
</script> </script>
<template> <template>
@ -483,7 +525,7 @@ const getTagText = (state) => {
<el-row style="margin-bottom: 10px"> <el-row style="margin-bottom: 10px">
<el-col :span="5"> <el-col :span="5">
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" >精网号：</el-text>
<el-text class="mx-1">精网号：</el-text>
<el-input <el-input
v-model="refundUser.jwcode" v-model="refundUser.jwcode"
placeholder="请输入精网号" placeholder="请输入精网号"
@ -495,7 +537,7 @@ const getTagText = (state) => {
<el-col :span="6"> <el-col :span="6">
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" >商品名称：</el-text>
<el-text class="mx-1">商品名称：</el-text>
<el-select <el-select
v-model="refundUser.goodsName" v-model="refundUser.goodsName"
placeholder="请选择商品名称" placeholder="请选择商品名称"
@ -514,27 +556,19 @@ const getTagText = (state) => {
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="head-card-element">
<el-text class="mx-1" >所属地区：</el-text>
<el-select
v-model="refundUser.market"
<el-text class="mx-1" size="large">所属地区：</el-text>
<el-cascader
v-model="selectedMarketPath"
:options="market"
placeholder="请选择所属地区" placeholder="请选择所属地区"
style="width: 180px"
clearable clearable
>
<el-option
v-for="item in market"
:key="item"
:label="item"
:value="item"
style="width:180px"
@change="handleMarketChange"
/> />
</el-select>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" >退款类型：</el-text>
<el-text class="mx-1">退款类型：</el-text>
<el-select <el-select
v-model="refundUser.refundType" v-model="refundUser.refundType"
placeholder="请选择退款类型" placeholder="请选择退款类型"
@ -542,7 +576,7 @@ const getTagText = (state) => {
style="width: 180px" style="width: 180px"
clearable clearable
> >
<!-- todo 这需要改-->
<!-- todo 这需要改-->
<el-option <el-option
v-for="item in refundType" v-for="item in refundType"
:key="item.value" :key="item.value"
@ -556,11 +590,18 @@ const getTagText = (state) => {
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" >退款时间：</el-text>
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"/>
<el-button @click="getToday()" style="margin-left: 10px" :type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
<el-button @click="getYesterday()" style="margin-left: 10px" :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
<el-button @click="get7Days()" style="margin-left: 10px" :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天</el-button>
<el-text class="mx-1">退款时间：</el-text>
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"/>
<el-button @click="getToday()" style="margin-left: 10px"
:type="activeTimeRange === 'today' ? 'primary' : ''"> 今
</el-button>
<el-button @click="getYesterday()" style="margin-left: 10px"
:type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
</el-button>
<el-button @click="get7Days()" style="margin-left: 10px"
:type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天
</el-button>
<el-button type="success" @click="reset()">重置</el-button> <el-button type="success" @click="reset()">重置</el-button>
<el-button type="primary" @click="search()">查询</el-button> <el-button type="primary" @click="search()">查询</el-button>
@ -615,9 +656,13 @@ const getTagText = (state) => {
fixed="left" fixed="left"
width="110px" width="110px"
/> />
<el-table-column prop="market" label="所属地区" width="110px" />
<el-table-column prop="goodsName" label="商品名称" width="110px" show-overflow-tooltip />
<el-table-column prop="refundType" label="退款类型" width="100px" />
<el-table-column prop="market" label="所属地区" width="110px">
<template #default="scope">
{{ marketMapping[scope.row.market] || scope.row.market }}
</template>
</el-table-column>
<el-table-column prop="goodsName" label="商品名称" width="110px" show-overflow-tooltip/>
<el-table-column prop="refundType" label="退款类型" width="100px"/>
<!-- <el-table-column label="金额总数" width="110px"> <!-- <el-table-column label="金额总数" width="110px">
<template #default="scope"> <template #default="scope">
@ -664,7 +709,7 @@ const getTagText = (state) => {
width="160px" width="160px"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column prop="adminName" label="提交人" width="100px" />
<el-table-column prop="adminName" label="提交人" width="100px"/>
<el-table-column <el-table-column
prop="createTime" prop="createTime"
@ -699,7 +744,7 @@ const getTagText = (state) => {
<!-- 导出弹窗 --> <!-- 导出弹窗 -->
<el-dialog v-model="exportListVisible" title="导出列表" width="80%"> <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
<el-table :data="exportList" style="width: 100%" :loading="exportListLoading"> <el-table :data="exportList" style="width: 100%" :loading="exportListLoading">
<el-table-column prop="fileName" label="文件名" />
<el-table-column prop="fileName" label="文件名"/>
<el-table-column prop="state" label="状态"> <el-table-column prop="state" label="状态">
<template #default="scope"> <template #default="scope">
<el-tag :type="getTagType(scope.row.state)" <el-tag :type="getTagType(scope.row.state)"

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

@ -2,11 +2,12 @@
// 这是客户金币余额页面 // 这是客户金币余额页面
import {ref, onMounted, reactive, computed, watch} from 'vue' import {ref, onMounted, reactive, computed, watch} from 'vue'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from 'axios' import axios from 'axios'
import moment from 'moment' import moment from 'moment'
import { ta } from 'element-plus/es/locales.mjs'
import {ta} from 'element-plus/es/locales.mjs'
import API from '@/util/http' import API from '@/util/http'
import {marketMapping, reverseMarketMapping} from "@/utils/marketMap.js";
// 变量 // 变量
//这是获取用户信息的接口 //这是获取用户信息的接口
@ -14,7 +15,7 @@ const adminData = ref({})
const dialogVisible = ref(false) const dialogVisible = ref(false)
const getAdminData = async function () { const getAdminData = async function () {
try { try {
const result = await API({ url: '/admin/userinfo', data: {} })
const result = await API({url: '/admin/userinfo', data: {}})
adminData.value = result adminData.value = result
// console.log('请求成功', result) // console.log('请求成功', result)
console.log('管理员用户信息', adminData.value) console.log('管理员用户信息', adminData.value)
@ -26,32 +27,47 @@ const getAdminData = async function () {
// 定义加载状态，获取地区数据 // 定义加载状态，获取地区数据
const isLoadingmarket = ref(false); const isLoadingmarket = ref(false);
const market = ref([]) const market = ref([])
const getmarket = async () => {
isLoadingmarket.value = true;
// 获取地区，修改为级联下拉框
const getMarket = async function () {
console.log('获取地区adminid', adminData.value)
try { try {
// 发送POST请求
const result = await API({ const result = await API({
url: '/general/adminMarkets',
url: '/market/selectMarket',
data: {account: adminData.value.account} data: {account: adminData.value.account}
}); });
console.log('获取地区数据成功', result)
// 假设后端返回的是字符串数组，转换为 { value, label } 格式
if (Array.isArray(result.data) && typeof result.data[0] === 'string') {
market.value = result.data
.filter(item => item !== null && item !== undefined && item.trim() !== '') // 过滤空值
.map(item => ({ value: item, label: item }));
} else {
market.value = result.data;
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
// 递归转换树形结构为级联选择器需要的格式
const transformTree = (nodes) => {
return nodes.map(node => {
const children = node.children && node.children.length
? transformTree(node.children)
: null;
// 如果有子节点，添加“全部”选项
if (children) {
children.unshift({
value: `${node.name}_all`, // 唯一标识
label: '全部',
children: null
});
} }
return {
value: node.name, //使用地区名称作为值
label: node.name, //显示名称
children
};
});
}
// 存储地区信息
market.value = transformTree(result.data)
console.log('转换后的地区树', market.value)
} catch (error) { } catch (error) {
console.error('获取地区数据失败:', error);
ElMessage.error('获取地区数据失败，请稍后重试');
// 可以提供默认数据
market.value = [];
} finally {
isLoadingmarket.value = false;
console.log('请求失败', error)
} }
};
}
// 充值明细表格 // 充值明细表格
const tableData = ref([]) const tableData = ref([])
@ -107,7 +123,7 @@ const get = async function (val) {
// 发送POST请求 // 发送POST请求
const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数
const requestData = {...getObj.value, user: {...user.value}};//控制台打印请求的参数
console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数 console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数
//console.log('请求参数', requestData); //console.log('请求参数', requestData);
@ -115,7 +131,7 @@ const get = async function (val) {
const result = await API({ const result = await API({
url: '/goldDetail/getGold', url: '/goldDetail/getGold',
method: 'post', method: 'post',
data: { ...getObj.value, user: { ...user.value } }
data: {...getObj.value, user: {...user.value}}
}) })
console.log('响应数据', result) console.log('响应数据', result)
tableData.value = result.data.list tableData.value = result.data.list
@ -193,6 +209,7 @@ const reset = function () {
sortField.value = '' sortField.value = ''
sortOrder.value = '' sortOrder.value = ''
get() get()
selectedMarketPath.value = []
} }
const cellClick = function (row, column) { const cellClick = function (row, column) {
console.log('cellClick', column.label) console.log('cellClick', column.label)
@ -223,7 +240,7 @@ const handleSortChange = (column) => {
onMounted(async function () { onMounted(async function () {
await getAdminData() await getAdminData()
await get() await get()
await getmarket()
await getMarket()
await getExportList() await getExportList()
}) })
const handlePageSizeChange = function (val) { const handlePageSizeChange = function (val) {
@ -236,12 +253,12 @@ const handleCurrentChange = function (val) {
} }
const exportExcel = async function () { const exportExcel = async function () {
const params = { const params = {
user:{
user: {
jwcode: user.value.jwcode || '', jwcode: user.value.jwcode || '',
markets: user.value.markets ||[]
markets: user.value.markets || []
} }
} }
const res = await API({ url: '/goldDetail/exportGold', data: params })
const res = await API({url: '/goldDetail/exportGold', data: params})
if (res.code === 200) { if (res.code === 200) {
ElMessage.success('导出成功') ElMessage.success('导出成功')
} }
@ -263,7 +280,7 @@ const exportListLoading = ref(false)
const getExportList = async () => { const getExportList = async () => {
exportListLoading.value = true exportListLoading.value = true
try { try {
const result = await API({ url: '/export/export' })
const result = await API({url: '/export/export'})
if (result.code === 200) { if (result.code === 200) {
const filteredData = result.data.filter(item => { const filteredData = result.data.filter(item => {
return item.type === 1; //返回type為0即客户金币余额的数据 return item.type === 1; //返回type為0即客户金币余额的数据
@ -320,24 +337,22 @@ const getTagText = (state) => {
return '未知状态'; return '未知状态';
} }
} }
const handleMarketChange = (val) => {
if (!Array.isArray(val)) return
const hasHeadquarters = val.includes('总部')
const hasOther = val.some(item => item !== '总部')
if (hasHeadquarters && hasOther) {
if (val[val.length - 1] === '总部') {
// 用户最后点的是总部，保留总部，清除其他
user.value.markets = ['总部']
ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您保留“总部”')
// 存储地区选择变化
const selectedMarketPath = ref([])
//处理地区选择变化
const handleMarketChange = (value) => {
if (value && value.length > 0) {
const lastValue = value[value.length - 1];
let selectedName = lastValue.endsWith('_all')
? lastValue.replace('_all', '')
: lastValue;
// 反向映射
rechargeUser.value.market = reverseMarketMapping[selectedName] || '';
} else { } else {
// 用户最后点的是其他，保留其他，移除总部
user.value.markets = val.filter(item => item !== '总部')
ElMessage.warning('“总部”与其他地区不可同时选择，系统已为您去除“总部”')
rechargeUser.value.market = '';
} }
}
}
};
</script> </script>
<template> <template>
@ -347,13 +362,18 @@ const handleMarketChange = (val) => {
<div class="head-card"> <div class="head-card">
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" size="large">精网号：</el-text> <el-text class="mx-1" size="large">精网号：</el-text>
<el-input v-model="user.jwcode" style="width: 160px" placeholder="请输入精网号" clearable />
<el-input v-model="user.jwcode" style="width: 160px" placeholder="请输入精网号" clearable/>
</div> </div>
<div class="head-card-element"> <div class="head-card-element">
<el-text class="mx-1" size="large">所属地区：</el-text> <el-text class="mx-1" size="large">所属地区：</el-text>
<el-select v-model="user.markets" placeholder="请选择所属地区" style="width: 180px" clearable multiple @change="handleMarketChange">
<el-option v-for="item in market" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
<el-cascader
v-model="selectedMarketPath"
:options="market"
placeholder="请选择所属地区"
clearable
style="width:180px"
@change="handleMarketChange"
/>
</div> </div>
<el-button type="primary" @click="search()">查询</el-button> <el-button type="primary" @click="search()">查询</el-button>
<el-button @click="reset" type="success">重置</el-button> <el-button @click="reset" type="success">重置</el-button>
@ -370,7 +390,7 @@ const handleMarketChange = (val) => {
<el-card> <el-card>
<div> <div>
金币总数：{{ (goldtotal || 0) / 100 }} 金币总数：{{ (goldtotal || 0) / 100 }}
永久金币：{{(permanentGold || 0) / 100 }}
永久金币：{{ (permanentGold || 0) / 100 }}
免费金币：{{ (freeGold || 0) / 100 }} 免费金币：{{ (freeGold || 0) / 100 }}
任务金币：{{ (taskGold || 0) / 100 }} 任务金币：{{ (taskGold || 0) / 100 }}
</div> </div>
@ -385,16 +405,20 @@ const handleMarketChange = (val) => {
}}</span> }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="姓名" width="120" />
<el-table-column prop="jwcode" label="精网号" width="120" />
<el-table-column prop="market" label="所属地区" width="120" />
<el-table-column prop="name" label="姓名" width="120"/>
<el-table-column prop="jwcode" label="精网号" width="120"/>
<el-table-column prop="market" label="所属地区" width="120">
<template #default="scope">
{{ marketMapping[scope.row.market] || scope.row.market }}
</template>
</el-table-column>
<el-table-column prop="allJb" label="金币总数" width="120" aligh="center"> <el-table-column prop="allJb" label="金币总数" width="120" aligh="center">
<template #default="scope"> <template #default="scope">
<span>{{ <span>{{
((scope.row.currentPermanentGold || 0 ) +
(scope.row.currentFreeJune|| 0 ) +
(scope.row.currentFreeDecember|| 0 ) +
(scope.row.currentTaskGold || 0) ) /100
((scope.row.currentPermanentGold || 0) +
(scope.row.currentFreeJune || 0) +
(scope.row.currentFreeDecember || 0) +
(scope.row.currentTaskGold || 0)) / 100
}}</span> }}</span>
</template> </template>
</el-table-column> </el-table-column>
@ -415,7 +439,7 @@ const handleMarketChange = (val) => {
</el-table-column> </el-table-column>
<el-table-column prop="currentTaskGold" label="任务金币" sortable="custom" width="130"> <el-table-column prop="currentTaskGold" label="任务金币" sortable="custom" width="130">
<template #default="scope"> <template #default="scope">
<span>{{(scope.row.currentTaskGold || 0) / 100 }}</span>
<span>{{ (scope.row.currentTaskGold || 0) / 100 }}</span>
</template> </template>
</el-table-column> </el-table-column>
@ -425,7 +449,7 @@ const handleMarketChange = (val) => {
<template #default> <template #default>
<div> <div>
<div>永久金币：{{ (scope.row.sumPermanentGold || 0) / 100 }}</div> <div>永久金币：{{ (scope.row.sumPermanentGold || 0) / 100 }}</div>
<div>免费金币：{{( (scope.row.sumFreeJune || 0) + (scope.row.sumFreeDecember || 0)) / 100 }}</div>
<div>免费金币：{{ ((scope.row.sumFreeJune || 0) + (scope.row.sumFreeDecember || 0)) / 100 }}</div>
<div>任务金币：{{ (scope.row.sumTaskGold || 0) / 100 }}</div> <div>任务金币：{{ (scope.row.sumTaskGold || 0) / 100 }}</div>
</div> </div>
</template> </template>
@ -447,7 +471,10 @@ const handleMarketChange = (val) => {
<template #default> <template #default>
<div> <div>
<div>永久金币：{{ (scope.row.sumConsumeGold || 0) / 100 }}</div> <div>永久金币：{{ (scope.row.sumConsumeGold || 0) / 100 }}</div>
<div>免费金币：{{ ((scope.row.sumConsumeJune || 0) + (scope.row.sumConsumeDecember || 0)) / 100 }}</div>
<div>免费金币：{{
((scope.row.sumConsumeJune || 0) + (scope.row.sumConsumeDecember || 0)) / 100
}}
</div>
<div>任务金币：{{ (scope.row.sumConsumeJune || 0) / 100 }}</div> <div>任务金币：{{ (scope.row.sumConsumeJune || 0) / 100 }}</div>
</div> </div>
</template> </template>
@ -470,7 +497,8 @@ const handleMarketChange = (val) => {
<!-- 分页 --> <!-- 分页 -->
<div class="pagination" style="margin-top: 20px"> <div class="pagination" style="margin-top: 20px">
<el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]" <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"
layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination> @current-change="handleCurrentChange"></el-pagination>
</div> </div>
</el-card> </el-card>
@ -479,7 +507,7 @@ const handleMarketChange = (val) => {
<el-dialog v-model="exportListVisible" title="导出列表" width="80%"> <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
<el-table :data="exportList" style="width: 100%" :loading="exportListLoading"> <el-table :data="exportList" style="width: 100%" :loading="exportListLoading">
<el-table-column prop="fileName" label="文件名" />
<el-table-column prop="fileName" label="文件名"/>
<el-table-column prop="state" label="状态"> <el-table-column prop="state" label="状态">
<template #default="scope"> <template #default="scope">
<el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'"> <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">

7
src/views/usergold/clientCountDetail.vue
View File

@ -7,6 +7,7 @@ import moment from 'moment'
import API from '@/util/http' import API from '@/util/http'
import {writeFile, utils} from 'xlsx' import {writeFile, utils} from 'xlsx'
import request from "@/util/request.js"; import request from "@/util/request.js";
import {marketMapping} from "../../utils/marketMap.js";
// 标记当前激活的时间范围按钮 // 标记当前激活的时间范围按钮
const activeTimeRange = ref('') const activeTimeRange = ref('')
@ -553,7 +554,11 @@ const handleMarketChange = (val) => {
</el-table-column> </el-table-column>
<el-table-column fixed="left" prop="name" label="姓名" width="150"/> <el-table-column fixed="left" prop="name" label="姓名" width="150"/>
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120"/> <el-table-column fixed="left" prop="jwcode" label="精网号" width="120"/>
<el-table-column prop="market" label="所属地区" width="120"/>
<el-table-column prop="market" label="所属地区" width="120">
<template #default="scope">
{{ marketMapping[scope.row.market] || scope.row.market }}
</template>
</el-table-column>
<el-table-column prop="payPlatform" label="平台信息" width="140"> <el-table-column prop="payPlatform" label="平台信息" width="140">
</el-table-column> </el-table-column>

115
src/views/workspace/index.vue
View File

@ -6,7 +6,9 @@
</el-col> </el-col>
<!-- 最后更新时间 --> <!-- 最后更新时间 -->
<el-col :span="18" style="display: flex; align-items: center; font-size: 18px"> <el-col :span="18" style="display: flex; align-items: center; font-size: 18px">
最后更新时间：{{ workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据' }}
最后更新时间：{{
workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
}}
</el-col> </el-col>
@ -21,21 +23,23 @@
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<div class="card-title">当前金币余量</div> <div class="card-title">当前金币余量</div>
<div>{{ currentGold / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 {{
dailyChange / 100 }}
<div>{{ currentGold / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日
{{
dailyChange / 100
}}
<template v-if="dailyChange > 0"> <template v-if="dailyChange > 0">
<el-icon style="color:red"> <el-icon style="color:red">
<ArrowUpBold />
<ArrowUpBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else-if="dailyChange < 0"> <template v-else-if="dailyChange < 0">
<el-icon style="color:forestgreen"> <el-icon style="color:forestgreen">
<ArrowDownBold />
<ArrowDownBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else> <template v-else>
<el-icon style="color:grey"> <el-icon style="color:grey">
<SemiSelect />
<SemiSelect/>
</el-icon> </el-icon>
</template> </template>
</div> </div>
@ -46,7 +50,9 @@
<div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div> <div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div>
<div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{ <div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{
currentFreeDecember / currentFreeDecember /
100 }}]</div>
100
}}]
</div>
<div>任务金币：{{ currentTask / 100 }}</div> <div>任务金币：{{ currentTask / 100 }}</div>
</div> </div>
</el-card> </el-card>
@ -91,34 +97,34 @@
<el-col class="center-card">周同比:{{ sumWow }}%&nbsp;&nbsp;&nbsp;&nbsp; <el-col class="center-card">周同比:{{ sumWow }}%&nbsp;&nbsp;&nbsp;&nbsp;
<template v-if="sumWow > 0"> <template v-if="sumWow > 0">
<el-icon style="color:red"> <el-icon style="color:red">
<ArrowUpBold />
<ArrowUpBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else-if="sumWow < 0"> <template v-else-if="sumWow < 0">
<el-icon style="color:forestgreen"> <el-icon style="color:forestgreen">
<ArrowDownBold />
<ArrowDownBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else> <template v-else>
<el-icon style="color:grey"> <el-icon style="color:grey">
<SemiSelect />
<SemiSelect/>
</el-icon> </el-icon>
</template> </template>
</el-col> </el-col>
<el-col class="center-card">日环比:{{ sumDaily }}%&nbsp;&nbsp;&nbsp;&nbsp; <el-col class="center-card">日环比:{{ sumDaily }}%&nbsp;&nbsp;&nbsp;&nbsp;
<template v-if="sumDaily > 0"> <template v-if="sumDaily > 0">
<el-icon style="color:red"> <el-icon style="color:red">
<ArrowUpBold />
<ArrowUpBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else-if="sumDaily < 0"> <template v-else-if="sumDaily < 0">
<el-icon style="color:forestgreen"> <el-icon style="color:forestgreen">
<ArrowDownBold />
<ArrowDownBold/>
</el-icon> </el-icon>
</template> </template>
<template v-else> <template v-else>
<el-icon style="color:grey"> <el-icon style="color:grey">
<SemiSelect />
<SemiSelect/>
</el-icon> </el-icon>
</template> </template>
</el-col> </el-col>
@ -143,21 +149,30 @@
<el-col :span="24"> <el-col :span="24">
<el-row> <el-row>
<div style="margin-top:5px">合计&nbsp;&nbsp;&nbsp;&nbsp; <div style="margin-top:5px">合计&nbsp;&nbsp;&nbsp;&nbsp;
永久金币 {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100
永久金币 {{
activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100
}}&nbsp;&nbsp;&nbsp;&nbsp; }}&nbsp;&nbsp;&nbsp;&nbsp;
免费金币 {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100
免费金币 {{
activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100
}}&nbsp;&nbsp;&nbsp;&nbsp; }}&nbsp;&nbsp;&nbsp;&nbsp;
任务金币 {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100
任务金币 {{
activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100
}}&nbsp;&nbsp;&nbsp;&nbsp; }}&nbsp;&nbsp;&nbsp;&nbsp;
</div> </div>
<div @change="handleDatePickerChange"> <div @change="handleDatePickerChange">
<el-button @click="getToday()" label="day" style="margin-left:250px" :type="activeTimeRange === 'today' ? 'primary' : ''">今日</el-button>
<el-button @click="getWeek()" label="week" :type="activeTimeRange === 'week' ? 'primary' : ''">本周</el-button>
<el-button @click="getMonth()" label="month" :type="activeTimeRange === 'month' ? 'primary' : ''">本月</el-button>
<el-button @click="getYear()" label="year" :type="activeTimeRange === 'year' ? 'primary' : ''">本年</el-button>
<el-button @click="getToday()" label="day" style="margin-left:250px"
:type="activeTimeRange === 'today' ? 'primary' : ''">今日
</el-button>
<el-button @click="getWeek()" label="week" :type="activeTimeRange === 'week' ? 'primary' : ''">本周
</el-button>
<el-button @click="getMonth()" label="month" :type="activeTimeRange === 'month' ? 'primary' : ''">本月
</el-button>
<el-button @click="getYear()" label="year" :type="activeTimeRange === 'year' ? 'primary' : ''">本年
</el-button>
</div> </div>
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间" <el-date-picker v-model="dateRange" type="datetimerange" range-separator="→" start-placeholder="开始时间"
end-placeholder="结束时间" style="margin-left:10px" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
end-placeholder="结束时间" style="margin-left:10px" format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"/>
<el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button> <el-button type="primary" style="margin-left: 5px" @click="getChartData">查询</el-button>
</el-row> </el-row>
</el-col> </el-col>
@ -167,9 +182,9 @@
<el-col :span="18"> <el-col :span="18">
<div class="bar"> <div class="bar">
<!-- <div v-if="chartLoading" class="loading-overlay">-->
<!-- <div class="loading-spinner"></div>-->
<!-- </div>-->
<!-- <div v-if="chartLoading" class="loading-overlay">-->
<!-- <div class="loading-spinner"></div>-->
<!-- </div>-->
<div ref="chartRef" style="width: 100%; height: 400px"></div> <div ref="chartRef" style="width: 100%; height: 400px"></div>
</div> </div>
@ -185,7 +200,11 @@
</el-select> </el-select>
<el-table :data="tableData" height="320px"> <el-table :data="tableData" height="320px">
<el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column> <el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column>
<el-table-column prop="market" label="地区" align="center"></el-table-column>
<el-table-column prop="market" label="地区" align="center">
<template #default="scope">
<span>{{ marketMapping[scope.row.market] || scope.row.market }}</span>
</template>
</el-table-column>
<el-table-column prop="coinAmount" label="金币数量" align="center"> <el-table-column prop="coinAmount" label="金币数量" align="center">
<template #default="{ row }"> <template #default="{ row }">
{{ row.coinAmount.toLocaleString() }} {{ row.coinAmount.toLocaleString() }}
@ -202,13 +221,15 @@
<script setup> <script setup>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
import {ref, onMounted, nextTick, watch, onUnmounted} from 'vue'
import API from '@/util/http' import API from '@/util/http'
import { ElMessage } from 'element-plus'
import {ElMessage} from 'element-plus'
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import utc from 'dayjs-plugin-utc' import utc from 'dayjs-plugin-utc'
dayjs.extend(utc) dayjs.extend(utc)
import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue'
import {ArrowUpBold, ArrowDownBold, SemiSelect} from '@element-plus/icons-vue'
import {marketMapping} from "@/utils/marketMap.js";
// 地区数据 // 地区数据
const markets = ref([]) const markets = ref([])
// 图表相关 // 图表相关
@ -284,7 +305,7 @@ const destroyChart = () => {
} }
window.removeEventListener('resize', handleResize) window.removeEventListener('resize', handleResize)
} }
const formatDate = function(date) {
const formatDate = function (date) {
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');
@ -297,7 +318,7 @@ const formatDate = function(date) {
const getToday = function () { const getToday = function () {
const today = dayjs() const today = dayjs()
const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss') const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1,'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
dateRange.value = [startTime, endTime] dateRange.value = [startTime, endTime]
console.log('看看dateRange', dateRange.value) console.log('看看dateRange', dateRange.value)
activeTimeRange.value = 'today' // 标记当前激活状态 activeTimeRange.value = 'today' // 标记当前激活状态
@ -307,8 +328,8 @@ const getToday = function () {
// 本周 // 本周
const getWeek = function () { const getWeek = function () {
const today = dayjs() const today = dayjs()
const startTime = (today.startOf('week').add(1,'day')).format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1,'week').startOf('week').add(1,'day').format('YYYY-MM-DD HH:mm:ss')
const startTime = (today.startOf('week').add(1, 'day')).format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
dateRange.value = [startTime, endTime] dateRange.value = [startTime, endTime]
console.log('看看dateRange', dateRange.value) console.log('看看dateRange', dateRange.value)
activeTimeRange.value = 'week' // 标记当前激活状态 activeTimeRange.value = 'week' // 标记当前激活状态
@ -319,7 +340,7 @@ const getWeek = function () {
const getMonth = function () { const getMonth = function () {
const today = dayjs() const today = dayjs()
const startTime = today.startOf('month').format('YYYY-MM-DD HH:mm:ss') const startTime = today.startOf('month').format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1,'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
dateRange.value = [startTime, endTime] dateRange.value = [startTime, endTime]
console.log('看看dateRange', dateRange.value) console.log('看看dateRange', dateRange.value)
activeTimeRange.value = 'month' // 标记当前激活状态 activeTimeRange.value = 'month' // 标记当前激活状态
@ -330,7 +351,7 @@ const getMonth = function () {
const getYear = function () { const getYear = function () {
const today = dayjs() const today = dayjs()
const startTime = today.startOf('year').format('YYYY-MM-DD HH:mm:ss') const startTime = today.startOf('year').format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1,'year').startOf('year').format('YYYY-MM-DD HH:mm:ss')
const endTime = today.add(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss')
dateRange.value = [startTime, endTime] dateRange.value = [startTime, endTime]
console.log('看看dateRange', dateRange.value) console.log('看看dateRange', dateRange.value)
activeTimeRange.value = 'year' // 标记当前激活状态 activeTimeRange.value = 'year' // 标记当前激活状态
@ -424,7 +445,7 @@ const processData = (data) => {
// 获取市场列表 // 获取市场列表
const getMarkets = async () => { const getMarkets = async () => {
console.log("adminData",adminData.value.account)
console.log("adminData", adminData.value.account)
try { try {
const response = await API({ const response = await API({
url: '/general/adminMarkets', url: '/general/adminMarkets',
@ -454,7 +475,7 @@ const getChartData = async () => {
} }
// 本年 // 本年
if(!dateRange.value || dateRange.value.length === 0){
if (!dateRange.value || dateRange.value.length === 0) {
getYear() getYear()
} }
@ -590,7 +611,7 @@ const updateChart = (chartData) => {
initChart() initChart()
} }
chartLoading.value = true chartLoading.value = true
try{
try {
let series = [] let series = []
let legend = [] let legend = []
@ -601,7 +622,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargePermanent, data: chartData.rechargePermanent,
itemStyle: { color: '#5470c6' },
itemStyle: {color: '#5470c6'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -609,7 +630,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeFree, data: chartData.rechargeFree,
itemStyle: { color: '#91cc75' },
itemStyle: {color: '#91cc75'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -617,7 +638,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'recharge', stack: 'recharge',
data: chartData.rechargeTask, data: chartData.rechargeTask,
itemStyle: { color: '#fac858' },
itemStyle: {color: '#fac858'},
barWidth: 30 barWidth: 30
} }
] ]
@ -629,7 +650,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumePermanent, data: chartData.consumePermanent,
itemStyle: { color: '#5470c6' },
itemStyle: {color: '#5470c6'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -637,7 +658,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeFree, data: chartData.consumeFree,
itemStyle: { color: '#91cc75' },
itemStyle: {color: '#91cc75'},
barWidth: 30 barWidth: 30
}, },
{ {
@ -645,7 +666,7 @@ const updateChart = (chartData) => {
type: 'bar', type: 'bar',
stack: 'consume', stack: 'consume',
data: chartData.consumeTask, data: chartData.consumeTask,
itemStyle: { color: '#fac858' },
itemStyle: {color: '#fac858'},
barWidth: 30 barWidth: 30
} }
] ]
@ -678,7 +699,7 @@ const updateChart = (chartData) => {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: markets.value,
data: markets.value.map(m => marketMapping[m] || m),
axisLabel: { axisLabel: {
interval: 0, interval: 0,
rotate: 30 rotate: 30
@ -726,7 +747,7 @@ const handleTabChange = () => {
const getAdminData = async function () { const getAdminData = async function () {
try { try {
const result = await API({ url: '/admin/userinfo', data: {} })
const result = await API({url: '/admin/userinfo', data: {}})
adminData.value = result adminData.value = result
console.log('用户信息', adminData.value) console.log('用户信息', adminData.value)
} catch (error) { } catch (error) {
@ -736,10 +757,10 @@ const getAdminData = async function () {
// 获取卡片数据 // 获取卡片数据
const getCardData = async () => { const getCardData = async () => {
try { try {
const response = await API({ url: '/workbench/getCard', data: {} })
const response = await API({url: '/workbench/getCard', data: {}})
workDataUpdateTime.value = response.updateTime workDataUpdateTime.value = response.updateTime
// 周同比 // 周同比
sumWow.value = response.sumWow .toFixed(2)
sumWow.value = response.sumWow.toFixed(2)
// 日环比 // 日环比
sumDaily.value = response.sumDaily.toFixed(2) sumDaily.value = response.sumDaily.toFixed(2)

Write Preview
Loading…
Cancel
Save