暂时修改以图搜图页面UI

src/views/culturalRelic/index.vue

@@ -275,22 +275,6 @@ export default {
     defImg(e) {
       e.target.src = require("@/assets/404_images/no-pic.png");
     },
-
-    // handleTypeChange(value) {
-    //   this.type = value;
-    //   this.list.current = 1;
-    //   this.loadData();
-    // },
-    // handleYearsChange(value) {
-    //   if (value && value instanceof Array) {
-    //     this.years = value[value.length - 1];
-    //   } else {
-    //     this.years = value;
-    //   }
-    //   this.list.current = 1;
-    //   this.loadData();
-    //   this.$refs.years.dropDownVisible = false;
-    // },
     handleKeyWordChange(value) {
       this.keyword = value;
       this.loadData();

src/views/searchPic/components/imgList/index.vue

@@ -10,11 +10,11 @@
       :gap="30"
       @click="handleClickImg"
     >
-      <div class="img-info" slot-scope="props">
+      <!-- <div class="img-info" slot-scope="props">
         <div class="name">{{ props.value.sourceName }}</div>
         <div class="year">{{ props.value.yearsLabel }}</div>
         <div class="deptName">{{ props.value.deptName }}</div>
-      </div>
+      </div> -->
       <div slot="waterfall-over" class="load-over">已加载完全部</div>
     </vue-waterfall-easy>
     <el-empty v-else></el-empty>
@@ -68,10 +68,10 @@ export default {
     },
     // 给父组件调用的
     getWaterfallHeight() {
-      const emptySpace = 300;
-      this.waterfallHeight = "100vh";
-      this.waterfallHeight =
-        this.$refs.ImgList.offsetHeight + emptySpace + "px";
+      const emptySpace = 340;
+      this.waterfallHeight = "120vh";
+      const { offsetHeight } = this.$refs.ImgList;
+      this.waterfallHeight = offsetHeight + emptySpace + "px";
     },
     handleClickImg(event, { index, value }) {
       // 阻止a标签跳转
@@ -98,6 +98,11 @@ $box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03),
     box-shadow: none;
     transition: all ease 0.3s;
     cursor: pointer;
+    img {
+      border-radius: 8px;
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+    }
 
     &:hover {
       transform: translateY(-10px);
@@ -105,7 +110,7 @@ $box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03),
   }
 
   ::v-deep .vue-waterfall-easy-scroll {
-    overflow: auto !important;
+    overflow: hidden !important;
   }
 
   .load-over {

src/views/searchPic/index copy.vue

+<template>
+  <div
+    :class="['app-container', 'search-pic', showResult ? 'show-result' : '']"
+  >
+    <div class="banner">
+      <div class="text" v-if="!showResult">
+        <div class="title">以图搜图</div>
+        <div class="subtitle">
+          以图搜图是一种方便快捷的搜索方式，它可以帮助您在海量的图片信息中快速找到您需要的图片。
+          <br />
+          通过上传或直接输入图片，以图搜图可以为您匹配相似的图片，或者根据图片内容找到相关的图片，让您可以更轻松地获取所需图片。
+        </div>
+      </div>
+      <div class="left-pic"></div>
+      <div class="right-pic"></div>
+    </div>
+    <div class="upload-wrapper">
+      <div class="upload-bar" @click="handleClickUpload">
+        <div class="left-area" title="点击此处上传图片">
+          <div class="text">点击此处上传图片</div>
+          <div class="camera">
+            <i class="el-icon-picture-outline" title="点击此处上传图片"></i>
+          </div>
+        </div>
+        <div class="right-button">以图搜图</div>
+      </div>
+      <el-upload
+        v-show="false"
+        ref="uploader"
+        class="upload-area"
+        accept=".jpg,.png"
+        action
+        :before-upload="handleBeforeUpload"
+        :show-file-list="false"
+        :on-success="handleSuccess"
+        :disabled="loading"
+      >
+        <el-button ref="uploadButton" class="upload-button">上传</el-button>
+      </el-upload>
+    </div>
+    <div class="current-pic" v-if="currentImg && showResult">
+      <div class="img-container">
+        <img :src="currentImg" alt="" />
+      </div>
+      根据您上传的图片，为您推荐相似图片{{ imgList.length }}张
+    </div>
+    <ImgList v-if="showResult" :imgList="imgList" ref="List" />
+  </div>
+</template>
+
+<script>
+import ImgList from "./components/imgList";
+import { searchImageByUpload, searchImageByImg } from "@/api/culturalRelic";
+export default {
+  components: {
+    ImgList,
+  },
+  data() {
+    return {
+      showResult: false, //是否展示图片结果
+      currentImg: "", //当前搜索的图片
+      loading: false, //是否正在上传
+      imgList: [],
+      size: 20,
+    };
+  },
+  mounted() {
+    const { fileId, fileUrl } = this.$route.query;
+    this.search(fileId, fileUrl);
+  },
+  methods: {
+    async search(fileId, fileUrl) {
+      if (!fileId || !fileUrl) {
+        return;
+      }
+      const formData = new FormData();
+      formData.append("size", this.size);
+      formData.append("fileId", fileId);
+      this.showResult = false; //先清空之前imgList已有的高度
+      const res = await searchImageByImg(formData);
+      if (res.code == 0) {
+        this.currentImg = fileUrl;
+        this.imgList = res.data;
+        this.showResult = true;
+        this.$nextTick(() => {
+          this.$refs["List"].getWaterfallHeight();
+        });
+      }
+    },
+    // 上传前钩子，处理文件类型
+    async handleBeforeUpload(file) {
+      let reg = /(?<=\.)[a-z]+$/g;
+      let fileType = file.name.match(reg) + "";
+      let typeArr = ["png", "jpg", "jpeg"];
+      if (!typeArr.includes(fileType)) {
+        this.$message.warning("上传文件格式错误!");
+        return;
+      }
+      let formData = new FormData();
+      formData.append("file", file);
+      formData.append("size", this.size);
+      const loading = this.$loading({
+        lock: true,
+        text: "正在海量的图库中搜索...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      this.showResult = false; //先清空之前imgList已有的高度
+      const res = await searchImageByUpload(formData);
+      if (res.code == 0) {
+        const length = res.data.length;
+        this.$message.success(`上传成功并获得${length}张相似图片`);
+        this.imgList = res.data;
+        this.showResult = true;
+        loading.close();
+        this.showCurrentImg(file);
+        this.clearRouterQuery();
+        this.$nextTick(() => {
+          this.$refs["List"].getWaterfallHeight();
+        });
+      }
+    },
+
+    clearRouterQuery() {
+      if (this.$route.query.fileId) {
+        const query = {};
+        this.$router.replace({ query });
+      }
+    },
+
+    showCurrentImg(file) {
+      const that = this;
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function (e) {
+        that.currentImg = this.result; //显示缩略图
+      };
+    },
+    // 上传成功之后的钩子
+    handleSuccess(res) {
+      this.loading = false;
+    },
+    // 关闭已上传的图片
+    handleCloseImg() {
+      this.currentImg = "";
+    },
+    // 点击上传
+    handleClickUpload() {
+      if (this.loading) {
+        this.$message.warning("当前有图片正在上传，请稍等~");
+        return;
+      }
+      this.$refs.uploader.$el.querySelector(".upload-button").click();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+$box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+$box-shadow-hover: rgba(0, 0, 0, 0.16) 0px 3px 6px,
+  rgba(0, 0, 0, 0.23) 0px 3px 6px;
+$transition-ease-03s: all ease 0.3s;
+.app-container {
+  width: 100%;
+  background-image: url("@/assets/imgs/home-new/all-bg.png");
+}
+.search-pic {
+  min-height: 70vh !important;
+}
+.show-result {
+  .banner {
+    height: 40px;
+    .text {
+      padding: 80px 12%;
+    }
+  }
+}
+.banner {
+  height: 400px;
+  width: 100%;
+  position: relative;
+  .left-pic {
+    transition: all ease 0.5s;
+    position: absolute;
+    left: -300px;
+    top: 100px;
+    height: 400px;
+    width: 700px;
+    background-size: contain;
+    background-image: url("@/assets/imgs/line-draft/6.png");
+    background-repeat: no-repeat;
+    z-index: 0;
+  }
+  .right-pic {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 200px;
+    width: 300px;
+    background-size: contain;
+    background-image: url("@/assets/imgs/line-draft/3.png");
+    background-repeat: no-repeat;
+    z-index: 0;
+  }
+  .text {
+    width: 100%;
+    height: 100%;
+    z-index: 4;
+    color: #fff;
+    padding: 200px 12%;
+    opacity: 1;
+    transition: $transition-ease-03s;
+    color: $deep-blue;
+    .title {
+      font-size: 48px;
+      font-family: "SourceHanSerifCN-Bold";
+      text-align: center;
+      margin-bottom: 8px;
+    }
+    .subtitle {
+      text-align: center;
+      text-indent: 28px;
+      letter-spacing: 2px;
+    }
+  }
+}
+.upload-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 0 16%;
+  position: relative;
+  margin-bottom: 16px;
+  font-size: 18px;
+  .upload-bar {
+    box-shadow: $box-shadow;
+    background: #fff;
+    border-radius: 12px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 20px;
+    border: 1px solid $deep-blue;
+    position: relative;
+    cursor: pointer;
+    transition: $transition-ease-03s;
+    &:hover {
+      box-shadow: $box-shadow-hover;
+    }
+    .left-area {
+      display: flex;
+      justify-content: space-between;
+      padding-right: 16px;
+      width: 80%;
+      color: #999;
+      .text {
+        display: flex;
+        align-items: center;
+      }
+      i {
+        font-size: 30px;
+        color: $deep-blue;
+      }
+    }
+    .right-button {
+      width: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      background: $deep-blue;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      border-radius: 0 12px 12px 0;
+    }
+  }
+}
+
+.current-pic {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 20px 16%;
+  position: relative;
+  z-index: 2;
+  .img-container {
+    display: flex;
+    position: relative;
+    transition: all ease 0.3s;
+    margin-right: 16px;
+    width: 130px;
+    height: 130px;
+    background-color: #fff;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}
+.img-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+::v-deep .el-loading-mask {
+  border-radius: 12px;
+}
+</style>

src/views/searchPic/index.vue

@@ -38,7 +38,7 @@
         <el-button ref="uploadButton" class="upload-button">上传</el-button>
       </el-upload>
     </div>
-    <div class="current-pic" v-if="currentImg">
+    <div class="current-pic" v-if="currentImg && showResult">
       <div class="img-container">
         <img :src="currentImg" alt="" />
       </div>
@@ -73,14 +73,18 @@ export default {
       if (!fileId || !fileUrl) {
         return;
       }
-      const params = {
-        size: this.size,
-        fileId,
-      };
-      const res = await searchImageByImg(params);
+      const formData = new FormData();
+      formData.append("size", this.size);
+      formData.append("fileId", fileId);
+      this.showResult = false; //先清空之前imgList已有的高度
+      const res = await searchImageByImg(formData);
       if (res.code == 0) {
         this.currentImg = fileUrl;
         this.imgList = res.data;
+        this.showResult = true;
+        this.$nextTick(() => {
+          this.$refs["List"].getWaterfallHeight();
+        });
       }
     },
     // 上传前钩子，处理文件类型
@@ -101,6 +105,7 @@ export default {
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
+      this.showResult = false; //先清空之前imgList已有的高度
       const res = await searchImageByUpload(formData);
       if (res.code == 0) {
         const length = res.data.length;
@@ -109,11 +114,20 @@ export default {
         this.showResult = true;
         loading.close();
         this.showCurrentImg(file);
+        this.clearRouterQuery();
         this.$nextTick(() => {
           this.$refs["List"].getWaterfallHeight();
         });
       }
     },
+
+    clearRouterQuery() {
+      if (this.$route.query.fileId) {
+        const query = {};
+        this.$router.replace({ query });
+      }
+    },
+
     showCurrentImg(file) {
       const that = this;
       var reader = new FileReader();
@@ -155,16 +169,29 @@ $transition-ease-03s: all ease 0.3s;
 }
 .show-result {
   .banner {
-    height: 40px;
+    height: 200px;
     .text {
       padding: 80px 12%;
     }
   }
+  .upload-bar {
+    transform: translateY(-141px) !important;
+    .right-button {
+      border: 1px solid #fff;
+    }
+  }
+  .current-pic,
+  .img-list {
+    transform: translateY(-136px);
+  }
 }
 .banner {
-  height: 400px;
+  height: 300px;
   width: 100%;
   position: relative;
+  overflow: hidden;
+  background-color: $deep-blue;
+  color: #fff;
   .left-pic {
     transition: all ease 0.5s;
     position: absolute;
@@ -192,11 +219,10 @@ $transition-ease-03s: all ease 0.3s;
     width: 100%;
     height: 100%;
     z-index: 4;
-    color: #fff;
-    padding: 200px 12%;
+    padding: 80px 12% 120px;
     opacity: 1;
     transition: $transition-ease-03s;
-    color: $deep-blue;
+    color: #fff;
     .title {
       font-size: 48px;
       font-family: "SourceHanSerifCN-Bold";
@@ -217,6 +243,7 @@ $transition-ease-03s: all ease 0.3s;
   position: relative;
   margin-bottom: 16px;
   font-size: 18px;
+
   .upload-bar {
     box-shadow: $box-shadow;
     background: #fff;
@@ -229,6 +256,7 @@ $transition-ease-03s: all ease 0.3s;
     position: relative;
     cursor: pointer;
     transition: $transition-ease-03s;
+    transform: translateY(-34px);
     &:hover {
       box-shadow: $box-shadow-hover;
     }