wangxiangwen4
1 month ago
31 changed files with 4962 additions and 0 deletions
-
13activitylink/.env.development
-
20activitylink/.env.production
-
24activitylink/.gitignore
-
3activitylink/.vscode/extensions.json
-
10activitylink/README.md
-
13activitylink/index.html
-
2262activitylink/package-lock.json
-
20activitylink/package.json
-
1activitylink/public/vite.svg
-
9activitylink/src/App.vue
-
4activitylink/src/api/API.js
-
1activitylink/src/assets/vue.svg
-
BINactivitylink/src/img/image.png
-
17activitylink/src/main.js
-
74activitylink/src/router/index.js
-
21activitylink/src/stone/counter.js
-
26activitylink/src/stone/giftFixedListStone.js
-
79activitylink/src/style.css
-
130activitylink/src/utils/request.js
-
13activitylink/src/views/choujiang/index.vue
-
17activitylink/src/views/homePage.vue
-
285activitylink/src/views/zhongchou/activity/detail/index.vue
-
242activitylink/src/views/zhongchou/activity/index.vue
-
179activitylink/src/views/zhongchou/activity/set/index.vue
-
274activitylink/src/views/zhongchou/gift/importFixedList/index.vue
-
270activitylink/src/views/zhongchou/gift/importuser/index.vue
-
260activitylink/src/views/zhongchou/gift/index.vue
-
128activitylink/src/views/zhongchou/index.vue
-
300activitylink/src/views/zhongchou/level/index.vue
-
253activitylink/src/views/zhongchou/winning/index.vue
-
14activitylink/vite.config.js
@ -0,0 +1,13 @@ |
|||
# must start with VITE_ |
|||
VITE_ENV = 'development' |
|||
VITE_OUTPUT_DIR = 'dev' |
|||
# public path |
|||
VITE_PUBLIC_PATH = / |
|||
|
|||
#新数据接口 |
|||
# VITE_APP_API_BASE_URL = "http://39.101.133.168:8828/link" |
|||
|
|||
|
|||
# Whether to open mock |
|||
VITE_USE_MOCK = true |
|||
|
|||
@ -0,0 +1,20 @@ |
|||
# must start with VITE_ |
|||
VITE_ENV = 'production' |
|||
VITE_OUTPUT_DIR = 'dist' |
|||
# public path |
|||
VITE_PUBLIC_PATH = /aixiaocaishen |
|||
# VITE_PUBLIC_PATH = / |
|||
|
|||
# Whether to open mock |
|||
VITE_USE_MOCK = true |
|||
|
|||
#新数据接口 |
|||
# VITE_APP_API_BASE_URL = https://api.homilychart.com/link |
|||
|
|||
# Whether to enable gzip or brotli compression |
|||
# Optional: gzip | brotli | none |
|||
# If you need multiple forms, you can use `,` to separate |
|||
VITE_BUILD_COMPRESS = 'none' |
|||
|
|||
# Whether to delete origin files when using compress, default false |
|||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false |
|||
@ -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,10 @@ |
|||
# Vue 3 + Vite |
|||
|
|||
This template should help get you started developing with Vue 3 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 IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support). |
|||
|
|||
npm install |
|||
npm install vue-router |
|||
npm install axios |
|||
npm install element-plus --save |
|||
@ -0,0 +1,13 @@ |
|||
<!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>Vite + Vue</title> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/src/main.js"></script> |
|||
</body> |
|||
</html> |
|||
2262
activitylink/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,20 @@ |
|||
{ |
|||
"name": "activitylink", |
|||
"private": true, |
|||
"version": "0.0.0", |
|||
"type": "module", |
|||
"scripts": { |
|||
"dev": "vite --host", |
|||
"build": "vite build", |
|||
"preview": "vite preview" |
|||
}, |
|||
"dependencies": { |
|||
"@vitejs/plugin-vue": "^4.6.2", |
|||
"axios": "^1.10.0", |
|||
"element-plus": "^2.10.4", |
|||
"pinia": "^3.0.3", |
|||
"vite": "^4.5.3", |
|||
"vue": "^3.5.17", |
|||
"vue-router": "^4.5.1" |
|||
} |
|||
} |
|||
@ -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,4 @@ |
|||
import request from "../utils/request"; |
|||
|
|||
const APIurl = import.meta.env.VITE_APP_API_BASE_URL; |
|||
|
|||
@ -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: 71 | Height: 70 | Size: 7.6 KiB |
@ -0,0 +1,17 @@ |
|||
import { createApp } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import 'element-plus/dist/index.css' |
|||
import './style.css' |
|||
import App from './App.vue' |
|||
import router from './router' |
|||
import { createPinia } from 'pinia' |
|||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' |
|||
// createApp(App).use(router).mount('#app')
|
|||
const app = createApp(App) |
|||
const pinia = createPinia() |
|||
app.use(router) |
|||
app.use(pinia) |
|||
app.use(ElementPlus, { |
|||
locale: zhCn, |
|||
}) |
|||
app.mount('#app') |
|||
@ -0,0 +1,74 @@ |
|||
import { createRouter, createWebHistory } from 'vue-router' |
|||
const routes = [ |
|||
{ |
|||
path: '/', |
|||
redirect: 'homePage' |
|||
}, |
|||
{ |
|||
path: '/homePage', |
|||
name: 'homePage', |
|||
component: () => import('../views/homePage.vue'), |
|||
// children: [
|
|||
// {name: 'AiEmotion', path: '/AiEmotion', component: () => import('@/views/AiEmotion.vue')}
|
|||
// ]
|
|||
}, |
|||
{ |
|||
path: '/choujiang', |
|||
name: 'choujiang', |
|||
component: () => import('../views/choujiang/index.vue'), |
|||
}, |
|||
{ |
|||
path: '/zhongchou', |
|||
name: 'zhongchou', |
|||
component: () => import('../views/zhongchou/index.vue'), |
|||
children: [ |
|||
{ |
|||
path: 'levelManagement', // 注意这里不要加斜杠，表示相对路径
|
|||
name: 'zhongchoulevel', |
|||
component: () => import('../views/zhongchou/level/index.vue'), |
|||
}, |
|||
{ |
|||
path: 'giftManagement', // 注意这里不要加斜杠，表示相对路径
|
|||
name: 'zhongchougift', |
|||
component: () => import('../views/zhongchou/gift/index.vue'), |
|||
}, |
|||
{ |
|||
path: 'giftManagement/importUsers', // 注意这里不要加斜杠，表示相对路径
|
|||
name: 'importUsers', |
|||
component: () => import('../views/zhongchou/gift/importuser/index.vue'), |
|||
}, |
|||
{ |
|||
path: 'giftManagement/importFixedList', // 注意这里不要加斜杠，表示相对路径
|
|||
name: 'importFixedList', |
|||
component: () => import('../views/zhongchou/gift/importFixedList/index.vue'), |
|||
}, |
|||
{ |
|||
path: 'winningManagement', // 注意这里不要加斜杠，表示相对路径
|
|||
name: 'zhongchouwinning', |
|||
component: () => import('../views/zhongchou/winning/index.vue'), |
|||
}, |
|||
{ |
|||
path: 'activityManagement', // 注意这里不要加斜杠，表示相对路径
|
|||
name: 'zhongchouactivity', |
|||
component: () => import('../views/zhongchou/activity/index.vue'), |
|||
}, |
|||
{ |
|||
path: 'activityManagement/detail', // 注意这里不要加斜杠，表示相对路径
|
|||
name: 'activityDetail', |
|||
component: () => import('../views/zhongchou/activity/detail/index.vue'), |
|||
}, |
|||
{ |
|||
path: 'activityManagement/set', // 注意这里不要加斜杠，表示相对路径
|
|||
name: 'activitySet', |
|||
component: () => import('../views/zhongchou/activity/set/index.vue'), |
|||
} |
|||
] |
|||
} |
|||
] |
|||
// 创建路由实例
|
|||
const router = createRouter({ |
|||
history: createWebHistory(import.meta.env.VITE_PUBLIC_PATH), |
|||
routes |
|||
}) |
|||
// 导出
|
|||
export default router |
|||
@ -0,0 +1,21 @@ |
|||
import {computed, ref} from 'vue' |
|||
import { defineStore } from 'pinia' |
|||
|
|||
export const UseCounterStore = defineStore('counter',()=>{ |
|||
const count = ref(0) |
|||
const add = () =>{ |
|||
count.value++ |
|||
} |
|||
const sub = () =>{ |
|||
count.value-- |
|||
} |
|||
|
|||
const double = computed(()=>{return count.value*2}) |
|||
|
|||
|
|||
const msg=ref('hello') |
|||
|
|||
return {count,add,sub,double,msg} |
|||
},{ |
|||
persist:true |
|||
}) |
|||
@ -0,0 +1,26 @@ |
|||
// src/stone/giftFixedListStone.js
|
|||
import { defineStore } from "pinia"; |
|||
import { ref } from 'vue'; |
|||
|
|||
export const usegiftFixedListStone = defineStore('giftFixedListStone', () => { |
|||
// 响应式属性
|
|||
const fixedGiftName = ref('666666'); |
|||
|
|||
// 方法
|
|||
const setFixedGiftName = (name) => { |
|||
fixedGiftName.value = name; |
|||
}; |
|||
|
|||
const getList = async () => { |
|||
// 示例请求逻辑
|
|||
// const res = await axios.get('xxx')
|
|||
return '123'; |
|||
}; |
|||
|
|||
// 暴露出去
|
|||
return { |
|||
fixedGiftName, |
|||
setFixedGiftName, |
|||
getList |
|||
}; |
|||
}); |
|||
@ -0,0 +1,79 @@ |
|||
:root { |
|||
font-family: 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,130 @@ |
|||
import axios from 'axios' |
|||
import { ElMessage } from 'element-plus' |
|||
import { config } from '@/config' |
|||
|
|||
const ERROR_MESSAGES = { |
|||
badRequest: '请求错误(400)', |
|||
unauthorized: '未授权,请登录(401)', |
|||
forbidden: '拒绝访问(403)', |
|||
notFound: `请求地址出错: ${'[具体 URL 将在这里被替换]'}`, |
|||
methodNotAllowed: '请求方法未允许(405)', |
|||
requestTimeout: '请求超时(408)', |
|||
internalServerError: '服务器内部错误(500)', |
|||
notImplemented: '服务未实现(501)', |
|||
badGateway: '网络错误(502)', |
|||
serviceUnavailable: '服务不可用(503)', |
|||
gatewayTimeout: '网络超时(504)', |
|||
httpVersionNotSupported: 'HTTP 版本不受支持(505)', |
|||
defaultConnectionError: '连接错误: [原始错误消息]', |
|||
networkError: '网络异常，请检查后重试！', |
|||
serverFailure: '连接到服务器失败，请联系管理员' |
|||
} |
|||
|
|||
const service = axios.create({ |
|||
baseURL: '', // url = base url + request url+
|
|||
// timeout: 50000,
|
|||
withCredentials: false // send cookies when cross-domain requests
|
|||
// headers: {
|
|||
// // clear cors
|
|||
// 'Cache-Control': 'no-cache',
|
|||
// Pragma: 'no-cache'
|
|||
// }
|
|||
}) |
|||
|
|||
const setErrorMsg = (error) => { |
|||
if (error && error.response) { |
|||
switch (error.response.status) { |
|||
case 400: |
|||
error.message = ERROR_MESSAGES.badRequest |
|||
break |
|||
case 401: |
|||
error.message = ERROR_MESSAGES.unauthorized |
|||
break |
|||
case 403: |
|||
error.message = ERROR_MESSAGES.forbidden |
|||
break |
|||
case 404: |
|||
error.message = ERROR_MESSAGES.notFound.replace( |
|||
'[具体 URL 将在这里被替换]', |
|||
error.response.config.url |
|||
) |
|||
break |
|||
case 405: |
|||
error.message = ERROR_MESSAGES.methodNotAllowed |
|||
break |
|||
case 408: |
|||
error.message = ERROR_MESSAGES.requestTimeout |
|||
break |
|||
case 500: |
|||
error.message = ERROR_MESSAGES.internalServerError |
|||
break |
|||
case 501: |
|||
error.message = ERROR_MESSAGES.notImplemented |
|||
break |
|||
case 502: |
|||
error.message = ERROR_MESSAGES.badGateway |
|||
break |
|||
case 503: |
|||
error.message = ERROR_MESSAGES.serviceUnavailable |
|||
break |
|||
case 504: |
|||
error.message = ERROR_MESSAGES.gatewayTimeout |
|||
break |
|||
case 505: |
|||
error.message = ERROR_MESSAGES.httpVersionNotSupported |
|||
break |
|||
default: |
|||
error.message = ERROR_MESSAGES.defaultConnectionError.replace( |
|||
'[原始错误消息]', |
|||
error.message |
|||
) |
|||
} |
|||
} else { |
|||
if (error.message === 'Network Error') { |
|||
error.message = ERROR_MESSAGES.networkError |
|||
} else { |
|||
error.message = ERROR_MESSAGES.serverFailure |
|||
} |
|||
} |
|||
return error.message |
|||
} |
|||
|
|||
// Request interceptors
|
|||
service.interceptors.request.use( |
|||
(config) => { |
|||
// 在此处添加请求头等，如添加 token
|
|||
// if (store.state.token) {
|
|||
// config.headers['Authorization'] = `Bearer ${store.state.token}`
|
|||
// }
|
|||
return config |
|||
}, |
|||
(error) => { |
|||
return Promise.reject(error) |
|||
} |
|||
) |
|||
|
|||
// Response interceptors
|
|||
service.interceptors.response.use( |
|||
async (response) => { |
|||
// await new Promise(resovle => setTimeout(resovle, 3000));
|
|||
// if (response.config.loadingInstance) {
|
|||
// response.config.loadingInstance.close();
|
|||
// }
|
|||
const res = response.data |
|||
if (res.code !== 200) { |
|||
const errorMsg = res.msg || 'Unkonw error' |
|||
// ElMessage.error(errorMsg)
|
|||
// return Promise.reject(new Error(res.msg || 'Error'))
|
|||
return response.data |
|||
} else { |
|||
return response.data |
|||
} |
|||
}, |
|||
(error) => { |
|||
const errorMessage = setErrorMsg(error) |
|||
ElMessage.error(errorMessage) |
|||
return Promise.reject(error) |
|||
} |
|||
) |
|||
|
|||
export default service |
|||
@ -0,0 +1,13 @@ |
|||
<template> |
|||
<div> |
|||
抽奖 |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,17 @@ |
|||
<template> |
|||
<div> |
|||
<button @click="router.push('/choujiang')">抽奖</button> |
|||
<button @click="router.push('/zhongchou')">众筹</button> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { useRouter } from "vue-router"; |
|||
|
|||
const router = useRouter(); |
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
@ -0,0 +1,285 @@ |
|||
<!-- 美股是0 港股是1 精网号现在用的是字符串类型--> |
|||
<template> |
|||
|
|||
<el-card style="margin-top:50px ; min-height: 90vh; max-height: 90vh;"> |
|||
<div class="gray-container"> |
|||
<el-button type="primary" @click="goBack"> |
|||
<i class="el-icon-back"></i> 返回 |
|||
</el-button> |
|||
|
|||
<!-- 顶部信息栏 --> |
|||
<div class="info-bar"> |
|||
当前总参与人数：{{ totalParticipants }}人 |
|||
参与美股总人数：{{ usParticipants }}人 美股助力总次数：{{ usAssists }}次 |
|||
参与港股总人数：{{ hkParticipants }}人 港股助力总次数：{{ hkAssists }}次 |
|||
</div> |
|||
|
|||
<!-- 搜索栏 --> |
|||
<el-form :inline="true" class="search-bar"> |
|||
<el-form-item label="姓名"> |
|||
<el-input v-model="searchdata.name" placeholder="请输入姓名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="精网号"> |
|||
<el-input v-model="searchdata.jingwangId" placeholder="请输入精网号" @input="handleJingwangIdInput"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="市场" class="market-item"> |
|||
<el-select v-model="searchdata.market" placeholder="请选择" class="market-select"> |
|||
<el-option label="全部" value="0"></el-option> |
|||
<el-option label="美股" value="1"></el-option> |
|||
<el-option label="港股" value="2"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleSearch">搜索</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="handleReset">重置</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleExport">导出数据</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<!-- 表格 --> |
|||
<div class="table-container"> |
|||
<el-table :data="currentPageData" style="width: 100%" :row-style="{ height: '55px' }"> |
|||
<el-table-column prop="id" label="ID" width="100" align="center"></el-table-column> |
|||
<el-table-column prop="name" label="姓名" width="300" align="center"></el-table-column> |
|||
<el-table-column prop="jingwangId" label="精网号" width="300" align="center"></el-table-column> |
|||
<el-table-column prop="market" label="参与市场" width="300" align="center"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.market == '0' ">美股</span> |
|||
<span v-if="scope.row.market == '1' ">港股</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="participationTime" label="参与时间" align="center"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
<!-- 返回按钮 --> |
|||
|
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="tableData.length" |
|||
> |
|||
</el-pagination> |
|||
|
|||
</el-card> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
|
|||
const router = useRouter() |
|||
|
|||
// 响应式数据 |
|||
const totalParticipants = ref(156) |
|||
const usParticipants = ref(78) |
|||
const usAssists = ref(345) |
|||
const hkParticipants = ref(78) |
|||
const hkAssists = ref(234) |
|||
|
|||
const searchdata = ref({ |
|||
name: '', |
|||
jingwangId: '', |
|||
market: '' |
|||
}) |
|||
|
|||
const tableData = ref([ |
|||
{ |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
market: '0', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '张三', |
|||
jingwangId: '90047666', |
|||
market: '1', |
|||
participationTime: '2025年7月11日 09:46' |
|||
} |
|||
]) |
|||
|
|||
const currentPage = ref(1) |
|||
const pageSize = ref(10) |
|||
|
|||
// 当前页数据计算属性 |
|||
const currentPageData = computed(() => { |
|||
const start = (currentPage.value - 1) * pageSize.value |
|||
const end = start + pageSize.value |
|||
return tableData.value.slice(start, end) |
|||
}) |
|||
|
|||
// 返回上一页 |
|||
const goBack = () => { |
|||
router.back() |
|||
} |
|||
|
|||
// 搜索逻辑 |
|||
const handleSearch = () => { |
|||
console.log('Search:', searchName.value, searchJingwangId.value, searchMarket.value) |
|||
} |
|||
|
|||
// 重置搜索条件 |
|||
const handleReset = () => { |
|||
searchName.value = '' |
|||
searchJingwangId.value = '' |
|||
searchMarket.value = '' |
|||
} |
|||
|
|||
// 导出数据 |
|||
const handleExport = () => { |
|||
console.log('Export Data') |
|||
} |
|||
|
|||
// 分页 size 改变 |
|||
const handleSizeChange = (val) => { |
|||
pageSize.value = val |
|||
currentPage.value = 1 |
|||
} |
|||
|
|||
// 当前页改变 |
|||
const handleCurrentChange = (val) => { |
|||
currentPage.value = val |
|||
} |
|||
|
|||
// 输入精网号处理 |
|||
const handleJingwangIdInput = (value) => { |
|||
searchJingwangId.value = value.replace(/\D/g, '') |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.info-bar { |
|||
margin: 10px 0; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.gray-container { |
|||
width: 100%; /* 宽度自适应 */ |
|||
background-color: #ffffff; /* 浅灰色背景 */ |
|||
padding: 20px; /* 内边距 */ |
|||
box-sizing: border-box; /* 包含内边距在总宽度内 */ |
|||
min-height: 80vh; /* 设置最小高度 */ |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.search-bar { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.market-item { |
|||
width: 200px; /* 根据需要调整宽度 */ |
|||
} |
|||
|
|||
.market-select { |
|||
width: 100%; /* 确保 select 宽度与 form-item 一致 */ |
|||
} |
|||
|
|||
.table-container { |
|||
height: 600px; /* 根据需要调整高度 */ |
|||
overflow-y: auto; /* 启用垂直滚动条 */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,242 @@ |
|||
<template> |
|||
<!-- 1代表活动进行中 0代表活动已结束 --> |
|||
|
|||
<el-card style="margin-top:50px; ; min-height: 90vh; max-height: 90vh; "> |
|||
<!-- <div style="width: 100%;"> --> |
|||
<!-- 活动管理 --> |
|||
<!-- 这里可以添加等级管理的具体内容 --> |
|||
<div class="gray-container"> |
|||
<div class="activity-header"> |
|||
<div class="header-text">活动设置：</div> |
|||
<el-button type="primary" @click="centerDialogVisible = true">添加活动</el-button> |
|||
</div> |
|||
<!-- 其他内容区域 --> |
|||
<div class="content-area"> |
|||
<el-table :data="currentPageData" style="width: auto" :row-style="{ height: '60px' }"> |
|||
<el-table-column prop="name" label="活动名称"></el-table-column> |
|||
<el-table-column prop="stock1" label="股票一"></el-table-column> |
|||
<el-table-column prop="stock2" label="股票二"></el-table-column> |
|||
|
|||
<el-table-column label="数据统计"> |
|||
<template #default="{ $index }"> |
|||
<a href="#" style="color: red;" @click.prevent="goToDetail">查看详情</a> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="设置数据"> |
|||
<template #default="{ $index }"> |
|||
<a href="#" style="color: red;" @click.prevent="goToSet">设置</a> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="状态"> |
|||
<template #default="{ row }"> |
|||
<el-switch |
|||
v-model="row.status" |
|||
:active-value="'1'" |
|||
:inactive-value="'0'" |
|||
active-color="#13ce66" |
|||
inactive-color="#ff4949" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<el-dialog |
|||
v-model="centerDialogVisible" |
|||
title="添加活动" |
|||
width="500" |
|||
align-center |
|||
> |
|||
<el-form ref="addForm" :model="activity" label-width="80px"> |
|||
<el-form-item label="活动名称" prop="name"> |
|||
<el-input v-model="activity.name" placeholder="请输入活动名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="股票一" prop="stock1"> |
|||
<el-input v-model="activity.stock1" placeholder="请输入股票一" /> |
|||
</el-form-item> |
|||
<el-form-item label="股票二" prop="stock2"> |
|||
<el-input v-model="activity.stock2" placeholder="请输入股票二" /> |
|||
</el-form-item> |
|||
<el-form-item label="活动状态" prop="status"> |
|||
<el-select v-model="activity.status" placeholder="请选择活动状态"> |
|||
<el-option label="进行中" value="1" v-model="activity.status"></el-option> |
|||
<el-option label="已结束" value="0" v-model="activity.status"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="cancel">取消</el-button> |
|||
<el-button type="primary" @click="addActivity"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</div> |
|||
<!-- 分页控件：移动到这里 --> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-sizes="[10, 20, 30, 50]" |
|||
:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="tableData.length" |
|||
style="margin-top: 20px; text-align: center;" |
|||
/> |
|||
<!-- </div> --> |
|||
</el-card> |
|||
<router-view></router-view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
|
|||
const router = useRouter(); |
|||
const centerDialogVisible = ref(false) |
|||
// 模拟表格数据（支持状态） |
|||
const tableData = ref([ |
|||
{ name: '周年庆众筹', stock1: '美股', stock2: '港股', status: '0' }, |
|||
{ name: '中秋众筹', stock1: 'A股', stock2: '美股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
{ name: '国庆众筹', stock1: '港股', stock2: '日股', status: '0' }, |
|||
// ... 其他数据 ... |
|||
]); |
|||
|
|||
//取消添加 |
|||
const cancel = () => { |
|||
centerDialogVisible.value = false |
|||
activity.value ={ |
|||
name: '', |
|||
stock1: '', |
|||
stock2: '', |
|||
status: '' |
|||
} |
|||
} |
|||
//添加活动 |
|||
const addActivity = () => { |
|||
centerDialogVisible.value = false |
|||
//TODO: 添加活动逻辑 |
|||
activity.value ={ |
|||
name: '', |
|||
stock1: '', |
|||
stock2: '', |
|||
status: '' |
|||
} |
|||
} |
|||
|
|||
const activity =ref({ |
|||
name: '', |
|||
stock1: '', |
|||
stock2: '', |
|||
status: '' |
|||
}) |
|||
|
|||
// 分页配置 |
|||
const currentPage = ref(1); |
|||
const pageSize = ref(10); // 每页显示 5 条 |
|||
|
|||
|
|||
// 当前页数据 |
|||
const currentPageData = computed(() => { |
|||
const start = (currentPage.value - 1) * pageSize.value; |
|||
const end = start + pageSize.value; |
|||
return tableData.value.slice(start, end); |
|||
}); |
|||
|
|||
|
|||
|
|||
// 分页事件处理 |
|||
const handleSizeChange = (val) => { |
|||
pageSize.value = val; |
|||
}; |
|||
|
|||
const handleCurrentChange = (val) => { |
|||
currentPage.value = val; |
|||
}; |
|||
|
|||
// 跳转详情页方法 |
|||
const goToDetail = () => { |
|||
router.push({ name: 'activityDetail' }); |
|||
}; |
|||
const goToSet = () => { |
|||
router.push({ name: 'activitySet' }); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.gray-container { |
|||
width: 100%; /* 宽度自适应 */ |
|||
background-color: #ffffff; /* 浅灰色背景 */ |
|||
padding: 20px; /* 内边距 */ |
|||
box-sizing: border-box; /* 包含内边距在总宽度内 */ |
|||
min-height: 80vh; /* 设置最小高度 */ |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.activity-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20px; /* 与下方内容的间距 */ |
|||
} |
|||
|
|||
.header-text { |
|||
font-size: 1.5rem; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.marginTop { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
th, |
|||
td { |
|||
border: 1px solid #ddd; |
|||
padding: 8px; |
|||
text-align: left; |
|||
} |
|||
|
|||
th { |
|||
background-color: #f2f2f2; |
|||
} |
|||
|
|||
/* 新增样式：让分页控件在 .content-area 内居中显示 */ |
|||
.content-area { |
|||
position: relative; |
|||
} |
|||
|
|||
.content-area .el-pagination { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,179 @@ |
|||
<template> |
|||
|
|||
<el-card style="margin-top:50px; min-height: 90vh; max-height: 90vh;"> |
|||
<div class="data-settings"> |
|||
<!-- 返回按钮 --> |
|||
|
|||
<br><br><br><br><br> |
|||
<el-button type="primary" @click="goBack"> |
|||
<i class="el-icon-back"></i> 返回 |
|||
</el-button> |
|||
|
|||
<h3>数据设置：</h3> |
|||
|
|||
<div class="setting-item"> |
|||
<label>设置初始数据：</label> |
|||
<el-input-number :precision="0" :min="0" v-model="initialData" placeholder="分钟" size="large"></el-input-number> |
|||
分钟 |
|||
|
|||
<el-button type="primary" @click="openInitialConfirmDialog">确认</el-button> |
|||
</div> |
|||
|
|||
<div class="setting-item"> |
|||
<label>当前美股助力次数：{{ usStockBoostCount }} 次</label> |
|||
<el-input-number :precision="0" :min="0" v-model="usStockAddCount" placeholder="设置添加次数" size="large"></el-input-number> |
|||
|
|||
<el-button type="primary" @click="openConfirmDialog('us')">确认</el-button> |
|||
|
|||
<label>前端展示次数：{{ usStockDisplayCount }} 次</label> |
|||
</div> |
|||
|
|||
<div class="setting-item"> |
|||
<label>当前港股助力次数：{{ hkStockBoostCount }} 次</label> |
|||
<el-input-number :precision="0" :min="0" v-model="hkStockAddCount" placeholder="设置添加次数" size="large"></el-input-number> |
|||
|
|||
<el-button type="primary" @click="openConfirmDialog('hk')">确认</el-button> |
|||
|
|||
<label>前端展示次数：{{ hkStockDisplayCount }} 次</label> |
|||
</div> |
|||
|
|||
<!-- 确认对话框 --> |
|||
<el-dialog v-model="showConfirmDialog" title="确认添加" width="30%"> |
|||
<span>您确定要添加这些次数吗？</span> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showConfirmDialog = false">取 消</el-button> |
|||
<el-button type="primary" @click="confirmAdd">确 定</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<!-- 初始数据确认对话框 --> |
|||
<el-dialog v-model="showInitialConfirmDialog" title="确认设置初始数据" width="30%" :rule="rules"> |
|||
<span>您确定要设置初始数据为 {{ initialData }} 分钟吗？</span> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showInitialConfirmDialog = false">取 消</el-button> |
|||
<el-button type="primary" @click="confirmInitialData">确 定</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
|
|||
const router = useRouter(); |
|||
|
|||
// 数据定义 |
|||
const initialData = ref(''); |
|||
const usStockBoostCount = ref(234); |
|||
const usStockAddCount = ref(''); |
|||
const usStockDisplayCount = ref(345); |
|||
|
|||
const hkStockBoostCount = ref(164); |
|||
const hkStockAddCount = ref(''); |
|||
const hkStockDisplayCount = ref(355); |
|||
|
|||
// 弹窗控制 |
|||
const showConfirmDialog = ref(false); |
|||
|
|||
const showInitialConfirmDialog = ref(false); |
|||
const pendingInitialData = ref(''); |
|||
let pendingAction = ref(null); // 存储待执行的操作类型 ('us' or 'hk') |
|||
|
|||
// 打开确认弹窗 |
|||
const openConfirmDialog = (type) => { |
|||
if ((type === 'us' && usStockAddCount.value) || (type === 'hk' && hkStockAddCount.value)) { |
|||
pendingAction.value = type; |
|||
showConfirmDialog.value = true; |
|||
} |
|||
}; |
|||
|
|||
// 打开初始数据确认弹窗 |
|||
const openInitialConfirmDialog = () => { |
|||
if (initialData.value) { |
|||
pendingInitialData.value = initialData.value; |
|||
showInitialConfirmDialog.value = true; |
|||
} |
|||
}; |
|||
|
|||
// 确定设置初始数据 |
|||
const confirmInitialData = () => { |
|||
// 这里可以发送请求或保存数据 |
|||
console.log('已设置初始数据:', pendingInitialData.value); |
|||
|
|||
// 清空输入框并关闭弹窗 |
|||
initialData.value = ''; |
|||
showInitialConfirmDialog.value = false; |
|||
}; |
|||
|
|||
// 确定添加 |
|||
const confirmAdd = () => { |
|||
const type = pendingAction.value; |
|||
if (type === 'us') { |
|||
usStockBoostCount.value += parseInt(usStockAddCount.value); |
|||
usStockDisplayCount.value = usStockBoostCount.value; |
|||
usStockAddCount.value = ''; |
|||
} else if (type === 'hk') { |
|||
hkStockBoostCount.value += parseInt(hkStockAddCount.value); |
|||
hkStockDisplayCount.value = hkStockBoostCount.value; |
|||
hkStockAddCount.value = ''; |
|||
} |
|||
|
|||
// 清空动作并关闭弹窗 |
|||
pendingAction.value = null; |
|||
showConfirmDialog.value = false; |
|||
}; |
|||
|
|||
// 返回上一页 |
|||
const goBack = () => { |
|||
router.back(); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.data-settings { |
|||
background-color: #ffffff; |
|||
padding: 40px; |
|||
border-radius: 16px; |
|||
width: 100%; |
|||
max-width: 800px; |
|||
margin: 0 auto; |
|||
font-size: 1.2rem; |
|||
} |
|||
|
|||
.setting-item { |
|||
margin-bottom: 25px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.setting-item label { |
|||
margin-right: 20px; |
|||
font-size: 1.1rem; |
|||
} |
|||
|
|||
.setting-item input { |
|||
width: 150px; |
|||
height: 40px; |
|||
font-size: 1.1rem; |
|||
text-align: center; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.el-button { |
|||
height: 40px; |
|||
font-size: 1.1rem; |
|||
padding: 0 20px; |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 1.8rem; |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh;"> |
|||
<!-- 头部标题区域 --> |
|||
<template #header> |
|||
<div style="display: flex; align-items: center; justify-content: space-between;"> |
|||
<span style="font-size: 18px; font-weight: bold;">导入内定名单--{{ giftStore.fixedGiftName }}</span> |
|||
|
|||
<el-button type="primary" @click="goBack"> |
|||
<i class="el-icon-back"></i> 返回 |
|||
</el-button> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<!-- 搜索和操作区域 --> |
|||
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|||
<!-- 左侧搜索区域 --> |
|||
<div style="display: flex; gap: 10px; align-items: center;"> |
|||
<span style="white-space: nowrap;">姓名：</span> |
|||
<el-input |
|||
v-model="searchData.name" |
|||
placeholder="请输入姓名" |
|||
style="width: 150px;" |
|||
clearable |
|||
></el-input> |
|||
|
|||
<span style="white-space: nowrap; margin-left: 10px;">精网号：</span> |
|||
<el-input |
|||
v-model="searchData.jingwangId" |
|||
placeholder="请输入精网号" |
|||
style="width: 180px;" |
|||
clearable |
|||
@input="handleJingwangIdInput" |
|||
></el-input> |
|||
<el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button> |
|||
</div> |
|||
|
|||
<!-- 右侧操作按钮区域 --> |
|||
<div style="display: flex; gap: 10px;"> |
|||
<el-button type="primary" @click="addUser">添加用户</el-button> |
|||
<el-button type="success" @click="importExcel">导入Excel</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 用户表格 --> |
|||
<el-table :data="filteredUsers" style="width: 100%;" :row-style="{ height: '60px' }"> |
|||
<el-table-column type="selection" width="200" /> |
|||
<el-table-column prop="id" label="ID" width="250" /> |
|||
<el-table-column prop="name" label="姓名" width="250" /> |
|||
<el-table-column prop="jingwangId" label="精网号" width="300" /> |
|||
<el-table-column label="操作" > |
|||
<template #default="scope"> |
|||
<el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 底部操作区域 --> |
|||
<div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|||
<el-button type="danger" @click="batchDelete">批量删除</el-button> |
|||
<div style="display: flex; align-items: center;"> |
|||
<span style="margin-right: 15px;">共{{ total }}条</span> |
|||
<el-select v-model="pageSize" style="width: 120px; margin-right: 15px;"> |
|||
<el-option label="10条/页" :value="10" /> |
|||
<el-option label="20条/页" :value="20" /> |
|||
<el-option label="50条/页" :value="50" /> |
|||
</el-select> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:total="total" |
|||
:page-size="pageSize" |
|||
v-model:current-page="currentPage" |
|||
/> |
|||
<el-input |
|||
v-model="jumpPage" |
|||
style="width: 80px; margin-left: 15px; margin-right: 10px;" |
|||
placeholder="页码" |
|||
/> |
|||
<el-button type="primary" @click="goToPage">前往</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<el-dialog |
|||
v-model="centerDialogVisible" |
|||
title="添加用户" |
|||
width="500" |
|||
align-center |
|||
> |
|||
<el-form ref="addForm" :model="winuser" label-width="80px"> |
|||
<el-form-item label="姓名" prop="name"> |
|||
<el-input v-model="winuser.name" placeholder="请输入中奖用户姓名" /> |
|||
</el-form-item> |
|||
<el-form-item label="精网号" prop="jingwangId"> |
|||
<el-input v-model="winuser.jingwangId" placeholder="请输入中奖用户精网号" @input="handleJingwangIdInput"/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="cancel">取消</el-button> |
|||
<el-button type="primary" @click="addwinUser"> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import { usegiftFixedListStone } from '@/stone/giftFixedListStone'; |
|||
|
|||
const giftStore = usegiftFixedListStone(); |
|||
const router = useRouter() |
|||
const centerDialogVisible = ref(false) |
|||
// 用户数据 |
|||
const users = ref([ |
|||
{ |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, |
|||
]) |
|||
|
|||
// 搜索文本 |
|||
const searchData = ref({ |
|||
name: '', |
|||
jingwangId: '' |
|||
}) |
|||
// 分页相关 |
|||
const currentPage = ref(1) |
|||
const pageSize = ref(10) |
|||
const jumpPage = ref('') |
|||
const total = computed(() => users.value.length) |
|||
|
|||
// 过滤后的用户数据 |
|||
const filteredUsers = computed(() => { |
|||
// 实际项目中这里会有搜索过滤逻辑 |
|||
const start = (currentPage.value - 1) * pageSize.value |
|||
const end = start + pageSize.value |
|||
return users.value.slice(start, end) |
|||
}) |
|||
|
|||
const winuser=ref({ |
|||
name: '', |
|||
jingwangId: '', |
|||
}) |
|||
|
|||
// 删除用户 |
|||
const deleteUser = (user) => { |
|||
const index = users.value.findIndex(u => u.id === user.id) |
|||
if (index !== -1) { |
|||
users.value.splice(index, 1) |
|||
} |
|||
} |
|||
|
|||
// 批量删除 |
|||
const batchDelete = () => { |
|||
// 实际项目中这里会有批量删除逻辑 |
|||
console.log('执行批量删除') |
|||
} |
|||
|
|||
//添加用户 |
|||
const addUser = () => { |
|||
// 实际添加用户逻辑 |
|||
centerDialogVisible.value = true |
|||
} |
|||
|
|||
//取消添加 |
|||
const cancel = () => { |
|||
centerDialogVisible.value = false |
|||
winuser.value ={ |
|||
name: '', |
|||
jingwangId: '' |
|||
} |
|||
} |
|||
//添加活动 |
|||
const addwinUser = () => { |
|||
centerDialogVisible.value = false |
|||
//TODO: 添加活动逻辑 |
|||
winuser.value ={ |
|||
name: '', |
|||
jingwangId: '' |
|||
} |
|||
} |
|||
|
|||
// 导入Excel |
|||
const importExcel = () => { |
|||
// 实际导入逻辑 |
|||
console.log('导入Excel') |
|||
} |
|||
|
|||
// 跳转到指定页 |
|||
const goToPage = () => { |
|||
const page = parseInt(jumpPage.value) |
|||
if (!isNaN(page) && page > 0 && page <= Math.ceil(total.value / pageSize.value)) { |
|||
currentPage.value = page |
|||
} |
|||
jumpPage.value = '' |
|||
} |
|||
|
|||
const handleJingwangIdInput = (value) => { |
|||
searchJingwangId.value = value.replace(/\D/g, '') |
|||
} |
|||
|
|||
// 返回上一页 |
|||
const goBack = () => { |
|||
router.back() |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.el-card { |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.el-table { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.el-pagination { |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,270 @@ |
|||
<template> |
|||
<el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh;"> |
|||
<!-- 头部标题区域 --> |
|||
<template #header> |
|||
<div style="display: flex; align-items: center; justify-content: space-between;"> |
|||
<span style="font-size: 18px; font-weight: bold;">导入抽奖用户</span> |
|||
|
|||
<el-button type="primary" @click="goBack"> |
|||
<i class="el-icon-back"></i> 返回 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
|
|||
<!-- 搜索和操作区域 --> |
|||
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|||
<!-- 左侧搜索区域 --> |
|||
<div style="display: flex; gap: 10px; align-items: center;"> |
|||
<span style="white-space: nowrap;">姓名：</span> |
|||
<el-input |
|||
v-model="searchData.name" |
|||
placeholder="请输入姓名" |
|||
style="width: 150px;" |
|||
clearable |
|||
></el-input> |
|||
|
|||
<span style="white-space: nowrap; margin-left: 10px;">精网号：</span> |
|||
<el-input |
|||
v-model="searchData.jingwangId" |
|||
placeholder="请输入精网号" |
|||
style="width: 180px;" |
|||
clearable |
|||
@input="handleJingwangIdInput" |
|||
></el-input> |
|||
<el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button> |
|||
</div> |
|||
|
|||
<!-- 右侧操作按钮区域 --> |
|||
<div style="display: flex; gap: 10px;"> |
|||
<el-button type="primary" @click="addUser">添加用户</el-button> |
|||
<el-button type="success" @click="importExcel">导入Excel</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 用户表格 --> |
|||
<el-table :data="filteredUsers" style="width: 100%;" :row-style="{ height: '60px' }"> |
|||
<el-table-column type="selection" width="200" /> |
|||
<el-table-column prop="id" label="ID" width="250" /> |
|||
<el-table-column prop="name" label="姓名" width="250" /> |
|||
<el-table-column prop="jingwangId" label="精网号" width="300" /> |
|||
<el-table-column label="操作" > |
|||
<template #default="scope"> |
|||
<el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 底部操作区域 --> |
|||
<div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|||
<el-button type="danger" @click="batchDelete">批量删除</el-button> |
|||
<div style="display: flex; align-items: center;"> |
|||
<span style="margin-right: 15px;">共{{ total }}条</span> |
|||
<el-select v-model="pageSize" style="width: 120px; margin-right: 15px;"> |
|||
<el-option label="10条/页" :value="10" /> |
|||
<el-option label="20条/页" :value="20" /> |
|||
<el-option label="50条/页" :value="50" /> |
|||
</el-select> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:total="total" |
|||
:page-size="pageSize" |
|||
v-model:current-page="currentPage" |
|||
/> |
|||
<el-input |
|||
v-model="jumpPage" |
|||
style="width: 80px; margin-left: 15px; margin-right: 10px;" |
|||
placeholder="页码" |
|||
/> |
|||
<el-button type="primary" @click="goToPage">前往</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-card> |
|||
|
|||
<el-dialog |
|||
v-model="centerDialogVisible" |
|||
title="添加中奖用户" |
|||
width="500" |
|||
align-center |
|||
> |
|||
<el-form ref="addForm" :model="winuser" label-width="80px"> |
|||
<el-form-item label="姓名" prop="name"> |
|||
<el-input v-model="winuser.name" placeholder="请输入中奖用户姓名" /> |
|||
</el-form-item> |
|||
<el-form-item label="精网号" prop="jingwangId"> |
|||
<el-input v-model="winuser.jingwangId" placeholder="请输入中奖用户精网号" @input="handleJingwangIdInput"/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="cancel">取消</el-button> |
|||
<el-button type="primary" @click="addwinUser"> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
|
|||
const router = useRouter() |
|||
const centerDialogVisible = ref(false) |
|||
// 用户数据 |
|||
const users = ref([ |
|||
{ |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666' |
|||
}, |
|||
]) |
|||
|
|||
// 搜索文本 |
|||
|
|||
const searchData = ref({ |
|||
name: '', |
|||
jingwangId: '', |
|||
}) |
|||
// 分页相关 |
|||
const currentPage = ref(1) |
|||
const pageSize = ref(10) |
|||
const jumpPage = ref('') |
|||
const total = computed(() => users.value.length) |
|||
|
|||
// 过滤后的用户数据 |
|||
const filteredUsers = computed(() => { |
|||
// 实际项目中这里会有搜索过滤逻辑 |
|||
const start = (currentPage.value - 1) * pageSize.value |
|||
const end = start + pageSize.value |
|||
return users.value.slice(start, end) |
|||
}) |
|||
|
|||
const winuser=ref({ |
|||
name: '', |
|||
jingwangId: '', |
|||
}) |
|||
|
|||
// 删除用户 |
|||
const deleteUser = (user) => { |
|||
const index = users.value.findIndex(u => u.id === user.id) |
|||
if (index !== -1) { |
|||
users.value.splice(index, 1) |
|||
} |
|||
} |
|||
|
|||
// 批量删除 |
|||
const batchDelete = () => { |
|||
// 实际项目中这里会有批量删除逻辑 |
|||
console.log('执行批量删除') |
|||
} |
|||
|
|||
//添加用户 |
|||
const addUser = () => { |
|||
// 实际添加用户逻辑 |
|||
centerDialogVisible.value = true |
|||
} |
|||
|
|||
//取消添加 |
|||
const cancel = () => { |
|||
centerDialogVisible.value = false |
|||
winuser.value ={ |
|||
name: '', |
|||
jingwangId: '' |
|||
} |
|||
} |
|||
//添加活动 |
|||
const addwinUser = () => { |
|||
centerDialogVisible.value = false |
|||
//TODO: 添加活动逻辑 |
|||
winuser.value ={ |
|||
name: '', |
|||
jingwangId: '' |
|||
} |
|||
} |
|||
|
|||
// 导入Excel |
|||
const importExcel = () => { |
|||
// 实际导入逻辑 |
|||
console.log('导入Excel') |
|||
} |
|||
const goBack = () => { |
|||
router.back() |
|||
} |
|||
// 跳转到指定页 |
|||
const goToPage = () => { |
|||
const page = parseInt(jumpPage.value) |
|||
if (!isNaN(page) && page > 0 && page <= Math.ceil(total.value / pageSize.value)) { |
|||
currentPage.value = page |
|||
} |
|||
jumpPage.value = '' |
|||
} |
|||
|
|||
const handleJingwangIdInput = (value) => { |
|||
searchJingwangId.value = value.replace(/\D/g, '') |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.el-card { |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.el-table { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.el-pagination { |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,260 @@ |
|||
<!-- 由于本地图片在js中不会自动解析@，所以需要用方法getImageUrl()获取图片路径，但是如果图片用的绝对路径则不需要 --> |
|||
|
|||
<template> |
|||
<el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh; display: flex; flex-direction: column;"> |
|||
<div class="gift-management-container" style="flex: 1; overflow-y: auto;"> |
|||
<h2>礼品管理</h2> |
|||
<!-- 添加礼品和导入用户按钮 --> |
|||
<div class="action-buttons"> |
|||
<el-button type="primary" @click="showAddDialog">添加礼品</el-button> |
|||
<el-button @click="goToimportUsers">导入抽奖用户</el-button> |
|||
</div> |
|||
<div class="table-container" style="flex: 1; overflow-y: auto;"> |
|||
<el-table :data="currentPageData" style="width: 100%" class="gift-table"> |
|||
<el-table-column prop="id" label="ID" width="100" align="center"></el-table-column> |
|||
<el-table-column label="图片" width="200" align="center"> |
|||
<template #default="scope"> |
|||
<!-- 使用作用域插槽显示当前行的图片 --> |
|||
<img |
|||
v-if="scope.row.image" |
|||
:src="getImageUrl(scope.row.image)" |
|||
style="max-width: 100px; max-height: 30px;" |
|||
> |
|||
<el-icon v-else :size="20" color="#67C23A"> |
|||
<Check /> |
|||
</el-icon> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="名称" width="300" align="center"></el-table-column> |
|||
<el-table-column prop="level" label="等级" width="200" align="center"></el-table-column> |
|||
<el-table-column label="操作" align="center"> |
|||
<template #default="scope"> |
|||
<el-button size="big" @click="goToimportFixedList(scope.row)">导入内定名单</el-button> |
|||
<el-button size="big" @click="editGift(scope.row)">编辑</el-button> |
|||
<el-button size="big" type="danger" @click="deleteGift(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 礼品表格 --> |
|||
|
|||
</div> |
|||
|
|||
<!-- 分页控件 --> |
|||
|
|||
<el-pagination |
|||
class="pagination" |
|||
v-model:current-page="pagination.pageNum" |
|||
v-model:page-size="pagination.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="tableData.length" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
|
|||
<!-- 添加/编辑礼品对话框 --> |
|||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="40%"> |
|||
<el-form :model="form" label-width="100px"> |
|||
<el-form-item label="礼品名称"> |
|||
<el-input v-model="form.name" placeholder="请输入礼品名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="礼品等级"> |
|||
<el-select v-model="form.level" placeholder="请选择礼品等级"> |
|||
<el-option label="特等奖" value="特等奖"></el-option> |
|||
<el-option label="一等奖" value="一等奖"></el-option> |
|||
<el-option label="二等奖" value="二等奖"></el-option> |
|||
<el-option label="三等奖" value="三等奖"></el-option> |
|||
<el-option label="四等奖" value="四等奖"></el-option> |
|||
<el-option label="五等奖" value="五等奖"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="礼品图片"> |
|||
<el-upload |
|||
action="#" |
|||
list-type="picture-card" |
|||
:auto-upload="false" |
|||
:on-change="handleImageChange" |
|||
> |
|||
<el-icon><Plus /></el-icon> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">取消</el-button> |
|||
<el-button type="primary" @click="submitForm">确认</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue' |
|||
import { Check, Plus } from '@element-plus/icons-vue' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import { useRouter } from 'vue-router'; |
|||
import { usegiftFixedListStone } from '@/stone/giftFixedListStone'; |
|||
const router = useRouter(); |
|||
// 添加图片URL处理方法 |
|||
const getImageUrl = (path) => { |
|||
// 处理 @ 别名路径 |
|||
if (path.startsWith('@')) { |
|||
return path.replace('@', '/src') |
|||
} |
|||
return path |
|||
} |
|||
|
|||
const giftStore = usegiftFixedListStone(); |
|||
|
|||
// 表格数据 - 更新图片路径 |
|||
const tableData = ref([ |
|||
{ id: 1, image: '@/img/image.png', name: 'zimomo', level: '特等奖' }, |
|||
{ id: 2, image: '@/img/image.png', name: '高级耳机', level: '一等奖' }, |
|||
{ id: 3, image: '@/img/image.png', name: '智能手表', level: '二等奖' }, |
|||
{ id: 4, image: '@/img/image.png', name: '蓝牙音箱', level: '三等奖' }, |
|||
{ id: 5, image: '@/img/image.png', name: '充电宝', level: '四等奖' }, |
|||
{ id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' }, |
|||
{ id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' }, |
|||
{ id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' }, |
|||
{ id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' }, |
|||
{ id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' }, |
|||
{ id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' }, |
|||
{ id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' }, |
|||
{ id: 6, image: '@/img/image.png', name: 'U盘', level: '五等奖' }, |
|||
|
|||
]) |
|||
|
|||
// 分页相关 |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0 |
|||
}) |
|||
|
|||
// 计算属性 - 当前页数据 |
|||
const currentPageData = computed(() => { |
|||
const start = (pagination.value.pageNum - 1) * pagination.value.pageSize |
|||
const end = start + pagination.value.pageSize |
|||
return tableData.value.slice(start, end) |
|||
}) |
|||
|
|||
// 处理每页显示数量变化 |
|||
const handleSizeChange = (val) => { |
|||
pagination.value.pageSize = val |
|||
pagination.value.pageNum = 1 |
|||
} |
|||
|
|||
// 处理当前页变化 |
|||
const handleCurrentChange = (val) => { |
|||
pagination.value.pageNum = val |
|||
} |
|||
|
|||
// 对话框相关 |
|||
const dialogVisible = ref(false) |
|||
const dialogTitle = ref('添加礼品') |
|||
const form = ref({ |
|||
id: null, |
|||
name: '', |
|||
level: '', |
|||
image: null |
|||
}) |
|||
|
|||
const showAddDialog = () => { |
|||
dialogTitle.value = '添加礼品' |
|||
form.value = { id: null, name: '', level: '', image: null } |
|||
dialogVisible.value = true |
|||
} |
|||
|
|||
const editGift = (row) => { |
|||
dialogTitle.value = '编辑礼品' |
|||
form.value = { ...row } |
|||
dialogVisible.value = true |
|||
} |
|||
|
|||
const submitForm = () => { |
|||
if (!form.value.name || !form.value.level) { |
|||
ElMessage.error('请填写完整信息') |
|||
return |
|||
} |
|||
|
|||
if (form.value.id) { |
|||
// 编辑 |
|||
const index = gifts.value.findIndex(item => item.id === form.value.id) |
|||
if (index !== -1) { |
|||
gifts.value[index] = { ...form.value } |
|||
} |
|||
} else { |
|||
// 添加 |
|||
const newId = gifts.value.length > 0 ? Math.max(...gifts.value.map(item => item.id)) + 1 : 1 |
|||
gifts.value.push({ |
|||
id: newId, |
|||
...form.value |
|||
}) |
|||
} |
|||
|
|||
dialogVisible.value = false |
|||
ElMessage.success('操作成功') |
|||
} |
|||
|
|||
const deleteGift = (row) => { |
|||
ElMessageBox.confirm('确定要删除该礼品吗?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
gifts.value = gifts.value.filter(item => item.id !== row.id) |
|||
ElMessage.success('删除成功') |
|||
}).catch(() => { |
|||
// 取消操作 |
|||
}) |
|||
} |
|||
|
|||
const goToimportFixedList = (row) => { |
|||
giftStore.setFixedGiftName(row.name); |
|||
router.push({ name: 'importFixedList' }); |
|||
} |
|||
|
|||
const goToimportUsers = () => { |
|||
router.push({ name: 'importUsers' }); |
|||
} |
|||
|
|||
|
|||
const handleImageChange = (file) => { |
|||
form.value.image = file.raw |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.gift-management-container { |
|||
padding: 20px; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
min-height: 80vh; |
|||
} |
|||
|
|||
.pagination-container { |
|||
padding: 10px 20px; |
|||
background-color: #fff; |
|||
border-top: 1px solid #ebeef5; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.action-buttons { |
|||
margin-bottom: 20px; |
|||
} |
|||
.table-container { |
|||
max-height: 600px; /* 或者根据你的页面布局调整 */ |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
/* 添加图片样式 */ |
|||
img { |
|||
max-height: 80px; |
|||
object-fit: contain; |
|||
border-radius: 4px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,128 @@ |
|||
<!-- <template> |
|||
<div> |
|||
<el-button type="primary">众筹</el-button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> --> |
|||
|
|||
|
|||
<script setup> |
|||
import { |
|||
Promotion, |
|||
Location, |
|||
Menu as IconMenu, |
|||
Document, |
|||
Setting |
|||
} from '@element-plus/icons-vue' |
|||
import { useRouter } from 'vue-router' |
|||
const router = useRouter() |
|||
const handleOpen = (key, keyPath) => { |
|||
console.log('菜单打开:', key, keyPath) |
|||
} |
|||
const handleClose = (key, keyPath) => { |
|||
console.log('菜单关闭:', key, keyPath) |
|||
} |
|||
|
|||
const goToLevel = () => { |
|||
router.push({ name: 'zhongchoulevel' }) |
|||
} |
|||
const goToGift = () => { |
|||
router.push({ name: 'zhongchougift' }) |
|||
} |
|||
|
|||
const goToWinning = () => { |
|||
router.push({ name: 'zhongchouwinning' }) |
|||
} |
|||
|
|||
const goToActivity = () => { |
|||
router.push({ name: 'zhongchouactivity' }) |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container class="el-container"> |
|||
<!-- 左侧菜单 --> |
|||
<el-aside class="aside"> |
|||
<el-menu |
|||
active-text-color="#ffd04b" |
|||
background-color="#545c64" |
|||
class="el-menu-vertical-demo" |
|||
default-active="/index" |
|||
text-color="#fff" |
|||
@open="handleOpen" |
|||
@close="handleClose" |
|||
style="height: 100%;" |
|||
router |
|||
> |
|||
<el-menu-item index="/zhongchou"> |
|||
<el-icon><Promotion /></el-icon> |
|||
<span>后台管理系统</span> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item @click="goToLevel"> |
|||
<el-icon><location /></el-icon> |
|||
<span>等级管理</span> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item @click="goToGift"> |
|||
<el-icon><icon-menu /></el-icon> |
|||
<span>礼品管理</span> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item @click="goToWinning"> |
|||
<el-icon><document /></el-icon> |
|||
<span>中奖管理</span> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item @click="goToActivity"> |
|||
<el-icon><setting /></el-icon> |
|||
<span>众筹活动</span> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</el-aside> |
|||
|
|||
<el-main class="el-main"> |
|||
<router-view></router-view> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
a { |
|||
color: white; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.aside { |
|||
width: 220px; |
|||
border-right: 1px solid #ccc; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.common-layout { |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
width: 100vw; |
|||
} |
|||
|
|||
.el-container { |
|||
display: flex; |
|||
flex-direction: row; |
|||
height: 100%; |
|||
} |
|||
|
|||
.el-main { |
|||
flex: 1; /* 关键：自动撑满剩余空间 */ |
|||
padding: 20px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,300 @@ |
|||
<template> |
|||
<el-card style="margin-top:50px ; min-height: 90vh; max-height: 90vh;"> |
|||
<div class="gray-container"> |
|||
<h2>等级管理</h2> |
|||
<el-button type="primary" @click="showAdd = true">添加等级</el-button> |
|||
<div class="table-container" style="flex: 1; overflow-y: auto;"> |
|||
<el-table :data="currentPageData" style="width: 100%" :row-style="{ height: '55px' }"> |
|||
<el-table-column type="index" label="ID" width="150" align="center"/> |
|||
<el-table-column prop="gradeName" label="等级名称" width="200" align="center"/> |
|||
<el-table-column prop="num" label="数量" width="250" align="center"/> |
|||
<el-table-column prop="numPeople" label="每轮抽取人数" width="300" align="center"/> |
|||
<el-table-column prop="sort" label="排序" width="200" align="center"/> |
|||
<el-table-column fixed="right" prop="operation" label="操作" align="center"> |
|||
<template #default="scope"> |
|||
<div style="display: flex; gap: 10px;"> |
|||
|
|||
|
|||
<el-button type="primary" text @click="editInit(scope.row)">编辑</el-button> |
|||
|
|||
<el-button type="primary" text @click="showSet = true">设置多个</el-button> |
|||
<el-popconfirm title="确定将此用户删除吗？"> |
|||
<template #reference> |
|||
<el-button type="danger" text>删除</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> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination |
|||
class="pagination" |
|||
v-model:current-page="pagination.pageNum" |
|||
v-model:page-size="pagination.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="tableData.length" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</el-card> |
|||
|
|||
<el-dialog v-model="showAdd" :rules="rules" style="width:600px" align-center> |
|||
<el-header> |
|||
<h2>添加等级</h2> |
|||
</el-header> |
|||
<el-form :model="addObj" :rules="rules" ref="addForm"> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">等级名称：</span><el-input |
|||
v-model="addObj.gradeName" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">数量：</span><el-input |
|||
v-model="addObj.num" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">每轮抽取人数：</span><el-input |
|||
v-model="addObj.numPeople" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">排序：</span><el-input |
|||
v-model="addObj.sort" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer" style="text-align: right; margin-top:10px"> |
|||
<el-button @click="showAdd = false">取消</el-button> |
|||
<el-button type="primary" @click="showAdd = false"><!-- 改一下 --> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showEdit" :rules="rules" style="width:600px" align-center> |
|||
<el-header> |
|||
<h2>编辑等级</h2> |
|||
</el-header> |
|||
<el-form :model="editObj" :rules="rules" ref="addForm"> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">等级名称：</span><el-input |
|||
v-model="editObj.gradeName" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">数量：</span><el-input |
|||
v-model="editObj.num" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">每轮抽取人数：</span><el-input |
|||
v-model="editObj.numPeople" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">排序：</span><el-input |
|||
v-model="editObj.sort" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer" style="text-align: right; margin-top:10px"> |
|||
<el-button @click="showEdit = false">取消</el-button> |
|||
<el-button type="primary" @click="showEdit = false"><!-- 改一下 --> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showSet" :rules="rules" style="width:600px" align-center> |
|||
<el-header> |
|||
<h2>设置多个</h2> |
|||
</el-header> |
|||
<el-form :model="setObj" :rules="rules" ref="addForm"> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">等级名称：</span><el-input |
|||
v-model="setObj.gradeName" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">数量：</span><el-input |
|||
v-model="setObj.num" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">每轮抽取人数：</span><el-input |
|||
v-model="setObj.numPeople" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">排序：</span><el-input |
|||
v-model="setObj.sort" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer" style="text-align: right; margin-top:10px"> |
|||
<el-button @click="showSet = false">取消</el-button> |
|||
<el-button type="primary" @click="showSet = false"><!-- 改一下 --> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup> |
|||
import { ref,computed ,reactive, watch, onMounted } from 'vue' |
|||
const showAdd = ref(false) |
|||
const showEdit = ref(false) |
|||
const showSet = ref(false) |
|||
const addObj = ref({ |
|||
gradeName: '', |
|||
num: 0, |
|||
numPeople: 0, |
|||
sort: 0 |
|||
}) |
|||
const editObj = ref({})// 要回显 |
|||
const setObj = ref({}) |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0 |
|||
}) |
|||
|
|||
// 计算属性 - 当前页数据 |
|||
const currentPageData = computed(() => { |
|||
const start = (pagination.value.pageNum - 1) * pagination.value.pageSize |
|||
const end = start + pagination.value.pageSize |
|||
return tableData.value.slice(start, end) |
|||
}) |
|||
|
|||
// 处理每页显示数量变化 |
|||
const handleSizeChange = (val) => { |
|||
pagination.value.pageSize = val |
|||
pagination.value.pageNum = 1 |
|||
} |
|||
|
|||
// 处理当前页变化 |
|||
const handleCurrentChange = (val) => { |
|||
pagination.value.pageNum = val |
|||
} |
|||
|
|||
const editInit = function (row) { |
|||
editObj.value = row |
|||
showEdit.value = true |
|||
} |
|||
const tableData = ref([ |
|||
{ |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
} |
|||
]) |
|||
</script> |
|||
<style scoped> |
|||
.marginTop { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.gray-container { |
|||
width: 100%; /* 宽度自适应 */ |
|||
background-color: #ffffff; /* 浅灰色背景 */ |
|||
padding: 20px; /* 内边距 */ |
|||
box-sizing: border-box; /* 包含内边距在总宽度内 */ |
|||
min-height: 80vh; /* 设置最小高度 */ |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.table-container { |
|||
max-height: 600px; /* 或者根据你的页面布局调整 */ |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,253 @@ |
|||
<!-- 0特等奖 1一等奖 以此类推 --> |
|||
<template> |
|||
<el-card style="margin-top: 50px ; min-height: 90vh; max-height: 90vh;"> |
|||
|
|||
<!-- 返回按钮 --> |
|||
|
|||
<!-- 搜索栏 --> |
|||
<div class="gray-container"> |
|||
<h2>中奖管理</h2> |
|||
<el-form :inline="true" class="search-bar"> |
|||
<el-form-item label="姓名"> |
|||
<el-input v-model="searchData.name" placeholder="请输入姓名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="精网号"> |
|||
<el-input |
|||
v-model="searchData.jingwangId" |
|||
placeholder="请输入精网号" |
|||
@input="handleJingwangIdInput" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="中奖等级"> |
|||
<el-select v-model="searchData.prizeLevel" placeholder="请选择" class="prize-level-select"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="特等奖" value="0"></el-option> |
|||
<el-option label="一等奖" value="1"></el-option> |
|||
<!-- 其他选项... --> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary">搜索</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="handleReset">重置</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleExport">导出数据</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<!-- 表格 --> |
|||
<div class="table-container"> |
|||
<el-table :data="currentPageData" style="width: 100%" :row-style="{ height: '55px' }"> |
|||
<el-table-column prop="id" label="ID" width="100" align="center"></el-table-column> |
|||
<el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column> |
|||
<el-table-column prop="jingwangId" label="精网号" width="250" align="center"></el-table-column> |
|||
<!-- <el-table-column prop="prizeLevel" label="中奖等级" width="200" align="center"></el-table-column> --> |
|||
<el-table-column label="中奖等级" width="200" align="center"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.prizeLevel == '0' ">特等奖</span> |
|||
<span v-if="scope.row.prizeLevel == '1' ">一等奖</span> |
|||
<span v-if="scope.row.prizeLevel == '2' ">二等奖</span> |
|||
<span v-if="scope.row.prizeLevel == '3' ">三等奖</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="prizeItem" label="所中礼品" width="300" align="center"></el-table-column> |
|||
<el-table-column prop="prizeTime" label="中奖时间" align="center"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="tableData.length" |
|||
> |
|||
</el-pagination> |
|||
|
|||
</el-card> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
|
|||
const router = useRouter() |
|||
|
|||
// 响应式数据 |
|||
const searchData = ref({ |
|||
name: '', |
|||
jingwangId: '', |
|||
prizeLevel: '' |
|||
}) |
|||
|
|||
const tableData = ref([ |
|||
{ |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, { |
|||
id: 1, |
|||
name: '张家伟', |
|||
jingwangId: '90047666', |
|||
prizeLevel: '0', |
|||
prizeItem: 'zimomo', |
|||
prizeTime: '2025-07-12 14:05:30' |
|||
}, |
|||
// 可以继续添加更多数据... |
|||
]) |
|||
|
|||
const currentPage = ref(1) |
|||
const pageSize = ref(10) |
|||
|
|||
// 当前页数据计算属性 |
|||
const currentPageData = computed(() => { |
|||
const start = (currentPage.value - 1) * pageSize.value |
|||
const end = start + pageSize.value |
|||
return tableData.value.slice(start, end) |
|||
}) |
|||
|
|||
|
|||
// const currentPageData = computed(() => { |
|||
// const start = (currentPage.value - 1) * pageSize.value |
|||
// const end = start + pageSize.value |
|||
// return tableData.value.slice(start, end) |
|||
// }) |
|||
|
|||
|
|||
|
|||
// 返回上一页 |
|||
const goBack = () => { |
|||
router.back() |
|||
} |
|||
|
|||
// 导出数据 |
|||
const handleExport = () => { |
|||
console.log('Export Data') |
|||
} |
|||
|
|||
// 分页 size 改变 |
|||
const handleSizeChange = (val) => { |
|||
pageSize.value = val |
|||
currentPage.value = 1 |
|||
} |
|||
|
|||
// 当前页改变 |
|||
const handleCurrentChange = (val) => { |
|||
currentPage.value = val |
|||
} |
|||
|
|||
// 输入精网号处理 |
|||
const handleJingwangIdInput = (value) => { |
|||
searchJingwangId.value = value.replace(/\D/g, '') |
|||
} |
|||
|
|||
// 重置搜索条件 |
|||
const handleReset = () => { |
|||
searchJingwangId.value = '' |
|||
searchName.value = '' |
|||
searchPrizeLevel.value = '' |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.info-bar { |
|||
margin: 10px 0; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.search-bar { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.prize-level-select { |
|||
width: 200px; /* 调整中奖等级选择框的宽度 */ |
|||
} |
|||
|
|||
.table-container { |
|||
height: 600px; /* 根据需要调整高度 */ |
|||
overflow-y: auto; /* 启用垂直滚动条 */ |
|||
} |
|||
|
|||
.gray-container { |
|||
width: 100%; /* 宽度自适应 */ |
|||
background-color: #ffffff; /* 浅灰色背景 */ |
|||
padding: 20px; /* 内边距 */ |
|||
box-sizing: border-box; /* 包含内边距在总宽度内 */ |
|||
min-height: 80vh; /* 设置最小高度 */ |
|||
overflow-x: hidden; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,14 @@ |
|||
// vite.config.js
|
|||
import { defineConfig } from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
import path from 'path' // 需要引入 path 模块
|
|||
|
|||
export default defineConfig({ |
|||
plugins: [vue()], |
|||
resolve: { |
|||
alias: { |
|||
'@': path.resolve(__dirname, './src') // 将 @ 映射为 src 目录
|
|||
}, |
|||
extensions: ['.js', '.vue', '.json', '.mjs'] // 确保支持 .js 文件
|
|||
} |
|||
}) |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue