答题完整代码
This commit is contained in:
parent
d3ce47bd52
commit
23cb65e721
|
|
@ -1,2 +1,2 @@
|
|||
# VITE_APP_BASE_API = 'http://127.0.0.1:8088'
|
||||
VITE_APP_BASE_API = 'http://aw.9miao.fun/prod-api'
|
||||
VITE_APP_BASE_API = 'https://xuaua.com/prod-api'
|
||||
|
|
@ -1 +1 @@
|
|||
VITE_APP_BASE_API = 'http://aw.9miao.fun/prod-api'
|
||||
VITE_APP_BASE_API = 'https://xuaua.com/prod-api'
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="icon" href="/logo.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>
|
||||
<title>Xuaxua</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@
|
|||
"axios": "^1.7.2",
|
||||
"element-plus": "^2.7.7",
|
||||
"pinia": "^2.1.7",
|
||||
"swiper": "^8.4.7",
|
||||
"vue": "^3.4.29",
|
||||
"vue-awesome-swiper": "^5.0.1",
|
||||
"vue-router": "^4.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -1371,6 +1373,14 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dom7": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-4.0.6.tgz",
|
||||
"integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==",
|
||||
"dependencies": {
|
||||
"ssr-window": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/element-plus": {
|
||||
"version": "2.7.7",
|
||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.7.7.tgz",
|
||||
|
|
@ -2654,6 +2664,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ssr-window": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
|
||||
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
|
||||
},
|
||||
"node_modules/strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
|
|
@ -2702,6 +2717,29 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "8.4.7",
|
||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-8.4.7.tgz",
|
||||
"integrity": "sha512-VwO/KU3i9IV2Sf+W2NqyzwWob4yX9Qdedq6vBtS0rFqJ6Fa5iLUJwxQkuD4I38w0WDJwmFl8ojkdcRFPHWD+2g==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"dom7": "^4.0.4",
|
||||
"ssr-window": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/text-table": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||
|
|
@ -3016,6 +3054,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-awesome-swiper": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-5.0.1.tgz",
|
||||
"integrity": "sha512-mWjFJzUqA4lG+DmsmibvMpoiBnl+IH2SSeiiQ3i5M0t1y9FknTxnGT0DsMb2YdJLgjYMEK3sYOWzqgLnZMH8Lg==",
|
||||
"peerDependencies": {
|
||||
"swiper": "^7.0.0 || ^8.0.0",
|
||||
"vue": "3.x"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-eslint-parser": {
|
||||
"version": "9.4.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@
|
|||
"axios": "^1.7.2",
|
||||
"element-plus": "^2.7.7",
|
||||
"pinia": "^2.1.7",
|
||||
"swiper": "^8.4.7",
|
||||
"vue": "^3.4.29",
|
||||
"vue-awesome-swiper": "^5.0.1",
|
||||
"vue-router": "^4.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -8,4 +8,7 @@ import { RouterView } from 'vue-router'
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
img{
|
||||
width: 60%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import http from "@/utils/http";
|
||||
import keyboard from "uview-ui/libs/config/props/keyboard";
|
||||
//获取题目
|
||||
export const getQuestion= (type)=>{
|
||||
if(type==null||type==undefined){
|
||||
|
|
@ -47,3 +48,20 @@ export const validationAnswer = ({questionId,answer})=>{
|
|||
}
|
||||
})
|
||||
}
|
||||
export const answered = (questionId)=>{
|
||||
return http({
|
||||
url:"/question/answered",
|
||||
method:"get",
|
||||
params:{
|
||||
questionId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const searchQuestion = (data)=>{
|
||||
return http({
|
||||
url:"/search",
|
||||
method:"get",
|
||||
params:data
|
||||
})
|
||||
}
|
||||
|
|
@ -1,16 +1,22 @@
|
|||
<template>
|
||||
<div class="topicInfoBox">
|
||||
<div class="introduce title">
|
||||
[{{ props.type=="select"?"选择题":"填空题" }}]{{ props.introduce }}
|
||||
<!-- <el-image :src="question.questionImage" style="width: 80%;pointer-events: none;"></el-image> -->
|
||||
<!-- <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>
|
||||
<el-tag v-for="itme in props.tags" :key="itme.name" type="primary">{{
|
||||
itme.name
|
||||
}}</el-tag
|
||||
>
|
||||
</div>
|
||||
<div class="introduce hod" >
|
||||
<div v-html="props.topicTitle" style="width: 400px;">
|
||||
|
||||
</div>
|
||||
<div class="introduce hod">
|
||||
{{ props.topicTitle }}
|
||||
</div>
|
||||
<div class="introduce">
|
||||
<el-radio-group v-if="props.type!='fill_topic'" v-model="radio">
|
||||
<el-radio-group v-if="props.type != 'fill_topic'" v-model="radio">
|
||||
<el-radio
|
||||
v-for="itme in topicSelect"
|
||||
:key="itme.key"
|
||||
|
|
@ -18,19 +24,25 @@
|
|||
>{{ itme.key + "." + itme.name }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
<el-input v-else v-model="radio" type="textarea" :rows="2" placeholder="请输入内容" ></el-input>
|
||||
<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 class="button">
|
||||
<el-button type="primary" @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>
|
||||
<!-- <el-button type="primary" style="z-index: 9;" @click="show=true">查看答案</el-button>
|
||||
<div class="introduce jg" v-if="show">
|
||||
|
||||
<span>正确答案：{{ ArrayToString(native.correctAnswer) }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
|
@ -38,7 +50,8 @@ import { onMounted, ref } from "vue";
|
|||
import { useTopicStore } from "@/stores/topic.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
const topStore = useTopicStore();
|
||||
const radio = ref('');
|
||||
const radio = ref("");
|
||||
const show = ref(false);
|
||||
const props = defineProps({
|
||||
id: { type: Number, default: null },
|
||||
videoUrl: { type: String, default: null },
|
||||
|
|
@ -48,74 +61,89 @@ const props = defineProps({
|
|||
return [];
|
||||
},
|
||||
},
|
||||
native:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
native: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
isAnswer:false,
|
||||
analysis:'解析',
|
||||
correctAnswer:'正确答案',
|
||||
isAnswer: false,
|
||||
analysis: "解析",
|
||||
correctAnswer: "正确答案",
|
||||
//是否答对
|
||||
correct:false,
|
||||
}
|
||||
}
|
||||
correct: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
question: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
type: { type: String, default: null },
|
||||
topicTitle: { type: String, default: "题目" },
|
||||
introduce: { type: String, default: "介绍" },
|
||||
tags: { type: Array, default: null },
|
||||
});
|
||||
const tupClick=async()=>{
|
||||
if(radio.value==null){
|
||||
ElMessage.error("请选择答案");
|
||||
}
|
||||
console.log("radio.value",radio.value)
|
||||
let res=await topStore.submitAnswer(radio.value);
|
||||
console.log("res",res);''
|
||||
}
|
||||
const ArrayToString=(arr)=>{
|
||||
if(arr instanceof Array){
|
||||
const tupClick = async () => {
|
||||
|
||||
let res = await topStore.submitAnswer(radio.value);
|
||||
|
||||
};
|
||||
const ArrayToString = (arr) => {
|
||||
if (arr instanceof Array) {
|
||||
return arr.join(",");
|
||||
}else if(arr instanceof Object){
|
||||
} else if (arr instanceof Object) {
|
||||
return arr.toSting();
|
||||
}else{
|
||||
} else {
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
};
|
||||
const topicSelect = ref([]);
|
||||
console.log("props.native", props.question);
|
||||
|
||||
onMounted(() => {
|
||||
topicSelect.value = props.topicList;
|
||||
radio.value=props.native.userAnswer?props.native.userAnswer:null;
|
||||
radio.value = props.native.userAnswer ? props.native.userAnswer : null;
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.button{
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.topicInfoBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "KaiTi"
|
||||
font-family: "KaiTi";
|
||||
}
|
||||
.introduce {
|
||||
z-index: 9;
|
||||
margin: 10px auto;
|
||||
width: 90%;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
img {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
.title {
|
||||
font-size: 17px;
|
||||
line-height: 17px;
|
||||
margin-top:30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.tag{
|
||||
.tag {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.jg{
|
||||
.jg {
|
||||
width: 100%;
|
||||
height: 17vw;
|
||||
box-sizing:border-box;
|
||||
box-sizing: border-box;
|
||||
padding-top: 19%;
|
||||
padding-left: 23%;
|
||||
font-family: "黑体";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="video-container">
|
||||
<video
|
||||
style="height: inherit;"
|
||||
ref="videoRef"
|
||||
:src="props.src"
|
||||
width="100%"
|
||||
|
|
@ -49,8 +50,9 @@
|
|||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 640px; /* 可以根据需要调整 */
|
||||
/* margin: 0 auto; */
|
||||
max-width: 100%; /* 可以根据需要调整 */
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
|
|||
|
|
@ -1,115 +1,141 @@
|
|||
<template>
|
||||
<div class="nav">
|
||||
<div class="logo-box"><span class="loogText">Xuaua</span></div>
|
||||
<div class="logo-box">
|
||||
<span class="logo-text" v-if="pageType!='view'">Xuaua</span>
|
||||
<span class="logo-text" v-else @click="goback">
|
||||
|
||||
<svg t="1724411009623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6748" width="48" height="48"><path d="M512 65C264.66 65 65 264.66 65 512s199.66 447 447 447 447-199.66 447-447S759.34 65 512 65z m253.32 470.93h-0.8c-18.93 0.42-37.92 0-56.85 0H312.21l88.31 86.91 64.68 63.66c9.53 9.38 8.71 24.35 0 33.84s-24.91 8.79-33.84 0L407.69 697l-103.1-101.43-64.69-63.66c-9.28-9.14-9-24.69 0-33.84l23.52-23.88 103.15-104.74 64.79-65.79c9.38-9.53 24.35-8.71 33.84 0s8.79 24.91 0 33.84l-23.52 23.88q-51.57 52.38-103.15 104.74l-21.44 21.77c12.44 0 24.88 0.18 37.3 0.18h410.93c13.41 0 23.35 11 23.93 23.93s-11.41 23.93-23.93 23.93z" p-id="6749" fill="#e6e6e6"></path></svg>
|
||||
</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" >
|
||||
<div>
|
||||
<el-icon :size="20">
|
||||
<Search />
|
||||
</el-icon>
|
||||
</div>
|
||||
<input type="text" placeholder="搜索关键词" v-model="type" />
|
||||
<input type="text" @click="goSearch" placeholder="搜索关键词" />
|
||||
</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 }}
|
||||
<el-avatar :size="40" :src="user.avatar" />{{ user.nickname || "用户" }}
|
||||
</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 { useUserStore } from "@/stores/user.js";
|
||||
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";
|
||||
import router from "@/router";
|
||||
import { debounceRef } from "@/utils/debounceRef";
|
||||
import {computed, defineProps,defineEmits} from "vue"
|
||||
const useSotr = useUserStore();
|
||||
const emit = defineEmits(["back"])
|
||||
const user = computed(() => {
|
||||
return useSotr.user;
|
||||
});
|
||||
const topStore = useTopicStore();
|
||||
const type = debounceRef("", 300);
|
||||
const selectInput = (a) => {
|
||||
type.value = a;
|
||||
};
|
||||
const toUser=()=>{
|
||||
router.push({
|
||||
path:"/user"
|
||||
})
|
||||
const {pageType} = defineProps({
|
||||
pageType:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
})
|
||||
function goback(){
|
||||
// router.go(-1);
|
||||
emit("back")
|
||||
}
|
||||
const selectClick=()=>{
|
||||
// console.log("点击")
|
||||
console.log("123",useSotr)
|
||||
const toUser = () => {
|
||||
router.push({
|
||||
path: "/user",
|
||||
});
|
||||
};
|
||||
|
||||
const goSearch = () => {
|
||||
router.replace({
|
||||
path: "/search",
|
||||
});
|
||||
};
|
||||
|
||||
const selectClick = () => {
|
||||
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;
|
||||
background: linear-gradient(135deg, #409eff, #66b1ff);
|
||||
border-radius: 0 0 15px 15px;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
.logo-box {
|
||||
margin-top: 11px;
|
||||
margin-left: 52px;
|
||||
margin-bottom: 11px;
|
||||
.logo-text {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.input-with-select {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
left: 210px;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
margin-left: 30px;
|
||||
margin-right: auto;
|
||||
padding: 5px;
|
||||
background: #fefefe;
|
||||
// .search-input{
|
||||
// width: 400px;
|
||||
// height: 38px;
|
||||
// border-radius: 30px;
|
||||
// }
|
||||
}
|
||||
div {
|
||||
|
||||
.selectInput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 7px 15px;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 30px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-color: #dcdfe6;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
&::placeholder {
|
||||
color: #dcdfe6;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
}
|
||||
.loogText {
|
||||
font-size: 30px;
|
||||
margin-left: 10px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
39
src/main.js
39
src/main.js
|
|
@ -1,21 +1,26 @@
|
|||
import './assets/main.css'
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/dist/index.css';
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import './assets/main.css';
|
||||
import 'swiper/css';
|
||||
const app = createApp(App);
|
||||
|
||||
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'
|
||||
import VueAwesomeSwiper from 'vue-awesome-swiper'
|
||||
import 'swiper/swiper-bundle.css'
|
||||
|
||||
const app = createApp(App)
|
||||
// import 'swiper/swiper-bundle.css'
|
||||
app.use(VueAwesomeSwiper)
|
||||
app.use(createPinia());
|
||||
app.use(router);
|
||||
app.use(ElementPlus);
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
// Register Element Plus icons globally
|
||||
Object.entries(ElementPlusIconsVue).forEach(([key, component]) => {
|
||||
app.component(key, component);
|
||||
});
|
||||
|
||||
app.mount('#app')
|
||||
app.mount('#app');
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
|
|||
import TokenService from '@/utils/token'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(import.meta.env.BASE_URL),
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
|
|
@ -18,6 +18,10 @@ const router = createRouter({
|
|||
path: '/user',
|
||||
name: 'USER',
|
||||
component: () => import('@/views/user/index.vue')
|
||||
},
|
||||
{
|
||||
path:"/search",
|
||||
component:()=>import('@/views/search/index.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,176 +1,261 @@
|
|||
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 { ref, computed, onMounted } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import {
|
||||
getQuestionByTagName,
|
||||
validationAnswer,
|
||||
getQuestion,
|
||||
answered,
|
||||
} 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 router from "@/router";
|
||||
import { ElLoading } from 'element-plus'
|
||||
// import { fa } from 'element-plus/es/locale';
|
||||
export const useTopicStore = defineStore('useTopicStore', () => {
|
||||
export const useTopicStore = defineStore("useTopicStore", () => {
|
||||
//当前标签
|
||||
const tagName = ref('');
|
||||
const tagName = ref("");
|
||||
//当前索引
|
||||
const index = ref(1);
|
||||
const index = ref(0);
|
||||
//题目列表
|
||||
const Topics=ref([]);
|
||||
const Topics = ref([]);
|
||||
//当前题目
|
||||
const Topic=computed(()=>{
|
||||
return Topics.value[index.value-1];
|
||||
const Topic = computed(() => {
|
||||
return Topics.value[index.value - 1];
|
||||
});
|
||||
//收藏列表
|
||||
const collectTopics=ref([]);
|
||||
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){
|
||||
const collectTopicIds = computed(() => {
|
||||
return collectTopics.value.map((item) => item.id);
|
||||
});
|
||||
const count = computed(() => Topics.value.length);
|
||||
const init = () => {
|
||||
index.value = 0;
|
||||
if (Topics.value.length == 0) {
|
||||
CollectList();
|
||||
getData();
|
||||
console.log("刷新数据");
|
||||
}else{
|
||||
} else {
|
||||
console.log("已存在");
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
const setQuestion = (question) => {
|
||||
CollectList();
|
||||
Topics.value = [];
|
||||
Topic.value = question;
|
||||
Topics.value.push({
|
||||
...question,
|
||||
isCollect: collectTopicIds.value.includes(question.id),
|
||||
});
|
||||
};
|
||||
|
||||
const setQuestions = (questions,item) => {
|
||||
CollectList();
|
||||
index.value =0
|
||||
Topics.value = [];
|
||||
Topic.value = item;
|
||||
questions.forEach(e => {
|
||||
Topics.value.push({
|
||||
...e,
|
||||
isCollect: collectTopicIds.value.includes(e.id),
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
//获取题目
|
||||
//设置标签
|
||||
const setTagName=(name)=>{
|
||||
tagName.value=name;
|
||||
}
|
||||
const setTagName = (name) => {
|
||||
tagName.value = name;
|
||||
};
|
||||
//根据传入标签情况判断是刷新还是加载
|
||||
const loadData=async(name)=>{
|
||||
if(name===tagName.value){
|
||||
const loadData = async (name) => {
|
||||
if (name === tagName.value) {
|
||||
await getData();
|
||||
}else{
|
||||
setTagName(name)
|
||||
} else {
|
||||
setTagName(name);
|
||||
await refresh();
|
||||
}
|
||||
}
|
||||
};
|
||||
//刷新
|
||||
const refresh=async()=>{
|
||||
const refresh = async () => {
|
||||
clear();
|
||||
let res=await getQuestionByTagName(tagName.value);
|
||||
if(res.code==200){
|
||||
res.data=res.data.map(e=>{
|
||||
let res = await getQuestion("refresh");
|
||||
if (res.code == 200) {
|
||||
if (res.data.length == 0) {
|
||||
ElMessage({ message: "题库为空你已经打完所有题目", type: "warning" });
|
||||
return;
|
||||
}
|
||||
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;
|
||||
}
|
||||
// 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=>{
|
||||
const getData = async () => {
|
||||
const loadingInstance = ElLoading.service()
|
||||
let res = await getQuestion();
|
||||
if (res.code == 200) {
|
||||
if (res.data.length == 0) {
|
||||
ElMessage({ message: "题库为空你已经打完所有题目", type: "warning" });
|
||||
res.data = [
|
||||
{
|
||||
id: 0,
|
||||
question: "没有题目了",
|
||||
analysis: "没有题目了",
|
||||
correctAnswer: "没有题目了",
|
||||
correct: false,
|
||||
userAnswer: "没有题目了",
|
||||
isAnswer: false,
|
||||
isCollect: false,
|
||||
},
|
||||
];
|
||||
}
|
||||
res.data = res.data.map((e) => {
|
||||
return {
|
||||
...e,
|
||||
isCollect:collectTopicIds.value.includes(e.id),
|
||||
// isCollect: collectTopicIds.value.includes(e.id),
|
||||
};
|
||||
});
|
||||
Topics.value = [...Topics.value, ...res.data];
|
||||
loadingInstance.close()
|
||||
|
||||
}})
|
||||
Topics.value=[...Topics.value,...res.data];
|
||||
}
|
||||
}
|
||||
};
|
||||
//清空数据
|
||||
const clear=()=>{
|
||||
index.value=0;
|
||||
Topics.value=[];
|
||||
collectTopics.value=[];
|
||||
|
||||
}
|
||||
const clear = () => {
|
||||
index.value = 0;
|
||||
Topics.value = [];
|
||||
collectTopics.value = [];
|
||||
};
|
||||
//提交答案
|
||||
const submitAnswer=async(answer)=>{
|
||||
const submitAnswer = async (answer) => {
|
||||
//先判断是否已经答过
|
||||
// if(Topic.value.isAnswer){
|
||||
// ElMessage({ message: "已经做过了", type: "warning" });
|
||||
// return;
|
||||
// }
|
||||
console.log(Topic.value)
|
||||
let res=await validationAnswer({questionId:Topic.value.id,answer});
|
||||
console.log(res);
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
// console.log(Topic.value);
|
||||
// let res = await validationAnswer({ questionId: Topic.value.id, answer });
|
||||
// console.log(res);
|
||||
// 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,
|
||||
// });
|
||||
// }
|
||||
let res = await answered(Topic.value.id);
|
||||
ElMessage({ message: res.msg, type: "info" });
|
||||
refresh();
|
||||
};
|
||||
//设置答题情况
|
||||
const setAnswer=({isAnswer,analysis,userAnswer,correctAnswer,correct})=>{
|
||||
Topics.value[index.value-1]={
|
||||
const setAnswer = ({
|
||||
isAnswer,
|
||||
analysis,
|
||||
userAnswer,
|
||||
correctAnswer,
|
||||
correct,
|
||||
}) => {
|
||||
Topics.value[index.value - 1] = {
|
||||
...Topic.value,
|
||||
isAnswer,
|
||||
analysis,
|
||||
correctAnswer,
|
||||
correct,
|
||||
userAnswer
|
||||
}
|
||||
}
|
||||
userAnswer,
|
||||
};
|
||||
};
|
||||
//收藏题目
|
||||
const Collect=async()=>{
|
||||
console.log("执行")
|
||||
const Collect = async () => {
|
||||
console.log("执行");
|
||||
let res;
|
||||
if(isCollect()){
|
||||
res=await cancelCollect(Topic.value.id);
|
||||
if(res.code==200){
|
||||
if (isCollect()) {
|
||||
res = await cancelCollect(Topic.value.id);
|
||||
if (res.code == 200) {
|
||||
ElMessage({ message: "取消收藏", type: "info" });
|
||||
Topics.value[index.value-1].isCollect=false;
|
||||
Topics.value[index.value - 1].isCollect = false;
|
||||
}
|
||||
}else{
|
||||
res= await collect(Topic.value.id);
|
||||
if(res.code==200){
|
||||
} else {
|
||||
res = await collect(Topic.value.id);
|
||||
if (res.code == 200) {
|
||||
ElMessage({ message: "收藏成功", type: "info" });
|
||||
Topics.value[index.value-1].isCollect=true;
|
||||
Topics.value[index.value - 1].isCollect = true;
|
||||
}
|
||||
}
|
||||
await CollectList();
|
||||
}
|
||||
};
|
||||
//上一题
|
||||
const prev=()=>{
|
||||
if(index.value>=1){
|
||||
const prev = () => {
|
||||
if (index.value >= 1) {
|
||||
index.value--;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
//下一题
|
||||
const next=()=>{
|
||||
const next = () => {
|
||||
index.value++;
|
||||
if(index.value>count.value){
|
||||
index.value=count.value;
|
||||
if (index.value > count.value) {
|
||||
index.value = count.value;
|
||||
return false;
|
||||
}
|
||||
if(index.value==count.value){
|
||||
const type = router.currentRoute.value.query.type;
|
||||
if (type == "view") {
|
||||
return true;
|
||||
}
|
||||
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 CollectList = async () => {
|
||||
let res = await getCollectList();
|
||||
if (res.code == 200) {
|
||||
collectTopics.value = res.data.map((item) => item.questionVo);
|
||||
}
|
||||
};
|
||||
//判断是否收藏
|
||||
const isCollect=()=>{
|
||||
if(count.value==0){
|
||||
const isCollect = () => {
|
||||
if (count.value == 0) {
|
||||
return false;
|
||||
}
|
||||
console.log("123",Topic.value,index.value)
|
||||
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}
|
||||
})
|
||||
};
|
||||
// onMounted(() => {
|
||||
// init();
|
||||
// });
|
||||
return {
|
||||
index,
|
||||
Topics,
|
||||
count,
|
||||
collectTopics,
|
||||
collectTopicIds,
|
||||
Topic,
|
||||
setAnswer,
|
||||
loadData,
|
||||
setTagName,
|
||||
refresh,
|
||||
submitAnswer,
|
||||
Collect,
|
||||
isCollect,
|
||||
clear,
|
||||
getData,
|
||||
prev,
|
||||
next,
|
||||
CollectList,
|
||||
init,
|
||||
setQuestion,
|
||||
setQuestions
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,27 +1,24 @@
|
|||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, reactive } 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();
|
||||
// export const useUserStore = defineStore('useUserStore', () => {
|
||||
// state: () => ({
|
||||
// user:{}
|
||||
// }),
|
||||
// actions: {
|
||||
|
||||
// },
|
||||
// })
|
||||
|
||||
export const useUserStore = defineStore('useUserStore', {
|
||||
state: () => ({
|
||||
user:{}
|
||||
}),
|
||||
actions: {
|
||||
UserInfo(){
|
||||
getUserInfo().then(res => {
|
||||
this.user = res.data
|
||||
})
|
||||
return { avatar, username,phone,remark,UserInfo}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -1,43 +1,49 @@
|
|||
<template>
|
||||
<div class="homeBox">
|
||||
<div ref="topicInfoRef" class="scroll-container">
|
||||
<div
|
||||
ref="topicInfoItemRef"
|
||||
:style="{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
transition: '0.7s',
|
||||
marginTop: top,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="item in questionList"
|
||||
:key="item.id"
|
||||
style="overflow: hidden"
|
||||
class="homeBox"
|
||||
>
|
||||
<div>
|
||||
<xuaua-header></xuaua-header>
|
||||
<xuaua-header :page-type="PageType" @back="PageRest()"></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"
|
||||
class="topicInfo"
|
||||
:style="{ backgroundImage: `url(${item.questionImage})` }"
|
||||
@click="huadong"
|
||||
>
|
||||
<div 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"
|
||||
:id="item.id"
|
||||
:question="item"
|
||||
:videoUrl="item.videoUrl"
|
||||
:introduce="item.introduce"
|
||||
:tags="item.tags"
|
||||
:topicTitle="item.topicTitle"
|
||||
:type="item.type"
|
||||
:topicList="item.xuauaQuestionAnswerList"
|
||||
:native="item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topicAnswer">
|
||||
<div class="answerNav">
|
||||
<div style="flex: 1;">
|
||||
<div style="width: 80%; display: flex; justify-content: center">
|
||||
<el-tabs
|
||||
style="margin: 0 auto"
|
||||
v-model="activeName"
|
||||
class="demo-tabs"
|
||||
@tab-change="handleClick"
|
||||
|
|
@ -46,30 +52,32 @@
|
|||
<el-tab-pane label="解析" name="解析"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="StarIcon" @click="addCollect">
|
||||
<el-icon
|
||||
v-if="topStore.Topic?.isCollect == true"
|
||||
|
||||
v-if="topStore.Topic?.isCollect"
|
||||
:size="30"
|
||||
color="#FEE082"
|
||||
>
|
||||
<!-- <Star /> -->
|
||||
<StarFilled />
|
||||
</el-icon>
|
||||
<el-icon v-else :size="30" color="#2B2B2B">
|
||||
<Star />
|
||||
<!-- <StarFilled /> -->
|
||||
</el-icon>
|
||||
{{ topStore.Topic?.isCollect == true ? "已" : "未" }}收藏
|
||||
{{ topStore.Topic?.isCollect ? "已" : "未" }}收藏
|
||||
</div>
|
||||
</div>
|
||||
<div class="answerInfo">
|
||||
<VideoBox
|
||||
v-if="activeName == '视频'"
|
||||
v-if="activeName === '视频'"
|
||||
:src="topStore.Topic?.videoUrl"
|
||||
></VideoBox>
|
||||
<div class="jiexi" v-else>{{ topStore.Topic.analysis }}</div>
|
||||
<div
|
||||
class="jiexi"
|
||||
v-else
|
||||
v-html="topStore.Topic?.analysis"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,103 +86,180 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { ref, onMounted, computed, watch, onUnmounted } 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'
|
||||
import { debounce } from "@/utils/debounceRef";
|
||||
import router from "@/router";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
const PageType = ref("home");
|
||||
const topicInfoItemRef = ref(null);
|
||||
const topicInfoRef = ref(null);
|
||||
const topStore = useTopicStore();
|
||||
const activeName = ref("视频");
|
||||
let mouseDown = false;
|
||||
let lastY = null;
|
||||
let currentY = null;
|
||||
const questionList = computed(() => {
|
||||
return topStore.Topics;
|
||||
});
|
||||
const top = computed(() => {
|
||||
const height = topicInfoItemRef?.value?.clientHeight || 0;
|
||||
const height = topicInfoItemRef.value?.clientHeight || 0;
|
||||
return `-${(topStore.index - 1 < 0 ? 0 : topStore.index - 1) * height}px`;
|
||||
});
|
||||
const isCollect = computed(() => {
|
||||
return topStore.isCollect();
|
||||
});
|
||||
|
||||
const isFlipping = ref(false);
|
||||
|
||||
const addCollect = () => {
|
||||
debounce(()=>{
|
||||
// alert(1)
|
||||
debounce(
|
||||
() => {
|
||||
topStore.Collect();
|
||||
},500,true)();
|
||||
},
|
||||
500,
|
||||
true
|
||||
)();
|
||||
};
|
||||
document.addEventListener("mousedown", function (event) {
|
||||
|
||||
const setScrollY = (y) => {
|
||||
if (topicInfoRef.value) {
|
||||
topicInfoRef.value.scrollTop -= y;
|
||||
}
|
||||
};
|
||||
|
||||
const flipPage = (y) => {
|
||||
if (topicInfoRef.value) {
|
||||
topicInfoRef.value.scrollTop = 0;
|
||||
if (y < -80) {
|
||||
if (!topStore.next()) {
|
||||
ElMessage({ message: "没有更多了", type: "warning" });
|
||||
}
|
||||
isFlipping.value = true;
|
||||
} else if (y > 80) {
|
||||
if (!topStore.prev()) {
|
||||
ElMessage({ message: "到顶了", type: "warning" });
|
||||
}
|
||||
isFlipping.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = (e) => {
|
||||
// if (e === "解析" && !topStore.Topics[topStore.index - 1]?.isAnswer) {
|
||||
// ElMessage({ message: "未作答不能查看解析", type: "warning" });
|
||||
// setTimeout(() => {
|
||||
// activeName.value = "视频";
|
||||
// }, 1);
|
||||
// }
|
||||
};
|
||||
|
||||
const onMouseMove = (event) => {
|
||||
const deltaY = event.clientY - currentY;
|
||||
currentY = event.clientY;
|
||||
setScrollY(deltaY);
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", (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) {
|
||||
|
||||
document.addEventListener("mouseup", (event) => {
|
||||
mouseDown = false;
|
||||
let deltaY = event.clientY - lastY;
|
||||
console.log("变化", deltaY);
|
||||
const deltaY = event.clientY - lastY;
|
||||
flipPage(deltaY);
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
});
|
||||
const topicInfoRef = ref(null);
|
||||
const setScrollY = (y) => {
|
||||
if (topicInfoRef.value) {
|
||||
topicInfoRef.value.scrollTop = topicInfoRef.value.scrollTop - y;
|
||||
}
|
||||
|
||||
const preventScroll = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
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(() => {
|
||||
|
||||
function PageRest() {
|
||||
const type = router.currentRoute.value.query.type;
|
||||
|
||||
if (type == "view") {
|
||||
PageType.value = "home";
|
||||
topStore.init();
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
topStore.init();
|
||||
router.replace({
|
||||
path: "/",
|
||||
});
|
||||
|
||||
// router.back()
|
||||
}
|
||||
|
||||
function pageInit() {
|
||||
useUserStore().UserInfo();
|
||||
|
||||
const type = router.currentRoute.value.query.type;
|
||||
console.log(type);
|
||||
if (type == "view") {
|
||||
//判断是否是查看模式
|
||||
console.log(questionList.value);
|
||||
PageType.value = "view";
|
||||
return;
|
||||
}
|
||||
topStore.init();
|
||||
|
||||
}
|
||||
pageInit();
|
||||
onMounted(() => {
|
||||
document.addEventListener("wheel", onScroll, { passive: true });
|
||||
|
||||
document.addEventListener("wheel", preventScroll, { passive: false });
|
||||
});
|
||||
const onScroll = (event) => {
|
||||
if (isFlipping.value) return;
|
||||
|
||||
const deltaY = event.deltaY;
|
||||
flipPage(-deltaY);
|
||||
};
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("wheel", onScroll);
|
||||
|
||||
document.removeEventListener("wheel", preventScroll);
|
||||
});
|
||||
watch(isFlipping, (newVal) => {
|
||||
if (newVal) {
|
||||
setTimeout(() => {
|
||||
isFlipping.value = false;
|
||||
}, 700);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-container {
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.homeBox {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url("@/assets/image/loginback.jpg");
|
||||
background-size: cover; // 背景图片铺满元
|
||||
// background-position: center; // 背景图片居中显示
|
||||
background-repeat: no-repeat; // 背景图片不重复
|
||||
.main {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
transition: transform 0.7s;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
//占满的剩余空间
|
||||
flex: 1;
|
||||
background-color: #ededed;
|
||||
display: flex;
|
||||
|
|
@ -189,87 +274,64 @@ onMounted(() => {
|
|||
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;
|
||||
// background-image: url("@/assets/image/tibg.jpg");
|
||||
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
.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/videoBack.jpg");
|
||||
background-size: cover; // 背景图片铺满元
|
||||
background-position: center; // 背景图片居中显示
|
||||
background-repeat: no-repeat; // 背景图片不重复
|
||||
}
|
||||
// background-color: #F0F9CC;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.selectInput {
|
||||
// background-image: url("@/assets/image/videoBack.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
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%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jiexi {
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.answerNav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.StarIcon {
|
||||
// float: right;
|
||||
margin-right: 3vw;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="userPage">
|
||||
<div style="height: 3vh;margin: 0 auto;width: 97%;">
|
||||
<el-page-header @back="router.push('/')">
|
||||
<el-page-header @back="goback()">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 个人信息 </span>
|
||||
</template>
|
||||
|
|
@ -14,9 +14,9 @@
|
|||
<div class="userBox">
|
||||
<div class="userInfo">
|
||||
<div class="userT" @click="drawer = true">
|
||||
<el-avatar :size="150" :src="useSotr.avatar" />
|
||||
<el-avatar :size="150" :src="userInfo.avatar" />
|
||||
</div>
|
||||
<div class="userName">{{ useSotr.username }}</div>
|
||||
<div class="userName">{{ userInfo.nickname }}</div>
|
||||
<!-- <div class="userName" @click="router.push('/')">返回首页</div> -->
|
||||
</div>
|
||||
<div class="collectionTopic">
|
||||
|
|
@ -24,9 +24,10 @@
|
|||
<div class="collectionList">
|
||||
<div
|
||||
class="collectionTme"
|
||||
v-for="emit in topStore.collectTopics"
|
||||
v-for="emit in cpllectList"
|
||||
:key="emit.id"
|
||||
:Topic="emit"
|
||||
@click="goQuestion(emit)"
|
||||
>
|
||||
<p>
|
||||
[{{ emit.type == "select" ? "选择题" : "填空题" }}]{{
|
||||
|
|
@ -68,7 +69,7 @@
|
|||
<div class="infoItme">
|
||||
<div class="text">用户名</div>
|
||||
<el-input
|
||||
v-model="userForm.username"
|
||||
v-model="userForm.nickname"
|
||||
style="width: 240px"
|
||||
placeholder="Please input"
|
||||
:disabled="!isUpdata"
|
||||
|
|
@ -138,6 +139,167 @@
|
|||
</el-dialog>
|
||||
</template>
|
||||
|
||||
|
||||
<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 { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useTopicStore } from "@/stores/topic.js";
|
||||
import { useUserStore } from "@/stores/user.js";
|
||||
import TokenService from "@/utils/token";
|
||||
const cpllectList = computed(() => topStore.collectTopics);
|
||||
function goQuestion(item){
|
||||
useTopicStore().setQuestions(cpllectList.value,item)
|
||||
router.push({
|
||||
path: "/",
|
||||
query: {
|
||||
type: 'view'
|
||||
}
|
||||
});
|
||||
}
|
||||
function goback(){
|
||||
router.go(-1);
|
||||
}
|
||||
const upload = (url) => {
|
||||
console.log(url);
|
||||
userForm.value.avatar = url;
|
||||
};
|
||||
const utLogin = () => {
|
||||
TokenService.removeToken();
|
||||
router.push("/login");
|
||||
};
|
||||
const dialogFormVisible = ref(false);
|
||||
const useSotr = useUserStore();
|
||||
const userInfo = computed(() => useSotr.user);
|
||||
const topStore = useTopicStore();
|
||||
const ruleFormRef = ref(null);
|
||||
const drawer = ref(false);
|
||||
const isUpdata = ref(false);
|
||||
let userForm = ref({
|
||||
username: null,
|
||||
phone: null,
|
||||
remark: null,
|
||||
avatar: null,
|
||||
});
|
||||
const updateClick = async () => {
|
||||
if (
|
||||
! userForm.value
|
||||
) {
|
||||
ElMessage({ message: "请完善信息", type: "error" });
|
||||
return;
|
||||
}
|
||||
let res = await updateUserInfo(userForm.value);
|
||||
if (res.code == 200) {
|
||||
ElMessage({ message: "更新成功", type: "success" });
|
||||
isUpdata.value = false;
|
||||
await useSotr.UserInfo();
|
||||
userForm.value = userInfo.value
|
||||
}
|
||||
console.log(res);
|
||||
};
|
||||
const handleClose = (done) => {
|
||||
if (isUpdata.value) {
|
||||
ElMessageBox.confirm("更改未保存，确定退出吗？", {
|
||||
confirmButtonText: "确定退出",
|
||||
cancelButtonText: "继续修改",
|
||||
})
|
||||
.then(() => {
|
||||
userForm.value = userInfo.value
|
||||
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.value = userInfo.value;
|
||||
setTimeout(() => {
|
||||
console.log(userInfo.value)
|
||||
|
||||
}, 400);
|
||||
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.userPage {
|
||||
height: 100vh;
|
||||
|
|
@ -265,155 +427,3 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ export default defineConfig({
|
|||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue