WuZhongBWG/web/src/views/gui/compomemt/antique.vue

<template>
  <div class="antique" :class="{ full: smBtn }">
    <!-- 毛玻璃 -->
    <div class="meanPageMBL"></div>

    <div class="main">
      <div class="top">
        <div class="row">类型：</div>
        <div
          class="row"
          v-for="item in topData"
          @click="cutType(item.type)"
          :key="item.name"
          :class="{ active: item.type === formData.type }"
        >
          {{ item.name }}
        </div>
        <div class="search" @keyup.enter="mySearch">
          <el-input
            prefix-icon="el-icon-search"
            type="text"
            placeholder="搜索"
            v-model="formData.searchKey"
            maxlength="10"
          />
          <span class="btnn" @click="mySearch"></span>
        </div>
      </div>
      <!-- 没有数据的时候 -->
      <div class="hint" v-if="myArr.length === 0">
        <img src="@/assets/img/serachNull.png" alt="" />
        <p>暂时没有数据</p>
        <p>请试一下其他关键字</p>
      </div>
      <!-- 渲染的内容 -->
      <div class="infoBox" v-else>
        <div
          @click="lookInfo(item)"
          class="infoRow"
          :title="item.name"
          v-for="item in myArr"
          :key="item.id"
        >
          <img :src="baseURL + item.thumb" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </div>
      <!-- 分页 -->
      <div class="paging" v-show="myArr.length !== 0">
        <el-pagination
          layout="prev,pager,next,jumper"
          :total="total"
          :current-page="formData.pageNum"
          @current-change="currentChange"
          @size-change="sizeChange"
        >
        </el-pagination>
      </div>
      <!-- 关闭按钮 -->
      <div class="close el-icon-close" @click="$emit('close')"></div>
    </div>
    <!-- 模型和图片 -->
    <div class="model" v-if="modelShow">
      <div class="ifrCon" ref="ifrCon">
        <img :src="baseURL + txtInfo.thumb" alt="" v-if="txtInfo.type==='img'">
        <iframe :src="mySrc" frameborder="0" v-else></iframe>
        <!-- 全屏按钮 -->
        <div class="full" @click="screen" v-if="txtInfo.type==='model'">
          <img src="@/assets/img/tab3FullX.png" alt="" v-if="fullscreen" />
          <img src="@/assets/img/tab3Full.png" alt="" v-else />
        </div>
      </div>
      <div class="rightTxt">
        <h3>{{ txtInfo.name }}</h3>
        <p>{{txtInfo.description}}</p>
      </div>
      <!-- 返回按钮 -->
      <div class="close el-icon-arrow-left" @click="modelShow = false"></div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/request";
import { goodList } from "@/utils/api";
export default {
  name: "antique",
  props: {
    smBtn: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    //这里存放数据
    return {
      total: 0,
      baseURL: "",
      topData: [
        { name: "全部", type: "" },
        { name: "精品图片", type: "img" },
        { name: "三维模型", type: "model" },
      ],
      formData: {
        pageNum: 1,
        pageSize: 10,
        searchKey: "",
        type: "",
      },
      myArr: [],
      // 有关三维模型的数据
      mySrc: "",
      modelShow: false,
      fullscreen: false,
      txtInfo: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击模型全屏
    screen() {
      const element = this.$refs.ifrCon; // 获取容器
      if (this.fullscreen) {
        // 如果已经全屏了就退出全屏

        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 如果不是全屏就变成全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }

      this.fullscreen = !this.fullscreen;
    },
    lookInfo(item) {
        this.txtInfo = item;
        // 三维模型
        this.mySrc ="4dage/Model.html?m=" + item.filePath;
        this.modelShow = true;
    },
    mySearch() {
      this.formData.pageNum = 1;
      this.goodList(this.formData);
    },
    cutType(type) {
      this.formData.type = type;
      this.formData.pageNum = 1;
      this.goodList(this.formData);
    },
    // 分页器方法
    currentChange(val) {
      // console.log('当前页改变了', val)
      this.formData.pageNum = val;
      this.goodList(this.formData);
    },
    sizeChange(val) {
      // console.log('条数改变了', val)
      this.formData.pageNum = 1;
      this.formData.pageSize = val;
      this.goodList(this.formData);
    },
    // 封装获取列表函数
    async goodList(data) {
      const res = await goodList(data);
      this.total = res.data.total;
      this.myArr = res.data.records;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL;
    this.goodList(this.formData);
    // 设置一个全局变量控制空格建的监听
    window.myKeyBlank =true
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    window.myKeyBlank =false
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.antique {
  transition: width 0.3s;
  color: #fff6d2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: calc(100% - 200px);
  height: 100%;
  // m毛玻璃
  .meanPageMBL {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(161, 101, 59, 0.8);
    backdrop-filter: blur(4px);
    z-index: -1;
  }
  .close {
    color: #cc946d;
    font-size: 34px;
    cursor: pointer;
    position: absolute;
    right: 40px;
    top: 55px;
  }
  .main {
    color: #774926;
    padding: 55px 26px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 700px;
    background: url("../../../assets/img/goodBg.png");
    background-size: 100% 100%;
    .top {
      height: 36px;
      display: flex;
      align-items: center;
      font-size: 16px;
      .row {
        cursor: pointer;
        height: 36px;
        line-height: 36px;
        padding: 0 20px;
        border-radius: 18px;
        margin-right: 15px;
        &:nth-of-type(1) {
          pointer-events: none;
          margin-right: 0;
        }
      }
      .active {
        background-color: #cc946d;
        color: #fff6d2;
      }
      .search {
        position: relative;
        /deep/.el-icon-search {
          color: #774926;
          font-size: 20px;
          margin-top: -1px;
        }
        .btnn {
          z-index: 10;
          cursor: pointer;
          position: absolute;
          left: 0;
          top: 0;
          height: 36px;
          width: 36px;
          border-radius: 50%;
          background-color: transparent;
        }
      }
    }
    .hint {
      text-align: center;
      margin-top: 100px;
      width: 100%;
      height: 380px;
      & > p {
        color: #cc946d;
        font-size: 20px;
        margin-top: 20px;
      }
    }
    .infoBox {
      display: flex;
      flex-wrap: wrap;
      margin-top: 55px;
      width: 100%;
      height: 410px;
      .infoRow {
        margin-right: 12px;
        margin-bottom: 26px;
        cursor: pointer;
        overflow: hidden;
        width: 220px;
        height: 192px;
        border-radius: 6px;
        background-color: #fff;
        & > img {
          width: 100%;
          height: 154px;
          object-fit: cover;
        }
        & > p {
          padding: 0 10px;
          width: 100%;
          height: 38px;
          line-height: 38px;
          font-size: 14px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:nth-of-type(5n) {
          margin-right: 0;
        }
        &:hover {
          & > p {
            color: #cc946d;
          }
        }
      }
    }
    .paging {
      position: absolute;
      bottom: 70px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
  // 模型
  .model {
    color: #774926;
    padding: 110px 26px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 700px;
    background: url("../../../assets/img/goodBg.png");
    background-size: 100% 100%;
    display: flex;
    .ifrCon {
      position: relative;
      width: 558px;
      height: 478px;
      iframe {
        width: 100%;
        height: 100%;
      }
      &>img{
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
      .full {
        width: 30px;
        height: 30px;
        cursor: pointer;
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #fff;
        & > img {
          width: 30px;
          height: 30px;
        }
      }
    }
    .rightTxt {
      padding-right: 20px;
      height: 478px;
      flex: 1;
      margin-left: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &>h3{
        width: 100%;
        word-break:break-all;
        font-size: 30px;
        margin-bottom: 30px;
      }
      &>P{
        width: 100%;
        word-break:break-all;
        color: #CC946D;
        font-size: 14px;
      }
    }
  }
}

.full {
  width: 100%;
}
</style>