Browse Source
活动管理模块，客服充值明细，所有充值明细，充值审核，客户金币明细显示数据，退款审核显示数据，工作台大致框架
活动管理模块，客服充值明细，所有充值明细，充值审核，客户金币明细显示数据，退款审核显示数据，工作台大致框架
Please enter the commit message for your changes. Lines startingactivity_recharge_detail_audit_workspace_hxl
hongxilin
6 months ago
commit
941810c2f8
33 changed files with 7935 additions and 0 deletions
-
24vue/gold-system/.gitignore
-
3vue/gold-system/.vscode/extensions.json
-
23vue/gold-system/README.md
-
20vue/gold-system/index.html
-
1704vue/gold-system/package-lock.json
-
27vue/gold-system/package.json
-
1vue/gold-system/public/vite.svg
-
9vue/gold-system/src/App.vue
-
49vue/gold-system/src/assets/css/common.css
-
1vue/gold-system/src/assets/vue.svg
-
BINvue/gold-system/src/assets/金币管理系统logo.png
-
15vue/gold-system/src/main.ts
-
42vue/gold-system/src/router/index.js
-
79vue/gold-system/src/style.css
-
543vue/gold-system/src/views/audit/rechargeAudit.vue
-
529vue/gold-system/src/views/audit/refundAudit.vue
-
331vue/gold-system/src/views/consume/addConsume.vue
-
424vue/gold-system/src/views/consume/allConsume.vue
-
141vue/gold-system/src/views/index.vue
-
423vue/gold-system/src/views/managerecharge/activity.vue
-
552vue/gold-system/src/views/managerecharge/rate.vue
-
411vue/gold-system/src/views/recharge/addRecharge.vue
-
492vue/gold-system/src/views/recharge/adminRecharge.vue
-
399vue/gold-system/src/views/recharge/allRecharge.vue
-
316vue/gold-system/src/views/refund/addRefund.vue
-
469vue/gold-system/src/views/refund/allRefund.vue
-
203vue/gold-system/src/views/usergold/index.vue
-
640vue/gold-system/src/views/workspace/index.vue
-
1vue/gold-system/src/vite-env.d.ts
-
26vue/gold-system/tsconfig.app.json
-
7vue/gold-system/tsconfig.json
-
24vue/gold-system/tsconfig.node.json
-
7vue/gold-system/vite.config.ts
@ -0,0 +1,24 @@ |
|||||
|
# 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? |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"recommendations": ["Vue.volar"] |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
# Vue 3 + TypeScript + Vite |
||||
|
|
||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
||||
|
|
||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
||||
|
|
||||
|
npm install 下载依赖包 |
||||
|
|
||||
|
npm run dev 启动项目 |
||||
|
|
||||
|
npm install vue-router 下载vue-router组件 |
||||
|
|
||||
|
npm install axios 下载axios组件 |
||||
|
|
||||
|
npm install element-plus --save 下载element-plus组件 |
||||
|
|
||||
|
npm install @element-plus/icons-vue 下载element-plus图标库 |
||||
|
|
||||
|
npm install vue-icons-plus --save 下载外部图标库 |
||||
|
|
||||
|
npm install echarts 安装echarts组件 |
||||
|
|
||||
|
npm install moment 安装moment组件 |
||||
@ -0,0 +1,20 @@ |
|||||
|
<!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
vue/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
@ -0,0 +1,27 @@ |
|||||
|
{ |
||||
|
"name": "gold-system", |
||||
|
"private": true, |
||||
|
"version": "0.0.0", |
||||
|
"type": "module", |
||||
|
"scripts": { |
||||
|
"dev": "vite", |
||||
|
"build": "vue-tsc -b && vite build", |
||||
|
"preview": "vite preview" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@element-plus/icons-vue": "^2.3.1", |
||||
|
"axios": "^1.7.8", |
||||
|
"echarts": "^5.5.1", |
||||
|
"element-plus": "^2.8.8", |
||||
|
"moment": "^2.30.1", |
||||
|
"vue": "^3.5.12", |
||||
|
"vue-icons-plus": "^0.1.7", |
||||
|
"vue-router": "^4.5.0" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vitejs/plugin-vue": "^5.1.4", |
||||
|
"typescript": "~5.6.2", |
||||
|
"vite": "^5.4.10", |
||||
|
"vue-tsc": "^2.1.8" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,9 @@ |
|||||
|
<script setup> |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<router-view></router-view> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,49 @@ |
|||||
|
.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; |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
<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> |
||||
|
After Width: 47 | Height: 47 | Size: 2.0 KiB |
@ -0,0 +1,15 @@ |
|||||
|
import { createApp } from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import router from './router' |
||||
|
import ElementPlus from 'element-plus' |
||||
|
import 'element-plus/dist/index.css' |
||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
||||
|
import './assets/css/common.css'; // 引入公共CSS文件
|
||||
|
|
||||
|
const app = createApp(App) |
||||
|
|
||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
||||
|
app.component(key, component) |
||||
|
} |
||||
|
|
||||
|
app.use(ElementPlus).use(router).mount('#app'); |
||||
@ -0,0 +1,42 @@ |
|||||
|
import { createRouter,createWebHashHistory } from 'vue-router'; |
||||
|
|
||||
|
const router=createRouter({ |
||||
|
history:createWebHashHistory(), |
||||
|
routes:[ |
||||
|
{path:'/',redirect:"/index"}, |
||||
|
{ |
||||
|
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")}, |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
] |
||||
|
}); |
||||
|
|
||||
|
export default router; |
||||
@ -0,0 +1,79 @@ |
|||||
|
: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; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,543 @@ |
|||||
|
<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'; |
||||
|
// 变量 |
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]); |
||||
|
// 搜索====================================== |
||||
|
// 搜索rechargeVo |
||||
|
const rechargeVo = ref({}); |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}); |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
|
// 搜索活动列表 |
||||
|
const activity = ref([]); |
||||
|
// 所有信息 |
||||
|
const allData = ref([]); |
||||
|
// 搜索地区列表 |
||||
|
const area = ref([]); |
||||
|
|
||||
|
// 编辑====================================== |
||||
|
// 驳回弹出框 |
||||
|
const rejectVisible = ref(false); |
||||
|
// 驳回对象 |
||||
|
const rejectObj = ref({}); |
||||
|
// 通过对象 |
||||
|
const passObj = ref({}); |
||||
|
|
||||
|
//标签页默认高亮选项 |
||||
|
const activeName = ref('all') |
||||
|
|
||||
|
// 支付方式选项 |
||||
|
const payWay = [ |
||||
|
{ |
||||
|
value: '微信', |
||||
|
label: '微信', |
||||
|
}, |
||||
|
{ |
||||
|
value: '支付宝', |
||||
|
label: '支付宝', |
||||
|
}, |
||||
|
{ |
||||
|
value: '银联', |
||||
|
label: '银联', |
||||
|
}, |
||||
|
{ |
||||
|
value: '信用卡', |
||||
|
label: '信用卡', |
||||
|
}, |
||||
|
{ |
||||
|
value: '借记卡', |
||||
|
label: '借记卡', |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
//表格高度 |
||||
|
const tableHeight = computed(function () { |
||||
|
return (getObj.value.pageSize + 2) * 60 + 'px'; |
||||
|
}); |
||||
|
|
||||
|
// 表单验证ref |
||||
|
const Ref = ref(null); |
||||
|
|
||||
|
// 方法 |
||||
|
// 搜索============================================================== |
||||
|
// 搜索方法 |
||||
|
const get = async function (val) { |
||||
|
try { |
||||
|
// 搜索参数页码赋值 |
||||
|
if (typeof val === 'number') { |
||||
|
getObj.value.pageNum = val; |
||||
|
} |
||||
|
// 搜索参数时间赋值 |
||||
|
if (getTime.value != null) { |
||||
|
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
||||
|
rechargeVo.value.startDate = getTime.value[0]; |
||||
|
rechargeVo.value.endDate = getTime.value[1]; |
||||
|
} |
||||
|
} else { |
||||
|
rechargeVo.value.startDate = ''; |
||||
|
rechargeVo.value.endDate = ''; |
||||
|
} |
||||
|
console.log('搜索参数', getObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/recharge', { ...getObj.value, rechargeVo: { ...rechargeVo.value } }); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log('tableData', tableData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.data.total; |
||||
|
console.log('total', total.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
rechargeVo.value.activityId = ''; |
||||
|
rechargeVo.value.payWay = ''; |
||||
|
rechargeVo.value.area = ''; |
||||
|
rechargeVo.value.startDate = ''; |
||||
|
rechargeVo.value.endDate = ''; |
||||
|
getTime.value = {}; |
||||
|
} |
||||
|
// 今天 |
||||
|
const getToday = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 昨天 |
||||
|
const getYesterday = function () { |
||||
|
const yesterday = new Date(); |
||||
|
yesterday.setDate(yesterday.getDate() - 1); |
||||
|
const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); |
||||
|
const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 近7天 |
||||
|
const get7Days = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
//全部充值明细 |
||||
|
const adminAll = function () { |
||||
|
console.log('adminAll'); |
||||
|
rechargeVo.value.status = ''; |
||||
|
get(); |
||||
|
} |
||||
|
//待审核充值明细 |
||||
|
const adminWait = function () { |
||||
|
rechargeVo.value.status = 0; |
||||
|
get(); |
||||
|
console.log('adminWait'); |
||||
|
} |
||||
|
//已通过充值明细 |
||||
|
const adminPass = function () { |
||||
|
rechargeVo.value.status = 1; |
||||
|
get(); |
||||
|
console.log('adminPass'); |
||||
|
} |
||||
|
//点击标签页 |
||||
|
const handleClick = function (tab, event) { |
||||
|
if (tab.props.name === 'all') { |
||||
|
adminAll(); |
||||
|
} else if (tab.props.name === 'wait') { |
||||
|
adminWait(); |
||||
|
} else if (tab.props.name === 'pass') { |
||||
|
adminPass(); |
||||
|
} |
||||
|
} |
||||
|
// 获取活动名称 |
||||
|
const getActivity = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
activity.value = result.data.data; |
||||
|
console.log('activity', activity.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 获取地区 |
||||
|
const getArea = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/recharge', {}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储全部数据 |
||||
|
allData.value = result.data.data; |
||||
|
console.log('allData', allData.value); |
||||
|
// 分离并去重地区列表 |
||||
|
area.value = [...new Set(allData.value.map(item => item.area))] |
||||
|
console.log('地区', area.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
const checkNumber = function () { |
||||
|
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
||||
|
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)); |
||||
|
if ((getObj.value.pageNum > 0) && (getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize))) { |
||||
|
console.log('输入的数字合法'); |
||||
|
get(); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 编辑==================================== |
||||
|
// 通过按钮 |
||||
|
const pass = function (row) { |
||||
|
// 通过初始化 |
||||
|
passObj.value.auditId = row.rechargeId; |
||||
|
passObj.value.status = 1; |
||||
|
console.log('通过对象', passObj.value); |
||||
|
} |
||||
|
|
||||
|
// 通过确认 |
||||
|
const passConfirm = async function () { |
||||
|
|
||||
|
try { |
||||
|
console.log('通过对象', passObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10030/audit/audit/edit', passObj.value); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 刷新表格数据 |
||||
|
get(); |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'success', |
||||
|
message: '通过成功！', |
||||
|
|
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 打开驳回弹出框 |
||||
|
const openRejectVisible = function () { |
||||
|
rejectVisible.value = true; |
||||
|
} |
||||
|
// 关闭驳回弹出框 |
||||
|
const closeRejectVisible = function () { |
||||
|
rejectVisible.value = false; |
||||
|
} |
||||
|
// 驳回按钮 |
||||
|
const reject = function (row) { |
||||
|
// 驳回初始化 |
||||
|
rejectObj.value.auditId = row.rechargeId; |
||||
|
rejectObj.value.status = 2; |
||||
|
rejectObj.value.reson = ''; |
||||
|
console.log('驳回对象', rejectObj.value); |
||||
|
openRejectVisible(); |
||||
|
} |
||||
|
// 驳回确认 |
||||
|
const rejectConfirm = async function () { |
||||
|
Ref.value.validate(async (valid) => { |
||||
|
if (valid) { |
||||
|
try { |
||||
|
console.log('驳回对象', rejectObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10030/audit/audit/edit', rejectObj.value); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 刷新表格数据 |
||||
|
get(); |
||||
|
// 关闭弹出框 |
||||
|
closeRejectVisible(); |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'success', |
||||
|
message: '驳回成功！', |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 表单验证 |
||||
|
|
||||
|
const rules = reactive({ |
||||
|
reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' },], |
||||
|
}) |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await get(); |
||||
|
getActivity(); |
||||
|
await getArea(); |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<el-row style="margin-bottom: 10px;"> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">活动名称：</el-text> |
||||
|
<el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in activity" :key="item.activityId" :label="item.activityName" |
||||
|
:value="item.activityId" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">支付方式：</el-text> |
||||
|
<el-select v-model="rechargeVo.payWay" placeholder="请选择支付方式" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in payWay" :key="item.value" :label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">所属地区：</el-text> |
||||
|
<el-select v-model="rechargeVo.area" placeholder="请选择所属地区" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in area" :key="item" :label="item" :value="item" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="21"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">充值时间：</el-text> |
||||
|
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" |
||||
|
start-placeholder="起始时间" end-placeholder="结束时间" /> |
||||
|
<el-button style="margin-left: 10px;" @click="getToday()">今</el-button> |
||||
|
<el-button @click="getYesterday()">昨</el-button> |
||||
|
<el-button @click="get7Days()">近7天</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="3"> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="全部" name="all"></el-tab-pane> |
||||
|
<el-tab-pane label="待审核" name="wait"></el-tab-pane> |
||||
|
<el-tab-pane label="已通过" name="pass"></el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<div> |
||||
|
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
||||
|
<el-table-column prop="username" label="姓名" width="100px" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" width="150px" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="100px" /> |
||||
|
<el-table-column prop="activityName" label="活动名称" width="150px" /> |
||||
|
<el-table-column prop="rechargeGold" label="充值金额" width="100px" /> |
||||
|
<el-table-column prop="rechargeWay" label="充值方式" width="100px" /> |
||||
|
<el-table-column prop="paidGold" label="充值金币" width="100px" /> |
||||
|
<el-table-column prop="freeGold" label="免费金币" width="100px" /> |
||||
|
<el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="payWay" label="支付方式" width="100px" /> |
||||
|
<el-table-column prop="rechargeVoucher" label="支付凭证" width="150px"> |
||||
|
<template #default="scope"> |
||||
|
<el-image :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="提交人" width="100px" /> |
||||
|
<el-table-column prop="status" label="状态" width="100px"> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.status === 1"> |
||||
|
<div class="status"> |
||||
|
<span class="green-dot"></span> |
||||
|
<span>已通过</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 0"> |
||||
|
<div class="status"> |
||||
|
<span class="grey-dot"></span> |
||||
|
<span>待审核</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 2"> |
||||
|
<div class="status"> |
||||
|
<span class="red-dot"></span> |
||||
|
<span>已驳回</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="rechargeTime" label="交款时间" width="200px"> |
||||
|
<template #default="scope"> |
||||
|
{{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="提交时间" width="200px" /> |
||||
|
<el-table-column fixed="right" prop="operation" label="操作" width="150px"> |
||||
|
<template #default="scope"> |
||||
|
<div class="operation"> |
||||
|
<el-popconfirm title="确定要通过此条记录吗？" @confirm="passConfirm"> |
||||
|
<template #reference> |
||||
|
<el-button :disabled='((scope.row.status === 1 )||(scope.row.status === 2)) ? true : false' |
||||
|
type="primary" text @click="pass(scope.row)"> |
||||
|
通过 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template #actions="{ confirm, cancel }"> |
||||
|
<el-button size="small" @click="cancel">取消</el-button> |
||||
|
<el-button type="primary" size="small" @click="confirm"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-popconfirm> |
||||
|
<el-button :disabled='((scope.row.status === 1 )||(scope.row.status === 2)) ? true : false' type="primary" text |
||||
|
@click="reject(scope.row)"> |
||||
|
驳回 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
||||
|
<div>共{{ total }}条,每页 </div> |
||||
|
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
||||
|
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" |
||||
|
:value="item"></el-option> |
||||
|
</el-select> |
||||
|
<div> 条</div> |
||||
|
</el-pagination> |
||||
|
<el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" |
||||
|
:total="total" :current-page="getObj.pageNum" @current-change="get"> |
||||
|
<div>跳至</div> |
||||
|
<el-input v-model="getObj.pageNum" style="width: 40px;" @change="checkNumber" /> |
||||
|
<div>页</div> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 驳回弹出框 --> |
||||
|
<el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible"> |
||||
|
<template #footer> |
||||
|
|
||||
|
<el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px"> |
||||
|
|
||||
|
<el-form-item prop="reson" label="驳回理由:"> |
||||
|
<el-input v-model="rejectObj.reson" maxlength="150" show-word-limit style="width: 350px" |
||||
|
type="textarea" placeholder="请输入内容" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
|
||||
|
</el-form> |
||||
|
|
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="closeRejectVisible()">取消</el-button> |
||||
|
<el-button type="primary" @click="rejectConfirm()"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.operation { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,529 @@ |
|||||
|
<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'; |
||||
|
// 变量 |
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]); |
||||
|
// 搜索====================================== |
||||
|
// 搜索consumeDetail |
||||
|
const consumeDetail = ref({}); |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}); |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
|
// 搜索活动列表 |
||||
|
const activity = ref([]); |
||||
|
// 所有信息 |
||||
|
const allData = ref([]); |
||||
|
// 搜索地区列表 |
||||
|
const area = ref([]); |
||||
|
|
||||
|
// 编辑====================================== |
||||
|
// 驳回弹出框 |
||||
|
const rejectVisible = ref(false); |
||||
|
// 驳回对象 |
||||
|
const rejectObj = ref({}); |
||||
|
// 通过对象 |
||||
|
const passObj = ref({}); |
||||
|
|
||||
|
//标签页默认高亮选项 |
||||
|
const activeName = ref('all') |
||||
|
|
||||
|
// 退款类型选项 |
||||
|
const refundType = [ |
||||
|
{ |
||||
|
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 != '') { |
||||
|
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 axios.post('http://192.168.8.93:10030/audit/audit/refund', { ...getObj.value, consumeDetail: { ...consumeDetail.value } }); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log('tableData', tableData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.data.total; |
||||
|
console.log('total', total.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
consumeDetail.value.area = ''; |
||||
|
consumeDetail.value.startDate = ''; |
||||
|
consumeDetail.value.endDate = ''; |
||||
|
getTime.value = {}; |
||||
|
} |
||||
|
// 今天 |
||||
|
const getToday = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 昨天 |
||||
|
const getYesterday = function () { |
||||
|
const yesterday = new Date(); |
||||
|
yesterday.setDate(yesterday.getDate() - 1); |
||||
|
const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); |
||||
|
const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 近7天 |
||||
|
const get7Days = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
//全部充值明细 |
||||
|
const adminAll = function () { |
||||
|
console.log('adminAll'); |
||||
|
consumeDetail.value.status = ''; |
||||
|
get(); |
||||
|
} |
||||
|
//待审核充值明细 |
||||
|
const adminWait = function () { |
||||
|
consumeDetail.value.status = 0; |
||||
|
get(); |
||||
|
console.log('adminWait'); |
||||
|
} |
||||
|
//已通过充值明细 |
||||
|
const adminPass = function () { |
||||
|
consumeDetail.value.status = 1; |
||||
|
get(); |
||||
|
console.log('adminPass'); |
||||
|
} |
||||
|
//点击标签页 |
||||
|
const handleClick = function (tab, event) { |
||||
|
if (tab.props.name === 'all') { |
||||
|
adminAll(); |
||||
|
} else if (tab.props.name === 'wait') { |
||||
|
adminWait(); |
||||
|
} else if (tab.props.name === 'pass') { |
||||
|
adminPass(); |
||||
|
} |
||||
|
} |
||||
|
// 获取活动名称 |
||||
|
const getActivity = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
activity.value = result.data.data; |
||||
|
console.log('activity', activity.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 获取地区 |
||||
|
const getArea = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/recharge', {}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储全部数据 |
||||
|
allData.value = result.data.data; |
||||
|
console.log('allData', allData.value); |
||||
|
// 分离并去重地区列表 |
||||
|
area.value = [...new Set(allData.value.map(item => item.area))] |
||||
|
console.log('地区', area.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
const checkNumber = function () { |
||||
|
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
||||
|
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)); |
||||
|
if ((getObj.value.pageNum > 0) && (getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize))) { |
||||
|
console.log('输入的数字合法'); |
||||
|
get(); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 编辑==================================== |
||||
|
// 通过按钮 |
||||
|
const pass = function (row) { |
||||
|
// 通过初始化 |
||||
|
passObj.value.auditId = row.rechargeId; |
||||
|
passObj.value.status = 1; |
||||
|
console.log('通过对象', passObj.value); |
||||
|
} |
||||
|
|
||||
|
// 通过确认 |
||||
|
const passConfirm = async function () { |
||||
|
|
||||
|
try { |
||||
|
console.log('通过对象', passObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10030/audit/audit/edit', passObj.value); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 刷新表格数据 |
||||
|
get(); |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'success', |
||||
|
message: '通过成功！', |
||||
|
|
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 打开驳回弹出框 |
||||
|
const openRejectVisible = function () { |
||||
|
rejectVisible.value = true; |
||||
|
} |
||||
|
// 关闭驳回弹出框 |
||||
|
const closeRejectVisible = function () { |
||||
|
rejectVisible.value = false; |
||||
|
} |
||||
|
// 驳回按钮 |
||||
|
const reject = function (row) { |
||||
|
// 驳回初始化 |
||||
|
rejectObj.value.auditId = row.rechargeId; |
||||
|
rejectObj.value.status = 2; |
||||
|
rejectObj.value.reson = ''; |
||||
|
console.log('驳回对象', rejectObj.value); |
||||
|
openRejectVisible(); |
||||
|
} |
||||
|
// 驳回确认 |
||||
|
const rejectConfirm = async function () { |
||||
|
Ref.value.validate(async (valid) => { |
||||
|
if (valid) { |
||||
|
try { |
||||
|
console.log('驳回对象', rejectObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10030/audit/audit/edit', rejectObj.value); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 刷新表格数据 |
||||
|
get(); |
||||
|
// 关闭弹出框 |
||||
|
closeRejectVisible(); |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'success', |
||||
|
message: '驳回成功！', |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 表单验证 |
||||
|
|
||||
|
const rules = reactive({ |
||||
|
reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' },], |
||||
|
}) |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await get(); |
||||
|
getActivity(); |
||||
|
await getArea(); |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<el-row style="margin-bottom: 10px;"> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">退款类型：</el-text> |
||||
|
<el-select v-model="consumeDetail.refundType" placeholder="请选择退款类型" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in refundType" :key="item.value" :label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">退款商品：</el-text> |
||||
|
<el-select v-model="consumeDetail.refundGoods" placeholder="请选择退款商品" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in 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="consumeDetail.area" placeholder="请选择所属地区" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in area" :key="item" :label="item" :value="item" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="21"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">充值时间：</el-text> |
||||
|
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" |
||||
|
start-placeholder="起始时间" end-placeholder="结束时间" /> |
||||
|
<el-button style="margin-left: 10px;" @click="getToday()">今</el-button> |
||||
|
<el-button @click="getYesterday()">昨</el-button> |
||||
|
<el-button @click="get7Days()">近7天</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="3"> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="全部" name="all"></el-tab-pane> |
||||
|
<el-tab-pane label="待审核" name="wait"></el-tab-pane> |
||||
|
<el-tab-pane label="已通过" name="pass"></el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<div> |
||||
|
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
||||
|
<el-table-column prop="user" label="姓名" width="100px" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" width="150px" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="100px" /> |
||||
|
<el-table-column prop="refundType" label="退款类型" width="150px" /> |
||||
|
<el-table-column prop="refundGoods" label="退款商品" width="100px" /> |
||||
|
<el-table-column prop="refundCoin" label="退款金币数" width="100px"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.rechargeCoin + scope.row.freeCoin + scope.row.taskCoin }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="rechargeCoin" label="充值金币" width="100px" /> |
||||
|
<el-table-column prop="freeCoin" label="免费金币" width="100px" /> |
||||
|
<el-table-column prop="taskCoin" label="任务金币" width="100px" /> |
||||
|
<el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="name" label="提交人" width="100px" /> |
||||
|
<el-table-column prop="status" label="审核状态" width="100px"> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.status === 1"> |
||||
|
<div class="status"> |
||||
|
<span class="green-dot"></span> |
||||
|
<span>已通过</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 0"> |
||||
|
<div class="status"> |
||||
|
<span class="grey-dot"></span> |
||||
|
<span>待审核</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 2"> |
||||
|
<div class="status"> |
||||
|
<span class="red-dot"></span> |
||||
|
<span>已驳回</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="createTime" label="提交时间" width="200px"> |
||||
|
<template #default="scope"> |
||||
|
{{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="right" prop="operation" label="操作" width="150px"> |
||||
|
<template #default="scope"> |
||||
|
<div class="operation"> |
||||
|
<el-popconfirm title="确定要通过此条记录吗？" @confirm="passConfirm"> |
||||
|
<template #reference> |
||||
|
<el-button |
||||
|
:disabled='((scope.row.status === 1) || (scope.row.status === 2)) ? true : false' |
||||
|
type="primary" text @click="pass(scope.row)"> |
||||
|
通过 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template #actions="{ confirm, cancel }"> |
||||
|
<el-button size="small" @click="cancel">取消</el-button> |
||||
|
<el-button type="primary" size="small" @click="confirm"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-popconfirm> |
||||
|
<el-button |
||||
|
:disabled='((scope.row.status === 1) || (scope.row.status === 2)) ? true : false' |
||||
|
type="primary" text @click="reject(scope.row)"> |
||||
|
驳回 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
||||
|
<div>共{{ total }}条,每页 </div> |
||||
|
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
||||
|
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" |
||||
|
:value="item"></el-option> |
||||
|
</el-select> |
||||
|
<div> 条</div> |
||||
|
</el-pagination> |
||||
|
<el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" |
||||
|
:total="total" :current-page="getObj.pageNum" @current-change="get"> |
||||
|
<div>跳至</div> |
||||
|
<el-input v-model="getObj.pageNum" style="width: 40px;" @change="checkNumber" /> |
||||
|
<div>页</div> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 驳回弹出框 --> |
||||
|
<el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible"> |
||||
|
<template #footer> |
||||
|
|
||||
|
<el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px"> |
||||
|
|
||||
|
<el-form-item prop="reson" label="驳回理由:"> |
||||
|
<el-input v-model="rejectObj.reson" maxlength="150" show-word-limit style="width: 350px" |
||||
|
type="textarea" placeholder="请输入内容" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
|
||||
|
</el-form> |
||||
|
|
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="closeRejectVisible()">取消</el-button> |
||||
|
<el-button type="primary" @click="rejectConfirm()"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.operation { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,331 @@ |
|||||
|
<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' |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// 这是添加充值信息的表单 |
||||
|
const addConsume = ref({ |
||||
|
|
||||
|
}); |
||||
|
// 这是添加充值信息的接口 |
||||
|
const add = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/recharge/add', addConsume.value); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
console.log('用户信息', user.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
const addBefore = () => { |
||||
|
Ref.value.validate(async (valid) => { |
||||
|
if (valid) { |
||||
|
ElMessageBox.confirm('确认添加？').then(() => { |
||||
|
add(); |
||||
|
console.log('添加成功'); |
||||
|
imageUrl.value = ''; |
||||
|
addConsume.value = {}; |
||||
|
}).catch(() => { |
||||
|
console.log('取消添加'); |
||||
|
}) } else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 表单验证 |
||||
|
// 开始时间改变时，重新验证结束时间 |
||||
|
const Ref = ref(null); |
||||
|
const checkEndTime = function (rule, value, callback) { |
||||
|
if (value <= new Date()) { |
||||
|
callback(new Error('付款时间不能小于当前时间')) |
||||
|
} |
||||
|
} |
||||
|
const rules = reactive({ |
||||
|
homilyId: [{ required: true, message: '请输入精网号', trigger: 'blur' },], |
||||
|
refundGoods: [{ required: true, message: '请选择退款商品', trigger: 'blur' },], |
||||
|
taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' },], |
||||
|
freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' },], |
||||
|
rechargeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' },], |
||||
|
allGold: [{ required: true, message: '请输入消费金币总数', trigger: 'blur' },], |
||||
|
|
||||
|
|
||||
|
}) |
||||
|
|
||||
|
// 查找客户信息的方法 |
||||
|
const user = ref({}); |
||||
|
const getUser = async function (homilyId) { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10020/recharge/user', {homilyId: homilyId}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
user.value = result.data.data[0]; |
||||
|
console.log('用户信息', user.value); |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 这是查询活动的接口 |
||||
|
const activity = ref([]); |
||||
|
const getActivity = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
activity.value = result.data.data; |
||||
|
console.log('活动信息', activity.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
getActivity(); |
||||
|
|
||||
|
// 这是查询货币的接口 |
||||
|
const currency = ref([]); |
||||
|
const getCurrency = async function () { |
||||
|
try { |
||||
|
|
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.174:10010/rates/search',{}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('货币请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
currency.value = result.data.data; |
||||
|
console.log('tableData', currency.value); |
||||
|
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等 |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
getCurrency(); |
||||
|
|
||||
|
|
||||
|
// 这是添加上传图片的接口 |
||||
|
const imageUrl = ref('') |
||||
|
|
||||
|
// 上传图片成功的回调函数 |
||||
|
const handleAvatarSuccess = (response, uploadFile) => { |
||||
|
imageUrl.value = URL.createObjectURL(uploadFile.raw); |
||||
|
console.log('图片上传成功', response, uploadFile); |
||||
|
addConsume.value.rechargeVoucher = 'http://192.168.8.93:10010/upload/' + response.data; |
||||
|
console.log('图片名称', addConsume.value.rechargeVoucher); |
||||
|
}; |
||||
|
// 上传图片之前的校验函数 |
||||
|
const beforeAvatarUpload = (rawFile) => { |
||||
|
if (rawFile.type !== 'image/jpeg') { |
||||
|
ElMessage.error('Avatar picture must be JPG format!'); |
||||
|
return false; |
||||
|
} else if (rawFile.size / 1024 / 1024 > 2) { |
||||
|
ElMessage.error('Avatar picture size can not exceed 2MB!'); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
|
||||
|
//充值方式条目 |
||||
|
const options = [ |
||||
|
{ |
||||
|
value: '现金充值', |
||||
|
label: '现金充值', |
||||
|
}, |
||||
|
{ |
||||
|
value: '龙鳞卡', |
||||
|
label: '龙鳞卡', |
||||
|
}, |
||||
|
{ |
||||
|
value: '弘粉卡', |
||||
|
label: '弘粉卡', |
||||
|
}, |
||||
|
|
||||
|
] |
||||
|
|
||||
|
const calculatedFreeGold = computed(() => { |
||||
|
return addConsume.value.paidGold * addConsume.value.activityId; |
||||
|
}); |
||||
|
|
||||
|
watch(calculatedFreeGold, (newVal) => { |
||||
|
addConsume.value.freeGold = newVal; |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div style="margin-bottom: 20px;"> |
||||
|
新增消费 |
||||
|
</div> |
||||
|
|
||||
|
<el-form :model="addConsume" ref="Ref" :rules="rules" label-width="auto" style="max-width: 750px"> |
||||
|
<el-form-item prop="homilyId" label="精网号"> |
||||
|
<el-input v-model="addConsume.homilyId" style="width: 220px;" /> |
||||
|
<el-button type="primary" @click="getUser(addConsume.homilyId)" style="margin-left: 20px;">查询</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="goods" label="商品名称"> |
||||
|
<el-select v-model="addConsume.goods" placeholder="请选择" style="width: 300px"> |
||||
|
<el-option |
||||
|
v-for="item in activity" |
||||
|
:key="item.value" |
||||
|
:label="item.activityName" |
||||
|
:value="item.rechargeRatio" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="allGold" label="消费金币总数"> |
||||
|
<el-input v-model="addConsume.paidGold" style="width: 100px;"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="taskCoin" label="任务金币" style="float: left; "> |
||||
|
<el-input disabled v-model="addConsume.taskCoin" style="width: 100px;margin-left: -5px;"/> |
||||
|
<p style="margin-right: 0px;">个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="freeCoin" label="免费金币" style="float: left;margin-left: -10px;margin-right: -10px;"> |
||||
|
<el-input disabled v-model="addConsume.freeCoin" style="width: 100px;margin-left: -5px;"/> |
||||
|
<p style="margin-right: 0px;">个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="rechargeCoin" label="充值金币" style="margin-left: -20px;"> |
||||
|
<el-input disabled v-model="addConsume.rechargeCoin" style="width: 100px;margin-left: -5px;"/> |
||||
|
<p style="margin-right: 20px;">个</p> |
||||
|
</el-form-item> |
||||
|
<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="张三" disabled placeholder="提交人姓名"/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-button @click="closeAddActivityVisible" style="margin-left: 280px;">取消</el-button> |
||||
|
<el-button type="primary" @click="addBefore"> |
||||
|
提交 |
||||
|
</el-button> |
||||
|
|
||||
|
<!-- 客户信息栏 --> |
||||
|
<el-card style="width: 700px;float: right;margin-top: -330px;margin-right: 100px;"> |
||||
|
<el-form :model="user" label-width="auto" style="max-width: 600px" label-position="left"> |
||||
|
<el-text size="large" style="margin-left: 20px;">客户信息</el-text> |
||||
|
<el-row style="margin-top: 20px;"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="姓名:" > |
||||
|
<p>{{user.name}}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="历史金币总数" > |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="精网号" > |
||||
|
<p>{{user.homilyId}}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="当前金币总数" > |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="首次充值日期"> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="充值次数" > |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="负责客服" > |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="消费次数" > |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="所属门店" > |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="待审核" > |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
p{ |
||||
|
margin: 0px; |
||||
|
} |
||||
|
.el-form-item { |
||||
|
margin-left: 50px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* 上传图片的格式 */ |
||||
|
.avatar-uploader .avatar { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
.avatar-uploader .el-upload { |
||||
|
border: 1px dashed var(--el-border-color); |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
transition: var(--el-transition-duration-fast); |
||||
|
} |
||||
|
|
||||
|
.avatar-uploader .el-upload:hover { |
||||
|
border-color: var(--el-color-primary); |
||||
|
} |
||||
|
|
||||
|
.el-icon.avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
text-align: center; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,424 @@ |
|||||
|
<script setup> |
||||
|
import { ref, onMounted, reactive, computed } from "vue"; |
||||
|
import ElementPlus from "element-plus"; |
||||
|
import { AiFillRead } from "vue-icons-plus/ai"; |
||||
|
import axios from "axios"; |
||||
|
// 变量 |
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]); |
||||
|
// 搜索====================================== |
||||
|
// 搜索detailVo |
||||
|
const detailVo = ref({}); |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}); |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
|
// 搜索活动列表 |
||||
|
const activity = ref([]); |
||||
|
// 所有信息 |
||||
|
const allData = ref([]); |
||||
|
// 搜索地区列表 |
||||
|
const area = ref([]); |
||||
|
|
||||
|
//标签页默认高亮选项 |
||||
|
const activeName = ref("all"); |
||||
|
|
||||
|
// 支付方式选项 |
||||
|
const payWay = [ |
||||
|
{ |
||||
|
value: "微信", |
||||
|
label: "微信", |
||||
|
}, |
||||
|
{ |
||||
|
value: "支付宝", |
||||
|
label: "支付宝", |
||||
|
}, |
||||
|
{ |
||||
|
value: "银联", |
||||
|
label: "银联", |
||||
|
}, |
||||
|
{ |
||||
|
value: "信用卡", |
||||
|
label: "信用卡", |
||||
|
}, |
||||
|
{ |
||||
|
value: "借记卡", |
||||
|
label: "借记卡", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
//表格高度 |
||||
|
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 != "") { |
||||
|
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 axios.post( |
||||
|
"http://192.168.8.147:10030/consume/select", |
||||
|
{ ...getObj.value, detailVo: { ...detailVo.value } } |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log("tableData", tableData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.data.total; |
||||
|
console.log("total", total.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
detailVo.value.activityId = ""; |
||||
|
detailVo.value.payWay = ""; |
||||
|
detailVo.value.area = ""; |
||||
|
detailVo.value.startDate = ""; |
||||
|
detailVo.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"); |
||||
|
detailVo.value.status = ""; |
||||
|
get(); |
||||
|
}; |
||||
|
//待审核充值明细 |
||||
|
const adminWait = function () { |
||||
|
detailVo.value.status = 0; |
||||
|
get(); |
||||
|
console.log("adminWait"); |
||||
|
}; |
||||
|
//已通过充值明细 |
||||
|
const adminPass = function () { |
||||
|
detailVo.value.status = 1; |
||||
|
get(); |
||||
|
console.log("adminPass"); |
||||
|
}; |
||||
|
//已驳回充值明细 |
||||
|
const adminReject = function () { |
||||
|
detailVo.value.status = 2; |
||||
|
get(); |
||||
|
console.log("adminReject"); |
||||
|
}; |
||||
|
//点击标签页 |
||||
|
const handleClick = function (tab, event) { |
||||
|
if (tab.props.name === "all") { |
||||
|
adminAll(); |
||||
|
} else if (tab.props.name === "wait") { |
||||
|
adminWait(); |
||||
|
} else if (tab.props.name === "pass") { |
||||
|
adminPass(); |
||||
|
} else if (tab.props.name === "reject") { |
||||
|
adminReject(); |
||||
|
} |
||||
|
}; |
||||
|
// 获取活动名称 |
||||
|
const getActivity = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.93:10010/recharge/activity/select", |
||||
|
{} |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
activity.value = result.data.data; |
||||
|
console.log("activity", activity.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 获取地区 |
||||
|
const getArea = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.93:10010/recharge/recharge", |
||||
|
{} |
||||
|
); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储全部数据 |
||||
|
allData.value = result.data.data; |
||||
|
console.log("allData", allData.value); |
||||
|
// 分离并去重地区列表 |
||||
|
area.value = [...new Set(allData.value.map((item) => item.area))]; |
||||
|
console.log("地区", area.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await get(); |
||||
|
getActivity(); |
||||
|
await getArea(); |
||||
|
}); |
||||
|
</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.activityId" |
||||
|
placeholder="请选择活动名称" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in activity" |
||||
|
:key="item.activityId" |
||||
|
:label="item.activityName" |
||||
|
:value="item.activityId" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">消费平台：</el-text> |
||||
|
<el-select |
||||
|
v-model="detailVo.payWay" |
||||
|
placeholder="请选择支付方式" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in payWay" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">消费类型：</el-text> |
||||
|
<el-select |
||||
|
v-model="detailVo.area" |
||||
|
placeholder="请选择所属地区" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in area" |
||||
|
:key="item" |
||||
|
:label="item" |
||||
|
:value="item" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="21"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">充值时间：</el-text> |
||||
|
<el-date-picker |
||||
|
v-model="getTime" |
||||
|
type="datetimerange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="起始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
/> |
||||
|
<el-button style="margin-left: 10px" @click="getToday()" |
||||
|
>今</el-button |
||||
|
> |
||||
|
<el-button @click="getYesterday()">昨</el-button> |
||||
|
<el-button @click="get7Days()">近7天</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="3"> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<div> |
||||
|
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
||||
|
<el-table-column prop="username" label="姓名" width="80px" /> |
||||
|
<el-table-column prop="homilyId" label="精网号" width="180px" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="120px" /> |
||||
|
<el-table-column prop="goods" label="商品名称" width="200px" /> |
||||
|
<el-table-column |
||||
|
prop="consumPlatform" |
||||
|
label="消费平台" |
||||
|
width="120px" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="consumeType" |
||||
|
label="消费类型" |
||||
|
width="120px" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="rechargeTotal" |
||||
|
label="消费金币总数" |
||||
|
width="180px" |
||||
|
/> |
||||
|
<el-table-column prop="taskCoin" label="任务金币" width="120px" /> |
||||
|
<el-table-column prop="freeCoin" label="免费金币" width="120px" /> |
||||
|
<el-table-column |
||||
|
prop="rechargeCoin" |
||||
|
label="充值金币" |
||||
|
width="120px" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="remark" |
||||
|
label="备注" |
||||
|
width="200px" |
||||
|
show-overflow-tooltip |
||||
|
/> |
||||
|
<el-table-column prop="conmmitName" label="提交人" width="120px" /> |
||||
|
<el-table-column prop="createTime" label="消费时间" width="180px" /> |
||||
|
<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> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="prev, pager, next" |
||||
|
:total="total" |
||||
|
:page-size="getObj.pageSize" |
||||
|
:current-page="getObj.pageNum" |
||||
|
@current-change="get" |
||||
|
/> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,141 @@ |
|||||
|
<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' |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
|
||||
|
// 用户对象假的 |
||||
|
const admin = ref({ |
||||
|
adminId: 1, |
||||
|
name:'客服A', |
||||
|
area:'新加坡' |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="common-layout"> |
||||
|
<el-container> |
||||
|
<el-aside style="width: 250px;"> |
||||
|
<div class="logo"> |
||||
|
<img src="../assets/金币管理系统logo.png" alt="logo" style="width: 30px;height: 30px;" /> |
||||
|
<div style="font-size: 16px; font-weight: bold;">海外金币管理系统</div> |
||||
|
</div> |
||||
|
<el-menu router="true" background-color="#08193d" active-text-color="#ffd04b" text-color="white" |
||||
|
class="el-menu-vertical-demo" default-active="2" @open="handleOpen" @close="handleClose"> |
||||
|
<el-menu-item index="/workspace"> |
||||
|
<el-icon> |
||||
|
<Folder /> |
||||
|
</el-icon> |
||||
|
工作台 |
||||
|
</el-menu-item> |
||||
|
|
||||
|
<el-sub-menu index="2"> |
||||
|
<template #title> |
||||
|
<el-icon> |
||||
|
<Folder /> |
||||
|
</el-icon> |
||||
|
<span>财务审核</span> |
||||
|
</template> |
||||
|
<el-menu-item index="/rechargeAudit">充值审核</el-menu-item> |
||||
|
<el-menu-item index="/refundAudit">退款审核</el-menu-item> |
||||
|
</el-sub-menu> |
||||
|
|
||||
|
<el-sub-menu index="3"> |
||||
|
<template #title> |
||||
|
<el-icon> |
||||
|
<Folder /> |
||||
|
</el-icon> |
||||
|
<span>充值管理</span> |
||||
|
</template> |
||||
|
<el-menu-item index="/activity">活动管理</el-menu-item> |
||||
|
<el-menu-item index="/rate">汇率管理</el-menu-item> |
||||
|
</el-sub-menu> |
||||
|
|
||||
|
<el-sub-menu index="4"> |
||||
|
<template #title> |
||||
|
<el-icon> |
||||
|
<Folder /> |
||||
|
</el-icon> |
||||
|
<span>金币充值</span> |
||||
|
</template> |
||||
|
<el-menu-item index="/addRecharge">新增充值</el-menu-item> |
||||
|
<el-menu-item index="/adminRecharge">客服充值明细</el-menu-item> |
||||
|
<el-menu-item index="/allRecharge">所有充值明细</el-menu-item> |
||||
|
</el-sub-menu> |
||||
|
|
||||
|
<el-sub-menu index="5"> |
||||
|
<template #title> |
||||
|
<el-icon> |
||||
|
<Folder /> |
||||
|
</el-icon> |
||||
|
<span>金币消费</span> |
||||
|
</template> |
||||
|
<el-menu-item index="/addConsume">新增消费</el-menu-item> |
||||
|
<el-menu-item index="/allConsume">所有消费明细</el-menu-item> |
||||
|
</el-sub-menu> |
||||
|
|
||||
|
<el-sub-menu index="6"> |
||||
|
<template #title> |
||||
|
<el-icon> |
||||
|
<Folder /> |
||||
|
</el-icon> |
||||
|
<span>金币退款</span> |
||||
|
</template> |
||||
|
<el-menu-item index="/addRefund">新增退款</el-menu-item> |
||||
|
<el-menu-item index="/allRefund">退款明细</el-menu-item> |
||||
|
</el-sub-menu> |
||||
|
|
||||
|
<el-menu-item index="/usergold"> |
||||
|
<el-icon> |
||||
|
<Folder /> |
||||
|
</el-icon> |
||||
|
客户金币明细 |
||||
|
</el-menu-item> |
||||
|
|
||||
|
</el-menu> |
||||
|
</el-aside> |
||||
|
<el-container> |
||||
|
<el-header> |
||||
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" |
||||
|
@select="handleSelect"> |
||||
|
<el-sub-menu index="1" class="admin"> |
||||
|
<template #title> |
||||
|
<img style="width: 30px;height: 30px; border-radius: 50%;" src="../assets/金币管理系统logo.png" alt="出错了" /> |
||||
|
<span style="margin-left: 10px;">{{ admin.name }}</span> |
||||
|
</template> |
||||
|
<el-menu-item index="1-1">查看个人信息</el-menu-item> |
||||
|
<el-menu-item index="1-2">退出登录</el-menu-item> |
||||
|
</el-sub-menu> |
||||
|
<el-menu-item index="2"> |
||||
|
<VscGlobe /> |
||||
|
</el-menu-item> |
||||
|
</el-menu> |
||||
|
</el-header> |
||||
|
<el-main> |
||||
|
<router-view></router-view> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.admin { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
.el-aside { |
||||
|
background-color: #08193d; |
||||
|
min-height: 100vh; |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
color: white; |
||||
|
margin: 20px 0px 20px 20px; |
||||
|
display: flex; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,423 @@ |
|||||
|
<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'; |
||||
|
//变量 |
||||
|
// 用户对象假的 |
||||
|
const admin = ref({ |
||||
|
adminId: 1, |
||||
|
name: '赵刚', |
||||
|
area: '中国' |
||||
|
}) |
||||
|
//活动表格数据 |
||||
|
const tableData = ref([]); |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
|
// 搜索对象活动 |
||||
|
const activity = ref({}); |
||||
|
//搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}) |
||||
|
// 添加对象 |
||||
|
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 axios.post('http://192.168.8.93:10010/recharge/activity/select', { ...getObj.value, activity: { ...activity.value } }); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log('tableData', tableData.value); |
||||
|
// 存储分页总条目 |
||||
|
total.value = result.data.data.total; |
||||
|
console.log('total', total.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
getObj.value = {}; |
||||
|
getObj.value.pageNum = 1; |
||||
|
getObj.value.pageSize = 5; |
||||
|
getTime.value = {}; |
||||
|
activity.value = {}; |
||||
|
} |
||||
|
//新增活动弹出框 |
||||
|
const addActivityVisible = ref(false) |
||||
|
//打开新增活动弹出框 |
||||
|
const openAddActivityVisible = function () { |
||||
|
addActivityVisible.value = true |
||||
|
} |
||||
|
//关闭新增窗口弹出框 |
||||
|
const closeAddActivityVisible = function () { |
||||
|
addActivityVisible.value = false |
||||
|
} |
||||
|
//添加活动按钮 |
||||
|
const addActicity = function () { |
||||
|
//添加对象初始化操作 |
||||
|
addObj.value = {}; |
||||
|
addObj.value.adminId = admin.value.adminId; |
||||
|
addObj.value.adminName = admin.value.name; |
||||
|
addObj.value.dept = admin.value.area; |
||||
|
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) => { |
||||
|
if (valid) { |
||||
|
try { |
||||
|
console.log('添加对象', addObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.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 axios.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||typeof value!='number') { |
||||
|
callback(new Error('请输入正确的格式')); |
||||
|
} |
||||
|
} 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))) { |
||||
|
console.log('输入的数字合法'); |
||||
|
get(); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
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="daterange" range-separator="至" start-placeholder="起始时间" |
||||
|
end-placeholder="结束时间" /> |
||||
|
</div> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<div> |
||||
|
<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="开始时间" /> |
||||
|
<el-table-column prop="endTime" label="结束时间" /> |
||||
|
<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"> |
||||
|
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
||||
|
<div>共{{ total }}条,每页 </div> |
||||
|
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
||||
|
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" |
||||
|
:value="item"></el-option> |
||||
|
</el-select> |
||||
|
<div> 条</div> |
||||
|
</el-pagination> |
||||
|
<el-pagination background layout="prev, pager, next, slot" :page-size="getObj.pageSize" |
||||
|
:total="total" :current-page="getObj.pageNum" @current-change="get"> |
||||
|
<div>跳至</div> |
||||
|
<el-input v-model="getObj.pageNum" style="width: 40px;" @change="checkNumber" /> |
||||
|
<div>页</div> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-dialog v-model="addActivityVisible" title="新增活动" width="500" :before-close="closeAddActivityVisible"> |
||||
|
<template #footer> |
||||
|
|
||||
|
<el-form :model="addObj" ref="Ref" :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="date" placeholder="请选择开始时间" |
||||
|
@change="handleStartTimeChange" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item prop="endTime" label="结束时间:"> |
||||
|
<el-date-picker v-model="addObj.endTime" type="date" placeholder="请选择结束时间" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item prop="adminName" 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="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> |
||||
@ -0,0 +1,552 @@ |
|||||
|
<script setup> |
||||
|
import { ref, onMounted, computed, reactive } from "vue"; |
||||
|
import { ElMessageBox } from "element-plus"; |
||||
|
import axios from "axios"; |
||||
|
import { createApp } from "vue"; |
||||
|
|
||||
|
const regeAdd = ref(false); |
||||
|
const regeEdit = ref(false); |
||||
|
|
||||
|
//汇率表格数据 |
||||
|
const tableData = ref([]); |
||||
|
//搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}); |
||||
|
//分页总条目 |
||||
|
const get = async function () { |
||||
|
try { |
||||
|
console.log("搜索参数", getObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post("http://192.168.8.174:10010/rates/search", { |
||||
|
...getObj.value, |
||||
|
rate: { ...value1.value }, |
||||
|
}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log("tableData", tableData.value); |
||||
|
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等 |
||||
|
getObj.value.pageNum = result.data.data.pageNum; |
||||
|
getObj.value.pageSize = result.data.data.pageSize; |
||||
|
getObj.value.total = result.data.data.total; |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 添加方法 |
||||
|
const rateAdd = ref({}); |
||||
|
const addRate = async function () { |
||||
|
try { |
||||
|
console.log("搜索参数", getObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.174:10010/rates/add", |
||||
|
rateAdd.value |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
get(); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const add = () => { |
||||
|
Ref.value.validate(async (valid) => { |
||||
|
if (valid) { |
||||
|
ElMessageBox.confirm("确认添加？") |
||||
|
.then(() => { |
||||
|
addRate(); |
||||
|
rateAdd.value = {}; |
||||
|
value1.value = { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}; |
||||
|
regeAdd.value = false; |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
regeAdd.value = false; |
||||
|
}); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: "error", |
||||
|
message: "请检查输入内容", |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 编辑方法 |
||||
|
const rateEdit = ref({}); |
||||
|
//查询已有的数据 |
||||
|
const getEditData = async function (row) { |
||||
|
try { |
||||
|
console.log("搜索参数", getObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post("http://192.168.8.174:10010/rates/search", { |
||||
|
rate: { rateId: row.rateId }, |
||||
|
}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
rateEdit.value = result.data.data[0]; |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
const editRate = async function () { |
||||
|
try { |
||||
|
console.log("搜索参数", rateEdit.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.174: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 axios.post( |
||||
|
"http://192.168.8.174:10010/rates/delete/ " + row.rateId |
||||
|
); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
get(); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
get(); |
||||
|
}); |
||||
|
//分页 |
||||
|
function handlePageChange(currentPage, pageSize) { |
||||
|
get(); |
||||
|
} |
||||
|
//货币条目 |
||||
|
const options = [ |
||||
|
{ |
||||
|
value: "USD", |
||||
|
label: "USD", |
||||
|
}, |
||||
|
{ |
||||
|
value: "EUR", |
||||
|
label: "EUR", |
||||
|
}, |
||||
|
{ |
||||
|
value: "JPY", |
||||
|
label: "JPY", |
||||
|
}, |
||||
|
{ |
||||
|
value: "GBP", |
||||
|
label: "GBP", |
||||
|
}, |
||||
|
{ |
||||
|
value: "AUD", |
||||
|
label: "AUD", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
//时间选择器 |
||||
|
const value1 = ref({ |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}); // 时间数组 |
||||
|
function handleDateChange(value) { |
||||
|
if (value && value.length === 2) { |
||||
|
value1.value.startTime = value[0]; // 开始日期 |
||||
|
value1.value.endTime = value[1]; // 结束日期 |
||||
|
} |
||||
|
console.log(value1); |
||||
|
} |
||||
|
|
||||
|
function formatDate(value) { |
||||
|
if (!value) return ""; |
||||
|
const date = new Date(value); |
||||
|
const year = date.getFullYear(); |
||||
|
const month = (date.getMonth() + 1).toString().padStart(2, "0"); |
||||
|
const day = date.getDate().toString().padStart(2, "0"); |
||||
|
const hours = date.getHours().toString().padStart(2, "0"); |
||||
|
const minutes = date.getMinutes().toString().padStart(2, "0"); |
||||
|
const seconds = date.getSeconds().toString().padStart(2, "0"); |
||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
||||
|
} |
||||
|
|
||||
|
//表格高度 |
||||
|
const tableHeight = computed(function () { |
||||
|
return (getObj.value.pageSize + 1) * 50 + "px"; |
||||
|
}); |
||||
|
|
||||
|
// 新增数据规则 |
||||
|
// 表单验证ref |
||||
|
const Ref = ref(null); |
||||
|
const handleStartTimeChange = () => { |
||||
|
Ref.value.validateField("endTime"); |
||||
|
}; |
||||
|
const checkStartTime = function (rule, value, callback) { |
||||
|
if (value <= new Date()) { |
||||
|
callback(new Error("开始时间不能小于当前时间")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
const checkEndTime = function (rule, value, callback) { |
||||
|
if (value <= new Date()) { |
||||
|
callback(new Error("结束时间不能小于当前时间")); |
||||
|
} else if (value <= addObj.value.startTime) { |
||||
|
callback(new Error("结束时间不能小于开始时间")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
const rules = reactive({ |
||||
|
currency: [{ required: true, message: "请选择货币名称", trigger: "blur" }], |
||||
|
exchangeRate: [{ required: true, message: "请输入汇率", trigger: "blur" }], |
||||
|
updateName: [{ required: true, message: "请输入添加人", trigger: "blur" }], |
||||
|
startTime: [ |
||||
|
{ required: true, message: "请选择开始时间", trigger: "blur" }, |
||||
|
{ validator: checkStartTime, trigger: "blur" }, |
||||
|
], |
||||
|
endTime: [ |
||||
|
{ required: true, message: "请选择结束时间", trigger: "blur" }, |
||||
|
{ validator: checkEndTime, trigger: "blur" }, |
||||
|
], |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<!-- 这是主页面 --> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<!-- 这是时间 --> |
||||
|
<div class="demo-range"> |
||||
|
时间： |
||||
|
<el-date-picker |
||||
|
v-model="value1" |
||||
|
type="daterange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
@change="handleDateChange" |
||||
|
:size="size" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
/> |
||||
|
<!-- 按钮 --> |
||||
|
<el-button |
||||
|
class="button-item" |
||||
|
type="primary" |
||||
|
style="float: right" |
||||
|
@click="get" |
||||
|
>查询</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
class="button-item" |
||||
|
style="float: right" |
||||
|
@click="handledelete" |
||||
|
>重置</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card class="box-card" style="max-width: 100%"> |
||||
|
<!-- 添加 --> |
||||
|
<div class="add-item"> |
||||
|
<el-button |
||||
|
style="color: #048efb; border: 1px solid #048efb" |
||||
|
@click="regeAdd = true" |
||||
|
>新增汇率</el-button |
||||
|
> |
||||
|
</div> |
||||
|
<!-- 表格 --> |
||||
|
<div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
v-if="(tableData.flag = 1)" |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column prop="currency" label="货币名称" :span="3" /> |
||||
|
<el-table-column prop="exchangeRate" label="汇率" :span="3" /> |
||||
|
|
||||
|
<el-table-column prop="createTime" label="添加时间" :span="5"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ formatDate(scope.row.createTime) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="updateTime" label="更新时间" :span="5"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ formatDate(scope.row.updateTime) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="updateName" label="更新人" :span="4" /> |
||||
|
<el-table-column label="操作" :span="4"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click=" |
||||
|
regeEdit = true; |
||||
|
getEditData(scope.row); |
||||
|
" |
||||
|
>编辑</el-button |
||||
|
> |
||||
|
<el-button type="text" @click="deleteRate(scope.row)" |
||||
|
>删除</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<!-- 分页 --> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="prev, pager, next" |
||||
|
v-model:current-page="getObj.pageNum" |
||||
|
v-model:page-size="getObj.pageSize" |
||||
|
:total="getObj.total" |
||||
|
@change="handlePageChange" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 这是添加弹窗 --> |
||||
|
<el-dialog v-model="regeAdd" title="新增汇率" width="500"> |
||||
|
<template #footer> |
||||
|
<el-form |
||||
|
ref="Ref" |
||||
|
style="max-width: 600px" |
||||
|
:model="rateAdd" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
class="demo-ruleForm" |
||||
|
:size="formSize" |
||||
|
status-icon |
||||
|
> |
||||
|
<el-form-item prop="currency" label="货币名称:"> |
||||
|
<el-select |
||||
|
v-model.number="rateAdd.currency" |
||||
|
placeholder="请选择" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="exchangeRate" label="汇率:"> |
||||
|
<el-input v-model="rateAdd.exchangeRate" style="width: 120px" /> |
||||
|
<p class="unit">:1</p> |
||||
|
<p>(提示：当前规则每 5 元人民币可兑换 1 新币)</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="updateName" label="提交人:"> |
||||
|
<el-input v-model="rateAdd.updateName" style="width: 240px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="startTime" label="开始时间:"> |
||||
|
<el-date-picker |
||||
|
v-model="rateAdd.startTime" |
||||
|
type="date" |
||||
|
placeholder="请选择时间" |
||||
|
:default-value="new Date()" |
||||
|
@change="handleStartTimeChange" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="endTime" label="结束时间:"> |
||||
|
<el-date-picker |
||||
|
v-model="rateAdd.endTime" |
||||
|
type="date" |
||||
|
placeholder="请选择时间" |
||||
|
:default-value="new Date()" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button type="primary" @click="add">添加</el-button> |
||||
|
<el-button @click="regeAdd = false">取消</el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 这是编辑弹窗 --> |
||||
|
<el-dialog v-model="regeEdit" title="修改汇率" width="500"> |
||||
|
<template #footer> |
||||
|
<el-form |
||||
|
ref="ruleFormRef" |
||||
|
style="max-width: 600px" |
||||
|
:model="rateEdit" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
class="demo-ruleForm" |
||||
|
:size="formSize" |
||||
|
status-icon |
||||
|
> |
||||
|
<el-form-item label="货币名称:"> |
||||
|
<el-select |
||||
|
v-model="rateEdit.currency" |
||||
|
placeholder="请选择" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="汇率:"> |
||||
|
<el-input v-model="rateEdit.exchangeRate" style="width: 120px" /> |
||||
|
<p class="unit">:1</p> |
||||
|
<p>(提示：当前规则每 5 元人民币可兑换 1 新币)</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="提交人:"> |
||||
|
<el-input v-model="rateEdit.updateName" style="width: 240px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button type="primary" @click="edit">修改</el-button> |
||||
|
<el-button @click="regeEdit = false">取消</el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 这是编辑弹窗 --> |
||||
|
<el-dialog v-model="regeEdit" title="修改汇率" width="500"> |
||||
|
<template #footer> |
||||
|
<el-form |
||||
|
ref="ruleFormRef" |
||||
|
style="max-width: 600px" |
||||
|
:model="rateEdit" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
class="demo-ruleForm" |
||||
|
:size="formSize" |
||||
|
status-icon |
||||
|
> |
||||
|
<el-form-item label="货币名称:"> |
||||
|
<el-select |
||||
|
v-model="rateEdit.currency" |
||||
|
placeholder="请选择" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="汇率:"> |
||||
|
<el-input v-model="rateEdit.exchangeRate" style="width: 120px" /> |
||||
|
<p class="unit">:1</p> |
||||
|
<p>(提示：当前规则每 5 元人民币可兑换 1 新币)</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="提交人:"> |
||||
|
<el-input v-model="rateEdit.adminName" style="width: 240px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button type="primary" @click="edit">修改</el-button> |
||||
|
<el-button @click="regeEdit = false">取消</el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
p { |
||||
|
margin: 0px; |
||||
|
} |
||||
|
|
||||
|
.el-form-item { |
||||
|
margin-left: 70px; |
||||
|
} |
||||
|
|
||||
|
.ad { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin-top: 20px; |
||||
|
margin-left: 33%; |
||||
|
} |
||||
|
|
||||
|
.box-card { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.button-item { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.add-item { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
el-table-column { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
color: rgb(150, 150, 150); |
||||
|
} |
||||
|
|
||||
|
.unit { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.el-card { |
||||
|
padding: 0px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,411 @@ |
|||||
|
<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"; |
||||
|
|
||||
|
// 这是添加充值信息的表单 |
||||
|
const addRecharge = ref({ |
||||
|
rechargeVoucher: "", |
||||
|
rechargeWay: "客服充值", |
||||
|
}); |
||||
|
// 这是添加充值信息的接口 |
||||
|
const add = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.93:10010/recharge/recharge/add", |
||||
|
addRecharge.value |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
console.log("用户信息", user.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
const addBefore = () => { |
||||
|
Ref.value.validate(async (valid) => { |
||||
|
if (valid) { |
||||
|
ElMessageBox.confirm("确认添加？") |
||||
|
.then(() => { |
||||
|
add(); |
||||
|
console.log("添加成功"); |
||||
|
imageUrl.value = ""; |
||||
|
addRecharge.value = {}; |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
console.log("取消添加"); |
||||
|
}); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: "error", |
||||
|
message: "请检查输入内容", |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 表单验证 |
||||
|
// 开始时间改变时，重新验证结束时间 |
||||
|
const Ref = ref(null); |
||||
|
const checkEndTime = function (rule, value, callback) { |
||||
|
if (value <= new Date()) { |
||||
|
callback(new Error("付款时间不能小于当前时间")); |
||||
|
} |
||||
|
}; |
||||
|
const rules = reactive({ |
||||
|
homilyId: [{ required: true, message: "请输入精网号", trigger: "blur" }], |
||||
|
activityId: [{ required: true, message: "请选择活动名称", trigger: "blur" }], |
||||
|
paidGold: [{ required: true, message: "请输入充值金币", trigger: "blur" }], |
||||
|
rechargeGold: [ |
||||
|
{ required: true, message: "请输入充值金额", trigger: "blur" }, |
||||
|
], |
||||
|
payWay: [{ required: true, message: "请选择付款方式", trigger: "blur" }], |
||||
|
rechargeTime: [ |
||||
|
{ required: true, message: "请选择交款时间", trigger: "blur" }, |
||||
|
{ validator: checkEndTime, trigger: "blur" }, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
// 查找客户信息的方法 |
||||
|
const user = ref({}); |
||||
|
const getUser = async function (homilyId) { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post("http://192.168.8.93:10020/recharge/user", { |
||||
|
homilyId: homilyId, |
||||
|
}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
user.value = result.data.data[0]; |
||||
|
console.log("用户信息", user.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 这是查询活动的接口 |
||||
|
const activity = ref([]); |
||||
|
const getActivity = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.93:10010/recharge/activity/select", |
||||
|
{} |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
activity.value = result.data.data; |
||||
|
console.log("活动信息", activity.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
getActivity(); |
||||
|
|
||||
|
// 这是查询货币的接口 |
||||
|
const currency = ref([]); |
||||
|
const getCurrency = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.174:10010/rates/search", |
||||
|
{} |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("货币请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
currency.value = result.data.data; |
||||
|
console.log("tableData", currency.value); |
||||
|
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等 |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
getCurrency(); |
||||
|
|
||||
|
// 这是添加上传图片的接口 |
||||
|
const imageUrl = ref(""); |
||||
|
|
||||
|
// 上传图片成功的回调函数 |
||||
|
const handleAvatarSuccess = (response, uploadFile) => { |
||||
|
imageUrl.value = URL.createObjectURL(uploadFile.raw); |
||||
|
console.log("图片上传成功", response, uploadFile); |
||||
|
addRecharge.value.rechargeVoucher = |
||||
|
"http://192.168.8.93:10010/upload/" + response.data; |
||||
|
console.log("图片名称", addRecharge.value.rechargeVoucher); |
||||
|
}; |
||||
|
// 上传图片之前的校验函数 |
||||
|
const beforeAvatarUpload = (rawFile) => { |
||||
|
if (rawFile.type !== "image/jpeg") { |
||||
|
ElMessage.error("Avatar picture must be JPG format!"); |
||||
|
return false; |
||||
|
} else if (rawFile.size / 1024 / 1024 > 2) { |
||||
|
ElMessage.error("Avatar picture size can not exceed 2MB!"); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
|
||||
|
//充值方式条目 |
||||
|
const options = [ |
||||
|
{ |
||||
|
value: "现金充值", |
||||
|
label: "现金充值", |
||||
|
}, |
||||
|
{ |
||||
|
value: "龙鳞卡", |
||||
|
label: "龙鳞卡", |
||||
|
}, |
||||
|
{ |
||||
|
value: "弘粉卡", |
||||
|
label: "弘粉卡", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const calculatedFreeGold = computed(() => { |
||||
|
return addRecharge.value.paidGold * addRecharge.value.activityId; |
||||
|
}); |
||||
|
const calculatedRechargeGold = computed(() => { |
||||
|
addRecharge.value.paidGold * addRecharge.value.reteId; |
||||
|
}); |
||||
|
watch(calculatedFreeGold, calculatedRechargeGold, (newVal) => { |
||||
|
addRecharge.value.freeGold = newVal; |
||||
|
addRecharge.value.rechargeGold = newVal; |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div>新增充值</div> |
||||
|
|
||||
|
<el-form |
||||
|
:model="addRecharge" |
||||
|
ref="Ref" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
style="max-width: 600px" |
||||
|
> |
||||
|
<el-form-item prop="homilyId" label="精网号"> |
||||
|
<el-input v-model="addRecharge.homilyId" style="width: 220px" /> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click="getUser(addRecharge.homilyId)" |
||||
|
style="margin-left: 20px" |
||||
|
>查询</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="activityId" label="活动名称"> |
||||
|
<el-select |
||||
|
v-model="addRecharge.activityId" |
||||
|
placeholder="请选择" |
||||
|
style="width: 300px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in activity" |
||||
|
:key="item.value" |
||||
|
:label="item.activityName" |
||||
|
:value="item.rechargeRatio" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="paidGold" label="充值金币"> |
||||
|
<el-input v-model="addRecharge.paidGold" style="width: 100px" /> |
||||
|
<p style="margin-right: 20px">个</p> |
||||
|
<p>免费金币</p> |
||||
|
<el-input |
||||
|
v-model="addRecharge.freeGold" |
||||
|
disabled |
||||
|
:value="addRecharge.paidGold * addRecharge.activityId" |
||||
|
style="width: 100px" |
||||
|
/> |
||||
|
<p>个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="充值金额"> |
||||
|
<el-select |
||||
|
prop="rechargeGold" |
||||
|
v-model="addRecharge.rateId" |
||||
|
placeholder="货币名称" |
||||
|
style="width: 95px; margin-right: 5px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in currency" |
||||
|
:key="item.value" |
||||
|
:label="item.currency" |
||||
|
:value="item.exchangeRate" |
||||
|
/> |
||||
|
</el-select> |
||||
|
<el-input |
||||
|
disabled |
||||
|
:value="addRecharge.paidGold * addRecharge.rateId" |
||||
|
style="width: 200px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="payWay" label="收款方式"> |
||||
|
<el-select |
||||
|
v-model="addRecharge.payWay" |
||||
|
placeholder="请选择" |
||||
|
style="width: 300px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="rechargeTime" label="交款时间"> |
||||
|
<el-date-picker |
||||
|
v-model="addRecharge.rechargeTime" |
||||
|
type="date" |
||||
|
style="width: 300px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="rechargeVoucher" |
||||
|
label="交款凭证" |
||||
|
style="margin-bottom: 5px" |
||||
|
> |
||||
|
<el-upload |
||||
|
class="avatar-uploader" |
||||
|
action="http://192.168.8.93:10010/upload" |
||||
|
:show-file-list="false" |
||||
|
:on-success="handleAvatarSuccess" |
||||
|
:before-upload="beforeAvatarUpload" |
||||
|
> |
||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> |
||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
||||
|
</el-upload> |
||||
|
<p style="margin-left: 10px; color: rgb(177, 176, 176)"> |
||||
|
仅支持.jpg .png格式，文件≤1MB |
||||
|
</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="remark" label="备注"> |
||||
|
<el-input |
||||
|
v-model="addRecharge.remark" |
||||
|
style="width: 300px" |
||||
|
:rows="2" |
||||
|
maxlength="100" |
||||
|
show-word-limit |
||||
|
type="textarea" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="submitter" label="提交人"> |
||||
|
<el-input |
||||
|
style="width: 300px" |
||||
|
value="张三" |
||||
|
disabled |
||||
|
placeholder="提交人姓名" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-button @click="closeAddActivityVisible" style="margin-left: 280px" |
||||
|
>取消</el-button |
||||
|
> |
||||
|
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
||||
|
|
||||
|
<!-- 客户信息栏 --> |
||||
|
<el-card |
||||
|
style="width: 700px; float: right; margin-top: -470px; margin-right: 100px" |
||||
|
> |
||||
|
<el-form |
||||
|
:model="user" |
||||
|
label-width="auto" |
||||
|
style="max-width: 600px" |
||||
|
label-position="left" |
||||
|
> |
||||
|
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
||||
|
<el-row style="margin-top: 20px"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="姓名:"> |
||||
|
<p>{{ user.name }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="历史金币总数"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="精网号"> |
||||
|
<p>{{ user.homilyId }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="当前金币总数"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="首次充值日期"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="充值次数"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="负责客服"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="消费次数"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="所属门店"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="待审核"> </el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
p { |
||||
|
margin: 0px; |
||||
|
} |
||||
|
.el-form-item { |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
|
||||
|
/* 上传图片的格式 */ |
||||
|
.avatar-uploader .avatar { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
.avatar-uploader .el-upload { |
||||
|
border: 1px dashed var(--el-border-color); |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
transition: var(--el-transition-duration-fast); |
||||
|
} |
||||
|
|
||||
|
.avatar-uploader .el-upload:hover { |
||||
|
border-color: var(--el-color-primary); |
||||
|
} |
||||
|
|
||||
|
.el-icon.avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,492 @@ |
|||||
|
<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'; |
||||
|
// 变量 |
||||
|
// 用户对象假的 |
||||
|
const admin = ref({ |
||||
|
adminId: 1, |
||||
|
name: '赵刚', |
||||
|
area: '中国' |
||||
|
}) |
||||
|
|
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]); |
||||
|
// 搜索=========================================== |
||||
|
// 搜索recharge |
||||
|
const rechargeVo = ref({ |
||||
|
adminId: admin.value.adminId, |
||||
|
}); |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}); |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
|
// 搜索活动列表 |
||||
|
const activity = ref([]); |
||||
|
// 所有信息 |
||||
|
const allData = ref([]); |
||||
|
// 搜索地区列表 |
||||
|
const area = ref([]); |
||||
|
//标签页默认高亮选项 |
||||
|
const activeName = ref('all') |
||||
|
// 支付方式选项 |
||||
|
const payWay = [ |
||||
|
{ |
||||
|
value: '微信', |
||||
|
label: '微信', |
||||
|
}, |
||||
|
{ |
||||
|
value: '支付宝', |
||||
|
label: '支付宝', |
||||
|
}, |
||||
|
{ |
||||
|
value: '银联', |
||||
|
label: '银联', |
||||
|
}, |
||||
|
{ |
||||
|
value: '信用卡', |
||||
|
label: '信用卡', |
||||
|
}, |
||||
|
{ |
||||
|
value: '借记卡', |
||||
|
label: '借记卡', |
||||
|
}, |
||||
|
] |
||||
|
// 删除========================================================== |
||||
|
// 删除对象 |
||||
|
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 axios.post('http://192.168.8.93:10010/recharge/recharge', { ...getObj.value, rechargeVo: { ...rechargeVo.value } }); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log('tableData', tableData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.data.total; |
||||
|
console.log('total', total.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
rechargeVo.value.activityId = ''; |
||||
|
rechargeVo.value.payWay = ''; |
||||
|
rechargeVo.value.area = ''; |
||||
|
rechargeVo.value.startDate = ''; |
||||
|
rechargeVo.value.endDate = ''; |
||||
|
getTime.value = {}; |
||||
|
} |
||||
|
// 今天 |
||||
|
const getToday = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 昨天 |
||||
|
const getYesterday = function () { |
||||
|
const yesterday = new Date(); |
||||
|
yesterday.setDate(yesterday.getDate() - 1); |
||||
|
const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); |
||||
|
const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 近7天 |
||||
|
const get7Days = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
//全部充值明细 |
||||
|
const adminAll = function () { |
||||
|
console.log('adminAll'); |
||||
|
rechargeVo.value.status = ''; |
||||
|
get(); |
||||
|
} |
||||
|
//待审核充值明细 |
||||
|
const adminWait = function () { |
||||
|
rechargeVo.value.status = 0; |
||||
|
get(); |
||||
|
console.log('adminWait'); |
||||
|
} |
||||
|
//已通过充值明细 |
||||
|
const adminPass = function () { |
||||
|
rechargeVo.value.status = 1; |
||||
|
get(); |
||||
|
console.log('adminPass'); |
||||
|
} |
||||
|
//已驳回充值明细 |
||||
|
const adminReject = function () { |
||||
|
rechargeVo.value.status = 2; |
||||
|
get(); |
||||
|
console.log('adminReject'); |
||||
|
} |
||||
|
//点击标签页 |
||||
|
const handleClick = function (tab, event) { |
||||
|
if (tab.props.name === 'all') { |
||||
|
adminAll(); |
||||
|
} else if (tab.props.name === 'wait') { |
||||
|
adminWait(); |
||||
|
} else if (tab.props.name === 'pass') { |
||||
|
adminPass(); |
||||
|
} else if (tab.props.name === 'reject') { |
||||
|
adminReject(); |
||||
|
} |
||||
|
} |
||||
|
// 获取活动名称 |
||||
|
const getActivity = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
activity.value = result.data.data; |
||||
|
console.log('activity', activity.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 获取地区 |
||||
|
const getArea = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/recharge', {}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储全部数据 |
||||
|
allData.value = result.data.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 axios.post('http://192.168.8.93:10010/recharge/recharge/edit', delObj.value); |
||||
|
console.log('删除成功', result); |
||||
|
// 刷新表格数据 |
||||
|
get(); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
const checkNumber = function () { |
||||
|
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
||||
|
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)); |
||||
|
if ((getObj.value.pageNum > 0) && (getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize))) { |
||||
|
console.log('输入的数字合法'); |
||||
|
get(); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await get(); |
||||
|
getActivity(); |
||||
|
await getArea(); |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<el-row style="margin-bottom: 10px;"> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">活动名称：</el-text> |
||||
|
<el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in activity" :key="item.activityId" :label="item.activityName" |
||||
|
:value="item.activityId" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">支付方式：</el-text> |
||||
|
<el-select v-model="rechargeVo.payWay" placeholder="请选择支付方式" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in payWay" :key="item.value" :label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">所属地区：</el-text> |
||||
|
<el-select v-model="rechargeVo.area" placeholder="请选择所属地区" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in area" :key="item" :label="item" :value="item" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="21"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">充值时间：</el-text> |
||||
|
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" |
||||
|
start-placeholder="起始时间" end-placeholder="结束时间" /> |
||||
|
<el-button style="margin-left: 10px;" @click="getToday()">今</el-button> |
||||
|
<el-button @click="getYesterday()">昨</el-button> |
||||
|
<el-button @click="get7Days()">近7天</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="3"> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="全部" name="all"></el-tab-pane> |
||||
|
<el-tab-pane label="待审核" name="wait"></el-tab-pane> |
||||
|
<el-tab-pane label="已通过" name="pass"></el-tab-pane> |
||||
|
<el-tab-pane label="已驳回" name="reject"></el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<div> |
||||
|
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
||||
|
<el-table-column prop="username" label="姓名" width="100px" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" width="150px" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="100px" /> |
||||
|
<el-table-column prop="activityName" label="活动名称" width="150px" /> |
||||
|
<el-table-column prop="rechargeGold" label="充值金额" width="100px" /> |
||||
|
<el-table-column prop="paidGold" label="充值金币" width="100px" /> |
||||
|
<el-table-column prop="freeGold" label="免费金币" width="100px" /> |
||||
|
<el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="payWay" label="支付方式" width="100px" /> |
||||
|
<el-table-column prop="rechargeVoucher" label="支付凭证" width="150px"> |
||||
|
<template #default="scope"> |
||||
|
<el-image :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="提交人" width="100px" /> |
||||
|
<el-table-column prop="status" label="状态" width="100px"> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.status === 1"> |
||||
|
<div class="status"> |
||||
|
<span class="green-dot"></span> |
||||
|
<span>已通过</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 0"> |
||||
|
<div class="status"> |
||||
|
<span class="grey-dot"></span> |
||||
|
<span>待审核</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 2"> |
||||
|
<div class="status"> |
||||
|
<span class="red-dot"></span> |
||||
|
<span>已驳回</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="rechargeTime" label="交款时间" width="200px"> |
||||
|
<template #default="scope"> |
||||
|
{{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="提交时间" width="200px" /> |
||||
|
<el-table-column fixed="right" prop="operation" label="操作" width="150px"> |
||||
|
<template #default="scope"> |
||||
|
<el-popconfirm title="确定将此条活动修改(删除)吗？" @confirm="delConfirm"> |
||||
|
<template #reference> |
||||
|
<el-button type="primary" text @click="del(scope.row)"> |
||||
|
修改 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template #actions="{ confirm, cancel }"> |
||||
|
<el-button size="small" @click="cancel">取消</el-button> |
||||
|
<el-button type="primary" size="small" @click="confirm"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-popconfirm> |
||||
|
</template> |
||||
|
|
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
||||
|
<div>共{{ total }}条,每页 </div> |
||||
|
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
||||
|
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" |
||||
|
:value="item"></el-option> |
||||
|
</el-select> |
||||
|
<div> 条</div> |
||||
|
</el-pagination> |
||||
|
<el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" |
||||
|
:total="total" :current-page="getObj.pageNum" @current-change="get"> |
||||
|
<div>跳至</div> |
||||
|
<el-input v-model="getObj.pageNum" style="width: 40px;" @change="checkNumber" /> |
||||
|
<div>页</div> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 编辑弹窗 --> |
||||
|
<el-dialog v-model="editRechargeVisible" title="新增活动" width="500" :before-close="closeEditRechargeVisible"> |
||||
|
<template #footer> |
||||
|
|
||||
|
<el-form :model="editObj" label-width="auto" style="max-width: 600px"> |
||||
|
|
||||
|
<el-form-item label="活动名称:"> |
||||
|
<el-input v-model="addObj.activityName" placeholder="请输入活动名称" style="width: 220px;" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="免费金币:"> |
||||
|
<el-radio-group v-model="addObj.freeGold"> |
||||
|
<el-radio value="0">无赠送</el-radio> |
||||
|
<el-radio value="1">有赠送</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="免费金币兑换比:"> |
||||
|
<el-input v-model="addObj.rechargeRatio" placeholder="请输入" style="width: 80px;" />：1 |
||||
|
<div style="color: grey;">(提示：当前规则每10新币可兑换1免费金币)</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="开始时间:"> |
||||
|
<el-time-picker v-model="addObj.startTime" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="结束时间:"> |
||||
|
<el-time-picker v-model="addObj.endTime" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="添加人:"> |
||||
|
<el-input v-model="addObj.adminName" disabled style="width: 220px;" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</el-form> |
||||
|
|
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="closeAddActivityVisible">取消</el-button> |
||||
|
<el-button type="primary" @click="closeAddActivityVisible"> |
||||
|
提交 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,399 @@ |
|||||
|
<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'; |
||||
|
// 变量 |
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]); |
||||
|
// 搜索====================================== |
||||
|
// 搜索rechargeVo |
||||
|
const rechargeVo = ref({}); |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}); |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
|
// 搜索活动列表 |
||||
|
const activity = ref([]); |
||||
|
// 所有信息 |
||||
|
const allData = ref([]); |
||||
|
// 搜索地区列表 |
||||
|
const area = ref([]); |
||||
|
|
||||
|
//标签页默认高亮选项 |
||||
|
const activeName = ref('all') |
||||
|
|
||||
|
// 支付方式选项 |
||||
|
const payWay = [ |
||||
|
{ |
||||
|
value: '微信', |
||||
|
label: '微信', |
||||
|
}, |
||||
|
{ |
||||
|
value: '支付宝', |
||||
|
label: '支付宝', |
||||
|
}, |
||||
|
{ |
||||
|
value: '银联', |
||||
|
label: '银联', |
||||
|
}, |
||||
|
{ |
||||
|
value: '信用卡', |
||||
|
label: '信用卡', |
||||
|
}, |
||||
|
{ |
||||
|
value: '借记卡', |
||||
|
label: '借记卡', |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
//表格高度 |
||||
|
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 axios.post('http://192.168.8.93:10010/recharge/recharge', { ...getObj.value, rechargeVo: { ...rechargeVo.value } }); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log('tableData', tableData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.data.total; |
||||
|
console.log('total', total.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
rechargeVo.value.activityId = ''; |
||||
|
rechargeVo.value.payWay = ''; |
||||
|
rechargeVo.value.area = ''; |
||||
|
rechargeVo.value.startDate = ''; |
||||
|
rechargeVo.value.endDate = ''; |
||||
|
getTime.value={}; |
||||
|
} |
||||
|
// 今天 |
||||
|
const getToday = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 昨天 |
||||
|
const getYesterday = function () { |
||||
|
const yesterday = new Date(); |
||||
|
yesterday.setDate(yesterday.getDate() - 1); |
||||
|
const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); |
||||
|
const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 近7天 |
||||
|
const get7Days = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
//全部充值明细 |
||||
|
const adminAll = function () { |
||||
|
console.log('adminAll'); |
||||
|
rechargeVo.value.status = ''; |
||||
|
get(); |
||||
|
} |
||||
|
//待审核充值明细 |
||||
|
const adminWait = function () { |
||||
|
rechargeVo.value.status = 0; |
||||
|
get(); |
||||
|
console.log('adminWait'); |
||||
|
} |
||||
|
//已通过充值明细 |
||||
|
const adminPass = function () { |
||||
|
rechargeVo.value.status = 1; |
||||
|
get(); |
||||
|
console.log('adminPass'); |
||||
|
} |
||||
|
//已驳回充值明细 |
||||
|
const adminReject = function () { |
||||
|
rechargeVo.value.status = 2; |
||||
|
get(); |
||||
|
console.log('adminReject'); |
||||
|
} |
||||
|
//点击标签页 |
||||
|
const handleClick = function (tab, event) { |
||||
|
if (tab.props.name === 'all') { |
||||
|
adminAll(); |
||||
|
} else if (tab.props.name === 'wait') { |
||||
|
adminWait(); |
||||
|
} else if (tab.props.name === 'pass') { |
||||
|
adminPass(); |
||||
|
} else if (tab.props.name === 'reject') { |
||||
|
adminReject(); |
||||
|
} |
||||
|
} |
||||
|
// 获取活动名称 |
||||
|
const getActivity = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
activity.value = result.data.data; |
||||
|
console.log('activity', activity.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
// 获取地区 |
||||
|
const getArea = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post('http://192.168.8.93:10010/recharge/recharge', {}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储全部数据 |
||||
|
allData.value = result.data.data; |
||||
|
console.log('allData', allData.value); |
||||
|
// 分离并去重地区列表 |
||||
|
area.value = [...new Set(allData.value.map(item => item.area))] |
||||
|
console.log('地区', area.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 验证跳转输入框的数字是否合法 |
||||
|
const checkNumber = function () { |
||||
|
if (typeof parseInt(getObj.value.pageNum) === 'number') { |
||||
|
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize)); |
||||
|
if ((getObj.value.pageNum > 0) && (getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize))) { |
||||
|
console.log('输入的数字合法'); |
||||
|
get(); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: '请检查输入内容', |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await get(); |
||||
|
getActivity(); |
||||
|
await getArea(); |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<el-row style="margin-bottom: 10px;"> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">活动名称：</el-text> |
||||
|
<el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in activity" :key="item.activityId" :label="item.activityName" |
||||
|
:value="item.activityId" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">支付方式：</el-text> |
||||
|
<el-select v-model="rechargeVo.payWay" placeholder="请选择支付方式" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in payWay" :key="item.value" :label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">所属地区：</el-text> |
||||
|
<el-select v-model="rechargeVo.area" placeholder="请选择所属地区" size="large" |
||||
|
style="width: 240px"> |
||||
|
<el-option v-for="item in area" :key="item" :label="item" :value="item" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="21"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">充值时间：</el-text> |
||||
|
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" |
||||
|
start-placeholder="起始时间" end-placeholder="结束时间" /> |
||||
|
<el-button style="margin-left: 10px;" @click="getToday()">今</el-button> |
||||
|
<el-button @click="getYesterday()">昨</el-button> |
||||
|
<el-button @click="get7Days()">近7天</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="3"> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="全部" name="all"></el-tab-pane> |
||||
|
<el-tab-pane label="待审核" name="wait"></el-tab-pane> |
||||
|
<el-tab-pane label="已通过" name="pass"></el-tab-pane> |
||||
|
<el-tab-pane label="已驳回" name="reject"></el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<div> |
||||
|
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
||||
|
<el-table-column prop="username" label="姓名" width="100px" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" width="150px" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="100px" /> |
||||
|
<el-table-column prop="activityName" label="活动名称" width="150px" /> |
||||
|
<el-table-column prop="rechargeGold" label="充值金额" width="100px" /> |
||||
|
<el-table-column prop="rechargeWay" label="充值方式" width="100px" /> |
||||
|
<el-table-column prop="paidGold" label="充值金币" width="100px" /> |
||||
|
<el-table-column prop="freeGold" label="免费金币" width="100px" /> |
||||
|
<el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="payWay" label="支付方式" width="100px" /> |
||||
|
<el-table-column prop="rechargeVoucher" label="支付凭证" width="150px"> |
||||
|
<template #default="scope"> |
||||
|
<el-image :src="scope.row.rechargeVoucher" alt="凭证" style="width: 50px; height: 50px" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="提交人" width="100px" /> |
||||
|
<el-table-column prop="status" label="状态" width="100px"> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.status === 1"> |
||||
|
<div class="status"> |
||||
|
<span class="green-dot"></span> |
||||
|
<span>已通过</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 0"> |
||||
|
<div class="status"> |
||||
|
<span class="grey-dot"></span> |
||||
|
<span>待审核</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 2"> |
||||
|
<div class="status"> |
||||
|
<span class="red-dot"></span> |
||||
|
<span>已驳回</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="rechargeTime" label="交款时间" width="200px"> |
||||
|
<template #default="scope"> |
||||
|
{{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="提交时间" width="200px" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
||||
|
<div>共{{ total }}条,每页 </div> |
||||
|
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
||||
|
<el-option v-for="item in [5, 6, 7, 8, 9, 10]" :key="item" :label="item" |
||||
|
:value="item"></el-option> |
||||
|
</el-select> |
||||
|
<div> 条</div> |
||||
|
</el-pagination> |
||||
|
<el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" |
||||
|
:total="total" :current-page="getObj.pageNum" @current-change="get"> |
||||
|
<div>跳至</div> |
||||
|
<el-input v-model="getObj.pageNum" style="width: 40px;" @change="checkNumber" /> |
||||
|
<div>页</div> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,316 @@ |
|||||
|
<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"; |
||||
|
|
||||
|
// 这是添加充值信息的表单 |
||||
|
const addRefund = ref({}); |
||||
|
// 这是添加充值信息的接口 |
||||
|
const add = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.93:10010/recharge/recharge/add", |
||||
|
addRefund.value |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
console.log("用户信息", user.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
const addBefore = () => { |
||||
|
Ref.value.validate(async (valid) => { |
||||
|
if (valid) { |
||||
|
ElMessageBox.confirm("确认添加？") |
||||
|
.then(() => { |
||||
|
add(); |
||||
|
console.log("添加成功"); |
||||
|
imageUrl.value = ""; |
||||
|
addRefund.value = {}; |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
console.log("取消添加"); |
||||
|
}); |
||||
|
} else { |
||||
|
//提示 |
||||
|
ElMessage({ |
||||
|
type: "error", |
||||
|
message: "请检查输入内容", |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 表单验证 |
||||
|
// 开始时间改变时，重新验证结束时间 |
||||
|
const Ref = ref(null); |
||||
|
const checkEndTime = function (rule, value, callback) { |
||||
|
if (value <= new Date()) { |
||||
|
callback(new Error("付款时间不能小于当前时间")); |
||||
|
} |
||||
|
}; |
||||
|
const rules = reactive({ |
||||
|
homilyId: [{ required: true, message: "请输入精网号", trigger: "blur" }], |
||||
|
refundType: [{ required: true, message: "请选择退款类型", trigger: "blur" }], |
||||
|
refundGoods: [{ required: true, message: "请选择退款商品", trigger: "blur" }], |
||||
|
taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }], |
||||
|
freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }], |
||||
|
rechargeCoin: [ |
||||
|
{ required: true, message: "请输入充值金币", trigger: "blur" }, |
||||
|
], |
||||
|
allCoin: [{ required: true, message: "请选择付款方式", trigger: "blur" }], |
||||
|
}); |
||||
|
|
||||
|
// 查找客户信息的方法 |
||||
|
const user = ref({}); |
||||
|
const getUser = async function (homilyId) { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post("http://192.168.8.93:10020/recharge/user", { |
||||
|
homilyId: homilyId, |
||||
|
}); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
user.value = result.data.data[0]; |
||||
|
console.log("用户信息", user.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 这是查询货币的接口 |
||||
|
const currency = ref([]); |
||||
|
const getCurrency = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.174:10010/rates/search", |
||||
|
{} |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("货币请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
currency.value = result.data.data; |
||||
|
console.log("tableData", currency.value); |
||||
|
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等 |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
getCurrency(); |
||||
|
|
||||
|
const calculatedFreeGold = computed(() => { |
||||
|
return addRefund.value.paidGold * addRefund.value.activityId; |
||||
|
}); |
||||
|
|
||||
|
watch(calculatedFreeGold, (newVal) => { |
||||
|
addRefund.value.freeGold = newVal; |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div>新增退款</div> |
||||
|
|
||||
|
<el-form |
||||
|
:model="addRefund" |
||||
|
ref="Ref" |
||||
|
:rules="rules" |
||||
|
label-width="auto" |
||||
|
style="max-width: 750px" |
||||
|
> |
||||
|
<el-form-item prop="homilyId" label="精网号"> |
||||
|
<el-input v-model="addRefund.homilyId" style="width: 220px" /> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click="getUser(addRefund.homilyId)" |
||||
|
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 activity" |
||||
|
:key="item.value" |
||||
|
:label="item.activityName" |
||||
|
:value="item.rechargeRatio" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="refundGoods" label="退款商品"> |
||||
|
<el-select |
||||
|
v-model="addRefund.refundGoods" |
||||
|
placeholder="请选择" |
||||
|
style="width: 300px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in activity" |
||||
|
:key="item.value" |
||||
|
:label="item.activityName" |
||||
|
:value="item.rechargeRatio" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="taskCoin" label="任务金币" style="float: left"> |
||||
|
<el-input |
||||
|
v-model="addRefund.taskCoin" |
||||
|
style="width: 100px; margin-left: -5px" |
||||
|
/> |
||||
|
<p style="margin-right: 0px">个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="freeCoin" |
||||
|
label="免费金币" |
||||
|
style="float: left; margin-left: -10px; margin-right: -10px" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="addRefund.freeCoin" |
||||
|
style="width: 100px; margin-left: -5px" |
||||
|
/> |
||||
|
<p style="margin-right: 0px">个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="rechargeCoin" |
||||
|
label="充值金币" |
||||
|
style="margin-left: -20px" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="addRefund.rechargeCoin" |
||||
|
style="width: 100px; margin-left: -5px" |
||||
|
/> |
||||
|
<p style="margin-right: 20px">个</p> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="allCoin" label="退款金币总数"> |
||||
|
<el-input disabled v-model="addRefund.allCoin" style="width: 100px" /> |
||||
|
</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="张三" |
||||
|
disabled |
||||
|
placeholder="提交人姓名" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-button @click="closeAddActivityVisible" style="margin-left: 280px" |
||||
|
>取消</el-button |
||||
|
> |
||||
|
<el-button type="primary" @click="addBefore"> 提交 </el-button> |
||||
|
|
||||
|
<!-- 客户信息栏 --> |
||||
|
<el-card |
||||
|
style="width: 700px; float: right; margin-top: -370px; margin-right: 100px" |
||||
|
> |
||||
|
<el-form |
||||
|
:model="user" |
||||
|
label-width="auto" |
||||
|
style="max-width: 600px" |
||||
|
label-position="left" |
||||
|
> |
||||
|
<el-text size="large" style="margin-left: 20px">客户信息</el-text> |
||||
|
<el-row style="margin-top: 20px"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="姓名:"> |
||||
|
<p>{{ user.name }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="历史金币总数"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="精网号"> |
||||
|
<p>{{ user.homilyId }}</p> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="当前金币总数"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="首次充值日期"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="充值次数"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="负责客服"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="消费次数"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="所属门店"> </el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="待审核"> </el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
p { |
||||
|
margin: 0px; |
||||
|
} |
||||
|
.el-form-item { |
||||
|
margin-left: 50px; |
||||
|
} |
||||
|
|
||||
|
/* 上传图片的格式 */ |
||||
|
.avatar-uploader .avatar { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
.avatar-uploader .el-upload { |
||||
|
border: 1px dashed var(--el-border-color); |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
transition: var(--el-transition-duration-fast); |
||||
|
} |
||||
|
|
||||
|
.avatar-uploader .el-upload:hover { |
||||
|
border-color: var(--el-color-primary); |
||||
|
} |
||||
|
|
||||
|
.el-icon.avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,469 @@ |
|||||
|
<script setup> |
||||
|
import { ref, onMounted, reactive, computed } from "vue"; |
||||
|
import ElementPlus from "element-plus"; |
||||
|
import { AiFillRead } from "vue-icons-plus/ai"; |
||||
|
import axios from "axios"; |
||||
|
// 变量 |
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]); |
||||
|
// 搜索====================================== |
||||
|
// 搜索rechargeVo |
||||
|
const rechargeVo = ref({}); |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}); |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
|
// 搜索活动列表 |
||||
|
const activity = ref([]); |
||||
|
// 所有信息 |
||||
|
const allData = ref([]); |
||||
|
// 搜索地区列表 |
||||
|
const area = ref([]); |
||||
|
|
||||
|
//标签页默认高亮选项 |
||||
|
const activeName = ref("all"); |
||||
|
|
||||
|
// 支付方式选项 |
||||
|
const payWay = [ |
||||
|
{ |
||||
|
value: "微信", |
||||
|
label: "微信", |
||||
|
}, |
||||
|
{ |
||||
|
value: "支付宝", |
||||
|
label: "支付宝", |
||||
|
}, |
||||
|
{ |
||||
|
value: "银联", |
||||
|
label: "银联", |
||||
|
}, |
||||
|
{ |
||||
|
value: "信用卡", |
||||
|
label: "信用卡", |
||||
|
}, |
||||
|
{ |
||||
|
value: "借记卡", |
||||
|
label: "借记卡", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
//表格高度 |
||||
|
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 axios.post( |
||||
|
"http://192.168.8.93:10030/audit/audit/refund", |
||||
|
{ ...getObj.value, rechargeVo: { ...rechargeVo.value } } |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log("tableData", tableData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.data.total; |
||||
|
console.log("total", total.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
rechargeVo.value.activityId = ""; |
||||
|
rechargeVo.value.payWay = ""; |
||||
|
rechargeVo.value.area = ""; |
||||
|
rechargeVo.value.startDate = ""; |
||||
|
rechargeVo.value.endDate = ""; |
||||
|
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"); |
||||
|
rechargeVo.value.status = ""; |
||||
|
get(); |
||||
|
}; |
||||
|
//待审核充值明细 |
||||
|
const adminWait = function () { |
||||
|
rechargeVo.value.status = 0; |
||||
|
get(); |
||||
|
console.log("adminWait"); |
||||
|
}; |
||||
|
//已通过充值明细 |
||||
|
const adminPass = function () { |
||||
|
rechargeVo.value.status = 1; |
||||
|
get(); |
||||
|
console.log("adminPass"); |
||||
|
}; |
||||
|
//已驳回充值明细 |
||||
|
const adminReject = function () { |
||||
|
rechargeVo.value.status = 2; |
||||
|
get(); |
||||
|
console.log("adminReject"); |
||||
|
}; |
||||
|
//点击标签页 |
||||
|
const handleClick = function (tab, event) { |
||||
|
if (tab.props.name === "all") { |
||||
|
adminAll(); |
||||
|
} else if (tab.props.name === "wait") { |
||||
|
adminWait(); |
||||
|
} else if (tab.props.name === "pass") { |
||||
|
adminPass(); |
||||
|
} else if (tab.props.name === "reject") { |
||||
|
adminReject(); |
||||
|
} |
||||
|
}; |
||||
|
// 获取活动名称 |
||||
|
const getActivity = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.93:10010/recharge/activity/select", |
||||
|
{} |
||||
|
); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储表格数据 |
||||
|
activity.value = result.data.data; |
||||
|
console.log("activity", activity.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 获取地区 |
||||
|
const getArea = async function () { |
||||
|
try { |
||||
|
// 发送POST请求 |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.93:10010/recharge/recharge", |
||||
|
{} |
||||
|
); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
// 存储全部数据 |
||||
|
allData.value = result.data.data; |
||||
|
console.log("allData", allData.value); |
||||
|
// 分离并去重地区列表 |
||||
|
area.value = [...new Set(allData.value.map((item) => item.area))]; |
||||
|
console.log("地区", area.value); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await get(); |
||||
|
getActivity(); |
||||
|
await getArea(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<el-row style="margin-bottom: 10px"> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">活动名称：</el-text> |
||||
|
<el-select |
||||
|
v-model="rechargeVo.activityId" |
||||
|
placeholder="请选择活动名称" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in activity" |
||||
|
:key="item.activityId" |
||||
|
:label="item.activityName" |
||||
|
:value="item.activityId" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">支付方式：</el-text> |
||||
|
<el-select |
||||
|
v-model="rechargeVo.payWay" |
||||
|
placeholder="请选择支付方式" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in payWay" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">所属地区：</el-text> |
||||
|
<el-select |
||||
|
v-model="rechargeVo.area" |
||||
|
placeholder="请选择所属地区" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in area" |
||||
|
:key="item" |
||||
|
:label="item" |
||||
|
:value="item" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="21"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">充值时间：</el-text> |
||||
|
<el-date-picker |
||||
|
v-model="getTime" |
||||
|
type="datetimerange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="起始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
/> |
||||
|
<el-button style="margin-left: 10px" @click="getToday()" |
||||
|
>今</el-button |
||||
|
> |
||||
|
<el-button @click="getYesterday()">昨</el-button> |
||||
|
<el-button @click="get7Days()">近7天</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="3"> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<el-tabs |
||||
|
v-model="activeName" |
||||
|
type="card" |
||||
|
class="demo-tabs" |
||||
|
@tab-click="handleClick" |
||||
|
> |
||||
|
<el-tab-pane label="全部" name="all"></el-tab-pane> |
||||
|
<el-tab-pane label="待审核" name="wait"></el-tab-pane> |
||||
|
<el-tab-pane label="已通过" name="pass"></el-tab-pane> |
||||
|
<el-tab-pane label="已驳回" name="reject"></el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<div> |
||||
|
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
||||
|
<el-table-column prop="name" label="姓名" width="80px" /> |
||||
|
<el-table-column prop="homilyId" label="精网号" width="180px" /> |
||||
|
<el-table-column prop="area" label="所属地区" width="120px" /> |
||||
|
<el-table-column prop="refundType" label="退款类型" width="180px" /> |
||||
|
<el-table-column |
||||
|
prop="refundGoods" |
||||
|
label="退款商品" |
||||
|
width="120px" |
||||
|
/> |
||||
|
<el-table-column label="退款金币数" width="120px"> |
||||
|
<template #default="scope"> |
||||
|
{{ |
||||
|
scope.row.rechargeCoin + |
||||
|
scope.row.freeCoin + |
||||
|
scope.row.taskCoin |
||||
|
}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="rechargeCoin" |
||||
|
label="充值金币" |
||||
|
width="100px" |
||||
|
/> |
||||
|
<el-table-column prop="freeCoin" label="免费金币" width="100px" /> |
||||
|
<el-table-column prop="taskCoin" label="任务金币" width="100px" /> |
||||
|
<!-- 修改prop为taskGold --> |
||||
|
<el-table-column |
||||
|
prop="remark" |
||||
|
label="备注" |
||||
|
width="200px" |
||||
|
show-overflow-tooltip |
||||
|
/> |
||||
|
<el-table-column prop="adminName" label="提交人" width="100px" /> |
||||
|
<el-table-column prop="status" label="审核状态" width="120px"> |
||||
|
<!-- 模板内容 --> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row.status === 1"> |
||||
|
<div class="status"> |
||||
|
<span class="green-dot"></span> |
||||
|
<span>已通过</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 0"> |
||||
|
<div class="status"> |
||||
|
<span class="grey-dot"></span> |
||||
|
<span>待审核</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
<span v-if="scope.row.status === 2"> |
||||
|
<div class="status"> |
||||
|
<span class="red-dot"></span> |
||||
|
<span>已驳回</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="reson" |
||||
|
label="驳回理由" |
||||
|
width="200px" |
||||
|
show-overflow-tooltip |
||||
|
/> |
||||
|
<el-table-column prop="createTime" label="提交时间" width="180px" /> |
||||
|
<el-table-column |
||||
|
prop="operation" |
||||
|
label="操作" |
||||
|
fixed="right" |
||||
|
width="120px" |
||||
|
> |
||||
|
<template #default="scope"> |
||||
|
<el-popconfirm |
||||
|
title="确定将此条活动删除吗？" |
||||
|
@confirm="delConfirm" |
||||
|
> |
||||
|
<template #reference> |
||||
|
<el-button type="primary" text @click="del(scope.row)"> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template #actions="{ confirm, cancel }"> |
||||
|
<el-button size="small" @click="cancel">取消</el-button> |
||||
|
<el-button type="primary" size="small" @click="confirm"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-popconfirm> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="prev, pager, next" |
||||
|
:total="total" |
||||
|
:page-size="getObj.pageSize" |
||||
|
:current-page="getObj.pageNum" |
||||
|
@current-change="get" |
||||
|
/> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,203 @@ |
|||||
|
<script setup> |
||||
|
import { ref, onMounted, reactive, computed } from "vue"; |
||||
|
import ElementPlus from "element-plus"; |
||||
|
import axios from 'axios'; |
||||
|
|
||||
|
// 充值明细表格 |
||||
|
const tableData = ref([]); |
||||
|
// 搜索=========================================== |
||||
|
// 搜索detail |
||||
|
const detail = ref({}); |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
|
}); |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
|
// 支付方式选项 |
||||
|
const updateType = [ |
||||
|
{ |
||||
|
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 != '') { |
||||
|
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 axios.post('http://192.168.8.93:10040/detail', { ...getObj.value, detail: { ...detail.value } }); |
||||
|
|
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log('请求成功', result); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.data.list; |
||||
|
console.log('tableData', tableData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.data.total; |
||||
|
console.log('total', total.value); |
||||
|
} catch (error) { |
||||
|
console.log('请求失败', error); |
||||
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 重置 |
||||
|
const reset = function () { |
||||
|
detail.value.jwcode = ''; |
||||
|
detail.value.updateType = ''; |
||||
|
detail.value.startDate = ''; |
||||
|
detail.value.endDate = ''; |
||||
|
getTime.value = {}; |
||||
|
} |
||||
|
// 今天 |
||||
|
const getToday = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 昨天 |
||||
|
const getYesterday = function () { |
||||
|
const yesterday = new Date(); |
||||
|
yesterday.setDate(yesterday.getDate() - 1); |
||||
|
const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); |
||||
|
const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
// 近7天 |
||||
|
const get7Days = function () { |
||||
|
const today = new Date(); |
||||
|
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6); |
||||
|
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log('getTime', getTime.value); |
||||
|
get(); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// 挂载 |
||||
|
onMounted(async function () { |
||||
|
await get(); |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<div class="head-card"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">精网号：</el-text> |
||||
|
<el-input v-model="detail.jwcode" style="width: 240px" placeholder="请输入精网号" clearable /> |
||||
|
</div> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">更新类型：</el-text> |
||||
|
<el-select v-model="detail.updateType" placeholder="请选择更新类型" size="large" style="width: 240px"> |
||||
|
<el-option v-for="item in updateType" :key="item.value" :label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">更新时间：</el-text> |
||||
|
<el-time-picker v-model="getTime" is-range range-separator="至" start-placeholder="起始时间" |
||||
|
end-placeholder="结束时间" /> |
||||
|
</div> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<div> |
||||
|
现有金币：免费金币：（），充值金币：（），任务金币：（） |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-table :data="tableData" style="width: 100%"> |
||||
|
<el-table-column prop="name" label="姓名" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" /> |
||||
|
<el-table-column prop="area" label="所属地区" /> |
||||
|
<el-table-column prop="gold" label="更新数量"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.row.rechargeCoin + scope.row.freeCoin + scope.row.taskCoin }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="updateType" label="更新类型" /> |
||||
|
<el-table-column prop="freeCoin" label="免费金币" /> |
||||
|
<el-table-column prop="rechargeCoin" label="充值金币" /> |
||||
|
<el-table-column prop="taskCoin" label="任务金币" /> |
||||
|
<el-table-column prop="name" label="提交人" /> |
||||
|
<el-table-column prop="createTime" label="更新时间" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<el-pagination background layout="prev, pager, next" :total="total" /> |
||||
|
|
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,640 @@ |
|||||
|
<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' |
||||
|
|
||||
|
// 变量 |
||||
|
// 搜索对象 |
||||
|
const getObj = ref({ |
||||
|
goldType: '', |
||||
|
platform: 'all', |
||||
|
}); |
||||
|
//默认高亮标签页 |
||||
|
const activeName = ref('recharge') |
||||
|
// 金币分类选项 |
||||
|
const gold = [ |
||||
|
{ |
||||
|
value: '', |
||||
|
label: '全部类型', |
||||
|
}, |
||||
|
{ |
||||
|
value: 'rechargeGole', |
||||
|
label: '充值金币', |
||||
|
}, |
||||
|
{ |
||||
|
value: 'freeGold', |
||||
|
label: '免费金币', |
||||
|
}, |
||||
|
{ |
||||
|
value: 'taskGold', |
||||
|
label: '付费金币', |
||||
|
}, |
||||
|
] |
||||
|
// 图表 |
||||
|
// 指定图表的配置项和数据 |
||||
|
const option1 = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// Use axis to trigger tooltip |
||||
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
legend: {}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
|
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '充值金币', |
||||
|
color: '#35e383', |
||||
|
type: 'bar', |
||||
|
stack: 'total', |
||||
|
label: { |
||||
|
show: true |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
data: [320, 302, 301, 334, 390, 330, 320] |
||||
|
}, |
||||
|
{ |
||||
|
name: '免费金币', |
||||
|
color: '#5f8ff5', |
||||
|
type: 'bar', |
||||
|
stack: 'total', |
||||
|
label: { |
||||
|
show: true |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
data: [120, 132, 101, 134, 90, 230, 210] |
||||
|
}, |
||||
|
{ |
||||
|
name: '任务金币', |
||||
|
color: '#ffe733', |
||||
|
type: 'bar', |
||||
|
stack: 'total', |
||||
|
label: { |
||||
|
show: true |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
data: [220, 182, 191, 234, 290, 330, 310] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
const option2 = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
// Use axis to trigger tooltip |
||||
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
legend: {}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
|
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '充值金币', |
||||
|
color: '#35e383', |
||||
|
type: 'bar', |
||||
|
stack: 'total', |
||||
|
label: { |
||||
|
show: true |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
data: [320, 302, 301, 334, 390, 330, 320] |
||||
|
}, |
||||
|
{ |
||||
|
name: '免费金币', |
||||
|
color: '#5f8ff5', |
||||
|
type: 'bar', |
||||
|
stack: 'total', |
||||
|
label: { |
||||
|
show: true |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
data: [120, 132, 101, 134, 90, 230, 210] |
||||
|
}, |
||||
|
{ |
||||
|
name: '任务金币', |
||||
|
color: '#ffe733', |
||||
|
type: 'bar', |
||||
|
stack: 'total', |
||||
|
label: { |
||||
|
show: true |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
data: [220, 182, 191, 234, 290, 330, 310] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
const option3 = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
top: '5%', |
||||
|
left: 'center' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Access From', |
||||
|
type: 'pie', |
||||
|
radius: ['40%', '70%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: 40, |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 1048, name: 'Search Engine' }, |
||||
|
{ value: 735, name: 'Direct' }, |
||||
|
{ value: 580, name: 'Email' }, |
||||
|
{ value: 484, name: 'Union Ads' }, |
||||
|
{ value: 300, name: 'Video Ads' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
const option4 = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
top: '5%', |
||||
|
left: 'center' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Access From', |
||||
|
type: 'pie', |
||||
|
radius: ['40%', '70%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: 40, |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 1048, name: 'Search Engine' }, |
||||
|
{ value: 735, name: 'Direct' }, |
||||
|
{ value: 580, name: 'Email' }, |
||||
|
{ value: 484, name: 'Union Ads' }, |
||||
|
{ value: 300, name: 'Video Ads' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
const option5 = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
top: '5%', |
||||
|
left: 'center' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Access From', |
||||
|
type: 'pie', |
||||
|
radius: ['40%', '70%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: 40, |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 1048, name: 'Search Engine' }, |
||||
|
{ value: 735, name: 'Direct' }, |
||||
|
{ value: 580, name: 'Email' }, |
||||
|
{ value: 484, name: 'Union Ads' }, |
||||
|
{ value: 300, name: 'Video Ads' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
const option6 = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
top: '5%', |
||||
|
left: 'center' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Access From', |
||||
|
type: 'pie', |
||||
|
radius: ['40%', '70%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: 40, |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 1048, name: 'Search Engine' }, |
||||
|
{ value: 735, name: 'Direct' }, |
||||
|
{ value: 580, name: 'Email' }, |
||||
|
{ value: 484, name: 'Union Ads' }, |
||||
|
{ value: 300, name: 'Video Ads' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
const list = ref([]); |
||||
|
|
||||
|
// 方法 |
||||
|
// 搜索方法 |
||||
|
const get = function () { |
||||
|
console.log(getObj.value); |
||||
|
} |
||||
|
// 全部平台 |
||||
|
const allPlatform = function () { |
||||
|
list.value = [ |
||||
|
{ value: 100, name: '项目1' }, |
||||
|
{ value: 100, name: '项目2' }, |
||||
|
{ value: 100, name: '项目3' }, |
||||
|
{ value: 100, name: '项目4' }, |
||||
|
{ value: 100, name: '项目5' } |
||||
|
] |
||||
|
option6.series.data = list.value; |
||||
|
// 第4个饼状图 基于准备好的dom，初始化echarts实例 |
||||
|
var pie = echarts.init(document.getElementById('goldCategory')); |
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
pie.setOption(option6); |
||||
|
getObj.value.platform = 'all'; |
||||
|
get(); |
||||
|
} |
||||
|
// HC |
||||
|
const HomilyChart = function () { |
||||
|
list.value = [ |
||||
|
{ value: 100, name: '项目1' }, |
||||
|
{ value: 200, name: '项目2' }, |
||||
|
{ value: 300, name: '项目3' }, |
||||
|
{ value: 400, name: '项目4' }, |
||||
|
{ value: 500, name: '项目5' } |
||||
|
] |
||||
|
getObj.value.platform = 'HomilyChart'; |
||||
|
get(); |
||||
|
} |
||||
|
// Link |
||||
|
const HomilyLink = function () { |
||||
|
list.value = [ |
||||
|
{ value: 100, name: '项目1' }, |
||||
|
{ value: 200, name: '项目2' }, |
||||
|
{ value: 100, name: '项目3' }, |
||||
|
{ value: 200, name: '项目4' }, |
||||
|
{ value: 100, name: '项目5' } |
||||
|
] |
||||
|
getObj.value.platform = 'HomilyLink'; |
||||
|
get(); |
||||
|
} |
||||
|
|
||||
|
onMounted(function () { |
||||
|
get(); |
||||
|
// 第一个柱状图 基于准备好的dom，初始化echarts实例 |
||||
|
var rechargeBar = echarts.init(document.getElementById('recharge')); |
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
rechargeBar.setOption(option1); |
||||
|
|
||||
|
//第二个柱状图 基于准备好的dom，初始化echarts实例 |
||||
|
var consumeBar = echarts.init(document.getElementById('consume')); |
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
consumeBar.setOption(option2); |
||||
|
|
||||
|
// 第一个饼状图 基于准备好的dom，初始化echarts实例 |
||||
|
var yearRechargePie = echarts.init(document.getElementById('yearRecharge')); |
||||
|
|
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
yearRechargePie.setOption(option3); |
||||
|
|
||||
|
// 第二个饼状图 基于准备好的dom，初始化echarts实例 |
||||
|
var yearConsumePie = echarts.init(document.getElementById('yearConsume')); |
||||
|
|
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
yearConsumePie.setOption(option4); |
||||
|
|
||||
|
// 第三个饼状图 基于准备好的dom，初始化echarts实例 |
||||
|
var nowGoldPie = echarts.init(document.getElementById('nowGold')); |
||||
|
|
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
nowGoldPie.setOption(option5); |
||||
|
|
||||
|
// 第4个饼状图 基于准备好的dom，初始化echarts实例 |
||||
|
var goldCategoryPie = echarts.init(document.getElementById('goldCategory')); |
||||
|
|
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
goldCategoryPie.setOption(option6); |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="6"> |
||||
|
<el-card> |
||||
|
<p>当前金币余量 |
||||
|
</p> |
||||
|
<p>数据待填充</p> |
||||
|
<p>较前一天（数据待填充）</p> |
||||
|
<template #footer>充值（） 免费（） 任务（）</template> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-card> |
||||
|
<p>全年累计金币数</p> |
||||
|
<p>数据待填充</p> |
||||
|
<p>折合新币累计金额（数据待填充）</p> |
||||
|
<template #footer>昨日新增（），其中充值（）</template> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-card> |
||||
|
<p>全年累计消费金币数</p> |
||||
|
<p>数据待填充</p> |
||||
|
<p>消费（）；退款（）</p> |
||||
|
<template #footer>昨日新增消耗（）；消费（）；退款（）</template> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-card> |
||||
|
<p>全年累计充值人数</p> |
||||
|
<p>数据待填充</p> |
||||
|
<p>周同比 （）% 日环比（）%</p> |
||||
|
<template #footer>昨日充值人数（），其中首充（）人</template> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="金币充值" name="recharge"> |
||||
|
<div class="bar"> |
||||
|
<div id="recharge" style="width: 1200px;height:400px;"></div> |
||||
|
<div> |
||||
|
<div class="goldCategory"> |
||||
|
<span class="light-green-dot"></span> |
||||
|
<span>充值金币</span> |
||||
|
</div> |
||||
|
<div class="goldCategory"> |
||||
|
<span class="blue-dot"></span> |
||||
|
<span>免费金币</span> |
||||
|
</div> |
||||
|
<div class="goldCategory"> |
||||
|
<span class="yellow-dot"></span> |
||||
|
<span>任务金币</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="ranking-header"> |
||||
|
<span style="margin-right: 40px;">门店金币充值排名</span> |
||||
|
<el-select v-model="getObj.goldType" placeholder="请选择金币类型" size="small" |
||||
|
style="width: 90px;"> |
||||
|
<el-option v-for="item in gold" :key="item.value" :label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs1CircleFill /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs2CircleFill /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs3CircleFill /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs4Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs5Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs1Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs6Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs7Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs8Circle /> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="金币消费" name="consume"> |
||||
|
<div class="bar"> |
||||
|
<div id="consume" style="width: 1200px;height:400px;"></div> |
||||
|
<div> |
||||
|
<div class="goldCategory"> |
||||
|
<span class="light-green-dot"></span> |
||||
|
<span>充值金币</span> |
||||
|
</div> |
||||
|
<div class="goldCategory"> |
||||
|
<span class="blue-dot"></span> |
||||
|
<span>免费金币</span> |
||||
|
</div> |
||||
|
<div class="goldCategory"> |
||||
|
<span class="yellow-dot"></span> |
||||
|
<span>任务金币</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="ranking-header"> |
||||
|
<span style="margin-right: 40px;">门店金币消费排名</span> |
||||
|
<el-select v-model="getObj.goldType" placeholder="请选择金币类型" size="small" |
||||
|
style="width: 90px;"> |
||||
|
<el-option v-for="item in gold" :key="item.value" :label="item.label" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs1CircleFill /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs2CircleFill /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs3CircleFill /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs4Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs5Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs1Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs6Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs7Circle /> |
||||
|
</div> |
||||
|
<div class="ranking-item"> |
||||
|
<Bs8Circle /> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
|
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="16"> |
||||
|
<el-card> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<span>金币概览</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div class="pie"> |
||||
|
<div id="yearRecharge" style="width: 600px;height:400px;"></div> |
||||
|
<div id="yearConsume" style="width: 600px;height:400px;"></div> |
||||
|
<div id="nowGold" style="width: 600px;height:400px;"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-card> |
||||
|
<template #header> |
||||
|
<div class="card-header" style="display: flex;"> |
||||
|
<span>金币消耗类别占比</span> |
||||
|
<el-radio-group v-model="getObj.platform" fill="#ffffff" text-color="#409eff" size="small" |
||||
|
style="margin-left: auto;"> |
||||
|
<el-radio-button label="全部平台" value="all" @click="allPlatform()" /> |
||||
|
<el-radio-button label="HC" value="hc" @click="HomilyChart()" /> |
||||
|
<el-radio-button label="Link" value="link" @click="HomilyLink()" /> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div id="goldCategory" style="width: 600px;height:400px;"></div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.ranking-item { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.ranking-header { |
||||
|
margin-bottom: 10px; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.goldCategory { |
||||
|
margin-right: 20px; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.bar { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.pie { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.el-row { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.el-radio-button { |
||||
|
border: 1px solid grey; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1 @@ |
|||||
|
/// <reference types="vite/client" />
|
||||
@ -0,0 +1,26 @@ |
|||||
|
{ |
||||
|
"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"] |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"files": [], |
||||
|
"references": [ |
||||
|
{ "path": "./tsconfig.app.json" }, |
||||
|
{ "path": "./tsconfig.node.json" } |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
{ |
||||
|
"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"] |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
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