初始化最终1.0
This commit is contained in:
虾壳
commit
d73e1f95f1
|
|
@ -0,0 +1,14 @@
|
||||||
|
/* eslint-env node */
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'vue/multi-word-component-names': 0,//不再强制要求组价命名
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"Vue.volar",
|
||||||
|
"dbaeumer.vscode-eslint"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
# zt-sys
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="//unpkg.com/@element-plus/icons-vue"></script>
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"types": ["element-plus/global"]
|
||||||
|
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "zt-sys",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"axios": "^1.7.2",
|
||||||
|
"element-plus": "^2.7.7",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue": "^3.4.29",
|
||||||
|
"vue-router": "^4.3.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.5",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-vue": "^9.23.0",
|
||||||
|
"sass": "^1.77.8",
|
||||||
|
"unplugin-auto-import": "^0.18.0",
|
||||||
|
"unplugin-vue-components": "^0.27.2",
|
||||||
|
"vite": "^5.3.1"
|
||||||
|
},
|
||||||
|
"volta": {
|
||||||
|
"node": "16.18.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup>
|
||||||
|
import { RouterView } from 'vue-router'
|
||||||
|
// import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<RouterView />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import http from "@/utils/http";
|
||||||
|
//添加收藏
|
||||||
|
export const collect= (questionId)=>{
|
||||||
|
return http({
|
||||||
|
url:"/collect",
|
||||||
|
method:"post",
|
||||||
|
data:{
|
||||||
|
questionId
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//取消收藏
|
||||||
|
export const cancelCollect= (questionId)=>{
|
||||||
|
return http({
|
||||||
|
url:"/collect/cancel",
|
||||||
|
method:"post",
|
||||||
|
data:{
|
||||||
|
questionId
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取收藏列表
|
||||||
|
export const getCollectList= ()=>{
|
||||||
|
return http({
|
||||||
|
url:"/collect",
|
||||||
|
method:"get",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import http from "@/utils/http";
|
||||||
|
//获取题目
|
||||||
|
export const getQuestion= (type)=>{
|
||||||
|
if(type==null||type==undefined){
|
||||||
|
type="refresh";
|
||||||
|
}
|
||||||
|
return http({
|
||||||
|
url:"/question/getQuestion",
|
||||||
|
method:"get",
|
||||||
|
params:{
|
||||||
|
type
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//验证题目是否正确
|
||||||
|
export const checkQuestion= ({
|
||||||
|
questionId,
|
||||||
|
answer
|
||||||
|
})=>{
|
||||||
|
return http({
|
||||||
|
url:"/question/validationAnswer",
|
||||||
|
method:"get",
|
||||||
|
params:{
|
||||||
|
questionId,
|
||||||
|
answer
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取题目
|
||||||
|
export const getQuestionByTagName= (tagName)=>{
|
||||||
|
return http({
|
||||||
|
url:"/question/getQuestionByTagName",
|
||||||
|
method:"get",
|
||||||
|
params:{
|
||||||
|
tagName
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取题目答案
|
||||||
|
export const validationAnswer = ({questionId,answer})=>{
|
||||||
|
return http({
|
||||||
|
url:"/question/validationAnswer",
|
||||||
|
method:"get",
|
||||||
|
params:{
|
||||||
|
questionId,
|
||||||
|
answer
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import http from "@/utils/http";
|
||||||
|
|
||||||
|
export const getTags =(tagName)=>{
|
||||||
|
return http({
|
||||||
|
url:"/tag/getTags",
|
||||||
|
method:"get",
|
||||||
|
params:{
|
||||||
|
tagName:tagName
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import httpInstance from '@/utils/http'
|
||||||
|
|
||||||
|
export const uploadImage = (file) => {
|
||||||
|
// 创建一个 FormData 对象
|
||||||
|
const formData = new FormData();
|
||||||
|
// 将文件添加到 FormData
|
||||||
|
formData.append('file', file);
|
||||||
|
|
||||||
|
// 发送 POST 请求
|
||||||
|
return httpInstance({
|
||||||
|
url: `/QiNiu/upload`,
|
||||||
|
method: "post",
|
||||||
|
data: formData, // 将 FormData 对象作为请求体
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import http from "@/utils/http";
|
||||||
|
//登录
|
||||||
|
export const login= (user)=>{
|
||||||
|
return http({
|
||||||
|
url:"/user/login",
|
||||||
|
method:"post",
|
||||||
|
data:user,
|
||||||
|
headers:{
|
||||||
|
isToken:false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//注册
|
||||||
|
export const register= (user)=>{
|
||||||
|
return http({
|
||||||
|
url:"/user/register",
|
||||||
|
method:"post",
|
||||||
|
data:user,
|
||||||
|
headers:{
|
||||||
|
isToken:false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取用户信息
|
||||||
|
export const getUserInfo= ()=>{
|
||||||
|
return http({
|
||||||
|
url:"/user",
|
||||||
|
method:"get"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//修改用户信息
|
||||||
|
export const updateUserInfo= (user)=>{
|
||||||
|
return http.request({
|
||||||
|
url:"/user/update",
|
||||||
|
method:"post",
|
||||||
|
data:user
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition:
|
||||||
|
color 0.5s,
|
||||||
|
background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
html,body{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
<template>
|
||||||
|
<div class="img-upload">
|
||||||
|
<input v-show="0 != 0" ref="input" type="file" name="image" accept="image/*" @change="upload" :v-model="file">
|
||||||
|
<!-- <el-button type="" @click="uploadClick">上传</el-button> -->
|
||||||
|
<div v-if="imageUrl == ''&&!disabled" class="img-upload-box" @click="uploadClick">
|
||||||
|
<p>+</p>
|
||||||
|
</div>
|
||||||
|
<!-- <img class="img-img" v-if="imageUrl!=''" :src="imageUrl" alt="" style="height: 100%;"> -->
|
||||||
|
<el-image class="img-img" v-if="imageUrl != ''" style="height:100%" :src="imageUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
|
||||||
|
:preview-src-list="[imageUrl]" fit="cover" />
|
||||||
|
<el-button v-if="imageUrl != ''&&!disabled" type="primary" class="img-button" @click="uploadClick">修改头像</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.img-upload {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-img:hover + .img-button {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-button{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.img-upload-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
import { uploadImage } from '@/api/upload/upload';
|
||||||
|
import { onMounted, ref, watch } from 'vue';
|
||||||
|
// 抛出事件
|
||||||
|
const emit = defineEmits(['upload']);
|
||||||
|
const props=defineProps({
|
||||||
|
disabled:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
image:{
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
watch(props.image,(newV)=>{
|
||||||
|
if(newV!=null){
|
||||||
|
console.log("传入了图片")
|
||||||
|
imageUrl.value=newV;
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
deep: true})
|
||||||
|
// const
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
//文件对象
|
||||||
|
const file = ref(null);
|
||||||
|
//上传框dom
|
||||||
|
const input = ref(null);
|
||||||
|
//图片url
|
||||||
|
const imageUrl = ref('');
|
||||||
|
//点击开启上传
|
||||||
|
const uploadClick = () => {
|
||||||
|
input.value.click();
|
||||||
|
}
|
||||||
|
//上传
|
||||||
|
const toUploadImage = async () => {
|
||||||
|
let res = await uploadImage(file.value);
|
||||||
|
if (res.code == 200) {
|
||||||
|
//成功
|
||||||
|
return res.url;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const upload = async (e) => {
|
||||||
|
let imgMaxSize = 1024 * 1024 * 4;
|
||||||
|
if (e.target.files[0].size > imgMaxSize) {
|
||||||
|
alert("图片大小不能超过4M");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (['jpeg', 'png', 'gif', 'jpg'].indexOf(e.target.files[0].type.split("/")[1]) < 0) {
|
||||||
|
//用你选择组件的报错弹窗就行，报出以下提醒
|
||||||
|
alert("上传的文件必须是图片格式");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
file.value = e.target.files[0];
|
||||||
|
// alert("上传文件");
|
||||||
|
let url = await toUploadImage();
|
||||||
|
if (url != null) {
|
||||||
|
imageUrl.value = url;
|
||||||
|
emit('upload', url);
|
||||||
|
} else {
|
||||||
|
alert("上传失败");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const updateUrl=(img)=>{
|
||||||
|
file.value=null;
|
||||||
|
if(img==null){
|
||||||
|
imageUrl.value='';
|
||||||
|
return ;
|
||||||
|
}
|
||||||
|
imageUrl.value=img;
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
if(props.image!=''){
|
||||||
|
updateUrl(props.image);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//暴露方法
|
||||||
|
defineExpose(
|
||||||
|
{
|
||||||
|
updateUrl
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<template>
|
||||||
|
<div class="topicInfoBox">
|
||||||
|
<div class="introduce title">
|
||||||
|
[{{ props.type=="select"?"选择题":"填空题" }}]{{ props.introduce }}
|
||||||
|
</div>
|
||||||
|
<div class="introduce tag">
|
||||||
|
<el-tag v-for="itme in props.tags" :key="itme.name" type="primary">{{ itme.name}}</el-tag>
|
||||||
|
</div>
|
||||||
|
<div class="introduce hod">
|
||||||
|
{{ props.topicTitle }}
|
||||||
|
</div>
|
||||||
|
<div class="introduce">
|
||||||
|
<el-radio-group v-if="props.type=='select'" v-model="radio">
|
||||||
|
<el-radio
|
||||||
|
v-for="itme in topicSelect"
|
||||||
|
:key="itme.key"
|
||||||
|
:value="itme.key"
|
||||||
|
>{{ itme.key + "." + itme.name }}</el-radio
|
||||||
|
>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-input v-else v-model="radio" type="textarea" :rows="2" placeholder="请输入内容" ></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="introduce">
|
||||||
|
<el-button v-if="radio != null" type="success" @click="tupClick">提交</el-button>
|
||||||
|
</div>
|
||||||
|
<div v-if="native.isAnswer" class="introduce jg">
|
||||||
|
已作答,<span v-if="!native.correct" style="color: red;">答案错误</span>
|
||||||
|
<span v-else style="color: rgb(17, 255, 0);">答案正确</span><br>
|
||||||
|
<br>
|
||||||
|
<span>你的答案：{{ native.userAnswer }}</span><br>
|
||||||
|
<br>
|
||||||
|
<span>正确答案：{{ ArrayToString(native.correctAnswer) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.topicInfoBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-family: "KaiTi"
|
||||||
|
}
|
||||||
|
.introduce {
|
||||||
|
margin: 10px auto;
|
||||||
|
width: 90%;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 17px;
|
||||||
|
margin-top:30px;
|
||||||
|
}
|
||||||
|
.tag{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.jg{
|
||||||
|
width: 100%;
|
||||||
|
height: 17vw;
|
||||||
|
box-sizing:border-box;
|
||||||
|
padding-top: 19%;
|
||||||
|
padding-left: 23%;
|
||||||
|
font-family: "黑体";
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 17px;
|
||||||
|
// background-color: aqua;
|
||||||
|
background-image: url("@/assets/image/bltt.png");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import { useTopicStore } from "@/stores/topic.js";
|
||||||
|
const topStore = useTopicStore();
|
||||||
|
const radio = ref('');
|
||||||
|
const props = defineProps({
|
||||||
|
id: { type: Number, default: null },
|
||||||
|
videoUrl: { type: String, default: null },
|
||||||
|
topicList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
native:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{
|
||||||
|
return {
|
||||||
|
isAnswer:false,
|
||||||
|
analysis:'解析',
|
||||||
|
correctAnswer:'正确答案',
|
||||||
|
//是否答对
|
||||||
|
correct:false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: { type: String, default: null },
|
||||||
|
topicTitle: { type: String, default: "题目" },
|
||||||
|
introduce: { type: String, default: "介绍" },
|
||||||
|
tags: { type: Array, default: null },
|
||||||
|
});
|
||||||
|
const tupClick=async()=>{
|
||||||
|
let res=await topStore.submitAnswer(radio.value);
|
||||||
|
console.log("res",res);''
|
||||||
|
}
|
||||||
|
const ArrayToString=(arr)=>{
|
||||||
|
if(arr instanceof Array){
|
||||||
|
return arr.join(",");
|
||||||
|
}else if(arr instanceof Object){
|
||||||
|
return arr.toSting();
|
||||||
|
}else{
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const topicSelect = ref([]);
|
||||||
|
onMounted(() => {
|
||||||
|
topicSelect.value = props.topicList;
|
||||||
|
radio.value=props.native.userAnswer?props.native.userAnswer:null;
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<template>
|
||||||
|
<div class="word-list">
|
||||||
|
<!-- {{ props.type }}{{ props }} -->
|
||||||
|
<div
|
||||||
|
v-for="word in words"
|
||||||
|
:key="word"
|
||||||
|
class="word-item"
|
||||||
|
@click="handleWordClick(word)"
|
||||||
|
>
|
||||||
|
{{ word }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref ,watch} from 'vue';
|
||||||
|
import { getTags } from "@/api/tag/tag";
|
||||||
|
const emit=defineEmits(['select'])
|
||||||
|
const props=defineProps({
|
||||||
|
type:{
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const getWords=async(type)=>{
|
||||||
|
let res=await getTags(type);
|
||||||
|
if(res.code==200){
|
||||||
|
words.value=res.data.map(itme=>itme.name);
|
||||||
|
if(words.value.length==0){
|
||||||
|
words.value=['暂无数据']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(() => props.type,(newValue)=>{
|
||||||
|
getWords(newValue);
|
||||||
|
console.log("props",newValue);
|
||||||
|
},{
|
||||||
|
//深度监听
|
||||||
|
deep: true, // 启用深度监听
|
||||||
|
})
|
||||||
|
// 包含所有可点击词的数组
|
||||||
|
const words = ref([
|
||||||
|
'高数上', '高数下', '线性代数', '数学分析', '解析几何',
|
||||||
|
'概率论与数理统计', '复变函数', '实变函数', '常微分方程',
|
||||||
|
'近世代数', '数据结构', 'C语言', '软件工程类', '大学物理（简明）',
|
||||||
|
'物理实验', '力学', '热学', '光学', '电磁学', '原子物理学',
|
||||||
|
'物理专业', '高中物理', '初中物理', '高中化学', '初中化学',
|
||||||
|
'高中数学', '初中数学', '小学数学', '高中生物', '初中生物',
|
||||||
|
'有机化学', '无机化学', '分析化学', '物理化学', '结构化学',
|
||||||
|
'高分子化学', '配位化学', '生物化学', '普通生物学', '细胞生物学',
|
||||||
|
'遗传学', '微生物学', '植物学', '动物学', '数学', '物理', '化学', '生物',
|
||||||
|
'法学', '经济学', '其他'
|
||||||
|
]);
|
||||||
|
const handleWordClick = (word) => {
|
||||||
|
console.log(`Clicked word: ${word}`);
|
||||||
|
emit('select',word);
|
||||||
|
// 这里可以抛出一个事件，或者调用其他方法
|
||||||
|
};
|
||||||
|
onMounted(()=>{
|
||||||
|
getWords();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.word-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* gap: 10px; */
|
||||||
|
}
|
||||||
|
.word-item {
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid #43CF7C;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none; /* 防止用户选择文本 */
|
||||||
|
}
|
||||||
|
.word-item:hover {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<template>
|
||||||
|
<div class="video-container">
|
||||||
|
<video
|
||||||
|
ref="videoRef"
|
||||||
|
:src="props.src"
|
||||||
|
width="100%"
|
||||||
|
height="400px"
|
||||||
|
controls
|
||||||
|
@play="handlePlay"
|
||||||
|
@fullscreenchange="handleFullscreenChange"
|
||||||
|
>
|
||||||
|
您的浏览器不支持 video 标签。
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted, onUnmounted } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
src: String
|
||||||
|
});
|
||||||
|
|
||||||
|
const videoSrc = ref(props.src);
|
||||||
|
const videoRef = ref(null);
|
||||||
|
const isFullscreen = ref(false);
|
||||||
|
|
||||||
|
const handlePlay = () => {
|
||||||
|
console.log('视频开始播放');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFullscreenChange = () => {
|
||||||
|
isFullscreen.value = document.fullscreenElement === videoRef.value;
|
||||||
|
};
|
||||||
|
watch(() => props.src, (newSrc) => {
|
||||||
|
videoSrc.value = newSrc;
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
console.log('视频组件挂载完成');
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
console.log('视频组件卸载');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.video-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 640px; /* 可以根据需要调整 */
|
||||||
|
/* margin: 0 auto; */
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
<template>
|
||||||
|
<div class="nav">
|
||||||
|
<div class="logo-box"><span class="loogText">Xuaua</span></div>
|
||||||
|
<div>
|
||||||
|
<el-popover :width="700" trigger="click">
|
||||||
|
<template #reference>
|
||||||
|
<div class="search-box">
|
||||||
|
<div class="selectInput">
|
||||||
|
<div @click="selectClick">
|
||||||
|
<el-icon :size="20" >
|
||||||
|
<Search />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="搜索关键词" v-model="type" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<TypeSelect @select="selectInput" :type="type"></TypeSelect>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
<div @click="toUser" class="user-avatar">
|
||||||
|
<el-avatar :size="40" :src="useSotr.avatar" />{{ useSotr.username }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
// import {defineProps} from "vue"
|
||||||
|
import TypeSelect from "@/components/TypeSelect.vue";
|
||||||
|
import { debounceRef } from "@/utils/debounceRef";
|
||||||
|
import router from "@/router";
|
||||||
|
import { useTopicStore } from "@/stores/topic.js";
|
||||||
|
import {useUserStore } from "@/stores/user.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import "element-plus/theme-chalk/el-message.css";
|
||||||
|
const useSotr=useUserStore();
|
||||||
|
const topStore = useTopicStore();
|
||||||
|
// import { ref } from 'vue'
|
||||||
|
import { Search } from "@element-plus/icons-vue";
|
||||||
|
const type = debounceRef("", 300);
|
||||||
|
const selectInput = (a) => {
|
||||||
|
type.value = a;
|
||||||
|
};
|
||||||
|
const toUser=()=>{
|
||||||
|
router.push({
|
||||||
|
path:"/user"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const selectClick=()=>{
|
||||||
|
// console.log("点击")
|
||||||
|
console.log("123",useSotr)
|
||||||
|
topStore.loadData(type.value);
|
||||||
|
ElMessage({ message: "已切换标签", type: "success" });
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.selectInput {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 7px 10px;
|
||||||
|
border: 2px #000000 solid;
|
||||||
|
border-radius: 30px;
|
||||||
|
input {
|
||||||
|
background-color: #00000000; /* 透明背景 */
|
||||||
|
border: none; /* 无边框 */
|
||||||
|
outline: none; /* 去除聚焦时的轮廓 */
|
||||||
|
padding: 0; /* 无内边距 */
|
||||||
|
margin: 0; /* 无外边距 */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.logo-box {
|
||||||
|
margin-top: 11px;
|
||||||
|
margin-left: 52px;
|
||||||
|
margin-bottom: 11px;
|
||||||
|
}
|
||||||
|
.input-with-select {
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
position: relative;
|
||||||
|
left: 210px;
|
||||||
|
border-radius: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 5px;
|
||||||
|
background: #fefefe;
|
||||||
|
// .search-input{
|
||||||
|
// width: 400px;
|
||||||
|
// height: 38px;
|
||||||
|
// border-radius: 30px;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.user-avatar {
|
||||||
|
position: absolute;
|
||||||
|
right: 2%;
|
||||||
|
}
|
||||||
|
.loogText {
|
||||||
|
font-size: 30px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
// 如果您正在使用CDN引入，请删除下面一行。
|
||||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
app.component(key, component)
|
||||||
|
}
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import TokenService from '@/utils/token'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: () => import('@/views/home/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'LOGIN',
|
||||||
|
component: () => import('@/views/login/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user',
|
||||||
|
name: 'USER',
|
||||||
|
component: () => import('@/views/user/index.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
// 定义全局前置守卫
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
// 假设 token 存储在 store 中
|
||||||
|
const hasToken =TokenService.hasToken();
|
||||||
|
|
||||||
|
if (to.path === '/login') {
|
||||||
|
// 如果目标是登录页面，则允许访问
|
||||||
|
next()
|
||||||
|
} else if (hasToken) {
|
||||||
|
// 如果用户有 token，则允许访问其他页面
|
||||||
|
next()
|
||||||
|
} else {
|
||||||
|
// 如果用户没有 token，则重定向到登录页面
|
||||||
|
next('/login')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useCounterStore = defineStore('counter', () => {
|
||||||
|
const count = ref(0)
|
||||||
|
const doubleCount = computed(() => count.value * 2)
|
||||||
|
function increment() {
|
||||||
|
count.value++
|
||||||
|
}
|
||||||
|
|
||||||
|
return { count, doubleCount, increment }
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { getTagList } from "@/api/tag/tag";
|
||||||
|
|
||||||
|
export const useTagStore = defineStore("useTagStore", {
|
||||||
|
state: () => ({
|
||||||
|
count: 0,
|
||||||
|
tagList: [],
|
||||||
|
Val: "测试"
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
async getData(name = null) {
|
||||||
|
const res = await getTagList(name);
|
||||||
|
console.log(res);
|
||||||
|
this.tagList = res.data; // 假设 res.data 是你要更新的标签列表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,174 @@
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { getQuestionByTagName ,validationAnswer} from '@/api/question/question'
|
||||||
|
import {collect, cancelCollect ,getCollectList} from '@/api/collect/collect'
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import "element-plus/theme-chalk/el-message.css";
|
||||||
|
// import { fa } from 'element-plus/es/locale';
|
||||||
|
export const useTopicStore = defineStore('useTopicStore', () => {
|
||||||
|
//当前标签
|
||||||
|
const tagName = ref('');
|
||||||
|
//当前索引
|
||||||
|
const index = ref(1);
|
||||||
|
//题目列表
|
||||||
|
const Topics=ref([]);
|
||||||
|
//当前题目
|
||||||
|
const Topic=computed(()=>{
|
||||||
|
return Topics.value[index.value-1];
|
||||||
|
});
|
||||||
|
//收藏列表
|
||||||
|
const collectTopics=ref([]);
|
||||||
|
//收藏列表id
|
||||||
|
const collectTopicIds=computed(()=>{
|
||||||
|
return collectTopics.value.map(item=>item.id);
|
||||||
|
})
|
||||||
|
const count = computed(()=>Topics.value.length);
|
||||||
|
const init=()=>{
|
||||||
|
if(Topics.value.length==0){
|
||||||
|
CollectList();
|
||||||
|
getData();
|
||||||
|
console.log("刷新数据");
|
||||||
|
}else{
|
||||||
|
console.log("已存在");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//设置标签
|
||||||
|
const setTagName=(name)=>{
|
||||||
|
tagName.value=name;
|
||||||
|
}
|
||||||
|
//根据传入标签情况判断是刷新还是加载
|
||||||
|
const loadData=async(name)=>{
|
||||||
|
if(name===tagName.value){
|
||||||
|
await getData();
|
||||||
|
}else{
|
||||||
|
setTagName(name)
|
||||||
|
await refresh();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//刷新
|
||||||
|
const refresh=async()=>{
|
||||||
|
clear();
|
||||||
|
let res=await getQuestionByTagName(tagName.value);
|
||||||
|
if(res.code==200){
|
||||||
|
res.data=res.data.map(e=>{
|
||||||
|
return {
|
||||||
|
...e,
|
||||||
|
isCollect:collectTopicIds.value.includes(e.id),
|
||||||
|
|
||||||
|
}})
|
||||||
|
Topics.value=res.data;
|
||||||
|
index.value=Topics.value.length>0?1:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//加载数据
|
||||||
|
const getData=async()=>{
|
||||||
|
let res=await getQuestionByTagName(tagName.value);
|
||||||
|
if(res.code==200){
|
||||||
|
res.data=res.data.map(e=>{
|
||||||
|
return {
|
||||||
|
...e,
|
||||||
|
isCollect:collectTopicIds.value.includes(e.id),
|
||||||
|
|
||||||
|
}})
|
||||||
|
Topics.value=[...Topics.value,...res.data];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//清空数据
|
||||||
|
const clear=()=>{
|
||||||
|
index.value=0;
|
||||||
|
Topics.value=[];
|
||||||
|
collectTopics.value=[];
|
||||||
|
|
||||||
|
}
|
||||||
|
//提交答案
|
||||||
|
const submitAnswer=async(answer)=>{
|
||||||
|
//先判断是否已经答过
|
||||||
|
if(Topic.value.isAnswer){
|
||||||
|
ElMessage({ message: "已经做过了", type: "warning" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let res=await validationAnswer({questionId:Topic.value.id,answer});
|
||||||
|
if(res.code==200){
|
||||||
|
setAnswer({
|
||||||
|
isAnswer:true,
|
||||||
|
analysis:res.data.analysis,
|
||||||
|
correctAnswer:res.data.correctAnswer?res.data.correctAnswer:answer,
|
||||||
|
correct:res.data.correct,
|
||||||
|
userAnswer:answer
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//设置答题情况
|
||||||
|
const setAnswer=({isAnswer,analysis,userAnswer,correctAnswer,correct})=>{
|
||||||
|
Topics.value[index.value-1]={
|
||||||
|
...Topic.value,
|
||||||
|
isAnswer,
|
||||||
|
analysis,
|
||||||
|
correctAnswer,
|
||||||
|
correct,
|
||||||
|
userAnswer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//收藏题目
|
||||||
|
const Collect=async()=>{
|
||||||
|
console.log("执行")
|
||||||
|
let res;
|
||||||
|
if(isCollect()){
|
||||||
|
res=await cancelCollect(Topic.value.id);
|
||||||
|
if(res.code==200){
|
||||||
|
ElMessage({ message: "取消收藏", type: "info" });
|
||||||
|
Topics.value[index.value-1].isCollect=false;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
res= await collect(Topic.value.id);
|
||||||
|
if(res.code==200){
|
||||||
|
ElMessage({ message: "收藏成功", type: "info" });
|
||||||
|
Topics.value[index.value-1].isCollect=true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await CollectList();
|
||||||
|
}
|
||||||
|
//上一题
|
||||||
|
const prev=()=>{
|
||||||
|
if(index.value>=1){
|
||||||
|
index.value--;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
//下一题
|
||||||
|
const next=()=>{
|
||||||
|
index.value++;
|
||||||
|
if(index.value>count.value){
|
||||||
|
index.value=count.value;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if(index.value==count.value){
|
||||||
|
getData();
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
//获取收藏题目列表
|
||||||
|
const CollectList=async()=>{
|
||||||
|
let res=await getCollectList();
|
||||||
|
if(res.code==200){
|
||||||
|
collectTopics.value=res.data.map(item=>item.questionVo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//判断是否收藏
|
||||||
|
const isCollect=()=>{
|
||||||
|
if(count.value==0){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
console.log("123",Topic.value,index.value)
|
||||||
|
return collectTopicIds.value.includes(Topic.value.id);
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
init();
|
||||||
|
})
|
||||||
|
return { index, Topics, count,collectTopics ,collectTopicIds,Topic,
|
||||||
|
setAnswer,loadData,setTagName,refresh,submitAnswer,Collect,isCollect,clear,getData,
|
||||||
|
prev,next,CollectList,init}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { getUserInfo } from '../api/user/user'
|
||||||
|
export const useUserStore = defineStore('useUserStore', () => {
|
||||||
|
//用户头像
|
||||||
|
const avatar = ref('')
|
||||||
|
const username = ref('')
|
||||||
|
//手机号
|
||||||
|
const phone = ref('')
|
||||||
|
//备注
|
||||||
|
const remark = ref('')
|
||||||
|
//获取用户信息
|
||||||
|
const UserInfo = async() => {
|
||||||
|
let res= await getUserInfo();
|
||||||
|
console.log("用户信息",res)
|
||||||
|
if(res.code==200){
|
||||||
|
avatar.value=res.data.avatar;
|
||||||
|
username.value=res.data.username;
|
||||||
|
phone.value=res.data.phone;
|
||||||
|
remark.value=res.data.remark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
UserInfo();
|
||||||
|
})
|
||||||
|
return { avatar, username,phone,remark,UserInfo}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
const storage ={
|
||||||
|
setStorage:function(key,value){
|
||||||
|
window.localStorage.setItem(key,JSON.stringify(value))
|
||||||
|
},
|
||||||
|
getStorage:function(key){
|
||||||
|
return JSON.parse(window.localStorage.getItem(key))
|
||||||
|
},
|
||||||
|
removeStorage:function(key){
|
||||||
|
window.localStorage.removeItem(key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default storage
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { customRef } from "vue";
|
||||||
|
/**
|
||||||
|
* 防抖Ref
|
||||||
|
* @param {} value
|
||||||
|
* @param {*} delay
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const debounceRef = (value, delay = 1000) => {
|
||||||
|
let timeout;
|
||||||
|
return customRef((track, trigger) => ({
|
||||||
|
get() {
|
||||||
|
track();
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(() => {
|
||||||
|
value = val;
|
||||||
|
trigger();
|
||||||
|
}, delay);
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
export function debounce(func, delay, immediate) {
|
||||||
|
let timer;
|
||||||
|
return function () {
|
||||||
|
if (timer) clearTimeout(timer);
|
||||||
|
if (immediate) {
|
||||||
|
// 复杂的防抖函数
|
||||||
|
// 判断定时器是否为空，如果为空，则会直接执行回调函数
|
||||||
|
let firstRun = !timer;
|
||||||
|
// 不管定时器是否为空，都会重新开启一个新的定时器,不断输入，不断开启新的定时器，当不在输入的delay后，再次输入就会立即执行回调函数
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
timer = null;
|
||||||
|
}, delay);
|
||||||
|
if (firstRun) {
|
||||||
|
func.apply(this, arguments);
|
||||||
|
}
|
||||||
|
// 简单的防抖函数
|
||||||
|
} else {
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
func.apply(this, arguments);
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import 'element-plus/theme-chalk/el-message.css'
|
||||||
|
import TokenService from '@/utils/token'
|
||||||
|
import router from '@/router'
|
||||||
|
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
||||||
|
const httpInstance=axios.create({
|
||||||
|
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||||
|
timeout: 10000
|
||||||
|
})
|
||||||
|
// axios请求拦截器
|
||||||
|
httpInstance.interceptors.request.use(config => {
|
||||||
|
// 是否需要设置 token
|
||||||
|
const isToken = (config.headers || {}).isToken === false
|
||||||
|
if (TokenService.hasToken() && !isToken) {
|
||||||
|
config.headers['Authorization'] = TokenService.getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
}, e => Promise.reject(e))
|
||||||
|
|
||||||
|
// axios响应式拦截器
|
||||||
|
httpInstance.interceptors.response.use(res => {
|
||||||
|
if (res.data.code === 401){
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
if(res.data.code==0){
|
||||||
|
ElMessage.error(res.data.msg)
|
||||||
|
}
|
||||||
|
return res.data
|
||||||
|
}, e => {
|
||||||
|
return Promise.reject(e)
|
||||||
|
})
|
||||||
|
// let abb=1;
|
||||||
|
export default httpInstance;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
const TokenService = {
|
||||||
|
// 保存 token 到 localStorage
|
||||||
|
saveToken: function(token) {
|
||||||
|
localStorage.setItem('token', token);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 从 localStorage 获取 token
|
||||||
|
getToken: function() {
|
||||||
|
return localStorage.getItem('token');
|
||||||
|
},
|
||||||
|
|
||||||
|
// 移除 localStorage 中的 token
|
||||||
|
removeToken: function() {
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
},
|
||||||
|
|
||||||
|
// 检查是否存在 token
|
||||||
|
hasToken: function() {
|
||||||
|
return this.getToken() !== null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出 TokenService 对象
|
||||||
|
export default TokenService;
|
||||||
|
|
@ -0,0 +1,272 @@
|
||||||
|
<template>
|
||||||
|
<div class="homeBox">
|
||||||
|
<div>
|
||||||
|
<xuaua-header></xuaua-header>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="mainBox">
|
||||||
|
<div class="topicInfo" ref="topicInfoRef" @click="huadong">
|
||||||
|
<div
|
||||||
|
ref="topicInfoItemRef"
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
transition: 0.7s;
|
||||||
|
"
|
||||||
|
:style="'top:' + top"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="itme in topStore.Topics"
|
||||||
|
:key="itme.id"
|
||||||
|
class="topicInfoItem"
|
||||||
|
>
|
||||||
|
<TopicBox
|
||||||
|
:id="itme.id"
|
||||||
|
:videoUrl="itme.videoUrl"
|
||||||
|
:introduce="itme.introduce"
|
||||||
|
:tags="itme.tags"
|
||||||
|
:topicTitle="itme.topicTitle"
|
||||||
|
:type="itme.type"
|
||||||
|
:topicList="itme.xuauaQuestionAnswerList"
|
||||||
|
:native="itme"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="topicAnswer">
|
||||||
|
<div class="answerNav">
|
||||||
|
<div style="flex: 1;">
|
||||||
|
<el-tabs
|
||||||
|
v-model="activeName"
|
||||||
|
class="demo-tabs"
|
||||||
|
@tab-change="handleClick"
|
||||||
|
>
|
||||||
|
<el-tab-pane label="视频" name="视频"></el-tab-pane>
|
||||||
|
<el-tab-pane label="解析" name="解析"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="StarIcon" @click="addCollect">
|
||||||
|
<el-icon
|
||||||
|
v-if="topStore.Topic?.isCollect == true"
|
||||||
|
|
||||||
|
:size="30"
|
||||||
|
color="#FEE082"
|
||||||
|
>
|
||||||
|
<!-- <Star /> -->
|
||||||
|
<StarFilled />
|
||||||
|
</el-icon>
|
||||||
|
<el-icon v-else :size="30" color="#2B2B2B">
|
||||||
|
<Star />
|
||||||
|
<!-- <StarFilled /> -->
|
||||||
|
</el-icon>
|
||||||
|
{{ topStore.Topic?.isCollect == true ? "已" : "未" }}收藏
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="answerInfo">
|
||||||
|
<VideoBox
|
||||||
|
v-if="activeName == '视频'"
|
||||||
|
:src="topStore.Topic?.videoUrl"
|
||||||
|
></VideoBox>
|
||||||
|
<div class="jiexi" v-else>{{ topStore.Topic.analysis }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, computed } from "vue";
|
||||||
|
import xuauaHeader from "@/components/Xuaua_header.vue";
|
||||||
|
import TopicBox from "@/components/TopicBox.vue";
|
||||||
|
import VideoBox from "@/components/VideoBox.vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import "element-plus/theme-chalk/el-message.css";
|
||||||
|
import { useTopicStore } from "@/stores/topic.js";
|
||||||
|
import { debounce } from '@/utils/debounceRef'
|
||||||
|
const topicInfoItemRef = ref(null);
|
||||||
|
const topStore = useTopicStore();
|
||||||
|
const activeName = ref("视频");
|
||||||
|
let mouseDown = false;
|
||||||
|
let lastY = null;
|
||||||
|
let currentY = null;
|
||||||
|
const top = computed(() => {
|
||||||
|
const height = topicInfoItemRef?.value?.clientHeight || 0;
|
||||||
|
return `-${(topStore.index - 1 < 0 ? 0 : topStore.index - 1) * height}px`;
|
||||||
|
});
|
||||||
|
const isCollect = computed(() => {
|
||||||
|
return topStore.isCollect();
|
||||||
|
});
|
||||||
|
const addCollect = () => {
|
||||||
|
debounce(()=>{
|
||||||
|
// alert(1)
|
||||||
|
topStore.Collect();
|
||||||
|
},500,true)();
|
||||||
|
};
|
||||||
|
document.addEventListener("mousedown", function (event) {
|
||||||
|
mouseDown = true;
|
||||||
|
lastY = event.clientY;
|
||||||
|
currentY = event.clientY;
|
||||||
|
document.addEventListener("mousemove", onMouseMove);
|
||||||
|
});
|
||||||
|
// 鼠标移动时触发的事件
|
||||||
|
function onMouseMove(event) {
|
||||||
|
if (mouseDown) {
|
||||||
|
let deltaY = event.clientY - currentY;
|
||||||
|
currentY = event.clientY;
|
||||||
|
setScrollY(deltaY);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 鼠标松开时触发的事件
|
||||||
|
document.addEventListener("mouseup", function (event) {
|
||||||
|
mouseDown = false;
|
||||||
|
let deltaY = event.clientY - lastY;
|
||||||
|
console.log("变化", deltaY);
|
||||||
|
flipPage(deltaY);
|
||||||
|
document.removeEventListener("mousemove", onMouseMove);
|
||||||
|
});
|
||||||
|
const topicInfoRef = ref(null);
|
||||||
|
const setScrollY = (y) => {
|
||||||
|
if (topicInfoRef.value) {
|
||||||
|
topicInfoRef.value.scrollTop = topicInfoRef.value.scrollTop - y;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const flipPage = (y) => {
|
||||||
|
if (topicInfoItemRef.value) {
|
||||||
|
topicInfoRef.value.scrollTop = 0;
|
||||||
|
if (y < -80) {
|
||||||
|
let is = topStore.next();
|
||||||
|
if (!is) {
|
||||||
|
ElMessage({ message: "没有更多了", type: "warning" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (y > 80) {
|
||||||
|
let is = topStore.prev();
|
||||||
|
if (!is) {
|
||||||
|
ElMessage({ message: "到顶了", type: "warning" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleClick = (e) => {
|
||||||
|
if (e == "解析" && !topStore.Topics[topStore.index-1].isAnswer) {
|
||||||
|
ElMessage({ message: "未作答不能查看解析", type: "warning" });
|
||||||
|
setTimeout(() => {
|
||||||
|
activeName.value = "视频";
|
||||||
|
}, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
topStore.init();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.homeBox {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
//占满的剩余空间
|
||||||
|
flex: 1;
|
||||||
|
background-color: #ededed;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.mainBox {
|
||||||
|
width: 97%;
|
||||||
|
height: 97%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20px;
|
||||||
|
.topicInfo {
|
||||||
|
// animation-duration: 2s;
|
||||||
|
// animation-delay: 250ms;
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
// background-color: #f0f9cc;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background-image: url("@/assets/image/tibg.jpg");
|
||||||
|
background-size: cover; // 背景图片铺满元
|
||||||
|
// background-position: center; // 背景图片居中显示
|
||||||
|
background-repeat: no-repeat; // 背景图片不重复
|
||||||
|
background-position: left left;
|
||||||
|
.topicInfoItem {
|
||||||
|
// top: -10px;
|
||||||
|
// animation-duration: 2s;
|
||||||
|
// animation-delay: 250ms;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: content-box;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topicAnswer {
|
||||||
|
width: 69%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.SelectAnswer {
|
||||||
|
width: 97%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 1px #43cf7c solid;
|
||||||
|
height: 7%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.answerInfo {
|
||||||
|
width: 100%;
|
||||||
|
height: 92%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20px;
|
||||||
|
// background-color: #f0f9cc;
|
||||||
|
background-image: url("@/assets/image/tibg.jpg");
|
||||||
|
background-size: cover; // 背景图片铺满元
|
||||||
|
background-position: center; // 背景图片居中显示
|
||||||
|
background-repeat: no-repeat; // 背景图片不重复
|
||||||
|
}
|
||||||
|
// background-color: #F0F9CC;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.selectInput {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 7px 10px;
|
||||||
|
border: 2px #000000 solid;
|
||||||
|
border-radius: 30px;
|
||||||
|
input {
|
||||||
|
background-color: #00000000; /* 透明背景 */
|
||||||
|
border: none; /* 无边框 */
|
||||||
|
outline: none; /* 去除聚焦时的轮廓 */
|
||||||
|
padding: 0; /* 无内边距 */
|
||||||
|
margin: 0; /* 无外边距 */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.jiexi {
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
.answerNav {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.StarIcon {
|
||||||
|
// float: right;
|
||||||
|
margin-right: 3vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
<template>
|
||||||
|
<div class="loginBox">
|
||||||
|
<div class="loginFrom">
|
||||||
|
<!-- <div class="inputBox">
|
||||||
|
账号<input type="text" v-model="user.username" />
|
||||||
|
</div>
|
||||||
|
<div class="inputBox">
|
||||||
|
密码<input type="password" v-model="user.password" />
|
||||||
|
</div>
|
||||||
|
<div class="checkBox">
|
||||||
|
<el-checkbox v-model="remember"></el-checkbox>记住密码
|
||||||
|
</div> -->
|
||||||
|
<el-form >
|
||||||
|
<el-form-item label="账号" prop="username" >
|
||||||
|
<el-input style="width: 200px;height: 30px;border-radius: 15px;" class="inputBox" type="medium" v-model="user.username" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="password" >
|
||||||
|
<el-input style="width: 200px;height: 30px;border-radius: 15px;" v-model="user.password" type="password" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-checkbox v-model="remember">记住密码</el-checkbox>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="btnBox">
|
||||||
|
<el-button size="large" type="success" round @click="toLogin"
|
||||||
|
>登录</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
size="large"
|
||||||
|
type="danger"
|
||||||
|
round
|
||||||
|
@click="dialogFormVisible = true"
|
||||||
|
>注册</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="dialogFormVisible" title="注册新用户" width="500">
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
style="max-width: 600px"
|
||||||
|
:model="ruleForm"
|
||||||
|
status-icon
|
||||||
|
:rules="rules"
|
||||||
|
label-width="auto"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
>
|
||||||
|
<el-form-item label="账号" prop="username">
|
||||||
|
<el-input v-model="ruleForm.username" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="password">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.password"
|
||||||
|
type="password"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="确定密码" prop="password2">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.password2"
|
||||||
|
type="password"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitForm(ruleFormRef)"
|
||||||
|
>注册</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.loginBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: url("@/assets/image/loginbg.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
// padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginFrom {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
border-radius: 10px;
|
||||||
|
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .inputBox {
|
||||||
|
|
||||||
|
// // margin-bottom: 20px;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
el-input{
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkBox {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnBox {
|
||||||
|
width: 80%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import "element-plus/theme-chalk/el-message.css";
|
||||||
|
import { login, register } from "@/api/user/user";
|
||||||
|
import { useTopicStore } from "@/stores/topic.js";
|
||||||
|
const topStore = useTopicStore();
|
||||||
|
import storage from "@/utils/Sotrage";
|
||||||
|
import TokenService from "@/utils/token";
|
||||||
|
import router from "@/router";
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
|
||||||
|
const user = reactive({
|
||||||
|
username: "",
|
||||||
|
password: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const remember = ref(false);
|
||||||
|
|
||||||
|
const toLogin = async () => {
|
||||||
|
if (user.username === "" || user.password === "") {
|
||||||
|
ElMessage({ message: "请输入完整信息", type: "warning" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let res = await login(user);
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage({ message: "登录成功", type: "success" });
|
||||||
|
if (remember.value) {
|
||||||
|
storage.setStorage("username", user.username);
|
||||||
|
storage.setStorage("password", user.password);
|
||||||
|
} else {
|
||||||
|
storage.removeStorage("username");
|
||||||
|
storage.removeStorage("password");
|
||||||
|
}
|
||||||
|
TokenService.saveToken(res.token);
|
||||||
|
router.push("/");
|
||||||
|
}else{
|
||||||
|
ElMessage({ message: res.msg, type: "error" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const ruleFormRef = ref(null);
|
||||||
|
|
||||||
|
const ruleForm = reactive({
|
||||||
|
username: "",
|
||||||
|
password: "",
|
||||||
|
password2: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const usernamevalidate = (rule, value, callback) => {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输入账号"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validatePass = (rule, value, callback) => {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输入密码"));
|
||||||
|
} else {
|
||||||
|
if (ruleForm.password !== "") {
|
||||||
|
if (!ruleFormRef.value) return;
|
||||||
|
ruleFormRef.value.validateField("password2");
|
||||||
|
}
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validatePass2 = (rule, value, callback) => {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输入确认密码"));
|
||||||
|
} else if (value !== ruleForm.password) {
|
||||||
|
callback(new Error("密码不一致"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const rules = reactive({
|
||||||
|
username: [{ validator: usernamevalidate, trigger: "blur" }],
|
||||||
|
password: [{ validator: validatePass, trigger: "blur" }],
|
||||||
|
password2: [{ validator: validatePass2, trigger: "blur" }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const submitForm = (formEl) => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
let res = await register({
|
||||||
|
username: ruleForm.username,
|
||||||
|
password: ruleForm.password,
|
||||||
|
});
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage({ message: "注册成功", type: "success" });
|
||||||
|
dialogFormVisible.value = false;
|
||||||
|
} else {
|
||||||
|
ElMessage({ message: res.msg, type: "error" });
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("error submit!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
user.username = storage.getStorage("username") || "";
|
||||||
|
user.password = storage.getStorage("password") || "";
|
||||||
|
topStore.clear();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,423 @@
|
||||||
|
<template>
|
||||||
|
<div class="userPage">
|
||||||
|
<div style="height: 3vh;margin: 0 auto;width: 97%;">
|
||||||
|
<el-page-header @back="router.push('/')">
|
||||||
|
<template #content>
|
||||||
|
<span class="text-large font-600 mr-3"> 个人信息 </span>
|
||||||
|
</template>
|
||||||
|
<template #title >
|
||||||
|
返回首页
|
||||||
|
</template>
|
||||||
|
</el-page-header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="userBox">
|
||||||
|
<div class="userInfo">
|
||||||
|
<div class="userT" @click="drawer = true">
|
||||||
|
<el-avatar :size="150" :src="useSotr.avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="userName">{{ useSotr.username }}</div>
|
||||||
|
<!-- <div class="userName" @click="router.push('/')">返回首页</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="collectionTopic">
|
||||||
|
<div class="title">收藏</div>
|
||||||
|
<div class="collectionList">
|
||||||
|
<div
|
||||||
|
class="collectionTme"
|
||||||
|
v-for="emit in topStore.collectTopics"
|
||||||
|
:key="emit.id"
|
||||||
|
:Topic="emit"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
[{{ emit.type == "select" ? "选择题" : "填空题" }}]{{
|
||||||
|
emit.introduce
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<el-tag v-for="itme in emit.tags" :key="itme.name" type="primary">{{
|
||||||
|
itme.name
|
||||||
|
}}</el-tag
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<span>
|
||||||
|
{{ emit.topicTitle }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="collectionTme"></div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-drawer
|
||||||
|
v-model="drawer"
|
||||||
|
title="个人信息"
|
||||||
|
direction="ltr"
|
||||||
|
:before-close="handleClose"
|
||||||
|
>
|
||||||
|
<div class="info">
|
||||||
|
<div class="infoItme">
|
||||||
|
<image-upload
|
||||||
|
ref="imgUpload"
|
||||||
|
:image="userForm.avatar"
|
||||||
|
style="width: 200px; height: 200px; display: inline-block"
|
||||||
|
@upload="upload"
|
||||||
|
:disabled="!isUpdata"
|
||||||
|
></image-upload>
|
||||||
|
</div>
|
||||||
|
<div class="infoItme">
|
||||||
|
<div class="text">用户名</div>
|
||||||
|
<el-input
|
||||||
|
v-model="userForm.username"
|
||||||
|
style="width: 240px"
|
||||||
|
placeholder="Please input"
|
||||||
|
:disabled="!isUpdata"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="infoItme">
|
||||||
|
<div class="text">手机号</div>
|
||||||
|
<el-input
|
||||||
|
v-model="userForm.phone"
|
||||||
|
style="width: 240px"
|
||||||
|
placeholder="未登记手机号"
|
||||||
|
:disabled="!isUpdata"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<el-button v-if="!isUpdata" type="success" @click="isUpdata = true"
|
||||||
|
>更改信息</el-button
|
||||||
|
>
|
||||||
|
<el-button v-else type="success" @click="updateClick">保存</el-button>
|
||||||
|
<el-button type="danger" @click="utLogin">退出登录</el-button>
|
||||||
|
<el-button type="danger" @click="dialogFormVisible = true"
|
||||||
|
>更改密码</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-drawer>
|
||||||
|
<el-dialog v-model="dialogFormVisible" title="修改密码" width="500">
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
style="max-width: 600px"
|
||||||
|
:model="ruleForm"
|
||||||
|
status-icon
|
||||||
|
:rules="rules"
|
||||||
|
label-width="auto"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
>
|
||||||
|
<el-form-item label="旧密码" prop="password">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.password"
|
||||||
|
type="password"
|
||||||
|
utocomplete="off"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="新密码" prop="newPassword">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.newPassword"
|
||||||
|
type="password"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="确定密码" prop="newPassword2">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.newPassword2"
|
||||||
|
type="password"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitForm(ruleFormRef)"
|
||||||
|
>确定</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.userPage {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.userBox {
|
||||||
|
border-radius: 20px 20px 0 0;
|
||||||
|
width: 100vw;
|
||||||
|
flex: 1;
|
||||||
|
// height: 100vh;
|
||||||
|
background-image: url("@/assets/image/userbg.jpg");
|
||||||
|
background-size: cover; // 背景图片铺满元素
|
||||||
|
background-position: center; // 背景图片居中显示
|
||||||
|
background-repeat: no-repeat; // 背景图片不重复
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.userInfo {
|
||||||
|
height: 90%;
|
||||||
|
width: 20%;
|
||||||
|
// background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.userName {
|
||||||
|
margin-top: 30px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userT {
|
||||||
|
margin-top: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collectionTopic {
|
||||||
|
margin-left: 30px;
|
||||||
|
width: 60%;
|
||||||
|
height: 90%;
|
||||||
|
// background-color: #ff0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 90%;
|
||||||
|
height: 5%;
|
||||||
|
background-color: #ededec;
|
||||||
|
background-image: url("@/assets/image/btbg.png");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
border-radius: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collectionList {
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
/* Firefox */
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
|
||||||
|
/* IE 10+ */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
/* Chrome Safari */
|
||||||
|
}
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
width: 90%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.collectionTme {
|
||||||
|
/* 宽度是固定好的 */
|
||||||
|
width: 30%;
|
||||||
|
height: 47%;
|
||||||
|
// background-color: #d2fce3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 1%;
|
||||||
|
padding-left: 5%;
|
||||||
|
font-family: "黑体";
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 17px;
|
||||||
|
background-image: url("@/assets/image/zhibg.png");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collectionList:after {
|
||||||
|
content: "";
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoItme {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 80%;
|
||||||
|
margin: 20px auto;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 30%;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
import router from "@/router";
|
||||||
|
import ImageUpload from "@/components/ImageUpload.vue";
|
||||||
|
import { ElMessage, ElStep } from "element-plus";
|
||||||
|
import { ElMessageBox } from "element-plus";
|
||||||
|
import "element-plus/theme-chalk/el-message.css";
|
||||||
|
import { login } from "@/api/user/user";
|
||||||
|
import { updateUserInfo } from "@/api/user/user";
|
||||||
|
import { onMounted, reactive, ref } from "vue";
|
||||||
|
import { useTopicStore } from "@/stores/topic.js";
|
||||||
|
import { useUserStore } from "@/stores/user.js";
|
||||||
|
import TokenService from "@/utils/token";
|
||||||
|
const upload = (url) => {
|
||||||
|
userForm.avatar = url;
|
||||||
|
};
|
||||||
|
const utLogin = () => {
|
||||||
|
TokenService.removeToken();
|
||||||
|
router.push("/login");
|
||||||
|
};
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const useSotr = useUserStore();
|
||||||
|
const topStore = useTopicStore();
|
||||||
|
const ruleFormRef = ref(null);
|
||||||
|
const drawer = ref(false);
|
||||||
|
const isUpdata = ref(false);
|
||||||
|
const userForm = reactive({
|
||||||
|
username: null,
|
||||||
|
phone: null,
|
||||||
|
remark: null,
|
||||||
|
avatar: null,
|
||||||
|
});
|
||||||
|
const updateClick = async () => {
|
||||||
|
if (
|
||||||
|
userForm.username == null ||
|
||||||
|
userForm.phone == null ||
|
||||||
|
userForm.avatar == null
|
||||||
|
) {
|
||||||
|
ElMessage({ message: "请完善信息", type: "error" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let res = await updateUserInfo(userForm);
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({ message: "更新成功", type: "success" });
|
||||||
|
isUpdata.value = false;
|
||||||
|
await useSotr.UserInfo();
|
||||||
|
userForm.username = useSotr.username;
|
||||||
|
userForm.phone = useSotr.phone;
|
||||||
|
userForm.remark = useSotr.remark;
|
||||||
|
userForm.avatar = useSotr.avatar;
|
||||||
|
isUpdata.value = false;
|
||||||
|
}
|
||||||
|
console.log(res);
|
||||||
|
};
|
||||||
|
const handleClose = (done) => {
|
||||||
|
if (isUpdata.value) {
|
||||||
|
ElMessageBox.confirm("更改未保存，确定退出吗？", {
|
||||||
|
confirmButtonText: "确定退出",
|
||||||
|
cancelButtonText: "继续修改",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
userForm.username = useSotr.username;
|
||||||
|
userForm.phone = useSotr.phone;
|
||||||
|
userForm.remark = useSotr.remark;
|
||||||
|
userForm.avatar = useSotr.avatar;
|
||||||
|
isUpdata.value = false;
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// catch error
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const ruleForm = reactive({
|
||||||
|
password: "",
|
||||||
|
newPassword: "",
|
||||||
|
newPassword2: "",
|
||||||
|
});
|
||||||
|
const usernamevalidate = async (rule, value, callback) => {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输旧密码"));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
let res = await login({ username: useSotr.username, password: value });
|
||||||
|
if (res.code == 200) {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
callback(new Error("密码错误"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validatePass = (rule, value, callback) => {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输新入密码"));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (ruleForm.password !== "") {
|
||||||
|
if (!ruleFormRef.value) return;
|
||||||
|
ruleFormRef.value.validateField("》》");
|
||||||
|
}
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validatePass2 = (rule, value, callback) => {
|
||||||
|
if (value === "") {
|
||||||
|
callback(new Error("请输确认新密码"));
|
||||||
|
}
|
||||||
|
else if (value !== ruleForm.newPassword) {
|
||||||
|
callback(new Error("密码不一致"));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const submitForm = () => {
|
||||||
|
ruleFormRef.value.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
let res = await updateUserInfo({
|
||||||
|
password: ruleForm.newPassword,
|
||||||
|
});
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({ message: "更新成功,请重新登录账号", type: "success" });
|
||||||
|
dialogFormVisible.value = false;
|
||||||
|
ruleForm.password = "";
|
||||||
|
ruleForm.newPassword = "";
|
||||||
|
ruleForm.newPassword2 = "";
|
||||||
|
TokenService.removeToken();
|
||||||
|
router.push("/login");
|
||||||
|
// await useSotr.UserInfo();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const rules = reactive({
|
||||||
|
password: [{ validator: usernamevalidate, trigger: "blur" }],
|
||||||
|
newPassword: [{ validator: validatePass, trigger: "blur" }],
|
||||||
|
newPassword2: [{ validator: validatePass2, trigger: "blur" }],
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
await useSotr.UserInfo();
|
||||||
|
userForm.username = useSotr.username;
|
||||||
|
userForm.phone = useSotr.phone;
|
||||||
|
userForm.remark = useSotr.remark;
|
||||||
|
userForm.avatar = useSotr.avatar;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
AutoImport({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
Components({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue