CQLJQWXY/web/src/views/tab4/tab4-2.vue

<template>
  <div class="tab4-2">
    <div class="search" @keyup.enter="mySearch">
      <el-input
        placeholder="请输入关键词..."
        suffix-icon="el-icon-search"
        v-model="formData.searchKey"
      >
      </el-input>
      <span class="btn" @click="mySearch"></span>
    </div>
    <!-- 内容 -->
    <div class="conten" v-if="myArr.length !== 0">
      <div class="row" v-for="(item, index) in myArr" :key="item.id">
        <el-image
          @click="lookBigImg(item, index)"
          style="width: 351px; height: 200px"
          :src="baseURL + item.thumb"
          :preview-src-list="srcList"
        >
        </el-image>
        <!-- <img src="../../assets/img/demo2.png" alt="" /> -->
        <p :title="item.name">{{ item.name }}</p>
      </div>
    </div>
    <div class="tab4-2 conNull" v-else>暂 无 数 据</div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        layout="prev,pager,next,jumper"
        :total="total"
        :current-page="formData.pageNum"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
    <!-- 大图预览里面的文字显示 -->
    <div class="imgBigShow" v-if="imgBigShow">{{ imgBigTxt }}</div>
  </div>
</template>
<script>
import axios from "@/utils/request";
import { imgList, webVisit } from "@/utils/api";
export default {
  name: "tab4-2",
  components: {},
  data() {
    // 这里存放数据
    return {
      tempNum: 0,
      imgBigTxt: "",
      imgBigShow: false,
      myArr: [],
      total: 0,
      formData: {
        pageNum: 1,
        pageSize: 8,
        searchKey: "",
      },
      baseURL: "",
      srcList: [""],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //点击图片，查看大图
    async lookBigImg(item, index) {
      this.imgBigTxt = item.name;
      this.tempNum = index;
      this.$nextTick(() => {
        setTimeout(() => {
          this.imgBigShow = true;
          //因为污染自己写滚轮缩放
          document
            .querySelector(".el-image-viewer__wrapper")
            .addEventListener("mousewheel", (event) => {
              let delta = 0;
              if (!event) event = window.event;
              if (event.wheelDelta) {
                delta = event.wheelDelta / 120;
                if (window.opera) delta = -delta;
              } else if (event.detail) {
                delta = -event.detail / 3;
              }
              let img = document.querySelector(".el-image-viewer__img");
              if (delta > 0) {
                let width = img.width;
                img.width = width * 1.1;
              } else if (delta < 0) {
                let width = img.width;
                if (width > 100) {
                  img.width = width * 0.9;
                }
              }
            });
          const myTemp = document.querySelector(".el-image-viewer__mask");
          myTemp.addEventListener("click", () => {
            this.imgBigShow = false;
          });
          const temp = document.querySelector(".el-image-viewer__close");
          temp.addEventListener("click", () => {
            this.imgBigShow = false;
            // console.log('我点了里面的关闭')
          });
          // 左按钮
          const tempLeft = document.querySelector(".el-image-viewer__prev");
          tempLeft.addEventListener("click", () => {
            this.tempNum--;
            if (this.tempNum < 0) this.tempNum = this.myArr.length - 1;
            this.imgBigTxt = this.myArr[this.tempNum].name;
          });
          // 右按钮
          const tempRight = document.querySelector(".el-image-viewer__next");
          tempRight.addEventListener("click", () => {
            this.tempNum++;
            if (this.tempNum === this.myArr.length) this.tempNum = 0;
            this.imgBigTxt = this.myArr[this.tempNum].name;
          });
        }, 100);
      });
      // 记录访问量
      await webVisit("img", item.id);
    },
    // 分页器方法
    currentChange(val) {
      // console.log('当前页改变了', val)
      this.formData.pageNum = val;
      this.imgList(this.formData);
    },
    sizeChange(val) {
      // console.log('条数改变了', val)
      this.formData.pageNum = 1;
      this.formData.pageSize = val;
      this.imgList(this.formData);
    },
    mySearch() {
      // console.log("点击了搜索");
      this.formData.pageNum = 1;
      this.imgList(this.formData);
    },
    // 封装获取列表函数
    async imgList(data) {
      const res = await imgList(data);
      this.total = res.data.total;
      this.myArr = res.data.records;
      let temp = [];
      res.data.records.forEach((v) => {
        temp.push(this.baseURL + v.thumb);
      });
      this.srcList = temp;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL;
    this.imgList(this.formData);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.conNull {
  display: flex;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  color: #b9412e !important;
}
.tab4-2 {
  position: relative;
  /*修改提示文字的颜色*/
  /deep/input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #b9412e;
  }
  /deep/input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #b9412e;
  }
  /deep/input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b9412e;
  }
  /deep/input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #b9412e;
  }
  // position: relative;
  padding: 30px 200px;
  display: flex;
  width: 100%;
  height: 620px;
  color: black;

  .search {
    z-index: 10;
    /*修改提示文字的颜色*/
    /deep/input::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #be1220;
    }
    /deep/input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #be1220;
    }
    /deep/input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #be1220;
    }
    /deep/input:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #be1220;
    }

    width: 700px;
    height: 50px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    /deep/.el-input__suffix {
      width: 50px;
      height: 50px;
      font-size: 20px;
      right: 0;
    }
    /deep/.el-input__inner {
      border-radius: 50px;
      height: 50px;
      border: 1px solid #be1220;
    }
    .btn {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background-color: transparent;
    }
  }

  .conten {
    height: 530px;
    display: flex;
    flex-wrap: wrap;
    .row {
      color: #626260;
      background-color: #fff;
      box-shadow: 1px 1px 2px 2px #ccc;
      cursor: pointer;
      margin: 20px 30px 10px 0;
      width: 351px;
      height: 235px;
      /deep/.el-image__preview {
        object-fit: cover;
      }
      & > img {
        width: 351px;
        height: 200px;
      }
      & > p {
        padding: 0 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18px;
        margin-top: 3px;
        text-align: center;
      }
      &:hover {
        background-color: #be1220;
        color: #fff;
      }
    }
    .row:nth-of-type(4n) {
      margin-right: 0;
    }
  }
  .paging {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    /deep/.el-input__inner {
      width: 30px;
      height: 30px !important;
      background-color: transparent;
      border-radius: 50%;
    }
  }
  .imgBigShow {
    padding: 3px 5px;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 18px;
    z-index: 9999;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100px;
    color: #fff;
  }
}
</style>