Compare commits
No commits in common. 'dev' and 'activity_recharge_detail_audit_workspace_hxl' have entirely different histories.
dev
...
activity_r
-
1gold-system/.env.development
-
1gold-system/.env.production
-
1gold-system/.env.test
-
38gold-system/README.md
-
5061gold-system/package-lock.json
-
45gold-system/package.json
-
13gold-system/src/api/index.js
-
BINgold-system/src/assets/动漫美女.png
-
BINgold-system/src/assets/韩信.png
-
34gold-system/src/main.ts
-
101gold-system/src/router/index.js
-
12gold-system/src/store/area.js
-
26gold-system/src/util/http.js
-
44gold-system/src/util/request.js
-
921gold-system/src/views/audit/rechargeAudit.vue
-
871gold-system/src/views/audit/refundAudit.vue
-
583gold-system/src/views/consume/addConsume.vue
-
587gold-system/src/views/consume/allConsume.vue
-
210gold-system/src/views/goldBeen/addGoldenBeen.vue
-
234gold-system/src/views/goldBeen/goldenBeenBalance.vue
-
307gold-system/src/views/goldBeen/goldenBeenConsum.vue
-
486gold-system/src/views/goldBeen/goldenBeenDetail.vue
-
494gold-system/src/views/goldBeen/onLineDetail.vue
-
375gold-system/src/views/index.vue
-
225gold-system/src/views/login.vue
-
809gold-system/src/views/managerecharge/rate.vue
-
24gold-system/src/views/noPermissionPage.vue
-
902gold-system/src/views/permissions/index.vue
-
1592gold-system/src/views/recharge/addRecharge.vue
-
793gold-system/src/views/recharge/adminRecharge.vue
-
695gold-system/src/views/recharge/allRecharge.vue
-
535gold-system/src/views/refund/addRefund.vue
-
721gold-system/src/views/refund/allRefund.vue
-
840gold-system/src/views/usergold/index.vue
-
481gold-system/src/views/usergoldInfo/index.vue
-
1661gold-system/src/views/workspace/index.vue
-
140gold-system/src/views/z.vue
-
4949gold-system/stats.html
-
1gold-system/tsconfig.tsbuildinfo
-
70gold-system/vite.config.ts
-
0vue/gold-system/.gitignore
-
0vue/gold-system/.vscode/extensions.json
-
23vue/gold-system/README.md
-
10vue/gold-system/index.html
-
1704vue/gold-system/package-lock.json
-
28vue/gold-system/package.json
-
0vue/gold-system/public/vite.svg
-
0vue/gold-system/src/App.vue
-
9vue/gold-system/src/api/index.js
-
0vue/gold-system/src/assets/background.jpg
-
0vue/gold-system/src/assets/css/common.css
-
0vue/gold-system/src/assets/vue.svg
-
0vue/gold-system/src/assets/金币管理系统logo.png
-
15vue/gold-system/src/main.ts
-
54vue/gold-system/src/router/index.js
-
0vue/gold-system/src/style.css
-
42vue/gold-system/src/util/http.js
-
716vue/gold-system/src/views/audit/rechargeAudit.vue
-
689vue/gold-system/src/views/audit/refundAudit.vue
-
384vue/gold-system/src/views/consume/addConsume.vue
-
437vue/gold-system/src/views/consume/allConsume.vue
-
195vue/gold-system/src/views/index.vue
-
126vue/gold-system/src/views/login.vue
-
424vue/gold-system/src/views/managerecharge/activity.vue
-
603vue/gold-system/src/views/managerecharge/rate.vue
-
440vue/gold-system/src/views/recharge/addRecharge.vue
-
497vue/gold-system/src/views/recharge/adminRecharge.vue
-
404vue/gold-system/src/views/recharge/allRecharge.vue
-
412vue/gold-system/src/views/refund/addRefund.vue
-
511vue/gold-system/src/views/refund/allRefund.vue
-
329vue/gold-system/src/views/usergold/index.vue
-
1113vue/gold-system/src/views/workspace/index.vue
-
104vue/gold-system/src/views/z.vue
-
0vue/gold-system/src/vite-env.d.ts
-
23vue/gold-system/tsconfig.app.json
-
0vue/gold-system/tsconfig.json
-
14vue/gold-system/tsconfig.node.json
-
8vue/gold-system/vite.config.ts
@ -1 +0,0 @@ |
|||
VITE_API_BASE='http://54.251.137.151:10704/' |
|||
@ -1 +0,0 @@ |
|||
VITE_API_BASE='http://54.251.137.151:10702/' |
|||
@ -1 +0,0 @@ |
|||
VITE_API_BASE='http://54.251.137.151:10704/' |
|||
@ -1,38 +0,0 @@ |
|||
# Vue 3 + TypeScript + Vite |
|||
|
|||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
|||
|
|||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
|||
|
|||
npm install 下载依赖包 |
|||
|
|||
npm run dev 启动项目 |
|||
|
|||
npm install vue-router 下载 vue-router 组件 |
|||
|
|||
npm install axios 下载 axios 组件 |
|||
|
|||
npm install element-plus --save 下载 element-plus 组件 |
|||
|
|||
npm install @element-plus/icons-vue 下载 element-plus 图标库 |
|||
|
|||
npm install vue-icons-plus --save 下载外部图标库 |
|||
|
|||
npm install echarts 安装 echarts 组件 |
|||
|
|||
npm install moment 安装 moment 组件 |
|||
|
|||
npm install mathjs 安装 mathjs 组件,解决数据计算问题 |
|||
|
|||
npm install xlsx 安装 xlsx 组件,解决 excel 文件读取问题 |
|||
|
|||
npm install vue-json-excel 安装导出 excel 组件 |
|||
|
|||
npm install lodash 安装 lodash 组件,解决数据处理问题 |
|||
|
|||
npm install vite-plugin-lazy-import -D 安装按需加载组件 |
|||
|
|||
npm install vxe-pc-ui@4.3.66 vxe-table@4.10.2 vxe-utils@4.1.11 安装 vxe 组件 |
|||
|
|||
npm install --save-dev @types/node 安装 typescript 声明文件 |
|||
npm install -g http-server 安装 http-server 组件,模拟服务器运行 |
|||
5061
gold-system/package-lock.json
File diff suppressed because it is too large
View File
@ -1,45 +0,0 @@ |
|||
{ |
|||
"name": "gold-system", |
|||
"private": true, |
|||
"version": "0.0.0", |
|||
"type": "module", |
|||
"sideEffects": false, |
|||
"scripts": { |
|||
"dev": "vite --host 0.0.0.0", |
|||
"build:test": "vite build --mode test", |
|||
"build:prod": "vite build --mode production", |
|||
"preview": "vite preview", |
|||
"serve": "vite - service serve --host 0.0.0.0 --port 8080" |
|||
}, |
|||
"dependencies": { |
|||
"@element-plus/icons-vue": "^2.3.1", |
|||
"axios": "^1.7.8", |
|||
"echarts": "^5.5.1", |
|||
"element-plus": "^2.8.8", |
|||
"lodash": "^4.17.21", |
|||
"mathjs": "^14.0.1", |
|||
"moment": "^2.30.1", |
|||
"pinia": "^3.0.2", |
|||
"vue": "^3.5.12", |
|||
"vue-icons-plus": "^0.1.7", |
|||
"vue-json-excel": "^0.3.0", |
|||
"vue-router": "^4.5.0", |
|||
"vxe-pc-ui": "^4.3.66", |
|||
"vxe-table": "^4.10.2", |
|||
"xlsx": "^0.18.5" |
|||
}, |
|||
"devDependencies": { |
|||
"@types/node": "^22.10.5", |
|||
"@types/vue": "^2.0.0", |
|||
"@vitejs/plugin-legacy": "^6.0.2", |
|||
"@vitejs/plugin-vue": "^5.1.4", |
|||
"file-saver": "^2.0.5", |
|||
"rollup-plugin-visualizer": "^5.14.0", |
|||
"sass": "^1.86.3", |
|||
"terser": "^5.38.1", |
|||
"typescript": "~5.6.2", |
|||
"vite": "^6.1.0", |
|||
"vite-plugin-lazy-import": "^1.0.7", |
|||
"vue-tsc": "^2.1.8" |
|||
} |
|||
} |
|||
@ -1,13 +0,0 @@ |
|||
import { pa } from 'element-plus/es/locales.mjs'; |
|||
import http from '../util/http.js'; |
|||
|
|||
const API={ |
|||
post: function(url,data){ |
|||
return http({url:url,method:'post',data:data}) |
|||
}, |
|||
postN: function(url,params){ |
|||
return http({url:url,method:'post',params:params}) |
|||
}, |
|||
}; |
|||
|
|||
export default API; |
|||
|
Before Width: 263 | Height: 181 | Size: 95 KiB |
|
Before Width: 256 | Height: 180 | Size: 96 KiB |
@ -1,34 +0,0 @@ |
|||
import { createApp } from 'vue' |
|||
import App from './App.vue' |
|||
import router from './router' |
|||
import ElementPlus from 'element-plus' |
|||
import zhCn from 'element-plus/es/locale/lang/zh-cn' |
|||
import 'element-plus/dist/index.css' |
|||
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
|||
import './assets/css/common.css' // 引入公共CSS文件
|
|||
import JsonExcel from 'vue-json-excel' |
|||
import { createPinia } from 'pinia' |
|||
import VxeUI from 'vxe-pc-ui' |
|||
import 'vxe-pc-ui/lib/style.css' |
|||
import VxeUITable from 'vxe-table' |
|||
import 'vxe-table/lib/style.css' |
|||
|
|||
const a = createApp(App) |
|||
|
|||
// 全局注册 ElementPlus 图标
|
|||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
|||
a.component(key, component) |
|||
} |
|||
|
|||
// 使用 ElementPlus 和路由器
|
|||
a.use(ElementPlus, { |
|||
locale: zhCn |
|||
}) |
|||
.use(router) |
|||
.use(VxeUI) |
|||
.use(VxeUITable) |
|||
.use(createPinia()) |
|||
.mount('#app') |
|||
|
|||
// 注册 JsonExcel 组件
|
|||
a.component('downloadExcel', JsonExcel) |
|||
@ -1,101 +0,0 @@ |
|||
import { createRouter, createWebHashHistory } from 'vue-router'; |
|||
|
|||
const router = createRouter({ |
|||
history: createWebHashHistory(), |
|||
routes: [ |
|||
{ path: '/login', name: "login", component: () => import("../views/login.vue") }, |
|||
{ path: '/', redirect: "/login" }, |
|||
{ path: '/test', component: () => import("../views/z.vue") }, |
|||
{ |
|||
meta: { requireAuth: true }, |
|||
path: '/index', component: () => import("../views/index.vue"), |
|||
children: [ |
|||
|
|||
// 工作台
|
|||
{ path: '/workspace/:area?', name: "workspace", component: () => import("../views/workspace/index.vue") }, |
|||
// 充值审核
|
|||
{ path: '/rechargeAudit', name: "rechargeAudit", component: () => import("../views/audit/rechargeAudit.vue") }, |
|||
// 退款审核
|
|||
{ path: '/refundAudit', name: "refundAudit", component: () => import("../views/audit/refundAudit.vue") }, |
|||
// 新增消费
|
|||
{ path: '/addConsume', name: "addConsume", component: () => import("../views/consume/addConsume.vue") }, |
|||
// 所有消费明细
|
|||
{ path: '/allConsume', name: "allConsume", component: () => import("../views/consume/allConsume.vue") }, |
|||
// 活动管理
|
|||
{ path: '/activity', name: "activity", component: () => import("../views/managerecharge/activity.vue") }, |
|||
// 汇率管理
|
|||
{ path: '/rate', name: "rate", component: () => import("../views/managerecharge/rate.vue") }, |
|||
// 新增充值
|
|||
{ path: '/addRecharge', name: "addRecharge", component: () => import("../views/recharge/addRecharge.vue") }, |
|||
// 客户充值明细
|
|||
{ path: '/adminRecharge', name: "adminRecharge", component: () => import("../views/recharge/adminRecharge.vue") }, |
|||
// 所有充值明细
|
|||
{ path: '/allRecharge', name: "allRecharge", component: () => import("../views/recharge/allRecharge.vue") }, |
|||
// 新增退款
|
|||
{ path: '/addRefund', name: "addRefund", component: () => import("../views/refund/addRefund.vue") }, |
|||
// 退款明细
|
|||
{ path: '/allRefund', name: "allRefund", component: () => import("../views/refund/allRefund.vue") }, |
|||
// 客户金币明细
|
|||
{ path: '/usergold', name: "usergold", component: () => import("../views/usergold/index.vue") }, |
|||
// 客户金币余额
|
|||
{ path: '/usergoldInfo', name: "usergoldInfo", component: () => import("../views/usergoldInfo/index.vue") }, |
|||
// 权限管理
|
|||
{ path: '/permissions', name: "permissions", component: () => import("../views/permissions/index.vue") }, |
|||
// 没有权限
|
|||
{ path: '/noPermission', name: "noPermission", component: () => import("../views/noPermissionPage.vue") }, |
|||
//金豆充值
|
|||
{ path: '/addGoldenBeen', name: "addGoldenBeen", component: () => import("../views/goldBeen/addGoldenBeen.vue") }, |
|||
//金豆余额
|
|||
{ path: '/goldenBeenBalance', name: "goldenBeenBalance", component: () => import("../views/goldBeen/goldenBeenBalance.vue") }, |
|||
//金豆充值明细
|
|||
{ path: '/goldenBeenDetail', name: "goldenBeenDetail", component: () => import("../views/goldBeen/goldenBeenDetail.vue") }, |
|||
//线上充值明细
|
|||
{ path: '/onLineDetail', name: "onLineDetail", component: () => import("../views/goldBeen/onLineDetail.vue") }, |
|||
//金豆消费明细
|
|||
{ path: '/goldenBeenConsum', name: "goldenBeenConsum", component: () => import("../views/goldBeen/goldenBeenConsum.vue") } |
|||
] |
|||
}, |
|||
|
|||
] |
|||
}); |
|||
|
|||
router.beforeEach((to, from, next) => { |
|||
const token = localStorage.getItem("token"); |
|||
const permission = localStorage.getItem("permission"); |
|||
if (to.name != "login" && !token) { |
|||
next({ name: "login" }); |
|||
} else { |
|||
if (permission == "4" && to.name != "noPermission") { |
|||
next({ name: "noPermission" }); |
|||
} else if (permission == "3") { |
|||
if (to.name == "addConsume" || to.name == "allConsume" |
|||
|| to.name == "addRecharge" || to.name == "adminRecharge" || to.name == "allRecharge" |
|||
|| to.name == "addRefund" || to.name == "allRefund" |
|||
|| to.name == "permissions") { |
|||
next({ name: "workspace" }); |
|||
} else { |
|||
next(); |
|||
} |
|||
} else if (permission == '2') { |
|||
if (to.name == "rechargeAudit" || to.name == "refundAudit" |
|||
|| to.name == "activity" || to.name == "rate" |
|||
|| to.name == "permissions") { |
|||
next({ name: "workspace" }) |
|||
} else { |
|||
next(); |
|||
} |
|||
} else if (permission == '5') { |
|||
if (to.name == "permissions") { |
|||
next({ name: "workspace" }) |
|||
} else { |
|||
next(); |
|||
} |
|||
} |
|||
else { |
|||
next(); |
|||
} |
|||
|
|||
} |
|||
}) |
|||
|
|||
export default router; |
|||
@ -1,12 +0,0 @@ |
|||
import { defineStore } from 'pinia' |
|||
|
|||
export const useAreaStore = defineStore('area', { |
|||
state: () => ({ |
|||
currentArea: '全部', |
|||
}), |
|||
actions: { |
|||
updateArea(newVal) { |
|||
this.currentArea = newVal |
|||
}, |
|||
}, |
|||
}) |
|||
@ -1,26 +0,0 @@ |
|||
import request from './request' |
|||
|
|||
export default function(options) { |
|||
const { method = 'post', url, data = {}, params = {}, headers = {} } = options |
|||
|
|||
return request({ |
|||
method, |
|||
url, |
|||
data, |
|||
params, |
|||
headers |
|||
}) |
|||
.then(({ status, data, statusText }) => { |
|||
if (status === 200) { |
|||
return data |
|||
} else { |
|||
throw new Error(statusText) |
|||
} |
|||
}) |
|||
.catch(error => { |
|||
if (error?.needsLogin) { |
|||
return { needsLogin: true } |
|||
} |
|||
return Promise.reject(error) |
|||
}) |
|||
} |
|||
@ -1,44 +0,0 @@ |
|||
import axios from 'axios' |
|||
const service = axios.create({ |
|||
baseURL: import.meta.env.VITE_API_BASE, |
|||
timeout: 10000, |
|||
headers: { |
|||
'Content-Type': 'application/json' |
|||
}, |
|||
// 设置默认请求方法为 POST
|
|||
}) |
|||
|
|||
// 请求拦截器
|
|||
service.interceptors.request.use(config => { |
|||
const token = localStorage.getItem('token') |
|||
if (token) { |
|||
if (config.data) { |
|||
config.data.token = token; |
|||
} else { |
|||
config.data = { token }; |
|||
} |
|||
// config.headers.Authorization = `${token}`
|
|||
} |
|||
return config |
|||
}, error => { |
|||
return Promise.reject(error) |
|||
}) |
|||
|
|||
// 响应拦截器
|
|||
service.interceptors.response.use( |
|||
response => { |
|||
return response |
|||
}, |
|||
error => { |
|||
// const { response } = error
|
|||
// if (response && response.status === 401) {
|
|||
// const machineId = localStorage.getItem('machineId')
|
|||
// localStorage.removeItem('token')
|
|||
// window.location.href = `/login?machineId=${machineId}`
|
|||
// return Promise.resolve({ needsLogin: true })
|
|||
// }
|
|||
return Promise.reject(error) |
|||
} |
|||
) |
|||
|
|||
export default service |
|||
@ -1,921 +0,0 @@ |
|||
<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 request from '@/util/http' |
|||
import moment from 'moment' |
|||
import API from '../../api/index.js' |
|||
// 变量 |
|||
|
|||
//这是获取用户信息的接口 |
|||
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([]) |
|||
// 搜索====================================== |
|||
// 搜索rechargeVo |
|||
const rechargeVo = ref({ |
|||
rechargeWay: '客服充值' |
|||
}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索活动列表 |
|||
const activity = ref([]) |
|||
// 所有信息 |
|||
const allData = ref([]) |
|||
// 搜索地区列表 |
|||
const area = ref([]) |
|||
|
|||
// 编辑====================================== |
|||
// 驳回弹出框 |
|||
const rejectVisible = ref(false) |
|||
// 驳回对象 |
|||
const rejectObj = ref({}) |
|||
// 通过对象 |
|||
const passObj = ref({}) |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref('all') |
|||
|
|||
// 支付方式选项 |
|||
const payWay = [ |
|||
{ |
|||
value: '微信', |
|||
label: '微信' |
|||
}, |
|||
{ |
|||
value: '支付宝', |
|||
label: '支付宝' |
|||
}, |
|||
{ |
|||
value: '银联', |
|||
label: '银联' |
|||
}, |
|||
{ |
|||
value: '信用卡', |
|||
label: '信用卡' |
|||
}, |
|||
{ |
|||
value: '借记卡', |
|||
label: '借记卡' |
|||
} |
|||
] |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 2) * 60 + "px"; |
|||
// }); |
|||
|
|||
// 表单验证ref |
|||
const Ref = ref(null) |
|||
|
|||
// 方法 |
|||
// 合计数存储 |
|||
// 统计合计数 |
|||
const trueGold = ref(0) |
|||
const trueCount = ref(0) |
|||
const trueRGold = ref(0) |
|||
const trueFGold = ref(0) |
|||
// 待审核条数 |
|||
const pendingCount = ref(0) |
|||
// 待审核金币数 |
|||
const pendingGold = ref(0) |
|||
const pendingRGold = ref(0) |
|||
const pendingFGold = ref(0) |
|||
// 已通过条数 |
|||
const approvedCount = ref(0) |
|||
// 已通过金币数 |
|||
const approvedGold = ref(0) |
|||
const approvedRGold = ref(0) |
|||
const approvedFGold = ref(0) |
|||
// 已驳回条数 |
|||
const rejectedCount = 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.startDate != '' && getTime.value.endDate != '') { |
|||
rechargeVo.value.startDate = getTime.value[0] |
|||
rechargeVo.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = '' |
|||
rechargeVo.value.endDate = '' |
|||
} |
|||
rechargeVo.value.sortField = sortField.value |
|||
rechargeVo.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/recharge/recharge', |
|||
data: { |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize, |
|||
rechargeVo: { ...rechargeVo.value } |
|||
} |
|||
}) |
|||
// 合计数的接口 |
|||
// 复制一份 rechargeVo.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = { ...rechargeVo.value } |
|||
delete detailWithoutSort.sortField |
|||
delete detailWithoutSort.sortOrder |
|||
delete detailWithoutSort.status |
|||
const result2 = await request({ |
|||
url: '/recharge/recharge/RechargeA', |
|||
data: detailWithoutSort |
|||
}) |
|||
// 做一个判断,如果result2.data[i].flag="待审核",那么 totalData.value = result2.data[i],否则就赋值为0 |
|||
// 统计合计数 |
|||
if (result2.data) { |
|||
result2.data.forEach((item) => { |
|||
switch (item.auditStatus) { |
|||
case '待审核': |
|||
// 若 item.raudit 为空则赋值为 0 |
|||
pendingCount.value = item.raudit || 0 |
|||
// 若 item.sumRaudit 为空则赋值为 0 |
|||
pendingGold.value = item.sumRaudit || 0 |
|||
pendingRGold.value = item.sumRaudit1 || 0 |
|||
pendingFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
case '已通过': |
|||
approvedCount.value = item.raudit || 0 |
|||
approvedGold.value = item.sumRaudit || 0 |
|||
approvedRGold.value = item.sumRaudit1 || 0 |
|||
approvedFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
case '已驳回': |
|||
rejectedCount.value = item.raudit || 0 |
|||
rejectedGold.value = item.sumRaudit || 0 |
|||
rejectedRGold.value = item.sumRaudit1 || 0 |
|||
rejectedFGold.value = item.sumRaudit2 || 0 |
|||
break |
|||
} |
|||
}) |
|||
} |
|||
|
|||
trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value |
|||
trueCount.value = |
|||
pendingCount.value + approvedCount.value + rejectedCount.value |
|||
trueRGold.value = |
|||
pendingRGold.value + approvedRGold.value + rejectedRGold.value |
|||
trueFGold.value = |
|||
pendingFGold.value + approvedFGold.value + rejectedFGold.value |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
console.log('这是分页', getObj.value) |
|||
// 存储表格数据 |
|||
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.jwcode |
|||
delete rechargeVo.value.payWay |
|||
delete rechargeVo.value.area |
|||
delete rechargeVo.value.startDate |
|||
delete rechargeVo.value.endDate |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const 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') |
|||
trueCount.value = pendingCount.value |
|||
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() |
|||
console.log('adminPass') |
|||
trueCount.value = approvedCount.value |
|||
trueGold.value = approvedGold.value |
|||
trueRGold.value = approvedRGold.value |
|||
trueFGold.value = approvedFGold.value |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = async function () { |
|||
rechargeVo.value.status = 2 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminReject') |
|||
trueCount.value = rejectedCount.value |
|||
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 request({ |
|||
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 request({ |
|||
url: '/recharge/user/search', |
|||
data: {} |
|||
}) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储地区信息 |
|||
area.value = result.data |
|||
console.log('地区', area.value) |
|||
} 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) |
|||
) { |
|||
console.log('输入的数字合法') |
|||
getObj.value.pageNum = parseInt(getObj.value.pageNum) |
|||
get() |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
// 编辑==================================== |
|||
// 通过按钮 |
|||
const pass = function (row) { |
|||
// 通过初始化 |
|||
passObj.value = row |
|||
passObj.value.adminId = adminData.value.adminId |
|||
passObj.value.auditId = row.auditId |
|||
passObj.value.status = 1 |
|||
passObj.value.rechargeId = row.rechargeId |
|||
passObj.value.detailId = row.detailId |
|||
passObj.value.jwcode = row.jwcode |
|||
passObj.value.paidGold = row.paidGold |
|||
passObj.value.freeGold = row.freeGold |
|||
passObj.value.adminName = adminData.value.adminName |
|||
|
|||
console.log('通过对象', passObj.value) |
|||
} |
|||
|
|||
// 通过确认 |
|||
const passConfirm = async function () { |
|||
try { |
|||
console.log('通过对象', passObj.value) |
|||
// 发送POST请求 |
|||
// passObj.value.flag = 0; |
|||
const result = await request({ |
|||
url: '/audit/audit/goldedit', |
|||
data: passObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 刷新表格数据 |
|||
get() |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'success', |
|||
message: '通过成功!' |
|||
}) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 打开驳回弹出框 |
|||
const openRejectVisible = function () { |
|||
rejectVisible.value = true |
|||
} |
|||
// 关闭驳回弹出框 |
|||
const closeRejectVisible = function () { |
|||
rejectVisible.value = false |
|||
} |
|||
// 驳回按钮 |
|||
const reject = function (row) { |
|||
// 驳回初始化 |
|||
rejectObj.value.adminId = adminData.value.adminId |
|||
rejectObj.value.auditId = row.auditId |
|||
rejectObj.value.status = 2 |
|||
rejectObj.value.reson = '' |
|||
rejectObj.value.rechargeId = row.rechargeId |
|||
rejectObj.value.detailId = row.detailId |
|||
console.log('驳回对象', rejectObj.value) |
|||
openRejectVisible() |
|||
} |
|||
// 驳回确认 |
|||
const rejectConfirm = async function () { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
try { |
|||
console.log('驳回对象', rejectObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/audit/audit/goldedit', |
|||
data: rejectObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 刷新表格数据 |
|||
get() |
|||
// 关闭弹出框 |
|||
closeRejectVisible() |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'success', |
|||
message: '驳回成功!' |
|||
}) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 表单验证 |
|||
|
|||
const rules = reactive({ |
|||
reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }] |
|||
}) |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
await getActivity() |
|||
await get() |
|||
await getArea() |
|||
}) |
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
// 处理排序事件 |
|||
const handleSortChange = (column) => { |
|||
console.log('排序字段:', column.prop) |
|||
console.log('排序方式:', column.order) |
|||
if (column.prop === 'rechargeGold') { |
|||
sortField.value = 'recharge_gold' |
|||
} else if (column.prop === 'freeGold') { |
|||
sortField.value = 'free_gold' |
|||
} else if (column.prop === 'rechargeTime') { |
|||
sortField.value = 'recharge_time' |
|||
} else if (column.prop === 'createTime') { |
|||
sortField.value = 'create_time' |
|||
} else if (column.prop === 'paidGold') { |
|||
sortField.value = 'paid_gold' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
get() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号:</el-text> |
|||
<el-input |
|||
v-model="rechargeVo.jwcode" |
|||
placeholder="请输入精网号" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">活动名称:</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.activityId" |
|||
placeholder="请选择活动名称" |
|||
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="6"> |
|||
<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="6"> |
|||
<div class="head-card-element" v-if="adminData.area == '总部'"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.area" |
|||
placeholder="请选择所属地区" |
|||
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 @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> |
|||
总条数:{{ trueCount }}条,总金币数:{{ |
|||
trueGold |
|||
}}金币,永久金币:{{ trueRGold }}金币,免费金币:{{ trueFGold }}金币 |
|||
</div> |
|||
</el-tabs> |
|||
<div style="height: 540px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
height="540px" |
|||
@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="100px" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="110px" /> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column |
|||
prop="activityName" |
|||
label="活动名称" |
|||
width="150px" |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeGold" |
|||
label="充值金额" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ scope.row.rechargeGold }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeWay" |
|||
label="充值方式" |
|||
width="110px" |
|||
/> |
|||
<el-table-column |
|||
prop="paidGold" |
|||
label="永久金币" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ scope.row.paidGold / 100 }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="freeGold" |
|||
label="免费金币" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ scope.row.freeGold / 100 }} |
|||
</template> |
|||
</el-table-column> |
|||
<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 |
|||
:src="scope.row.rechargeVoucher" |
|||
alt="凭证" |
|||
style="width: 50px; height: 50px" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="提交人" width="100px" /> |
|||
<el-table-column prop="status" label="审核状态" width="100px"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.status === 1"> |
|||
<div class="status"> |
|||
<span class="green-dot"></span> |
|||
<span>已通过</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 0"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>待审核</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="red-dot"></span> |
|||
<span>已驳回</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="reson" |
|||
label="驳回理由" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeTime" |
|||
label="交款时间" |
|||
sortable="“custom”" |
|||
width="200px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ |
|||
moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
label="提交时间" |
|||
sortable="“custom”" |
|||
width="200px" |
|||
/> |
|||
<el-table-column |
|||
fixed="right" |
|||
prop="operation" |
|||
label="操作" |
|||
width="150px" |
|||
> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-popconfirm |
|||
title="确定要通过此条记录吗?" |
|||
@confirm="passConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button |
|||
:disabled=" |
|||
scope.row.status === 1 || scope.row.status === 2 |
|||
? true |
|||
: false |
|||
" |
|||
type="primary" |
|||
text |
|||
@click="pass(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> |
|||
<el-button |
|||
:disabled=" |
|||
scope.row.status === 1 || scope.row.status === 2 |
|||
? true |
|||
: false |
|||
" |
|||
type="primary" |
|||
text |
|||
@click="reject(scope.row)" |
|||
> |
|||
驳回 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</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> |
|||
|
|||
<!-- 驳回弹出框 --> |
|||
<el-dialog |
|||
v-model="rejectVisible" |
|||
title="驳回理由" |
|||
width="500" |
|||
:before-close="closeRejectVisible" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
:model="rejectObj" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
> |
|||
<el-form-item prop="reson" label="驳回理由:"> |
|||
<el-input |
|||
v-model="rejectObj.reson" |
|||
maxlength="150" |
|||
show-word-limit |
|||
style="width: 350px" |
|||
type="textarea" |
|||
placeholder="请输入内容" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeRejectVisible()">取消</el-button> |
|||
<el-button type="primary" @click="rejectConfirm()"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.operation { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -1,871 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import request from '@/util/http' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import { AiFillRead } from 'vue-icons-plus/ai' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import API from '../../api/index.js' |
|||
// 变量 |
|||
// 用户对象假的 |
|||
const admin = ref({ |
|||
adminId: 1, |
|||
name: '赵刚', |
|||
area: '中国' |
|||
}) |
|||
//这是获取用户信息的接口 |
|||
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([]) |
|||
// 搜索====================================== |
|||
// 搜索detail |
|||
const detail = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索活动列表 |
|||
const product = ref([]) |
|||
// 所有信息 |
|||
const allData = ref([]) |
|||
// 搜索地区列表 |
|||
const area = ref([]) |
|||
|
|||
// 编辑====================================== |
|||
// 驳回弹出框 |
|||
const rejectVisible = ref(false) |
|||
// 驳回对象 |
|||
const rejectObj = ref({}) |
|||
// 通过对象 |
|||
const passObj = ref({}) |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref('all') |
|||
|
|||
// 退款类型选项 |
|||
const refundType = [ |
|||
{ |
|||
value: '退款商品', |
|||
label: '退款商品' |
|||
} |
|||
] |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 1) * 50 + "px"; |
|||
// }); |
|||
|
|||
// 表单验证ref |
|||
const Ref = ref(null) |
|||
|
|||
// 方法 |
|||
// 统计合计数 |
|||
// 统计合计数 |
|||
const trueGold = ref(0) |
|||
const trueCount = ref(0) |
|||
// 待审核条数 |
|||
const pendingCount = ref(0) |
|||
// 待审核金币数 |
|||
const pendingGold = ref(0) |
|||
// 已通过条数 |
|||
const approvedCount = ref(0) |
|||
// 已通过金币数 |
|||
const approvedGold = ref(0) |
|||
// 已驳回条数 |
|||
const rejectedCount = ref(0) |
|||
// 已驳回金币数 |
|||
const rejectedGold = ref(0) |
|||
|
|||
// 搜索================================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 地区赋值 |
|||
if (adminData.value.area === '泰国') { |
|||
rechargeVo.value.areas = ['泰国', '越南'] |
|||
} else if (adminData.value.area !== '总部') { |
|||
rechargeVo.value.area = adminData.value.area |
|||
} |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|||
detail.value.startDate = getTime.value[0] |
|||
detail.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
detail.value.startDate = '' |
|||
detail.value.endDate = '' |
|||
} |
|||
detail.value.sortField = sortField.value |
|||
detail.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/audit/audit/refund', |
|||
data: { |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize, |
|||
detail: { |
|||
...detail.value |
|||
} |
|||
} |
|||
}) |
|||
const detailWithoutSort = { ...detail.value } |
|||
delete detailWithoutSort.sortField |
|||
delete detailWithoutSort.sortOrder |
|||
const result2 = await request({ |
|||
url: '/refund/RefundA', |
|||
data: detailWithoutSort |
|||
}) |
|||
|
|||
// 统计合计数 |
|||
if (result2.data) { |
|||
result2.data.forEach((item) => { |
|||
switch (item.status) { |
|||
case '待审核': |
|||
// 若 item.raudit 为空则赋值为 0 |
|||
pendingCount.value = item.raudit || 0 |
|||
// 若 item.sumRaudit 为空则赋值为 0 |
|||
pendingGold.value = item.sumRaudit || 0 |
|||
break |
|||
case '已通过': |
|||
approvedCount.value = item.raudit || 0 |
|||
approvedGold.value = item.sumRaudit || 0 |
|||
break |
|||
case '已驳回': |
|||
rejectedCount.value = item.raudit || 0 |
|||
rejectedGold.value = item.sumRaudit || 0 |
|||
break |
|||
} |
|||
}) |
|||
} |
|||
|
|||
trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value |
|||
trueCount.value = |
|||
pendingCount.value + approvedCount.value + rejectedCount.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 () { |
|||
detail.value.area = '' |
|||
detail.value.jwcode = '' |
|||
detail.value.refundType = '' |
|||
detail.value.refundGoods = '' |
|||
detail.value.startDate = '' |
|||
detail.value.endDate = '' |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log('adminAll') |
|||
detail.value.status = '' |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
//待审核充值明细 |
|||
const adminWait = async function () { |
|||
detail.value.status = 0 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminWait') |
|||
trueGold.value = pendingGold.value |
|||
trueCount.value = pendingCount.value |
|||
} |
|||
//已通过充值明细 |
|||
const adminPass = async function () { |
|||
detail.value.status = 1 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminPass') |
|||
trueGold.value = approvedGold.value |
|||
trueCount.value = approvedCount.value |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = async function () { |
|||
detail.value.status = 2 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
console.log('adminReject') |
|||
trueGold.value = rejectedGold.value |
|||
trueCount.value = rejectedCount.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 getProduct = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/product', |
|||
data: {} |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
product.value = result.data |
|||
console.log('产品', product.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/recharge/user/search', |
|||
data: {} |
|||
}) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储地区信息 |
|||
area.value = result.data |
|||
console.log('地区', area.value) |
|||
} 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: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 编辑==================================== |
|||
// 通过按钮 |
|||
const pass = function (row) { |
|||
// 通过初始化 |
|||
passObj.value.adminId = adminData.value.adminId |
|||
passObj.value.auditId = row.auditId |
|||
passObj.value.status = 1 |
|||
passObj.value.refundId = row.refundId |
|||
passObj.value.adminName = row.adminName |
|||
passObj.value.username = row.username |
|||
passObj.value.area = row.area |
|||
console.log('通过对象', passObj.value) |
|||
} |
|||
|
|||
// 通过确认 |
|||
const passConfirm = async function () { |
|||
try { |
|||
console.log('通过对象', passObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/audit/audit/edit', |
|||
data: passObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 刷新表格数据 |
|||
get() |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'success', |
|||
message: '通过成功!' |
|||
}) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 打开驳回弹出框 |
|||
const openRejectVisible = function () { |
|||
rejectVisible.value = true |
|||
} |
|||
// 关闭驳回弹出框 |
|||
const closeRejectVisible = function () { |
|||
rejectVisible.value = false |
|||
} |
|||
// 驳回按钮 |
|||
const reject = function (row) { |
|||
// 驳回初始化 |
|||
rejectObj.value.adminId = adminData.value.adminId |
|||
rejectObj.value.auditId = row.auditId |
|||
rejectObj.value.status = 2 |
|||
rejectObj.value.reson = '' |
|||
rejectObj.value.refundId = row.refundId |
|||
console.log('驳回对象', rejectObj.value) |
|||
openRejectVisible() |
|||
} |
|||
// 驳回确认 |
|||
const rejectConfirm = async function () { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
try { |
|||
console.log('驳回对象', rejectObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/audit/audit/edit', |
|||
data: rejectObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 刷新表格数据 |
|||
get() |
|||
// 关闭弹出框 |
|||
closeRejectVisible() |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'success', |
|||
message: '驳回成功!' |
|||
}) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
// 表单验证 |
|||
|
|||
const rules = reactive({ |
|||
reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }] |
|||
}) |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
await get() |
|||
getProduct() |
|||
await getArea() |
|||
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' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
get() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号:</el-text> |
|||
<el-input |
|||
v-model="detail.jwcode" |
|||
placeholder="请输入精网号" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">退款类型:</el-text> |
|||
<el-select |
|||
v-model="detail.refundType" |
|||
placeholder="请选择退款类型" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in refundType" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">退款商品:</el-text> |
|||
<el-select |
|||
v-model="detail.refundGoods" |
|||
placeholder="请选择退款商品" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in product" |
|||
:key="item.name" |
|||
:label="item.name" |
|||
:value="item.name" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element" v-if="adminData.area == '总部'"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select |
|||
v-model="detail.area" |
|||
placeholder="请选择所属地区" |
|||
size="large" |
|||
style="width: 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 @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> |
|||
退款记录条数:{{ Math.abs(trueCount) }},退款金币总数:{{ |
|||
Math.abs(trueGold) |
|||
}} |
|||
</div> |
|||
</el-tabs> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 540px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
height="540px" |
|||
@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="150px" |
|||
/> |
|||
<el-table-column |
|||
fixed="left" |
|||
prop="jwcode" |
|||
label="精网号" |
|||
width="110px" |
|||
/> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column prop="refundType" label="退款类型" width="100px" /> |
|||
<el-table-column |
|||
prop="refundGoods" |
|||
label="退款商品" |
|||
width="200px" |
|||
/> |
|||
<el-table-column prop="refundCoin" label="退款金币数" width="100px"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.row.rechargeCoin + |
|||
scope.row.freeCoin + |
|||
scope.row.taskCoin |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
label="永久金币" |
|||
width="110px" |
|||
sortable="“custom”" |
|||
> |
|||
<template #default="scope"> |
|||
{{ scope.row.rechargeCoin }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="freeCoin" |
|||
label="免费金币" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ scope.row.freeCoin }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="taskCoin" |
|||
label="任务金币" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ scope.row.taskCoin }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="adminName" 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="“custom”" |
|||
label="提交时间" |
|||
width="200px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
prop="operation" |
|||
label="操作" |
|||
width="150px" |
|||
> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-popconfirm |
|||
title="确定要通过此条记录吗?" |
|||
@confirm="passConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button |
|||
:disabled=" |
|||
scope.row.status === 1 || scope.row.status === 2 |
|||
? true |
|||
: false |
|||
" |
|||
type="primary" |
|||
text |
|||
@click="pass(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> |
|||
<el-button |
|||
:disabled=" |
|||
scope.row.status === 1 || scope.row.status === 2 |
|||
? true |
|||
: false |
|||
" |
|||
type="primary" |
|||
text |
|||
@click="reject(scope.row)" |
|||
> |
|||
驳回 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</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> |
|||
|
|||
<!-- 驳回弹出框 --> |
|||
<el-dialog |
|||
v-model="rejectVisible" |
|||
title="驳回理由" |
|||
width="500" |
|||
:before-close="closeRejectVisible" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
:model="rejectObj" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
> |
|||
<el-form-item prop="reson" label="驳回理由:"> |
|||
<el-input |
|||
v-model="rejectObj.reson" |
|||
maxlength="150" |
|||
show-word-limit |
|||
style="width: 350px" |
|||
type="textarea" |
|||
placeholder="请输入内容" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeRejectVisible()">取消</el-button> |
|||
<el-button type="primary" @click="rejectConfirm()"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.operation { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -1,583 +0,0 @@ |
|||
<script setup> |
|||
import { reactive, onMounted } from "vue"; |
|||
import { ref, computed, watch } from "vue"; |
|||
import { ElMessage } from "element-plus"; |
|||
import { Plus } from "@element-plus/icons-vue"; |
|||
import axios from "axios"; |
|||
import { ElMessageBox } from "element-plus"; |
|||
import API from "../../api/index.js"; |
|||
import moment from "moment"; |
|||
import _ from "lodash"; |
|||
import request from "@/util/http"; |
|||
|
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}); |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: "/admin/userinfo", |
|||
data: {}, |
|||
}); |
|||
adminData.value = result; |
|||
addConsume.value.adminId = adminData.value.adminId; |
|||
addConsume.value.name = adminData.value.name; |
|||
console.log("请求成功", result); |
|||
console.log("用户信息", adminData.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
|
|||
// 这是添加消费信息的表单 |
|||
const addConsume = ref({ |
|||
freeCoin: 0, |
|||
rechargeCoin: 0, |
|||
taskCoin: 0, |
|||
updateType: "1", |
|||
}); |
|||
// 这是添加消费信息的接口 |
|||
const add = async function () { |
|||
try { |
|||
// 处理数据,使用楼上接口后需要隐藏 |
|||
addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100); |
|||
addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100); |
|||
addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100); |
|||
addConsume.value.productName = indexs.value.productName; |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: "/consume/add", |
|||
data: addConsume.value, |
|||
}); |
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg); |
|||
return; |
|||
} else { |
|||
ElMessage.success("添加成功"); |
|||
} |
|||
//重置表单 |
|||
addConsume.value = {}; |
|||
addConsume.value.adminId = adminData.value.adminId; |
|||
addConsume.value.adminName = adminData.value.adminName; |
|||
addConsume.value.updateType = "1"; |
|||
addConsume.value.freeCoin = 0; |
|||
addConsume.value.rechargeCoin = 0; |
|||
addConsume.value.taskCoin = 0; |
|||
indexs.value = {}; |
|||
console.log("请求成功", result); |
|||
user.value = {}; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error("添加失败,请检查输入内容是否正确"); |
|||
|
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm("确认添加?") |
|||
.then(() => { |
|||
addConsume.value.freeCoin = Number(-addConsume.value.freeCoin); |
|||
addConsume.value.rechargeCoin = Number( |
|||
-addConsume.value.rechargeCoin |
|||
); |
|||
addConsume.value.taskCoin = Number(-addConsume.value.taskCoin); |
|||
add(); |
|||
console.log("添加成功"); |
|||
imageUrl.value = ""; |
|||
addConsume.value = {}; |
|||
}) |
|||
.catch(() => { |
|||
console.log("取消添加"); |
|||
}); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 表单验证 |
|||
// 开始时间改变时,重新验证结束时间 |
|||
const Ref = ref(null); |
|||
|
|||
const checkFreeGoldRadio = function (rule, value, callback) { |
|||
if (value == "0" || value == null || value == "") { |
|||
callback(new Error("请输入消费金币总数")); |
|||
} else if (value < 0 || isNaN(value)) { |
|||
callback(new Error("请输入正确的格式")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
const rules = reactive({ |
|||
jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }], |
|||
productName: [{ required: true, message: "请选择消费商品", trigger: "blur" }], |
|||
taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }], |
|||
freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }], |
|||
rechargeCoin: [ |
|||
{ required: true, message: "请输入免费金币", trigger: "blur" }, |
|||
], |
|||
allGold: [ |
|||
{ required: true, message: "消费金币总数不能为空", trigger: "blur" }, |
|||
{ validator: checkFreeGoldRadio, trigger: "blur" }, |
|||
], |
|||
}); |
|||
//这是重置方法 |
|||
const delteConsume = function () { |
|||
addConsume.value = {}; |
|||
addConsume.value.adminId = adminData.value.adminId; |
|||
addConsume.value.adminName = adminData.value.adminName; |
|||
addConsume.value.updateType = "1"; |
|||
addConsume.value.freeCoin = 0; |
|||
addConsume.value.rechargeCoin = 0; |
|||
addConsume.value.taskCoin = 0; |
|||
indexs.value = {}; |
|||
isHC.value = 0; |
|||
}; |
|||
// 查找客户信息的方法 |
|||
const user = ref({ |
|||
firstRechargeTime: "", |
|||
}); |
|||
const getUser = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: "/recharge/user", |
|||
data: { |
|||
jwcode: jwcode, |
|||
area: adminData.value.area, |
|||
}, |
|||
}); |
|||
console.log("请求成功", result); |
|||
|
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg); |
|||
} else { |
|||
user.value = result.data; |
|||
user.value.A = |
|||
Number(user.value.pendingRechargeTimes) + |
|||
Number(user.value.pendingSpendTimes); |
|||
console.log("用户信息", user.value); |
|||
ElMessage.success(result.msg); |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error("查询失败,请检查精网号是否正确"); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
//这是查询用户金币信息的接口 |
|||
const userGold = ref({}); |
|||
const getUserGold = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: "/recharge/user", |
|||
data: { |
|||
jwcode: jwcode, |
|||
area: adminData.value.area, |
|||
}, |
|||
}); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg); |
|||
} else { |
|||
// 存储表格数据 |
|||
userGold.value = result.data; |
|||
addConsume.value.username = result.data.name; |
|||
addConsume.value.area = result.data.area; |
|||
ElMessage.success(result.msg); |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error("无此精网号"); |
|||
addConsume.value.jwcode = ""; |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
function calculateCoins() { |
|||
if ( |
|||
(userGold.value.coreJb + |
|||
userGold.value.free6 + |
|||
userGold.value.free12 + |
|||
userGold.value.buyJb) / |
|||
100 < |
|||
addConsume.value.allGold |
|||
) { |
|||
addConsume.value.allGold = 0; |
|||
addConsume.value.taskCoin = 0; |
|||
addConsume.value.freeCoin = 0; |
|||
addConsume.value.rechargeCoin = 0; |
|||
ElMessage.error("金币不足,请充值"); |
|||
return; |
|||
} |
|||
// 这是计算用户的三种金币的接口 |
|||
else { |
|||
// 保存原始的allGold值 |
|||
const originalAllGold = addConsume.value.allGold; |
|||
|
|||
// 确保todayTask和todayFree是有效的数字 |
|||
const todayTask = |
|||
typeof userGold.value.coreJb === "number" |
|||
? userGold.value.coreJb / 100 |
|||
: 0; |
|||
const todayFree = |
|||
typeof (userGold.value.free6 + userGold.value.free12) === "number" |
|||
? (userGold.value.free6 + userGold.value.free12) / 100 |
|||
: 0; |
|||
|
|||
// 根据用户输入的消费金币总数和已有的金币数量进行计算 |
|||
addConsume.value.taskCoin = Math.min(originalAllGold, todayTask); |
|||
let remainingGold = originalAllGold - addConsume.value.taskCoin; |
|||
|
|||
addConsume.value.freeCoin = Math.min(remainingGold, todayFree); |
|||
remainingGold -= addConsume.value.freeCoin; |
|||
|
|||
addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币 |
|||
|
|||
// 恢复allGold的原始值 |
|||
addConsume.value.allGold = originalAllGold; |
|||
|
|||
// 确保taskCoin, freeCoin, rechargeCoin不是NaN,如果是,则设置为0 |
|||
if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0; |
|||
if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0; |
|||
if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0; |
|||
|
|||
console.log("计算结果", addConsume.value); |
|||
} |
|||
} |
|||
|
|||
// 查询商品的接口 |
|||
const goods = ref([]); |
|||
const getGoods = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: "/product", |
|||
data: {}, |
|||
}); |
|||
// 将响应结果存储到响应式数据中 |
|||
|
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
goods.value = result.data; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 获取指标的方法 |
|||
const index = ref([]); |
|||
const getIndexs = async function (type) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: "/product/index", |
|||
data: { |
|||
type: type, |
|||
}, |
|||
}); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
index.value = result.data; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 选择商品名称是时触发的方法 |
|||
const isHC = ref(0); |
|||
const handleProductSelect = (productName) => { |
|||
// 根据商品名称获取对应的商品信息 |
|||
indexs.value.productName = productName; |
|||
if (productName == "homilychart") { |
|||
isHC.value = 1; |
|||
} else { |
|||
isHC.value = 0; |
|||
} |
|||
}; |
|||
const indexs = ref([]); |
|||
const handleIndexSelect = (indexName) => { |
|||
indexs.value.productName = "homilychart" + indexName; |
|||
console.log("选择的指标是", indexs.value.productName); |
|||
}; |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData(); |
|||
await getGoods(); |
|||
await getIndexs(1); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> |
|||
|
|||
<el-form |
|||
:model="addConsume" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 750px" |
|||
class="form-style" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="addConsume.jwcode" |
|||
style="width: 220px" |
|||
@change="getUserGold(addConsume.jwcode)" |
|||
/> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(addConsume.jwcode)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="productName" |
|||
label="商品名称" |
|||
style="float: left; margin-right: -30px" |
|||
> |
|||
<el-select |
|||
v-model="addConsume.productName" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
@change="handleProductSelect(addConsume.productName)" |
|||
> |
|||
<el-option |
|||
v-for="item in goods" |
|||
:key="item.value" |
|||
:label="item.name" |
|||
:value="item.name" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="productName" label="指标" v-if="isHC == 1"> |
|||
<el-select |
|||
v-model="indexs.name" |
|||
placeholder="请选择" |
|||
style="width: 100px" |
|||
@change="handleIndexSelect(indexs.name)" |
|||
> |
|||
<el-option |
|||
v-for="item in index" |
|||
:key="item.value" |
|||
:label="item.name" |
|||
:value="item.name" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="指标" v-else> |
|||
<el-select disabled placeholder="请选择" style="width: 100px"> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="allGold" label="消费金币总数"> |
|||
<el-input |
|||
v-model="addConsume.allGold" |
|||
style="width: 100px" |
|||
@change="calculateCoins()" |
|||
/> |
|||
</el-form-item> |
|||
<div style="display: flex; align-items: center"> |
|||
<el-form-item prop="rechargeCoin" label="永久金币" style="float: left"> |
|||
<el-input |
|||
disabled |
|||
v-model="addConsume.rechargeCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 0px">个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="freeCoin" |
|||
label="免费金币" |
|||
style="float: left; margin-left: -20px" |
|||
> |
|||
<el-input |
|||
disabled |
|||
v-model="addConsume.freeCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 0px">个</p> |
|||
</el-form-item> |
|||
<el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px"> |
|||
<el-input |
|||
disabled |
|||
v-model="addConsume.taskCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 20px">个</p> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addConsume.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="commitName" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
:value="adminData.name" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> |
|||
<el-button @click="delteConsume" style="margin-left: 280px">重置</el-button> |
|||
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
|||
</el-form> |
|||
|
|||
<!-- 客户信息栏 --> |
|||
<el-card style="width: 850px; float: right" class="customer-info"> |
|||
<el-form |
|||
:model="user" |
|||
label-width="auto" |
|||
style="max-width: 1200px" |
|||
label-position="left" |
|||
> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<el-row style="margin-top: 20px"> |
|||
<el-col :span="10"> |
|||
<el-form-item label="姓名:"> |
|||
<p>{{ user.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="历史金币总数"> |
|||
<!-- 检查 user.totalRechargeGold 是否为有效的数字 --> |
|||
<p v-if="!isNaN(Number(user.totalRechargeGold))"> |
|||
{{ Number(user.totalRechargeGold / 100) }} |
|||
</p> |
|||
<!-- 如果不是有效的数字,显示默认值 --> |
|||
<p v-else></p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="精网号"> |
|||
<p>{{ user.jwcode }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="当前金币总数" style="width: 500px"> |
|||
<span |
|||
style="color: #2fa1ff; margin-right: 5px" |
|||
v-if="user.buyJb !== undefined" |
|||
>{{ |
|||
(user.buyJb + user.free6 + user.free12 + user.coreJb) / 100 |
|||
}}</span |
|||
> |
|||
<span |
|||
style="display: inline; white-space: nowrap; color: #b1b1b1" |
|||
v-if="user.buyJb !== undefined" |
|||
>(永久金币:{{ user.buyJb / 100 }};免费金币:{{ |
|||
(user.free6 + user.free12) / 100 |
|||
}};任务金币:{{ user.coreJb / 100 }})</span |
|||
> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="首次充值日期"> |
|||
<p v-if="user.firstRechargeDate"> |
|||
{{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }} |
|||
</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="充值次数"> |
|||
<p style="color: #2fa1ff">{{ user.rechargeTimes }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="负责客服"> |
|||
<p>{{ adminData.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="消费次数"> |
|||
<p style="color: #2fa1ff">{{ user.spendTimes }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="所属门店"> |
|||
<p>{{ adminData.area }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<!-- <el-form-item label="待审核"> |
|||
<p style="color: #2fa1ff"> |
|||
{{ user.A }} |
|||
</p> |
|||
</el-form-item> --> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
|
|||
.el-form-item { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
/* 上传图片的格式 */ |
|||
.avatar-uploader .avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed var(--el-border-color); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: var(--el-transition-duration-fast); |
|||
} |
|||
|
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: var(--el-color-primary); |
|||
} |
|||
|
|||
.el-icon.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 50px; |
|||
height: 50px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.form-style { |
|||
margin-top: 50px; |
|||
max-width: 50%; |
|||
float: left; |
|||
} |
|||
|
|||
.form-style2 { |
|||
max-width: 60%; |
|||
} |
|||
|
|||
p { |
|||
font-size: 13px; |
|||
transform: scale(1); |
|||
} |
|||
</style> |
|||
@ -1,587 +0,0 @@ |
|||
<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 API from '../../api/index.js' |
|||
import request from '@/util/http' |
|||
// 变量 |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/userinfo', |
|||
data: {} |
|||
}) |
|||
adminData.value = result |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 搜索====================================== |
|||
// 搜索detailVo |
|||
const detailVo = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索活动列表 |
|||
const activity = ref([]) |
|||
// 所有信息 |
|||
const allData = ref([]) |
|||
// 搜索地区列表 |
|||
const area = ref([]) |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref('all') |
|||
|
|||
// 消费平台选项 |
|||
const consumePlatform = [ |
|||
{ |
|||
value: '4', |
|||
label: '金币系统' |
|||
}, |
|||
|
|||
{ |
|||
value: '1', |
|||
label: 'Homily Chart' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'Homily Link' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'ERP系统' |
|||
} |
|||
] |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 1) * 41 + "px"; |
|||
// }); |
|||
// 方法 |
|||
// 合计数的显示数据 |
|||
const tableDataTotal = ref({}) |
|||
const rechargeCoin = ref(0) |
|||
const freeCoin = ref(0) |
|||
const taskCoin = ref(0) |
|||
const totalCoin = ref(0) |
|||
// 搜索========================================================================================================================================================= |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 地区赋值 |
|||
if (adminData.value.area != '总部') { |
|||
detailVo.value.area = adminData.value.area |
|||
} |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|||
detailVo.value.startDate = getTime.value[0] |
|||
detailVo.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
detailVo.value.startDate = '' |
|||
detailVo.value.endDate = '' |
|||
} |
|||
detailVo.value.sortField = sortField.value |
|||
detailVo.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/consume/select', |
|||
data: { |
|||
...getObj.value, |
|||
consumeDetail: { ...detailVo.value } |
|||
} |
|||
}) |
|||
// 合计数的接口 |
|||
// 复制一份 detail.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = { ...detailVo.value } |
|||
delete detailWithoutSort.sortField |
|||
delete detailWithoutSort.sortOrder |
|||
const result2 = await request({ |
|||
url: '/consume/SumConsume', |
|||
data: { |
|||
...detailWithoutSort |
|||
} |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
console.log('请求成功2', result2) |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
tableDataTotal.value = result2.data |
|||
if (result2.data == null) { |
|||
console.log('请求成功2', result2) |
|||
tableDataTotal.value = { |
|||
sumRcion: 0, |
|||
sumFcion: 0, |
|||
sumTcion: 0, |
|||
sumcion: 0 |
|||
} |
|||
} |
|||
|
|||
console.log('tableDataT', tableDataTotal) |
|||
|
|||
// 修改为保留两位小数 |
|||
rechargeCoin.value = parseFloat( |
|||
(tableDataTotal.value.sumRcion / 100).toFixed(2) |
|||
) |
|||
freeCoin.value = parseFloat( |
|||
(tableDataTotal.value.sumFcion / 100).toFixed(2) |
|||
) |
|||
taskCoin.value = parseFloat( |
|||
(tableDataTotal.value.sumTcion / 100).toFixed(2) |
|||
) |
|||
totalCoin.value = parseFloat( |
|||
(tableDataTotal.value.sumcion / 100).toFixed(2) |
|||
) |
|||
console.log('tableData', tableData.value) |
|||
// 存储分页总数 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
detailVo.value.productName = '' |
|||
detailVo.value.consumePlatform = '' |
|||
detailVo.value.consumeType = '' |
|||
detailVo.value.startDate = '' |
|||
detailVo.value.endDate = '' |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//点击标签页 |
|||
const handleClick = function (tab, event) { |
|||
if (tab.props.name === 'all') { |
|||
adminAll() |
|||
} else if (tab.props.name === 'wait') { |
|||
adminWait() |
|||
} else if (tab.props.name === 'pass') { |
|||
adminPass() |
|||
} else if (tab.props.name === 'reject') { |
|||
adminReject() |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
await get() |
|||
// getActivity(); |
|||
// await getArea(); |
|||
}) |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
const checkNumber = function () { |
|||
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
|||
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)) |
|||
if ( |
|||
getObj.value.pageNum > 0 && |
|||
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize) |
|||
) { |
|||
getObj.value.pageNum = parseInt(getObj.value.pageNum) |
|||
console.log('输入的数字合法') |
|||
get() |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
// 查询商品的接口 |
|||
const goods = ref([]) |
|||
const getGoods = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/product', |
|||
data: {} |
|||
}) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储全部数据 |
|||
goods.value = result.data |
|||
console.log('allData', allData.value) |
|||
console.log('地区', area.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' ? '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="detailVo.productName" |
|||
placeholder="请选择商品名称" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in goods" |
|||
:key="item.activityId" |
|||
:label="item.name" |
|||
:value="item.name" |
|||
/> |
|||
</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 @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> |
|||
@ -1,210 +0,0 @@ |
|||
<template> |
|||
<div class="add-goldenbeen"> |
|||
<div class="head-top">新增充值</div> |
|||
<div class="add-box"> |
|||
<el-form |
|||
:model="beenObj" |
|||
ref="ruleFormRef" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
class="add-form" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input v-model="beenObj.jwcode" style="width: 220px" /> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(beenObj.jwcode)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="type" label="充值类型"> |
|||
<el-radio-group v-model="beenObj.type"> |
|||
<el-radio :value="0">增加</el-radio> |
|||
<el-radio :value="1">减少</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<div style="display: flex"> |
|||
<el-form-item prop="payBeean" label="付费金豆"> |
|||
<el-input-number |
|||
v-model="beenObj.payBeean" |
|||
:controls="false" |
|||
:min="0" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="freeBeean" label="免费金豆"> |
|||
<el-input-number |
|||
v-model="beenObj.freeBeean" |
|||
:controls="false" |
|||
:min="0" |
|||
/> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="beenObj.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="submitter" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
:value="beenObj.submitter" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> --> |
|||
<el-form-item> |
|||
<div class="btn-group"> |
|||
<el-button @click="resetData(ruleFormRef)">重置</el-button> |
|||
<el-button type="primary" @click="addBean(ruleFormRef)"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 客户信息栏 --> |
|||
<el-card> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<div class="custom-box"> |
|||
<el-text>姓名:{{ user.nickname }}</el-text> |
|||
<el-text>当前付费金豆:{{ user.jinbiBuy }}</el-text> |
|||
<el-text>精网号:{{ user.jwcode }}</el-text> |
|||
<el-text>当前免费金豆:{{ user.jinbiFree }}</el-text> |
|||
<!-- <el-text>负责客服:</el-text> --> |
|||
<el-text>消费次数:{{ user.number }}</el-text> |
|||
<el-text>所属门店:{{ user.masterShop }}</el-text> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue' |
|||
import API from '@/util/http' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
type userType = { |
|||
[key: string]: number | string |
|||
} |
|||
const ruleFormRef = ref<FormInstance>() |
|||
const beenObj = ref({ |
|||
jwcode: '', |
|||
remark: '', |
|||
type: 0, //0是加1是减 |
|||
payBeean: 0, |
|||
freeBeean: 0 |
|||
}) |
|||
let user: userType = reactive({}) |
|||
const rules = ref({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
remark: [{ required: true, message: '请输入备注', trigger: 'blur' }], |
|||
// submitter: [{ required: true, message: '请输入提交人', trigger: 'blur' }], |
|||
type: [{ required: true, message: '请选择充值类型', trigger: 'change' }], |
|||
payBeean: [{ required: true, message: '请输入付费金豆', trigger: 'blur' }], |
|||
freeBeean: [{ required: true, message: '请输入免费金豆', trigger: 'blur' }] |
|||
}) |
|||
const addBean = (formEl) => { |
|||
// 提交表单 |
|||
try { |
|||
formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
// 处理表单提交逻辑 |
|||
const result = await API({ |
|||
url: '/dou/add', |
|||
data: { |
|||
jwcode: beenObj.value.jwcode, |
|||
content: beenObj.value.remark, |
|||
moneyFree: Number(beenObj.value.freeBeean), |
|||
moneyBuy: Number(beenObj.value.payBeean), |
|||
time: Math.floor(Date.now() / 1000), |
|||
data: beenObj.value.type |
|||
} |
|||
}) |
|||
if (result.code === 200) { |
|||
ElMessage.success('充值成功') |
|||
beenObj.value.jwcode = '' |
|||
beenObj.value.remark = '' |
|||
beenObj.value.payBeean = 0 |
|||
beenObj.value.freeBeean = 0 |
|||
} else if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
return |
|||
} |
|||
console.log('请求成功', result) |
|||
} else { |
|||
ElMessage.error('表单验证失败') |
|||
} |
|||
}) |
|||
} catch (error) { |
|||
ElMessage.error('提交失败') |
|||
} |
|||
} |
|||
const resetData = (formEl) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
} |
|||
const getUser = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/search', |
|||
data: { |
|||
jwcode: jwcode |
|||
} |
|||
}) |
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
} else { |
|||
if (!result.data.jwcode) { |
|||
ElMessage.error('精网号不存在') |
|||
return |
|||
} |
|||
Object.assign(user, result.data) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('查询失败,请检查精网号是否正确') |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.add-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
column-gap: 50px; |
|||
} |
|||
.btn-group { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
width: 100%; |
|||
} |
|||
.custom-box { |
|||
padding: 20px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
row-gap: 20px; |
|||
box-sizing: border-box; |
|||
.el-text { |
|||
width: 200px; |
|||
} |
|||
} |
|||
.el-card { |
|||
width: 500px; |
|||
} |
|||
.head-top { |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
} |
|||
</style> |
|||
@ -1,234 +0,0 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="area" label="地区"> |
|||
<el-select |
|||
v-model="detailY.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaArray" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" size="small" @click="search()" |
|||
>查询</el-button |
|||
> |
|||
<el-button type="primary" size="small" @click="reset(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<p> |
|||
现有金豆: 付费金豆:{{ getObj.jinbiBuy }} 免费金豆:{{ |
|||
getObj.jinbiFree |
|||
}} 历史消费:{{ getObj.jinbiCostTotal }} |
|||
</p> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
:default-sort="{ prop: 'jinbiCostTotal', order: 'descending' }" |
|||
height="584px" |
|||
@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="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="所属地区" width="120" /> |
|||
|
|||
<el-table-column prop="jinbi" sortable label="金豆数量" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiBuy" sortable label="付费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiFree" sortable label="免费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
width="120" |
|||
prop="jinbiCostTotal" |
|||
label="历史消费" |
|||
></el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
prop="jinbiCostbeenTotal" |
|||
width="160" |
|||
label="历史付费金豆" |
|||
></el-table-column> |
|||
<el-table-column |
|||
sortable |
|||
prop="jinbifreebeenTotal" |
|||
width="160" |
|||
label="历史免费金豆" |
|||
></el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, reactive } from 'vue' |
|||
|
|||
import type { FormInstance } from 'element-plus' |
|||
|
|||
import API from '@/util/http' |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
//搜索表单数据 |
|||
const detailY = reactive({ jwcode: '', area: '' }) |
|||
const ruleFormRef = ref<FormInstance>() |
|||
let areaArray = ref<string[]>([]) |
|||
let getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
jinbiBuy: 0, |
|||
jinbiCostTotal: 0, |
|||
jinbiFree: 0 |
|||
}) |
|||
const search = function () { |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
//初始化 |
|||
const getInit = async function ({ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
}) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getYve', |
|||
data: { |
|||
pageNum: getObj.value.pageNum, |
|||
pageSize: getObj.value.pageSize, |
|||
yve: { |
|||
jwcode: detailY.jwcode, |
|||
ipAddress: detailY.area, |
|||
sortField: sortField, |
|||
sortOrder: sortOrder |
|||
} |
|||
} |
|||
}) |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
const handleSortChange = (column) => { |
|||
const { prop, order } = column |
|||
if (order === 'ascending') { |
|||
getInit({ sortField: prop, sortOrder: 'ASC' }) |
|||
} else if (order === 'descending') { |
|||
getInit({ sortField: prop, sortOrder: 'DESC' }) |
|||
} |
|||
} |
|||
|
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl: FormInstance | undefined) { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
} |
|||
|
|||
const getArea = async () => { |
|||
const result = await API({ |
|||
url: '/dou/getIp' |
|||
}) |
|||
console.log('获取地区', result.data) |
|||
if (result.code == 200) { |
|||
areaArray.value = result.data |
|||
} |
|||
} |
|||
const getCount = async () => { |
|||
const result = await API({ |
|||
url: '/dou/getYveTotal' |
|||
}) |
|||
if (result.code == 200) { |
|||
const { jinbiBuy, jinbiFree, jinbiCostTotal } = result.data |
|||
getObj.value.jinbiBuy = jinbiBuy |
|||
getObj.value.jinbiFree = jinbiFree |
|||
getObj.value.jinbiCostTotal = jinbiCostTotal |
|||
} |
|||
} |
|||
getArea() |
|||
getCount() |
|||
getInit({}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
@ -1,307 +0,0 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="ipAddress" label="地区"> |
|||
<el-select |
|||
v-model="detailY.ipAddress" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="sourceType" label="消费类型"> |
|||
<el-select |
|||
v-model="detailY.sourceType" |
|||
placeholder="请选择消费类型" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in consumList" |
|||
:key="item.value" |
|||
:label="item.text" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="channel" label="频道"> |
|||
<el-select |
|||
v-model="detailY.channel" |
|||
placeholder="请选择频道" |
|||
style="width: 240px" |
|||
clearable |
|||
filterable |
|||
> |
|||
<el-option |
|||
v-for="item in channelList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item prop="sourceName" label="直播间"> |
|||
<el-input |
|||
v-model="detailY.sourceName" |
|||
placeholder="请输入直播间" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="createTime" label="消费时间"> |
|||
<el-date-picker |
|||
v-model="detailY.createTime" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
style="width: 240px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<p>合计数:实际用户金豆数:{{ beenCount }}</p> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="地区" width="120" /> |
|||
<el-table-column prop="sourceType" label="消费类型" width="120"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
consumList.find((item) => item.value === scope.row.sourceType)?.text |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="jinbiCostTotal" label="金豆价格" width="120"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="chanel" label="频道" width="120"> |
|||
</el-table-column> --> |
|||
<el-table-column prop="room" label="直播间" width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
label="消费时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column fixed="right" label="操作" min-width="120"> |
|||
<template #default> |
|||
<el-tooltip class="box-item" effect="light" placement="top-start"> |
|||
<template #default> |
|||
<el-button link type="primary" size="small"> 返还金豆 </el-button> |
|||
</template> |
|||
<template #content> |
|||
<div>是否申请返还该条消费</div> |
|||
<el-button size="small">确定 </el-button> |
|||
<el-button size="small">取消 </el-button> |
|||
</template> |
|||
</el-tooltip> |
|||
</template> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
const areaList = ref<string[]>([]) |
|||
const beenCount = ref(0) |
|||
const consumList = ref<any>([ |
|||
{ value: 1, text: '发礼物' }, |
|||
{ value: 2, text: '发红包' }, |
|||
{ value: 3, text: '发福袋' }, |
|||
{ value: 4, text: '付费直播' }, |
|||
{ value: 5, text: '加⼊粉丝团' }, |
|||
{ value: 6, text: '发弹幕' }, |
|||
{ value: 7, text: '铁粉单次付费' }, |
|||
{ value: 8, text: '铁粉连续包⽉' }, |
|||
{ value: 9, text: '打赏⽂章' }, |
|||
{ value: 10, text: '打赏视频' }, |
|||
{ value: 11, text: '付费购买' } |
|||
]) |
|||
const channelList = ref<string[]>([]) |
|||
const liveroomList = ref<string[]>([]) |
|||
const ruleFormRef = ref<FormInstance>() |
|||
//搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
ipAddress: '', |
|||
createTime: '', |
|||
// channel: '', //频道 |
|||
sourceName: '', //直播间 |
|||
sourceType: '' //消费类型 |
|||
}) |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//初始化 |
|||
const getInit = async function () { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const [startTime, endTime] = detailY.value.createTime |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getSpend', |
|||
method: 'post', |
|||
data: { |
|||
...getObj.value, |
|||
spend: { |
|||
jwcode: detailY.value.jwcode, //精网号 |
|||
ipAddress: detailY.value.ipAddress, //地区 |
|||
sourceName: detailY.value.sourceName, //直播间 |
|||
sourceType: detailY.value.sourceType, //消费类型 |
|||
startTime, //开始时间 |
|||
endTime //结束时间 |
|||
} |
|||
} |
|||
}) |
|||
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 |
|||
getInit() |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
formEl.resetFields() |
|||
} |
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit() |
|||
} |
|||
|
|||
//合计数接口 |
|||
const getCount = async () => { |
|||
const result = await API({ |
|||
url: '/dou/getSpendTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
ipAddress: detailY.value.ipAddress, |
|||
sourceName: detailY.value.sourceName, |
|||
sourceType: detailY.value.sourceType, |
|||
startTime: detailY.value.createTime[0], |
|||
endTime: detailY.value.createTime[1] |
|||
} |
|||
}) |
|||
if (result.code == 200) { |
|||
//const { jinbiBuy, jinbiFree, jinbiCostTotal } = result.data |
|||
console.log('合计数', result.data) |
|||
beenCount.value = result.data || 0 |
|||
} |
|||
} |
|||
//获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 挂载 |
|||
getInit() |
|||
getCount() |
|||
getArea() |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -1,486 +0,0 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="deptName" label="地区"> |
|||
<el-select |
|||
v-model="detailY.deptName" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="orderNo" label="订单号"> |
|||
<el-input |
|||
v-model="detailY.orderNo" |
|||
placeholder="请输入订单号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="type" label="充值类型"> |
|||
<el-input |
|||
v-model="detailY.type" |
|||
placeholder="请输入充值类型" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="payStyle" label="充值平台"> |
|||
<el-select |
|||
v-model="detailY.payStyle" |
|||
placeholder="请选择充值平台" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in platformList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item prop="createTime" label="充值时间"> |
|||
<el-date-picker |
|||
v-model="detailY.createTime" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:unlinkPanels="true" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
<el-button type="primary" @click="exportExcel">导出excel</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<el-card |
|||
>金豆总数:充值金豆总数:{{ countValue }}合计金额数:{{ |
|||
priceValue |
|||
}}</el-card |
|||
> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="nickname" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="ipAddress" label="地区" width="120" /> |
|||
<el-table-column prop="orderNo" label="订单号" width="120" /> |
|||
<el-table-column prop="money" label="金豆数量" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="moneyBuy" label="付费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="moneyFree" label="免费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="price" label="金额"></el-table-column> |
|||
<el-table-column prop="type" label="类型"></el-table-column> |
|||
<!-- <el-table-column prop="payStyle" label="充值平台" width="140"> |
|||
</el-table-column> |
|||
<el-table-column prop="notes" label="备注" width="210"></el-table-column> --> |
|||
<el-table-column |
|||
prop="time" |
|||
label="充值时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
!!scope.row.time |
|||
? moment.unix(scope.row.time).format('YYYY-MM-DD HH:mm:ss') |
|||
: '-' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<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> |
|||
</div> |
|||
<!-- 这是导出excel的弹窗 --> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="请选择导出条件" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
@close=" |
|||
() => { |
|||
dialogVisible = false |
|||
isExport = false |
|||
} |
|||
" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="excelData" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
status-icon |
|||
> |
|||
<el-form-item prop="activityName" label="精网号:"> |
|||
<el-input |
|||
v-model="excelData.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="所属地区:" |
|||
><el-select |
|||
v-model="excelData.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="更新时间:"> |
|||
<el-radio-group v-model="excelData.timegap"> |
|||
<el-radio value="1">今天</el-radio> |
|||
<el-radio value="3">近三天</el-radio> |
|||
<el-radio value="7">近一周</el-radio> |
|||
<el-radio value="30">近一个月</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
@click="exportConfirm()" |
|||
>确定</el-button |
|||
> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue' |
|||
import { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import { utils, write } from 'xlsx' |
|||
import { saveAs } from 'file-saver' |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
const dialogVisible = ref(false) |
|||
const excelData = reactive({ |
|||
jwcode: '', |
|||
area: '', |
|||
timegap: '', |
|||
startTime: '', |
|||
endTime: '' |
|||
}) |
|||
const priceValue = ref(0) |
|||
const countValue = ref(0) |
|||
const areaList = ref<string[]>([]) |
|||
const isExport = ref<boolean>(false) |
|||
const rules = ref({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
area: [{ required: true, message: '请选择所属地区', trigger: 'change' }] |
|||
}) |
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
const platformList = ref<string[]>([ |
|||
// 'stripe', |
|||
// 'ios', |
|||
// 'FirstData', |
|||
// 'paymentasia', |
|||
// 'system', |
|||
// '金币系统' |
|||
]) |
|||
const typeList = ref<string[]>([ |
|||
'金币换金豆', |
|||
'金币换免费金豆', |
|||
'赠送金豆', |
|||
'购买金豆', |
|||
'客服操作' |
|||
]) |
|||
//搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
deptName: '', |
|||
orderNo: '', |
|||
payStyle: '', |
|||
type: '', |
|||
createTime: '' |
|||
}) |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
const exportExcel = function () { |
|||
dialogVisible.value = true |
|||
isExport.value = true |
|||
} |
|||
const exportConfirm = function () { |
|||
if (excelData.timegap == '1') { |
|||
excelData.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '3') { |
|||
excelData.startTime = moment() |
|||
.subtract(3, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '7') { |
|||
excelData.startTime = moment() |
|||
.subtract(7, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '30') { |
|||
excelData.startTime = moment() |
|||
.subtract(30, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} |
|||
getInit( |
|||
{ |
|||
sortField: '', |
|||
sortOrder: '' |
|||
}, |
|||
(data) => { |
|||
console.log('导出数据', data) |
|||
//导出的数据将字段映射 |
|||
data = data.map((item) => { |
|||
return { |
|||
姓名: item.name, |
|||
精网号: item.jwcode, |
|||
地区: item.deptName, |
|||
订单号: item.orderNo, |
|||
充值平台: item.payStyle, |
|||
金豆数量: item.count, |
|||
充值时间: moment(item.successTime).format('YYYY-MM-DD'), |
|||
金额: item.price |
|||
} |
|||
}) |
|||
if (data.length == 0) { |
|||
ElMessage.error('没有数据') |
|||
isExport.value = false |
|||
dialogVisible.value = false |
|||
return |
|||
} |
|||
console.log('导出数据', data) |
|||
excelExport(data) |
|||
} |
|||
) |
|||
} |
|||
//数据导出excel |
|||
const excelExport = async function (data) { |
|||
const worksheet = utils.json_to_sheet(data) |
|||
const workbook = utils.book_new() |
|||
utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
const wbout = write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
saveAs( |
|||
new Blob([wbout], { type: 'application/octet-stream' }), |
|||
'数据导出.xlsx' |
|||
) |
|||
isExport.value = false |
|||
dialogVisible.value = false |
|||
} |
|||
const ruleFormRef = ref<FormInstance>() |
|||
//初始化 |
|||
const getInit = async function ( |
|||
{ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
}, |
|||
callback?: Function |
|||
) { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const [startTime, endTime] = detailY.value.createTime |
|||
console.log(startTime, endTime) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/getPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: isExport.value ? excelData.jwcode : detailY.value.jwcode, |
|||
deptName: isExport.value ? excelData.area : detailY.value.deptName, |
|||
startTime: isExport.value ? excelData.startTime : startTime || '', |
|||
endTime: isExport.value ? excelData.endTime : endTime || '', |
|||
payStyle: isExport.value ? '' : detailY.value.payStyle, |
|||
type: isExport.value ? '' : detailY.value.type, |
|||
orderNo: isExport.value ? '' : detailY.value.orderNo, |
|||
sortField, |
|||
sortOrder |
|||
}, |
|||
pageNum: isExport.value ? '' : getObj.value.pageNum, |
|||
pageSize: isExport.value ? '' : getObj.value.pageSize |
|||
} |
|||
}) |
|||
|
|||
if (isExport.value) { |
|||
!!callback && callback(result.data) |
|||
} else { |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// const handleSortChange = (column) => { |
|||
// const { prop, order } = column |
|||
// if (order === 'ascending') { |
|||
// getInit({ sortField: prop, sortOrder: 'ASC' }) |
|||
// } else if (order === 'descending') { |
|||
// getInit({ sortField: prop, sortOrder: 'DESC' }) |
|||
// } |
|||
// } |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
formEl.resetFields() |
|||
} |
|||
//获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getPayIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取支付方式接口 |
|||
const getPayType = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
// typeList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取金豆数接口 |
|||
const getCount = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
//deptName: detailY.value.deptName, |
|||
startTime: detailY.value.createTime[0], |
|||
endTime: detailY.value.createTime[1], |
|||
orderNo: detailY.value.orderNo, |
|||
type: detailY.value.type |
|||
// payStyle: detailY.value.payStyle |
|||
} |
|||
}) |
|||
if (!!result.data) { |
|||
const { price, count } = result.data |
|||
console.log('金豆总数', price, count) |
|||
priceValue.value = price |
|||
countValue.value = count |
|||
} else { |
|||
priceValue.value = 0 |
|||
countValue.value = 0 |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
getInit({}) |
|||
getArea() |
|||
getPayType() |
|||
getCount() |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -1,494 +0,0 @@ |
|||
<template> |
|||
<div class="filter-box"> |
|||
<el-form :model="detailY" ref="ruleFormRef"> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="deptName" label="地区"> |
|||
<el-select |
|||
v-model="detailY.deptName" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="orderNo" label="订单号"> |
|||
<el-input |
|||
v-model="detailY.orderNo" |
|||
placeholder="请输入订单号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="type" label="充值类型"> |
|||
<el-input |
|||
v-model="detailY.type" |
|||
placeholder="请输入充值类型" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> --> |
|||
<el-form-item prop="payStyle" label="充值平台"> |
|||
<el-select |
|||
v-model="detailY.payStyle" |
|||
placeholder="请选择充值平台" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in platformList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="createTime" label="充值时间"> |
|||
<el-date-picker |
|||
v-model="detailY.createTime" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
style="width: 240px" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:unlinkPanels="true" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="search">查询</el-button> |
|||
<el-button type="success" @click="reset(ruleFormRef)">重置</el-button> |
|||
<el-button type="primary" @click="exportExcel">导出excel</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="table-box"> |
|||
<p>金豆总数:充值金豆总数:{{ countValue }}合计金额数:{{ priceValue }}</p> |
|||
<el-table :data="tableData" style="width: 100%" height="584px"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" prop="name" label="姓名" width="150" /> |
|||
<el-table-column fixed="left" prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="deptName" label="地区" width="120" /> |
|||
<el-table-column prop="orderNo" label="订单号" width="120" /> |
|||
<el-table-column prop="count" label="金豆数量" width="120"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="moneyBuy" label="付费金豆" width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="moneyFree" label="免费金豆" width="120"> |
|||
</el-table-column> --> |
|||
<el-table-column prop="price" label="金额"></el-table-column> |
|||
<!-- <el-table-column prop="type" label="类型"></el-table-column> --> |
|||
<el-table-column prop="payStyle" label="充值平台" width="140"> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="notes" label="备注" width="210"></el-table-column> --> |
|||
<el-table-column |
|||
prop="successTime" |
|||
label="充值时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
!!scope.row.successTime |
|||
? moment.unix(scope.row.time).format('YYYY-MM-DD HH:mm:ss') |
|||
: '-' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<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> |
|||
</div> |
|||
<!-- 这是导出excel的弹窗 --> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="请选择导出条件" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
@close=" |
|||
() => { |
|||
dialogVisible = false |
|||
isExport = false |
|||
} |
|||
" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="excelData" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
status-icon |
|||
> |
|||
<el-form-item prop="activityName" label="精网号:"> |
|||
<el-input |
|||
v-model="excelData.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="所属地区:" |
|||
><el-select |
|||
v-model="excelData.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="更新时间:"> |
|||
<el-radio-group v-model="excelData.timegap"> |
|||
<el-radio value="1">今天</el-radio> |
|||
<el-radio value="3">近三天</el-radio> |
|||
<el-radio value="7">近一周</el-radio> |
|||
<el-radio value="30">近一个月</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
@click="exportConfirm()" |
|||
>确定</el-button |
|||
> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { reactive, ref } from 'vue' |
|||
import { FormInstance } from 'element-plus' |
|||
import { ElMessage } from 'element-plus' |
|||
import moment from 'moment' |
|||
import API from '@/util/http' |
|||
import { utils, write } from 'xlsx' |
|||
import { saveAs } from 'file-saver' |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
const dialogVisible = ref(false) |
|||
const excelData = reactive({ |
|||
jwcode: '', |
|||
area: '', |
|||
timegap: '', |
|||
startTime: '', |
|||
endTime: '' |
|||
}) |
|||
const priceValue = ref(0) |
|||
const countValue = ref(0) |
|||
const areaList = ref<string[]>([]) |
|||
const isExport = ref<boolean>(false) |
|||
const rules = ref({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
area: [{ required: true, message: '请选择所属地区', trigger: 'change' }] |
|||
}) |
|||
const handlePageSizeChange = (val) => { |
|||
getObj.value.pageSize = val |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
getInit({}) |
|||
} |
|||
const platformList = ref<string[]>([ |
|||
// 'stripe', |
|||
// 'ios', |
|||
// 'FirstData', |
|||
// 'paymentasia', |
|||
// 'system', |
|||
// '金币系统' |
|||
]) |
|||
const typeList = ref<string[]>([ |
|||
'金币换金豆', |
|||
'金币换免费金豆', |
|||
'赠送金豆', |
|||
'购买金豆', |
|||
'客服操作' |
|||
]) |
|||
//搜索表单数据 |
|||
const detailY = ref({ |
|||
jwcode: '', |
|||
deptName: '', |
|||
orderNo: '', |
|||
payStyle: '', |
|||
type: '', |
|||
createTime: '' |
|||
}) |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
const exportExcel = function () { |
|||
dialogVisible.value = true |
|||
isExport.value = true |
|||
} |
|||
const exportConfirm = function () { |
|||
if (excelData.timegap == '1') { |
|||
excelData.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '3') { |
|||
excelData.startTime = moment() |
|||
.subtract(3, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '7') { |
|||
excelData.startTime = moment() |
|||
.subtract(7, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} else if (excelData.timegap == '30') { |
|||
excelData.startTime = moment() |
|||
.subtract(30, 'days') |
|||
.startOf('day') |
|||
.format('YYYY-MM-DD HH:mm:ss') |
|||
excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') |
|||
} |
|||
getInit( |
|||
{ |
|||
sortField: '', |
|||
sortOrder: '' |
|||
}, |
|||
(data) => { |
|||
console.log('导出数据', data) |
|||
//导出的数据将字段映射 |
|||
data = data.map((item) => { |
|||
return { |
|||
姓名: item.name, |
|||
精网号: item.jwcode, |
|||
地区: item.deptName, |
|||
订单号: item.orderNo, |
|||
充值平台: item.payStyle, |
|||
金豆数量: item.count, |
|||
充值时间: moment(item.successTime).format('YYYY-MM-DD'), |
|||
金额: item.price |
|||
} |
|||
}) |
|||
if (data.length == 0) { |
|||
ElMessage.error('没有数据') |
|||
isExport.value = false |
|||
dialogVisible.value = false |
|||
return |
|||
} |
|||
console.log('导出数据', data) |
|||
excelExport(data) |
|||
} |
|||
) |
|||
} |
|||
//数据导出excel |
|||
const excelExport = async function (data) { |
|||
const worksheet = utils.json_to_sheet(data) |
|||
const workbook = utils.book_new() |
|||
utils.book_append_sheet(workbook, worksheet, 'Sheet1') |
|||
|
|||
const wbout = write(workbook, { bookType: 'xlsx', type: 'array' }) |
|||
saveAs( |
|||
new Blob([wbout], { type: 'application/octet-stream' }), |
|||
'数据导出.xlsx' |
|||
) |
|||
isExport.value = false |
|||
dialogVisible.value = false |
|||
} |
|||
const ruleFormRef = ref<FormInstance>() |
|||
//初始化 |
|||
const getInit = async function ( |
|||
{ |
|||
sortField = '', |
|||
sortOrder = '' |
|||
}: { |
|||
sortField?: string |
|||
sortOrder?: string |
|||
}, |
|||
callback?: Function |
|||
) { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
const [startTime, endTime] = detailY.value.createTime |
|||
console.log(startTime, endTime) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/dou/SearchPay', |
|||
data: { |
|||
pay: { |
|||
jwcode: isExport.value ? excelData.jwcode : detailY.value.jwcode, |
|||
deptName: isExport.value ? excelData.area : detailY.value.deptName, |
|||
startTime: isExport.value ? excelData.startTime : startTime || '', |
|||
endTime: isExport.value ? excelData.endTime : endTime || '', |
|||
payStyle: isExport.value ? '' : detailY.value.payStyle, |
|||
// type: isExport.value ? '' : detailY.value.type, |
|||
orderNo: isExport.value ? '' : detailY.value.orderNo, |
|||
sortField, |
|||
sortOrder |
|||
}, |
|||
pageNum: isExport.value ? '' : getObj.value.pageNum, |
|||
pageSize: isExport.value ? '' : getObj.value.pageSize |
|||
} |
|||
}) |
|||
|
|||
if (isExport.value) { |
|||
!!callback && callback(result.data) |
|||
} else { |
|||
tableData.value = result.data.list |
|||
total.value = result.data.total |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// const handleSortChange = (column) => { |
|||
// const { prop, order } = column |
|||
// if (order === 'ascending') { |
|||
// getInit({ sortField: prop, sortOrder: 'ASC' }) |
|||
// } else if (order === 'descending') { |
|||
// getInit({ sortField: prop, sortOrder: 'DESC' }) |
|||
// } |
|||
// } |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
getInit({}) |
|||
getCount() |
|||
} |
|||
// 重置 |
|||
const reset = function (formEl) { |
|||
formEl.resetFields() |
|||
} |
|||
//充值平台接口 |
|||
const getPayPlatform = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/SearchStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取地区接口 |
|||
const getArea = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/SearchPayIp' |
|||
}) |
|||
areaList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取支付方式接口 |
|||
const getPayType = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getStyle' |
|||
}) |
|||
platformList.value = result.data |
|||
// typeList.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
//获取金豆数接口 |
|||
const getCount = async () => { |
|||
try { |
|||
const result = await API({ |
|||
url: '/dou/getRechargeTotal', |
|||
data: { |
|||
jwcode: detailY.value.jwcode, |
|||
deptName: detailY.value.deptName, |
|||
startTime: detailY.value.createTime[0], |
|||
endTime: detailY.value.createTime[1], |
|||
orderNo: detailY.value.orderNo, |
|||
payStyle: detailY.value.payStyle |
|||
} |
|||
}) |
|||
if (!!result.data) { |
|||
console.log('合计数', result.data) |
|||
const { priceTotal, countTotal } = result.data |
|||
console.log('金豆总数', priceTotal, countTotal) |
|||
priceValue.value = priceTotal |
|||
countValue.value = countTotal |
|||
} else { |
|||
priceValue.value = 0 |
|||
countValue.value = 0 |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
getInit({}) |
|||
getArea() |
|||
getPayType() |
|||
getCount() |
|||
getPayPlatform() |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.filter-box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px; |
|||
padding-bottom: 0px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
margin-bottom: 20px; |
|||
border-radius: 5px; |
|||
.el-form { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 20px; |
|||
column-gap: 20px; |
|||
} |
|||
} |
|||
.table-box { |
|||
width: 100%; |
|||
padding: 20px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|||
border-radius: 5px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -1,375 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed, watch } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import ElementPlus from 'element-plus' |
|||
import { VscGlobe } from 'vue-icons-plus/vsc' |
|||
import { ElMessage } from 'element-plus' |
|||
import axios from 'axios' |
|||
import { ElMessageBox } from 'element-plus' |
|||
import API from '@/util/http' |
|||
import dmmn from '../assets/动漫美女.png' |
|||
import { useRoute } from 'vue-router' |
|||
import { storeToRefs } from 'pinia' |
|||
import { useAreaStore } from '@/store/area' |
|||
const router = useRouter() |
|||
const imgrule1 = dmmn |
|||
const messageVisible = ref(false) |
|||
const areaStore = useAreaStore() |
|||
const { currentArea, updateArea } = storeToRefs(areaStore) |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({ |
|||
name: '' |
|||
}) |
|||
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 areas = ref([]) |
|||
const getAreas = async function () { |
|||
try { |
|||
const result = await API({ url: '/recharge/user/search', data: {} }) |
|||
areas.value = result.data |
|||
console.log('请求成功', result) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 查看个人信息弹出框 |
|||
const openMessage = function () { |
|||
messageVisible.value = true |
|||
} |
|||
const closeMessage = function () { |
|||
messageVisible.value = false |
|||
} |
|||
const message = function () { |
|||
openMessage() |
|||
} |
|||
|
|||
// 获取machineId |
|||
|
|||
function logout() { |
|||
const machineId = localStorage.getItem('machineId') |
|||
console.log('machineId:', machineId) |
|||
localStorage.removeItem('token') |
|||
// localStorage.clear(); |
|||
router.push('/login?machineId=' + machineId) |
|||
//添加刷新页面的代码 |
|||
// window.location.reload(); |
|||
ElMessage.success('退出成功') |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
// 获取用户信息 |
|||
getAdminData() |
|||
// 获取地区 |
|||
getAreas() |
|||
}) |
|||
// 处理地区点击事件 |
|||
const changeDataByArea = (item) => { |
|||
areaStore.updateArea(item) |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-aside |
|||
style=" |
|||
width: 15%; |
|||
min-width: 180px; |
|||
position: fixed; /* 固定位置 */ |
|||
top: 0; |
|||
left: 0; |
|||
height: 100vh; /* 高度占满视口 */ |
|||
z-index: 100; /* 确保侧边栏在其他元素之上 */ |
|||
" |
|||
> |
|||
<div class="logo"> |
|||
<img |
|||
src="../assets/金币管理系统logo.png" |
|||
alt="logo" |
|||
style="width: 30px; height: 30px" |
|||
/> |
|||
<div style="font-size: 16px; font-weight: bold">海外金币管理系统</div> |
|||
</div> |
|||
<el-menu |
|||
:router="true" |
|||
background-color="#08193d" |
|||
active-text-color="#ffd04b" |
|||
text-color="white" |
|||
class="el-menu-vertical-demo" |
|||
> |
|||
<el-menu-item |
|||
index="/workspace" |
|||
v-if=" |
|||
adminData.permission == 1 || |
|||
adminData.permission == 2 || |
|||
adminData.permission == 3 || |
|||
adminData.permission == 5 |
|||
" |
|||
> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
工作台 |
|||
</el-menu-item> |
|||
|
|||
<el-sub-menu |
|||
index="2" |
|||
v-if=" |
|||
adminData.permission == 1 || |
|||
adminData.permission == 3 || |
|||
adminData.permission == 5 |
|||
" |
|||
> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>财务审核</span> |
|||
</template> |
|||
<el-menu-item index="/rechargeAudit">充值审核</el-menu-item> |
|||
<el-menu-item index="/refundAudit">退款审核</el-menu-item> |
|||
</el-sub-menu> |
|||
|
|||
<el-sub-menu |
|||
index="3" |
|||
v-if=" |
|||
adminData.permission == 1 || |
|||
adminData.permission == 3 || |
|||
adminData.permission == 5 |
|||
" |
|||
> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>充值管理</span> |
|||
</template> |
|||
<el-menu-item index="/activity">活动管理</el-menu-item> |
|||
<el-menu-item index="/rate">汇率管理</el-menu-item> |
|||
</el-sub-menu> |
|||
|
|||
<el-sub-menu |
|||
index="4" |
|||
v-if=" |
|||
adminData.permission == 1 || |
|||
adminData.permission == 2 || |
|||
adminData.permission == 5 |
|||
" |
|||
> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>充值</span> |
|||
</template> |
|||
|
|||
<el-sub-menu index="5"> |
|||
<template #title>金币充值</template> |
|||
<el-menu-item index="/addRecharge">新增充值</el-menu-item> |
|||
<el-menu-item index="/adminRecharge">客服充值明细</el-menu-item> |
|||
<el-menu-item index="/allRecharge">所有充值明细</el-menu-item> |
|||
</el-sub-menu> |
|||
</el-sub-menu> |
|||
|
|||
<el-sub-menu |
|||
index="6" |
|||
v-if=" |
|||
adminData.permission == 1 || |
|||
adminData.permission == 2 || |
|||
adminData.permission == 5 |
|||
" |
|||
> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>消费</span> |
|||
</template> |
|||
<el-sub-menu index="7"> |
|||
<template #title>金币消费</template> |
|||
<el-menu-item index="/addConsume">新增消费</el-menu-item> |
|||
<el-menu-item index="/allConsume">所有消费明细</el-menu-item> |
|||
</el-sub-menu> |
|||
</el-sub-menu> |
|||
|
|||
<el-sub-menu |
|||
index="8" |
|||
v-if=" |
|||
adminData.permission == 1 || |
|||
adminData.permission == 2 || |
|||
adminData.permission == 5 |
|||
" |
|||
> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>退款</span> |
|||
</template> |
|||
<el-sub-menu index="9"> |
|||
<template #title>金币退款</template> |
|||
<el-menu-item index="/addRefund">新增退款</el-menu-item> |
|||
<el-menu-item index="/allRefund">退款明细</el-menu-item> |
|||
</el-sub-menu> |
|||
</el-sub-menu> |
|||
<el-sub-menu index="10"> |
|||
<template #title |
|||
><el-icon> <Folder /> </el-icon>金豆模块</template |
|||
> |
|||
<el-menu-item index="/addGoldenBeen">金豆充值</el-menu-item> |
|||
<el-menu-item index="/goldenBeenDetail">金豆充值明细</el-menu-item> |
|||
<el-menu-item index="/onLineDetail">线上充值明细</el-menu-item> |
|||
<el-menu-item index="/goldenBeenConsum">金豆消费明细</el-menu-item> |
|||
<el-menu-item index="/goldenBeenBalance">客户金豆余额</el-menu-item> |
|||
</el-sub-menu> |
|||
<el-menu-item |
|||
index="/usergold" |
|||
v-if=" |
|||
adminData.permission == 1 || |
|||
adminData.permission == 2 || |
|||
adminData.permission == 3 || |
|||
adminData.permission == 5 |
|||
" |
|||
> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
客户金币明细 |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item |
|||
index="/usergoldInfo" |
|||
v-if=" |
|||
adminData.permission == 1 || |
|||
adminData.permission == 2 || |
|||
adminData.permission == 3 || |
|||
adminData.permission == 5 |
|||
" |
|||
> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
客户金币余额 |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item index="/permissions" v-if="adminData.permission == 1"> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
权限管理 |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-aside> |
|||
<el-container style="margin-left: 15%; min-width: 180px"> |
|||
<!-- 修改 el-header 样式 --> |
|||
<el-header |
|||
style=" |
|||
position: fixed; |
|||
top: 0; |
|||
left: 15%; |
|||
right: 0; |
|||
z-index: 101; |
|||
background: white; |
|||
" |
|||
> |
|||
<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false"> |
|||
<el-sub-menu index="1" class="area"> |
|||
<template #title> |
|||
<VscGlobe /> |
|||
<!-- {{ currentArea }} --> |
|||
</template> |
|||
<!-- <el-menu-item |
|||
v-for="(item, index) in areas" |
|||
:key="index" |
|||
@click="changeDataByArea(item)" |
|||
> |
|||
{{ item }} |
|||
</el-menu-item> --> |
|||
</el-sub-menu> |
|||
</el-menu> |
|||
<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false"> |
|||
<el-sub-menu index="1" class="admin"> |
|||
<template #title> |
|||
<el-image |
|||
:src="imgrule1" |
|||
alt="错误" |
|||
style="width: 50px; height: 50px" |
|||
/> |
|||
<span style="margin-left: 10px">{{ adminData.name }}</span> |
|||
</template> |
|||
<el-menu-item @click="message()">查看个人信息</el-menu-item> |
|||
<el-menu-item index="1-2" @click="logout">退出登录</el-menu-item> |
|||
</el-sub-menu> |
|||
</el-menu> |
|||
</el-header> |
|||
<!-- 修改 el-main 样式 --> |
|||
<el-main style="margin-top: 60px"> |
|||
<!-- 60px 是 el-header 的大致高度,可根据实际情况调整 --> |
|||
<router-view></router-view> |
|||
</el-main> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
<!-- 查看个人信息 --> |
|||
<el-dialog v-model="messageVisible" title="查看个人信息" width="500px"> |
|||
<el-form :model="adminData"> |
|||
<el-form-item label="用户姓名" label-width="100px" label-position="left"> |
|||
<span class="message-font">{{ adminData.name }}</span> |
|||
</el-form-item> |
|||
<el-form-item label="精网号" label-width="100px" label-position="left"> |
|||
<span class="message-font">{{ adminData.jwcode }}</span> |
|||
</el-form-item> |
|||
<el-form-item label="地区" label-width="100px" label-position="left"> |
|||
<span class="message-font">{{ adminData.area }}</span> |
|||
</el-form-item> |
|||
<el-form-item label="注册时间" label-width="100px" label-position="left"> |
|||
<span class="message-font">{{ adminData.createTime }}</span> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button text @click="closeMessage()">关闭</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.message-font { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.admin { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.el-aside { |
|||
background-color: #08193d; |
|||
min-height: 100vh; |
|||
width: 200px; |
|||
} |
|||
|
|||
.logo { |
|||
color: white; |
|||
margin: 20px 0px 20px 20px; |
|||
display: flex; |
|||
} |
|||
.el-menu { |
|||
border: none; /* 去除边框 */ |
|||
padding: 0; /* 去除内边距 */ |
|||
} |
|||
.el-menu-demo { |
|||
float: right; /* 将菜单向右浮动 */ |
|||
} |
|||
</style> |
|||
@ -1,225 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import axios from 'axios' |
|||
import request from '@/util/http' |
|||
import { useRouter } from 'vue-router' |
|||
import { VscGlobe } from 'vue-icons-plus/vsc' |
|||
|
|||
//获取当前浏览器地址 |
|||
var url = window.location.href //上传服务器时打开注释并注释掉下一行 |
|||
//截取machineId=后的字符串 |
|||
var machineId = null |
|||
// 从浏览器地址获取machineId的方法 |
|||
function getMachineId() { |
|||
var parts = url.split('machineId=') |
|||
if (parts.length > 1) { |
|||
machineId = parts[1].split('&')[0] // 进一步截取 & 之前的字符串 |
|||
} |
|||
// machineId = decodeURIComponent(machineId); //如果machineId需要前端转码可以打开注释 |
|||
console.log('MachineId字符串:', machineId) // 输出 machineId 的值 |
|||
// 将 machineId 存储到本地存储中 |
|||
if (machineId) { |
|||
localStorage.setItem('machineId', machineId) |
|||
} |
|||
} |
|||
getMachineId() |
|||
|
|||
const router = useRouter() // 获取路由实例 |
|||
let formData = new FormData() |
|||
// 添加表单数据到FormData对象中 |
|||
// formData.append("jwcode", form.value.jwcode); |
|||
// formData.append("password", form.value.password); |
|||
|
|||
const form = ref({ jwcode: '', password: '', token: '', machineId: machineId }) |
|||
//调用方法 |
|||
const login = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/login', |
|||
data: form.value |
|||
}) |
|||
console.log('resultresult', result) |
|||
if (result.code == 200) { |
|||
localStorage.setItem('token', result.msg) |
|||
localStorage.setItem('permission', result.data.permission) |
|||
if ( |
|||
result.data.permission == '5' || |
|||
result.data.permission == '1' || |
|||
result.data.permission == '2' || |
|||
result.data.permission == '3' |
|||
) { |
|||
router.push('/usergold') |
|||
} else if (result.data.permission == '4') { |
|||
router.push('/noPermission') |
|||
} |
|||
ElMessage.success('登录成功') |
|||
console.log('请求成功', result) |
|||
} else { |
|||
form.value.password = '' |
|||
form.value.jwcode = '' |
|||
ElMessage.error(result.msg) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('登录失败,请检查账号密码') |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-row class="login-page"> |
|||
<img |
|||
:span="12" |
|||
src="../assets/background.jpg" |
|||
alt="logo" |
|||
class="bg" |
|||
fit="fit" |
|||
/> |
|||
<!-- <div style="height: 100vh; width: 1000px" class="container"></div> --> |
|||
<el-col :span="6" :offset="3" class="form"> |
|||
<!-- 登录表单 --> |
|||
<el-form :model="form" size="large" autocomplete="off"> |
|||
<el-form-item> |
|||
<h1 style="color: #409eff">金币系统登录</h1> |
|||
</el-form-item> |
|||
<el-form-item prop="jwcode"> |
|||
<el-input v-model="form.jwcode" placeholder="请输入精网号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="password"> |
|||
<el-input |
|||
v-model="form.password" |
|||
type="password" |
|||
placeholder="请输入密码" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item class="flex"> </el-form-item> |
|||
<!-- 登录按钮 --> |
|||
<el-form-item> |
|||
<button type="button" class="button" @click="login()"> |
|||
<svg |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
fill="none" |
|||
viewBox="0 0 24 24" |
|||
height="30" |
|||
width="24" |
|||
> |
|||
<path |
|||
fill="white" |
|||
d="M23.15 2.587L18.21 0.210001C17.9308 0.075557 17.6167 0.031246 17.3113 0.083204C17.0058 0.135162 16.724 0.280818 16.505 0.500001L7.04499 9.13L2.92499 6.002C2.73912 5.86101 2.50976 5.78953 2.27669 5.79994C2.04363 5.81035 1.82156 5.902 1.64899 6.059L0.326993 7.261C0.223973 7.35465 0.141644 7.46878 0.0852761 7.59608C0.0289081 7.72339 -0.00025659 7.86106 -0.000350724 8.00028C-0.000444857 8.1395 0.0285336 8.27721 0.0847294 8.40459C0.140925 8.53197 0.2231 8.64621 0.325993 8.74L3.89899 12L0.325993 15.26C0.2231 15.3538 0.140925 15.468 0.0847294 15.5954C0.0285336 15.7228 -0.000444857 15.8605 -0.000350724 15.9997C-0.00025659 16.1389 0.0289081 16.2766 0.0852761 16.4039C0.141644 16.5312 0.223973 16.6454 0.326993 16.739L1.64999 17.94C1.82256 18.097 2.04463 18.1887 2.27769 18.1991C2.51076 18.2095 2.74012 18.138 2.92599 17.997L7.04599 14.869L16.506 23.499C16.7248 23.7182 17.0064 23.8639 17.3117 23.9159C17.6171 23.9679 17.931 23.9235 18.21 23.789L23.152 21.412C23.4062 21.2893 23.6207 21.0973 23.7707 20.8581C23.9207 20.619 24.0002 20.3423 24 20.06V3.939C24 3.65647 23.9203 3.37967 23.7699 3.14048C23.6195 2.90129 23.4046 2.70943 23.15 2.587ZM18.004 17.448L10.826 12L18.004 6.552V17.448Z" |
|||
></path> |
|||
</svg> |
|||
<p class="text">登录</p> |
|||
</button> |
|||
<!-- <el-button |
|||
class="button" |
|||
type="primary" |
|||
auto-insert-space |
|||
@click="login()" |
|||
>登录</el-button |
|||
> --> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
<style scoped> |
|||
.bg { |
|||
border-radius: 0 20px 20px 0; |
|||
height: 110vh; |
|||
width: 50%; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.background { |
|||
color: #fffdfd; |
|||
text-align: center; |
|||
font-size: 24px; |
|||
background-color: #08193d; |
|||
} |
|||
|
|||
.form { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
user-select: none; |
|||
|
|||
.title { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.button { |
|||
width: 100%; |
|||
} |
|||
|
|||
.flex { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
|
|||
/* From Uiverse.io by kamehame-ha */ |
|||
.button { |
|||
height: 50px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10px 15px; |
|||
gap: 15px; |
|||
background-color: #1b95e6; |
|||
outline: 3px #1b95e6 solid; |
|||
outline-offset: -3px; |
|||
border-radius: 5px; |
|||
border: none; |
|||
cursor: pointer; |
|||
transition: 400ms; |
|||
} |
|||
|
|||
.button .text { |
|||
color: white; |
|||
font-weight: 700; |
|||
font-size: 1em; |
|||
transition: 400ms; |
|||
} |
|||
|
|||
.button svg path { |
|||
transition: 400ms; |
|||
} |
|||
|
|||
.button:hover { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.button:hover .text { |
|||
color: #007acc; |
|||
} |
|||
|
|||
.button:hover svg path { |
|||
fill: #007acc; |
|||
} |
|||
|
|||
/* .box { |
|||
padding: 20px; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} */ |
|||
/* From Uiverse.io by marsella_3472 */ |
|||
/* |
|||
More comprehensive version at shenanigans.shoghisimon.ca/collection/css |
|||
*/ |
|||
/* From Uiverse.io by SelfMadeSystem */ |
|||
.container { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(#000 1px, #0000 0), |
|||
linear-gradient(90deg, #000, #0000, #000), |
|||
linear-gradient(in oklch longer hue -2deg, #a00, #a00); |
|||
background-size: 100% 2px, 100% 100%, 100% 100%; |
|||
} |
|||
</style> |
|||
@ -1,809 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, computed, reactive } from 'vue' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import axios from 'axios' |
|||
import { createApp } from 'vue' |
|||
import moment from 'moment' |
|||
import API from '../../api/index.js' |
|||
import _ from 'lodash' |
|||
import request from '@/util/http' |
|||
|
|||
// 查询用户接口 |
|||
const adminData = ref({ |
|||
name: '' |
|||
}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/userinfo', |
|||
data: {} |
|||
}) |
|||
adminData.value = result |
|||
rateAdd.value.adminId = adminData.value.adminId |
|||
rateEdit.value.adminId = adminData.value.adminId |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', user.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
getAdminData() |
|||
|
|||
const regeAdd = ref(false) |
|||
const regeEdit = ref(false) |
|||
|
|||
//汇率表格数据 |
|||
const tableData = ref([]) |
|||
//搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}) |
|||
const total = ref(0) |
|||
//分页总条目 |
|||
|
|||
//时间选择器 |
|||
const value1 = ref({ |
|||
startTime: '', |
|||
endTime: '' |
|||
}) // 时间数组 |
|||
function handleDateChange(value) { |
|||
if (value && value.length === 2) { |
|||
value1.value.startTime = value[0] // 开始日期 |
|||
value1.value.endTime = value[1] // 结束日期 |
|||
} |
|||
console.log(value1) |
|||
} |
|||
|
|||
const time = ref({}) |
|||
const get = async function (val) { |
|||
// 搜索参数时间赋值 |
|||
if (value1.value != null) { |
|||
if (value1.value.startDate != '' && value1.value.endDate != '') { |
|||
time.value.startTime = value1.value[0] |
|||
time.value.endTime = value1.value[1] |
|||
} |
|||
} else { |
|||
time.value.startTime = '' |
|||
time.value.endTime = '' |
|||
} |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
|
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/rates/search', |
|||
data: { |
|||
...getObj.value, |
|||
rate: { ...time.value } |
|||
} |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
// 在这里可以根据需求进一步处理成功后的逻辑,比如更新UI显示成功消息等 |
|||
// 存储分页总条目 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 添加方法 |
|||
const rateAdd = ref({}) |
|||
const addRate = async function () { |
|||
rateAdd.value.adminId = adminData.value.adminId |
|||
if (rateAdd.value.startTime) { |
|||
const date = new Date(rateAdd.value.startTime) |
|||
date.setHours(0, 0, 0, 0) |
|||
rateAdd.value.startTime = `${date.getFullYear()}-${String( |
|||
date.getMonth() + 1 |
|||
).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 00:00:00` |
|||
} |
|||
if (rateAdd.value.endTime) { |
|||
const date = new Date(rateAdd.value.endTime) |
|||
date.setHours(23, 59, 59, 999) |
|||
rateAdd.value.endTime = `${date.getFullYear()}-${String( |
|||
date.getMonth() + 1 |
|||
).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 23:59:59` |
|||
} |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/rates/add', |
|||
data: rateAdd.value |
|||
}) |
|||
if (result.code == 0) { |
|||
ElMessage.error(result.msg) |
|||
} |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
get() |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
const add = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm('确认添加?') |
|||
.then(() => { |
|||
addRate() |
|||
rateAdd.value = {} |
|||
value1.value = { |
|||
startTime: '', |
|||
endTime: '' |
|||
} |
|||
regeAdd.value = false |
|||
}) |
|||
.catch(() => { |
|||
regeAdd.value = false |
|||
}) |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
// 使用 _.throttle 并设置 trailing 为 false 实现严格节流,只执行一次 |
|||
const throttledAdd = _.throttle(add, 5000, { trailing: false }) |
|||
// 编辑方法 |
|||
const rateEdit = ref({}) |
|||
//查询已有的数据 |
|||
const getEditData = async function (row) { |
|||
try { |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/rates/searchById?rateId=' + row.rateId, |
|||
data: {} |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储表格数据 |
|||
|
|||
rateEdit.value = result.data |
|||
rateEdit.value.adminId = adminData.value.adminId |
|||
console.log('这是编辑的数值', rateEdit.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
const editRate = async function () { |
|||
if (rateEdit.value.startTime) { |
|||
const date = new Date(rateEdit.value.startTime) |
|||
date.setHours(0, 0, 0, 0) |
|||
rateEdit.value.startTime = `${date.getFullYear()}-${String( |
|||
date.getMonth() + 1 |
|||
).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 00:00:00` |
|||
} |
|||
if (rateEdit.value.endTime) { |
|||
const date = new Date(rateEdit.value.endTime) |
|||
date.setHours(23, 59, 59, 999) |
|||
rateEdit.value.endTime = `${date.getFullYear()}-${String( |
|||
date.getMonth() + 1 |
|||
).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 23:59:59` |
|||
} |
|||
try { |
|||
console.log('搜索参数', rateEdit.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/rates/update', |
|||
data: rateEdit.value |
|||
}) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
get() |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
const edit = () => { |
|||
ElMessageBox.confirm('确认修改?') |
|||
.then(() => { |
|||
editRate() |
|||
regeEdit.value = false |
|||
}) |
|||
.catch(() => { |
|||
regeEdit.value = false |
|||
}) |
|||
} |
|||
|
|||
// 删除方法 |
|||
const deleteRate = async function (row) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/rates/delete/ ' + row.rateId, |
|||
data: {} |
|||
}) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
get() |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
get() |
|||
}) |
|||
//分页 |
|||
function handlePageChange(currentPage, pageSize) { |
|||
get() |
|||
} |
|||
//货币条目 |
|||
const options = [ |
|||
{ |
|||
value: 'USD', |
|||
label: 'USD' |
|||
}, |
|||
{ |
|||
value: 'HKD', |
|||
label: 'HKD' |
|||
}, |
|||
{ |
|||
value: 'THB', |
|||
label: 'THB' |
|||
}, |
|||
{ |
|||
value: 'VND', |
|||
label: 'VND' |
|||
}, |
|||
{ |
|||
value: 'CAD', |
|||
label: 'CAD' |
|||
}, |
|||
{ |
|||
value: 'MYR', |
|||
label: 'MYR' |
|||
}, |
|||
{ |
|||
value: 'KRW', |
|||
label: 'KRW' |
|||
}, |
|||
{ |
|||
value: 'JPY', |
|||
label: 'JPY' |
|||
}, |
|||
{ |
|||
value: 'CNY', |
|||
label: 'CNY' |
|||
} |
|||
] |
|||
|
|||
function formatDate(value) { |
|||
if (!value) return '' |
|||
const date = new Date(value) |
|||
const year = date.getFullYear() |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0') |
|||
const day = date.getDate().toString().padStart(2, '0') |
|||
const hours = date.getHours().toString().padStart(2, '0') |
|||
const minutes = date.getMinutes().toString().padStart(2, '0') |
|||
const seconds = date.getSeconds().toString().padStart(2, '0') |
|||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` |
|||
} |
|||
function formatDateTwe(value) { |
|||
if (!value) return '' |
|||
const date = new Date(value) |
|||
const year = date.getFullYear() |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0') |
|||
const day = date.getDate().toString().padStart(2, '0') |
|||
return `${year}-${month}-${day}` |
|||
} |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 1) * 50 + "px"; |
|||
// }); |
|||
|
|||
// 新增数据规则 |
|||
// 表单验证ref |
|||
const Ref = ref(null) |
|||
const handleStartTimeChange = () => { |
|||
Ref.value.validateField('endTime') |
|||
} |
|||
const checkStartTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error('开始时间不能小于当前时间')) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
const checkEndTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error('结束时间不能小于当前时间')) |
|||
} else if (value <= rateAdd.value.startTime) { |
|||
callback(new Error('结束时间不能小于开始时间')) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
const checkFreeGoldRadio = function (rule, value, callback) { |
|||
if (value == '0' || value == null || value == '') { |
|||
callback(new Error('请输入汇率比')) |
|||
} else if (value < 0 || isNaN(value)) { |
|||
callback(new Error('请输入正确的格式')) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
const rules = reactive({ |
|||
currency: [{ required: true, message: '请选择货币名称', trigger: 'blur' }], |
|||
exchangeRate: [{ validator: checkFreeGoldRadio, trigger: 'blur' }], |
|||
startTime: [ |
|||
{ required: true, message: '请选择开始时间', trigger: 'blur' }, |
|||
{ validator: checkStartTime, trigger: 'blur' } |
|||
], |
|||
endTime: [ |
|||
{ required: true, message: '请选择结束时间', trigger: 'blur' }, |
|||
{ validator: checkEndTime, trigger: 'blur' } |
|||
] |
|||
}) |
|||
|
|||
// 重置的按钮 |
|||
const handledelete = function () { |
|||
value1.value = {} |
|||
startTime.value = '' |
|||
endTime.value = '' |
|||
} |
|||
// 验证跳转输入框的数字是否合法 |
|||
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 delConfirm = async function (row) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/rates/delete/ ' + row.rateId, |
|||
data: {} |
|||
}) |
|||
if (result.code == 200) { |
|||
ElMessage({ |
|||
type: 'success', |
|||
message: '删除成功' |
|||
}) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 刷新表格数据 |
|||
get() |
|||
} else { |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '删除失败' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
//这是限制输入小数不超过七位的限制方法 |
|||
function handleInput(value) { |
|||
// 限制小数点后7位,这里使用正则表达式来实现 |
|||
rateAdd.value.exchangeRate = value |
|||
.replace(/(\.\d{7})\d+/, '$1') |
|||
.replace(/^(\d+)(\.\d{0,7})?$/, '$1$2') |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<!-- 这是主页面 --> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<!-- 这是时间 --> |
|||
<div class="demo-range"> |
|||
时间: |
|||
<el-date-picker |
|||
v-model="value1" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
:size="size" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
<!-- 按钮 --> |
|||
<el-button |
|||
class="button-item" |
|||
type="primary" |
|||
style="float: right" |
|||
@click="search()" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="button-item" |
|||
style="float: right" |
|||
@click="handledelete" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col> |
|||
<el-card class="box-card" style="max-width: 100%"> |
|||
<!-- 添加 --> |
|||
<div class="add-item"> |
|||
<el-button |
|||
style="color: #048efb; border: 1px solid #048efb" |
|||
@click="regeAdd = true" |
|||
>新增汇率</el-button |
|||
> |
|||
</div> |
|||
<!-- 表格 --> |
|||
<div> |
|||
<el-table |
|||
:data="tableData" |
|||
v-if="(tableData.flag = 1)" |
|||
:height="tableHeight" |
|||
style="width: 100%" |
|||
> |
|||
<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="currency" label="货币名称" :span="2" /> |
|||
<el-table-column prop="exchangeRate" label="汇率" :span="2"> |
|||
<template #default="scope"> |
|||
<p> |
|||
{{ scope.row.exchangeRate }}{{ scope.row.currency }} :1新币 |
|||
</p> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="createTime" label="添加时间" :span="3"> |
|||
<template #default="scope"> |
|||
<span>{{ formatDate(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="adminName" label="提交人" :span="1" /> |
|||
<el-table-column prop="status" label="状态"> |
|||
<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="red-dot"></span> |
|||
<span>未开始</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>已过期</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="startTime" label="持续时间" :span="10"> |
|||
<template #default="scope"> |
|||
<span>{{ formatDateTwe(scope.row.startTime) }}</span> |
|||
<span>---</span> |
|||
<span>{{ formatDateTwe(scope.row.endTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" :span="3"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
type="text" |
|||
@click=" |
|||
() => { |
|||
regeEdit = true |
|||
getEditData(scope.row) |
|||
} |
|||
" |
|||
>编辑</el-button |
|||
> |
|||
<el-popconfirm |
|||
title="确定将此条活动删除吗?" |
|||
@confirm="delConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button type="primary" text> 删除 </el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
@click="confirm(scope.row)" |
|||
> |
|||
确定 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</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> |
|||
|
|||
<!-- 这是添加弹窗 --> |
|||
<el-dialog |
|||
v-model="regeAdd" |
|||
title="新增汇率" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
ref="Ref" |
|||
style="max-width: 600px" |
|||
:model="rateAdd" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
:size="formSize" |
|||
status-icon |
|||
> |
|||
<el-form-item prop="currency" label="货币名称:"> |
|||
<el-select |
|||
v-model.number="rateAdd.currency" |
|||
placeholder="请选择" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="exchangeRate" label="汇率:"> |
|||
<el-input |
|||
v-model="rateAdd.exchangeRate" |
|||
@update:modelValue="handleInput" |
|||
style="width: 120px" |
|||
/> |
|||
<p class="unit">:1</p> |
|||
<p> |
|||
(提示:当前规则每 {{ rateAdd.exchangeRate }} |
|||
{{ rateAdd.currency }}可兑换 1 新币) |
|||
</p> |
|||
</el-form-item> |
|||
<el-form-item prop="adminId" label="提交人:"> |
|||
<el-input :value="adminData.name" disabled style="width: 240px" /> |
|||
</el-form-item> |
|||
<el-form-item prop="startTime" label="开始时间:"> |
|||
<el-date-picker |
|||
v-model="rateAdd.startTime" |
|||
type="date" |
|||
placeholder="请选择时间" |
|||
:default-value="new Date()" |
|||
@change="handleStartTimeChange" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="endTime" label="结束时间:"> |
|||
<el-date-picker |
|||
v-model="rateAdd.endTime" |
|||
type="date" |
|||
placeholder="请选择时间" |
|||
:default-value="new Date()" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" @click="throttledAdd">添加</el-button> |
|||
<el-button @click="regeAdd = false">取消</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<!-- 这是编辑弹窗 --> |
|||
<el-dialog |
|||
v-model="regeEdit" |
|||
title="修改汇率" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="rateEdit" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
:size="formSize" |
|||
status-icon |
|||
> |
|||
<el-form-item label="货币名称:"> |
|||
<el-select |
|||
v-model="rateEdit.currency" |
|||
placeholder="请选择" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="汇率:"> |
|||
<el-input v-model="rateEdit.exchangeRate" style="width: 120px" /> |
|||
<p class="unit">:1</p> |
|||
<p> |
|||
(提示:当前规则每 {{ rateEdit.exchangeRate }} |
|||
{{ rateEdit.currency }}可兑换 1 新币) |
|||
</p> |
|||
</el-form-item> |
|||
<el-form-item label="提交人:"> |
|||
<el-input disabled :value="adminData.name" style="width: 240px" /> |
|||
</el-form-item> |
|||
<el-form-item label="开始时间:"> |
|||
<el-date-picker |
|||
v-model="rateEdit.startTime" |
|||
type="date" |
|||
placeholder="请选择时间" |
|||
:default-value="new Date()" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="结束时间:"> |
|||
<el-date-picker |
|||
v-model="rateEdit.endTime" |
|||
type="date" |
|||
placeholder="请选择时间" |
|||
:default-value="new Date()" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" @click="edit">修改</el-button> |
|||
<el-button @click="regeEdit = false">取消</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
|
|||
.el-form-item { |
|||
margin-left: 70px; |
|||
} |
|||
|
|||
.ad { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.box-card { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.button-item { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.add-item { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
el-table-column { |
|||
text-align: center; |
|||
} |
|||
|
|||
p { |
|||
color: rgb(150, 150, 150); |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.el-card { |
|||
padding: 0px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
.status { |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -1,24 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed, nextTick } from "vue"; |
|||
|
|||
const image = "../src/assets/hqz大拇指.png"; |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<div> |
|||
<p style="font-size: 50px; font-weight: bold; text-align: center;"> |
|||
暂无权限 |
|||
</p> |
|||
<p style="font-size: 60px; font-weight: bold; text-align: center;"> |
|||
请联系管理员添加权限!!! |
|||
</p> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</template> |
|||
|
|||
<style scoped></style> |
|||
@ -1,902 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import { ta } from 'element-plus/es/locales.mjs' |
|||
import API from '../../api/index.js' |
|||
import { UserFilled } from '@element-plus/icons-vue' |
|||
import _ from 'lodash' |
|||
import request from '@/util/http' |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索detailY |
|||
const admin = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}) |
|||
// 新增用户权限弹窗 |
|||
const permissionAddVisible = ref(false) |
|||
// 编辑用户权限弹窗 |
|||
const permissionEditVisible = ref(false) |
|||
//选地区 |
|||
const area = ref([]) |
|||
// 选部门 |
|||
const store = ref([]) |
|||
// 新增用户权限对象 |
|||
const permissionAddObj = ref({}) |
|||
// 新增用户权限对象 |
|||
const addAdmin = ref({}) |
|||
// 编辑用户权限对象 |
|||
const permissionEditObj = ref({}) |
|||
// 删除权限对象 |
|||
const delObj = ref({}) |
|||
|
|||
// 搜索接口 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/admin/search', |
|||
data: { |
|||
...getObj.value, |
|||
admin: { ...admin.value } |
|||
} |
|||
}) |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
total.value = result.data.total |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
admin.value = {} |
|||
} |
|||
|
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/area', |
|||
data: {} |
|||
}) |
|||
area.value = result.data |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// 获取部门 |
|||
const getStore = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/store', |
|||
data: {} |
|||
}) |
|||
store.value = result.data |
|||
} 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: '请检查输入内容' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 打开新增用户权限弹窗 |
|||
const openPermissionAddVisible = function () { |
|||
permissionAddVisible.value = true |
|||
} |
|||
// 关闭新增用户权限弹窗 |
|||
const closePermissionAddVisible = function () { |
|||
permissionAddVisible.value = false |
|||
} |
|||
// 新增用户权限初始化 |
|||
const permissionAddInit = function () { |
|||
permissionAddObj.value = {} |
|||
openPermissionAddVisible() |
|||
} |
|||
// 通过精网号查询没有权限的用户 |
|||
const getAdminByJwcodeWithoutPermission = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/selectNo', |
|||
data: permissionAddObj.value |
|||
}) |
|||
if (result.code == 200) { |
|||
permissionAddObj.value = result.data[0] |
|||
ElMessage.success('精网号查询成功') |
|||
} else { |
|||
ElMessage.error(result.msg) |
|||
} |
|||
console.log('精网号查询没有权限的用户', permissionAddObj.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// 新增用户权限提交 |
|||
// const permissionAdd = async function () { |
|||
// try { |
|||
// if ( |
|||
// permissionAddObj.value.jwcode == "" || |
|||
// permissionAddObj.value.jwcode == null || |
|||
// permissionAddObj.value.name == "" || |
|||
// permissionAddObj.value.name == null |
|||
// ) { |
|||
// ElMessage.error("请选择要添加权限的用户"); |
|||
// return; |
|||
// } |
|||
// if ( |
|||
// permissionAddObj.value.permisson == "" || |
|||
// permissionAddObj.value.permission == null |
|||
// ) { |
|||
// ElMessage.error("请选择权限"); |
|||
// return; |
|||
// } |
|||
// console.log("新增用户权限提交", permissionAddObj.value); |
|||
|
|||
// const result = await request( |
|||
// { |
|||
// url: "/admin/update", |
|||
// data: permissionAddObj.value} |
|||
// ); |
|||
|
|||
// // 将响应结果存储到响应式数据中 |
|||
// console.log("请求成功", result); |
|||
|
|||
// ElMessage.success("添加成功"); |
|||
|
|||
// get(); |
|||
|
|||
// closePermissionAddVisible(); |
|||
// } catch (error) { |
|||
// console.log("新增用户权限失败", error); |
|||
// // 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
|
|||
// ElMessage.error("新增用户权限失败"); |
|||
// closePermissionAddVisible(); |
|||
// } |
|||
// }; |
|||
const permissionAdd = async function () { |
|||
Ref.value.validate(async (valid) => { |
|||
console.log('valid', valid) |
|||
if (valid) { |
|||
try { |
|||
addAdmin.value.adminFlag = 1 |
|||
addAdmin.value.status1 = 1 |
|||
const result = await request({ |
|||
url: '/admin/add', |
|||
data: addAdmin.value |
|||
}) |
|||
|
|||
if (result.code == 200) { |
|||
ElMessage.success('添加成功') |
|||
} else { |
|||
ElMessage.error(result.msg) |
|||
} |
|||
|
|||
addAdmin.value = {} |
|||
get() |
|||
|
|||
closePermissionAddVisible() |
|||
} catch (error) { |
|||
console.log('新增用户权限失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
|
|||
ElMessage.error('新增用户权限失败') |
|||
closePermissionAddVisible() |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
// 表格添加的条件 |
|||
const rules = reactive({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
name: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
|||
store: [{ required: true, message: '请输入职称', trigger: 'blur' }], |
|||
machineId: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
area: [{ required: true, message: '请选择所属地区', trigger: 'blur' }], |
|||
permission: [{ required: true, message: '请选择权限', trigger: 'blur' }] |
|||
}) |
|||
// 验证表单 |
|||
// 表单验证ref |
|||
const Ref = ref(null) |
|||
// 使用 _.throttle 并设置 trailing 为 false 实现严格节流,只执行一次 |
|||
const throttledPermissionAdd = _.throttle(permissionAdd, 5000, { |
|||
trailing: false |
|||
}) |
|||
// 权限类别 |
|||
const permissionList = [ |
|||
{ |
|||
label: '总部', |
|||
value: '1' |
|||
}, |
|||
{ |
|||
label: '地区经理', |
|||
value: '5' |
|||
}, |
|||
{ |
|||
label: '财务', |
|||
value: '3' |
|||
}, |
|||
{ |
|||
label: '客服', |
|||
value: '2' |
|||
} |
|||
] |
|||
// 获取地区 |
|||
// 获取地区 |
|||
const areaList = ref([]) |
|||
const getAreas = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await request({ |
|||
url: '/recharge/user/search', |
|||
data: {} |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// 存储地区信息 |
|||
areaList.value = result.data |
|||
console.log('地区', area.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
getAreas() |
|||
// 打开编辑用户权限弹窗 |
|||
const openPermissionEditVisible = function () { |
|||
permissionEditVisible.value = true |
|||
} |
|||
// 关闭编辑用户权限弹窗 |
|||
const closePermissionEditVisible = function () { |
|||
permissionEditVisible.value = false |
|||
} |
|||
// 编辑用户权限初始化 |
|||
const permissionEditInit = function (row) { |
|||
permissionEditObj.value = {} |
|||
permissionEditObj.value.jwcode = row.jwcode |
|||
permissionEditObj.value.name = row.name |
|||
permissionEditObj.value.area = row.area |
|||
permissionEditObj.value.store = row.store |
|||
permissionEditObj.value.permission = row.permission |
|||
console.log('编辑用户权限', permissionEditObj.value) |
|||
openPermissionEditVisible() |
|||
} |
|||
// 编辑用户权限提交 |
|||
const permissionEdit = async function () { |
|||
try { |
|||
const result = await request({ |
|||
url: '/admin/update', |
|||
data: permissionEditObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
|
|||
ElMessage.success('编辑用户权限成功') |
|||
|
|||
get() |
|||
|
|||
closePermissionEditVisible() |
|||
} catch (error) { |
|||
console.log('编辑用户权限失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
ElMessage.error('编辑用户权限失败') |
|||
|
|||
closePermissionEditVisible() |
|||
} |
|||
} |
|||
const throttledPermissionEdit = _.throttle(permissionEdit, 5000, { |
|||
trailing: false |
|||
}) |
|||
// 删除初始化 |
|||
const del = function (row) { |
|||
delObj.value = {} |
|||
console.log(row, '删除初始化') |
|||
delObj.value.jwcode = row.jwcode |
|||
} |
|||
// 删除权限 |
|||
const delConfirm = async function () { |
|||
try { |
|||
delObj.value.permission = '4' |
|||
console.log(delObj.value) |
|||
|
|||
const result = await request({ |
|||
url: '/admin/update', |
|||
data: delObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
|
|||
ElMessage.success('删除权限成功') |
|||
delObj.value = {} |
|||
get() |
|||
} catch (error) { |
|||
console.log('删除权限失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
ElMessage.error('删除权限失败') |
|||
} |
|||
} |
|||
// 禁用启用用户权限 |
|||
const editStatus = async function (row) { |
|||
try { |
|||
console.log(row) |
|||
|
|||
permissionEditObj.value = {} |
|||
permissionEditObj.value.jwcode = row.jwcode |
|||
permissionEditObj.value.status1 = row.status1 |
|||
|
|||
console.log('修改用户权限状态', permissionEditObj.value) |
|||
|
|||
const result = await request({ |
|||
url: '/admin/update', |
|||
data: permissionEditObj.value |
|||
}) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
|
|||
ElMessage.success( |
|||
permissionEditObj.value.status1 == 1 ? '启用成功' : '禁用成功' |
|||
) |
|||
permissionEditObj.value = {} |
|||
get() |
|||
} catch (error) { |
|||
console.log('修改用户权限失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get() |
|||
await getArea() |
|||
await getStore() |
|||
}) |
|||
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"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号:</el-text> |
|||
<el-input |
|||
v-model="admin.jwcode" |
|||
style="width: 240px" |
|||
placeholder="请输入精网号" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div class="head-card-element" style="margin-left: 50px"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select |
|||
v-model="admin.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="head-card-element" style="margin-left: 50px"> |
|||
<el-text class="mx-1" size="large">职位名称:</el-text> |
|||
<el-select |
|||
v-model="admin.store" |
|||
placeholder="请选择职位名称" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in store" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="head-card-btn"> |
|||
<el-button @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<!-- 添加 --> |
|||
<div class="add-item"> |
|||
<el-button |
|||
style="color: #048efb; border: 1px solid #048efb" |
|||
@click="permissionAddInit()" |
|||
>新增用户</el-button |
|||
> |
|||
</div> |
|||
|
|||
<div> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<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="jwcode" label="精网号" /> |
|||
<el-table-column prop="name" label="姓名" /> |
|||
<el-table-column prop="area" label="所属地区" /> |
|||
<el-table-column prop="store" label="职位" /> |
|||
<el-table-column prop="permission" label="部门权限"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.permission === '1'"> 总部管理员 </span> |
|||
<span v-if="scope.row.permission === '2'"> 分部财务 </span> |
|||
<span v-if="scope.row.permission === '3'"> 分部客服 </span> |
|||
<span v-if="scope.row.permission === '5'"> 分部经理 </span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="remark" label="备注" /> |
|||
<el-table-column prop="operation" label="操作" width="200px"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
type="warning" |
|||
text |
|||
@click="permissionEditInit(scope.row)" |
|||
:disabled="scope.row.status1 === 0" |
|||
> |
|||
修改权限 |
|||
</el-button> |
|||
<el-popconfirm |
|||
title="确定将此条活动删除吗?" |
|||
@confirm="delConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button |
|||
type="danger" |
|||
text |
|||
@click="del(scope.row)" |
|||
:disabled="scope.row.status1 === 0" |
|||
> |
|||
删除 |
|||
</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-column prop="status1" label="状态"> |
|||
<template #default="scope"> |
|||
<el-switch |
|||
v-model="scope.row.status1" |
|||
:active-value="1" |
|||
:inactive-value="0" |
|||
size="large" |
|||
@change="editStatus(scope.row)" |
|||
style=" |
|||
--el-switch-on-color: #13ce66; |
|||
--el-switch-off-color: #ff4949; |
|||
" |
|||
active-text="启用" |
|||
inactive-text="禁用" |
|||
inline-prompt |
|||
/> |
|||
</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="permissionAddVisible" |
|||
title="新增用户权限" |
|||
width="800px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<template #footer> |
|||
<!-- 居中显示 --> |
|||
|
|||
<el-form |
|||
ref="Ref" |
|||
:rules="rules" |
|||
:model="addAdmin" |
|||
label-width="auto" |
|||
style="max-width: 600px; align-items: center" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号:"> |
|||
<el-input |
|||
v-model="addAdmin.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="name" label="用户名:"> |
|||
<el-input |
|||
v-model="addAdmin.name" |
|||
placeholder="请输入用户名" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="area" label="所属地区:"> |
|||
<el-select |
|||
v-model="addAdmin.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 220px" |
|||
@change="() => Ref.value.validateField('area')" |
|||
> |
|||
<el-option |
|||
v-for="item in areaList" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="permission" label="权限类别:"> |
|||
<el-select |
|||
v-model="addAdmin.permission" |
|||
placeholder="请选择权限" |
|||
style="width: 220px" |
|||
@change="() => Ref.value.validateField('permission')" |
|||
> |
|||
<el-option |
|||
v-for="item in permissionList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="store" label="职位:"> |
|||
<el-input |
|||
v-model="addAdmin.store" |
|||
placeholder="请输入职称" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="machineId" label="机器码:"> |
|||
<el-input |
|||
v-model="addAdmin.machineId" |
|||
placeholder="请输入机器码" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addAdmin.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div> |
|||
<el-button @click="closePermissionAddVisible()">取消</el-button> |
|||
<el-button type="primary" @click="throttledPermissionAdd()"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
<!-- 这是新增用户权限弹窗 |
|||
<el-dialog |
|||
v-model="permissionAddVisible" |
|||
title="新增用户权限" |
|||
width="800px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div style="display: flex; margin: 20px 0px 20px 0px"> |
|||
<span class="permissionVisible" style="margin-right: 10px">精网号:</span> |
|||
<el-input |
|||
placeholder="请输入精网号" |
|||
v-model="permissionAddObj.jwcode" |
|||
style="width: 240px; margin-right: 10px" |
|||
clearable |
|||
></el-input> |
|||
<el-button type="primary" @click="getAdminByJwcodeWithoutPermission()" |
|||
>查询</el-button |
|||
> |
|||
</div> |
|||
|
|||
<el-descriptions |
|||
class="margin-top" |
|||
:column="2" |
|||
:size="size" |
|||
border |
|||
label-width="200px" |
|||
> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<UserFilled /> |
|||
</el-icon> |
|||
员工精网号 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.jwcode }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<User /> |
|||
</el-icon> |
|||
员工姓名 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.name }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon :style="iconStyle"> |
|||
<location /> |
|||
</el-icon> |
|||
所属地区 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.area }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<OfficeBuilding /> |
|||
</el-icon> |
|||
部门 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.store }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
|
|||
<el-divider> |
|||
<el-icon><star-filled /></el-icon> |
|||
</el-divider> |
|||
<div> |
|||
<span class="permissionVisible" style="margin-right: 20px" |
|||
>权限设置:</span |
|||
> |
|||
<el-radio-group v-model="permissionAddObj.permission"> |
|||
<el-radio value="1" border>总部管理员</el-radio> |
|||
<el-radio value="5" border>分部经理</el-radio> |
|||
<el-radio value="2" border>分部财务</el-radio> |
|||
<el-radio value="3" border>分部客服</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<template #footer> |
|||
<div> |
|||
<el-button @click="closePermissionAddVisible()">取消</el-button> |
|||
<el-button type="primary" @click="throttledPermissionAdd()"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> --> |
|||
|
|||
<!-- 这是编辑用户权限弹窗 --> |
|||
<el-dialog |
|||
v-model="permissionEditVisible" |
|||
title="编辑用户权限" |
|||
width="800px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-descriptions |
|||
class="margin-top" |
|||
:column="2" |
|||
:size="size" |
|||
border |
|||
label-width="200px" |
|||
> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<UserFilled /> |
|||
</el-icon> |
|||
员工精网号 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.jwcode }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<User /> |
|||
</el-icon> |
|||
员工姓名 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.name }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon :style="iconStyle"> |
|||
<location /> |
|||
</el-icon> |
|||
所属地区 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.area }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<OfficeBuilding /> |
|||
</el-icon> |
|||
部门 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.store }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
|
|||
<el-divider> |
|||
<el-icon><star-filled /></el-icon> |
|||
</el-divider> |
|||
<div> |
|||
<span class="permissionVisible" style="margin-right: 20px" |
|||
>权限设置:</span |
|||
> |
|||
<el-radio-group v-model="permissionEditObj.permission"> |
|||
<el-radio value="1" border>总部管理员</el-radio> |
|||
<el-radio value="5" border>分部经理</el-radio> |
|||
<el-radio value="2" border>分部财务</el-radio> |
|||
<el-radio value="3" border>分部客服</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<template #footer> |
|||
<div> |
|||
<el-button @click="closePermissionEditVisible()">取消</el-button> |
|||
<el-button type="primary" @click="throttledPermissionEdit()"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.permissionVisible { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
/* 新增样式让弹窗内容居中 */ |
|||
.el-dialog__body { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.el-dialog__footer { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
1592
gold-system/src/views/recharge/addRecharge.vue
File diff suppressed because it is too large
View File
@ -1,793 +0,0 @@ |
|||
<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.startDate != '' && getTime.value.endDate != '') { |
|||
rechargeVo.value.startDate = getTime.value[0] |
|||
rechargeVo.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = '' |
|||
rechargeVo.value.endDate = '' |
|||
} |
|||
// 搜索参数赋值 |
|||
rechargeVo.value.sortField = sortField.value |
|||
rechargeVo.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/recharge/recharge', |
|||
data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } } |
|||
}) |
|||
// 复制一份 rechargeVo.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = ref({ |
|||
area: rechargeVo.value.area, |
|||
adminId: rechargeVo.value.adminId, |
|||
startDate: rechargeVo.value.startDate, |
|||
endDate: rechargeVo.value.endDate |
|||
}) |
|||
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.startDate |
|||
delete rechargeVo.value.endDate |
|||
delete sortField.value |
|||
delete sortOrder.value |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const 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: 'recharge/user/search', 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 = 'recharge_gold' |
|||
} else if (column.prop === 'freeGold') { |
|||
sortField.value = 'free_gold' |
|||
} else if (column.prop === 'rechargeTime') { |
|||
sortField.value = 'recharge_time' |
|||
} else if (column.prop === 'createTime') { |
|||
sortField.value = 'create_time' |
|||
} else if (column.prop === 'paidMoney') { |
|||
sortField.value = 'paid_gold' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
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 @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" |
|||
/> |
|||
<el-table-column prop="" label="货币名称" width="120px" /> |
|||
<el-table-column |
|||
prop="paidGold" |
|||
sortable="“custom”" |
|||
label="充值金额" |
|||
width="120px" |
|||
/> |
|||
<el-table-column |
|||
prop="paidGold" |
|||
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="rechargeTime" |
|||
sortable="“custom”" |
|||
label="交款时间" |
|||
width="200px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ |
|||
moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
sortable="“custom”" |
|||
label="提交时间" |
|||
width="200px" |
|||
/> |
|||
<el-table-column |
|||
fixed="right" |
|||
prop="operation" |
|||
label="操作" |
|||
width="150px" |
|||
> |
|||
<template #default="scope"> |
|||
<el-popconfirm |
|||
title="确定将此条活动删除吗?" |
|||
@confirm="delConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button type="primary" text @click="del(scope.row)"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" @click="confirm"> |
|||
确定 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
></el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<el-dialog |
|||
v-model="editRechargeVisible" |
|||
title="新增活动" |
|||
width="500" |
|||
:before-close="closeEditRechargeVisible" |
|||
> |
|||
<template #footer> |
|||
<el-form :model="editObj" label-width="auto" style="max-width: 600px"> |
|||
<el-form-item label="活动名称:"> |
|||
<el-input |
|||
v-model="addObj.activityName" |
|||
placeholder="请输入活动名称" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="免费金币:"> |
|||
<el-radio-group v-model="addObj.freeGold"> |
|||
<el-radio value="0">无赠送</el-radio> |
|||
<el-radio value="1">有赠送</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="免费金币兑换比:"> |
|||
<el-input |
|||
v-model="addObj.rechargeRatio" |
|||
placeholder="请输入" |
|||
style="width: 80px" |
|||
/>:1 |
|||
<div style="color: grey">(提示:当前规则每10新币可兑换1免费金币)</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="开始时间:"> |
|||
<el-time-picker v-model="addObj.startTime" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="结束时间:"> |
|||
<el-time-picker v-model="addObj.endTime" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="添加人:"> |
|||
<el-input v-model="addObj.adminName" disabled style="width: 220px" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeAddActivityVisible">取消</el-button> |
|||
<el-button type="primary" @click="closeAddActivityVisible"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</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> |
|||
@ -1,695 +0,0 @@ |
|||
<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 |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 搜索====================================== |
|||
// 搜索rechargeVo |
|||
const rechargeVo = 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 rechargeWay = ref([]) |
|||
// 获取充值方式的数据的接口 |
|||
const getPayWay = async function () { |
|||
try { |
|||
const result = await API({ url: '/recharge/recharge/getWay', data: {} }) |
|||
rechargeWay.value = result.data.filter((item) => item) |
|||
console.log('请求成功', result) |
|||
console.log('充值方式', rechargeWay.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// //表格高度 |
|||
// 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.startDate != '' && getTime.value.endDate != '') { |
|||
rechargeVo.value.startDate = getTime.value[0] |
|||
rechargeVo.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = '' |
|||
rechargeVo.value.endDate = '' |
|||
} |
|||
|
|||
// 搜索参数赋值 |
|||
rechargeVo.value.sortField = sortField.value |
|||
rechargeVo.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/recharge/recharge', |
|||
data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } } |
|||
}) |
|||
// 复制一份 rechargeVo.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = ref({ |
|||
area: rechargeVo.value.area, |
|||
adminId: rechargeVo.value.adminId, |
|||
startDate: rechargeVo.value.startDate, |
|||
endDate: rechargeVo.value.endDate |
|||
}) |
|||
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 () { |
|||
rechargeVo.value.activityId = '' |
|||
rechargeVo.value.rechargeWay = '' |
|||
rechargeVo.value.area = '' |
|||
rechargeVo.value.startDate = '' |
|||
rechargeVo.value.endDate = '' |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const 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() |
|||
console.log('adminPass') |
|||
trueGold.value = approvedGold.value |
|||
trueRGold.value = approvedRGold.value |
|||
trueFGold.value = approvedFGold.value |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = async function () { |
|||
rechargeVo.value.status = 2 |
|||
getObj.value.pageNum = 1 |
|||
await get() |
|||
trueGold.value = rejectedGold.value |
|||
trueRGold.value = rejectedRGold.value |
|||
trueFGold.value = rejectedFGold.value |
|||
console.log('adminReject') |
|||
} |
|||
//点击标签页 |
|||
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 () { |
|||
console.log('888888888880000000') |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/recharge/user/search', data: {} }) |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功地区', result.data) |
|||
// 存储地区信息 |
|||
area.value = result.data |
|||
console.log('地区', area.value) |
|||
} 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 () { |
|||
getAdminData() |
|||
get() |
|||
getActivity() |
|||
|
|||
getPayWay() |
|||
}) |
|||
getArea() |
|||
const handlePageSizeChange = function (val) { |
|||
getObj.value.pageSize = val |
|||
get() |
|||
} |
|||
const handleCurrentChange = function (val) { |
|||
getObj.value.pageNum = val |
|||
get() |
|||
} |
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
// 处理排序事件 |
|||
const handleSortChange = (column) => { |
|||
console.log('排序字段:', column.prop) |
|||
console.log('排序方式:', column.order) |
|||
if (column.prop === 'paidGold') { |
|||
sortField.value = 'recharge_gold' |
|||
} else if (column.prop === 'freeGold') { |
|||
sortField.value = 'free_gold' |
|||
} else if (column.prop === 'rechargeTime') { |
|||
sortField.value = 'recharge_time' |
|||
} else if (column.prop === 'createTime') { |
|||
sortField.value = 'create_time' |
|||
} else if (column.prop === 'paidMoney') { |
|||
sortField.value = 'paid_gold' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
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.rechargeWay" |
|||
placeholder="请选择充值方式" |
|||
size="large" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in rechargeWay" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</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 @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 / 100).toFixed(2) }}新币,永久金币:{{ |
|||
(trueRGold / 100).toFixed(2) |
|||
}}金币,免费金币:{{ (totalFcoin / 100).toFixed(2) }}金币 |
|||
</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="70px" |
|||
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" |
|||
/> |
|||
<el-table-column prop="" label="货币名称" width="120px" /> |
|||
<el-table-column |
|||
prop="paidMoney" |
|||
label="充值金额" |
|||
width="120px" |
|||
sortable=" custom" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.paidGold / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeWay" |
|||
label="充值方式" |
|||
width="100px" |
|||
/> |
|||
<el-table-column |
|||
prop="paidGold" |
|||
label="永久金币" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.paidGold / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="freeGold" |
|||
label="免费金币" |
|||
sortable="“custom”" |
|||
width="110px" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.freeGold / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<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="rechargeTime" |
|||
sortable="“custom”" |
|||
label="交款时间" |
|||
width="200px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ |
|||
moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createTime" |
|||
sortable="“custom”" |
|||
label="提交时间" |
|||
width="200px" |
|||
/> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
></el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -1,535 +0,0 @@ |
|||
<script setup> |
|||
import { onMounted, reactive } from 'vue' |
|||
import { ref, computed, watch } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import { Plus } from '@element-plus/icons-vue' |
|||
import axios from 'axios' |
|||
import { ElMessageBox } from 'element-plus' |
|||
import API from '@/util/http' |
|||
import moment from 'moment' |
|||
// import _ from 'lodash' |
|||
|
|||
const addRe = ref({ |
|||
typeR: '0' |
|||
}) |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ url: '/admin/userinfo', data: {} }) |
|||
adminData.value = result |
|||
addRefund.value.adminId = adminData.value.adminId |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', user.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
|
|||
// 这是添加退款信息的表单 |
|||
const addRefund = ref({ |
|||
updateType: '3', |
|||
allCoin: 0, |
|||
orderCode: '', |
|||
refundGoods: '', |
|||
freeCoin: 0, |
|||
rechargeCoin: 0, |
|||
taskCoin: 0 |
|||
}) |
|||
// 取消按钮 |
|||
const cancel = function () { |
|||
addRefund.value = {} |
|||
addRefund.value.updateType = '3' |
|||
addRefund.value.rechargeCoin = 0 |
|||
addRefund.value.freeCoin = 0 |
|||
addRefund.value.taskCoin = 0 |
|||
addRefund.value.allCoin = 0 |
|||
addRe.value.typeR = 0 |
|||
addRefund.value.adminId = adminData.value.adminId |
|||
} |
|||
// 这是添加退款信息的接口 |
|||
const add = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ url: '/refund/add', data: addRefund.value }) |
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
return |
|||
} |
|||
console.log('请求成功', result) |
|||
ElMessage.success('添加成功') |
|||
// 重置表单 |
|||
addRefund.value = {} |
|||
addRefund.value.adminId = adminData.value.adminId |
|||
addRefund.value.updateType = '3' |
|||
addRefund.value.allCoin = 0 |
|||
addRefund.value.orderCode = '' |
|||
addRefund.value.refundGoods = '' |
|||
addRefund.value.freeCoin = 0 |
|||
addRefund.value.rechargeCoin = 0 |
|||
addRefund.value.taskCoin = 0 |
|||
addRefund.value.typeR = 0 |
|||
user.value = {} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm('确认添加?') |
|||
.then(() => { |
|||
add() |
|||
console.log('添加成功') |
|||
addRefund.value.allCoin = 0 |
|||
;(addRefund.value.freeCoin = 0), |
|||
(addRefund.value.rechargeCoin = 0), |
|||
(addRefund.value.taskCoin = 0), |
|||
(addRefund.value = {}) |
|||
}) |
|||
.catch(() => { |
|||
console.log('取消添加') |
|||
}) |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 表单验证 |
|||
// 开始时间改变时,重新验证结束时间 |
|||
const Ref = ref(null) |
|||
const startChange = (val) => {} |
|||
|
|||
const rules = reactive({ |
|||
jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }], |
|||
refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }], |
|||
orderCode: [{ required: true, message: '请选择退款商品', trigger: 'blur' }], |
|||
taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' }], |
|||
freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' }], |
|||
rechargeCoin: [ |
|||
{ required: true, message: '请输入永久金币', trigger: 'blur' } |
|||
], |
|||
allCoin: [ |
|||
{ required: true, message: '请选择付款方式', trigger: 'blur' }, |
|||
{ |
|||
validator: (rule, value) => { |
|||
if (value === 0) { |
|||
return Promise.reject(new Error('总金币不能为0')) |
|||
} |
|||
return Promise.resolve() |
|||
}, |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
}) |
|||
|
|||
// 查找客户信息的方法 |
|||
const user = ref({ |
|||
firstRechargeTime: '' |
|||
}) |
|||
const getUser = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/recharge/user', |
|||
data: { |
|||
jwcode: jwcode, |
|||
area: adminData.value.area |
|||
} |
|||
}) |
|||
console.log('请求成功', result) |
|||
|
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
} else { |
|||
user.value = result.data |
|||
user.value.A = |
|||
Number(user.value.pendingRechargeTimes) + |
|||
Number(user.value.pendingSpendTimes) |
|||
console.log('用户信息', user.value) |
|||
ElMessage.success(result.msg) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('查询失败,请检查精网号是否正确') |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
const calculatedAllGold = computed(() => { |
|||
const sum = |
|||
Number(addRefund.value.freeCoin) + |
|||
Number(addRefund.value.rechargeCoin) + |
|||
Number(addRefund.value.taskCoin) |
|||
return !isNaN(sum) ? sum : 0 |
|||
}) |
|||
|
|||
watch(calculatedAllGold, (newVal) => { |
|||
addRefund.value.allCoin = newVal |
|||
}) |
|||
|
|||
const AAA = computed(() => { |
|||
return addRefund.value.jwcode |
|||
}) |
|||
|
|||
watch(AAA, (newVal) => {}) |
|||
|
|||
// 退款类型选项 |
|||
const refundType = [ |
|||
{ |
|||
value: '退款商品', |
|||
label: '退款商品' |
|||
} |
|||
] |
|||
|
|||
// 根据精网号查询商品 |
|||
const goods = ref([]) |
|||
const getGoods = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/consume/getDeatil', |
|||
data: { |
|||
jwcode: jwcode, |
|||
area: adminData.value.area |
|||
} |
|||
}) |
|||
console.log('请求成功', result) |
|||
|
|||
if (result.code === 0) { |
|||
ElMessage.error(result.msg) |
|||
} else { |
|||
// 存储表格数据 |
|||
goods.value = result.data |
|||
console.log('用户信息', goods.value) |
|||
ElMessage.success(result.msg) |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('查询失败,请检查精网号是否正确') |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
const calculatedRechargeGoods = computed(() => { |
|||
return ( |
|||
+addRefund.value.freeCoin + |
|||
+addRefund.value.rechargeCoin + |
|||
+addRefund.value.taskCoin |
|||
) |
|||
}) |
|||
watch(calculatedRechargeGoods, (newVal) => { |
|||
addRefund.value.allCoin = newVal |
|||
}) |
|||
watch(calculatedRechargeGoods, (newVal) => { |
|||
addRefund.value.allCoin = newVal |
|||
console.log('计算的总金币', newVal) |
|||
}) |
|||
|
|||
// 绑定两个数据 |
|||
|
|||
// 这是根据订单号查询消费信息的方法 |
|||
const getProductByOrderCode = async function (item) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/refund/searchByOrderCode?orderCode=' + item, |
|||
data: {} |
|||
}) |
|||
addRefund.value.contactId = result.data.detailyId |
|||
addRefund.value.refundGoods = result.data.productName |
|||
addRefund.value.orderCode = result.data.orderCode |
|||
addRefund.value.taskCoin = (result.data.taskCoin * -1) / 100 |
|||
addRefund.value.freeCoin = (result.data.freeCoin * -1) / 100 |
|||
addRefund.value.rechargeCoin = (result.data.rechargeCoin * -1) / 100 |
|||
addRefund.value.allCoin = |
|||
(result.data.taskCoin * -1 + |
|||
result.data.freeCoin * -1 + |
|||
result.data.rechargeCoin * -1) / |
|||
100 |
|||
console.log('请求成功', addRefund.value) |
|||
if (result.data.code === 0) { |
|||
ElMessage.error(result.data.msg) |
|||
} else { |
|||
ElMessage.success('选择成功') |
|||
} |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
ElMessage.error('查询失败,请检查精网号是否正确') |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
const handleSelectionChange = (value) => { |
|||
getProductByOrderCode(value) |
|||
console.log('选择的订单号', value) |
|||
const selectedItem = goods.value.find((item) => item.detailId === value) |
|||
} |
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div style="font-weight: bold">新增退款</div> |
|||
|
|||
<el-form |
|||
:model="addRefund" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 750px" |
|||
class="form-style" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="addRefund.jwcode" |
|||
style="width: 220px" |
|||
@change="getGoods(addRefund.jwcode)" |
|||
/> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(addRefund.jwcode)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="refundType" label="退款类型"> |
|||
<el-select |
|||
v-model="addRefund.refundType" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
> |
|||
<el-option |
|||
v-for="item in refundType" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="orderCode" label="商品名"> |
|||
<el-select |
|||
v-model="addRefund.orderCode" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
@change="handleSelectionChange" |
|||
> |
|||
<el-option |
|||
v-for="item in goods" |
|||
:key="item.value" |
|||
:label="item.productName + item.orderCode" |
|||
:value="item.orderCode" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="typeR" label="退款方式:"> |
|||
<el-radio-group v-model="addRe.typeR"> |
|||
<el-radio value="0" @change="addRe.typeR = '0'">全部退款</el-radio> |
|||
<el-radio value="1">部分退款</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<div style="display: flex; align-items: center"> |
|||
<el-form-item prop="rechargeCoin" label="永久金币" style="float: left"> |
|||
<el-input |
|||
v-model="addRefund.rechargeCoin" |
|||
style="width: 100px" |
|||
:disabled="addRe.typeR === '0' ? true : false" |
|||
> |
|||
</el-input> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="freeCoin" |
|||
label="免费金币" |
|||
style="margin-left: -20px; float: left" |
|||
> |
|||
<el-input |
|||
v-model="addRefund.freeCoin" |
|||
style="float: left; width: 100px" |
|||
:disabled="addRe.typeR === '0' ? true : false" |
|||
/> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
<el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px"> |
|||
<el-input |
|||
v-model="addRefund.taskCoin" |
|||
style="float: left; width: 100px" |
|||
:disabled="addRe.typeR === '0' ? true : false" |
|||
/> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item prop="allCoin" label="退款金币总数"> |
|||
<el-input disabled v-model="addRefund.allCoin" style="width: 100px"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addRefund.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="commitName" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
:value="adminData.name" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> |
|||
<el-button @click="cancel()" style="margin-left: 280px">重置</el-button> |
|||
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
|||
</el-form> |
|||
|
|||
<!-- 客户信息栏 --> |
|||
<el-card style="width: 850px; float: right" class="customer-info"> |
|||
<el-form |
|||
:model="user" |
|||
label-width="auto" |
|||
style="max-width: 1000px" |
|||
label-position="left" |
|||
> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<el-row style="margin-top: 20px"> |
|||
<el-col :span="10"> |
|||
<el-form-item label="姓名:"> |
|||
<p>{{ user.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="历史金币总数"> |
|||
<!-- 检查 user.totalRechargeGold 是否为有效的数字 --> |
|||
<p v-if="!isNaN(Number(user.totalRechargeGold))"> |
|||
{{ Number(user.totalRechargeGold / 100) }} |
|||
</p> |
|||
<!-- 如果不是有效的数字,显示默认值 --> |
|||
<p v-else></p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="精网号"> |
|||
<p>{{ user.jwcode }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="当前金币总数" style="width: 500px"> |
|||
<span |
|||
style="color: #2fa1ff; margin-right: 5px" |
|||
v-if="user.buyJb !== undefined" |
|||
>{{ |
|||
(user.buyJb + user.free6 + user.free12 + user.coreJb) / 100 |
|||
}}</span |
|||
> |
|||
<span |
|||
style="display: inline; white-space: nowrap; color: #b1b1b1" |
|||
v-if="user.buyJb !== undefined" |
|||
>(永久金币:{{ user.buyJb / 100 }};免费金币:{{ |
|||
(user.free6 + user.free12) / 100 |
|||
}};任务金币:{{ user.coreJb / 100 }})</span |
|||
> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="首次充值日期"> |
|||
<p v-if="user.firstRechargeDate"> |
|||
{{ moment(user.firstRechargeDate).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="充值次数"> |
|||
<p style="color: #2fa1ff">{{ user.rechargeTimes }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="负责客服"> |
|||
<p>{{ adminData.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="消费次数"> |
|||
<p style="color: #2fa1ff">{{ user.spendTimes }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="所属门店"> |
|||
<p>{{ adminData.area }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<!-- <el-form-item label="待审核"> |
|||
<p style="color: #2fa1ff"> |
|||
{{ user.A }} |
|||
</p> |
|||
</el-form-item> --> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
|
|||
.el-form-item { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
/* 上传图片的格式 */ |
|||
.avatar-uploader .avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed var(--el-border-color); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: var(--el-transition-duration-fast); |
|||
} |
|||
|
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: var(--el-color-primary); |
|||
} |
|||
|
|||
.el-icon.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 50px; |
|||
height: 50px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.form-style { |
|||
margin-top: 50px; |
|||
max-width: 50%; |
|||
float: left; |
|||
} |
|||
|
|||
.form-style2 { |
|||
max-width: 60%; |
|||
} |
|||
|
|||
p { |
|||
font-size: 13px; |
|||
transform: scale(1); |
|||
} |
|||
</style> |
|||
@ -1,721 +0,0 @@ |
|||
<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.startDate != '' && getTime.value.endDate != '') { |
|||
detail.value.startDate = getTime.value[0] |
|||
detail.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
detail.value.startDate = '' |
|||
detail.value.endDate = '' |
|||
} |
|||
// 添加排序字段和排序方式到请求参数 |
|||
detail.value.sortField = sortField.value |
|||
detail.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/refund/search', |
|||
data: { |
|||
...getObj.value, |
|||
detail: { ...detail.value } |
|||
} |
|||
}) |
|||
// 复制一份 detail.value 并移除排序字段和排序方式 |
|||
const detailWithoutSort = { ...detail.value } |
|||
delete detailWithoutSort.sortField |
|||
delete detailWithoutSort.sortOrder |
|||
|
|||
const result2 = await API({ |
|||
url: '/refund/RefundA', |
|||
data: { |
|||
...detailWithoutSort |
|||
} |
|||
}) |
|||
// 统计合计数 |
|||
if (result2.data) { |
|||
result2.data.forEach((item) => { |
|||
switch (item.status) { |
|||
case '待审核': |
|||
// 若 item.raudit 为空则赋值为 0 |
|||
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.startDate = '' |
|||
detail.value.endDate = '' |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
getTime.value = {} |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
//全部充值明细 |
|||
const 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' |
|||
} |
|||
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 @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="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> |
|||
@ -1,840 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import { ta } from 'element-plus/es/locales.mjs' |
|||
import API from '@/util/http' |
|||
import { writeFile, utils } from 'xlsx' |
|||
// 变量 |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API({ |
|||
url: '/admin/userinfo', |
|||
method: 'post', |
|||
data: {} |
|||
}) |
|||
adminData.value = result |
|||
console.log('请求成功', result) |
|||
console.log('用户信息', adminData.value) |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
} |
|||
} |
|||
// 充值明细表格 |
|||
const tableData = ref([]) |
|||
// 计算用户各金币总数的不分页对象 |
|||
// const tableAllData = ref([]); |
|||
// 各金币总数 |
|||
const rechargeCoin = ref(0) |
|||
const freeCoin = ref(0) |
|||
const taskCoin = ref(0) |
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索detailY |
|||
const detailY = ref({}) |
|||
// 不分页的搜索对象 |
|||
const getAllObj = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
//开启条件筛选导出excel |
|||
const getPutEX = ref(false) |
|||
|
|||
// 支付方式选项 |
|||
const num = [ |
|||
{ |
|||
value: '1', |
|||
label: '增加' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '减少' |
|||
} |
|||
] |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 2) * 38 + "px"; |
|||
// }); |
|||
|
|||
// 方法 |
|||
// 搜索=========================================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 地区赋值 |
|||
if (adminData.value.area === '泰国') { |
|||
detailY.value.areas = ['泰国', '越南'] |
|||
} else if (adminData.value.area !== '总部') { |
|||
detailY.value.area = adminData.value.area |
|||
} |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|||
detailY.value.startDate = getTime.value[0] |
|||
detailY.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
detailY.value.startDate = '' |
|||
detailY.value.endDate = '' |
|||
} |
|||
// 添加排序字段和排序方式到请求参数 |
|||
detailY.value.sortField = sortField.value |
|||
detailY.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/detailY', |
|||
method: 'post', |
|||
data: { ...getObj.value, detailY: { ...detailY.value } } |
|||
}) |
|||
// const result2 = await API.post("http://54.251.137.151:10702/detailY", { |
|||
// ...getAllObj.value, |
|||
// detailY: { ...detailY.value }, |
|||
// }); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// console.log("请求成功2", result2); |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
// tableAllData.value = result2.data; |
|||
// console.log("tableAllData", tableAllData.value); |
|||
// 存储分页总数 |
|||
total.value = result.data.total |
|||
console.log('total', total.value) |
|||
// 计算各金币总数并除以100 |
|||
// 下列各数除以100,并最多显示两位小数 |
|||
// rechargeCoin.value = parseFloat((tableAllData.value.sumR / 100).toFixed(2)); |
|||
// freeCoin.value = parseFloat((tableAllData.value.sumF / 100).toFixed(2)); |
|||
// taskCoin.value = parseFloat((tableAllData.value.sumT / 100).toFixed(2)); |
|||
// for (let i = 0; i < tableAllData.value.length; i++) { |
|||
// rechargeCoin.value += tableAllData.value[i].rechargeCoin; |
|||
// freeCoin.value += tableAllData.value[i].freeCoin; |
|||
// taskCoin.value += tableAllData.value[i].taskCoin; |
|||
// } |
|||
// console.log( |
|||
// "各金币总数", |
|||
// rechargeCoin.value, |
|||
// freeCoin.value, |
|||
// taskCoin.value |
|||
// ); |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1 |
|||
get() |
|||
} |
|||
// 重置 |
|||
const reset = function () { |
|||
// 删除精网号字段 |
|||
delete detailY.value.jwcode |
|||
// 删除更新类型字段 |
|||
delete detailY.value.num |
|||
// 删除开始时间字段 |
|||
delete detailY.value.startDate |
|||
// 删除结束时间字段 |
|||
delete detailY.value.endDate |
|||
// 删除所属地区字段 |
|||
delete detailY.value.area |
|||
delete sortField.value |
|||
delete sortOrder.value |
|||
getTime.value = {} |
|||
// 删除平台信息字段 |
|||
delete detailY.value.consumePlatform |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date() |
|||
yesterday.setDate(yesterday.getDate() - 1) |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
getTime.value = [startDate, endDate] |
|||
console.log('getTime', getTime.value) |
|||
get() |
|||
} |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
const 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() |
|||
}) |
|||
|
|||
// 这是导出excel表格的方法 |
|||
// 导出Excel的方法 |
|||
// 定义字段映射 |
|||
const json_fields = (row) => { |
|||
return [ |
|||
row.jwcode, // 姓名 |
|||
row.area, // 精网号 |
|||
row.platform, // 所属地区 |
|||
row.consumePlatform, // 平台信息 |
|||
row.gold, // 更新数量 |
|||
row.rechargeCoin, // 免费金币 |
|||
row.freeCoin, // 永久金币 |
|||
row.taskCoin, // 任务金币 |
|||
row.createAdmin, // 提交人 |
|||
row.createTime, |
|||
row.name, |
|||
row.id |
|||
] |
|||
} |
|||
|
|||
// 定义元数据 |
|||
const json_meta = [ |
|||
[ |
|||
{ |
|||
key: 'charset', |
|||
value: 'utf-8' |
|||
} |
|||
] |
|||
] |
|||
const headers = [ |
|||
'精网号', |
|||
'地区', |
|||
'平台信息', |
|||
'数量', |
|||
'数量更新类型', |
|||
'永久金币', |
|||
'免费金币', |
|||
'任务金币', |
|||
'提交人', |
|||
'更新时间', |
|||
'用户名', |
|||
'id' |
|||
] |
|||
const exportExcel = () => { |
|||
// 先将 json_fields 应用到数据上 |
|||
const data = excelInfo.value.map(json_fields) |
|||
const ws = utils.aoa_to_sheet(data) |
|||
// 添加表头到工作表 |
|||
utils.sheet_add_aoa(ws, [headers], { origin: 'A1' }) |
|||
const wb = utils.book_new() |
|||
utils.book_append_sheet(wb, ws, 'Sheet1') |
|||
writeFile(wb, '客户金币明细.xlsx') |
|||
} |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
const putExcel = ref({ |
|||
startDate: startDate, |
|||
endDate: endDate |
|||
}) |
|||
const excelInfo = ref({}) |
|||
const loading = ref(false) |
|||
const areyour = async function () { |
|||
try { |
|||
loading.value = true |
|||
const result = await API({ |
|||
url: '/detailY/searchAll', |
|||
method: 'post', |
|||
data: { ...putExcel.value } |
|||
}) |
|||
excelInfo.value = result.data |
|||
|
|||
// 处理 excelInfo 中的数据 |
|||
if (Array.isArray(excelInfo.value)) { |
|||
excelInfo.value.forEach((item) => { |
|||
if (item.rechargeCoin) { |
|||
item.rechargeCoin = item.rechargeCoin / 100 |
|||
} |
|||
if (item.freeCoin) { |
|||
item.freeCoin = item.freeCoin / 100 |
|||
} |
|||
if (item.taskCoin) { |
|||
item.taskCoin = item.taskCoin / 100 |
|||
} |
|||
}) |
|||
} |
|||
|
|||
areyouright.value = true |
|||
ElMessage({ |
|||
type: 'success', |
|||
message: '查询成功' |
|||
}) |
|||
loading.value = false |
|||
} catch (error) { |
|||
console.log('请求失败', error) |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
const areyouright = ref(false) |
|||
|
|||
//选地区 |
|||
const area = [ |
|||
{ |
|||
value: '马来西亚', |
|||
label: '马来西亚' |
|||
}, |
|||
{ |
|||
value: '新加坡', |
|||
label: '新加坡' |
|||
}, |
|||
{ |
|||
value: '香港', |
|||
label: '香港' |
|||
}, |
|||
{ |
|||
value: '泰国', |
|||
label: '泰国' |
|||
}, |
|||
{ |
|||
value: '加拿大', |
|||
label: '加拿大' |
|||
}, |
|||
{ |
|||
value: '越南HCM', |
|||
label: '越南HCM' |
|||
} |
|||
] |
|||
//选消费平台 |
|||
const platform = [ |
|||
{ |
|||
value: '4', |
|||
label: '金币系统' |
|||
}, |
|||
|
|||
{ |
|||
value: '1', |
|||
label: 'ERP系统' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'Homily Chart' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'Homily Link' |
|||
}, |
|||
{ |
|||
value: '0', |
|||
label: '初始化金币' |
|||
} |
|||
] |
|||
const TimeGet = ref('1') |
|||
|
|||
// 今天 |
|||
const getT = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
putExcel.value.startDate = startDate |
|||
putExcel.value.endDate = endDate |
|||
console.log('putExcel', putExcel.value) |
|||
} |
|||
//3天 |
|||
const get3 = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 2 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
putExcel.value.startDate = startDate |
|||
putExcel.value.endDate = endDate |
|||
console.log('putExcel', putExcel.value) |
|||
} |
|||
// 7天 |
|||
const get7 = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
putExcel.value.startDate = startDate |
|||
putExcel.value.endDate = endDate |
|||
console.log('putExcel', putExcel.value) |
|||
} |
|||
// 30天 |
|||
const get30 = function () { |
|||
const today = new Date() |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth() - 1, |
|||
today.getDate() |
|||
) |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
) |
|||
putExcel.value.startDate = startDate |
|||
putExcel.value.endDate = endDate |
|||
console.log('putExcel', putExcel.value) |
|||
} |
|||
|
|||
// 新增排序字段和排序方式 |
|||
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 === 'gold') { |
|||
sortField.value = 'gold' |
|||
} |
|||
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-dialog |
|||
v-model="areyouright" |
|||
title="" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-button type="success" @click="exportExcel()">导出</el-button> |
|||
</el-dialog> |
|||
|
|||
<!-- 这是导出excel的弹窗 --> |
|||
<el-dialog |
|||
v-model="getPutEX" |
|||
title="请选择导出条件" |
|||
width="500" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
v-loading="loading" |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="putExcel" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
:size="formSize" |
|||
status-icon |
|||
> |
|||
<el-form-item prop="activityName" label="精网号:"> |
|||
<el-input |
|||
v-model="putExcel.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 220px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="所属地区:" |
|||
><el-select |
|||
v-model="putExcel.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="更新时间:"> |
|||
<el-radio-group v-model="TimeGet"> |
|||
<el-radio value="1" @click="getT()">今天</el-radio> |
|||
<el-radio value="3" @click="get3()">近三天</el-radio> |
|||
<el-radio value="7" @click="get7()">近一周</el-radio> |
|||
<el-radio value="30" @click="get30()">近一个月</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
@click="areyour()" |
|||
>确定</el-button |
|||
> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<el-row style="margin-bottom: 10px"> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号:</el-text> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
style="width: 240px" |
|||
placeholder="请输入精网号" |
|||
clearable |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">平台信息:</el-text> |
|||
<el-select |
|||
v-model="detailY.consumePlatform" |
|||
placeholder="请选择平台信息" |
|||
style="width: 200px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in platform" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">数量更新类型:</el-text> |
|||
<el-select |
|||
v-model="detailY.num" |
|||
placeholder="请选择更新类型" |
|||
style="width: 200px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in num" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select |
|||
v-model="detailY.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 200px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">更新时间:</el-text> |
|||
<el-date-picker |
|||
v-model="getTime" |
|||
type="datetimerange" |
|||
range-separator="至" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
style="margin-right: 700px" |
|||
/> |
|||
<el-button type="success" @click="getPutEX = true" |
|||
>导出Excel表格</el-button |
|||
> |
|||
<el-button @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<!-- <div> |
|||
现有金币:永久金币:{{ Math.abs(rechargeCoin) }},免费金币:{{ |
|||
Math.abs(freeCoin) |
|||
}},任务金币:{{ Math.abs(taskCoin) }} |
|||
</div> --> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 584px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
@sort-change="handleSortChange" |
|||
height="584px" |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
label="序号" |
|||
width="100px" |
|||
fixed="left" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="left" |
|||
prop="username" |
|||
label="姓名" |
|||
width="150" |
|||
/> |
|||
<el-table-column |
|||
fixed="left" |
|||
prop="jwcode" |
|||
label="精网号" |
|||
width="120" |
|||
/> |
|||
<el-table-column prop="area" label="所属地区" width="120" /> |
|||
<el-table-column |
|||
prop="consumePlatform" |
|||
label="平台信息" |
|||
width="140" |
|||
> |
|||
<template #default="scope"> |
|||
<!-- 使用非严格相等比较 --> |
|||
<span v-if="scope.row.consumePlatform == 0">初始化金币</span> |
|||
<span v-if="scope.row.consumePlatform == 1">ERP系统</span> |
|||
<span v-if="scope.row.consumePlatform == 3">Homily Link</span> |
|||
<span v-if="scope.row.consumePlatform == 2">Homily Chart</span> |
|||
<span v-if="scope.row.consumePlatform == 4">金币系统</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="gold" |
|||
label="更新数量" |
|||
width="120" |
|||
sortable="“custom”" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.gold / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="updateType" label="更新类型" width="110"> |
|||
<!-- 模板内容 --> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.updateType == 1"> |
|||
<span>消费</span> |
|||
</span> |
|||
<span v-if="scope.row.updateType == 0"> |
|||
<span>充值</span> |
|||
</span> |
|||
<span v-if="scope.row.updateType == 2"> |
|||
<span>退款</span> |
|||
</span> |
|||
<span v-if="scope.row.updateType == 3"> |
|||
<span>其他</span> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
sortable="“custom”" |
|||
label="永久金币" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.rechargeCoin / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="freeCoin" |
|||
sortable="“custom”" |
|||
label="免费金币" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.freeCoin / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="taskCoin" |
|||
sortable="“custom”" |
|||
label="任务金币" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.taskCoin / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="提交人" width="110" /> |
|||
<el-table-column |
|||
prop="createTime" |
|||
sortable="“custom”" |
|||
label="更新时间" |
|||
width="210" |
|||
show-overflow-tooltip |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<!-- 分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
></el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
/* .head-card-element { |
|||
margin-right: 20px; |
|||
} */ |
|||
|
|||
/* .head-card-btn { |
|||
margin-left: auto; |
|||
} */ |
|||
</style> |
|||
@ -1,481 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import axios from 'axios' |
|||
import moment from 'moment' |
|||
import { ta } from 'element-plus/es/locales.mjs' |
|||
import API from '@/util/http' |
|||
|
|||
// 变量 |
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}) |
|||
const dialogVisible = ref(false) |
|||
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([]) |
|||
// 计算用户各金币总数的不分页对象 |
|||
const tableAllData = ref([]) |
|||
// 各金币总数 合计数 |
|||
const rechargeCoin = ref(0) |
|||
const freeCoin = ref(0) |
|||
const taskCoin = ref(0) |
|||
//客户消费记录 |
|||
const tableCountData = ref([]) |
|||
const userInfo = ref({}) |
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100) |
|||
// 搜索对象时间 |
|||
const getTime = ref([]) |
|||
// 搜索detailY |
|||
const detailY = ref({}) |
|||
// 不分页的搜索对象 |
|||
const getAllObj = ref({}) |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
// 新增排序字段和排序方式 |
|||
const sortField = ref('') |
|||
const sortOrder = ref('') |
|||
|
|||
// 支付方式选项 |
|||
const updateType = [ |
|||
{ |
|||
value: '0', |
|||
label: '充值' |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '消费' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '退款' |
|||
} |
|||
] |
|||
|
|||
// //表格高度 |
|||
// const tableHeight = computed(function () { |
|||
// return (getObj.value.pageSize + 2) * 38 + "px"; |
|||
// }); |
|||
|
|||
// 方法 |
|||
// 搜索=========================================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 地区赋值 |
|||
// 地区赋值 |
|||
if (adminData.value.area === '泰国') { |
|||
detailY.value.areas = ['泰国', '越南'] |
|||
} else if (adminData.value.area !== '总部') { |
|||
detailY.value.area = adminData.value.area |
|||
} |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|||
detailY.value.startDate = getTime.value[0] |
|||
detailY.value.endDate = getTime.value[1] |
|||
} |
|||
} else { |
|||
detailY.value.startDate = '' |
|||
detailY.value.endDate = '' |
|||
} |
|||
// 添加排序字段和排序方式到请求参数 |
|||
detailY.value.sortField = sortField.value |
|||
detailY.value.sortOrder = sortOrder.value |
|||
console.log('搜索参数', getObj.value) |
|||
// 发送POST请求 |
|||
const result = await API({ |
|||
url: '/detailY/select', |
|||
data: { ...getObj.value, detailYgold: { ...detailY.value } } |
|||
}) |
|||
// 获取合计数 |
|||
const result2 = await API({ |
|||
url: '/detailY', |
|||
data: { |
|||
...getAllObj.value, |
|||
detailY: { ...detailY.value } |
|||
} |
|||
}) |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result) |
|||
// console.log("请求成功2", result2); |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list |
|||
console.log('tableData', tableData.value) |
|||
tableAllData.value = result2.data |
|||
// 下列各数除以100 |
|||
|
|||
// 修改为保留两位小数 |
|||
rechargeCoin.value = parseFloat((tableAllData.value.sumR / 100).toFixed(2)) |
|||
freeCoin.value = parseFloat((tableAllData.value.sumF / 100).toFixed(2)) |
|||
taskCoin.value = parseFloat((tableAllData.value.sumT / 100).toFixed(2)) |
|||
// console.log("tableAllData", tableAllData.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 () { |
|||
detailY.value = {} |
|||
sortField.value = '' |
|||
sortOrder.value = '' |
|||
get() |
|||
} |
|||
const cellClick = function (row, column) { |
|||
console.log('cellClick', column.label) |
|||
if (column.label == '姓名') { |
|||
dialogVisible.value = true |
|||
userInfo.value = row |
|||
} |
|||
} |
|||
// 验证跳转输入框的数字是否合法 |
|||
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 handleSortChange = (column) => { |
|||
console.log('排序字段:', column.prop) |
|||
console.log('排序方式:', column.order) |
|||
if (column.prop === 'buyJb') { |
|||
sortField.value = 'buy_jb' |
|||
} else if (column.prop === 'taskJb') { |
|||
sortField.value = 'core_jb' |
|||
} else if (column.prop === 'free6') { |
|||
sortField.value = 'free_6' |
|||
} else if (column.prop === 'free12') { |
|||
sortField.value = 'free_12' |
|||
} |
|||
sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC' |
|||
get() |
|||
} |
|||
|
|||
//选地区 |
|||
const area = [ |
|||
{ |
|||
value: '马来西亚', |
|||
label: '马来西亚' |
|||
}, |
|||
{ |
|||
value: '新加坡', |
|||
label: '新加坡' |
|||
}, |
|||
{ |
|||
value: '香港', |
|||
label: '香港' |
|||
}, |
|||
{ |
|||
value: '泰国', |
|||
label: '泰国' |
|||
}, |
|||
{ |
|||
value: '加拿大', |
|||
label: '加拿大' |
|||
}, |
|||
{ |
|||
value: '越南HCM', |
|||
label: '越南HCM' |
|||
} |
|||
] |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await getAdminData() |
|||
await 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"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号:</el-text> |
|||
<el-input |
|||
v-model="detailY.jwcode" |
|||
style="width: 240px" |
|||
placeholder="请输入精网号" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div |
|||
class="head-card-element" |
|||
style="margin-left: 50px" |
|||
v-if="adminData.area == '总部'" |
|||
> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select |
|||
v-model="detailY.area" |
|||
placeholder="请选择所属地区" |
|||
style="width: 240px" |
|||
clearable |
|||
> |
|||
<el-option |
|||
v-for="item in area" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="head-card-btn"> |
|||
<el-button @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
现有金币:永久金币:{{ Math.abs(rechargeCoin) }},免费金币:{{ |
|||
Math.abs(freeCoin) |
|||
}},任务金币:{{ Math.abs(taskCoin) }} |
|||
</div> |
|||
<!-- 设置表格容器的高度和滚动样式 --> |
|||
<div style="height: 626px; overflow-y: auto"> |
|||
<el-table |
|||
:data="tableData" |
|||
@cellClick="cellClick" |
|||
style="width: 100%" |
|||
height="715px" |
|||
@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="name" label="姓名" width="200" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="120" /> |
|||
<el-table-column prop="area" label="所属地区" width="120" /> |
|||
<el-table-column |
|||
prop="allJb" |
|||
label="总金币" |
|||
width="120" |
|||
aligh="center" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
(scope.row.free12 + |
|||
scope.row.free6 + |
|||
scope.row.coreJb + |
|||
scope.row.buyJb) / |
|||
100 |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="buyJb" |
|||
label="永久金币" |
|||
sortable="“custom”" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.buyJb) / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="freeJb" label="免费金币" width="110"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
Math.abs(scope.row.free6 + scope.row.free12) / 100 |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="free6" |
|||
label=" 6月份到期免费金币" |
|||
sortable="“custom”" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.free6 / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="free12" |
|||
label="12月份到期免费金币" |
|||
sortable="“custom”" |
|||
width="110" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.free12 / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="coreJb" |
|||
label="任务金币" |
|||
sortable="“custom”" |
|||
width="130" |
|||
> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.coreJb) / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="rcoin" label="历史充值" width="150"> |
|||
<template #default="scope"> |
|||
<span>{{ scope.row.rcoin / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="scoin" label="历史消费" width="150"> |
|||
<template #default="scope"> |
|||
<span>{{ Math.abs(scope.row.scoin) / 100 }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<!-- 分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
:page-sizes="[5, 10, 20, 50, 100]" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
@size-change="handlePageSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
></el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- 客户信息弹框 --> |
|||
<el-dialog |
|||
title="客户信息" |
|||
v-model="dialogVisible" |
|||
width="50%" |
|||
@before-close="dialogVisible = false" |
|||
> |
|||
<el-card> |
|||
<div class="custom-box"> |
|||
<div>姓名:{{ userInfo.name }}</div> |
|||
<br /> |
|||
<div>精网号:{{ userInfo.jwcode }}</div> |
|||
<div>地区:{{ userInfo.area }}</div> |
|||
<div>历史充值:{{ userInfo.rcoin }}</div> |
|||
<div>历史消费:{{ userInfo.scoin }}</div> |
|||
</div> |
|||
</el-card> |
|||
<!-- t --> |
|||
<div style="height: 450px; overflow-y: auto"> |
|||
<el-table :data="tableCountData" style="width: 100%" height="715px"> |
|||
<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="" label="商品" width="120" /> |
|||
<el-table-column sortable prop="" label="消费金币总数" width="180" /> |
|||
<el-table-column sortable prop="" label="永久金币" width="120" /> |
|||
<el-table-column sortable prop="" label="免费金币" width="120" /> |
|||
<el-table-column sortable prop="" label="任务金币" width="120" /> |
|||
<el-table-column sortable prop="" label="时间" width="120" /> |
|||
</el-table> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
.custom-box { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
row-gap: 5px; |
|||
div:nth-child(1) { |
|||
flex: 1 0 100%; |
|||
} |
|||
div { |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
1661
gold-system/src/views/workspace/index.vue
File diff suppressed because it is too large
View File
@ -1,140 +0,0 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed, nextTick } from 'vue' |
|||
|
|||
// 变量 |
|||
const allData = ref([]) |
|||
const tableData = ref([]) |
|||
const elTableHeight = ref('') |
|||
const theadHeight = ref('') |
|||
const contentHeight = ref(0) |
|||
const showRowCount = ref(0) |
|||
const falseBox = ref(null) |
|||
const scollBoxHeight = ref(0) |
|||
const scrollTopRowCount = ref(0) |
|||
|
|||
// 方法 |
|||
onMounted(async function () { |
|||
allData.value = [] |
|||
for (let i = 0; i < 10000; i++) { |
|||
allData.value.push({ |
|||
name: '张三' + i, |
|||
age: 20 + i, |
|||
address: '北京市海淀区' + i, |
|||
salary: 50000 + i, |
|||
date: '2022-01-01' |
|||
}) |
|||
} |
|||
scollBoxHeight.value = 45 * allData.value.length + 45 //多加一行,要不然滚动到底差一行 |
|||
nextTick(() => { |
|||
elTableHeight.value = document.querySelector( |
|||
'.table-box .el-table' |
|||
).offsetHeight |
|||
theadHeight.value = document.querySelector( |
|||
'.table-box .el-table__header-wrapper' |
|||
).offsetHeight |
|||
console.log('elTableHeight', elTableHeight.value) |
|||
console.log('theadHeight', theadHeight.value) |
|||
contentHeight.value = elTableHeight.value - theadHeight.value |
|||
console.log('contentHeight', contentHeight.value) |
|||
showRowCount.value = Math.floor(contentHeight.value / 45) |
|||
console.log('showRowCount', showRowCount.value) |
|||
// 获取默认显示的前 <showRowCount> 条 |
|||
tableData.value = JSON.parse(JSON.stringify(allData.value)).splice( |
|||
0, |
|||
showRowCount.value |
|||
) |
|||
}) |
|||
falseBox.value = document.querySelector('.false-box') |
|||
falseBox.value.addEventListener('scroll', function (e) { |
|||
scrollTopRowCount.value = Math.ceil(e.target.scrollTop / 45) |
|||
// 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条 |
|||
tableData.value = JSON.parse(JSON.stringify(allData.value)).splice( |
|||
scrollTopRowCount.value, |
|||
showRowCount.value |
|||
) |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div |
|||
class="box" |
|||
style="width: 1000px; height: 500px; overflow: hidden; position: relative" |
|||
> |
|||
<!-- false-box这是一个用来显示滚动条的方法 --> |
|||
<div |
|||
class="false-box" |
|||
style=" |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
overflow: auto; |
|||
" |
|||
> |
|||
<div class="scroll-box" :style="{ height: scollBoxHeight + 'px' }"> |
|||
<!-- scroll-box是用来撑起盒子的方法 --> |
|||
</div> |
|||
</div> |
|||
<div class="table-box"> |
|||
<el-table class="el-table" :data="allData" style="width: 100%"> |
|||
<el-table-column prop="name" label="姓名" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="age" label="年龄" width="180"> </el-table-column> |
|||
<el-table-column prop="address" label="地址"> </el-table-column> |
|||
<el-table-column prop="salary" label="薪资" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="date" label="日期" width="180"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.box { |
|||
width: 1000px; |
|||
height: 500px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.false-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.scroll-box { |
|||
width: 100%; |
|||
height: 1000px; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
} |
|||
|
|||
.table-box { |
|||
width: calc(100% - 20px); |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
} |
|||
|
|||
:deep(.el-table) { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.el-table .el-table__row { |
|||
height: 45px; |
|||
} |
|||
|
|||
.el-table .el-table__row td { |
|||
padding: 0px; |
|||
} |
|||
</style> |
|||
4949
gold-system/stats.html
File diff suppressed because it is too large
View File
@ -1 +0,0 @@ |
|||
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/app.vue","./src/views/index.vue","./src/views/login.vue","./src/views/nopermissionpage.vue","./src/views/z.vue","./src/views/audit/rechargeaudit.vue","./src/views/audit/refundaudit.vue","./src/views/consume/addconsume.vue","./src/views/consume/allconsume.vue","./src/views/goldbeen/addgoldenbeen.vue","./src/views/goldbeen/goldenbeenbalance.vue","./src/views/goldbeen/goldenbeendetail.vue","./src/views/managerecharge/activity.vue","./src/views/managerecharge/rate.vue","./src/views/permissions/index.vue","./src/views/recharge/addrecharge.vue","./src/views/recharge/adminrecharge.vue","./src/views/recharge/allrecharge.vue","./src/views/refund/addrefund.vue","./src/views/refund/allrefund.vue","./src/views/usergold/index.vue","./src/views/usergoldinfo/index.vue","./src/views/workspace/index.vue"],"errors":true,"version":"5.6.3"} |
|||
@ -1,70 +0,0 @@ |
|||
import { defineConfig, loadEnv } from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import' |
|||
import legacy from '@vitejs/plugin-legacy' |
|||
import path from 'path' |
|||
import { visualizer } from 'rollup-plugin-visualizer' |
|||
|
|||
// https://vite.dev/config/
|
|||
export default defineConfig(({ mode }) => { |
|||
const env = loadEnv(mode, process.cwd()) |
|||
console.log('当前环境:', mode) |
|||
console.log('当前环境变量:', env) |
|||
return { |
|||
esbuild: { |
|||
supported: { |
|||
bigint: true |
|||
}, |
|||
treeShaking: true |
|||
}, |
|||
plugins: [ |
|||
vue(), |
|||
visualizer({ |
|||
open: true, // 打包完成后自动展示
|
|||
gzipSize: true, // 显示gzip压缩后的大小
|
|||
brotliSize: true // 显示brotli压缩后的大小
|
|||
}), |
|||
legacy({ |
|||
targets: ['defaults', 'not IE 11', 'chrome >=73'], |
|||
modernPolyfills: true |
|||
}), |
|||
lazyImport({ |
|||
resolvers: [ |
|||
VxeResolver({ |
|||
libraryName: 'vxe-table' |
|||
}), |
|||
VxeResolver({ |
|||
libraryName: 'vxe-pc-ui' |
|||
}) |
|||
] |
|||
}) |
|||
], |
|||
resolve: { |
|||
alias: { |
|||
'@': path.resolve(__dirname, './src') |
|||
} |
|||
}, |
|||
base: process.env.NODE_ENV === 'production' ? './' : '/', |
|||
build: { |
|||
sourcemap: false, // 关闭 sourcemap
|
|||
minify: 'terser', |
|||
terserOptions: { |
|||
compress: { |
|||
drop_console: true, // 生产环境去除console
|
|||
drop_debugger: true // 生产环境去除 debugger
|
|||
} |
|||
}, |
|||
rollupOptions: { |
|||
output: { |
|||
manualChunks: { |
|||
echarts: ['echarts'], |
|||
xlsx: ['xlsx'], |
|||
lodash: ['lodash'], |
|||
vue: ['vue', 'vue-router', 'pinia'], |
|||
elementPlus: ['element-plus'] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,23 @@ |
|||
# Vue 3 + TypeScript + Vite |
|||
|
|||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
|||
|
|||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
|||
|
|||
npm install 下载依赖包 |
|||
|
|||
npm run dev 启动项目 |
|||
|
|||
npm install vue-router 下载vue-router组件 |
|||
|
|||
npm install axios 下载axios组件 |
|||
|
|||
npm install element-plus --save 下载element-plus组件 |
|||
|
|||
npm install @element-plus/icons-vue 下载element-plus图标库 |
|||
|
|||
npm install vue-icons-plus --save 下载外部图标库 |
|||
|
|||
npm install echarts 安装echarts组件 |
|||
|
|||
npm install moment 安装moment组件 |
|||
1704
vue/gold-system/package-lock.json
File diff suppressed because it is too large
View File
@ -0,0 +1,28 @@ |
|||
{ |
|||
"name": "gold-system", |
|||
"private": true, |
|||
"version": "0.0.0", |
|||
"type": "module", |
|||
"scripts": { |
|||
"dev": "vite", |
|||
"build": "vue-tsc -b && vite build", |
|||
"preview": "vite preview", |
|||
"serve": "vite - service serve --host 0.0.0.0 --port 8080" |
|||
}, |
|||
"dependencies": { |
|||
"@element-plus/icons-vue": "^2.3.1", |
|||
"axios": "^1.7.8", |
|||
"echarts": "^5.5.1", |
|||
"element-plus": "^2.8.8", |
|||
"moment": "^2.30.1", |
|||
"vue": "^3.5.12", |
|||
"vue-icons-plus": "^0.1.7", |
|||
"vue-router": "^4.5.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@vitejs/plugin-vue": "^5.1.4", |
|||
"typescript": "~5.6.2", |
|||
"vite": "^5.4.10", |
|||
"vue-tsc": "^2.1.8" |
|||
} |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
import http from '../util/http.js'; |
|||
|
|||
const API={ |
|||
post: function(url,data){ |
|||
return http({url:url,method:'post',data:data}) |
|||
}, |
|||
}; |
|||
|
|||
export default API; |
|||
|
Before Width: 928 | Height: 1133 | Size: 567 KiB After Width: 928 | Height: 1133 | Size: 567 KiB |
|
Before Width: 47 | Height: 47 | Size: 2.0 KiB After Width: 47 | Height: 47 | Size: 2.0 KiB |
@ -0,0 +1,15 @@ |
|||
import { createApp } from 'vue' |
|||
import App from './App.vue' |
|||
import router from './router' |
|||
import ElementPlus from 'element-plus' |
|||
import 'element-plus/dist/index.css' |
|||
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
|||
import './assets/css/common.css'; // 引入公共CSS文件
|
|||
|
|||
const app = createApp(App) |
|||
|
|||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
|||
app.component(key, component) |
|||
} |
|||
|
|||
app.use(ElementPlus).use(router).mount('#app'); |
|||
@ -0,0 +1,54 @@ |
|||
import { createRouter,createWebHashHistory } from 'vue-router'; |
|||
|
|||
const router=createRouter({ |
|||
history:createWebHashHistory(), |
|||
routes:[ |
|||
{path:'/login', name:"login", component:()=>import("../views/login.vue")}, |
|||
{path:'/',redirect:"/workspace"}, |
|||
{path:'/test',component:()=>import("../views/z.vue")}, |
|||
{ |
|||
meta:{requireAuth:true}, |
|||
path:'/index',component:()=>import("../views/index.vue"), |
|||
children:[ |
|||
// 工作台
|
|||
{path:'/workspace',component:()=>import("../views/workspace/index.vue")}, |
|||
// 充值审核
|
|||
{path:'/rechargeAudit',component:()=>import("../views/audit/rechargeAudit.vue")}, |
|||
// 退款审核
|
|||
{path:'/refundAudit',component:()=>import("../views/audit/refundAudit.vue")}, |
|||
// 新增消费
|
|||
{path:'/addConsume',component:()=>import("../views/consume/addConsume.vue")}, |
|||
// 所有消费明细
|
|||
{path:'/allConsume',component:()=>import("../views/consume/allConsume.vue")}, |
|||
// 活动管理
|
|||
{path:'/activity',component:()=>import("../views/managerecharge/activity.vue")}, |
|||
// 汇率管理
|
|||
{path:'/rate',component:()=>import("../views/managerecharge/rate.vue")}, |
|||
// 新增充值
|
|||
{path:'/addRecharge',component:()=>import("../views/recharge/addRecharge.vue")}, |
|||
// 客户充值明细
|
|||
{path:'/adminRecharge',component:()=>import("../views/recharge/adminRecharge.vue")}, |
|||
// 所有充值明细
|
|||
{path:'/allRecharge',component:()=>import("../views/recharge/allRecharge.vue")}, |
|||
// 新增退款
|
|||
{path:'/addRefund',component:()=>import("../views/refund/addRefund.vue")}, |
|||
// 退款明细
|
|||
{path:'/allRefund',component:()=>import("../views/refund/allRefund.vue")}, |
|||
// 客户金币明细
|
|||
{path:'/usergold',component:()=>import("../views/usergold/index.vue")}, |
|||
] |
|||
}, |
|||
|
|||
] |
|||
}); |
|||
|
|||
router.beforeEach((to,from,next)=>{ |
|||
const token=localStorage.getItem("token"); |
|||
if(to.name!="login"&&!token){ |
|||
next({name:"login"}); |
|||
}else{ |
|||
next(); |
|||
} |
|||
}) |
|||
|
|||
export default router; |
|||
@ -0,0 +1,42 @@ |
|||
import axios from 'axios'; |
|||
|
|||
export default function (options) { |
|||
//配置每次发送请求都从localStorage中获取名字叫token的数据,
|
|||
//添加到请求头部的Authorization属性中
|
|||
const token = localStorage.getItem('token'); |
|||
//Object.assign用于合并对象的数据
|
|||
options.headers = Object.assign( |
|||
{ token: token }, |
|||
options.headers || {} |
|||
); |
|||
//axios() 返回一个promise对象,用于异步请求
|
|||
//options是一个对象,其中包含了许多用于配置请求的参数,
|
|||
//例如请求的url、请求方法(GET、POST等)、请求头等
|
|||
return axios(options) |
|||
.then(({ status, data, statusText }) => { |
|||
//该函数在请求成功并返回数据时被调用
|
|||
//status:HTTP状态码,例如200表示请求成功。
|
|||
//data:服务器返回的数据。
|
|||
// statusText:HTTP状态文本,例如"OK"表示请求成功。
|
|||
console.log(data); |
|||
if (status == 200) { |
|||
return data; |
|||
} else { |
|||
throw new e(statusText); |
|||
} |
|||
}) |
|||
.catch(e=>{ |
|||
// 检查是否是因为token过期导致的401错误
|
|||
if (e.response && e.response.status === 401) { |
|||
// 清除localStorage中的token
|
|||
localStorage.removeItem('token'); |
|||
// 执行重新登录的逻辑,例如跳转到登录页面
|
|||
window.location.href = '/login'; |
|||
// 可以在这里返回一个特定的值或者对象,以便调用者知道需要重新登录
|
|||
return { needsLogin: true }; |
|||
} else { |
|||
// 其他类型的错误,直接抛出
|
|||
return Promise.reject(e); |
|||
} |
|||
}); |
|||
} |
|||
@ -0,0 +1,716 @@ |
|||
<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 "../../api/index.js"; |
|||
// 变量 |
|||
// 用户对象假的 |
|||
const admin = ref({ |
|||
adminId: 1, |
|||
name: "赵刚", |
|||
area: "中国", |
|||
}); |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索====================================== |
|||
// 搜索rechargeVo |
|||
const rechargeVo = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}); |
|||
//分页总条目 |
|||
const total = ref(100); |
|||
// 搜索对象时间 |
|||
const getTime = ref([]); |
|||
// 搜索活动列表 |
|||
const activity = ref([]); |
|||
// 所有信息 |
|||
const allData = ref([]); |
|||
// 搜索地区列表 |
|||
const area = ref([]); |
|||
|
|||
// 编辑====================================== |
|||
// 驳回弹出框 |
|||
const rejectVisible = ref(false); |
|||
// 驳回对象 |
|||
const rejectObj = ref({}); |
|||
// 通过对象 |
|||
const passObj = ref({}); |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref("all"); |
|||
|
|||
// 支付方式选项 |
|||
const payWay = [ |
|||
{ |
|||
value: "微信", |
|||
label: "微信", |
|||
}, |
|||
{ |
|||
value: "支付宝", |
|||
label: "支付宝", |
|||
}, |
|||
{ |
|||
value: "银联", |
|||
label: "银联", |
|||
}, |
|||
{ |
|||
value: "信用卡", |
|||
label: "信用卡", |
|||
}, |
|||
{ |
|||
value: "借记卡", |
|||
label: "借记卡", |
|||
}, |
|||
]; |
|||
|
|||
//表格高度 |
|||
const tableHeight = computed(function () { |
|||
return (getObj.value.pageSize + 2) * 60 + "px"; |
|||
}); |
|||
|
|||
// 表单验证ref |
|||
const Ref = ref(null); |
|||
|
|||
// 方法 |
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === "number") { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != "" && getTime.value.endDate != "") { |
|||
rechargeVo.value.startDate = getTime.value[0]; |
|||
rechargeVo.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = ""; |
|||
rechargeVo.value.endDate = ""; |
|||
} |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10010/recharge/recharge", |
|||
{ ...getObj.value, rechargeVo: { ...rechargeVo.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 reset = function () { |
|||
rechargeVo.value.activityId = ""; |
|||
rechargeVo.value.payWay = ""; |
|||
rechargeVo.value.area = ""; |
|||
rechargeVo.value.startDate = ""; |
|||
rechargeVo.value.endDate = ""; |
|||
getTime.value = {}; |
|||
}; |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log("adminAll"); |
|||
rechargeVo.value.status = ""; |
|||
get(); |
|||
}; |
|||
//待审核充值明细 |
|||
const adminWait = function () { |
|||
rechargeVo.value.status = 0; |
|||
get(); |
|||
console.log("adminWait"); |
|||
}; |
|||
//已通过充值明细 |
|||
const adminPass = function () { |
|||
rechargeVo.value.status = 1; |
|||
get(); |
|||
console.log("adminPass"); |
|||
}; |
|||
//点击标签页 |
|||
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(); |
|||
} |
|||
}; |
|||
// 获取活动名称 |
|||
const getActivity = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10010/recharge/activity/select", |
|||
{} |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
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.post( |
|||
"http://192.168.8.93:10010/recharge/recharge", |
|||
{} |
|||
); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
allData.value = result.data; |
|||
console.log("allData", allData.value); |
|||
// 分离并去重地区列表 |
|||
area.value = [...new Set(allData.value.map((item) => item.area))]; |
|||
console.log("地区", area.value); |
|||
} 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) |
|||
) { |
|||
console.log("输入的数字合法"); |
|||
get(); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 编辑==================================== |
|||
// 通过按钮 |
|||
const pass = function (row) { |
|||
// 通过初始化 |
|||
passObj.value.adminId = admin.value.adminId; |
|||
passObj.value.auditId = row.auditId; |
|||
passObj.value.status = 1; |
|||
console.log("通过对象", passObj.value); |
|||
}; |
|||
|
|||
// 通过确认 |
|||
const passConfirm = async function () { |
|||
try { |
|||
console.log("通过对象", passObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10030/audit/audit/edit", |
|||
passObj.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 刷新表格数据 |
|||
get(); |
|||
//提示 |
|||
ElMessage({ |
|||
type: "success", |
|||
message: "通过成功!", |
|||
}); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 打开驳回弹出框 |
|||
const openRejectVisible = function () { |
|||
rejectVisible.value = true; |
|||
}; |
|||
// 关闭驳回弹出框 |
|||
const closeRejectVisible = function () { |
|||
rejectVisible.value = false; |
|||
}; |
|||
// 驳回按钮 |
|||
const reject = function (row) { |
|||
// 驳回初始化 |
|||
rejectObj.value.adminId = admin.value.adminId; |
|||
rejectObj.value.auditId = row.auditId; |
|||
rejectObj.value.status = 2; |
|||
rejectObj.value.reson = ""; |
|||
console.log("驳回对象", rejectObj.value); |
|||
openRejectVisible(); |
|||
}; |
|||
// 驳回确认 |
|||
const rejectConfirm = async function () { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
try { |
|||
console.log("驳回对象", rejectObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10030/audit/audit/edit", |
|||
rejectObj.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 刷新表格数据 |
|||
get(); |
|||
// 关闭弹出框 |
|||
closeRejectVisible(); |
|||
//提示 |
|||
ElMessage({ |
|||
type: "success", |
|||
message: "驳回成功!", |
|||
}); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 表单验证 |
|||
|
|||
const rules = reactive({ |
|||
reson: [{ required: true, message: "请输入驳回理由", trigger: "blur" }], |
|||
}); |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
getActivity(); |
|||
await getArea(); |
|||
}); |
|||
</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" |
|||
> |
|||
<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" |
|||
> |
|||
<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"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select |
|||
v-model="rechargeVo.area" |
|||
placeholder="请选择所属地区" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<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 @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</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-tabs> |
|||
<div> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|||
<el-table-column prop="username" label="姓名" width="100px" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="150px" /> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column |
|||
prop="activityName" |
|||
label="活动名称" |
|||
width="150px" |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeGold" |
|||
label="充值金额" |
|||
width="100px" |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeWay" |
|||
label="充值方式" |
|||
width="100px" |
|||
/> |
|||
<el-table-column prop="paidGold" label="充值金币" width="100px" /> |
|||
<el-table-column prop="freeGold" label="免费金币" width="100px" /> |
|||
<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 |
|||
:src="scope.row.rechargeVoucher" |
|||
alt="凭证" |
|||
style="width: 50px; height: 50px" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="提交人" width="100px" /> |
|||
<el-table-column prop="status" label="状态" width="100px"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.status === 1"> |
|||
<div class="status"> |
|||
<span class="green-dot"></span> |
|||
<span>已通过</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 0"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>待审核</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="red-dot"></span> |
|||
<span>已驳回</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="reson" |
|||
label="驳回理由" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="rechargeTime" label="交款时间" width="200px"> |
|||
<template #default="scope"> |
|||
{{ |
|||
moment(scope.row.rechargeTime).format("YYYY-MM-DD HH:mm:ss") |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" label="提交时间" width="200px" /> |
|||
<el-table-column |
|||
fixed="right" |
|||
prop="operation" |
|||
label="操作" |
|||
width="150px" |
|||
> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-popconfirm |
|||
title="确定要通过此条记录吗?" |
|||
@confirm="passConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button |
|||
:disabled=" |
|||
scope.row.status === 1 || scope.row.status === 2 |
|||
? true |
|||
: false |
|||
" |
|||
type="primary" |
|||
text |
|||
@click="pass(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> |
|||
<el-button |
|||
:disabled=" |
|||
scope.row.status === 1 || scope.row.status === 2 |
|||
? true |
|||
: false |
|||
" |
|||
type="primary" |
|||
text |
|||
@click="reject(scope.row)" |
|||
> |
|||
驳回 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
layout="slot" |
|||
:total="total" |
|||
> |
|||
<div>共{{ total }}条,每页</div> |
|||
<el-select |
|||
v-model="getObj.pageSize" |
|||
class="page-size" |
|||
@change="get()" |
|||
style="width: 80px" |
|||
> |
|||
<el-option |
|||
v-for="item in [5, 6, 7, 8, 9, 10]" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
></el-option> |
|||
</el-select> |
|||
<div>条</div> |
|||
</el-pagination> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next,slot" |
|||
:page-size="getObj.pageSize" |
|||
:total="total" |
|||
:current-page="getObj.pageNum" |
|||
@current-change="get" |
|||
> |
|||
<div>跳至</div> |
|||
<el-input |
|||
v-model="getObj.pageNum" |
|||
style="width: 40px" |
|||
@change="checkNumber" |
|||
/> |
|||
<div>页</div> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 驳回弹出框 --> |
|||
<el-dialog |
|||
v-model="rejectVisible" |
|||
title="驳回理由" |
|||
width="500" |
|||
:before-close="closeRejectVisible" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
:model="rejectObj" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
> |
|||
<el-form-item prop="reson" label="驳回理由:"> |
|||
<el-input |
|||
v-model="rejectObj.reson" |
|||
maxlength="150" |
|||
show-word-limit |
|||
style="width: 350px" |
|||
type="textarea" |
|||
placeholder="请输入内容" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeRejectVisible()">取消</el-button> |
|||
<el-button type="primary" @click="rejectConfirm()"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.operation { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,689 @@ |
|||
<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 "../../api/index.js"; |
|||
// 变量 |
|||
// 用户对象假的 |
|||
const admin = ref({ |
|||
adminId: 1, |
|||
name: "赵刚", |
|||
area: "中国", |
|||
}); |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索====================================== |
|||
// 搜索consumeDetail |
|||
const consumeDetail = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}); |
|||
//分页总条目 |
|||
const total = ref(100); |
|||
// 搜索对象时间 |
|||
const getTime = ref([]); |
|||
// 搜索活动列表 |
|||
const product = ref([]); |
|||
// 所有信息 |
|||
const allData = ref([]); |
|||
// 搜索地区列表 |
|||
const area = ref([]); |
|||
|
|||
// 编辑====================================== |
|||
// 驳回弹出框 |
|||
const rejectVisible = ref(false); |
|||
// 驳回对象 |
|||
const rejectObj = ref({}); |
|||
// 通过对象 |
|||
const passObj = ref({}); |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref("all"); |
|||
|
|||
// 退款类型选项 |
|||
const refundType = [ |
|||
{ |
|||
value: "退金币", |
|||
label: "退金币", |
|||
}, |
|||
{ |
|||
value: "退商品", |
|||
label: "退商品", |
|||
}, |
|||
]; |
|||
|
|||
//表格高度 |
|||
const tableHeight = computed(function () { |
|||
return (getObj.value.pageSize + 1) * 50 + "px"; |
|||
}); |
|||
|
|||
// 表单验证ref |
|||
const Ref = ref(null); |
|||
|
|||
// 方法 |
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === "number") { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != "" && getTime.value.endDate != "") { |
|||
consumeDetail.value.startDate = getTime.value[0]; |
|||
consumeDetail.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
consumeDetail.value.startDate = ""; |
|||
consumeDetail.value.endDate = ""; |
|||
} |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10030/audit/audit/refund", |
|||
{ ...getObj.value, consumeDetail: { ...consumeDetail.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 reset = function () { |
|||
consumeDetail.value.area = ""; |
|||
consumeDetail.value.refundType = ""; |
|||
consumeDetail.value.refundGoods = ""; |
|||
consumeDetail.value.startDate = ""; |
|||
consumeDetail.value.endDate = ""; |
|||
getTime.value = {}; |
|||
}; |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log("adminAll"); |
|||
consumeDetail.value.status = ""; |
|||
get(); |
|||
}; |
|||
//待审核充值明细 |
|||
const adminWait = function () { |
|||
consumeDetail.value.status = 0; |
|||
get(); |
|||
console.log("adminWait"); |
|||
}; |
|||
//已通过充值明细 |
|||
const adminPass = function () { |
|||
consumeDetail.value.status = 1; |
|||
get(); |
|||
console.log("adminPass"); |
|||
}; |
|||
//点击标签页 |
|||
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(); |
|||
} |
|||
}; |
|||
// 获取活动名称 |
|||
const getProduct = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10020/product", {}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
product.value = result.data; |
|||
console.log("产品", product.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10010/recharge/recharge", |
|||
{} |
|||
); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
allData.value = result.data; |
|||
console.log("allData", allData.value); |
|||
// 分离并去重地区列表 |
|||
area.value = [...new Set(allData.value.map((item) => item.area))]; |
|||
console.log("地区", area.value); |
|||
} 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) |
|||
) { |
|||
console.log("输入的数字合法"); |
|||
get(); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 编辑==================================== |
|||
// 通过按钮 |
|||
const pass = function (row) { |
|||
// 通过初始化 |
|||
passObj.value.adminId = admin.value.adminId; |
|||
passObj.value.auditId = row.auditId; |
|||
passObj.value.status = 1; |
|||
console.log("通过对象", passObj.value); |
|||
}; |
|||
|
|||
// 通过确认 |
|||
const passConfirm = async function () { |
|||
try { |
|||
console.log("通过对象", passObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10030/audit/audit/edit", |
|||
passObj.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 刷新表格数据 |
|||
get(); |
|||
//提示 |
|||
ElMessage({ |
|||
type: "success", |
|||
message: "通过成功!", |
|||
}); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 打开驳回弹出框 |
|||
const openRejectVisible = function () { |
|||
rejectVisible.value = true; |
|||
}; |
|||
// 关闭驳回弹出框 |
|||
const closeRejectVisible = function () { |
|||
rejectVisible.value = false; |
|||
}; |
|||
// 驳回按钮 |
|||
const reject = function (row) { |
|||
// 驳回初始化 |
|||
rejectObj.value.adminId = admin.value.adminId; |
|||
rejectObj.value.auditId = row.auditId; |
|||
rejectObj.value.status = 2; |
|||
rejectObj.value.reson = ""; |
|||
console.log("驳回对象", rejectObj.value); |
|||
openRejectVisible(); |
|||
}; |
|||
// 驳回确认 |
|||
const rejectConfirm = async function () { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
try { |
|||
console.log("驳回对象", rejectObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10030/audit/audit/edit", |
|||
rejectObj.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 刷新表格数据 |
|||
get(); |
|||
// 关闭弹出框 |
|||
closeRejectVisible(); |
|||
//提示 |
|||
ElMessage({ |
|||
type: "success", |
|||
message: "驳回成功!", |
|||
}); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 表单验证 |
|||
|
|||
const rules = reactive({ |
|||
reson: [{ required: true, message: "请输入驳回理由", trigger: "blur" }], |
|||
}); |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
getProduct(); |
|||
await getArea(); |
|||
}); |
|||
</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="consumeDetail.refundType" |
|||
placeholder="请选择退款类型" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in refundType" |
|||
: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="consumeDetail.refundGoods" |
|||
placeholder="请选择退款商品" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in product" |
|||
:key="item.name" |
|||
:label="item.name" |
|||
:value="item.name" |
|||
/> |
|||
</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="consumeDetail.area" |
|||
placeholder="请选择所属地区" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<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 @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</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-tabs> |
|||
<div> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|||
<el-table-column prop="user" label="姓名" width="100px" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="150px" /> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column prop="refundType" label="退款类型" width="150px" /> |
|||
<el-table-column |
|||
prop="refundGoods" |
|||
label="退款商品" |
|||
width="100px" |
|||
/> |
|||
<el-table-column prop="refundCoin" label="退款金币数" width="100px"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.row.rechargeCoin + |
|||
scope.row.freeCoin + |
|||
scope.row.taskCoin |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
label="充值金币" |
|||
width="100px" |
|||
/> |
|||
<el-table-column prop="freeCoin" label="免费金币" width="100px" /> |
|||
<el-table-column prop="taskCoin" label="任务金币" width="100px" /> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<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" label="提交时间" width="200px"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
prop="operation" |
|||
label="操作" |
|||
width="150px" |
|||
> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-popconfirm |
|||
title="确定要通过此条记录吗?" |
|||
@confirm="passConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button |
|||
:disabled=" |
|||
scope.row.status === 1 || scope.row.status === 2 |
|||
? true |
|||
: false |
|||
" |
|||
type="primary" |
|||
text |
|||
@click="pass(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> |
|||
<el-button |
|||
:disabled=" |
|||
scope.row.status === 1 || scope.row.status === 2 |
|||
? true |
|||
: false |
|||
" |
|||
type="primary" |
|||
text |
|||
@click="reject(scope.row)" |
|||
> |
|||
驳回 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
layout="slot" |
|||
:total="total" |
|||
> |
|||
<div>共{{ total }}条,每页</div> |
|||
<el-select |
|||
v-model="getObj.pageSize" |
|||
class="page-size" |
|||
@change="get()" |
|||
style="width: 80px" |
|||
> |
|||
<el-option |
|||
v-for="item in [5, 6, 7, 8, 9, 10]" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
></el-option> |
|||
</el-select> |
|||
<div>条</div> |
|||
</el-pagination> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next,slot" |
|||
:page-size="getObj.pageSize" |
|||
:total="total" |
|||
:current-page="getObj.pageNum" |
|||
@current-change="get" |
|||
> |
|||
<div>跳至</div> |
|||
<el-input |
|||
v-model="getObj.pageNum" |
|||
style="width: 40px" |
|||
@change="checkNumber" |
|||
/> |
|||
<div>页</div> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 驳回弹出框 --> |
|||
<el-dialog |
|||
v-model="rejectVisible" |
|||
title="驳回理由" |
|||
width="500" |
|||
:before-close="closeRejectVisible" |
|||
> |
|||
<template #footer> |
|||
<el-form |
|||
:model="rejectObj" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
> |
|||
<el-form-item prop="reson" label="驳回理由:"> |
|||
<el-input |
|||
v-model="rejectObj.reson" |
|||
maxlength="150" |
|||
show-word-limit |
|||
style="width: 350px" |
|||
type="textarea" |
|||
placeholder="请输入内容" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeRejectVisible()">取消</el-button> |
|||
<el-button type="primary" @click="rejectConfirm()"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.operation { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,384 @@ |
|||
<script setup> |
|||
import { reactive } from "vue"; |
|||
import { ref, computed, watch } from "vue"; |
|||
import { ElMessage } from "element-plus"; |
|||
import { Plus } from "@element-plus/icons-vue"; |
|||
import axios from "axios"; |
|||
import { ElMessageBox } from "element-plus"; |
|||
import API from "../../api/index.js"; |
|||
|
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}); |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10070/admin/userinfo", |
|||
{} |
|||
); |
|||
adminData.value = result; |
|||
addConsume.value.adminId = adminData.value.adminId; |
|||
console.log("请求成功", result); |
|||
console.log("用户信息", adminData.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
getAdminData(); |
|||
|
|||
// 这是添加消费信息的表单 |
|||
const addConsume = ref({ |
|||
freeCoin: 0, |
|||
rechargeCoin: 0, |
|||
taskCoin: 0, |
|||
updateType: "消费", |
|||
}); |
|||
// 这是添加消费信息的接口 |
|||
const add = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.147:10030/consume/add", |
|||
addConsume.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
console.log("用户信息", user.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm("确认添加?") |
|||
.then(() => { |
|||
add(); |
|||
console.log("添加成功"); |
|||
imageUrl.value = ""; |
|||
addConsume.value = {}; |
|||
}) |
|||
.catch(() => { |
|||
console.log("取消添加"); |
|||
}); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 表单验证 |
|||
// 开始时间改变时,重新验证结束时间 |
|||
const Ref = ref(null); |
|||
const checkEndTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error("付款时间不能小于当前时间")); |
|||
} |
|||
}; |
|||
const rules = reactive({ |
|||
jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }], |
|||
productId: [{ required: true, message: "请选择消费商品", trigger: "blur" }], |
|||
taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }], |
|||
freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }], |
|||
rechargeCoin: [ |
|||
{ required: true, message: "请输入免费金币", trigger: "blur" }, |
|||
], |
|||
allGold: [{ required: true, message: "请输入消费金币总数", trigger: "blur" }], |
|||
}); |
|||
|
|||
// 查找客户信息的方法 |
|||
const user = ref({}); |
|||
const getUser = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10020/recharge/user", { |
|||
jwcode: jwcode, |
|||
}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
user.value = result.data[0]; |
|||
console.log("用户信息", user.value); |
|||
if (result.data.code === 0) { |
|||
ElMessage.error(result.data.msg); |
|||
} else { |
|||
ElMessage.success(result.data.msg); |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error("查询失败,请检查精网号是否正确"); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 查询商品的接口 |
|||
const goods = ref([]); |
|||
const getGoods = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10020/product", {}); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
goods.value = result.data; |
|||
console.log("allData", allData.value); |
|||
console.log("地区", area.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
getGoods(); |
|||
|
|||
//这是查询用户金币信息的接口 |
|||
const userGold = ref({}); |
|||
const getUserGold = async function (jwcode) { |
|||
try { |
|||
const result = await API.post( |
|||
"http://192.168.8.147:10070/statistics/getMess/" + jwcode |
|||
); |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
userGold.value = result.data; |
|||
console.log("userGold", userGold.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
|
|||
function calculateCoins() { |
|||
// 保存原始的allGold值 |
|||
const originalAllGold = addConsume.value.allGold; |
|||
|
|||
// 确保todayTask和todayFree是有效的数字 |
|||
const todayTask = |
|||
typeof userGold.value.todayTask === "number" ? userGold.value.todayTask : 0; |
|||
const todayFree = |
|||
typeof userGold.value.todayFree === "number" ? userGold.value.todayFree : 0; |
|||
|
|||
// 根据用户输入的消费金币总数和已有的金币数量进行计算 |
|||
addConsume.value.taskCoin = Math.min(originalAllGold, todayTask); |
|||
let remainingGold = originalAllGold - addConsume.value.taskCoin; |
|||
|
|||
addConsume.value.freeCoin = Math.min(remainingGold, todayFree); |
|||
remainingGold -= addConsume.value.freeCoin; |
|||
|
|||
addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作充值金币 |
|||
|
|||
// 恢复allGold的原始值 |
|||
addConsume.value.allGold = originalAllGold; |
|||
|
|||
// 确保taskCoin, freeCoin, rechargeCoin不是NaN,如果是,则设置为0 |
|||
if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0; |
|||
if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0; |
|||
if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0; |
|||
|
|||
console.log("计算结果", addConsume.value); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div style="margin-bottom: 20px">新增消费</div> |
|||
|
|||
<el-form |
|||
:model="addConsume" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 750px" |
|||
class="form-style" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="addConsume.jwcode" |
|||
style="width: 220px" |
|||
@change="getUserGold(addConsume.jwcode)" |
|||
/> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(addConsume.jwcode)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="productId" label="商品名称"> |
|||
<el-select |
|||
v-model="addConsume.productId" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
> |
|||
<el-option |
|||
v-for="item in goods" |
|||
:key="item.value" |
|||
:label="item.name" |
|||
:value="item.productId" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="allGold" label="消费金币总数"> |
|||
<el-input |
|||
v-model="addConsume.allGold" |
|||
style="width: 100px" |
|||
@change="calculateCoins()" |
|||
/> |
|||
</el-form-item> |
|||
<div style="display: flex; align-items: center"> |
|||
<el-form-item prop="taskCoin" label="任务金币" style="float: left"> |
|||
<el-input |
|||
disabled |
|||
v-model="addConsume.taskCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 0px">个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="freeCoin" |
|||
label="免费金币" |
|||
style="float: left; margin-left: -20px" |
|||
> |
|||
<el-input |
|||
disabled |
|||
v-model="addConsume.freeCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 0px">个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="rechargeCoin" |
|||
label="充值金币" |
|||
style="margin-left: -20px" |
|||
> |
|||
<el-input |
|||
disabled |
|||
v-model="addConsume.rechargeCoin" |
|||
style="width: 100px; margin-left: -5px" |
|||
/> |
|||
<p style="margin-right: 20px">个</p> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addConsume.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="commitName" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
:value="adminData.name" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> |
|||
<el-button @click="closeAddActivityVisible" style="margin-left: 280px" |
|||
>取消</el-button |
|||
> |
|||
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
|||
</el-form> |
|||
|
|||
<!-- 客户信息栏 --> |
|||
<el-card style="width: 700px; float: right" class="form-style2"> |
|||
<el-form |
|||
:model="user" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
label-position="left" |
|||
> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<el-row style="margin-top: 20px"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="姓名:"> |
|||
<p>{{ user.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="历史金币总数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="精网号"> |
|||
<p>{{ user.jwcode }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="当前金币总数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="首次充值日期"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="充值次数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责客服"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="消费次数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所属门店"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="待审核"> </el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
.el-form-item { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
/* 上传图片的格式 */ |
|||
.avatar-uploader .avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed var(--el-border-color); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: var(--el-transition-duration-fast); |
|||
} |
|||
|
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: var(--el-color-primary); |
|||
} |
|||
|
|||
.el-icon.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 50px; |
|||
height: 50px; |
|||
text-align: center; |
|||
} |
|||
.form-style { |
|||
margin-top: 50px; |
|||
max-width: 50%; |
|||
float: left; |
|||
} |
|||
.form-style2 { |
|||
max-width: 50%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,437 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import ElementPlus from "element-plus"; |
|||
import { AiFillRead } from "vue-icons-plus/ai"; |
|||
import axios from "axios"; |
|||
import API from "../../api/index.js"; |
|||
// 变量 |
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索====================================== |
|||
// 搜索detailVo |
|||
const detailVo = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}); |
|||
//分页总条目 |
|||
const total = ref(100); |
|||
// 搜索对象时间 |
|||
const getTime = ref([]); |
|||
// 搜索活动列表 |
|||
const activity = ref([]); |
|||
// 所有信息 |
|||
const allData = ref([]); |
|||
// 搜索地区列表 |
|||
const area = ref([]); |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref("all"); |
|||
|
|||
// 消费平台选项 |
|||
const consumePlatform = [ |
|||
{ |
|||
value: "HomilyLink", |
|||
label: "HomilyLink", |
|||
}, |
|||
{ |
|||
value: "金币系统", |
|||
label: "金币系统", |
|||
}, |
|||
{ |
|||
value: "ERP系统", |
|||
label: "ERP系统", |
|||
}, |
|||
{ |
|||
value: "金币系统", |
|||
label: "金币系统", |
|||
}, |
|||
]; |
|||
const consumeType = [ |
|||
{ |
|||
value: "购买商品", |
|||
label: "购买商品", |
|||
}, |
|||
]; |
|||
|
|||
//表格高度 |
|||
const tableHeight = computed(function () { |
|||
return (getObj.value.pageSize + 1) * 41 + "px"; |
|||
}); |
|||
// 方法 |
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === "number") { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != "" && getTime.value.endDate != "") { |
|||
detailVo.value.startDate = getTime.value[0]; |
|||
detailVo.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
detailVo.value.startDate = ""; |
|||
detailVo.value.endDate = ""; |
|||
} |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10050/consume/select", { |
|||
...getObj.value, |
|||
detailVo: { ...detailVo.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 reset = function () { |
|||
detailVo.value.productName = ""; |
|||
detailVo.value.consumePlatform = ""; |
|||
detailVo.value.consumeType = ""; |
|||
detailVo.value.startDate = ""; |
|||
detailVo.value.endDate = ""; |
|||
}; |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
//点击标签页 |
|||
const handleClick = function (tab, event) { |
|||
if (tab.props.name === "all") { |
|||
adminAll(); |
|||
} else if (tab.props.name === "wait") { |
|||
adminWait(); |
|||
} else if (tab.props.name === "pass") { |
|||
adminPass(); |
|||
} else if (tab.props.name === "reject") { |
|||
adminReject(); |
|||
} |
|||
}; |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await 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) |
|||
) { |
|||
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 API.post("http://192.168.8.93:10020/product", {}); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
goods.value = result.data; |
|||
console.log("allData", allData.value); |
|||
console.log("地区", area.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
getGoods(); |
|||
</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" |
|||
> |
|||
<el-option |
|||
v-for="item in goods" |
|||
:key="item.activityId" |
|||
:label="item.name" |
|||
:value="item.name" |
|||
/> |
|||
</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" |
|||
> |
|||
<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" |
|||
> |
|||
<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 @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|||
<el-table-column prop="userName" label="姓名" width="80px" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="180px" /> |
|||
<el-table-column prop="area" label="所属地区" width="120px" /> |
|||
<el-table-column |
|||
prop="productName" |
|||
label="商品名称" |
|||
width="200px" |
|||
/> |
|||
<el-table-column |
|||
prop="consumePlatform" |
|||
label="消费平台" |
|||
width="120px" |
|||
/> |
|||
<el-table-column |
|||
prop="consumeType" |
|||
label="消费类型" |
|||
width="120px" |
|||
/> |
|||
<el-table-column |
|||
prop="rechargeTotal" |
|||
label="消费金币总数" |
|||
width="180px" |
|||
> |
|||
<template #default="scope"> |
|||
{{ |
|||
scope.row.taskCoin + |
|||
scope.row.freeCoin + |
|||
scope.row.rechargeCoin |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="taskCoin" label="任务金币" width="120px" /> |
|||
<el-table-column prop="freeCoin" label="免费金币" width="120px" /> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
label="充值金币" |
|||
width="120px" |
|||
/> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="adminName" label="提交人" width="120px" /> |
|||
<el-table-column prop="createTime" label="消费时间" width="180px" /> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
layout="slot" |
|||
:total="total" |
|||
> |
|||
<div>共{{ total }}条,每页</div> |
|||
<el-select |
|||
v-model="getObj.pageSize" |
|||
class="page-size" |
|||
@change="get()" |
|||
style="width: 80px" |
|||
> |
|||
<el-option |
|||
v-for="item in [5, 6, 7, 8, 9, 10]" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
></el-option> |
|||
</el-select> |
|||
<div>条</div> |
|||
</el-pagination> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next, slot" |
|||
:page-size="getObj.pageSize" |
|||
:total="total" |
|||
:current-page="getObj.pageNum" |
|||
@current-change="get" |
|||
> |
|||
<div>跳至</div> |
|||
<el-input |
|||
v-model="getObj.pageNum" |
|||
style="width: 40px" |
|||
@change="checkNumber" |
|||
/> |
|||
<div>页</div> |
|||
</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; |
|||
margin-left: 33%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,195 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import { useRouter } from "vue-router"; |
|||
import ElementPlus from "element-plus"; |
|||
import { VscGlobe } from "vue-icons-plus/vsc"; |
|||
import { ElMessage } from "element-plus"; |
|||
import axios from "axios"; |
|||
import { ElMessageBox } from "element-plus"; |
|||
import API from "../api/index.js"; |
|||
|
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({ |
|||
name: "", |
|||
}); |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10070/admin/userinfo", |
|||
{} |
|||
); |
|||
adminData.value = result; |
|||
console.log("请求成功", result); |
|||
console.log("用户信息", adminData.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
getAdminData(); |
|||
|
|||
const router = useRouter(); |
|||
|
|||
// 用户对象假的 |
|||
const admin = ref({ |
|||
adminId: 1, |
|||
name: "客服A", |
|||
area: "新加坡", |
|||
}); |
|||
|
|||
function logout() { |
|||
localStorage.removeItem("token"); |
|||
router.push("/login"); |
|||
ElMessage.success("退出成功"); |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
// 获取用户信息 |
|||
getAdminData(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-aside style="width: 250px"> |
|||
<div class="logo"> |
|||
<img |
|||
src="../assets/金币管理系统logo.png" |
|||
alt="logo" |
|||
style="width: 30px; height: 30px" |
|||
/> |
|||
<div style="font-size: 16px; font-weight: bold">海外金币管理系统</div> |
|||
</div> |
|||
<el-menu |
|||
router="true" |
|||
background-color="#08193d" |
|||
active-text-color="#ffd04b" |
|||
text-color="white" |
|||
class="el-menu-vertical-demo" |
|||
default-active="2" |
|||
@open="handleOpen" |
|||
@close="handleClose" |
|||
> |
|||
<el-menu-item index="/workspace"> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
工作台 |
|||
</el-menu-item> |
|||
|
|||
<el-sub-menu index="2"> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>财务审核</span> |
|||
</template> |
|||
<el-menu-item index="/rechargeAudit">充值审核</el-menu-item> |
|||
<el-menu-item index="/refundAudit">退款审核</el-menu-item> |
|||
</el-sub-menu> |
|||
|
|||
<el-sub-menu index="3"> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>充值管理</span> |
|||
</template> |
|||
<el-menu-item index="/activity">活动管理</el-menu-item> |
|||
<el-menu-item index="/rate">汇率管理</el-menu-item> |
|||
</el-sub-menu> |
|||
|
|||
<el-sub-menu index="4"> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>金币充值</span> |
|||
</template> |
|||
<el-menu-item index="/addRecharge">新增充值</el-menu-item> |
|||
<el-menu-item index="/adminRecharge">客服充值明细</el-menu-item> |
|||
<el-menu-item index="/allRecharge">所有充值明细</el-menu-item> |
|||
</el-sub-menu> |
|||
|
|||
<el-sub-menu index="5"> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>金币消费</span> |
|||
</template> |
|||
<el-menu-item index="/addConsume">新增消费</el-menu-item> |
|||
<el-menu-item index="/allConsume">所有消费明细</el-menu-item> |
|||
</el-sub-menu> |
|||
|
|||
<el-sub-menu index="6"> |
|||
<template #title> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
<span>金币退款</span> |
|||
</template> |
|||
<el-menu-item index="/addRefund">新增退款</el-menu-item> |
|||
<el-menu-item index="/allRefund">退款明细</el-menu-item> |
|||
</el-sub-menu> |
|||
|
|||
<el-menu-item index="/usergold"> |
|||
<el-icon> |
|||
<Folder /> |
|||
</el-icon> |
|||
客户金币明细 |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-aside> |
|||
<el-container> |
|||
<el-header> |
|||
<el-menu |
|||
:default-active="activeIndex" |
|||
class="el-menu-demo" |
|||
mode="horizontal" |
|||
:ellipsis="false" |
|||
@select="handleSelect" |
|||
> |
|||
<el-sub-menu index="1" class="admin"> |
|||
<template #title> |
|||
<img |
|||
style="width: 30px; height: 30px; border-radius: 50%" |
|||
src="../assets/金币管理系统logo.png" |
|||
alt="出错了" |
|||
/> |
|||
<span style="margin-left: 10px">{{ adminData.name }}</span> |
|||
</template> |
|||
<el-menu-item index="1-1">查看个人信息</el-menu-item> |
|||
<el-menu-item index="1-2" @click="logout">退出登录</el-menu-item> |
|||
</el-sub-menu> |
|||
<el-menu-item index="2"> |
|||
<VscGlobe /> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-header> |
|||
<el-main> |
|||
<router-view></router-view> |
|||
</el-main> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.admin { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.el-aside { |
|||
background-color: #08193d; |
|||
min-height: 100vh; |
|||
width: 200px; |
|||
} |
|||
|
|||
.logo { |
|||
color: white; |
|||
margin: 20px 0px 20px 20px; |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,126 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import { ElMessage } from "element-plus"; |
|||
import axios from "axios"; |
|||
import { useRouter } from "vue-router"; |
|||
import { VscGlobe } from "vue-icons-plus/vsc"; |
|||
|
|||
const router = useRouter(); // 获取路由实例 |
|||
const form = ref({ name: "", password: "" }); |
|||
//调用方法 |
|||
const login = async function () { |
|||
try { |
|||
const result = await axios.post( |
|||
"http://192.168.8.93:10070/admin/login", |
|||
form.value |
|||
); |
|||
if (result.data.code == 200) { |
|||
localStorage.setItem("token", result.data.msg); |
|||
router.push("/"); |
|||
ElMessage.success("登录成功"); |
|||
console.log("请求成功", result); |
|||
} else { |
|||
form.value.password = ""; |
|||
form.value.username = ""; |
|||
ElMessage.error(result.data.msg); |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error(result.data.msg); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-row class="login-page"> |
|||
<img |
|||
:span="12" |
|||
src="../assets/background.jpg" |
|||
alt="logo" |
|||
class="bg" |
|||
fit="fit" |
|||
/> |
|||
<el-col :span="6" :offset="3" class="form"> |
|||
<!-- 登录表单 --> |
|||
<el-form |
|||
:model="form" |
|||
size="large" |
|||
autocomplete="off" |
|||
@keyup.enter.native="login()" |
|||
> |
|||
<el-form-item> |
|||
<h1 style="color: #409eff">金币系统登录</h1> |
|||
</el-form-item> |
|||
<el-form-item prop="username"> |
|||
<el-input |
|||
v-model="form.username" |
|||
placeholder="请输入用户名" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="password"> |
|||
<el-input |
|||
v-model="form.password" |
|||
type="password" |
|||
placeholder="请输入密码" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item class="flex"> </el-form-item> |
|||
<!-- 登录按钮 --> |
|||
<el-form-item> |
|||
<el-button |
|||
class="button" |
|||
type="primary" |
|||
auto-insert-space |
|||
@click="login()" |
|||
>登录</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
<style scoped> |
|||
.bg { |
|||
border-radius: 0 20px 20px 0; |
|||
height: 100vh; |
|||
width: 50%; |
|||
object-fit: cover; |
|||
} |
|||
.background { |
|||
color: #fffdfd; |
|||
text-align: center; |
|||
font-size: 24px; |
|||
background-color: #08193d; |
|||
} |
|||
.form { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
user-select: none; |
|||
|
|||
.title { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.button { |
|||
width: 100%; |
|||
} |
|||
|
|||
.flex { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
|
|||
/* .box { |
|||
padding: 20px; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} */ |
|||
</style> |
|||
@ -0,0 +1,603 @@ |
|||
<script setup> |
|||
import { ref, onMounted, computed, reactive } from "vue"; |
|||
import { ElMessageBox } from "element-plus"; |
|||
import axios from "axios"; |
|||
import { createApp } from "vue"; |
|||
import moment from "moment"; |
|||
import API from "../../api/index.js"; |
|||
|
|||
// 查询用户接口 |
|||
const adminData = ref({ |
|||
name: "", |
|||
}); |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10070/admin/userinfo", |
|||
{} |
|||
); |
|||
adminData.value = result; |
|||
addRate.value.adminId = adminData.value.adminId; |
|||
editRate.value.adminId = adminData.value.adminId; |
|||
console.log("请求成功", result); |
|||
console.log("用户信息", user.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
getAdminData(); |
|||
|
|||
const regeAdd = ref(false); |
|||
const regeEdit = ref(false); |
|||
|
|||
//汇率表格数据 |
|||
const tableData = ref([]); |
|||
//搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}); |
|||
const total = ref(0); |
|||
//分页总条目 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === "number") { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
|
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10010/rates/search", { |
|||
...getObj.value, |
|||
rate: { ...value1.value }, |
|||
}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list; |
|||
console.log("tableData", tableData.value); |
|||
// 在这里可以根据需求进一步处理成功后的逻辑,比如更新UI显示成功消息等 |
|||
// 存储分页总条目 |
|||
total.value = result.data.total; |
|||
console.log("total", total.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 添加方法 |
|||
const rateAdd = ref({ |
|||
adminId: "1", |
|||
}); |
|||
const addRate = async function () { |
|||
try { |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10010/rates/add", |
|||
rateAdd.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
get(); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
const add = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm("确认添加?") |
|||
.then(() => { |
|||
addRate(); |
|||
rateAdd.value = {}; |
|||
value1.value = { |
|||
startTime: "", |
|||
endTime: "", |
|||
}; |
|||
regeAdd.value = false; |
|||
}) |
|||
.catch(() => { |
|||
regeAdd.value = false; |
|||
}); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 编辑方法 |
|||
const rateEdit = ref({}); |
|||
//查询已有的数据 |
|||
const getEditData = async function (row) { |
|||
try { |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10010/rates/search", { |
|||
rate: { rateId: row.rateId }, |
|||
}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
rateEdit.value = result.data[0]; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
const editRate = async function () { |
|||
try { |
|||
console.log("搜索参数", rateEdit.value); |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10010/rates/update", |
|||
rateEdit.value |
|||
); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
get(); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
const edit = () => { |
|||
ElMessageBox.confirm("确认修改?") |
|||
.then(() => { |
|||
editRate(); |
|||
regeEdit.value = false; |
|||
}) |
|||
.catch(() => { |
|||
regeEdit.value = false; |
|||
}); |
|||
}; |
|||
|
|||
// 删除方法 |
|||
const deleteRate = async function (row) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10010/rates/delete/ " + row.rateId |
|||
); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
get(); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
get(); |
|||
}); |
|||
//分页 |
|||
function handlePageChange(currentPage, pageSize) { |
|||
get(); |
|||
} |
|||
//货币条目 |
|||
const options = [ |
|||
{ |
|||
value: "USD", |
|||
label: "USD", |
|||
}, |
|||
{ |
|||
value: "EUR", |
|||
label: "EUR", |
|||
}, |
|||
{ |
|||
value: "JPY", |
|||
label: "JPY", |
|||
}, |
|||
{ |
|||
value: "GBP", |
|||
label: "GBP", |
|||
}, |
|||
{ |
|||
value: "AUD", |
|||
label: "AUD", |
|||
}, |
|||
]; |
|||
|
|||
//时间选择器 |
|||
const value1 = ref({ |
|||
startTime: "", |
|||
endTime: "", |
|||
}); // 时间数组 |
|||
function handleDateChange(value) { |
|||
if (value && value.length === 2) { |
|||
value1.value.startTime = value[0]; // 开始日期 |
|||
value1.value.endTime = value[1]; // 结束日期 |
|||
} |
|||
console.log(value1); |
|||
} |
|||
|
|||
function formatDate(value) { |
|||
if (!value) return ""; |
|||
const date = new Date(value); |
|||
const year = date.getFullYear(); |
|||
const month = (date.getMonth() + 1).toString().padStart(2, "0"); |
|||
const day = date.getDate().toString().padStart(2, "0"); |
|||
const hours = date.getHours().toString().padStart(2, "0"); |
|||
const minutes = date.getMinutes().toString().padStart(2, "0"); |
|||
const seconds = date.getSeconds().toString().padStart(2, "0"); |
|||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|||
} |
|||
|
|||
//表格高度 |
|||
const tableHeight = computed(function () { |
|||
return (getObj.value.pageSize + 1) * 50 + "px"; |
|||
}); |
|||
|
|||
// 新增数据规则 |
|||
// 表单验证ref |
|||
const Ref = ref(null); |
|||
const handleStartTimeChange = () => { |
|||
Ref.value.validateField("endTime"); |
|||
}; |
|||
const checkStartTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error("开始时间不能小于当前时间")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
const checkEndTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error("结束时间不能小于当前时间")); |
|||
} else if (value <= rateAdd.value.startTime) { |
|||
callback(new Error("结束时间不能小于开始时间")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
const rules = reactive({ |
|||
currency: [{ required: true, message: "请选择货币名称", trigger: "blur" }], |
|||
exchangeRate: [{ required: true, message: "请输入汇率", trigger: "blur" }], |
|||
updateName: [{ required: true, message: "请输入添加人", trigger: "blur" }], |
|||
startTime: [ |
|||
{ required: true, message: "请选择开始时间", trigger: "blur" }, |
|||
{ validator: checkStartTime, trigger: "blur" }, |
|||
], |
|||
endTime: [ |
|||
{ required: true, message: "请选择结束时间", trigger: "blur" }, |
|||
{ validator: checkEndTime, trigger: "blur" }, |
|||
], |
|||
}); |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
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) |
|||
) { |
|||
console.log("输入的数字合法"); |
|||
get(); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<!-- 这是主页面 --> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<!-- 这是时间 --> |
|||
<div class="demo-range"> |
|||
时间: |
|||
<el-date-picker |
|||
v-model="value1" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
@change="handleDateChange" |
|||
:size="size" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
<!-- 按钮 --> |
|||
<el-button |
|||
class="button-item" |
|||
type="primary" |
|||
style="float: right" |
|||
@click="get" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
class="button-item" |
|||
style="float: right" |
|||
@click="handledelete" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col> |
|||
<el-card class="box-card" style="max-width: 100%"> |
|||
<!-- 添加 --> |
|||
<div class="add-item"> |
|||
<el-button |
|||
style="color: #048efb; border: 1px solid #048efb" |
|||
@click="regeAdd = true" |
|||
>新增汇率</el-button |
|||
> |
|||
</div> |
|||
<!-- 表格 --> |
|||
<div> |
|||
<el-table |
|||
:data="tableData" |
|||
v-if="(tableData.flag = 1)" |
|||
:height="tableHeight" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column prop="currency" label="货币名称" :span="3" /> |
|||
<el-table-column prop="exchangeRate" label="汇率" :span="3"> |
|||
<template #default="scope"> |
|||
<p>{{ scope.row.exchangeRate }} :1新币</p> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="createTime" label="添加时间" :span="5"> |
|||
<template #default="scope"> |
|||
<span>{{ formatDate(scope.row.createTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" label="更新时间" :span="5"> |
|||
<template #default="scope"> |
|||
<span>{{ formatDate(scope.row.updateTime) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="updateName" label="更新人" :span="4" /> |
|||
<el-table-column label="操作" :span="4"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
type="text" |
|||
@click=" |
|||
regeEdit = true; |
|||
getEditData(scope.row); |
|||
" |
|||
>编辑</el-button |
|||
> |
|||
<el-button type="text" @click="deleteRate(scope.row)" |
|||
>删除</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
layout="slot" |
|||
:total="total" |
|||
> |
|||
<div>共{{ total }}条,每页</div> |
|||
<el-select |
|||
v-model="getObj.pageSize" |
|||
class="page-size" |
|||
@change="get()" |
|||
style="width: 80px" |
|||
> |
|||
<el-option |
|||
v-for="item in [5, 6, 7, 8, 9, 10]" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
></el-option> |
|||
</el-select> |
|||
<div>条</div> |
|||
</el-pagination> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next, slot" |
|||
:page-size="getObj.pageSize" |
|||
:total="total" |
|||
:current-page="getObj.pageNum" |
|||
@current-change="get" |
|||
> |
|||
<div>跳至</div> |
|||
<el-input |
|||
v-model="getObj.pageNum" |
|||
style="width: 40px" |
|||
@change="checkNumber" |
|||
/> |
|||
<div>页</div> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 这是添加弹窗 --> |
|||
<el-dialog v-model="regeAdd" title="新增汇率" width="500"> |
|||
<template #footer> |
|||
<el-form |
|||
ref="Ref" |
|||
style="max-width: 600px" |
|||
:model="rateAdd" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
:size="formSize" |
|||
status-icon |
|||
> |
|||
<el-form-item prop="currency" label="货币名称:"> |
|||
<el-select |
|||
v-model.number="rateAdd.currency" |
|||
placeholder="请选择" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="exchangeRate" label="汇率:"> |
|||
<el-input v-model="rateAdd.exchangeRate" style="width: 120px" /> |
|||
<p class="unit">:1</p> |
|||
<p>(提示:当前规则每 5 元人民币可兑换 1 新币)</p> |
|||
</el-form-item> |
|||
<el-form-item prop="updateName" label="提交人:"> |
|||
<el-input :value="adminData.name" disabled style="width: 240px" /> |
|||
</el-form-item> |
|||
<el-form-item prop="startTime" label="开始时间:"> |
|||
<el-date-picker |
|||
v-model="rateAdd.startTime" |
|||
type="date" |
|||
placeholder="请选择时间" |
|||
:default-value="new Date()" |
|||
@change="handleStartTimeChange" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="endTime" label="结束时间:"> |
|||
<el-date-picker |
|||
v-model="rateAdd.endTime" |
|||
type="date" |
|||
placeholder="请选择时间" |
|||
:default-value="new Date()" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" @click="add">添加</el-button> |
|||
<el-button @click="regeAdd = false">取消</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<!-- 这是编辑弹窗 --> |
|||
<el-dialog v-model="regeEdit" title="修改汇率" width="500"> |
|||
<template #footer> |
|||
<el-form |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="rateEdit" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
:size="formSize" |
|||
status-icon |
|||
> |
|||
<el-form-item label="货币名称:"> |
|||
<el-select |
|||
v-model="rateEdit.currency" |
|||
placeholder="请选择" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="汇率:"> |
|||
<el-input v-model="rateEdit.exchangeRate" style="width: 120px" /> |
|||
<p class="unit">:1</p> |
|||
<p>(提示:当前规则每 5 元人民币可兑换 1 新币)</p> |
|||
</el-form-item> |
|||
<el-form-item label="提交人:"> |
|||
<el-input disabled :value="adminData.name" style="width: 240px" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" @click="edit">修改</el-button> |
|||
<el-button @click="regeEdit = false">取消</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
|
|||
.el-form-item { |
|||
margin-left: 70px; |
|||
} |
|||
|
|||
.ad { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.pagination { |
|||
margin-top: 20px; |
|||
margin-left: 33%; |
|||
} |
|||
|
|||
.box-card { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.button-item { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.add-item { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
el-table-column { |
|||
text-align: center; |
|||
} |
|||
|
|||
p { |
|||
color: rgb(150, 150, 150); |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.el-card { |
|||
padding: 0px; |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,440 @@ |
|||
<script setup> |
|||
import { reactive } from "vue"; |
|||
import { ref, computed, watch } from "vue"; |
|||
import { ElMessage } from "element-plus"; |
|||
import { Plus } from "@element-plus/icons-vue"; |
|||
import axios from "axios"; |
|||
import { ElMessageBox } from "element-plus"; |
|||
import API from "../../api/index.js"; |
|||
|
|||
const adminData = ref({}); |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10070/admin/userinfo", |
|||
{} |
|||
); |
|||
adminData.value = result; |
|||
addRecharge.value.adminId = adminData.value.adminId; |
|||
console.log("请求成功", result); |
|||
console.log("用户信息", user.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
getAdminData(); |
|||
|
|||
// 这是添加充值信息的表单 |
|||
const addRecharge = ref({ |
|||
rechargeVoucher: "", |
|||
rechargeWay: "客服充值", |
|||
adminId: "1", |
|||
freeGold: 0, |
|||
rechargeGold: 0, |
|||
paidGold: 0, |
|||
}); |
|||
// 这是添加充值信息的接口 |
|||
const add = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10010/recharge/recharge/add", |
|||
addRecharge.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
console.log("用户信息", user.value); |
|||
imageUrl.value = ""; |
|||
addRecharge.value = {}; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm("确认添加?") |
|||
.then(() => { |
|||
add(); |
|||
console.log("添加成功"); |
|||
}) |
|||
.catch(() => { |
|||
console.log("取消添加"); |
|||
}); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 表单验证 |
|||
// 开始时间改变时,重新验证结束时间 |
|||
const Ref = ref(null); |
|||
const checkEndTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error("付款时间不能小于当前时间")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
const rules = reactive({ |
|||
jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }], |
|||
activityId: [{ required: true, message: "请选择活动名称", trigger: "blur" }], |
|||
paidGold: [{ required: true, message: "请输入充值金币", trigger: "blur" }], |
|||
rechargeGold: [ |
|||
{ required: true, message: "请输入充值金额", trigger: "blur" }, |
|||
], |
|||
payWay: [{ required: true, message: "请选择付款方式", trigger: "blur" }], |
|||
rechargeTime: [ |
|||
{ required: true, message: "请选择交款时间", trigger: "blur" }, |
|||
{ validator: checkEndTime, trigger: "blur" }, |
|||
], |
|||
}); |
|||
|
|||
// 查找客户信息的方法 |
|||
const user = ref({}); |
|||
const getUser = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10020/recharge/user", { |
|||
jwcode: jwcode, |
|||
}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
user.value = result.data[0]; |
|||
console.log("用户信息", user.value); |
|||
if (result.data.code === 0) { |
|||
ElMessage.error(result.data.msg); |
|||
} else { |
|||
ElMessage.success(result.data.msg); |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error("查询失败,请检查精网号是否正确"); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 这是查询活动的接口 |
|||
const activity = ref([]); |
|||
const getActivity = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10010/recharge/activity/select", |
|||
{} |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
activity.value = result.data; |
|||
console.log("活动信息", activity.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
getActivity(); |
|||
|
|||
// 这是查询货币的接口 |
|||
const currency = ref([]); |
|||
const getCurrency = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10010/rates/search", {}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("货币请求成功", result); |
|||
// 存储表格数据 |
|||
currency.value = result.data; |
|||
console.log("tableData", currency.value); |
|||
// 在这里可以根据需求进一步处理成功后的逻辑,比如更新UI显示成功消息等 |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
getCurrency(); |
|||
|
|||
// 这是添加上传图片的接口 |
|||
const imageUrl = ref(""); |
|||
|
|||
// 上传图片成功的回调函数 |
|||
const handleAvatarSuccess = (response, uploadFile) => { |
|||
imageUrl.value = URL.createObjectURL(uploadFile.raw); |
|||
console.log("图片上传成功", response, uploadFile); |
|||
addRecharge.value.rechargeVoucher = `http://192.168.8.93:10010/upload/${response.data}`; |
|||
console.log("图片名称", addRecharge.value.rechargeVoucher); |
|||
}; |
|||
// 上传图片之前的校验函数 |
|||
const beforeAvatarUpload = (rawFile) => { |
|||
if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") { |
|||
ElMessage.error("图片格式必须为jpg或png!"); |
|||
return false; |
|||
} else if (rawFile.size / 1024 / 1024 > 2) { |
|||
ElMessage.error("Avatar picture size can not exceed 2MB!"); |
|||
return false; |
|||
} |
|||
return true; |
|||
}; |
|||
|
|||
//充值方式条目 |
|||
const options = [ |
|||
{ |
|||
value: "现金充值", |
|||
label: "现金充值", |
|||
}, |
|||
{ |
|||
value: "龙鳞卡", |
|||
label: "龙鳞卡", |
|||
}, |
|||
{ |
|||
value: "弘粉卡", |
|||
label: "弘粉卡", |
|||
}, |
|||
]; |
|||
|
|||
const calculatedFreeGold = computed(() => { |
|||
return addRecharge.value.paidGold / addRecharge.value.activityId; |
|||
}); |
|||
const calculatedRechargeGold = computed(() => { |
|||
return addRecharge.value.paidGold * addRecharge.value.rateId; |
|||
}); |
|||
watch(calculatedFreeGold, (newVal) => { |
|||
addRecharge.value.freeGold = newVal; |
|||
}); |
|||
watch(calculatedRechargeGold, (newVal) => { |
|||
addRecharge.value.rechargeGold = newVal; |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div>新增充值</div> |
|||
|
|||
<el-form |
|||
:model="addRecharge" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
class="add-form" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input v-model="addRecharge.jwcode" style="width: 220px" /> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(addRecharge.jwcode)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="activityId" label="活动名称"> |
|||
<el-select |
|||
v-model="addRecharge.activityId" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
> |
|||
<el-option |
|||
v-for="item in activity" |
|||
:key="item.value" |
|||
:label="item.activityName" |
|||
:value="item.rechargeRatio" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="paidGold" label="充值金币"> |
|||
<el-input v-model="addRecharge.paidGold" style="width: 100px" /> |
|||
<p style="margin-right: 20px">个</p> |
|||
<p>免费金币</p> |
|||
<el-input v-model="addRecharge.freeGold" disabled style="width: 100px" /> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
<el-form-item label="充值金额"> |
|||
<el-select |
|||
prop="rechargeGold" |
|||
v-model="addRecharge.rateId" |
|||
placeholder="货币名称" |
|||
style="width: 95px; margin-right: 5px" |
|||
> |
|||
<el-option |
|||
v-for="item in currency" |
|||
:key="item.value" |
|||
:label="item.currency" |
|||
:value="item.exchangeRate" |
|||
/> |
|||
</el-select> |
|||
<el-input |
|||
disabled |
|||
v-model="addRecharge.rechargeGold" |
|||
style="width: 200px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="payWay" label="收款方式"> |
|||
<el-select |
|||
v-model="addRecharge.payWay" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="rechargeTime" label="交款时间"> |
|||
<el-date-picker |
|||
v-model="addRecharge.rechargeTime" |
|||
type="date" |
|||
style="width: 300px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="rechargeVoucher" |
|||
label="交款凭证" |
|||
style="margin-bottom: 5px" |
|||
> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
action="http://192.168.8.93:10010/upload" |
|||
:show-file-list="false" |
|||
:on-success="handleAvatarSuccess" |
|||
:before-upload="beforeAvatarUpload" |
|||
> |
|||
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> |
|||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
|||
</el-upload> |
|||
<p style="margin-left: 10px; color: rgb(177, 176, 176)"> |
|||
仅支持.jpg .png格式,文件≤1MB |
|||
</p> |
|||
</el-form-item> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addRecharge.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="submitter" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
:value="adminData.name" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> |
|||
<el-button @click="closeAddActivityVisible" style="margin-left: 280px" |
|||
>取消</el-button |
|||
> |
|||
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
|||
</el-form> |
|||
|
|||
<!-- 客户信息栏 --> |
|||
<el-card style="width: 700px; float: right" class="customer-info"> |
|||
<el-form |
|||
:model="user" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
label-position="left" |
|||
> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<el-row style="margin-top: 20px"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="姓名:"> |
|||
<p>{{ user.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="历史金币总数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="精网号"> |
|||
<p>{{ user.jwcode }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="当前金币总数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="首次充值日期"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="充值次数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责客服"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="消费次数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所属门店"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="待审核"> </el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
.el-form-item { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
/* 上传图片的格式 */ |
|||
.avatar-uploader .avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed var(--el-border-color); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: var(--el-transition-duration-fast); |
|||
} |
|||
|
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: var(--el-color-primary); |
|||
} |
|||
|
|||
.el-icon.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 50px; |
|||
height: 50px; |
|||
text-align: center; |
|||
} |
|||
.add-form { |
|||
margin-top: 50px; |
|||
max-width: 50%; |
|||
float: left; |
|||
} |
|||
.customer-info { |
|||
max-width: 50%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,497 @@ |
|||
<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 "../../api/index.js"; |
|||
// 变量 |
|||
// 用户对象假的 |
|||
const admin = ref({ |
|||
adminId: 1, |
|||
name: '赵刚', |
|||
area: '中国' |
|||
}) |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索=========================================== |
|||
// 搜索recharge |
|||
const rechargeVo = ref({ |
|||
adminId: admin.value.adminId, |
|||
}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}); |
|||
//分页总条目 |
|||
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 get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|||
rechargeVo.value.startDate = getTime.value[0]; |
|||
rechargeVo.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = ''; |
|||
rechargeVo.value.endDate = ''; |
|||
} |
|||
console.log('搜索参数', getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post('http://192.168.8.93:10010/recharge/recharge', { ...getObj.value, rechargeVo: { ...rechargeVo.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 reset = function () { |
|||
rechargeVo.value.activityId = ''; |
|||
rechargeVo.value.payWay = ''; |
|||
rechargeVo.value.area = ''; |
|||
rechargeVo.value.startDate = ''; |
|||
rechargeVo.value.endDate = ''; |
|||
getTime.value = {}; |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); |
|||
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log('getTime', getTime.value); |
|||
get(); |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); |
|||
const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log('getTime', getTime.value); |
|||
get(); |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6); |
|||
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log('getTime', getTime.value); |
|||
get(); |
|||
} |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log('adminAll'); |
|||
rechargeVo.value.status = ''; |
|||
get(); |
|||
} |
|||
//待审核充值明细 |
|||
const adminWait = function () { |
|||
rechargeVo.value.status = 0; |
|||
get(); |
|||
console.log('adminWait'); |
|||
} |
|||
//已通过充值明细 |
|||
const adminPass = function () { |
|||
rechargeVo.value.status = 1; |
|||
get(); |
|||
console.log('adminPass'); |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = function () { |
|||
rechargeVo.value.status = 2; |
|||
get(); |
|||
console.log('adminReject'); |
|||
} |
|||
//点击标签页 |
|||
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.post('http://192.168.8.93:10010/recharge/activity/select', {}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
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.post('http://192.168.8.93:10010/recharge/recharge', {}); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result); |
|||
// 存储全部数据 |
|||
allData.value = result.data; |
|||
console.log('allData', allData.value); |
|||
// 分离并去重地区列表 |
|||
area.value = [...new Set(allData.value.map(item => item.area))] |
|||
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.post('http://192.168.8.93:10010/recharge/recharge/edit', 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))) { |
|||
console.log('输入的数字合法'); |
|||
get(); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容', |
|||
}) |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容', |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
getActivity(); |
|||
await getArea(); |
|||
}) |
|||
|
|||
|
|||
|
|||
</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"> |
|||
<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"> |
|||
<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"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select v-model="rechargeVo.area" placeholder="请选择所属地区" size="large" |
|||
style="width: 240px"> |
|||
<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 @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</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> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|||
<el-table-column prop="username" label="姓名" width="100px" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="150px" /> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column prop="activityName" label="活动名称" width="150px" /> |
|||
<el-table-column prop="rechargeGold" label="充值金额" width="100px" /> |
|||
<el-table-column prop="paidGold" label="充值金币" width="100px" /> |
|||
<el-table-column prop="freeGold" label="免费金币" width="100px" /> |
|||
<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 :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="提交人" width="100px" /> |
|||
<el-table-column prop="status" label="状态" width="100px"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.status === 1"> |
|||
<div class="status"> |
|||
<span class="green-dot"></span> |
|||
<span>已通过</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 0"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>待审核</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="red-dot"></span> |
|||
<span>已驳回</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip /> |
|||
<el-table-column prop="rechargeTime" label="交款时间" width="200px"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" 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"> |
|||
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
|||
<div>共{{ total }}条,每页 </div> |
|||
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
|||
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" |
|||
:value="item"></el-option> |
|||
</el-select> |
|||
<div> 条</div> |
|||
</el-pagination> |
|||
<el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" |
|||
:total="total" :current-page="getObj.pageNum" @current-change="get"> |
|||
<div>跳至</div> |
|||
<el-input v-model="getObj.pageNum" style="width: 40px;" @change="checkNumber" /> |
|||
<div>页</div> |
|||
</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> |
|||
@ -0,0 +1,404 @@ |
|||
<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 "../../api/index.js"; |
|||
// 变量 |
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索====================================== |
|||
// 搜索rechargeVo |
|||
const rechargeVo = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}); |
|||
//分页总条目 |
|||
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 tableHeight = computed(function () { |
|||
return (getObj.value.pageSize + 2) * 60 + 'px'; |
|||
}); |
|||
|
|||
|
|||
// 方法 |
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === 'number') { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|||
rechargeVo.value.startDate = getTime.value[0]; |
|||
rechargeVo.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
rechargeVo.value.startDate = ''; |
|||
rechargeVo.value.endDate = ''; |
|||
} |
|||
console.log('搜索参数', getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post('http://192.168.8.93:10010/recharge/recharge', { ...getObj.value, rechargeVo: { ...rechargeVo.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 reset = function () { |
|||
rechargeVo.value.activityId = ''; |
|||
rechargeVo.value.payWay = ''; |
|||
rechargeVo.value.area = ''; |
|||
rechargeVo.value.startDate = ''; |
|||
rechargeVo.value.endDate = ''; |
|||
getTime.value={}; |
|||
} |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); |
|||
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log('getTime', getTime.value); |
|||
get(); |
|||
} |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); |
|||
const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log('getTime', getTime.value); |
|||
get(); |
|||
} |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6); |
|||
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log('getTime', getTime.value); |
|||
get(); |
|||
} |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log('adminAll'); |
|||
rechargeVo.value.status = ''; |
|||
get(); |
|||
} |
|||
//待审核充值明细 |
|||
const adminWait = function () { |
|||
rechargeVo.value.status = 0; |
|||
get(); |
|||
console.log('adminWait'); |
|||
} |
|||
//已通过充值明细 |
|||
const adminPass = function () { |
|||
rechargeVo.value.status = 1; |
|||
get(); |
|||
console.log('adminPass'); |
|||
} |
|||
//已驳回充值明细 |
|||
const adminReject = function () { |
|||
rechargeVo.value.status = 2; |
|||
get(); |
|||
console.log('adminReject'); |
|||
} |
|||
//点击标签页 |
|||
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.post('http://192.168.8.93:10010/recharge/activity/select', {}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
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.post('http://192.168.8.93:10010/recharge/recharge', {}); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log('请求成功', result); |
|||
// 存储全部数据 |
|||
allData.value = result.data; |
|||
console.log('allData', allData.value); |
|||
// 分离并去重地区列表 |
|||
area.value = [...new Set(allData.value.map(item => item.area))] |
|||
console.log('地区', area.value); |
|||
} 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))) { |
|||
console.log('输入的数字合法'); |
|||
get(); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容', |
|||
}) |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: 'error', |
|||
message: '请检查输入内容', |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
getActivity(); |
|||
await getArea(); |
|||
}) |
|||
|
|||
</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"> |
|||
<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"> |
|||
<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"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select v-model="rechargeVo.area" placeholder="请选择所属地区" size="large" |
|||
style="width: 240px"> |
|||
<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 @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</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> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|||
<el-table-column prop="username" label="姓名" width="100px" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="150px" /> |
|||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|||
<el-table-column prop="activityName" label="活动名称" width="150px" /> |
|||
<el-table-column prop="rechargeGold" label="充值金额" width="100px" /> |
|||
<el-table-column prop="rechargeWay" label="充值方式" width="100px" /> |
|||
<el-table-column prop="paidGold" label="充值金币" width="100px" /> |
|||
<el-table-column prop="freeGold" label="免费金币" width="100px" /> |
|||
<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 :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="提交人" width="100px" /> |
|||
<el-table-column prop="status" label="状态" width="100px"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.status === 1"> |
|||
<div class="status"> |
|||
<span class="green-dot"></span> |
|||
<span>已通过</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 0"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>待审核</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.status === 2"> |
|||
<div class="status"> |
|||
<span class="red-dot"></span> |
|||
<span>已驳回</span> |
|||
</div> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip /> |
|||
<el-table-column prop="rechargeTime" label="交款时间" width="200px"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" label="提交时间" width="200px" /> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
|||
<div>共{{ total }}条,每页 </div> |
|||
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
|||
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" |
|||
:value="item"></el-option> |
|||
</el-select> |
|||
<div> 条</div> |
|||
</el-pagination> |
|||
<el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" |
|||
:total="total" :current-page="getObj.pageNum" @current-change="get"> |
|||
<div>跳至</div> |
|||
<el-input v-model="getObj.pageNum" style="width: 40px;" @change="checkNumber" /> |
|||
<div>页</div> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</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> |
|||
@ -0,0 +1,412 @@ |
|||
<script setup> |
|||
import { reactive } from "vue"; |
|||
import { ref, computed, watch } from "vue"; |
|||
import { ElMessage } from "element-plus"; |
|||
import { Plus } from "@element-plus/icons-vue"; |
|||
import axios from "axios"; |
|||
import { ElMessageBox } from "element-plus"; |
|||
import API from "../../api/index.js"; |
|||
|
|||
//这是获取用户信息的接口 |
|||
const adminData = ref({}); |
|||
const getAdminData = async function () { |
|||
try { |
|||
const result = await API.post( |
|||
"http://192.168.8.93:10070/admin/userinfo", |
|||
{} |
|||
); |
|||
adminData.value = result; |
|||
addRefund.value.adminId = adminData.value.adminId; |
|||
console.log("请求成功", result); |
|||
console.log("用户信息", user.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
getAdminData(); |
|||
|
|||
// 这是添加充值信息的表单 |
|||
const addRefund = ref({ |
|||
adminId: "1", |
|||
updateType: "退款", |
|||
allCoin: 0, |
|||
contactId: "", |
|||
refundGoods: "", |
|||
freeCoin: 0, |
|||
rechargeCoin: 0, |
|||
taskCoin: 0, |
|||
}); |
|||
// 这是添加充值信息的接口 |
|||
const add = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.174:10040/refund/add", |
|||
addRefund.value |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
console.log("用户信息", user.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
const addBefore = () => { |
|||
Ref.value.validate(async (valid) => { |
|||
if (valid) { |
|||
ElMessageBox.confirm("确认添加?") |
|||
.then(() => { |
|||
addRefund.value.freeCoin = Number(-addRefund.value.freeCoin); |
|||
addRefund.value.rechargeCoin = Number(-addRefund.value.rechargeCoin); |
|||
addRefund.value.taskCoin = Number(-addRefund.value.taskCoin); |
|||
add(); |
|||
console.log("添加成功"); |
|||
addRefund.value.allCoin = 0; |
|||
(addRefund.value.freeCoin = 0), |
|||
(addRefund.value.rechargeCoin = 0), |
|||
(addRefund.value.taskCoin = 0), |
|||
(addRefund.value = {}); |
|||
}) |
|||
.catch(() => { |
|||
console.log("取消添加"); |
|||
}); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 表单验证 |
|||
// 开始时间改变时,重新验证结束时间 |
|||
const Ref = ref(null); |
|||
const checkEndTime = function (rule, value, callback) { |
|||
if (value <= new Date()) { |
|||
callback(new Error("付款时间不能小于当前时间")); |
|||
} |
|||
}; |
|||
const rules = reactive({ |
|||
jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }], |
|||
refundType: [{ required: true, message: "请选择退款类型", trigger: "blur" }], |
|||
refundGoods: [{ required: true, message: "请选择退款商品", trigger: "blur" }], |
|||
taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }], |
|||
freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }], |
|||
rechargeCoin: [ |
|||
{ required: true, message: "请输入充值金币", trigger: "blur" }, |
|||
], |
|||
allCoin: [{ required: true, message: "请选择付款方式", trigger: "blur" }], |
|||
}); |
|||
|
|||
// 查找客户信息的方法 |
|||
const user = ref({}); |
|||
const getUser = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10020/recharge/user", { |
|||
jwcode: jwcode, |
|||
}); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
user.value = result.data[0]; |
|||
console.log("用户信息", user.value); |
|||
if (result.data.code === 0) { |
|||
ElMessage.error(result.data.msg); |
|||
} else { |
|||
ElMessage.success(result.data.msg); |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error("查询失败,请检查精网号是否正确"); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
const calculatedAllGold = computed(() => { |
|||
const sum = |
|||
Number(addRefund.value.freeCoin) + |
|||
Number(addRefund.value.rechargeCoin) + |
|||
Number(addRefund.value.taskCoin); |
|||
return !isNaN(sum) ? sum : 0; |
|||
}); |
|||
|
|||
watch(calculatedAllGold, (newVal) => { |
|||
addRefund.value.allCoin = newVal; |
|||
}); |
|||
|
|||
const AAA = computed(() => { |
|||
return addRefund.value.jwcode; |
|||
}); |
|||
|
|||
watch(AAA, (newVal) => {}); |
|||
|
|||
// 退款类型选项 |
|||
const refundType = [ |
|||
{ |
|||
value: "退款商品", |
|||
label: "退款商品", |
|||
}, |
|||
{ |
|||
value: "退款金币", |
|||
label: "退款金币", |
|||
}, |
|||
]; |
|||
|
|||
// 根据精网号查询商品 |
|||
const goods = ref([]); |
|||
const getGoods = async function (jwcode) { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post( |
|||
"http://192.168.8.147:10030/consume/getDeatil/" + addRefund.value.jwcode |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储表格数据 |
|||
goods.value = result.data; |
|||
console.log("用户信息", goods.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error("查询失败,请检查精网号是否正确"); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
const calculatedRechargeGoods = computed(() => { |
|||
return ( |
|||
+addRefund.value.freeCoin + |
|||
+addRefund.value.rechargeCoin + |
|||
+addRefund.value.taskCoin |
|||
); |
|||
}); |
|||
watch(calculatedRechargeGoods, (newVal) => { |
|||
addRefund.value.allCoin = newVal; |
|||
}); |
|||
watch(calculatedRechargeGoods, (newVal) => { |
|||
addRefund.value.allCoin = newVal; |
|||
console.log("计算的总金币", newVal); |
|||
}); |
|||
|
|||
// 绑定两个数据 |
|||
|
|||
const handleSelectionChange = (value) => { |
|||
const selectedItem = goods.value.find((item) => item.detailId === value); |
|||
if (selectedItem) { |
|||
addRefund.value.contactId = selectedItem.detailId; |
|||
addRefund.value.refundGoods = selectedItem.productName; |
|||
} |
|||
console.log("选择的商品", addRefund.value.refundGoods); |
|||
console.log("选择的商品ID", addRefund.value.contactId); // 打印选中的商品ID |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div>新增退款</div> |
|||
|
|||
<el-form |
|||
:model="addRefund" |
|||
ref="Ref" |
|||
:rules="rules" |
|||
label-width="auto" |
|||
style="max-width: 750px" |
|||
class="form-style" |
|||
> |
|||
<el-form-item prop="jwcode" label="精网号"> |
|||
<el-input |
|||
v-model="addRefund.jwcode" |
|||
style="width: 220px" |
|||
@change="getGoods(addRefund.jwcode)" |
|||
/> |
|||
<el-button |
|||
type="primary" |
|||
@click="getUser(addRefund.jwcode)" |
|||
style="margin-left: 20px" |
|||
>查询</el-button |
|||
> |
|||
</el-form-item> |
|||
<el-form-item prop="refundType" label="退款类型"> |
|||
<el-select |
|||
v-model="addRefund.refundType" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
> |
|||
<el-option |
|||
v-for="item in refundType" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="contactId" label="退款商品"> |
|||
<el-select |
|||
v-model="addRefund.contactId" |
|||
placeholder="请选择" |
|||
style="width: 300px" |
|||
@change="handleSelectionChange" |
|||
> |
|||
<el-option |
|||
v-for="item in goods" |
|||
:key="item.value" |
|||
:label="item.productName" |
|||
:value="item.detailId" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<div style="display: flex; align-items: center"> |
|||
<el-form-item prop="taskCoin" label="任务金币" style="float: left"> |
|||
<el-input v-model="addRefund.taskCoin" style="width: 100px" /> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="freeCoin" |
|||
label="免费金币" |
|||
style="margin-left: -20px; float: left" |
|||
> |
|||
<el-input |
|||
v-model="addRefund.freeCoin" |
|||
style="float: left; width: 100px" |
|||
/> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="rechargeCoin" |
|||
label="充值金币" |
|||
style="margin-left: -20px" |
|||
> |
|||
<el-input |
|||
v-model="addRefund.rechargeCoin" |
|||
style="float: left; width: 100px" |
|||
/> |
|||
<p>个</p> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item prop="allCoin" label="退款金币总数"> |
|||
<el-input disabled v-model="addRefund.allCoin" style="width: 100px"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input |
|||
v-model="addRefund.remark" |
|||
style="width: 300px" |
|||
:rows="2" |
|||
maxlength="100" |
|||
show-word-limit |
|||
type="textarea" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="commitName" label="提交人"> |
|||
<el-input |
|||
style="width: 300px" |
|||
:value="adminData.name" |
|||
disabled |
|||
placeholder="提交人姓名" |
|||
/> |
|||
</el-form-item> |
|||
<el-button @click="closeAddActivityVisible" style="margin-left: 280px" |
|||
>取消</el-button |
|||
> |
|||
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
|||
</el-form> |
|||
|
|||
<!-- 客户信息栏 --> |
|||
<el-card style="width: 700px; float: right" class="form-style2"> |
|||
<el-form |
|||
:model="user" |
|||
label-width="auto" |
|||
style="max-width: 600px" |
|||
label-position="left" |
|||
> |
|||
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
|||
<el-row style="margin-top: 20px"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="姓名:"> |
|||
<p>{{ user.name }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="历史金币总数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="精网号"> |
|||
<p>{{ user.jwcode }}</p> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="当前金币总数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="首次充值日期"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="充值次数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责客服"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="消费次数"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所属门店"> </el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="待审核"> </el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
.el-form-item { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
/* 上传图片的格式 */ |
|||
.avatar-uploader .avatar { |
|||
width: 50px; |
|||
height: 50px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed var(--el-border-color); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition: var(--el-transition-duration-fast); |
|||
} |
|||
|
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: var(--el-color-primary); |
|||
} |
|||
|
|||
.el-icon.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 50px; |
|||
height: 50px; |
|||
text-align: center; |
|||
} |
|||
.form-style { |
|||
margin-top: 50px; |
|||
max-width: 50%; |
|||
float: left; |
|||
} |
|||
.form-style2 { |
|||
max-width: 50%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,511 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import ElementPlus from "element-plus"; |
|||
import { AiFillRead } from "vue-icons-plus/ai"; |
|||
import axios from "axios"; |
|||
import moment from "moment"; |
|||
import API from "../../api/index.js"; |
|||
// 变量 |
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索====================================== |
|||
// 搜索detail |
|||
const detail = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}); |
|||
//分页总条目 |
|||
const total = ref(100); |
|||
// 搜索对象时间 |
|||
const getTime = ref([]); |
|||
// 搜索活动列表 |
|||
const activity = ref([]); |
|||
// 所有信息 |
|||
const allData = ref([]); |
|||
// 搜索地区列表 |
|||
const area = ref([]); |
|||
|
|||
//标签页默认高亮选项 |
|||
const activeName = ref("all"); |
|||
|
|||
// 退款类型 |
|||
const consumeType = [ |
|||
{ |
|||
value: "退商品", |
|||
label: "退商品", |
|||
}, |
|||
{ |
|||
value: "退金币", |
|||
label: "退金币", |
|||
}, |
|||
]; |
|||
|
|||
//表格高度 |
|||
const tableHeight = computed(function () { |
|||
return (getObj.value.pageSize + 2) * 41 + "px"; |
|||
}); |
|||
|
|||
// 方法 |
|||
// 搜索============================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === "number") { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != "" && getTime.value.endDate != "") { |
|||
detail.value.startDate = getTime.value[0]; |
|||
detail.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
detail.value.startDate = ""; |
|||
detail.value.endDate = ""; |
|||
} |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.174:10040/refund/search", { |
|||
...getObj.value, |
|||
detail: { ...detail.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 reset = function () { |
|||
detail.value.refundGoods = ""; |
|||
detail.value.refundType = ""; |
|||
detail.value.adminArea = ""; |
|||
detail.value.startDate = ""; |
|||
detail.value.endDate = ""; |
|||
get(); |
|||
}; |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
//全部充值明细 |
|||
const adminAll = function () { |
|||
console.log("adminAll"); |
|||
detail.value.auditStatus = ""; |
|||
get(); |
|||
}; |
|||
//待审核充值明细 |
|||
const adminWait = function () { |
|||
detail.value.auditStatus = 0; |
|||
get(); |
|||
console.log("adminWait"); |
|||
}; |
|||
//已通过充值明细 |
|||
const adminPass = function () { |
|||
detail.value.auditStatus = 1; |
|||
get(); |
|||
console.log("adminPass"); |
|||
}; |
|||
//已驳回充值明细 |
|||
const adminReject = function () { |
|||
detail.value.auditStatus = 2; |
|||
get(); |
|||
console.log("adminReject"); |
|||
}; |
|||
//点击标签页 |
|||
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.post( |
|||
"http://192.168.8.93:10010/recharge/activity/select", |
|||
{} |
|||
); |
|||
|
|||
// 将响应结果存储到响应式数据中 |
|||
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.post( |
|||
"http://192.168.8.93:10010/recharge/recharge", |
|||
{} |
|||
); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
allData.value = result.data; |
|||
console.log("allData", allData.value); |
|||
// 分离并去重地区列表 |
|||
area.value = [...new Set(allData.value.map((item) => item.area))]; |
|||
console.log("地区", area.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
getActivity(); |
|||
await getArea(); |
|||
}); |
|||
//删除气泡 |
|||
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.post( |
|||
"http://192.168.8.174:10040/refund/softDelete?detailId=" + |
|||
delObj.value.detailId |
|||
); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 刷新表格数据 |
|||
get(); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 查询商品的接口 |
|||
const goods = ref([]); |
|||
const getGoods = async function () { |
|||
try { |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10020/product", {}); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
// 存储全部数据 |
|||
goods.value = result.data; |
|||
console.log("allData", allData.value); |
|||
console.log("地区", area.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
getGoods(); |
|||
</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" |
|||
> |
|||
<el-option |
|||
v-for="item in consumeType" |
|||
:key="item.activityId" |
|||
: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" |
|||
> |
|||
<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"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select |
|||
v-model="detail.adminArea" |
|||
placeholder="请选择所属地区" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<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 @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</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> |
|||
<el-table |
|||
:data="tableData" |
|||
v-if="(tableData.detaillFlag = 1)" |
|||
:height="tableHeight" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column prop="userName" label="姓名" width="80px" /> |
|||
<el-table-column prop="jwcode" label="精网号" width="180px" /> |
|||
<el-table-column prop="adminArea" label="所属地区" width="120px" /> |
|||
<el-table-column prop="refundType" label="退款类型" width="180px" /> |
|||
<el-table-column |
|||
prop="refundGoods" |
|||
label="退款商品" |
|||
width="120px" |
|||
/> |
|||
<el-table-column label="退款金币数" width="120px"> |
|||
<template #default="scope"> |
|||
{{ |
|||
scope.row.rechargeCoin + |
|||
scope.row.freeCoin + |
|||
scope.row.taskCoin |
|||
}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rechargeCoin" |
|||
label="充值金币" |
|||
width="100px" |
|||
/> |
|||
<el-table-column prop="freeCoin" label="免费金币" width="100px" /> |
|||
<el-table-column prop="taskCoin" label="任务金币" width="100px" /> |
|||
<!-- 修改prop为taskGold --> |
|||
<el-table-column |
|||
prop="remark" |
|||
label="备注" |
|||
width="200px" |
|||
show-overflow-tooltip |
|||
/> |
|||
<el-table-column prop="adminName" label="提交人" width="100px" /> |
|||
<el-table-column prop="auditStatus" label="审核状态" width="120px"> |
|||
<!-- 模板内容 --> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.auditStatus == 1"> |
|||
<div class="status"> |
|||
<span class="green-dot"></span> |
|||
<span>已通过</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.auditStatus == 0"> |
|||
<div class="status"> |
|||
<span class="grey-dot"></span> |
|||
<span>待审核</span> |
|||
</div> |
|||
</span> |
|||
<span v-if="scope.row.auditStatus == 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" label="提交时间" width="180px"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="operation" |
|||
label="操作" |
|||
fixed="right" |
|||
width="120px" |
|||
> |
|||
<template #default="scope"> |
|||
<el-popconfirm |
|||
title="确定将此条活动删除吗?" |
|||
@confirm="delConfirm" |
|||
> |
|||
<template #reference> |
|||
<el-button type="primary" text @click="del(scope.row)"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, 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> |
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next" |
|||
:total="total" |
|||
:page-size="getObj.pageSize" |
|||
:current-page="getObj.pageNum" |
|||
@current-change="get" |
|||
/> |
|||
</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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,329 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import ElementPlus from "element-plus"; |
|||
import axios from "axios"; |
|||
import { ta } from "element-plus/es/locales.mjs"; |
|||
import API from "../../api/index.js"; |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 计算用户各金币总数的不分页对象 |
|||
const tableAllData = ref([]); |
|||
// 各金币总数 |
|||
const rechargeCoin = ref(0); |
|||
const freeCoin = ref(0); |
|||
const taskCoin = ref(0); |
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100); |
|||
// 搜索对象时间 |
|||
const getTime = ref([]); |
|||
// 搜索detail |
|||
const detail = ref({}); |
|||
// 不分页的搜索对象 |
|||
const getAllObj = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}); |
|||
|
|||
// 支付方式选项 |
|||
const updateType = [ |
|||
{ |
|||
value: "充值", |
|||
label: "充值", |
|||
}, |
|||
{ |
|||
value: "消费", |
|||
label: "消费", |
|||
}, |
|||
{ |
|||
value: "退款", |
|||
label: "退款", |
|||
}, |
|||
]; |
|||
|
|||
//表格高度 |
|||
const tableHeight = computed(function () { |
|||
return getObj.value.pageSize * 50 + "px"; |
|||
}); |
|||
|
|||
// 方法 |
|||
// 搜索=========================================================================== |
|||
// 搜索方法 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === "number") { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
// 搜索参数时间赋值 |
|||
if (getTime.value != null) { |
|||
if (getTime.value.startDate != "" && getTime.value.endDate != "") { |
|||
detail.value.startDate = getTime.value[0]; |
|||
detail.value.endDate = getTime.value[1]; |
|||
} |
|||
} else { |
|||
detail.value.startDate = ""; |
|||
detail.value.endDate = ""; |
|||
} |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post("http://192.168.8.93:10040/detail", { |
|||
...getObj.value, |
|||
detail: { ...detail.value }, |
|||
}); |
|||
const result2 = await API.post("http://192.168.8.93:10040/detail", { |
|||
...getAllObj.value, |
|||
detail: { ...detail.value }, |
|||
}); |
|||
// 将响应结果存储到响应式数据中 |
|||
console.log("请求成功", result); |
|||
console.log("请求成功2", result2); |
|||
// 存储表格数据 |
|||
tableData.value = result.data.list; |
|||
console.log("tableData", tableData.value); |
|||
tableAllData.value = result2.data; |
|||
console.log("tableAllData", tableAllData.value); |
|||
// 存储分页总数 |
|||
total.value = result.data.total; |
|||
console.log("total", total.value); |
|||
// 计算各金币总数 |
|||
rechargeCoin.value = tableAllData.value.reduce( |
|||
(pre, cur) => pre + cur.rechargeCoin, |
|||
0 |
|||
); |
|||
freeCoin.value = tableAllData.value.reduce( |
|||
(pre, cur) => pre + cur.freeCoin, |
|||
0 |
|||
); |
|||
taskCoin.value = tableAllData.value.reduce( |
|||
(pre, cur) => pre + cur.taskCoin, |
|||
0 |
|||
); |
|||
console.log( |
|||
"各金币总数", |
|||
rechargeCoin.value, |
|||
freeCoin.value, |
|||
taskCoin.value |
|||
); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
}; |
|||
|
|||
// 重置 |
|||
const reset = function () { |
|||
detail.value.jwcode = ""; |
|||
detail.value.updateType = ""; |
|||
detail.value.startDate = ""; |
|||
detail.value.endDate = ""; |
|||
getTime.value = {}; |
|||
}; |
|||
// 今天 |
|||
const getToday = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 昨天 |
|||
const getYesterday = function () { |
|||
const yesterday = new Date(); |
|||
yesterday.setDate(yesterday.getDate() - 1); |
|||
const startDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() |
|||
); |
|||
const endDate = new Date( |
|||
yesterday.getFullYear(), |
|||
yesterday.getMonth(), |
|||
yesterday.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
// 近7天 |
|||
const get7Days = function () { |
|||
const today = new Date(); |
|||
const startDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() - 6 |
|||
); |
|||
const endDate = new Date( |
|||
today.getFullYear(), |
|||
today.getMonth(), |
|||
today.getDate() + 1 |
|||
); |
|||
getTime.value = [startDate, endDate]; |
|||
console.log("getTime", getTime.value); |
|||
get(); |
|||
}; |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号:</el-text> |
|||
<el-input |
|||
v-model="detail.jwcode" |
|||
style="width: 240px" |
|||
placeholder="请输入精网号" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">更新类型:</el-text> |
|||
<el-select |
|||
v-model="detail.updateType" |
|||
placeholder="请选择更新类型" |
|||
size="large" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in updateType" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">更新时间:</el-text> |
|||
<el-date-picker |
|||
v-model="getTime" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
/> |
|||
</div> |
|||
<div class="head-card-btn"> |
|||
<el-button @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="get()">查询</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<div> |
|||
现有金币:免费金币:{{ freeCoin }},充值金币:{{ |
|||
rechargeCoin |
|||
}},任务金币:{{ taskCoin }} |
|||
</div> |
|||
<div> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|||
<el-table-column prop="uname" label="姓名" /> |
|||
<el-table-column prop="jwcode" label="精网号" /> |
|||
<el-table-column prop="area" label="所属地区" /> |
|||
<el-table-column prop="gold" label="更新数量"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.row.rechargeCoin + |
|||
scope.row.freeCoin + |
|||
scope.row.taskCoin |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="updateType" label="更新类型" /> |
|||
<el-table-column prop="freeCoin" label="免费金币" /> |
|||
<el-table-column prop="rechargeCoin" label="充值金币" /> |
|||
<el-table-column prop="taskCoin" label="任务金币" /> |
|||
<el-table-column prop="name" label="提交人" /> |
|||
<el-table-column prop="createTime" label="更新时间" /> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<!-- 分页 --> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
:page-size="getObj.pageSize" |
|||
layout="slot" |
|||
:total="total" |
|||
> |
|||
<div>共{{ total }}条,每页</div> |
|||
<el-select |
|||
v-model="getObj.pageSize" |
|||
class="page-size" |
|||
@change="get()" |
|||
style="width: 80px" |
|||
> |
|||
<el-option |
|||
v-for="item in [5, 6, 7, 8, 9, 10]" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
></el-option> |
|||
</el-select> |
|||
<div>条</div> |
|||
</el-pagination> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next,slot" |
|||
:page-size="getObj.pageSize" |
|||
:total="total" |
|||
:current-page="getObj.pageNum" |
|||
@current-change="get" |
|||
> |
|||
<div>跳至</div> |
|||
<el-input |
|||
v-model="getObj.pageNum" |
|||
style="width: 40px" |
|||
@change="checkNumber" |
|||
/> |
|||
<div>页</div> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</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> |
|||
1113
vue/gold-system/src/views/workspace/index.vue
File diff suppressed because it is too large
View File
@ -0,0 +1,104 @@ |
|||
<script setup> |
|||
import { all } from 'axios'; |
|||
import * as echarts from 'echarts'; |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import { VscInfo } from 'vue-icons-plus/vsc' |
|||
import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6Circle, Bs7Circle, Bs8Circle } from 'vue-icons-plus/bs' |
|||
import axios from 'axios'; |
|||
|
|||
// 变量 |
|||
const option4Data = ref([]); |
|||
const a1=ref(1000); |
|||
const a2=ref(2000); |
|||
const a3=ref(3000); |
|||
const a4=ref(4000); |
|||
onMounted(async function () { |
|||
option4Data.value = [ |
|||
{ value: a1.value, name: '1000金币' }, |
|||
{ value: a2.value, name: '2000金币' }, |
|||
{ value: a3.value, name: '3000金币' }, |
|||
{ value: a4.value, name: '4000金币' }, |
|||
]; |
|||
// 第一个柱状图 基于准备好的dom,初始化echarts实例 |
|||
var rechargeBar = echarts.init(document.getElementById('main')); |
|||
|
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
bottom: '-2%', |
|||
left: 'center', |
|||
orient: 'vertical' |
|||
}, |
|||
grid: { |
|||
top: '0%', // 设置图表距离容器顶部的距离为10%,使饼图上移 |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '全年累计消耗金币数(个)\n10000', |
|||
type: 'pie', |
|||
radius: ['80%', '60%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: true, |
|||
position: 'center', |
|||
formatter: '{a}', |
|||
fontSize: 15, |
|||
fontWeight: 'bold' |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: option4Data.value, |
|||
color: ['#57a5ff', '#7f29ff', '#f2d113'] |
|||
} |
|||
] |
|||
}; |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
rechargeBar.setOption(option); |
|||
}) |
|||
|
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div>zzz</div> |
|||
<div id="main" style="width: 600px;height:400px;"></div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.comparedWithYesterday { |
|||
display: flex; |
|||
} |
|||
|
|||
.ranking-item { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.ranking-header { |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
} |
|||
|
|||
.goldCategory { |
|||
margin-right: 20px; |
|||
display: flex; |
|||
} |
|||
|
|||
.bar { |
|||
display: flex; |
|||
} |
|||
|
|||
.pie { |
|||
display: flex; |
|||
} |
|||
|
|||
.el-row { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.el-radio-button { |
|||
border: 1px solid grey; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
import { defineConfig } from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
|
|||
// https://vite.dev/config/
|
|||
export default defineConfig({ |
|||
plugins: [vue()], |
|||
|
|||
}) |
|||