donghaolin
4 months ago
40 changed files with 0 additions and 11504 deletions
-
24gold-system/.gitignore
-
3gold-system/.vscode/extensions.json
-
23gold-system/README.md
-
20gold-system/index.html
-
1704gold-system/package-lock.json
-
28gold-system/package.json
-
1gold-system/public/vite.svg
-
9gold-system/src/App.vue
-
13gold-system/src/api/index.js
-
BINgold-system/src/assets/background.jpg
-
72gold-system/src/assets/css/common.css
-
1gold-system/src/assets/vue.svg
-
BINgold-system/src/assets/动漫美女.png
-
BINgold-system/src/assets/金币管理系统logo.png
-
BINgold-system/src/assets/韩信.png
-
18gold-system/src/main.ts
-
54gold-system/src/router/index.js
-
79gold-system/src/style.css
-
45gold-system/src/util/http.js
-
746gold-system/src/views/audit/rechargeAudit.vue
-
590gold-system/src/views/audit/refundAudit.vue
-
477gold-system/src/views/consume/addConsume.vue
-
455gold-system/src/views/consume/allConsume.vue
-
211gold-system/src/views/index.vue
-
128gold-system/src/views/login.vue
-
532gold-system/src/views/managerecharge/activity.vue
-
741gold-system/src/views/managerecharge/rate.vue
-
1144gold-system/src/views/recharge/addRecharge.vue
-
663gold-system/src/views/recharge/adminRecharge.vue
-
546gold-system/src/views/recharge/allRecharge.vue
-
508gold-system/src/views/refund/addRefund.vue
-
568gold-system/src/views/refund/allRefund.vue
-
373gold-system/src/views/usergold/index.vue
-
1555gold-system/src/views/workspace/index.vue
-
107gold-system/src/views/z.vue
-
1gold-system/src/vite-env.d.ts
-
26gold-system/tsconfig.app.json
-
7gold-system/tsconfig.json
-
24gold-system/tsconfig.node.json
-
8gold-system/vite.config.ts
@ -1,24 +0,0 @@ |
|||||
# Logs |
|
||||
logs |
|
||||
*.log |
|
||||
npm-debug.log* |
|
||||
yarn-debug.log* |
|
||||
yarn-error.log* |
|
||||
pnpm-debug.log* |
|
||||
lerna-debug.log* |
|
||||
|
|
||||
node_modules |
|
||||
dist |
|
||||
dist-ssr |
|
||||
*.local |
|
||||
|
|
||||
# Editor directories and files |
|
||||
.vscode/* |
|
||||
!.vscode/extensions.json |
|
||||
.idea |
|
||||
.DS_Store |
|
||||
*.suo |
|
||||
*.ntvs* |
|
||||
*.njsproj |
|
||||
*.sln |
|
||||
*.sw? |
|
||||
@ -1,3 +0,0 @@ |
|||||
{ |
|
||||
"recommendations": ["Vue.volar"] |
|
||||
} |
|
||||
@ -1,23 +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组件 |
|
||||
@ -1,20 +0,0 @@ |
|||||
<!doctype html> |
|
||||
<html lang="en"> |
|
||||
<head> |
|
||||
<meta charset="UTF-8" /> |
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
||||
<title>财务金币管理系统</title> |
|
||||
</head> |
|
||||
<body> |
|
||||
<div id="app"></div> |
|
||||
<script type="module" src="/src/main.ts"></script> |
|
||||
</body> |
|
||||
</html> |
|
||||
<style> |
|
||||
html,body,#app{ |
|
||||
height:100%; |
|
||||
margin: 0px; |
|
||||
padding: 0px; |
|
||||
} |
|
||||
</style> |
|
||||
1704
gold-system/package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,28 +0,0 @@ |
|||||
{ |
|
||||
"name": "gold-system", |
|
||||
"private": true, |
|
||||
"version": "0.0.0", |
|
||||
"type": "module", |
|
||||
"scripts": { |
|
||||
"dev": "vite --host 0.0.0.0", |
|
||||
"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" |
|
||||
} |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg> |
|
||||
@ -1,9 +0,0 @@ |
|||||
<script setup> |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<router-view></router-view> |
|
||||
</template> |
|
||||
|
|
||||
<style scoped> |
|
||||
</style> |
|
||||
@ -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: 928 | Height: 1133 | Size: 567 KiB |
@ -1,72 +0,0 @@ |
|||||
.green-dot { |
|
||||
margin: 7px 5px 0px 0px; |
|
||||
width: 10px; |
|
||||
height: 10px; |
|
||||
border-radius: 50%; |
|
||||
display: block; |
|
||||
background-color: green; |
|
||||
} |
|
||||
|
|
||||
.red-dot { |
|
||||
margin: 7px 5px 0px 0px; |
|
||||
width: 10px; |
|
||||
height: 10px; |
|
||||
border-radius: 50%; |
|
||||
display: block; |
|
||||
background-color: red; |
|
||||
} |
|
||||
|
|
||||
.grey-dot { |
|
||||
margin: 7px 5px 0px 0px; |
|
||||
width: 10px; |
|
||||
height: 10px; |
|
||||
border-radius: 50%; |
|
||||
display: block; |
|
||||
background-color: grey; |
|
||||
} |
|
||||
|
|
||||
.yellow-dot { |
|
||||
margin: 7px 5px 0px 0px; |
|
||||
width: 10px; |
|
||||
height: 10px; |
|
||||
display: block; |
|
||||
background-color: #ffe733; |
|
||||
} |
|
||||
|
|
||||
.light-green-dot { |
|
||||
margin: 7px 5px 0px 0px; |
|
||||
width: 10px; |
|
||||
height: 10px; |
|
||||
display: block; |
|
||||
background-color: #35e383; |
|
||||
} |
|
||||
|
|
||||
.blue-dot { |
|
||||
margin: 7px 5px 0px 0px; |
|
||||
width: 10px; |
|
||||
height: 10px; |
|
||||
display: block; |
|
||||
background-color: #5f8ff5; |
|
||||
} |
|
||||
|
|
||||
.red-triangle { |
|
||||
width: 0; |
|
||||
height: 0; |
|
||||
border-left: 7px solid transparent; |
|
||||
border-right: 7px solid transparent; |
|
||||
border-bottom: 10px solid red; |
|
||||
} |
|
||||
|
|
||||
.green-triangle { |
|
||||
width: 0; |
|
||||
height: 0; |
|
||||
border-left: 7px solid transparent; |
|
||||
border-right: 7px solid transparent; |
|
||||
border-top: 10px solid green; |
|
||||
} |
|
||||
|
|
||||
.grey-triangle { |
|
||||
width: 10px; |
|
||||
height: 5px; |
|
||||
background-color: grey; |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg> |
|
||||
|
Before Width: 263 | Height: 181 | Size: 95 KiB |
|
Before Width: 47 | Height: 47 | Size: 2.0 KiB |
|
Before Width: 256 | Height: 180 | Size: 96 KiB |
@ -1,18 +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文件
|
|
||||
|
|
||||
const app = createApp(App) |
|
||||
|
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
|
||||
app.component(key, component) |
|
||||
} |
|
||||
|
|
||||
app.use(ElementPlus, { |
|
||||
locale: zhCn, |
|
||||
}).use(router).mount('#app'); |
|
||||
@ -1,54 +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:"/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; |
|
||||
@ -1,79 +0,0 @@ |
|||||
:root { |
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; |
|
||||
line-height: 1.5; |
|
||||
font-weight: 400; |
|
||||
|
|
||||
color-scheme: light dark; |
|
||||
color: rgba(255, 255, 255, 0.87); |
|
||||
background-color: #242424; |
|
||||
|
|
||||
font-synthesis: none; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
|
||||
|
|
||||
a { |
|
||||
font-weight: 500; |
|
||||
color: #646cff; |
|
||||
text-decoration: inherit; |
|
||||
} |
|
||||
a:hover { |
|
||||
color: #535bf2; |
|
||||
} |
|
||||
|
|
||||
body { |
|
||||
margin: 0; |
|
||||
display: flex; |
|
||||
place-items: center; |
|
||||
min-width: 320px; |
|
||||
min-height: 100vh; |
|
||||
} |
|
||||
|
|
||||
h1 { |
|
||||
font-size: 3.2em; |
|
||||
line-height: 1.1; |
|
||||
} |
|
||||
|
|
||||
button { |
|
||||
border-radius: 8px; |
|
||||
border: 1px solid transparent; |
|
||||
padding: 0.6em 1.2em; |
|
||||
font-size: 1em; |
|
||||
font-weight: 500; |
|
||||
font-family: inherit; |
|
||||
background-color: #1a1a1a; |
|
||||
cursor: pointer; |
|
||||
transition: border-color 0.25s; |
|
||||
} |
|
||||
button:hover { |
|
||||
border-color: #646cff; |
|
||||
} |
|
||||
button:focus, |
|
||||
button:focus-visible { |
|
||||
outline: 4px auto -webkit-focus-ring-color; |
|
||||
} |
|
||||
|
|
||||
.card { |
|
||||
padding: 2em; |
|
||||
} |
|
||||
|
|
||||
#app { |
|
||||
max-width: 1280px; |
|
||||
margin: 0 auto; |
|
||||
padding: 2rem; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
@media (prefers-color-scheme: light) { |
|
||||
:root { |
|
||||
color: #213547; |
|
||||
background-color: #ffffff; |
|
||||
} |
|
||||
a:hover { |
|
||||
color: #747bff; |
|
||||
} |
|
||||
button { |
|
||||
background-color: #f9f9f9; |
|
||||
} |
|
||||
} |
|
||||
@ -1,45 +0,0 @@ |
|||||
import axios from 'axios'; |
|
||||
|
|
||||
export default function (options) { |
|
||||
//配置每次发送请求都从localStorage中获取名字叫token的数据,
|
|
||||
//添加到请求头部的Authorization属性中
|
|
||||
const token = localStorage.getItem('token'); |
|
||||
//Object.assign用于合并对象的数据
|
|
||||
|
|
||||
options.data.token = token; |
|
||||
// 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); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
@ -1,746 +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 "../../api/index.js"; |
|
||||
// 变量 |
|
||||
// 用户对象假的 |
|
||||
const admin = ref({ |
|
||||
adminId: 1, |
|
||||
name: "赵刚", |
|
||||
area: "中国", |
|
||||
}); |
|
||||
|
|
||||
// 充值明细表格 |
|
||||
const tableData = ref([]); |
|
||||
// 搜索====================================== |
|
||||
// 搜索rechargeVo |
|
||||
const rechargeVo = 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 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); |
|
||||
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 () { |
|
||||
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 = ""; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
//待审核充值明细 |
|
||||
const adminWait = function () { |
|
||||
rechargeVo.value.status = 0; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminWait"); |
|
||||
}; |
|
||||
//已通过充值明细 |
|
||||
const adminPass = function () { |
|
||||
rechargeVo.value.status = 1; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminPass"); |
|
||||
}; |
|
||||
//已驳回充值明细 |
|
||||
const adminReject = function () { |
|
||||
rechargeVo.value.status = 2; |
|
||||
getObj.value.pageNum = 1; |
|
||||
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("输入的数字合法"); |
|
||||
getObj.value.pageNum = parseInt(getObj.value.pageNum); |
|
||||
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; |
|
||||
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; |
|
||||
console.log("通过对象", passObj.value); |
|
||||
}; |
|
||||
|
|
||||
// 通过确认 |
|
||||
const passConfirm = async function () { |
|
||||
try { |
|
||||
console.log("通过对象", passObj.value); |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/audit/audit/goldedit", |
|
||||
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 = ""; |
|
||||
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 API.post( |
|
||||
"http://192.168.8.93:10010/audit/audit/goldedit", |
|
||||
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" |
|
||||
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"> |
|
||||
<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> |
|
||||
</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, 10, 20, 50, 100]" |
|
||||
: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> |
|
||||
@ -1,590 +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 "../../api/index.js"; |
|
||||
// 变量 |
|
||||
// 用户对象假的 |
|
||||
const admin = ref({ |
|
||||
adminId: 1, |
|
||||
name: "赵刚", |
|
||||
area: "中国", |
|
||||
}); |
|
||||
|
|
||||
// 充值明细表格 |
|
||||
const tableData = ref([]); |
|
||||
// 搜索====================================== |
|
||||
// 搜索consumeDetail |
|
||||
const consumeDetail = ref({}); |
|
||||
// 搜索对象 |
|
||||
const getObj = ref({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
}); |
|
||||
//分页总条目 |
|
||||
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:10010/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 search = function () { |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
// 重置 |
|
||||
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 = ""; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
//待审核充值明细 |
|
||||
const adminWait = function () { |
|
||||
consumeDetail.value.status = 0; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminWait"); |
|
||||
}; |
|
||||
//已通过充值明细 |
|
||||
const adminPass = function () { |
|
||||
consumeDetail.value.status = 1; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminPass"); |
|
||||
}; |
|
||||
//已驳回充值明细 |
|
||||
const adminReject = function () { |
|
||||
consumeDetail.value.status = 2; |
|
||||
getObj.value.pageNum = 1; |
|
||||
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 getProduct = async function () { |
|
||||
try { |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post("http://192.168.8.93:10010/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) |
|
||||
) { |
|
||||
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 = admin.value.adminId; |
|
||||
passObj.value.auditId = row.auditId; |
|
||||
passObj.value.status = 1; |
|
||||
passObj.value.refundId=row.refundId; |
|
||||
console.log("通过对象", passObj.value); |
|
||||
}; |
|
||||
|
|
||||
// 通过确认 |
|
||||
const passConfirm = async function () { |
|
||||
try { |
|
||||
console.log("通过对象", passObj.value); |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/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 = ""; |
|
||||
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 API.post( |
|
||||
"http://192.168.8.93:10010/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" |
|
||||
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="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" |
|
||||
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="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" 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> |
|
||||
<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="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="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, 10, 20, 50, 100]" :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> |
|
||||
@ -1,477 +0,0 @@ |
|||||
<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"; |
|
||||
import moment from "moment"; |
|
||||
|
|
||||
//这是获取用户信息的接口 |
|
||||
const adminData = ref({}); |
|
||||
const getAdminData = async function () { |
|
||||
try { |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/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.93:10010/consume/add", |
|
||||
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 = "消费"; |
|
||||
addConsume.value.freeCoin = 0; |
|
||||
addConsume.value.rechargeCoin = 0; |
|
||||
addConsume.value.taskCoin = 0; |
|
||||
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 checkEndTime = function (rule, value, callback) { |
|
||||
if (value <= new Date()) { |
|
||||
callback(new Error("付款时间不能小于当前时间")); |
|
||||
} |
|
||||
}; |
|
||||
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" }], |
|
||||
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: [{ validator: checkFreeGoldRadio, trigger: "blur" }], |
|
||||
}); |
|
||||
//这是重置方法 |
|
||||
const delteConsume = function () { |
|
||||
addConsume.value = {}; |
|
||||
addConsume.value.adminId = adminData.value.adminId; |
|
||||
addConsume.value.adminName = adminData.value.adminName; |
|
||||
addConsume.value.updateType = "消费"; |
|
||||
addConsume.value.freeCoin = 0; |
|
||||
addConsume.value.rechargeCoin = 0; |
|
||||
addConsume.value.taskCoin = 0; |
|
||||
}; |
|
||||
// 查找客户信息的方法 |
|
||||
const user = ref({}); |
|
||||
const getUser = async function (jwcode) { |
|
||||
try { |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post("http://192.168.8.93:10010/recharge/user", { |
|
||||
jwcode: jwcode, |
|
||||
}); |
|
||||
|
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
console.log("请求成功", result); |
|
||||
// 存储表格数据 |
|
||||
user.value = result.data[0]; |
|
||||
user.value.A = |
|
||||
Number(user.value.pendingRechargeTimes) + |
|
||||
Number(user.value.pendingSpendTimes); |
|
||||
console.log("用户信息", user.value); |
|
||||
if (result.data.code === 0) { |
|
||||
ElMessage.error("查询失败，请检查精网号是否正确"); |
|
||||
} else { |
|
||||
ElMessage.success("查询成功"); |
|
||||
} |
|
||||
} 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:10010/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 { |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post("http://192.168.8.93:10010/recharge/user", { |
|
||||
jwcode: jwcode, |
|
||||
}); |
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
console.log("请求成功", result); |
|
||||
// 存储表格数据 |
|
||||
userGold.value = result.data[0]; |
|
||||
if (result.data.code === 0) { |
|
||||
ElMessage.error("查询失败，请检查精网号是否正确"); |
|
||||
} |
|
||||
} 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 < |
|
||||
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 : 0; |
|
||||
const todayFree = |
|
||||
typeof (userGold.value.free6 + userGold.value.free12) === "number" |
|
||||
? userGold.value.free6 + userGold.value.free12 |
|
||||
: 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; 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="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="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="历史金币总数"> |
|
||||
<p>{{ user.totalRechargeGold }}</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">{{ |
|
||||
user.buyJb + user.free6 + user.free12 + user.coreJb |
|
||||
}}</span> |
|
||||
<span |
|
||||
style="display: inline; white-space: nowrap; color: #b1b1b1" |
|
||||
v-if="user.buyJb" |
|
||||
>(充值金币:{{ user.buyJb }};免费金币:{{ |
|
||||
user.free6 + user.free12 |
|
||||
}};任务金币:{{ user.coreJb }})</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,455 +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"; |
|
||||
// 变量 |
|
||||
// 充值明细表格 |
|
||||
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:10010/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 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 = ""; |
|
||||
}; |
|
||||
// 今天 |
|
||||
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) |
|
||||
) { |
|
||||
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 API.post("http://192.168.8.93:10010/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" |
|
||||
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> |
|
||||
<el-table |
|
||||
:data="tableData" |
|
||||
:height="tableHeight" |
|
||||
style="width: 100%" |
|
||||
:default-sort="{ prop: 'createTime ', order: 'descending' }" |
|
||||
> |
|
||||
<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 * -1 + |
|
||||
scope.row.freeCoin * -1 + |
|
||||
scope.row.rechargeCoin * -1 |
|
||||
}} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="taskCoin" label="任务金币" width="120px"> |
|
||||
<template #default="scope"> |
|
||||
{{ scope.row.taskCoin * -1 }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="freeCoin" label="免费金币" width="120px"> |
|
||||
<template #default="scope"> |
|
||||
{{ scope.row.freeCoin * -1 }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="rechargeCoin" label="充值金币" width="120px" |
|
||||
><template #default="scope"> |
|
||||
{{ scope.row.rechargeCoin * -1 }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<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, 10, 20, 50, 100]" |
|
||||
: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; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,211 +0,0 @@ |
|||||
<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 router = useRouter(); |
|
||||
const imgrule1 = "../src/assets/动漫美女.png"; |
|
||||
const messageVisible = ref(false); |
|
||||
|
|
||||
//这是获取用户信息的接口 |
|
||||
const adminData = ref({ |
|
||||
name: "", |
|
||||
}); |
|
||||
const getAdminData = async function () { |
|
||||
try { |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/admin/userinfo", |
|
||||
{} |
|
||||
); |
|
||||
adminData.value = result; |
|
||||
console.log("请求成功", result); |
|
||||
console.log("用户信息", adminData.value); |
|
||||
} catch (error) { |
|
||||
console.log("请求失败", error); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
// 查看个人信息弹出框 |
|
||||
const openMessage = function () { |
|
||||
messageVisible.value = true; |
|
||||
} |
|
||||
const closeMessage = function () { |
|
||||
messageVisible.value = false; |
|
||||
}; |
|
||||
const message = function () { |
|
||||
openMessage(); |
|
||||
} |
|
||||
|
|
||||
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> |
|
||||
<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-item index="2"> |
|
||||
<VscGlobe /> |
|
||||
</el-menu-item> |
|
||||
</el-menu> |
|
||||
</el-header> |
|
||||
<el-main> |
|
||||
<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.store }}</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; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,128 +0,0 @@ |
|||||
<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(); // 获取路由实例 |
|
||||
let formData = new FormData(); |
|
||||
// 添加表单数据到FormData对象中 |
|
||||
// formData.append("jwcode", form.value.jwcode); |
|
||||
// formData.append("password", form.value.password); |
|
||||
|
|
||||
const form = ref({ jwcode: "", password: "", token: "" }); |
|
||||
//调用方法 |
|
||||
const login = async function () { |
|
||||
try { |
|
||||
const result = await axios.post( |
|
||||
"http://192.168.8.93:10010/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.jwcode = ""; |
|
||||
ElMessage.error(result.data.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" |
|
||||
/> |
|
||||
<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="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> |
|
||||
<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> |
|
||||
@ -1,532 +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 API from "../../api/index.js"; |
|
||||
|
|
||||
//这是获取用户信息的接口 |
|
||||
const adminData = ref({}); |
|
||||
const getAdminData = async function () { |
|
||||
try { |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/admin/userinfo", |
|
||||
{} |
|
||||
); |
|
||||
adminData.value = result; |
|
||||
addObj.value.adminId = adminData.value.adminId; |
|
||||
console.log("请求成功", result); |
|
||||
console.log("用户信息", adminData.value); |
|
||||
} catch (error) { |
|
||||
console.log("请求失败", error); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
//变量 |
|
||||
//活动表格数据 |
|
||||
const tableData = ref([]); |
|
||||
//分页总条目 |
|
||||
const total = ref(100); |
|
||||
// 搜索对象时间 |
|
||||
const getTime = ref([]); |
|
||||
// 搜索对象活动 |
|
||||
const activity = ref({}); |
|
||||
//搜索对象 |
|
||||
const getObj = ref({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
}); |
|
||||
// 添加对象 |
|
||||
const addObj = ref({ |
|
||||
add: "", |
|
||||
}); |
|
||||
// 删除 |
|
||||
// 删除对象 |
|
||||
const delObj = ref({}); |
|
||||
// //表格高度 |
|
||||
// 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 != "") { |
|
||||
activity.value.startDate = getTime.value[0]; |
|
||||
activity.value.endDate = getTime.value[1]; |
|
||||
} |
|
||||
} else { |
|
||||
activity.value.startDate = ""; |
|
||||
activity.value.endDate = ""; |
|
||||
} |
|
||||
|
|
||||
console.log("搜索参数", getObj.value); |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/recharge/activity/select", |
|
||||
{ ...getObj.value, activity: { ...activity.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 () { |
|
||||
getObj.value = {}; |
|
||||
getObj.value.pageNum = 1; |
|
||||
getObj.value.pageSize = 10; |
|
||||
getTime.value = {}; |
|
||||
activity.value = {}; |
|
||||
}; |
|
||||
//新增活动弹出框 |
|
||||
const addActivityVisible = ref(false); |
|
||||
//打开新增活动弹出框 |
|
||||
const openAddActivityVisible = function () { |
|
||||
addActivityVisible.value = true; |
|
||||
}; |
|
||||
//关闭新增窗口弹出框 |
|
||||
const closeAddActivityVisible = function (done) { |
|
||||
addActivityVisible.value = false; |
|
||||
}; |
|
||||
//添加活动按钮 |
|
||||
const addActicity = function () { |
|
||||
console.log("Date", new Date()); |
|
||||
//添加对象初始化操作 |
|
||||
addObj.value = {}; |
|
||||
addObj.value.adminId = adminData.value.adminId; |
|
||||
addObj.value.adminName = adminData.value.name; |
|
||||
addObj.value.freeGold = "0"; |
|
||||
addObj.value.rechargeRatio = 0; |
|
||||
addObj.value.startTime = null; |
|
||||
addObj.value.endTime = null; |
|
||||
openAddActivityVisible(); |
|
||||
}; |
|
||||
|
|
||||
// 添加确认 |
|
||||
const add = async function () { |
|
||||
Ref.value.validate(async (valid) => { |
|
||||
console.log("valid", valid); |
|
||||
if (valid) { |
|
||||
try { |
|
||||
console.log("添加对象", addObj.value); |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/recharge/activity/add", |
|
||||
addObj.value |
|
||||
); |
|
||||
|
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
console.log("请求成功", result); |
|
||||
// 刷新表格数据 |
|
||||
get(); |
|
||||
// 关闭弹出框 |
|
||||
closeAddActivityVisible(); |
|
||||
//提示 |
|
||||
ElMessage({ |
|
||||
type: "success", |
|
||||
message: "活动添加成功！", |
|
||||
}); |
|
||||
} catch (error) { |
|
||||
console.log("请求失败", error); |
|
||||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
||||
} |
|
||||
} else { |
|
||||
//提示 |
|
||||
ElMessage({ |
|
||||
type: "error", |
|
||||
message: "请检查输入内容", |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
// 删除========================================================= |
|
||||
// 删除按钮 |
|
||||
const del = function (row) { |
|
||||
delObj.value.activityId = row.activityId; |
|
||||
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.93:10010/recharge/activity/edit", |
|
||||
delObj.value |
|
||||
); |
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
console.log("请求成功", result); |
|
||||
// 刷新表格数据 |
|
||||
get(); |
|
||||
} catch (error) { |
|
||||
console.log("请求失败", error); |
|
||||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
// 表单验证 |
|
||||
// 开始时间改变时，重新验证结束时间 |
|
||||
const handleStartTimeChange = () => { |
|
||||
Ref.value.validateField("endTime"); |
|
||||
}; |
|
||||
const checkFreeGoldRadio = function (rule, value, callback) { |
|
||||
if (addObj.value.freeGold == 1) { |
|
||||
if (value == "0" || value == null || value == "") { |
|
||||
callback(new Error("请输入免费金币兑换比")); |
|
||||
} else if (value < 0 || isNaN(value)) { |
|
||||
callback(new Error("请输入正确的格式")); |
|
||||
} else { |
|
||||
callback(); |
|
||||
} |
|
||||
} else { |
|
||||
callback(); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
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 <= addObj.value.startTime) { |
|
||||
callback(new Error("结束时间不能小于开始时间")); |
|
||||
} else { |
|
||||
callback(); |
|
||||
} |
|
||||
}; |
|
||||
const rules = reactive({ |
|
||||
activityName: [ |
|
||||
{ required: true, message: "请输入活动名称", trigger: "blur" }, |
|
||||
], |
|
||||
freeGold: [ |
|
||||
{ required: true, message: "请选择是否赠送免费金币", trigger: "blur" }, |
|
||||
], |
|
||||
rechargeRatio: [{ 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 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(); |
|
||||
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="activity.activityName" |
|
||||
style="width: 240px" |
|
||||
placeholder="请输入活动名称" |
|
||||
clearable |
|
||||
/> |
|
||||
</div> |
|
||||
<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="结束时间" |
|
||||
/> |
|
||||
</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> |
|
||||
<el-button |
|
||||
plain |
|
||||
@click="addActicity()" |
|
||||
style="color: #048efb; border: 1px solid #048efb" |
|
||||
>新增活动</el-button |
|
||||
> |
|
||||
</div> |
|
||||
<div> |
|
||||
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
|
||||
<el-table-column prop="activityName" label="活动名称" /> |
|
||||
<el-table-column prop="startTime" label="开始时间"> |
|
||||
<template #default="scope"> |
|
||||
{{ moment(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss") }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="endTime" label="结束时间"> |
|
||||
<template #default="scope"> |
|
||||
{{ moment(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss") }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="rechargeRatio" label="免费兑换比"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ scope.row.rechargeRatio }}:1</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<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="name" label="添加人" /> |
|
||||
<el-table-column prop="createTime" label="添加时间"> |
|
||||
<template #default="scope"> |
|
||||
{{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="operation" label="操作"> |
|
||||
<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" |
|
||||
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, 10, 20, 50, 100]" |
|
||||
: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="addActivityVisible" |
|
||||
title="新增活动" |
|
||||
width="500" |
|
||||
:before-close="closeAddActivityVisible" |
|
||||
:close-on-click-modal="false" |
|
||||
> |
|
||||
<template #footer> |
|
||||
<el-form |
|
||||
ref="Ref" |
|
||||
:model="addObj" |
|
||||
:rules="rules" |
|
||||
label-width="auto" |
|
||||
style="max-width: 600px" |
|
||||
> |
|
||||
<el-form-item prop="activityName" label="活动名称:"> |
|
||||
<el-input |
|
||||
v-model="addObj.activityName" |
|
||||
placeholder="请输入活动名称" |
|
||||
style="width: 220px" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item prop="freeGold" label="免费金币:"> |
|
||||
<el-radio-group v-model="addObj.freeGold"> |
|
||||
<el-radio value="0" @change="addObj.rechargeRatio = '0'" |
|
||||
>无赠送</el-radio |
|
||||
> |
|
||||
<el-radio value="1">有赠送</el-radio> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item prop="rechargeRatio" label="免费金币兑换比:"> |
|
||||
<el-input |
|
||||
v-model="addObj.rechargeRatio" |
|
||||
:disabled="addObj.freeGold === '0' ? true : false" |
|
||||
placeholder="请输入" |
|
||||
style="width: 80px" |
|
||||
/>：1 |
|
||||
<div style="color: grey">(提示：当前规则每10新币可兑换1免费金币)</div> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item prop="startTime" label="开始时间:"> |
|
||||
<el-date-picker |
|
||||
v-model="addObj.startTime" |
|
||||
type="datetime" |
|
||||
placeholder="请选择开始时间" |
|
||||
@change="handleStartTimeChange" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item prop="endTime" label="结束时间:"> |
|
||||
<el-date-picker |
|
||||
v-model="addObj.endTime" |
|
||||
type="datetime" |
|
||||
placeholder="请选择结束时间" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item label="添加人:"> |
|
||||
<el-input v-model="adminData.name" disabled style="width: 220px" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
|
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="closeAddActivityVisible">取消</el-button> |
|
||||
<el-button type="primary" @click="add()"> 提交 </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,741 +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"; |
|
||||
|
|
||||
// 查询用户接口 |
|
||||
const adminData = ref({ |
|
||||
name: "", |
|
||||
}); |
|
||||
const getAdminData = async function () { |
|
||||
try { |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/admin/userinfo", |
|
||||
{} |
|
||||
); |
|
||||
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 API.post("http://192.168.8.93:10010/rates/search", { |
|
||||
...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; |
|
||||
try { |
|
||||
console.log("搜索参数", getObj.value); |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/rates/add", |
|
||||
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 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/searchById?rateId=" + row.rateId, |
|
||||
{} |
|
||||
); |
|
||||
|
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
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 () { |
|
||||
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", |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
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 API.post( |
|
||||
"http://192.168.8.93:10010/rates/delete/ " + row.rateId, |
|
||||
{} |
|
||||
); |
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
console.log("请求成功", result); |
|
||||
get(); |
|
||||
} catch (error) { |
|
||||
console.log("请求失败", error); |
|
||||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
||||
} |
|
||||
}; |
|
||||
</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 prop="currency" label="货币名称" :span="2" /> |
|
||||
<el-table-column prop="exchangeRate" label="汇率" :span="2"> |
|
||||
<template #default="scope"> |
|
||||
<p>{{ scope.row.exchangeRate }} ：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="updateTime" label="更新时间" :span="3"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ formatDate(scope.row.updateTime) }}</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" |
|
||||
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, 10, 20, 50, 100]" |
|
||||
: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" |
|
||||
: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" style="width: 120px" /> |
|
||||
<p class="unit">:1</p> |
|
||||
<p>(提示：当前规则每 5 元人民币可兑换 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="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" |
|
||||
: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>(提示：当前规则每 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 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> |
|
||||
1144
gold-system/src/views/recharge/addRecharge.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,663 +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 "../../api/index.js"; |
|
||||
//这是获取用户信息的接口 |
|
||||
const adminData = ref({}); |
|
||||
const getAdminData = async function () { |
|
||||
try { |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/admin/userinfo", |
|
||||
{} |
|
||||
); |
|
||||
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: 10, |
|
||||
}); |
|
||||
//分页总条目 |
|
||||
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 search = function () { |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
// 重置 |
|
||||
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 = ""; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
//待审核充值明细 |
|
||||
const adminWait = function () { |
|
||||
rechargeVo.value.status = 0; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminWait"); |
|
||||
}; |
|
||||
//已通过充值明细 |
|
||||
const adminPass = function () { |
|
||||
rechargeVo.value.status = 1; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminPass"); |
|
||||
}; |
|
||||
//已驳回充值明细 |
|
||||
const adminReject = function () { |
|
||||
rechargeVo.value.status = 2; |
|
||||
getObj.value.pageNum = 1; |
|
||||
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) |
|
||||
) { |
|
||||
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(); |
|
||||
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" |
|
||||
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"> |
|
||||
<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> |
|
||||
</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="130px" /> |
|
||||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|
||||
<el-table-column |
|
||||
prop="activityName" |
|
||||
label="活动名称" |
|
||||
width="150px" |
|
||||
/> |
|
||||
<el-table-column |
|
||||
prop="paidGold" |
|
||||
label="充值金额" |
|
||||
width="120px" |
|
||||
sortable |
|
||||
/> |
|
||||
<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 |
|
||||
: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" 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" style="margin-top: 20px"> |
|
||||
<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, 10, 20, 50, 100]" |
|
||||
: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> |
|
||||
@ -1,546 +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 "../../api/index.js"; |
|
||||
// 变量 |
|
||||
// 充值明细表格 |
|
||||
const tableData = ref([]); |
|
||||
// 搜索====================================== |
|
||||
// 搜索rechargeVo |
|
||||
const rechargeVo = 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 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 search = function () { |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
// 重置 |
|
||||
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 = ""; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
//待审核充值明细 |
|
||||
const adminWait = function () { |
|
||||
rechargeVo.value.status = 0; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminWait"); |
|
||||
}; |
|
||||
//已通过充值明细 |
|
||||
const adminPass = function () { |
|
||||
rechargeVo.value.status = 1; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminPass"); |
|
||||
}; |
|
||||
//已驳回充值明细 |
|
||||
const adminReject = function () { |
|
||||
rechargeVo.value.status = 2; |
|
||||
getObj.value.pageNum = 1; |
|
||||
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) |
|
||||
) { |
|
||||
getObj.value.pageNum = parseInt(getObj.value.pageNum); |
|
||||
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" |
|
||||
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"> |
|
||||
<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> |
|
||||
</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="130px" /> |
|
||||
<el-table-column prop="area" label="所属地区" width="100px" /> |
|
||||
<el-table-column |
|
||||
prop="activityName" |
|
||||
label="活动名称" |
|
||||
width="150px" |
|
||||
/> |
|
||||
<el-table-column |
|
||||
prop="paidGold" |
|
||||
label="充值金额" |
|
||||
width="120px" |
|
||||
sortable |
|
||||
/> |
|
||||
<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 |
|
||||
: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" 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" style="margin-top: 20px"> |
|
||||
<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, 10, 20, 50, 100]" |
|
||||
: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> |
|
||||
@ -1,508 +0,0 @@ |
|||||
<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"; |
|
||||
import moment from "moment"; |
|
||||
|
|
||||
//这是获取用户信息的接口 |
|
||||
const adminData = ref({}); |
|
||||
const getAdminData = async function () { |
|
||||
try { |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/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({ |
|
||||
updateType: "退款", |
|
||||
allCoin: 0, |
|
||||
contactId: "", |
|
||||
refundGoods: "", |
|
||||
freeCoin: 0, |
|
||||
rechargeCoin: 0, |
|
||||
taskCoin: 0, |
|
||||
}); |
|
||||
// 取消按钮 |
|
||||
const cancel = function () { |
|
||||
addRefund.value = {}; |
|
||||
addRefund.value.updateType = "退款"; |
|
||||
addRefund.value.rechargeCoin = 0; |
|
||||
addRefund.value.freeCoin = 0; |
|
||||
addRefund.value.taskCoin = 0; |
|
||||
addRefund.value.allCoin = 0; |
|
||||
addRefund.value.adminId = adminData.value.adminId; |
|
||||
}; |
|
||||
// 这是添加退款信息的接口 |
|
||||
const add = async function () { |
|
||||
try { |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/refund/add", |
|
||||
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 = "退款"; |
|
||||
addRefund.value.allCoin = 0; |
|
||||
addRefund.value.contactId = ""; |
|
||||
addRefund.value.refundGoods = ""; |
|
||||
addRefund.value.freeCoin = 0; |
|
||||
addRefund.value.rechargeCoin = 0; |
|
||||
addRefund.value.taskCoin = 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" }], |
|
||||
contactId: [{ 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({}); |
|
||||
const getUser = async function (jwcode) { |
|
||||
try { |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post("http://192.168.8.93:10010/recharge/user", { |
|
||||
jwcode: jwcode, |
|
||||
}); |
|
||||
|
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
console.log("请求成功", result); |
|
||||
// 存储表格数据 |
|
||||
user.value = result.data[0]; |
|
||||
user.value.A = |
|
||||
Number(user.value.pendingRechargeTimes) + |
|
||||
Number(user.value.pendingSpendTimes); |
|
||||
console.log("用户信息", user.value); |
|
||||
if (result.data.code === 0) { |
|
||||
ElMessage.error(result.msg); |
|
||||
} else { |
|
||||
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: "退款商品", |
|
||||
}, |
|
||||
{ |
|
||||
value: "退款金币", |
|
||||
label: "退款金币", |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
// 根据精网号查询商品 |
|
||||
const goods = ref([]); |
|
||||
const getGoods = async function (jwcode) { |
|
||||
try { |
|
||||
// 发送POST请求 |
|
||||
const result = await API.post( |
|
||||
"http://192.168.8.93:10010/consume/getDeatil/" + addRefund.value.jwcode, |
|
||||
{} |
|
||||
); |
|
||||
if (result.code === 0) { |
|
||||
addRefund.value.jwcode = ""; |
|
||||
ElMessage.error(result.msg); |
|
||||
return; |
|
||||
console.log("查询失败，请检查精网号是否正确"); |
|
||||
} |
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
console.log("请求成功", result); |
|
||||
// 存储表格数据 |
|
||||
goods.value = result.data; |
|
||||
console.log("用户信息", goods.value); |
|
||||
} catch (error) { |
|
||||
console.log("请求失败", error); |
|
||||
ElMessage.error("查询失败，请检查精网号是否正确"); |
|
||||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
||||
addRefund.value.jwcode = ""; |
|
||||
} |
|
||||
}; |
|
||||
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.post( |
|
||||
"http://192.168.8.93:10010/refund/searchByOrderCode?orderCode=" + item, |
|
||||
{} |
|
||||
); |
|
||||
addRefund.value.contactId = result.data.detailId; |
|
||||
addRefund.value.refundGoods = result.data.productName; |
|
||||
addRefund.value.orderCode = result.data.orderCode; |
|
||||
addRefund.value.taskCoin = result.data.taskCoin * -1; |
|
||||
addRefund.value.freeCoin = result.data.freeCoin * -1; |
|
||||
addRefund.value.rechargeCoin = result.data.rechargeCoin * -1; |
|
||||
addRefund.value.allCoin = |
|
||||
result.data.taskCoin * -1 + |
|
||||
result.data.freeCoin * -1 + |
|
||||
result.data.rechargeCoin * -1; |
|
||||
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); |
|
||||
}; |
|
||||
</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="contactId" 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> |
|
||||
<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 |
|
||||
/> |
|
||||
<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 |
|
||||
/> |
|
||||
<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 |
|
||||
/> |
|
||||
<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="历史金币总数"> |
|
||||
<p>{{ user.totalRechargeGold }}</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">{{ |
|
||||
user.buyJb + user.free6 + user.free12 + user.coreJb |
|
||||
}}</span> |
|
||||
<span |
|
||||
style="display: inline; white-space: nowrap; color: #b1b1b1" |
|
||||
v-if="user.buyJb" |
|
||||
>(充值金币:{{ user.buyJb }};免费金币:{{ |
|
||||
user.free6 + user.free12 |
|
||||
}};任务金币:{{ user.coreJb }})</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,568 +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 "../../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 allData = ref([]); |
|
||||
// 搜索地区列表 |
|
||||
const area = ref([]); |
|
||||
|
|
||||
//标签页默认高亮选项 |
|
||||
const activeName = ref("all"); |
|
||||
|
|
||||
// 退款类型 |
|
||||
const consumeType = [ |
|
||||
{ |
|
||||
value: "退商品", |
|
||||
label: "退商品", |
|
||||
}, |
|
||||
{ |
|
||||
value: "退金币", |
|
||||
label: "退金币", |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
// //表格高度 |
|
||||
// const tableHeight = computed(function () { |
|
||||
// return (getObj.value.pageSize + 2) * 45 + "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:10010/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 search = function () { |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
// 重置 |
|
||||
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 = ""; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
}; |
|
||||
//待审核充值明细 |
|
||||
const adminWait = function () { |
|
||||
detail.value.auditStatus = 0; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminWait"); |
|
||||
}; |
|
||||
//已通过充值明细 |
|
||||
const adminPass = function () { |
|
||||
detail.value.auditStatus = 1; |
|
||||
getObj.value.pageNum = 1; |
|
||||
get(); |
|
||||
console.log("adminPass"); |
|
||||
}; |
|
||||
//已驳回充值明细 |
|
||||
const adminReject = function () { |
|
||||
detail.value.auditStatus = 2; |
|
||||
getObj.value.pageNum = 1; |
|
||||
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 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(); |
|
||||
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.93:10010/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:10010/product", {}); |
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
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: "请检查输入内容", |
|
||||
}); |
|
||||
} |
|
||||
}; |
|
||||
</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" |
|
||||
: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"> |
|
||||
<el-text class="mx-1" size="large">所属地区：</el-text> |
|
||||
<el-select |
|
||||
v-model="detail.adminArea" |
|
||||
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> |
|
||||
<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="100px" /> |
|
||||
<el-table-column |
|
||||
prop="refundGoods" |
|
||||
label="退款商品" |
|
||||
width="200px" |
|
||||
/> |
|
||||
<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="{ 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" |
|
||||
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, 10, 20, 50, 100]" |
|
||||
: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; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,373 +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"; |
|
||||
|
|
||||
// 充值明细表格 |
|
||||
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: 10, |
|
||||
}); |
|
||||
|
|
||||
// 支付方式选项 |
|
||||
const updateType = [ |
|
||||
{ |
|
||||
value: "充值", |
|
||||
label: "充值", |
|
||||
}, |
|
||||
{ |
|
||||
value: "消费", |
|
||||
label: "消费", |
|
||||
}, |
|
||||
{ |
|
||||
value: "退款", |
|
||||
label: "退款", |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
// //表格高度 |
|
||||
// const tableHeight = computed(function () { |
|
||||
// return (getObj.value.pageSize + 2) * 38 + "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:10010/detail", { |
|
||||
...getObj.value, |
|
||||
detail: { ...detail.value }, |
|
||||
}); |
|
||||
const result2 = await API.post("http://192.168.8.93:10010/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 = 0; |
|
||||
freeCoin.value = 0; |
|
||||
taskCoin.value = 0; |
|
||||
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 () { |
|
||||
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(); |
|
||||
}; |
|
||||
|
|
||||
// 验证跳转输入框的数字是否合法 |
|
||||
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 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" |
|
||||
clearable |
|
||||
> |
|
||||
<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="search()">查询</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="姓名" width="130" /> |
|
||||
<el-table-column prop="jwcode" label="精网号" width="170" /> |
|
||||
<el-table-column prop="area" label="所属地区" width="170" /> |
|
||||
<el-table-column prop="gold" label="更新数量" width="160"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ |
|
||||
scope.row.rechargeCoin + |
|
||||
scope.row.freeCoin + |
|
||||
scope.row.taskCoin |
|
||||
}}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="updateType" label="更新类型" width="150" /> |
|
||||
<el-table-column prop="freeCoin" label="免费金币" width="130" /> |
|
||||
<el-table-column prop="rechargeCoin" label="充值金币" width="150" /> |
|
||||
<el-table-column prop="taskCoin" label="任务金币" width="130" /> |
|
||||
<el-table-column prop="name" label="提交人" width="150" /> |
|
||||
<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> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 分页 --> |
|
||||
<!-- 分页 --> |
|
||||
<div class="pagination" style="margin-top: 20px"> |
|
||||
<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, 10, 20, 50, 100]" |
|
||||
: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> |
|
||||
1555
gold-system/src/views/workspace/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,107 +0,0 @@ |
|||||
<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); |
|
||||
}) |
|
||||
|
|
||||
const imgrule = ref('..\assets\韩信.png'); |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<div> |
|
||||
<el-image :preview-src-list="[imgrule]" preview-teleported="true" src="..\assets\动漫美女.png" alt="美女" style="width: 50px; height: 50px" /> |
|
||||
</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> |
|
||||
@ -1 +0,0 @@ |
|||||
/// <reference types="vite/client" />
|
|
||||
@ -1,26 +0,0 @@ |
|||||
{ |
|
||||
"compilerOptions": { |
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
|
||||
"target": "ES2020", |
|
||||
"useDefineForClassFields": true, |
|
||||
"module": "ESNext", |
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
|
||||
"skipLibCheck": true, |
|
||||
|
|
||||
/* Bundler mode */ |
|
||||
"moduleResolution": "Bundler", |
|
||||
"allowImportingTsExtensions": true, |
|
||||
"isolatedModules": true, |
|
||||
"moduleDetection": "force", |
|
||||
"noEmit": true, |
|
||||
"jsx": "preserve", |
|
||||
|
|
||||
/* Linting */ |
|
||||
"strict": true, |
|
||||
"noUnusedLocals": true, |
|
||||
"noUnusedParameters": true, |
|
||||
"noFallthroughCasesInSwitch": true, |
|
||||
"noUncheckedSideEffectImports": true |
|
||||
}, |
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] |
|
||||
} |
|
||||
@ -1,7 +0,0 @@ |
|||||
{ |
|
||||
"files": [], |
|
||||
"references": [ |
|
||||
{ "path": "./tsconfig.app.json" }, |
|
||||
{ "path": "./tsconfig.node.json" } |
|
||||
] |
|
||||
} |
|
||||
@ -1,24 +0,0 @@ |
|||||
{ |
|
||||
"compilerOptions": { |
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", |
|
||||
"target": "ES2022", |
|
||||
"lib": ["ES2023"], |
|
||||
"module": "ESNext", |
|
||||
"skipLibCheck": true, |
|
||||
|
|
||||
/* Bundler mode */ |
|
||||
"moduleResolution": "Bundler", |
|
||||
"allowImportingTsExtensions": true, |
|
||||
"isolatedModules": true, |
|
||||
"moduleDetection": "force", |
|
||||
"noEmit": true, |
|
||||
|
|
||||
/* Linting */ |
|
||||
"strict": true, |
|
||||
"noUnusedLocals": true, |
|
||||
"noUnusedParameters": true, |
|
||||
"noFallthroughCasesInSwitch": true, |
|
||||
"noUncheckedSideEffectImports": true |
|
||||
}, |
|
||||
"include": ["vite.config.ts"] |
|
||||
} |
|
||||
@ -1,8 +0,0 @@ |
|||||
import { defineConfig } from 'vite' |
|
||||
import vue from '@vitejs/plugin-vue' |
|
||||
|
|
||||
// https://vite.dev/config/
|
|
||||
export default defineConfig({ |
|
||||
plugins: [vue()], |
|
||||
|
|
||||
}) |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue