调整优化

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/api/upload/upload.js

@@ -0,0 +1,18 @@
+import httpInstance from '@/utils/http'
+
+export const uploadImage = (file) => {
+    // 创建一个 FormData 对象
+    const formData = new FormData();
+    // 将文件添加到 FormData
+    formData.append('file', file);
+    
+    // 发送 POST 请求
+    return httpInstance({
+        url: `/QiNiu/upload`,
+        method: "post",
+        data: formData, // 将 FormData 对象作为请求体
+        headers: {
+            'Content-Type': 'multipart/form-data'
+        }
+    });
+}

src/api/user/user.js

@@ -33,6 +33,6 @@ export const updateUserInfo= (user)=>{
     return http.request({
         url:"/user/update",
         method:"post",
-        params:user
+        data:user
     })
 }

src/components/ImageUpload.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="img-upload">
+        <input v-show="0 != 0" ref="input" type="file" name="image" accept="image/*" @change="upload" :v-model="file">
+        <!-- <el-button type="" @click="uploadClick">上传</el-button> -->
+        <!-- <div v-if="imageUrl == ''" class="img-upload-box" @click="uploadClick">
+            <p>+</p>
+        </div> -->
+        <!-- <img class="img-img" v-if="imageUrl!=''" :src="imageUrl" alt="" style="height: 100%;"> -->
+        <el-image class="img-img" v-if="imageUrl != ''" style="height:100%" :src="imageUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
+            :preview-src-list="[imageUrl]" fit="cover" />
+        <el-button v-if="imageUrl != ''" type="primary" class="img-button" @click="uploadClick">修改头像</el-button>
+    </div>
+</template>
+<style lang="scss" scoped>
+.img-upload {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    border: 1px solid #ebeef5;
+}
+
+.img-img:hover + .img-button {
+    display: block;
+}
+
+.img-button{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: 100px;
+    height: 30px;
+    margin-bottom: 10px;
+    display: none;
+}
+.img-upload-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ffffff;
+}
+</style>
+<script setup>
+import { uploadImage } from '@/api/upload/upload';
+import { ref, watch } from 'vue';
+// 抛出事件
+const emit = defineEmits(['upload']);
+const props=defineProps({
+    img:{
+        type:String,
+        default:''
+    }
+})
+watch(props.img,(newV)=>{
+    if(newV!=null){
+        console.log("传入了图片")
+        imageUrl.value=newV;
+    }
+},{
+deep: true})
+// const 
+// eslint-disable-next-line no-unused-vars
+//文件对象
+const file = ref(null);
+//上传框dom
+const input = ref(null);
+//图片url
+const imageUrl = ref('');
+//点击开启上传
+const uploadClick = () => {
+    input.value.click();
+}
+//上传
+const toUploadImage = async () => {
+    let res = await uploadImage(file.value);
+    if (res.code == 1) {
+        //成功
+        return res.data;
+    }
+    return null;
+}
+const upload = async (e) => {
+    let imgMaxSize = 1024 * 1024 * 4;
+    if (e.target.files[0].size > imgMaxSize) {
+        alert("图片大小不能超过4M");
+        return;
+    }
+    if (['jpeg', 'png', 'gif', 'jpg'].indexOf(e.target.files[0].type.split("/")[1]) < 0) {
+        //用你选择组件的报错弹窗就行，报出以下提醒
+        alert("上传的文件必须是图片格式");
+        return;
+    }
+    file.value = e.target.files[0];
+    // alert("上传文件");
+    let url = await toUploadImage();
+    if (url != null) {
+        imageUrl.value = url;
+        emit('upload', url);
+    } else {
+        alert("上传失败");
+    }
+}
+const updateUrl=(img)=>{
+    file.value=null;
+    if(img==null){
+        imageUrl.value='';
+        return ;
+    }
+    imageUrl.value=img;
+}
+//暴露方法
+defineExpose(
+    {
+        updateUrl
+    }
+)
+</script>

src/components/TypeSelect.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="word-list">
+      <!-- {{ props.type }}{{ props }} -->
       <div
         v-for="word in words"
         :key="word.id"
@@ -8,6 +9,7 @@
       >
         {{ word.name }}
       </div>
+
     </div>
   </template>
   
@@ -29,6 +31,9 @@
     emit('select',word);
     // 这里可以抛出一个事件，或者调用其他方法
   };
+  onMounted(()=>{
+    getWords();
+  })
   </script>
   <style scoped>
   .word-list {

src/store/TopicBox.js

@@ -0,0 +1,9 @@
+// import { ref, computed } from 'vue'
+// import { defineStore } from 'pinia'
+
+// export const useCounterStore = defineStore('useTopicBox', () => {
+//     const index = ref(1);
+//     const Topics=ref([]);
+//     const count = computed(()=>Topics.value.length);
+//     return { count, doubleCount, increment }
+// })

src/utils/debounceRef.js

@@ -0,0 +1,24 @@
+import { customRef } from "vue";
+/**
+ * 防抖Ref
+ * @param {} value 
+ * @param {*} delay 
+ * @returns 
+ */
+export const debounceRef = (value, delay = 1000) => {
+    let timeout;
+    return  customRef((track,trigger)=>({
+        get () {
+            track();
+            return value;
+        },
+        set (val) {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                value = val;
+                trigger();
+            }, delay);
+        }
+    }))
+    
+};

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