111111

src/api/question/question.js

@@ -12,14 +12,17 @@ export const getQuestion= (type)=>{
         },
     })
 }
-//注册
-export const validationAnswer= (user)=>{
+//验证题目是否正确
+export const checkQuestion= ({
+    questionId,
+    answer
+})=>{
     return http({
         url:"/question/validationAnswer",
         method:"get",
-        data:user,
-        headers:{
-            isToken:false
+        params:{
+            questionId,
+            answer
         }
     })
 }

src/components/TypeSelect.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="word-list">
+      <!-- {{ props.type }}{{ props }} -->
       <div
         v-for="word in words"
         :key="word"
@@ -8,12 +9,36 @@
       >
         {{ word }}
       </div>
+
     </div>
   </template>
   
   <script setup>
-  import { ref } from 'vue';
+  import { onMounted, ref ,watch} from 'vue';
+  import { getTags } from "@/api/tag/tag";
   const emit=defineEmits(['select'])
+  const props=defineProps({
+    type:{
+      type:String,
+      default:''
+    }
+  })
+  const getWords=async(type)=>{
+    let res=await getTags(type);
+    if(res.code==200){
+      words.value=res.data.map(itme=>itme.name);
+      if(words.value.length==0){
+        words.value=['暂无数据']
+      }
+    }
+  }
+  watch(() => props.type,(newValue)=>{
+    getWords(newValue);
+    console.log("props",newValue);
+  },{
+    //深度监听
+    deep: true, // 启用深度监听
+  })
   // 包含所有可点击词的数组
   const words = ref([
   '高数上', '高数下', '线性代数', '数学分析', '解析几何',
@@ -32,6 +57,9 @@
     emit('select',word);
     // 这里可以抛出一个事件，或者调用其他方法
   };
+  onMounted(()=>{
+    getWords();
+  })
   </script>
   <style scoped>
   .word-list {

src/views/home/index.vue

@@ -7,14 +7,15 @@
           <template #reference>
             <div class="selectInput">
               <div @click="selectClick">
-                <el-icon :size="size" :color="color">
+                <el-icon :size="20" >
                   <Search />
                 </el-icon>
               </div>
               <input type="text" placeholder="搜索关键词" v-model="selectType" />
             </div>
           </template>
-          <TypeSelect @select="selectInput"></TypeSelect>
+          <!-- {{ selectType }} -->
+          <TypeSelect @select="selectInput" :type="selectType"></TypeSelect>
         </el-popover>
       </div>
       <div @click="router.push('/user')">
@@ -183,7 +184,8 @@
 }
 </style>
 <script setup>
-import { reactive, ref, onMounted } from "vue";
+import { reactive, ref, onMounted,watch } from "vue";
+import { debounceRef} from '@/utils/debounceRef'
 import TopicBox from "@/components/TopicBox.vue";
 import VideoBox from "@/components/VideoBox.vue";
 import TypeSelect from '@/components/TypeSelect.vue'
@@ -191,9 +193,12 @@ import { ElMessage } from "element-plus";
 import "element-plus/theme-chalk/el-message.css";
 import router from "@/router";
 import { getQuestion } from "@/api/question/question";
-// import { c } from "vite/dist/node/types.d-aGj9QkWt";
 const topicInfoItemRef = ref(null);
-const selectType=ref(null);
+const selectType=debounceRef(null,500);
+//监听selectType
+watch(selectType,(newValue)=>{
+  console.log("新值",newValue);
+})
 const topicInfo = reactive({
   index: 1,
   number: 3,

src/views/login/index.vue

@@ -82,7 +82,7 @@ input {
   width: 90%;
   height: 2vw;
   background-color: #ff1c1c00;
-  border: 1px #000 solid;
+  border: 1px #3a3a3a solid;
   border-radius: 20px;
   padding: 2px;
   box-sizing: border-box;

src/views/user/index.vue

@@ -1,27 +1,70 @@
 <template>
   <div class="userBox">
     <div class="userInfo">
-      <div class="userT">
+      <div class="userT" @click="drawer = true">
         <el-avatar :size="150" :src="circleUrl" />
       </div>
       <div class="userName">用户名</div>
-      <div class="userName" @click="router.push('/');">返回首页</div>
+      <div class="userName" @click="router.push('/')">返回首页</div>
     </div>
     <div class="collectionTopic">
       <div class="title">收藏</div>
       <div class="collectionList">
-        <div class="collectionTme"></div>
-        <div class="collectionTme"></div>
-        <div class="collectionTme"></div>
-        <div class="collectionTme"></div>
-        <div class="collectionTme"></div>
-        <div class="collectionTme"></div>
-        <div class="collectionTme"></div>
         <div class="collectionTme"></div>
         <!-- <div class="collectionTme"></div> -->
       </div>
     </div>
   </div>
+  <el-drawer
+    v-model="drawer"
+    title="个人信息"
+    direction="ltr"
+    :before-close="handleClose"
+  >
+    <div class="info">
+      <div class="infoItme">
+        <image-upload
+          ref="imgUpload"
+          img="123"
+          style="width: 200px; height: 200px; display: inline-block"
+          @upload="upload"
+        ></image-upload>
+      </div>
+      <div class="infoItme">
+        <div class="text">账号</div>
+        <el-input
+          v-model="input"
+          style="width: 240px"
+          placeholder="Please input"
+          :disabled="true"
+        />
+      </div>
+      <div class="infoItme">
+        <div class="text">签名</div>
+        <el-input
+          v-model="input"
+          style="width: 240px"
+          placeholder="Please input"
+          :rows="2"
+          type="textarea"
+          :disabled="true"
+        />
+      </div>
+      <div class="infoItme">
+        <div class="text">手机号</div>
+        <el-input
+          v-model="input"
+          style="width: 240px"
+          placeholder="Please input"
+          :disabled="true"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <el-button type="success">更改信息</el-button>
+      <el-button type="danger">更改密码</el-button>
+    </template>
+  </el-drawer>
 </template>
 
 <style lang="scss" scoped>
@@ -77,7 +120,7 @@
       -ms-overflow-style: none; /* IE 10+ */
       ::-webkit-scrollbar {
         display: none; /* Chrome Safari */
-}
+      }
       flex: 1;
       width: 90%;
       box-sizing: border-box;
@@ -89,7 +132,7 @@
         /* 宽度是固定好的 */
         width: 30%;
         height: 47%;
-        background-color: #D2FCE3;
+        background-color: #d2fce3;
         margin-bottom: 10px;
         // border: 1px solid red;
         /*这个数值需要自己去调*/
@@ -102,7 +145,27 @@
     }
   }
 }
+.infoItme {
+  display: flex;
+  justify-content: center;
+  width: 80%;
+  margin: 20px auto;
+  .text {
+    width: 30%;
+    text-align: right;
+    margin-right: 30px;
+  }
+}
+.info {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
 </style>
 <script setup>
-import router from '@/router'
+import router from "@/router";
+import ImageUpload from "@/components/ImageUpload.vue";
+import { ref } from "vue";
+const drawer = ref(false);
 </script>