From ea9d06a5adde5b95e65dcd6eecfcd6149f32eec3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=99=BE=E5=A3=B3?=
 <121141103+disk5@users.noreply.github.com>
Date: Wed, 17 Jul 2024 20:25:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/upload/upload.js        |  18 +++++
 src/api/user/user.js            |   2 +-
 src/components/ImageUpload.vue  | 124 ++++++++++++++++++++++++++++++++
 src/components/Xuaua_header.vue |  48 +++++++------
 src/stores/TopicBox.js          |   9 +++
 5 files changed, 178 insertions(+), 23 deletions(-)
 create mode 100644 src/api/upload/upload.js
 create mode 100644 src/components/ImageUpload.vue
 create mode 100644 src/stores/TopicBox.js

diff --git a/src/api/upload/upload.js b/src/api/upload/upload.js
new file mode 100644
index 0000000..4f65367
--- /dev/null
+++ b/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'
+        }
+    });
+}
diff --git a/src/api/user/user.js b/src/api/user/user.js
index 05ef924..15224fd 100644
--- a/src/api/user/user.js
+++ b/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
     })
 }
diff --git a/src/components/ImageUpload.vue b/src/components/ImageUpload.vue
new file mode 100644
index 0000000..99c5f5b
--- /dev/null
+++ b/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>
diff --git a/src/components/Xuaua_header.vue b/src/components/Xuaua_header.vue
index 0574c33..2e7df82 100644
--- a/src/components/Xuaua_header.vue
+++ b/src/components/Xuaua_header.vue
@@ -2,34 +2,21 @@
   <div class="nav">
     <div class="logo-box"><span class="loogText">Xuaua</span></div>
     <div>
-      <div class="search-box">
-        <!-- <el-input type="text" prefix-icon="el-icon-search" style="height: 38px;" class="search-input" placeholder="搜索关键词" v-model="selectType">
-      
-          </el-input> -->
-        <el-input
-          v-model="input3"
-          style="max-width: 600px"
-          placeholder="搜索关键词"
-          class="input-with-select"
-        >
-          <template #prepend>
-            <el-button :icon="Search" />
-          </template>
-        </el-input>
-
-      </div>
-
+     
       <el-popover :width="700" trigger="click">
           <template #reference>
-            <!-- <div class="selectInput">
+            <div class="search-box">
+              <div class="selectInput">
               <div @click="selectClick">
                 <el-icon :size="size" :color="color">
                   <Search />
                 </el-icon>
               </div>
-            </div> -->
+              <input type="text" placeholder="搜索关键词" v-model="type" />
+            </div>
+      </div>
           </template>
-          <TypeSelect @select="selectInput"></TypeSelect>
+          <TypeSelect @select="selectInput" :type="type"></TypeSelect>
         </el-popover>
     </div>
     <div @click="router.push('/user')" class="user-avatar">
@@ -39,12 +26,29 @@
 </template>
 <script setup>
 // import {defineProps} from "vue"
-import { ElMessage } from "element-plus";
 import TypeSelect from "@/components/TypeSelect.vue";
+import { debounceRef } from "@/utils/debounceRef";
 import { ref } from 'vue'
 import { Search } from '@element-plus/icons-vue'
+const type = debounceRef('', 500);
 </script>
-<style lang="scss">
+<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;
diff --git a/src/stores/TopicBox.js b/src/stores/TopicBox.js
new file mode 100644
index 0000000..e90d79d
--- /dev/null
+++ b/src/stores/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 }
+// })