答题完整代码

This commit is contained in:
Strange 2024-08-27 17:24:44 +08:00
parent d3ce47bd52
commit 23cb65e721
17 changed files with 988 additions and 698 deletions

View File

@ -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'

View File

@ -1 +1 @@
VITE_APP_BASE_API = 'http://aw.9miao.fun/prod-api'
VITE_APP_BASE_API = 'https://xuaua.com/prod-api'

View File

@ -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>

47
package-lock.json generated
View File

@ -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",

View File

@ -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": {

View File

@ -8,4 +8,7 @@ import { RouterView } from 'vue-router'
</template>
<style scoped>
img{
width: 60%;
}
</style>

View File

@ -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
})
}

View File

@ -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>&nbsp;
<el-tag v-for="itme in props.tags" :key="itme.name" type="primary">{{
itme.name
}}</el-tag
>&nbsp;
</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: "黑体";

View File

@ -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 {

View File

@ -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>

View File

@ -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');

View File

@ -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')
}
]
})

View File

@ -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
};
});

View File

@ -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}
}
},
})

View File

@ -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>

View File

@ -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>

View File

@ -22,6 +22,7 @@ export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})