init
continuous-integration/drone Build is failing
Details
continuous-integration/drone Build is failing
Details
commit
39c7f0efdf
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
pnpm lint
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
# 设置基础镜像
|
||||
FROM nginx
|
||||
#设置CTS时区
|
||||
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone
|
||||
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
|
||||
COPY ./dist /usr/share/nginx/html/
|
||||
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
|
||||
COPY default.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 8092
|
||||
CMD ["nginx","-g","daemon off;"]
|
||||
@ -0,0 +1,23 @@
|
||||
server {
|
||||
listen 8092;
|
||||
server_name localhost;
|
||||
|
||||
#charset koi8-r;
|
||||
access_log /var/log/nginx/host.access.log main;
|
||||
error_log /var/log/nginx/error.log error;
|
||||
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
#error_page 404 /404.html;
|
||||
|
||||
# redirect server error pages to the static page /50x.html
|
||||
#
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/title.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>预约管理端</title>
|
||||
<script>
|
||||
// 解决 global 未定义问题
|
||||
if (typeof global === 'undefined') {
|
||||
window.global = window;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "venue_reservation_manage",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/",
|
||||
"prepare": "husky install",
|
||||
"lint-staged": "lint-staged"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"@stomp/stompjs": "^7.1.1",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"axios": "^1.6.8",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.7.2",
|
||||
"epic-spinners": "^2.0.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"pinia": "^2.1.7",
|
||||
"sockjs-client": "^1.6.1",
|
||||
"stompjs": "^2.3.3",
|
||||
"vue": "^3.4.21",
|
||||
"vue-echarts": "^7.0.3",
|
||||
"vue-router": "^4.3.0",
|
||||
"vue3-websocket": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.8.0",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vue/eslint-config-prettier": "^9.0.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"husky": "^8.0.0",
|
||||
"lint-staged": "^15.2.2",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"prettier": "^3.2.5",
|
||||
"sass": "^1.77.0",
|
||||
"unplugin-auto-import": "^0.17.5",
|
||||
"unplugin-vue-components": "^0.27.0",
|
||||
"vite": "^5.2.8"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,ts,vue}": [
|
||||
"eslint --fix"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
@ -0,0 +1,22 @@
|
||||
#!/bin/sh
|
||||
# 定义应用组名
|
||||
group_name='nnzmr'
|
||||
# 定义应用名称
|
||||
app_name='venue_reservation_manage'
|
||||
# 定义应用版本
|
||||
app_version='latest'
|
||||
echo '----copy jar----'
|
||||
docker stop ${app_name}
|
||||
echo '----stop container----'
|
||||
docker rm ${app_name}
|
||||
echo '----rm container----'
|
||||
docker rmi ${group_name}/${app_name}:${app_version}
|
||||
echo '----rm image----'
|
||||
# 打包编译docker镜像
|
||||
docker build -t ${group_name}/${app_name}:${app_version} .
|
||||
echo '----build image----'
|
||||
docker run -p 8092:8092 --name ${app_name} \
|
||||
-e TZ="Asia/Shanghai" \
|
||||
-v /etc/localtime:/etc/localtime \
|
||||
-d ${group_name}/${app_name}:${app_version}
|
||||
echo '----start container----'
|
||||
@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
// 在 Vue3 CompositionAPI 中
|
||||
// 获取路由对象 router -> const router = useRouter()
|
||||
// 获取路由参数 route -> const route = useRoute()
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view></router-view>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,12 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取管理的场馆信息
|
||||
export const QueryService = (id) => request.get('/admin/query?userId=' + id)
|
||||
|
||||
// 管理员添加场馆信息
|
||||
export const manageService = (formData) =>
|
||||
request.post('/admin/manage', formData)
|
||||
|
||||
// 管理员移除场馆信息
|
||||
export const cancelService = (formData) =>
|
||||
request.post('/admin/cancel', formData)
|
||||
@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 管理员查询敏感词列表
|
||||
export const CommentQueryService = (data) =>
|
||||
request.post('/comment/admin', data)
|
||||
|
||||
// 管理员撤回评论
|
||||
export const CommentWithdrawService = (id) =>
|
||||
request.get(`/comment/withdraw/${id}`)
|
||||
@ -0,0 +1,4 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 物理设备加载
|
||||
export const getLatestDevices = () => request.get('/device/latest')
|
||||
@ -0,0 +1,19 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取热点数据
|
||||
export const hotQueryService = (data) => request.post('hot/query', data)
|
||||
|
||||
// 添加热点数据
|
||||
export const hotAddService = (data) => request.post('hot/create', data)
|
||||
|
||||
// 修改热点数据
|
||||
export const hotUpdateService = (data) => request.post('hot/update', data)
|
||||
|
||||
// 上传图片
|
||||
export const hotImg = (formData) => request.post('hot/upload', formData)
|
||||
|
||||
// 删除
|
||||
export const hotDelService = (id) => request.get('hot/remove?id=' + id)
|
||||
|
||||
// 获取营业额
|
||||
export const MoneyService = () => request.get('hot/money')
|
||||
@ -0,0 +1,65 @@
|
||||
import request from '@/utils/request'
|
||||
import axios from 'axios'
|
||||
import { baseURL } from '@/utils/request'
|
||||
|
||||
// 获取场地信息
|
||||
export const informationQueryService = (data) =>
|
||||
request.post('/information/query', data)
|
||||
|
||||
// 添加场地信息
|
||||
export const informationCreateService = (data) =>
|
||||
request.post('/information/create', data)
|
||||
|
||||
// 修改场地信息
|
||||
export const informationUpdateService = (data) =>
|
||||
request.post('/information/update', data)
|
||||
|
||||
// 修改场地价格
|
||||
export const moneyUpdateService = (data) =>
|
||||
request.post('/information/money', data)
|
||||
|
||||
// 获取场地的分类列表
|
||||
export const typeQueryService = () => request.get('/information/classify')
|
||||
|
||||
// 获取场地二维码信息
|
||||
export const codeQueryService = () => request.get('/information/code')
|
||||
|
||||
// 上传场地照片
|
||||
export const informationImgUploadService = (formData) =>
|
||||
request.post('/information/img', formData)
|
||||
|
||||
// 获取场地的所有分类
|
||||
export const typeListService = () => request.get('/information/types')
|
||||
|
||||
// 移除场地信息
|
||||
export const informationRemoveService = (id) =>
|
||||
request.get('/information/remove?id=' + id)
|
||||
|
||||
// 下载二维码图片
|
||||
export const QRDownload = async (id, name) => {
|
||||
try {
|
||||
const response = await axios.get(baseURL + '/information/qr?id=' + id, {
|
||||
responseType: 'blob'
|
||||
})
|
||||
// 创建下载链接
|
||||
const url = window.URL.createObjectURL(response.data)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = name + '.png'
|
||||
a.click()
|
||||
|
||||
// 释放 URL 对象
|
||||
window.URL.revokeObjectURL(url)
|
||||
} catch (error) {
|
||||
console.error('下载出错:', error)
|
||||
alert('文件下载失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取某个场馆下的所有场地信息
|
||||
export const informationListService = (id) =>
|
||||
request.get('/information/detail?type_id=' + id)
|
||||
|
||||
// 获取某个场地的可用时间集合
|
||||
export const timeUseService = (data) =>
|
||||
request.post('/information/condition', data)
|
||||
@ -0,0 +1,5 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取系统日志信息
|
||||
export const logQueryService = (data, key) =>
|
||||
request.post('/log/query?key=' + key, data)
|
||||
@ -0,0 +1,13 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取提问列表
|
||||
export const questionQueryService = (data) =>
|
||||
request.post('/question/page', data)
|
||||
|
||||
// 加载回复数据
|
||||
export const replyQueryService = (id) =>
|
||||
request.get('/reply/view?questionId=' + id)
|
||||
|
||||
// 提交问题
|
||||
export const questionSubmitService = (data) =>
|
||||
request.post('/question/create', data)
|
||||
@ -0,0 +1,13 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 提交预约
|
||||
export const reservationSubmitService = (data) =>
|
||||
request.post('/reservation/create', data)
|
||||
|
||||
// 查询预约记录
|
||||
export const recordQueryService = (data) =>
|
||||
request.post('/reservation/query', data)
|
||||
|
||||
// 获取预约数据
|
||||
export const dataQueryService = (time) =>
|
||||
request.get(`/reservation/data?time=${time}`)
|
||||
@ -0,0 +1,4 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取单位数据
|
||||
export const collegeQueryService = () => request.get('/school/college')
|
||||
@ -0,0 +1,37 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询时间段
|
||||
export const slotPageService = (data) => request.post('/slot/page', data)
|
||||
|
||||
// 查询时间段下的可用场地信息
|
||||
export const venuesQuery = (id) => request.get('/slot/venue?id=' + id)
|
||||
|
||||
// 添加禁用时间段
|
||||
export const slotAdd = (data) => request.post('/slot/add', data)
|
||||
|
||||
// 向禁用时间段下添加场地信息
|
||||
export const slotSet = (formData) => request.post('/slot/set', formData)
|
||||
|
||||
// 查询某禁用时间段下的已添加场地信息
|
||||
export const venuesInquire = (id) => request.get('/slot/inquire?slotId=' + id)
|
||||
|
||||
// 移除场地数据
|
||||
export const slotDel = (formData) => request.post('/slot/del', formData)
|
||||
|
||||
// 查询时间段下，可添加的场地信息
|
||||
export const venueGetService = (id) => request.get('/time/get?id=' + id)
|
||||
|
||||
// 移除当前时间段下的场地
|
||||
export const venueDeleteService = (fromData) =>
|
||||
request.post('/time/delete', fromData)
|
||||
|
||||
// 向当前时间段添加场地
|
||||
export const venueAddService = (fromData) => request.post('/time/add', fromData)
|
||||
|
||||
// 添加时间段
|
||||
export const timeAddService = (fromData) =>
|
||||
request.post('/time/create', fromData)
|
||||
|
||||
// 移除时间段
|
||||
export const timeRemoveService = (id) =>
|
||||
request.get('/time/remove?timeId=' + id)
|
||||
@ -0,0 +1,26 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取场馆信息
|
||||
export const typeQueryService = (data) => request.post('/type/queryAll', data)
|
||||
|
||||
// 修改场馆信息
|
||||
export const typeUpdateService = (data) => request.post('/type/update', data)
|
||||
|
||||
// 添加场馆信息
|
||||
export const typeCreateService = (data) => request.post('/type/create', data)
|
||||
|
||||
// 获取场馆照片资源
|
||||
export const typeImgService = (tid) => request.get('/type/data?tid=' + tid)
|
||||
|
||||
// 上传场馆照片
|
||||
export const siteImgUploadService = (formData) =>
|
||||
request.post('/type/upload', formData)
|
||||
|
||||
// 获取场馆名称列表
|
||||
export const typeNameService = () => request.get('/type/name')
|
||||
|
||||
// 移除场馆信息
|
||||
export const typeDelService = (tid) => request.get('/type/remove?id=' + tid)
|
||||
|
||||
// 查询某个场馆信息
|
||||
export const typeOneService = (id) => request.get(`/type/select/${id}`)
|
||||
@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 超级管理员登录
|
||||
export const userLoginService = ({ account, passwd }) => {
|
||||
return request.post('/user/admin', { account, passwd })
|
||||
}
|
||||
|
||||
// 获取用户列表
|
||||
export const userListService = (data) => request.post('/user/list', data)
|
||||
|
||||
// 查看用户的详细信息
|
||||
export const userDetailService = (id) => request.get('/user/detail?id=' + id)
|
||||
|
||||
// 获取用户的数量
|
||||
export const userNum = () => request.get('/user/num')
|
||||
|
||||
// 充值
|
||||
export const userRechargeService = (formData) =>
|
||||
request.post('/user/recharge', formData)
|
||||
|
||||
// 获取管理员列表
|
||||
export const adminListService = (data) => request.post('/user/admininfo', data)
|
||||
|
||||
// 添加管理员信息
|
||||
export const adminAddService = (data) => request.post('/user/create', data)
|
||||
|
||||
// 移除管理员信息
|
||||
export const adminDelService = (id) => request.get('/user/remove?userId=' + id)
|
||||
|
||||
// 修改密码
|
||||
export const PasswdService = (data) => request.post('/user/passwd', data)
|
||||
|
||||
// 获取用户信息
|
||||
export const UserInfoService = (id) => request.get(`/user/info/${id}`)
|
||||
|
||||
// 上传头像图片
|
||||
export const ImgUploadService = (formData) =>
|
||||
request.post('/user/upload', formData)
|
||||
|
||||
// 修改用户信息
|
||||
export const UpdateService = (data) => request.post('/user/update', data)
|
||||
|
||||
// qq邮箱重置
|
||||
export const ResetService = (data) => request.post('/user/reset', data)
|
||||
@ -0,0 +1,16 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询敏感词列表
|
||||
export const WordQueryService = (data) => request.post('/word/query', data)
|
||||
|
||||
// 添加敏感词
|
||||
export const WordCreateService = (data) => request.post('/word/create', data)
|
||||
|
||||
// 修改敏感词
|
||||
export const WordUpdateService = (data) => request.post('/word/update', data)
|
||||
|
||||
// 移除敏感词
|
||||
export const WordRemoveService = (id) => request.delete('/word/remove?id=' + id)
|
||||
|
||||
// 启用 or 禁用 敏感词
|
||||
export const WordSetService = (id) => request.get(`/word/set/${id}`)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 658 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,20 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* fade-slide */
|
||||
.fade-slide-leave-active,
|
||||
.fade-slide-enter-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
transform: translateX(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* fade-slide */
|
||||
.fade-slide-leave-active,
|
||||
.fade-slide-enter-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
transform: translateX(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,396 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores'
|
||||
import DefaultImg from '@/assets/default.png'
|
||||
const userStore = useUserStore()
|
||||
const userInfo = ref({ ...userStore.user })
|
||||
const router = useRouter()
|
||||
const showDropdown = ref(false)
|
||||
// 点击页面其他区域关闭下拉菜单
|
||||
const handleClickOutside = (event) => {
|
||||
const profileElement = document.querySelector('.user-profile')
|
||||
const dropdownElement = document.querySelector('.user-dropdown')
|
||||
|
||||
if (profileElement && dropdownElement) {
|
||||
if (
|
||||
!profileElement.contains(event.target) &&
|
||||
!dropdownElement.contains(event.target)
|
||||
) {
|
||||
showDropdown.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加点击事件监听
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
// 组件卸载时移除事件监听
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
// 退出登录
|
||||
const logout = () => {
|
||||
showDropdown.value = false
|
||||
ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
userStore.setToken('')
|
||||
userStore.setUser({})
|
||||
// 跳转到登录页
|
||||
router.push('/login')
|
||||
ElMessage.success('已退出登录')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 公共头部 -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">🏫</span>
|
||||
<span class="logo-text">校园 e 站通</span>
|
||||
</div>
|
||||
|
||||
<div class="main-nav">
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item">
|
||||
<router-link to="/mobile/index" class="nav-link"
|
||||
>首页</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/mobile/record" class="nav-link"
|
||||
>我的订单</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/mobile/userinfo" class="nav-link"
|
||||
>个人信息</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/mobile/message" class="nav-link"
|
||||
>聊天窗</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link to="/mobile/question" class="nav-link"
|
||||
>我的提问</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="user-profile" @click="showDropdown = !showDropdown">
|
||||
<div class="user-avatar-container">
|
||||
<img
|
||||
class="user-avatar"
|
||||
:src="userInfo.isUpload === 1 ? userInfo.avatar : DefaultImg"
|
||||
alt="用户头像"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户下拉菜单 -->
|
||||
<div v-show="showDropdown" class="user-dropdown">
|
||||
<div class="dropdown-menu">
|
||||
<el-button type="text" class="logout-btn" @click.stop="logout">
|
||||
<i class="el-icon-switch-button" style="margin-right: 8px"></i
|
||||
>退出登录
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主体内容插槽 -->
|
||||
<main class="main-content">
|
||||
<slot></slot>
|
||||
</main>
|
||||
|
||||
<!-- 公共底部 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-info">
|
||||
<div class="footer-logo">
|
||||
<span class="logo-icon">🏫</span>
|
||||
<span class="logo-text">华交场馆管控一体化平台</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-contact">
|
||||
<p>© 2025 华东交通大学 All Rights Reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 全局样式 */
|
||||
:root {
|
||||
--primary-color: #1e40af;
|
||||
--secondary-color: #3b82f6;
|
||||
--text-color: #334155;
|
||||
--bg-gradient: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
|
||||
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 应用容器 */
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #6c83a1 100%);
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
background: var(--bg-gradient);
|
||||
color: white;
|
||||
padding: 16px 0;
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.logo-text {
|
||||
color: black;
|
||||
}
|
||||
/* 新增的顶部导航 */
|
||||
.main-nav {
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 用户头像区域 */
|
||||
.user-avatar-container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user-avatar-container:hover {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 用户下拉菜单 */
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 32px;
|
||||
width: 180px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.2s ease-in-out;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background-color: #fef2f2;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
max-width: 1550px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
.footer {
|
||||
background: var(--bg-gradient);
|
||||
color: white;
|
||||
padding: 32px 0 24px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 8px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.footer-contact p {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 1024px) {
|
||||
.header-content {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
order: 3;
|
||||
margin: 16px 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,6 @@
|
||||
<script setup>
|
||||
// import { ref } from 'vue'
|
||||
</script>
|
||||
<template>
|
||||
<page-container title="首页"> </page-container>
|
||||
</template>
|
||||
@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
required: true,
|
||||
type: String
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<el-card class="page-container">
|
||||
<template #header>
|
||||
<div class="header">
|
||||
<span>{{ title }}</span>
|
||||
<div class="extra">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,200 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { Plus, Upload } from '@element-plus/icons-vue'
|
||||
import { siteImgUploadService } from '@/api/type'
|
||||
import { informationImgUploadService } from '@/api/information'
|
||||
import { hotImg } from '@/api/hot'
|
||||
import DefaultImg from '@/assets/cover.jpg'
|
||||
// 响应式处理
|
||||
const isMobile = ref(window.innerWidth < 768)
|
||||
|
||||
const handleResize = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const uploadRef = ref()
|
||||
const imgUrl = ref()
|
||||
const formData = new FormData()
|
||||
|
||||
const onUploadFile = (file) => {
|
||||
// 基于 FileReader 读取图片做预览
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file.raw)
|
||||
reader.onload = () => {
|
||||
imgUrl.value = reader.result
|
||||
}
|
||||
console.log(imgUrl)
|
||||
formData.append('file', file.raw)
|
||||
|
||||
// imgUrl.value = URL.createObjectURL(file.raw)
|
||||
}
|
||||
|
||||
// 组件对外暴露一个方法 open
|
||||
// tid -> 编号
|
||||
// tUrl -> 图片地址
|
||||
// type -> venue表示场馆 site表示场地 hot表示热点事件
|
||||
const typeValue = ref('')
|
||||
const open = (tid, tUrl, type) => {
|
||||
imgUrl.value = tUrl === null || tUrl === '' || tUrl === ' ' ? '' : tUrl
|
||||
typeValue.value = type
|
||||
formData.append('id', tid)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 向外暴露
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
// 上传图片
|
||||
const uploadPhoto = async () => {
|
||||
const isFile = formData.get('file')
|
||||
if (isFile !== null) {
|
||||
if (typeValue.value === 'venue') {
|
||||
/* 调用场馆上传照片接口 */
|
||||
await siteImgUploadService(formData)
|
||||
ElMessage.success('场馆照片上传成功')
|
||||
} else if (typeValue.value === 'site') {
|
||||
// 调用场地上传照片接口
|
||||
await informationImgUploadService(formData)
|
||||
ElMessage.success('场地照片上传成功')
|
||||
} else if (typeValue.value === 'hot') {
|
||||
// 调用热点上传照片接口
|
||||
await hotImg(formData)
|
||||
ElMessage.success('照片上传成功')
|
||||
} else {
|
||||
ElMessage.info('暂无信息')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
formData.delete('id')
|
||||
formData.delete('file')
|
||||
} else {
|
||||
ElMessage.error('请选择图片')
|
||||
}
|
||||
emit('success')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="上传图片"
|
||||
:width="isMobile ? '90%' : '40%'"
|
||||
:height="isMobile ? '80vh' : '80vh'"
|
||||
:center="true"
|
||||
:close-on-click-modal="false"
|
||||
:modal="true"
|
||||
:draggable="true"
|
||||
style="max-width: 1000px"
|
||||
>
|
||||
<div class="upload-container">
|
||||
<!-- 图片预览 -->
|
||||
<div class="preview-box">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
class="avatar-uploader"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="onUploadFile"
|
||||
>
|
||||
<img
|
||||
class="preview-img"
|
||||
:src="imgUrl !== '' ? imgUrl : DefaultImg"
|
||||
alt="预览图"
|
||||
/>
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
@click="uploadRef.$el.querySelector('input').click()"
|
||||
type="primary"
|
||||
:icon="Plus"
|
||||
size="large"
|
||||
style="margin: 0 15px"
|
||||
>
|
||||
选择图片
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
:icon="Upload"
|
||||
size="large"
|
||||
@click="uploadPhoto"
|
||||
>
|
||||
上传图片
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<style scoped>
|
||||
.upload-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
border: 2px dashed #dcdfe6;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f9f9f9;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.preview-img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.avatar-uploader:hover {
|
||||
border-color: #409eff;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
:deep(.el-upload) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
import { createApp } from 'vue'
|
||||
// 选择需要的组件[7](@ref)
|
||||
import '@/assets/main.scss'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
// 引入echarts
|
||||
import * as echarts from 'echarts'
|
||||
// 引入IconPark
|
||||
import '@icon-park/vue-next/styles/index.css'
|
||||
import pinia from '@/stores/index'
|
||||
|
||||
const app = createApp(App)
|
||||
// vue3 给原型上挂载属性
|
||||
app.config.globalProperties.$echarts = echarts
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
@ -0,0 +1,15 @@
|
||||
import { createPinia } from 'pinia'
|
||||
import persist from 'pinia-plugin-persistedstate'
|
||||
|
||||
const pinia = createPinia()
|
||||
|
||||
pinia.use(persist)
|
||||
|
||||
export default pinia
|
||||
|
||||
// 仓库统一导出
|
||||
// import { useUserStore } from './modules/user'
|
||||
// export { useUserStore }
|
||||
// 简写
|
||||
export * from './modules/user'
|
||||
export * from './modules/info'
|
||||
@ -0,0 +1,13 @@
|
||||
// stores/loading.js
|
||||
import { defineStore } from 'pinia'
|
||||
export const useLoadingStore = defineStore('loading', {
|
||||
state: () => ({ isLoading: false }),
|
||||
actions: {
|
||||
show() {
|
||||
this.isLoading = true
|
||||
},
|
||||
hide() {
|
||||
this.isLoading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,35 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 场地信息
|
||||
export const useInfoStore = defineStore(
|
||||
'big-info',
|
||||
() => {
|
||||
// 场馆 + 场地 基本信息
|
||||
const info = ref({})
|
||||
const setInfo = (obj) => {
|
||||
info.value = { ...obj }
|
||||
}
|
||||
// 预约信息（成功 or 失败）
|
||||
const responseInfo = ref({})
|
||||
const setResponseInfo = (obj) => {
|
||||
responseInfo.value = { ...obj }
|
||||
}
|
||||
// 订单信息
|
||||
const paymentInfo = ref({})
|
||||
const setPaymentInfo = (obj) => {
|
||||
paymentInfo.value = { ...obj }
|
||||
}
|
||||
return {
|
||||
info,
|
||||
responseInfo,
|
||||
paymentInfo,
|
||||
setInfo,
|
||||
setResponseInfo,
|
||||
setPaymentInfo
|
||||
}
|
||||
},
|
||||
{
|
||||
persist: true
|
||||
}
|
||||
)
|
||||
@ -0,0 +1,26 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 用户模块 token setToken removeToken
|
||||
export const useUserStore = defineStore(
|
||||
'big-user',
|
||||
() => {
|
||||
const user = ref({})
|
||||
const token = ref()
|
||||
const setUser = (obj) => {
|
||||
user.value = { ...obj }
|
||||
}
|
||||
const setToken = (obj) => {
|
||||
token.value = obj
|
||||
}
|
||||
return {
|
||||
user,
|
||||
token,
|
||||
setUser,
|
||||
setToken
|
||||
}
|
||||
},
|
||||
{
|
||||
persist: true
|
||||
}
|
||||
)
|
||||
@ -0,0 +1,22 @@
|
||||
import { dayjs } from 'element-plus'
|
||||
|
||||
export const formatTime = (time) => dayjs(time).format('YYYY-MM-DD')
|
||||
|
||||
export const formatDateTime = (time) =>
|
||||
dayjs(time).format('YYYY-MM-DD HH:mm:ss ')
|
||||
|
||||
// 时间字符串转换
|
||||
export const timeToNumber = (timeStr) => Number(timeStr.split(':')[0])
|
||||
|
||||
// 时间戳转化
|
||||
export const toTimestamp = (timeStr) => {
|
||||
// 创建 Date 对象
|
||||
const date = new Date(timeStr)
|
||||
|
||||
// 检查日期是否有效
|
||||
if (isNaN(date.getTime())) {
|
||||
throw new Error('Invalid date string')
|
||||
}
|
||||
// 返回时间戳（毫秒）
|
||||
return date.getTime()
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
// base64转图片格式
|
||||
export const base64ImgtoFile = (dataurl, filename = 'file') => {
|
||||
let arr = dataurl.split(',')
|
||||
console.log(arr)
|
||||
|
||||
let mime = arr[0].match(/:(.*?);/)[1]
|
||||
let suffix = mime.split('/')[1]
|
||||
let bstr = atob(arr[1])
|
||||
let n = bstr.length
|
||||
let u8arr = new Uint8Array(n)
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n)
|
||||
}
|
||||
return new File([u8arr], `${filename}.${suffix}`, {
|
||||
type: mime
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
import axios from 'axios'
|
||||
import { useUserStore } from '@/stores'
|
||||
import { ElMessage } from 'element-plus'
|
||||
// import router from '@/router'
|
||||
// const baseURL = 'https://cgyy.ecjtu.edu.cn/api'
|
||||
const baseURL = 'https://www.ruanjiansc.cn/api'
|
||||
// const baseURL = 'http://172.16.6.53:9020'
|
||||
// const baseURL = 'http://localhost:9020/api'
|
||||
|
||||
const instance = axios.create({
|
||||
// TODO 1. 基础地址，超时时间
|
||||
baseURL,
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
instance.interceptors.request.use(
|
||||
(config) => {
|
||||
// TODO 2. 携带token
|
||||
const useStore = useUserStore()
|
||||
if (useStore.token) {
|
||||
config.headers.Authorization = useStore.token
|
||||
}
|
||||
return config
|
||||
},
|
||||
(err) => Promise.reject(err)
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
instance.interceptors.response.use(
|
||||
(res) => {
|
||||
// TODO 3. 处理业务失败
|
||||
// TODO 4. 摘取核心响应数据
|
||||
if (res.data.code === 200) {
|
||||
// 成功
|
||||
return res
|
||||
}
|
||||
// 失败返回
|
||||
if (res.data.code === 201) {
|
||||
ElNotification({
|
||||
title: 'Warning',
|
||||
message: res.data.message,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
// 服务异常
|
||||
if (res.data.code === 500) {
|
||||
ElMessage.error('服务异常')
|
||||
}
|
||||
return Promise.reject(res.data)
|
||||
},
|
||||
(err) => {
|
||||
// 错误的默认情况，只要给提示
|
||||
ElMessage.error(err.response.data.message || '服务异常')
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
export default instance
|
||||
export { baseURL }
|
||||
@ -0,0 +1,83 @@
|
||||
import { Client } from '@stomp/stompjs'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 解决 global 未定义问题
|
||||
if (typeof global === 'undefined') {
|
||||
window.global = window
|
||||
}
|
||||
|
||||
export function useWebSocket() {
|
||||
const isConnected = ref(false)
|
||||
const userId = ref(`user_${Math.random().toString(36).substr(2, 9)}`)
|
||||
const broadcastMessages = ref([])
|
||||
const userMessages = ref([])
|
||||
let stompClient = null
|
||||
|
||||
// 连接WebSocket
|
||||
const connect = () => {
|
||||
const url = 'ws://localhost:9020/ws' // 端口改为9020
|
||||
stompClient = new Client({
|
||||
brokerURL: url,
|
||||
reconnectDelay: 5000,
|
||||
heartbeatIncoming: 4000,
|
||||
heartbeatOutgoing: 4000,
|
||||
onConnect: () => {
|
||||
isConnected.value = true
|
||||
|
||||
// 订阅广播频道
|
||||
stompClient.subscribe('/topic/broadcast', (message) => {
|
||||
broadcastMessages.value.push({
|
||||
content: message.body,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
})
|
||||
})
|
||||
|
||||
// 订阅个人频道
|
||||
stompClient.subscribe(`/user/queue/user`, (message) => {
|
||||
userMessages.value.push({
|
||||
content: message.body,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
})
|
||||
})
|
||||
},
|
||||
onStompError: (frame) => {
|
||||
console.error('Broker reported error: ' + frame.headers['message'])
|
||||
console.error('Additional details: ' + frame.body)
|
||||
},
|
||||
onWebSocketClose: () => {
|
||||
isConnected.value = false
|
||||
}
|
||||
})
|
||||
|
||||
stompClient.activate()
|
||||
}
|
||||
|
||||
// 断开连接
|
||||
const disconnect = () => {
|
||||
if (stompClient) {
|
||||
stompClient.deactivate()
|
||||
isConnected.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 清空广播消息
|
||||
const clearBroadcastMessages = () => {
|
||||
broadcastMessages.value = []
|
||||
}
|
||||
|
||||
// 清空用户消息
|
||||
const clearUserMessages = () => {
|
||||
userMessages.value = []
|
||||
}
|
||||
|
||||
return {
|
||||
broadcastMessages,
|
||||
userMessages,
|
||||
isConnected,
|
||||
userId,
|
||||
connect,
|
||||
disconnect,
|
||||
clearBroadcastMessages,
|
||||
clearUserMessages
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,143 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import { hotQueryService, hotDelService } from '@/api/hot'
|
||||
import PhotoShow from '@/components/PhotoShow.vue'
|
||||
import HotEdit from './components/HotEdit.vue'
|
||||
import PhotoUpdate from '@/components/PhotoUpdate.vue'
|
||||
import defaultImg from '@/assets/cover.jpg'
|
||||
const loading = ref(false)
|
||||
const hotList = ref()
|
||||
const params = ref({
|
||||
current: 1,
|
||||
size: 10
|
||||
})
|
||||
const total = ref(0)
|
||||
const getHotList = async () => {
|
||||
loading.value = true
|
||||
const {
|
||||
data: { data }
|
||||
} = await hotQueryService(params.value)
|
||||
hotList.value = data.list
|
||||
total.value = data.total
|
||||
loading.value = false
|
||||
}
|
||||
getHotList()
|
||||
// 图片放大
|
||||
const imgRef = ref()
|
||||
const imgPreview = (imgUrl) => {
|
||||
imgRef.value.open(imgUrl)
|
||||
}
|
||||
|
||||
// 编辑热点信息
|
||||
const editRef = ref()
|
||||
const onEdit = (row) => {
|
||||
editRef.value.open(row)
|
||||
}
|
||||
|
||||
// 上传图片
|
||||
const uploadRef = ref()
|
||||
const upload = (id, url) => {
|
||||
uploadRef.value.open(id, url, 'hot')
|
||||
}
|
||||
|
||||
// 删除记录
|
||||
const onDelete = (id) => {
|
||||
ElMessageBox.confirm('确认删除该条信息？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
await hotDelService(id)
|
||||
ElMessage.success('删除成功')
|
||||
getHotList()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const onCurrentChange = (current) => {
|
||||
params.value.current = current
|
||||
getHotList()
|
||||
}
|
||||
|
||||
const onSizeChange = (size) => {
|
||||
params.value.current = 1
|
||||
params.value.size = size
|
||||
getHotList()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<page-container title="轮播事件管理">
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="onEdit({ id: 0 })"
|
||||
>+ 添加活动
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格区域 -->
|
||||
<el-table :data="hotList" stripe v-loading="loading">
|
||||
<el-table-column label="场地照片" width="160px">
|
||||
<template #default="{ row }">
|
||||
<img
|
||||
style="
|
||||
height: 80px;
|
||||
width: 120px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
"
|
||||
:src="
|
||||
row.imgUrl !== null && row.imgUrl !== '' && row.imgUrl != ' '
|
||||
? row.imgUrl
|
||||
: defaultImg
|
||||
"
|
||||
:title="row.venueName"
|
||||
@click="imgPreview(row.imgUrl)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" prop="description"></el-table-column>
|
||||
<el-table-column label="添加时间">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.addTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="success" @click="onEdit(row)" title="编辑描述"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button link type="primary" @click="onDelete(row.id)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button link type="info" @click="upload(row.id, row.imgUrl)"
|
||||
>上传图片</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<template #empty>
|
||||
<el-empty description="无热点数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
v-model:current-page="params.current"
|
||||
v-model:page-size="params.size"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="jumper, total, sizes, prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
style="margin-top: 20px; justify-content: flex-end"
|
||||
/>
|
||||
</page-container>
|
||||
<!-- 图片预览框 -->
|
||||
<PhotoShow ref="imgRef"></PhotoShow>
|
||||
<!-- 事件编辑 -->
|
||||
<HotEdit ref="editRef" @success="onSizeChange(5)"></HotEdit>
|
||||
<!-- 上传图片 -->
|
||||
<PhotoUpdate ref="uploadRef" @success="onSizeChange(5)"></PhotoUpdate>
|
||||
</template>
|
||||
@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { CommentQueryService, CommentWithdrawService } from '@/api/comment'
|
||||
const params = ref({
|
||||
current: 1,
|
||||
size: 10
|
||||
})
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const commentList = ref([])
|
||||
const getCommentList = async () => {
|
||||
loading.value = true
|
||||
const {
|
||||
data: { data }
|
||||
} = await CommentQueryService(params.value)
|
||||
commentList.value = data.list
|
||||
total.value = data.total
|
||||
loading.value = false
|
||||
}
|
||||
getCommentList()
|
||||
const onCurrentChange = (current) => {
|
||||
params.value.current = current
|
||||
getCommentList()
|
||||
}
|
||||
const onSizeChange = (size) => {
|
||||
params.value.current = 1
|
||||
params.value.size = size
|
||||
getCommentList()
|
||||
}
|
||||
|
||||
const result = ref(false)
|
||||
const withDrawComment = async (row) => {
|
||||
ElMessageBox.confirm(
|
||||
row.status == 2 ? '即将撤回该条评论' : '恢复评论',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info'
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
const {
|
||||
data: { message }
|
||||
} = await CommentWithdrawService(row.id)
|
||||
ElNotification({
|
||||
title: '操作结果',
|
||||
message: message,
|
||||
type: 'success'
|
||||
})
|
||||
row.status = row.status === 2 ? 1 : 2
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 设置评论状态
|
||||
const changeStatus = () => {
|
||||
return result.value
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<page-container title="评论管理">
|
||||
<el-table :data="commentList" stripe v-loading="loading">
|
||||
<el-table-column prop="id" label="序号" width="80" />
|
||||
<el-table-column prop="content" label="评论内容" />
|
||||
<el-table-column prop="createTime" label="发布时间" />
|
||||
<el-table-column prop="updateTime" label="修改时间" />
|
||||
<el-table-column label="操作（是否撤回）">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="2"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#dcdfe6"
|
||||
active-text="已撤回"
|
||||
inactive-text="恢复"
|
||||
inline-prompt
|
||||
@click="withDrawComment(row)"
|
||||
:before-change="changeStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
v-model:current-page="params.current"
|
||||
v-model:page-size="params.size"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="jumper, total, sizes, prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
style="margin-top: 20px; justify-content: flex-end"
|
||||
/>
|
||||
</page-container>
|
||||
</template>
|
||||
@ -0,0 +1,248 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import defaultImg from '@/assets/cover.jpg'
|
||||
import {
|
||||
informationQueryService,
|
||||
informationRemoveService
|
||||
} from '@/api/information'
|
||||
import FieldEdit from './components/FiledEdit.vue'
|
||||
import MoneyEdit from './components/MoneyEdit.vue'
|
||||
import PhotoShow from '@/components/PhotoShow.vue'
|
||||
import PhotoUpdate from '@/components/PhotoUpdate.vue'
|
||||
import { typeNameService } from '@/api/type'
|
||||
import QRView from './components/QRView.vue'
|
||||
const loading = ref(false)
|
||||
const fieldList = ref()
|
||||
const total = ref(0)
|
||||
const params = ref({
|
||||
current: 1,
|
||||
size: 10,
|
||||
type: 0,
|
||||
key: ''
|
||||
})
|
||||
|
||||
// 场馆列表
|
||||
const typeList = ref([])
|
||||
const getTypeList = async () => {
|
||||
typeList.value = []
|
||||
|
||||
const {
|
||||
data: { data }
|
||||
} = await typeNameService()
|
||||
typeList.value.push({ label: '所有场馆', value: 0 })
|
||||
data.forEach((item) => {
|
||||
typeList.value.push({ label: item.vname, value: item.id })
|
||||
})
|
||||
}
|
||||
getTypeList()
|
||||
|
||||
const getFieldList = async () => {
|
||||
loading.value = true
|
||||
const {
|
||||
data: { data }
|
||||
} = await informationQueryService(params.value)
|
||||
loading.value = false
|
||||
fieldList.value = data.list
|
||||
total.value = data.total
|
||||
}
|
||||
getFieldList()
|
||||
|
||||
const onCurrentChange = (current) => {
|
||||
params.value.current = current
|
||||
getFieldList()
|
||||
}
|
||||
const onSizeChange = (size) => {
|
||||
params.value.current = 1
|
||||
params.value.size = size
|
||||
getFieldList()
|
||||
}
|
||||
const onReset = () => {
|
||||
params.value.status = -1
|
||||
params.value.key = ''
|
||||
params.value.type = 0
|
||||
onSizeChange(10)
|
||||
}
|
||||
|
||||
const fieldEditRef = ref()
|
||||
const onEdit = (row) => {
|
||||
fieldEditRef.value.open(row, typeList.value.slice(1, 4))
|
||||
}
|
||||
|
||||
const moneyEditRef = ref()
|
||||
const onSetMoney = (id, price) => {
|
||||
moneyEditRef.value.open(id, price)
|
||||
}
|
||||
|
||||
// 图片放大
|
||||
const imgRef = ref()
|
||||
const imgPreview = (imgUrl) => {
|
||||
imgRef.value.open(imgUrl)
|
||||
}
|
||||
|
||||
// 修改场地照片
|
||||
const imgUpdateRef = ref()
|
||||
const updateImg = (id, imgUrl) => {
|
||||
imgUpdateRef.value.open(id, imgUrl, 'site')
|
||||
}
|
||||
|
||||
// 移除场地信息
|
||||
const onDelete = (id) => {
|
||||
ElMessageBox.confirm('确认删除该条场地信息？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
await informationRemoveService(id)
|
||||
ElMessage.success('删除成功')
|
||||
getFieldList()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const viewRef = ref()
|
||||
const openQR = (id, url, name) => {
|
||||
viewRef.value.open(id, url, name)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<page-container title="场地信息列表">
|
||||
<!-- <img :src="imgValue" /> -->
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="onEdit">添加场地</el-button>
|
||||
</template>
|
||||
<!-- 表单区域 -->
|
||||
<el-form inline>
|
||||
<el-form-item label="">
|
||||
<el-input
|
||||
v-model="params.key"
|
||||
style="max-width: 600px"
|
||||
placeholder="请输入场地关键词"
|
||||
class="input-with-select"
|
||||
size="default"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select
|
||||
v-model="params.type"
|
||||
placeholder="所有场馆"
|
||||
style="width: 145px"
|
||||
@change="onSizeChange(10)"
|
||||
>
|
||||
<el-option
|
||||
v-for="(t, i) of typeList"
|
||||
:key="i"
|
||||
:label="t.label"
|
||||
:value="t.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="getFieldList()" :icon="Search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<hr />
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table :data="fieldList" stripe v-loading="loading">
|
||||
<el-table-column type="index" label="序号" width="55vw" />
|
||||
|
||||
<el-table-column label="场地照片">
|
||||
<template #default="{ row }">
|
||||
<img
|
||||
style="height: 100px; width: 120px; cursor: pointer"
|
||||
:src="
|
||||
row.imgUrl !== null && row.imgUrl !== '' && row.imgUrl != ' '
|
||||
? row.imgUrl
|
||||
: defaultImg
|
||||
"
|
||||
:title="row.venueName"
|
||||
@click="imgPreview(row.imgUrl)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="场地名称" prop="venueName">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" :underline="false">{{
|
||||
row.venueName
|
||||
}}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" prop="type"></el-table-column>
|
||||
<el-table-column label="位置" prop="location"></el-table-column>
|
||||
<el-table-column label="价格(1小时)">
|
||||
<template #default="{ row }">
|
||||
{{ row.price !== null ? row.price.toFixed(2) : 0.0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="360vw">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="success"
|
||||
@click="onEdit(row)"
|
||||
title="编辑场地信息"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button link type="primary" @click="onDelete(row.id)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="info"
|
||||
@click="onSetMoney(row.id, row.price)"
|
||||
title="调整场地使用价格"
|
||||
>调整价格</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="updateImg(row.id, row.imgUrl)"
|
||||
title="调整场地图片"
|
||||
>场地图片</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="success"
|
||||
@click="openQR(row.id, row.qrCode, row.venueName)"
|
||||
title="查看场地二维码图片"
|
||||
>二维码</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="无场地数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
v-model:current-page="params.current"
|
||||
v-model:page-size="params.size"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="jumper, total, sizes, prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
style="margin-top: 20px; justify-content: flex-end"
|
||||
/>
|
||||
|
||||
<!-- 编辑场地信息 -->
|
||||
<FieldEdit ref="fieldEditRef" @success="onSizeChange(10)"></FieldEdit>
|
||||
<!-- 编辑场地的价格信息 -->
|
||||
<MoneyEdit ref="moneyEditRef" @success="onSizeChange(10)"></MoneyEdit>
|
||||
<!-- 图片预览框 -->
|
||||
<PhotoShow ref="imgRef"></PhotoShow>
|
||||
<!-- 图片修改框 -->
|
||||
<PhotoUpdate ref="imgUpdateRef" @success="onSizeChange(10)"></PhotoUpdate>
|
||||
<!-- 二维码查看 -->
|
||||
<QRView ref="viewRef"></QRView>
|
||||
</page-container>
|
||||
</template>
|
||||
@ -0,0 +1,124 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import defaultImg from '@/assets/cover.jpg'
|
||||
import { QRDownload } from '@/api/information'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const imgUrl = ref('')
|
||||
const nameValue = ref('')
|
||||
const selectId = ref('')
|
||||
|
||||
const open = (id, url, name) => {
|
||||
selectId.value = id
|
||||
imgUrl.value = url
|
||||
nameValue.value = name
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const download = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确认下载二维码?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info',
|
||||
center: true
|
||||
})
|
||||
await QRDownload(selectId.value, nameValue.value)
|
||||
} catch {
|
||||
// 用户取消操作
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="场地二维码"
|
||||
class="qr-preview-dialog"
|
||||
@close="imgUrl = ''"
|
||||
>
|
||||
<div class="image-container">
|
||||
<el-image
|
||||
:src="imgUrl || defaultImg"
|
||||
:preview-src-list="[imgUrl]"
|
||||
fit="contain"
|
||||
class="preview-image"
|
||||
hide-on-click-modal
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-error">
|
||||
<el-icon :size="40"><Picture /></el-icon>
|
||||
<span>图片加载失败</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="primary" plain :disabled="!imgUrl" @click="download">
|
||||
<el-icon><Download /></el-icon>
|
||||
<span>下载二维码</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.qr-preview-dialog {
|
||||
--dialog-max-width: min(90vw, 800px);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
max-width: 100%;
|
||||
max-height: 60vh;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.image-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #c0c4cc;
|
||||
height: 200px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__header) {
|
||||
background: linear-gradient(120deg, #e0f2ff 0%, #f0f7ff 100%);
|
||||
margin-right: 0;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__title) {
|
||||
color: #1c3f6e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__footer) {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { hotAddService, hotUpdateService } from '@/api/hot'
|
||||
const dialogVisible = ref(false)
|
||||
const formModel = ref({
|
||||
id: '',
|
||||
description: ''
|
||||
})
|
||||
const formRef = ref()
|
||||
|
||||
const rules = {
|
||||
id: [{ required: true, message: '请输入费用', trigger: 'blur' }],
|
||||
description: [{ required: true, message: '请输入费用', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
// 组件对外暴露一个方法 open
|
||||
const open = (row) => {
|
||||
if (row.id != 0) {
|
||||
formModel.value = { ...row }
|
||||
} else {
|
||||
formModel.value.id = 0
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 向外暴露
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
|
||||
const onSubmit = async () => {
|
||||
await formRef.value.validate()
|
||||
ElMessageBox.confirm('确认提交修改？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
console.log(formModel.value)
|
||||
|
||||
formModel.value.id === 0
|
||||
? await hotAddService(formModel.value)
|
||||
: await hotUpdateService(formModel.value)
|
||||
ElMessage.success('编辑成功')
|
||||
onClose()
|
||||
emit('success')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
dialogVisible.value = false
|
||||
formModel.value = {}
|
||||
formRef.value.clearValidate()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="formModel.id ? '编辑' : '添加'"
|
||||
width="25%"
|
||||
:before-close="onClose"
|
||||
>
|
||||
<div v-if="formModel.id && formModel.id !== 0">
|
||||
<img :src="formModel.imgUrl" style="width: 400px; height: 300px" alt="" />
|
||||
<hr />
|
||||
</div>
|
||||
<el-form ref="formRef" :model="formModel" :rules="rules" label-width="40px">
|
||||
<el-form-item label="描述" prop="description" width="40px">
|
||||
<el-input
|
||||
v-model="formModel.description"
|
||||
:rows="2"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
placeholder="Please input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onClose">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit"> 确认 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@ -0,0 +1,70 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { logQueryService } from '@/api/log'
|
||||
const params = ref({
|
||||
current: 1,
|
||||
size: 10
|
||||
})
|
||||
const key = ref('')
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const logList = ref([])
|
||||
const getLogs = async () => {
|
||||
loading.value = true
|
||||
const {
|
||||
data: { data }
|
||||
} = await logQueryService(params.value, key.value)
|
||||
logList.value = data.list
|
||||
total.value = data.total
|
||||
loading.value = false
|
||||
}
|
||||
getLogs()
|
||||
const onCurrentChange = (current) => {
|
||||
params.value.current = current
|
||||
getLogs()
|
||||
}
|
||||
const onSizeChange = (size) => {
|
||||
params.value.current = 1
|
||||
params.value.size = size
|
||||
getLogs()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<page-container title="系统日志">
|
||||
<template #extra>
|
||||
<!-- <el-button type="primary" @click="onEdit">添加场馆信息</el-button> -->
|
||||
</template>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table :data="logList" stripe v-loading="loading">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column label="操作类型" prop="operationType" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作描述"
|
||||
prop="operationDesc"
|
||||
width="350"
|
||||
></el-table-column>
|
||||
<el-table-column label="结果" prop="result"></el-table-column>
|
||||
<el-table-column label="执行时间（毫秒）" prop="time"></el-table-column>
|
||||
<el-table-column label="状态" prop="status"></el-table-column>
|
||||
<el-table-column label="记录时间" prop="createTime"></el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="无数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
v-model:current-page="params.current"
|
||||
v-model:page-size="params.size"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="jumper, total, sizes, prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
style="margin-top: 20px; justify-content: flex-end"
|
||||
/>
|
||||
</page-container>
|
||||
</template>
|
||||
@ -0,0 +1,183 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Plus, Delete, Edit, DocumentCopy } from '@element-plus/icons-vue'
|
||||
import { adminListService, adminDelService } from '@/api/user'
|
||||
import AdminAdd from './components/AdminAdd.vue'
|
||||
import AdminDetail from './components/AdminDetail.vue'
|
||||
import PasswdUpdate from '@/components/PasswdUpdate.vue'
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const adminList = ref()
|
||||
const params = ref({
|
||||
current: 1,
|
||||
size: 10
|
||||
})
|
||||
|
||||
const getAdminList = async () => {
|
||||
loading.value = true
|
||||
const {
|
||||
data: { data }
|
||||
} = await adminListService(params.value)
|
||||
total.value = data.total
|
||||
adminList.value = data.list
|
||||
console.log(data.list)
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
getAdminList()
|
||||
|
||||
// 文本复制
|
||||
const copyStatus = ref('')
|
||||
|
||||
const copyToClipboard = (copyText) => {
|
||||
// 创建一个隐藏的输入框
|
||||
const tempInput = document.createElement('input')
|
||||
tempInput.style.position = 'absolute'
|
||||
tempInput.style.left = '-9999px'
|
||||
tempInput.style.top = '-9999px'
|
||||
document.body.appendChild(tempInput)
|
||||
|
||||
// 将要复制的文本赋值给输入框
|
||||
tempInput.value = copyText
|
||||
tempInput.select()
|
||||
|
||||
// 尝试复制
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
copyStatus.value = '复制成功！'
|
||||
} catch (err) {
|
||||
copyStatus.value = '复制失败，请手动复制'
|
||||
console.error('复制失败:', err)
|
||||
} finally {
|
||||
ElMessage.info(copyStatus.value)
|
||||
// 移除临时输入框
|
||||
document.body.removeChild(tempInput)
|
||||
}
|
||||
}
|
||||
|
||||
// 添加管理员信息
|
||||
const adminAddRef = ref()
|
||||
const adminAdd = () => {
|
||||
adminAddRef.value.open()
|
||||
}
|
||||
|
||||
// 移除管理员信息
|
||||
const remove = (userId) => {
|
||||
ElMessageBox.confirm('确认移除该条管理员信息?', '提示', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
await adminDelService(userId)
|
||||
ElMessage.success('移除成功')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 管理场馆
|
||||
const adminDetail = ref()
|
||||
const manage = (userId) => {
|
||||
adminDetail.value.open(userId)
|
||||
}
|
||||
|
||||
// 修改管理员账号密码
|
||||
const passwdRef = ref()
|
||||
const passwdUpdate = (id) => {
|
||||
passwdRef.value.open(id)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<page-container title="超级管理员">
|
||||
<!-- 表格区域 -->
|
||||
<el-table :data="adminList" stripe v-loading="loading">
|
||||
<el-table-column type="index" label="序号" width="100" />
|
||||
<el-table-column label="用户名" prop="username"></el-table-column>
|
||||
<el-table-column label="密码">
|
||||
<template #default="{ row }">
|
||||
{{ '******' }}
|
||||
<el-button
|
||||
plain
|
||||
:icon="DocumentCopy"
|
||||
type="info"
|
||||
title="查看用户认证信息"
|
||||
size="small"
|
||||
@click="copyToClipboard(row.accessCode)"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
margin-left: 2%;
|
||||
margin-top: -4%;
|
||||
"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="联系电话" prop="userPhone"></el-table-column>
|
||||
<el-table-column label="邮箱信息">
|
||||
<template #default="{ row }">
|
||||
{{ row.email || '用户未设置邮箱信息' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template #default="">
|
||||
{{ '管理员' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
:icon="Plus"
|
||||
title="管理场馆"
|
||||
@click="manage(row.id)"
|
||||
></el-button>
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
:icon="Edit"
|
||||
type="primary"
|
||||
title="修改管理员账号密码"
|
||||
@click="passwdUpdate(row.id)"
|
||||
></el-button>
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
:icon="Delete"
|
||||
type="danger"
|
||||
title="移除管理员"
|
||||
@click="remove(row.id)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="无数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
<el-button class="mt-4" style="width: 100%" @click="adminAdd">
|
||||
<el-icon
|
||||
><Plus />
|
||||
添加管理员信息
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
v-model:current-page="params.current"
|
||||
v-model:page-size="params.size"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="jumper, total, sizes, prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
style="margin-top: 20px; justify-content: flex-end"
|
||||
/>
|
||||
</page-container>
|
||||
<!-- 添加管理员信息 -->
|
||||
<AdminAdd ref="adminAddRef" @success="onSizeChange(10)"></AdminAdd>
|
||||
<!-- 管理场馆 -->
|
||||
<AdminDetail ref="adminDetail"></AdminDetail>
|
||||
<!-- 修改管理员密码 -->
|
||||
<PasswdUpdate ref="passwdRef" @success="onSizeChange(10)"></PasswdUpdate>
|
||||
</template>
|
||||
@ -0,0 +1,276 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { getLatestDevices } from '@/api/device'
|
||||
import { Stomp } from '@stomp/stompjs'
|
||||
import SockJS from 'sockjs-client'
|
||||
const chart = ref(null)
|
||||
let chartInstance = null
|
||||
const deviceList = ref([])
|
||||
const latestDevice = ref(null)
|
||||
const stompClient = ref(null)
|
||||
|
||||
// 颜色计算
|
||||
const getTempColor = (temp) => {
|
||||
if (!temp) return '#333'
|
||||
if (temp > 30) return '#f56c6c' // 高温红色
|
||||
if (temp < 15) return '#409eff' // 低温蓝色
|
||||
return '#67c23a' // 正常绿色
|
||||
}
|
||||
|
||||
const getHumidityColor = (humidity) => {
|
||||
if (!humidity) return '#333'
|
||||
if (humidity > 70 || humidity < 30) return '#f56c6c' // 异常红色
|
||||
return '#67c23a' // 正常绿色
|
||||
}
|
||||
|
||||
// 时间格式化
|
||||
const formatTime = (timestamp) => {
|
||||
return new Date(timestamp).toLocaleString()
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
chartInstance = echarts.init(chart.value)
|
||||
updateChart()
|
||||
}
|
||||
|
||||
// 更新图表数据
|
||||
const updateChart = () => {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params) => {
|
||||
const date = new Date(params[0].value[0])
|
||||
return `${date.toLocaleTimeString()}<br/>
|
||||
温度: ${params[0].value[1]}°C<br/>
|
||||
湿度: ${params[1].value[2]}%`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['温度', '湿度']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '温度(℃)',
|
||||
type: 'value',
|
||||
min: 10,
|
||||
max: 40
|
||||
},
|
||||
{
|
||||
name: '湿度(%)',
|
||||
type: 'value',
|
||||
min: 20,
|
||||
max: 80
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '温度',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: deviceList.value.map((item) => [
|
||||
item.timestamp,
|
||||
item.temperature
|
||||
]),
|
||||
lineStyle: {
|
||||
color: '#ff6384'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '湿度',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
yAxisIndex: 1,
|
||||
data: deviceList.value.map((item) => [item.timestamp, item.humidity]),
|
||||
lineStyle: {
|
||||
color: '#36a2eb'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
chartInstance.setOption(option)
|
||||
}
|
||||
|
||||
// 连接WebSocket
|
||||
const connectWebSocket = () => {
|
||||
const socket = new SockJS('http://119.29.191.232:9020/api/ws')
|
||||
stompClient.value = Stomp.over(socket)
|
||||
|
||||
stompClient.value.connect({}, () => {
|
||||
stompClient.value.subscribe('/topic/devices', (message) => {
|
||||
const newDevice = JSON.parse(message.body)
|
||||
latestDevice.value = newDevice
|
||||
deviceList.value.unshift(newDevice)
|
||||
|
||||
// 保持列表长度
|
||||
if (deviceList.value.length > 50) {
|
||||
deviceList.value.pop()
|
||||
}
|
||||
|
||||
updateChart()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 获取初始数据
|
||||
const fetchInitialData = async () => {
|
||||
const {
|
||||
data: { data }
|
||||
} = await getLatestDevices()
|
||||
deviceList.value = data.reverse()
|
||||
if (deviceList.value.length > 0) {
|
||||
latestDevice.value = deviceList.value[0]
|
||||
}
|
||||
updateChart()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
fetchInitialData()
|
||||
connectWebSocket()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (stompClient.value) {
|
||||
stompClient.value.disconnect()
|
||||
}
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- 状态概览卡片 -->
|
||||
<div class="status-cards">
|
||||
<el-card class="status-card" shadow="hover">
|
||||
<div class="card-title">当前温度</div>
|
||||
<div
|
||||
class="card-value"
|
||||
:style="{ color: getTempColor(latestDevice?.temperature) }"
|
||||
>
|
||||
{{ latestDevice?.temperature?.toFixed(1) || '--' }}°C
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="status-card" shadow="hover">
|
||||
<div class="card-title">当前湿度</div>
|
||||
<div
|
||||
class="card-value"
|
||||
:style="{ color: getHumidityColor(latestDevice?.humidity) }"
|
||||
>
|
||||
{{ latestDevice?.humidity?.toFixed(1) || '--' }}%
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="status-card" shadow="hover">
|
||||
<div class="card-title">风扇状态</div>
|
||||
<div class="card-value">
|
||||
<el-tag :type="latestDevice?.fanStatus ? 'success' : 'info'">
|
||||
{{ latestDevice?.fanStatus ? '运行中' : '已关闭' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="status-card" shadow="hover">
|
||||
<div class="card-title">设备状态</div>
|
||||
<div class="card-value">
|
||||
<el-tag :type="latestDevice?.warningStatus ? 'danger' : 'success'">
|
||||
{{ latestDevice?.warningStatus ? '异常' : '正常' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 数据图表 -->
|
||||
<div class="chart-container">
|
||||
<el-card shadow="never">
|
||||
<div ref="chart" style="width: 100%; height: 400px"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-container">
|
||||
<el-card shadow="never">
|
||||
<el-table :data="deviceList" style="width: 100%" height="400">
|
||||
<el-table-column prop="timestamp" label="时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatTime(row.timestamp) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="温度(℃)" width="120">
|
||||
<template #default="{ row }">
|
||||
<span :style="{ color: getTempColor(row.temperature) }">
|
||||
{{ row.temperature.toFixed(1) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="湿度(%)" width="120">
|
||||
<template #default="{ row }">
|
||||
<span :style="{ color: getHumidityColor(row.humidity) }">
|
||||
{{ row.humidity.toFixed(1) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="风扇状态" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.fanStatus ? 'success' : 'info'">
|
||||
{{ row.fanStatus ? '运行中' : '已关闭' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="警告状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.warningStatus ? 'danger' : 'success'">
|
||||
{{ row.warningStatus ? '异常' : '正常' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.status-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.chart-container,
|
||||
.table-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,191 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { recordQueryService } from '@/api/reservation'
|
||||
import BaseLayout from '@/components/BaseLayout.vue'
|
||||
import { useUserStore } from '@/stores'
|
||||
const userStore = useUserStore()
|
||||
const userInfo = ref({ ...userStore.user })
|
||||
// 模拟后端数据
|
||||
const bookingRecords = ref([])
|
||||
|
||||
// 状态映射
|
||||
const statusText = {
|
||||
'-2': '已过期',
|
||||
'-1': '已取消',
|
||||
1: '待签到',
|
||||
2: '已签到'
|
||||
}
|
||||
|
||||
const statusTagType = {
|
||||
'-2': 'danger',
|
||||
'-1': 'warning',
|
||||
1: 'info',
|
||||
2: 'success'
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
return statusText[String(status)] || '未知状态'
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusTagType = (status) => {
|
||||
return statusTagType[String(status)] || 'info'
|
||||
}
|
||||
|
||||
// 分页相关
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const totalRecords = ref(bookingRecords.value.length)
|
||||
|
||||
// 加载预约记录
|
||||
const loading = ref(false)
|
||||
const getBookingRecords = async () => {
|
||||
loading.value = true
|
||||
const {
|
||||
data: { data }
|
||||
} = await recordQueryService({
|
||||
current: currentPage.value,
|
||||
size: pageSize.value,
|
||||
userId: userInfo.value.id,
|
||||
status: 0
|
||||
})
|
||||
bookingRecords.value = data.list
|
||||
totalRecords.value = data.total
|
||||
loading.value = false
|
||||
}
|
||||
getBookingRecords()
|
||||
// 详情弹窗相关
|
||||
const detailDialogVisible = ref(false)
|
||||
const reserveDetail = ref(null)
|
||||
|
||||
const viewDetails = (record) => {
|
||||
reserveDetail.value = record
|
||||
detailDialogVisible.value = true
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<BaseLayout>
|
||||
<div class="booking-records-container">
|
||||
<el-main class="records-content">
|
||||
<div class="page-header">
|
||||
<h3>我的预约记录</h3>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="bookingRecords"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="80" />
|
||||
<el-table-column prop="dateStr" label="预约日期" width="120" />
|
||||
<el-table-column prop="venueName" label="场馆名称" width="150" />
|
||||
<el-table-column prop="type" label="场地类型" width="120" />
|
||||
<el-table-column prop="timeStr" label="预约时间" width="150" />
|
||||
<el-table-column prop="price" label="费用(元)" width="100" />
|
||||
<el-table-column label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)">
|
||||
{{ getStatusText(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="viewDetails(scope.row)"
|
||||
>查看详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="totalRecords"
|
||||
:page-size="pageSize"
|
||||
v-model:current-page="currentPage"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</el-main>
|
||||
|
||||
<!-- 预约详情弹窗 -->
|
||||
<el-dialog v-model="detailDialogVisible" title="预约详情" width="600px">
|
||||
<div v-if="reserveDetail">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="预约编号">{{
|
||||
reserveDetail.reservationId
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="场馆名称">{{
|
||||
reserveDetail.venueName
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="场地类型">{{
|
||||
reserveDetail.type
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="预约日期">{{
|
||||
reserveDetail.dateStr
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="预约时间">{{
|
||||
reserveDetail.timeStr
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="预约金额"
|
||||
>{{ reserveDetail.price }} 元</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="支付单号">{{
|
||||
reserveDetail.payStr
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="支付时间">{{
|
||||
reserveDetail.payDate
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="预约状态">
|
||||
<el-tag :type="getStatusTagType(reserveDetail.status)">
|
||||
{{ getStatusText(reserveDetail.status) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注"
|
||||
>请提前15分钟到达场馆签到</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
<style scoped>
|
||||
.booking-records-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.records-content {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,285 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Iphone, Message, Key } from '@element-plus/icons-vue'
|
||||
import { ResetService } from '@/api/user'
|
||||
const router = useRouter()
|
||||
const captchaCanvas = ref(null)
|
||||
const forgetForm = ref(null)
|
||||
const submitting = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = ref({
|
||||
phone: '',
|
||||
email: '',
|
||||
captcha: ''
|
||||
})
|
||||
|
||||
// 验证码答案
|
||||
const captchaAnswer = ref('')
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
|
||||
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
|
||||
captcha: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
{ validator: validateCaptcha, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 验证码校验
|
||||
function validateCaptcha(rule, value, callback) {
|
||||
if (value.toLowerCase() !== captchaAnswer.value.toLowerCase()) {
|
||||
callback(new Error('验证码不正确'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// 生成验证码
|
||||
const generateCaptcha = () => {
|
||||
const canvas = captchaCanvas.value
|
||||
if (!canvas) return
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
// 随机字符
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789'
|
||||
let captcha = ''
|
||||
|
||||
// 绘制背景
|
||||
ctx.fillStyle = '#f5f7fa'
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
// 绘制干扰线
|
||||
for (let i = 0; i < 5; i++) {
|
||||
ctx.strokeStyle = getRandomColor(100, 200)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
|
||||
ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
// 绘制验证码字符
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const char = chars[Math.floor(Math.random() * chars.length)]
|
||||
captcha += char
|
||||
|
||||
ctx.fillStyle = getRandomColor(50, 150)
|
||||
ctx.font = `${Math.floor(20 + Math.random() * 10)}px Arial`
|
||||
ctx.fillText(char, 10 + i * 30, 30 + (Math.random() * 10 - 5))
|
||||
}
|
||||
|
||||
captchaAnswer.value = captcha
|
||||
}
|
||||
|
||||
// 获取随机颜色
|
||||
const getRandomColor = (min, max) => {
|
||||
const r = min + Math.floor(Math.random() * (max - min))
|
||||
const g = min + Math.floor(Math.random() * (max - min))
|
||||
const b = min + Math.floor(Math.random() * (max - min))
|
||||
return `rgb(${r}, ${g}, ${b})`
|
||||
}
|
||||
|
||||
// 刷新验证码
|
||||
const refreshCaptcha = () => {
|
||||
generateCaptcha()
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = () => {
|
||||
forgetForm.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
submitting.value = true
|
||||
const {
|
||||
data: { message }
|
||||
} = await ResetService(form.value)
|
||||
submitting.value = false
|
||||
resetForm()
|
||||
ElMessage.success(message)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
forgetForm.value.resetFields()
|
||||
refreshCaptcha()
|
||||
}
|
||||
|
||||
// 返回登录页
|
||||
function goToLogin() {
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
generateCaptcha()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="forget-password-page">
|
||||
<div class="brand-header">
|
||||
<h1>校园 e 站通</h1>
|
||||
<h2>华交场馆管控一体化平台</h2>
|
||||
</div>
|
||||
|
||||
<div class="forget-password-container">
|
||||
<div class="form-panel">
|
||||
<h3 class="form-title">找回密码</h3>
|
||||
|
||||
<el-form
|
||||
ref="forgetForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
class="forget-form"
|
||||
>
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入注册时绑定的手机号"
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Iphone /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="QQ邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="form.email"
|
||||
placeholder="请输入注册时绑定的QQ邮箱"
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Message /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="验证码" prop="captcha">
|
||||
<div class="captcha-input">
|
||||
<el-input
|
||||
v-model="form.captcha"
|
||||
placeholder="请输入右侧验证码"
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Key /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<div class="captcha-image" @click="refreshCaptcha">
|
||||
<canvas ref="captchaCanvas" width="250" height="40"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm"
|
||||
:loading="submitting"
|
||||
class="submit-btn"
|
||||
>
|
||||
提交验证
|
||||
</el-button>
|
||||
<el-button @click="resetForm" class="reset-btn">重置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<div class="back-login">
|
||||
<el-link type="primary" @click="goToLogin">返回登录</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.forget-password-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.brand-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.brand-header h1 {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.brand-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
color: #5a6a85;
|
||||
}
|
||||
|
||||
.forget-password-container {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
color: #2c3e50;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.forget-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.captcha-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.captcha-image {
|
||||
cursor: pointer;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.captcha-image:hover {
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 60%;
|
||||
margin-left: 1.9vw;
|
||||
}
|
||||
.reset-btn {
|
||||
width: 30%;
|
||||
}
|
||||
.back-login {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,158 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { slotPageService, slotDel } from '@/api/slot'
|
||||
import { View, Delete, Plus } from '@element-plus/icons-vue'
|
||||
import VenueEdit from './components/VenueEdit.vue'
|
||||
import VenueAdd from './components/VenueAdd.vue'
|
||||
import TimeAdd from './components/TimeAdd.vue'
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const timeList = ref([])
|
||||
const params = ref({
|
||||
current: 1,
|
||||
size: 10
|
||||
})
|
||||
|
||||
// 加载禁用的时间段集合
|
||||
const getTimeList = async () => {
|
||||
loading.value = true
|
||||
const {
|
||||
data: { data }
|
||||
} = await slotPageService(params.value)
|
||||
timeList.value = data.list
|
||||
total.value = data.total
|
||||
loading.value = false
|
||||
}
|
||||
getTimeList()
|
||||
|
||||
// 修改当前页
|
||||
const handleCurrentChange = (current) => {
|
||||
params.value.current = current
|
||||
getTimeList()
|
||||
}
|
||||
|
||||
// 修改每页数据条数
|
||||
const handleSizeChange = (size) => {
|
||||
params.value.current = 1
|
||||
params.value.size = size
|
||||
getTimeList()
|
||||
}
|
||||
|
||||
// 编辑场地信息
|
||||
const venueEditRef = ref()
|
||||
const editMsg = (row) => {
|
||||
venueEditRef.value.open(
|
||||
row.slotStart + ' ~ ' + row.slotEnd + '(' + row.reservationDate + ')',
|
||||
row.id
|
||||
)
|
||||
}
|
||||
|
||||
// 添加场地信息
|
||||
const venueAddRef = ref()
|
||||
const addMsg = (row) => {
|
||||
venueAddRef.value.open(row)
|
||||
}
|
||||
|
||||
// 添加预约时间段
|
||||
const timeAddRef = ref()
|
||||
const onAdd = () => {
|
||||
timeAddRef.value.open()
|
||||
}
|
||||
|
||||
// 移除时间段信息
|
||||
const onDelete = (sid) => {
|
||||
ElMessageBox.confirm('确认移除此时间段？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
const formData = new FormData()
|
||||
formData.append('venueId', -1)
|
||||
formData.append('slotId', sid)
|
||||
await slotDel(formData)
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '移除成功'
|
||||
})
|
||||
handleSizeChange(5)
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '移除失败'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<page-container title="禁用记录">
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="onAdd">+ 添加禁用时间段</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table :data="timeList" stripe v-loading="loading">
|
||||
<el-table-column type="index" label="序号" width="100" />
|
||||
<!-- <el-table-column label="禁用场地（场馆）" prop="venueName"> -->
|
||||
<!-- </el-table-column> -->
|
||||
<el-table-column
|
||||
label="禁用日期"
|
||||
prop="reservationDate"
|
||||
></el-table-column>
|
||||
<el-table-column label="开始时间" prop="slotStart"></el-table-column>
|
||||
<el-table-column label="结束时间" prop="slotEnd"></el-table-column>
|
||||
<el-table-column label="设置人" prop="username"></el-table-column>
|
||||
<el-table-column label="设置时间" prop="addTime"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
type="success"
|
||||
:icon="View"
|
||||
@click="editMsg(row)"
|
||||
title="查看当前禁用时间段下有哪些场地"
|
||||
></el-button>
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
type="primary"
|
||||
:icon="Plus"
|
||||
@click="addMsg(row)"
|
||||
title="添加场地数据"
|
||||
></el-button>
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
@click="onDelete(row.id)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="无禁用时间段数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
<!-- 分页框 -->
|
||||
<el-pagination
|
||||
v-model:current-page="params.current"
|
||||
v-model:page-size="params.size"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
background
|
||||
layout="total,sizes, prev, pager, next"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
style="float: right; margin-top: 30px"
|
||||
/>
|
||||
</page-container>
|
||||
|
||||
<!-- 场地信息编辑框 -->
|
||||
<VenueEdit ref="venueEditRef"></VenueEdit>
|
||||
<!-- 场地信息添加框 -->
|
||||
<VenueAdd ref="venueAddRef"></VenueAdd>
|
||||
<!-- 添加禁用时间段 -->
|
||||
<TimeAdd ref="timeAddRef" @success="getTimeList"></TimeAdd>
|
||||
</template>
|
||||
@ -0,0 +1,154 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Edit, Delete, Upload } from '@element-plus/icons-vue'
|
||||
import defaultImg from '@/assets/cover.jpg'
|
||||
import { typeQueryService, typeDelService } from '@/api/type'
|
||||
import TypeEdit from './components/TypeEdit.vue'
|
||||
import PhotoUpdate from '@/components/PhotoUpdate.vue'
|
||||
import PhotoShow from '@/components/PhotoShow.vue'
|
||||
const loading = ref(false)
|
||||
const typeList = ref()
|
||||
const total = ref(0)
|
||||
const params = ref({
|
||||
current: 1,
|
||||
size: 10
|
||||
})
|
||||
|
||||
const getTypeList = async () => {
|
||||
loading.value = true
|
||||
const {
|
||||
data: { data }
|
||||
} = await typeQueryService(params.value)
|
||||
loading.value = false
|
||||
console.log(typeof data.list[0].openTime)
|
||||
typeList.value = data.list
|
||||
total.value = data.total
|
||||
}
|
||||
getTypeList()
|
||||
|
||||
const onCurrentChange = (current) => {
|
||||
params.value.current = current
|
||||
getTypeList()
|
||||
}
|
||||
const onSizeChange = (size) => {
|
||||
params.value.current = 1
|
||||
params.value.size = size
|
||||
getTypeList()
|
||||
}
|
||||
|
||||
const typeEditRef = ref()
|
||||
const onEdit = (row) => {
|
||||
typeEditRef.value.open(row)
|
||||
}
|
||||
|
||||
// 图片放大
|
||||
const photoShowRef = ref()
|
||||
const imgPreview = (imgUrl) => {
|
||||
photoShowRef.value.open(imgUrl)
|
||||
}
|
||||
|
||||
// 修改图片
|
||||
const photoUpdateRef = ref()
|
||||
const photoUpdate = (tid, tUrl) => {
|
||||
photoUpdateRef.value.open(tid, tUrl, 'venue')
|
||||
}
|
||||
|
||||
// 移除场馆信息
|
||||
const onDel = async (id) => {
|
||||
ElMessageBox.confirm('确认移除该条数据？', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
await typeDelService(id)
|
||||
ElMessage.success('移除成功')
|
||||
getTypeList()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<page-container title="场馆信息列表">
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="onEdit">添加场馆信息</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table
|
||||
:data="typeList"
|
||||
stripe
|
||||
v-loading="loading"
|
||||
element-loading-text="场馆数据加载中......"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column label="场馆照片">
|
||||
<template #default="{ row }">
|
||||
<img
|
||||
style="height: 100px; width: 120px; cursor: pointer"
|
||||
:src="
|
||||
row.imgUrl === null || row.imgUrl === '' || row.imgUrl === ' '
|
||||
? defaultImg
|
||||
: row.imgUrl
|
||||
"
|
||||
:title="row.venueName"
|
||||
@click="imgPreview(row.imgUrl)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="场馆名称" prop="vname" />
|
||||
<el-table-column label="位置" prop="location" />
|
||||
<el-table-column label="开馆时间" prop="openTime" />
|
||||
<el-table-column label="闭馆时间" prop="closeTime" />
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
@click="onEdit(row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
@click="onDel(row.id)"
|
||||
></el-button>
|
||||
<el-button
|
||||
circle
|
||||
plain
|
||||
type="info"
|
||||
:icon="Upload"
|
||||
title="上传场馆图片"
|
||||
@click="photoUpdate(row.id, row.imgUrl)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="无数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
v-model:current-page="params.current"
|
||||
v-model:page-size="params.size"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="jumper, total, sizes, prev, pager, next"
|
||||
background
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
style="margin-top: 20px; justify-content: flex-end"
|
||||
/>
|
||||
|
||||
<!-- 抽屉 -->
|
||||
<TypeEdit ref="typeEditRef" @success="onSizeChange(5)"></TypeEdit>
|
||||
<!-- 弹窗 -->
|
||||
<PhotoUpdate ref="photoUpdateRef" @success="onSizeChange(5)"></PhotoUpdate>
|
||||
<!-- 图片放大 -->
|
||||
<PhotoShow ref="photoShowRef"></PhotoShow>
|
||||
</page-container>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue