1-1
This commit is contained in:
zzz
commit
637cad590d
|
|
@ -0,0 +1,23 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
# wenhua
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "wenhua",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.6.8",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"element-ui": "^2.15.14",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "^3.5.1",
|
||||||
|
"vuex": "^3.6.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"less": "^4.0.0",
|
||||||
|
"less-loader": "^8.0.0",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
// text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 0px;
|
||||||
|
// height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent;
|
||||||
|
-webkit-border-radius: 2em;
|
||||||
|
-moz-border-radius: 2em;
|
||||||
|
border-radius: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: rgb(147, 147, 153, 0.5);
|
||||||
|
-webkit-border-radius: 2em;
|
||||||
|
-moz-border-radius: 2em;
|
||||||
|
border-radius: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
// 引入封装的请求
|
||||||
|
import { getData, postData, getIdData,getIddData,getcIdData,deleteData } from "./http";
|
||||||
|
|
||||||
|
let apiServe = {
|
||||||
|
// 登录接口
|
||||||
|
login: (data) => getData("login", "get", data),
|
||||||
|
// 注册登录
|
||||||
|
register: (data) => postData("register", "post", data),
|
||||||
|
// 获取用户信息
|
||||||
|
admin:(data) => getData("user", "get", data),
|
||||||
|
// 编辑用户
|
||||||
|
editAdmin: (data) => postData('updateUserInfor', 'post', data),
|
||||||
|
// 文化长廊列表
|
||||||
|
Cllist: (data) => getData('culture/list', "get", data),
|
||||||
|
// 文化长廊详情
|
||||||
|
Clwh: (id) => getIdData('culture/detail', 'get', id),
|
||||||
|
// 获取问题列表
|
||||||
|
getWishData: (data) => getData('question/questionList', 'get', data),
|
||||||
|
// 添加问题
|
||||||
|
getWish: (data) => postData('question/addQuestion', 'post', data),
|
||||||
|
// 问题选项
|
||||||
|
getwishxx:(id) => getIddData('question/questionOptions', 'get', id),
|
||||||
|
// 答题
|
||||||
|
getwishdt:(id) => getIddData('question/answerQuestion', 'get', id),
|
||||||
|
// 获取留言列表
|
||||||
|
getliuyan:(data) => getData("message/list", "get", data),
|
||||||
|
// 添加留言列表
|
||||||
|
addliuyan:(data) => postData("message/add", "post", data),
|
||||||
|
// 查看评论
|
||||||
|
pinglun:(data) => getcIdData("culture/comment", "get", data),
|
||||||
|
// 添加评论
|
||||||
|
addpinglun:(data) => postData("culture/addComment", "post", data),
|
||||||
|
// 删除留言
|
||||||
|
delliuyan:(data) => deleteData("message", "delete", data),
|
||||||
|
}
|
||||||
|
|
||||||
|
export { apiServe };
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
// 1.引入axios
|
||||||
|
import axios from 'axios';
|
||||||
|
// 引入 element ui
|
||||||
|
import { Message } from 'element-ui';
|
||||||
|
//引入路由实例
|
||||||
|
import router from '@/router';
|
||||||
|
let path = ''
|
||||||
|
const server = axios.create({
|
||||||
|
// 设置端口前缀
|
||||||
|
baseURL: 'https://9miao.fun:6838/prod-api/api/',
|
||||||
|
// 设置超时时间
|
||||||
|
timeout: 5000,
|
||||||
|
// 设置请求头 全局
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"saToken" : localStorage.getItem('token')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器 发送请求的路上干点什么
|
||||||
|
server.interceptors.request.use(config => {
|
||||||
|
// 排除登录或者注册接口 当不是登录或者注册接口的时候必须要传递token
|
||||||
|
if (config.url != '/login' && config.url != '/register') {
|
||||||
|
config.headers.token = localStorage.getItem('token');
|
||||||
|
}
|
||||||
|
// 每次请求都会把路径存起来
|
||||||
|
path = config.url
|
||||||
|
return config;
|
||||||
|
})
|
||||||
|
|
||||||
|
// // 响应拦截器
|
||||||
|
// server.interceptors.response.use(res => {
|
||||||
|
// // 判断请求是否成功
|
||||||
|
// if (res.data.token.code == 200) {
|
||||||
|
// return res.data.token
|
||||||
|
// } else if (res.data.token.code == 401) {
|
||||||
|
// // 将后端的失败提示消息弹出去
|
||||||
|
// Message({
|
||||||
|
// message: res.data.token.msg,
|
||||||
|
// type: 'error'
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // 判断请求的接口路径
|
||||||
|
// if (path == '/register' || path == '/login') {
|
||||||
|
// return;
|
||||||
|
// } else {
|
||||||
|
// router.push('/')
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// Message({
|
||||||
|
// message: res.data.token.msg,
|
||||||
|
// type: 'error'
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
|
// 封装post
|
||||||
|
export function postData(url, method, data) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
// 调用自定义的axios
|
||||||
|
server({
|
||||||
|
method,
|
||||||
|
url,
|
||||||
|
data
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
resolve(res);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
Message({
|
||||||
|
message: '系统错误',
|
||||||
|
type: 'error'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 封装get
|
||||||
|
export function getData(url, method, data) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
// 调用自定义的axios
|
||||||
|
server({
|
||||||
|
method,
|
||||||
|
url,
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
resolve(res);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
Message({
|
||||||
|
message: '系统错误',
|
||||||
|
type: 'error'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 封装get 通过id 详情
|
||||||
|
export function getIdData(url, method, id) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
// 调用自定义的axios
|
||||||
|
server({
|
||||||
|
method,
|
||||||
|
url: `${url}?id=${id}`,
|
||||||
|
// params: data
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
resolve(res);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
Message({
|
||||||
|
message: '系统错误',
|
||||||
|
type: 'error'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 封装get 通过id 详情
|
||||||
|
export function getIddData(url, method, id) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
// 调用自定义的axios
|
||||||
|
server({
|
||||||
|
method,
|
||||||
|
url: `${url}?questionId=${id}`,
|
||||||
|
// params: data
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
resolve(res);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
Message({
|
||||||
|
message: '系统错误',
|
||||||
|
type: 'error'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 封装get 通过id 详情
|
||||||
|
export function getcIdData(url, method, id) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
// 调用自定义的axios
|
||||||
|
server({
|
||||||
|
method,
|
||||||
|
url: `${url}?cid=${id}`,
|
||||||
|
// params: data
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
resolve(res);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
Message({
|
||||||
|
message: '系统错误',
|
||||||
|
type: 'error'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function deleteData(url, method, id) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
// 调用自定义的axios
|
||||||
|
server({
|
||||||
|
method,
|
||||||
|
url: `${url}/${id}`,
|
||||||
|
// params: data
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
resolve(res);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
Message({
|
||||||
|
message: '系统错误',
|
||||||
|
type: 'error'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 520 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 527 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 795 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 612 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,249 @@
|
||||||
|
<template>
|
||||||
|
<div class="index">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<el-carousel indicator-position="outside">
|
||||||
|
<el-carousel-item v-for="(item, index) in imgs" :key="index">
|
||||||
|
<h3><img :src="item.url" alt="" /></h3>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
|
||||||
|
<div class="sub">
|
||||||
|
<div class="sublist">
|
||||||
|
<div class="item">
|
||||||
|
<img src="../../assets/12.jpg" alt="" />
|
||||||
|
<p>添加</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<img src="../../assets/12.jpg" alt="" />
|
||||||
|
<p>编辑</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<img src="../../assets/12.jpg" alt="" />
|
||||||
|
<p>删除</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>文化长廊</h2>
|
||||||
|
|
||||||
|
<div class="changlang">
|
||||||
|
<div class="cllist">
|
||||||
|
<div
|
||||||
|
class="cllist_item"
|
||||||
|
v-for="(item, index) in list"
|
||||||
|
:key="index"
|
||||||
|
@click="desc(item.id,item.userId)"
|
||||||
|
>
|
||||||
|
<img :src="item.cultureImage" alt="" />
|
||||||
|
<div class="item_box">
|
||||||
|
<p>{{ item.cultureTitle }}</p>
|
||||||
|
<p v-html="item.cultureContent"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { apiServe } from '@/api/api.js'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imgs: [
|
||||||
|
{
|
||||||
|
url: "https://qiniu.ltshgs.com/5cfc3b6898394a9681d9fed627100d1e.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: "https://qiniu.ltshgs.com/501d1c0683724753a1f8f43ba9d53b32.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: "https://qiniu.ltshgs.com/a32b4f50c0184073bb12aaaa9ebce3b5.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: "https://qiniu.ltshgs.com/4d0888b9477a4ec69a2387e53ff1c8a9.jpg",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
list: [
|
||||||
|
],
|
||||||
|
cdata:{
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.cdata.token = localStorage.getItem('token')
|
||||||
|
console.log(this.token);
|
||||||
|
this.searchUser()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
desc(id,cid) {
|
||||||
|
console.log(id);
|
||||||
|
this.$router.push({ path:"/desc", query: { id: id} });
|
||||||
|
},
|
||||||
|
searchUser() {
|
||||||
|
|
||||||
|
apiServe.Cllist(this.cdata).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.list = res.data.data
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.index::v-deep {
|
||||||
|
height: 100%;
|
||||||
|
// background-color: #ccc;
|
||||||
|
|
||||||
|
.el-carousel__container {
|
||||||
|
height: 780px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item h3 {
|
||||||
|
color: #475669;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 780px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__indicators--horizontal {
|
||||||
|
// height: 1px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 24px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
z-index: 99;
|
||||||
|
// background-color: aqua;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__indicators--horizontal button {
|
||||||
|
width: 50px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
height: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__arrow--left {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
left: 30px;
|
||||||
|
top: 50%;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__arrow--right {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
right: 30px;
|
||||||
|
top: 50%;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
.sub {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
// background-color: red;
|
||||||
|
.sublist {
|
||||||
|
width: 1250px;
|
||||||
|
height: 200px;
|
||||||
|
// margin: 0 auto;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
// box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
|
||||||
|
// background-color: aqua;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changlang {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
|
||||||
|
.cllist {
|
||||||
|
width: 1250px;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
// box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
// background-color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.cllist_item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_box {
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
p:first-child {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
// margin-bottom: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #979797;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,338 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="content">
|
||||||
|
<div class="btn" @click="send">
|
||||||
|
<p>留言</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<!-- <div class="title">题目推荐</div> -->
|
||||||
|
|
||||||
|
<div class="item" v-for="(item, index) in list" :key="index">
|
||||||
|
<img :src="item.avatar" alt="" />
|
||||||
|
<div class="item_box">
|
||||||
|
<p>{{ item.title }}</p>
|
||||||
|
<p>{{ item.content }}</p>
|
||||||
|
<div class="bottom_item">
|
||||||
|
<div class="btns">
|
||||||
|
<p class="btns_time">
|
||||||
|
{{ item.nickname }} 发布于 {{ item.createTime }}
|
||||||
|
</p>
|
||||||
|
<p class="btns_btn" @click="del(item.id)">删除当前留言</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
title="发布题目"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
width="40%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
>
|
||||||
|
<!-- <p style="text-align: center;">发布题目</p> -->
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="https://9miao.fun:6838/prod-api/common/alibabaUpload"
|
||||||
|
:show-file-list="false"
|
||||||
|
:headers="headerObj"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
>
|
||||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||||
|
</el-upload>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-form ref="form" :model="form" label-width="80px">
|
||||||
|
<el-form-item label="留言人">
|
||||||
|
<el-input v-model="form.nickname"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="留言内容">
|
||||||
|
<el-input v-model="form.content"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="">
|
||||||
|
<el-input v-model="form.name"></el-input>
|
||||||
|
</el-form-item> -->
|
||||||
|
</el-form>
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="upload">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { apiServe } from "@/api/api";
|
||||||
|
export default {
|
||||||
|
name: "WenhuaWebuiZhiShi",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
|
||||||
|
dialogVisible: false,
|
||||||
|
|
||||||
|
form: {},
|
||||||
|
headerObj: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
saToken: localStorage.getItem("token"),
|
||||||
|
},
|
||||||
|
imageUrl: "",
|
||||||
|
cdata: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.cdata.token = localStorage.getItem("token");
|
||||||
|
let token = localStorage.getItem("token");
|
||||||
|
console.log(token);
|
||||||
|
if (!token) {
|
||||||
|
if (!token) {
|
||||||
|
this.$confirm("您还未登录，是否前去登录?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
// 跳转登录
|
||||||
|
this.$router.push("/login");
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: "info",
|
||||||
|
message: "已取消",
|
||||||
|
});
|
||||||
|
this.$router.push("/");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.searchUser();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
send() {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
searchUser() {
|
||||||
|
apiServe.getliuyan(this.cdata).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.list = res.data.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleClose(done) {
|
||||||
|
this.$confirm("确认关闭？")
|
||||||
|
.then((_) => {
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch((_) => {});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleAvatarSuccess(res, file) {
|
||||||
|
console.log(res, file);
|
||||||
|
this.imageUrl = URL.createObjectURL(file.raw);
|
||||||
|
},
|
||||||
|
|
||||||
|
upload() {
|
||||||
|
// 若验证成功 此时应该调登录接口
|
||||||
|
let data = {
|
||||||
|
content: this.form.content,
|
||||||
|
nickname: this.form.nickname,
|
||||||
|
avatar: this.imageUrl,
|
||||||
|
};
|
||||||
|
apiServe.addliuyan(data).then((res) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$message({
|
||||||
|
message: "添加成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.dialogVisible = false;
|
||||||
|
// location.reload();
|
||||||
|
}, 1000);
|
||||||
|
console.log(res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
del(index) {
|
||||||
|
apiServe.delliuyan(index).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
// this.list = res.data.data
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
// location.reload();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box::v-deep {
|
||||||
|
height: 100%;
|
||||||
|
// background-color: #ccc;
|
||||||
|
padding: 50px 60px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 1000px;
|
||||||
|
// height: 300px;
|
||||||
|
// background-color: #ffffff;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
// width: 100px;
|
||||||
|
// background-color: rgba(0, 0, 0, alpha);
|
||||||
|
// padding: 15px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 150px;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: rgba(22, 155, 213, 1);
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 7px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 20px;
|
||||||
|
// margin-left: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_box {
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:first-child {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:nth-child(2) {
|
||||||
|
// margin-bottom: 30px;
|
||||||
|
// width: 600px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #979797;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-line-clamp: 3; //显示几行
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom_item {
|
||||||
|
width: 600px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 30px;
|
||||||
|
// position: relative;
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 14px !important;
|
||||||
|
color: #000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
// width: 100px;
|
||||||
|
// background-color: rgba(0, 0, 0, alpha);
|
||||||
|
// padding: 15px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.btns_time {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns_btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
background-color: rgba(22, 155, 213, 1);
|
||||||
|
font-size: 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload {
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.avatar-uploader .el-upload:hover {
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
.avatar-uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
line-height: 178px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,210 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="mine">
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="https://9miao.fun:6838/prod-api/common/alibabaUpload"
|
||||||
|
:show-file-list="false"
|
||||||
|
:headers="headerObj"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
>
|
||||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||||
|
</el-upload>
|
||||||
|
|
||||||
|
<div class="msg">
|
||||||
|
<div class="item">
|
||||||
|
<p>昵称</p>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入昵称"
|
||||||
|
v-model="list.nicekname"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<p>性别</p>
|
||||||
|
<div class="radio">
|
||||||
|
<el-radio v-model="list.sex" label="male">男</el-radio>
|
||||||
|
<el-radio v-model="list.sex" label="nv">女</el-radio>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<p>手机号</p>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
v-model="list.phonenumber"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn">
|
||||||
|
<p @click="save">保存</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { apiServe } from "@/api/api.js";
|
||||||
|
export default {
|
||||||
|
name: "WenhuaWebuiMine",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cdata: {},
|
||||||
|
headerObj: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
saToken: localStorage.getItem("token"),
|
||||||
|
},
|
||||||
|
imageUrl:'',
|
||||||
|
list: {
|
||||||
|
phonenumber: "",
|
||||||
|
nicekname: "",
|
||||||
|
avatar: "",
|
||||||
|
sex: "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.cdata.token = localStorage.getItem("token");
|
||||||
|
this.searchUser();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleAvatarSuccess(res, file) {
|
||||||
|
this.imageUrl= URL.createObjectURL(file.raw);
|
||||||
|
this.list.avatar = this.imageUrl
|
||||||
|
},
|
||||||
|
searchUser() {
|
||||||
|
apiServe.admin(this.cdata).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.list = res.data.data;
|
||||||
|
this.imageUrl = res.data.data.avatar;
|
||||||
|
localStorage.setItem("userid", res.data.data.id);
|
||||||
|
localStorage.setItem("img", res.data.data.avatar);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
apiServe.editAdmin(this.list).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
// this.$router.push("/index");
|
||||||
|
this.$message({
|
||||||
|
message: "个人信息保存成功!",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box::v-deep {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.mine {
|
||||||
|
width: 1000px;
|
||||||
|
margin-top: 50px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 30px 0;
|
||||||
|
|
||||||
|
.msg {
|
||||||
|
width: 800px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// background-color: rgba(242, 242, 242, 1);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 150px;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 35px;
|
||||||
|
background-color: rgba(22, 155, 213, 1);
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(242, 242, 242, 1);
|
||||||
|
|
||||||
|
// justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px 30px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
// margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
margin: 10px 0 20px;
|
||||||
|
padding-left: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload {
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.avatar-uploader .el-upload:hover {
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
.avatar-uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
line-height: 178px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="content">
|
||||||
|
<p>题目题目</p>
|
||||||
|
<!-- <input type="text" placeholder="请输入答案" /> -->
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入答案"
|
||||||
|
style="width: 600px; margin: 20px 0"
|
||||||
|
></el-input>
|
||||||
|
|
||||||
|
<div class="btn">
|
||||||
|
<p @click="save">保存</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "WenhuaWebuiQuestDesc",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
save() {
|
||||||
|
this.$message({
|
||||||
|
message: "提交成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$router.push('/zhishi')
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box::v-deep {
|
||||||
|
height: 100%;
|
||||||
|
// background-color: #ccc;
|
||||||
|
padding: 50px 60px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 1000px;
|
||||||
|
// height: 300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// background-color: rgba(242, 242, 242, 1);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 150px;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 35px;
|
||||||
|
background-color: rgba(22, 155, 213, 1);
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
// padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 500px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 20px 0 20px;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-top: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ffffff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,230 @@
|
||||||
|
<template>
|
||||||
|
<div class="component-upload-image">
|
||||||
|
<el-upload
|
||||||
|
multiple
|
||||||
|
:action="uploadImgUrl"
|
||||||
|
list-type="picture-card"
|
||||||
|
:on-success="handleUploadSuccess"
|
||||||
|
:before-upload="handleBeforeUpload"
|
||||||
|
:limit="limit"
|
||||||
|
:on-error="handleUploadError"
|
||||||
|
:on-exceed="handleExceed"
|
||||||
|
ref="imageUpload"
|
||||||
|
:on-remove="handleDelete"
|
||||||
|
:show-file-list="true"
|
||||||
|
:headers="headers"
|
||||||
|
:file-list="fileList"
|
||||||
|
:on-preview="handlePictureCardPreview"
|
||||||
|
:class="{ hide: this.fileList.length >= this.limit }"
|
||||||
|
>
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
</el-upload>
|
||||||
|
|
||||||
|
<!-- 上传提示 -->
|
||||||
|
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||||||
|
请上传
|
||||||
|
<template v-if="fileSize">
|
||||||
|
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||||
|
</template>
|
||||||
|
<template v-if="fileType">
|
||||||
|
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
|
||||||
|
</template>
|
||||||
|
的文件
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
title="预览"
|
||||||
|
width="800"
|
||||||
|
append-to-body
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="dialogImageUrl"
|
||||||
|
style="display: block; max-width: 100%; margin: 0 auto"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { getToken } from "@/utils/auth";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: [String, Object, Array],
|
||||||
|
// 图片数量限制
|
||||||
|
limit: {
|
||||||
|
type: Number,
|
||||||
|
default: 2,
|
||||||
|
},
|
||||||
|
// 大小限制(MB)
|
||||||
|
fileSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 5,
|
||||||
|
},
|
||||||
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||||
|
fileType: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ["png", "jpg", "jpeg"],
|
||||||
|
},
|
||||||
|
// 是否显示提示
|
||||||
|
isShowTip: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
number: 0,
|
||||||
|
uploadList: [],
|
||||||
|
dialogImageUrl: "",
|
||||||
|
dialogVisible: false,
|
||||||
|
hideUpload: false,
|
||||||
|
uploadImgUrl:
|
||||||
|
"https://9miao.fun:6838/prod-api" + "/common/alibabaUpload", // 上传的图片服务器地址
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
saToken: localStorage.getItem("token"),
|
||||||
|
},
|
||||||
|
fileList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
if (val) {
|
||||||
|
// 首先将值转为数组
|
||||||
|
console.log(val);
|
||||||
|
const list = Array.isArray(val) ? val : val;
|
||||||
|
// 然后将数组转为对象数组
|
||||||
|
this.fileList = list.map((item) => {
|
||||||
|
if (typeof item === "string") {
|
||||||
|
console.log(item);
|
||||||
|
if (item.indexOf(this.baseUrl) === -1) {
|
||||||
|
item = { name: item, item };
|
||||||
|
} else {
|
||||||
|
item = { name: item, url: item };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.fileList = [];
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 是否显示提示
|
||||||
|
showTip() {
|
||||||
|
return this.isShowTip && (this.fileType || this.fileSize);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 上传前loading加载
|
||||||
|
handleBeforeUpload(file) {
|
||||||
|
let isImg = false;
|
||||||
|
if (this.fileType.length) {
|
||||||
|
let fileExtension = "";
|
||||||
|
if (file.name.lastIndexOf(".") > -1) {
|
||||||
|
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||||
|
}
|
||||||
|
isImg = this.fileType.some((type) => {
|
||||||
|
if (file.type.indexOf(type) > -1) return true;
|
||||||
|
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
isImg = file.type.indexOf("image") > -1;
|
||||||
|
}
|
||||||
|
const isJPG = file.type === "image/jpeg";
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
|
if (!isJPG) {
|
||||||
|
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||||||
|
}
|
||||||
|
if (!isLt2M) {
|
||||||
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||||
|
}
|
||||||
|
this.number++;
|
||||||
|
return isJPG && isLt2M;
|
||||||
|
},
|
||||||
|
// 文件个数超出
|
||||||
|
handleExceed() {
|
||||||
|
// this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||||
|
},
|
||||||
|
// 上传成功回调
|
||||||
|
handleUploadSuccess(res, file) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.uploadList.push({ name: res.fileName, url: res.fileName });
|
||||||
|
this.uploadedSuccessfully();
|
||||||
|
} else {
|
||||||
|
this.number--;
|
||||||
|
// this.$modal.closeLoading();
|
||||||
|
// this.$modal.msgError(res.msg);
|
||||||
|
this.$refs.imageUpload.handleRemove(file);
|
||||||
|
this.uploadedSuccessfully();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除图片
|
||||||
|
handleDelete(file) {
|
||||||
|
const findex = this.fileList.map((f) => f.name).indexOf(file.name);
|
||||||
|
if (findex > -1) {
|
||||||
|
this.fileList.splice(findex, 1);
|
||||||
|
this.$emit("input", this.listToString(this.fileList));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 上传失败
|
||||||
|
handleUploadError() {
|
||||||
|
// this.$modal.msgError("上传图片失败，请重试");
|
||||||
|
// this.$modal.closeLoading();
|
||||||
|
},
|
||||||
|
// 上传结束处理
|
||||||
|
uploadedSuccessfully() {
|
||||||
|
if (this.number > 0 && this.uploadList.length === this.number) {
|
||||||
|
this.fileList = this.fileList.concat(this.uploadList);
|
||||||
|
this.uploadList = [];
|
||||||
|
this.number = 0;
|
||||||
|
this.$emit("input", this.listToString(this.fileList));
|
||||||
|
// this.$modal.closeLoading();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 预览
|
||||||
|
handlePictureCardPreview(file) {
|
||||||
|
this.dialogImageUrl = file.url;
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
// 对象转成指定字符串分隔
|
||||||
|
listToString(list, separator) {
|
||||||
|
let strs = "";
|
||||||
|
separator = separator || ",";
|
||||||
|
for (let i in list) {
|
||||||
|
if (list[i].url) {
|
||||||
|
strs += list[i].url.replace(this.baseUrl, "") + separator;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return strs != "" ? strs.substr(0, strs.length - 1) : "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
// .el-upload--picture-card 控制加号部分
|
||||||
|
::v-deep.hide .el-upload--picture-card {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
// 去掉动画效果
|
||||||
|
::v-deep .el-list-enter-active,
|
||||||
|
::v-deep .el-list-leave-active {
|
||||||
|
transition: all 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-list-enter,
|
||||||
|
.el-list-leave-active {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,419 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="content">
|
||||||
|
<div class="btn">
|
||||||
|
<p @click="send">发布题目</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">题目推荐</div>
|
||||||
|
|
||||||
|
<div class="item" v-for="(item, index) in list" :key="index">
|
||||||
|
<img :src="item.questionImage" alt="" />
|
||||||
|
<div class="item_box">
|
||||||
|
<p>{{ item.questionTitle }}</p>
|
||||||
|
<p>{{ item.content }}</p>
|
||||||
|
<div class="bottom_item">
|
||||||
|
<p class="time">{{ item.questionTitle }} 发布于 {{ item.createTime }}</p>
|
||||||
|
<div class="btns">
|
||||||
|
<p @click="answer(item.id)">答题</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
title="发布题目"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
width="40%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
>
|
||||||
|
<!-- <p style="text-align: center;">发布题目</p> -->
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="https://9miao.fun:6838/prod-api/common/alibabaUpload"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:headers="headerObj"
|
||||||
|
>
|
||||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||||
|
</el-upload>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-form ref="form" :model="form" label-width="80px">
|
||||||
|
<el-form-item label="题目名称">
|
||||||
|
<el-input v-model="form.questionTitle"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="发布人">
|
||||||
|
<el-input v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="发布内容">
|
||||||
|
<el-input v-model="form.content"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="选项A">
|
||||||
|
<el-input v-model="form.content1"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="选项B">
|
||||||
|
<el-input v-model="form.content2"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="选项C">
|
||||||
|
<el-input v-model="form.content3"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="选项D">
|
||||||
|
<el-input v-model="form.content4"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="upload">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
title="答题"
|
||||||
|
:visible.sync="dialogVisible1"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
>
|
||||||
|
<div class="radio">
|
||||||
|
<el-radio v-for="(iteme,ind) in sublist" v-model="radio" :key="ind" :label="iteme.optionName">{{iteme.content}}</el-radio>
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="uploads">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { apiServe } from '@/api/api.js'
|
||||||
|
export default {
|
||||||
|
name: "WenhuaWebuiZhiShi",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [
|
||||||
|
],
|
||||||
|
headerObj: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"saToken" : localStorage.getItem('token')
|
||||||
|
},
|
||||||
|
dialogVisible: false,
|
||||||
|
|
||||||
|
dialogVisible1: false,
|
||||||
|
|
||||||
|
form: {},
|
||||||
|
|
||||||
|
imageUrl: "",
|
||||||
|
|
||||||
|
radio: "",
|
||||||
|
sublist:'',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
let token = localStorage.getItem('token')
|
||||||
|
console.log(token);
|
||||||
|
if(!token){
|
||||||
|
if(!token){
|
||||||
|
this.$confirm("您还未登录，是否前去登录?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
// 跳转登录
|
||||||
|
this.$router.push("/login");
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: "info",
|
||||||
|
message: "已取消",
|
||||||
|
});
|
||||||
|
this.$router.push("/");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.searchUser()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
send() {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
searchUser() {
|
||||||
|
|
||||||
|
apiServe.getWishData('').then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.list = res.data.data
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleClose(done) {
|
||||||
|
this.$confirm("确认关闭？")
|
||||||
|
.then((_) => {
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch((_) => {});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleAvatarSuccess(res, file) {
|
||||||
|
this.imageUrl = URL.createObjectURL(file.raw);
|
||||||
|
console.log(this.imageUrl);
|
||||||
|
},
|
||||||
|
|
||||||
|
upload() {
|
||||||
|
// 若验证成功 此时应该调登录接口
|
||||||
|
let data = {
|
||||||
|
questionTitle: this.form.questionTitle,
|
||||||
|
questionImage: this.imageUrl,
|
||||||
|
content: this.form.content,
|
||||||
|
optionReqVo:[
|
||||||
|
{
|
||||||
|
"optionName":"Option 1",
|
||||||
|
"questionId": 1,
|
||||||
|
"content":this.form.content1,
|
||||||
|
"isCorrect": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"optionName":"Option 2",
|
||||||
|
"questionId": 2,
|
||||||
|
"content":this.form.content2,
|
||||||
|
"isCorrect": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"optionName":"Option 3",
|
||||||
|
"questionId": 3,
|
||||||
|
"content":this.form.content3,
|
||||||
|
"isCorrect": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"optionName":"Option 4",
|
||||||
|
"questionId": 4,
|
||||||
|
"content":this.form.content4,
|
||||||
|
"isCorrect": 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
apiServe.getWish(data).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.$message({
|
||||||
|
message: '发布成功',
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
location.reload();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
|
||||||
|
uploads() {
|
||||||
|
apiServe.getwishdt(this.radio).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.$message({
|
||||||
|
message: "答题成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
this.dialogVisible1 = false;
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
answer(id) {
|
||||||
|
apiServe.getwishxx(id).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.sublist = res.data.data
|
||||||
|
});
|
||||||
|
this.dialogVisible1 = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box::v-deep {
|
||||||
|
height: 100%;
|
||||||
|
// background-color: #ccc;
|
||||||
|
padding: 50px 60px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 1000px;
|
||||||
|
// height: 300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// align-items: c;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
// width: 100px;
|
||||||
|
// background-color: rgba(0, 0, 0, alpha);
|
||||||
|
// padding: 15px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 150px;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: rgba(22, 155, 213, 1);
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 7px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 20px;
|
||||||
|
// margin-left: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_box {
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.el-radio {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:first-child {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:nth-child(2) {
|
||||||
|
// margin-bottom: 30px;
|
||||||
|
// width: 600px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #979797;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-line-clamp: 3; //显示几行
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom_item {
|
||||||
|
width: 600px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 30px;
|
||||||
|
// position: relative;
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 14px !important;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
// width: 100px;
|
||||||
|
// background-color: rgba(0, 0, 0, alpha);
|
||||||
|
// padding: 15px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
background-color: rgba(22, 155, 213, 1);
|
||||||
|
font-size: 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.avatar-uploader .el-upload {
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.avatar-uploader .el-upload:hover {
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
.avatar-uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
line-height: 178px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,320 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">
|
||||||
|
<img src="../../assets/56.jpg" alt="" />
|
||||||
|
<p>厄斐琉斯</p>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="item_title">{{ this.list.cultureTitle }}</div>
|
||||||
|
<div class="item_content" v-html="this.list.cultureContent"></div>
|
||||||
|
<div class="imgs">
|
||||||
|
<img :src="this.list.cultureImage" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search">
|
||||||
|
<input type="text" placeholder="说点什么吧！！！~~~~" v-model="commentContent" />
|
||||||
|
<div class="btns">
|
||||||
|
<p @click="answer">发送评论</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="answerList">
|
||||||
|
<div class="item_answer" v-for="(item, index) in answerList" :key="index">
|
||||||
|
<div class="title">
|
||||||
|
<img src="../../assets/56.jpg" alt="" />
|
||||||
|
<div>
|
||||||
|
<p>{{ item.name }}</p>
|
||||||
|
<p style="margin-top: 10px">{{ item.likeNum }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="item_content">{{ item.commentContent }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { apiServe } from '@/api/api';
|
||||||
|
export default {
|
||||||
|
name: "WenhuaWebuiZhiShiDesc",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id:null,
|
||||||
|
uid:null,
|
||||||
|
list:[],
|
||||||
|
answerList:[],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
// 从路由的 query 中获取参数
|
||||||
|
this.id = this.$route.query.id;
|
||||||
|
this.uid = localStorage.getItem('userid')
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.searchUser()
|
||||||
|
this.pinglist()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
searchUser() {
|
||||||
|
|
||||||
|
apiServe.Clwh(this.id).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.list = res.data.data
|
||||||
|
});
|
||||||
|
},
|
||||||
|
pinglist() {
|
||||||
|
apiServe.pinglun(this.id).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.answerList = res.data.data
|
||||||
|
});
|
||||||
|
},
|
||||||
|
answer() {
|
||||||
|
let cdata = {
|
||||||
|
commentContent:this.commentContent,
|
||||||
|
id:this.uid,
|
||||||
|
cid: this.id
|
||||||
|
|
||||||
|
}
|
||||||
|
apiServe.addpinglun(cdata).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.$message({
|
||||||
|
message: "评论成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
location.reload();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box::v-deep {
|
||||||
|
width: 100%;
|
||||||
|
// height: 100vh;
|
||||||
|
// background-color: #ccc;
|
||||||
|
padding: 60px 60px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 1200px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 5px;
|
||||||
|
// margin-left: 30px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: ;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.item_title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_content {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgs {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 150px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.role {
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.total {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.role_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 1200px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
// margin-left: 30px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 500px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ccc !important;
|
||||||
|
padding-left: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
// width: 100px;
|
||||||
|
// background-color: rgba(0, 0, 0, alpha);
|
||||||
|
// padding: 15px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 10px;
|
||||||
|
// position: absolute;
|
||||||
|
// right: 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
background-color: rgba(22, 155, 213, 1);
|
||||||
|
font-size: 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.answerList {
|
||||||
|
width: 1200px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 20px;
|
||||||
|
// margin-left: 50px;
|
||||||
|
|
||||||
|
.item_answer {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #EBEBEB;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: ;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.item_title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_content {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgs {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 150px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.role {
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.total {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.role_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import ElementUI from 'element-ui';
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css';
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
Vue.use(ElementUI);
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import Login from '../views/Login.vue'
|
||||||
|
import register from '../views/register.vue'
|
||||||
|
import HomeHeader from '@/views/commonHeader.vue'
|
||||||
|
import list from './list'
|
||||||
|
import HomeMain from '@/components/index/VueIndex.vue'
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: 'index',
|
||||||
|
components: {
|
||||||
|
default: HomeMain,
|
||||||
|
header: HomeHeader,
|
||||||
|
// footer: HomeFooter
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: Login
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/register',
|
||||||
|
name: 'register',
|
||||||
|
component: register
|
||||||
|
},
|
||||||
|
list,
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
export default {
|
||||||
|
// 定义路径
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
// 动态引入路由 路由的懒加载
|
||||||
|
component: () => import('@/views/HomeView.vue'),
|
||||||
|
// 给indedx定义二级路由
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'index',
|
||||||
|
name: 'index',
|
||||||
|
// 动态引入路由 路由的懒加载
|
||||||
|
component: () => import("@/components/index/VueIndex.vue"),
|
||||||
|
meta: {
|
||||||
|
title: '首页'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'zhishi',
|
||||||
|
name: 'zhishi',
|
||||||
|
// 动态引入路由 路由的懒加载
|
||||||
|
component: () => import("@/components/zhishi/ZhiShi.vue"),
|
||||||
|
meta: {
|
||||||
|
title: '文化小知识'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'desc',
|
||||||
|
name: 'desc',
|
||||||
|
// 动态引入路由 路由的懒加载
|
||||||
|
component: () => import("@/components/zhishi/ZhiShiDesc.vue"),
|
||||||
|
meta: {
|
||||||
|
title: '文化小知识详情'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'liuyan',
|
||||||
|
name: 'liuyan',
|
||||||
|
// 动态引入路由 路由的懒加载
|
||||||
|
component: () => import("@/components/liuyan/LiuYan.vue"),
|
||||||
|
meta: {
|
||||||
|
title: '留言'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'mine',
|
||||||
|
name: 'mine',
|
||||||
|
// 动态引入路由 路由的懒加载
|
||||||
|
component: () => import("@/components/mine/mine.vue"),
|
||||||
|
meta: {
|
||||||
|
title: '个人中心'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'question',
|
||||||
|
name: 'question',
|
||||||
|
// 动态引入路由 路由的懒加载
|
||||||
|
component: () => import("@/components/questDesc/questDesc.vue"),
|
||||||
|
meta: {
|
||||||
|
title: '答题详情'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<commonHeader></commonHeader>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<router-view></router-view>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import commonHeader from "./commonHeader";
|
||||||
|
export default {
|
||||||
|
name: "HomeView",
|
||||||
|
components: {
|
||||||
|
commonHeader,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.home::v-deep {
|
||||||
|
.el-header {
|
||||||
|
// height: 100px;
|
||||||
|
// background-color: #ccc;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.el-card__body,
|
||||||
|
.el-main {
|
||||||
|
padding: 0;
|
||||||
|
background-color: #F5F6F3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
<template>
|
||||||
|
<div class="login">
|
||||||
|
<div class="login_box">
|
||||||
|
<h1>请登录账号</h1>
|
||||||
|
<el-form
|
||||||
|
:model="ruleForm"
|
||||||
|
:rules="rules"
|
||||||
|
ref="ruleForm"
|
||||||
|
label-width="60px"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
>
|
||||||
|
<el-form-item label="账号" prop="userName">
|
||||||
|
<el-input v-model="ruleForm.userName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="passWord">
|
||||||
|
<el-input v-model="ruleForm.passWord" show-password></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
|
||||||
|
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
没有账号，请立即
|
||||||
|
<router-link to="/register">注册</router-link>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { apiServe } from '@/api/api.js'
|
||||||
|
export default {
|
||||||
|
name: "BYEsame2307DLogin",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ruleForm: {
|
||||||
|
userName: '',
|
||||||
|
passWord: ''
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
userName: [
|
||||||
|
// required表示是否必填, message表示验证提示, trigger表示验证触发的方式
|
||||||
|
{
|
||||||
|
required: true, message: '请输入账号', trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
passWord: [
|
||||||
|
// required表示是否必填, message表示验证提示, trigger表示验证触发的方式
|
||||||
|
{
|
||||||
|
required: true, message: '请输入密码', trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
submitForm(formName) {
|
||||||
|
// this.$refs[formName] 相当于
|
||||||
|
// this.$refs['formName'] 相当于
|
||||||
|
// this.$refs.formName
|
||||||
|
|
||||||
|
// validate 对整个表单进行验证
|
||||||
|
this.$refs[formName].validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
// 若验证成功 此时应该调登录接口
|
||||||
|
let data = {
|
||||||
|
username: this.ruleForm.userName,
|
||||||
|
password: this.ruleForm.passWord,
|
||||||
|
}
|
||||||
|
let res = await apiServe.login(data);
|
||||||
|
if (res) {
|
||||||
|
console.log(res);
|
||||||
|
localStorage.setItem('token', res.data.token.data);
|
||||||
|
this.$message({
|
||||||
|
message: '登陆成功',
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
this.$router.push('/')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('表单验证失败');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
// 对整个表单进行重置 将所有字段重置为初始值并移除校验
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.login::v-deep {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.login_box {
|
||||||
|
width: 350px;
|
||||||
|
height: 300px;
|
||||||
|
box-shadow: 0 0 20px #999;
|
||||||
|
padding: 0 20px;
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-form {
|
||||||
|
.el-form-item {
|
||||||
|
&:nth-child(3),
|
||||||
|
&:nth-child(4) {
|
||||||
|
text-align: center;
|
||||||
|
.el-form-item__content {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
<template>
|
||||||
|
<div class="header">
|
||||||
|
<div class="container">
|
||||||
|
<h2>公众文化平台</h2>
|
||||||
|
<div class="box">
|
||||||
|
<el-menu
|
||||||
|
:default-active="this.$route.path"
|
||||||
|
router
|
||||||
|
class="el-menu-demo"
|
||||||
|
mode="horizontal"
|
||||||
|
@select="handleSelect"
|
||||||
|
>
|
||||||
|
<el-menu-item index="/index">首页</el-menu-item>
|
||||||
|
<el-menu-item index="/zhishi">文化小知识</el-menu-item>
|
||||||
|
<el-menu-item index="/liuyan">留言板</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
<el-dropdown>
|
||||||
|
<div class="ronde" @click="handleOut">
|
||||||
|
<img src="../assets/mine.png" alt="" v-if="!token"/>
|
||||||
|
<img :src="img" alt="">
|
||||||
|
</div>
|
||||||
|
<el-dropdown-menu slot="dropdown" v-if="token">
|
||||||
|
<el-dropdown-item>
|
||||||
|
<a href="javascript:;" @click="gomine">个人中心</a>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
userName: localStorage.getItem("userName"),
|
||||||
|
token:'',
|
||||||
|
img:''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.token = localStorage.getItem('token')
|
||||||
|
this.img = localStorage.getItem('img')
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleOut() {
|
||||||
|
let token = localStorage.getItem('token')
|
||||||
|
if(!token){
|
||||||
|
this.$confirm("是否前去登录?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
// 跳转登录
|
||||||
|
this.$router.push("/login");
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: "info",
|
||||||
|
message: "已取消",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
handleClick() {
|
||||||
|
// this.$store.state.Collapse.isCollapse = !this.$store.state.Collapse.isCollapse
|
||||||
|
this.$store.commit(
|
||||||
|
"changeCollapse",
|
||||||
|
!this.$store.state.Collapse.isCollapse
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// 触发全局组件 在vuex 中存储的状态
|
||||||
|
openUserDialog() {
|
||||||
|
this.$store.commit("changeDialogUserId", "");
|
||||||
|
this.$store.commit("changeDialogUserForm", true);
|
||||||
|
},
|
||||||
|
gomine(){
|
||||||
|
this.$router.push("/mine");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 1200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.el-menu-demo {
|
||||||
|
margin-right: 30px;
|
||||||
|
// background-color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ronde {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-right: 50px;
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
<template>
|
||||||
|
<div class="register">
|
||||||
|
<div class="register_box">
|
||||||
|
<h1>请注册账号</h1>
|
||||||
|
<el-form
|
||||||
|
:model="ruleForm"
|
||||||
|
:rules="rules"
|
||||||
|
ref="ruleForm"
|
||||||
|
label-width="64px"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
>
|
||||||
|
<el-form-item label="用户名" prop="userName">
|
||||||
|
<el-input v-model="ruleForm.userName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="passWord">
|
||||||
|
<el-input v-model="ruleForm.passWord" show-password></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="管理员" prop="name">
|
||||||
|
<el-input v-model="ruleForm.name" ></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色">
|
||||||
|
<el-select v-model="ruleForm.value2" clearable placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in role"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click.enter="submitForm('ruleForm')"
|
||||||
|
>注册</el-button
|
||||||
|
>
|
||||||
|
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
已有账号，请立即
|
||||||
|
<router-link to="/login">登录</router-link>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { apiServe } from "@/api/api.js";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ruleForm: {
|
||||||
|
userName: "",
|
||||||
|
passWord: "",
|
||||||
|
name: "",
|
||||||
|
value2:""
|
||||||
|
},
|
||||||
|
role: [
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "超级管理员",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "管理员",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "普通用户",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
userName: [
|
||||||
|
// required表示是否必填, message表示验证提示, trigger表示验证触发的方式
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入账号",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
passWord: [
|
||||||
|
// required表示是否必填, message表示验证提示, trigger表示验证触发的方式
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入密码",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
name: [
|
||||||
|
// required表示是否必填, message表示验证提示, trigger表示验证触发的方式
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入管理员名称",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
role: [
|
||||||
|
// required表示是否必填, message表示验证提示, trigger表示验证触发的方式
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入管理员名称",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
submitForm(formName) {
|
||||||
|
// this.$refs[formName] 相当于
|
||||||
|
// this.$refs['formName'] 相当于
|
||||||
|
// this.$refs.formName
|
||||||
|
// validate 对整个表单进行验证
|
||||||
|
this.$refs[formName].validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
// 若验证成功 此时应该调登录接口
|
||||||
|
let data = {
|
||||||
|
username: this.ruleForm.userName,
|
||||||
|
password: this.ruleForm.passWord,
|
||||||
|
};
|
||||||
|
console.log(data);
|
||||||
|
let res = await apiServe.register(data);
|
||||||
|
if (res) {
|
||||||
|
this.$message({
|
||||||
|
message: "注册成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.$router.push("/login");
|
||||||
|
} else {
|
||||||
|
console.log("表单验证失败");
|
||||||
|
// return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
// 对整个表单进行重置 将所有字段重置为初始值并移除校验
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.register::v-deep {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.register_box {
|
||||||
|
width: 350px;
|
||||||
|
height: 415px;
|
||||||
|
box-shadow: 0 0 20px #999;
|
||||||
|
padding: 0 20px;
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-form {
|
||||||
|
.el-form-item {
|
||||||
|
&:nth-child(5),
|
||||||
|
&:nth-child(6) {
|
||||||
|
text-align: center;
|
||||||
|
.el-form-item__content {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(6) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-select {
|
||||||
|
width: 285px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue