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