YuHuaTai-Pc/vue/src/views/Goods/index.vue

<!--  -->
<template>
  <div class="Goods" @click.once="music = true">
    <audio src="../../assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
    <!-- 左侧搜索 -->
    <div class="leftTop">
      <div class="model">
        <div
          class="row1"
          @click="model = '3D'"
          :class="{ active: model === '3D' }"
        >
          <div class="rowll"></div>
          <div class="rowrr">三维文物</div>
        </div>
        <div
          class="row1"
          @click="model = '2D'"
          :class="{ active: model === '2D' }"
        >
          <div class="rowll"></div>
          <div class="rowrr">二维文物</div>
        </div>
      </div>
      <div class="type">
        <div class="typell">类型：</div>
        <div class="typerr">
          <div
            class="row"
            @click="genre = item.type"
            :class="{ active: item.type === genre }"
            v-for="(item, index) in genreList"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="inputSearch" @keyup.enter="mySearch">
        <input
          class="searll"
          autofocus
          type="text"
          v-model="txt"
          placeholder="请输入文物名称"
        />
        <div class="searrr" @click="mySearch">
          <img src="../../assets/img/Goods/search.svg" alt="" />
        </div>
      </div>
    </div>

    <!-- 右侧图标 -->
    <div class="rightTop">
      <div
        class="row"
        @click="rightClisk(item.type)"
        v-for="item in rightList"
        :key="item.type"
        :class="{
          active2:
            (music && item.type === 2) ||
            (like && item.type === 3) ||
            (share && item.type === 4),
        }"
      >
        <img
          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
          alt=""
          v-if="music && item.type === 2"
        />
        <img
          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
          alt=""
          v-else-if="like && item.type === 3"
        />
        <img
          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
          alt=""
          v-else-if="share && item.type === 4"
        />
        <img
          :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
          alt=""
          v-else
        />
        <transition name="likeAddAnimate">
          <div class="likeMove" v-show="like && item.type === 3">+ 1</div>
        </transition>
        <p>
          {{ item.name }}
        </p>
      </div>
    </div>

    <div class="nullSerach" v-if="0">
      <div>
        <img src="../../assets/img/Goods/nullSearch.png" alt="" />
        <p>暂时没有数据</p>
        <p>请试一下其他关键字</p>
      </div>
    </div>
    <template v-else>
      <Three ref="ThreeRef" v-if="model === '3D'" />
      <Tow v-else />
    </template>

    <!-- 分享页面 -->
    <div class="shareBox" :class="{ shareBoxShow: share }">
      <div class="shareMain">
        <div class="close" @click="share = false"></div>
        <h3>分享</h3>
        <p>
          请使用手机扫描二维码或
          <br />
          复制分享链接
        </p>
        <img src="../../assets/img/Goods/Rcode.jpg" alt="" />
        <div class="btnn" @click="copyPcTxt">复制分享链接</div>
      </div>
    </div>
  </div>
</template>

<script>
import Three from "./components/Three.vue";
import Tow from "./components/Tow.vue";
export default {
  name: "Goods",
  //import引入的组件需要注入到对象中才能使用
  components: { Three, Tow },
  data() {
    //这里存放数据
    return {
      model: "3D",
      genre: "all",
      txt: "",
      genreList: [
        { name: "全部", type: "all" },
        { name: "手稿", type: "all1" },
        { name: "书刊", type: "all2" },
        { name: "用具", type: "all3" },
        { name: "服装", type: "all4" },
      ],
      rightList: [
        { name: "首页", type: 1 },
        { name: "声音", type: 2 },
        { name: "点赞", type: 3 },
        { name: "分享", type: 4 },
      ],
      music: false,
      like: false,
      share: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    share(val) {
      this.$refs.ThreeRef.moveShareCut(val);
    },
    music(val) {
      let dom = document.querySelector("#bacMusic");
      if (val) dom.play();
      else dom.pause();
    },
    model() {
      this.genre = "all";
      this.txt = "";
    },
  },
  //方法集合
  methods: {
    mySearch() {},
    rightClisk(type) {
      if (type === 1) this.$router.replace("/");
      if (type === 2) this.music = !this.music;
      if (type === 3) {
        if (this.like) return;
        this.like = true;
        setTimeout(() => {
          this.like = false;
        }, 2000);
      }
      if (type === 4) this.share = true;
    },
    //点击复制链接
    copyPcTxt() {
      // 存储传递过来的数据
      let OrderNumber = window.location.origin;
      // 创建一个input 元素
      // createElement() 方法通过指定名称创建一个元素
      let newInput = document.createElement("input");
      // 讲存储的数据赋值给input的value值
      newInput.value = OrderNumber;
      // appendChild() 方法向节点添加最后一个子节点。
      document.body.appendChild(newInput);
      // 选中input元素中的文本
      // select() 方法用于选择该元素中的文本。
      newInput.select();
      // 执行浏览器复制命令
      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
      document.execCommand("Copy");
      // 清空输入框
      newInput.remove();
      alert("复制成功");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.likeAddAnimate-enter-active,
.likeAddAnimate-leave-active {
  transition: all 2s ease;
}
.likeAddAnimate-enter,
.likeAddAnimate-leave {
  transform: translateY(0) scale(0);
  opacity: 0;
}
.likeAddAnimate-enter-to,
.likeAddAnimate-leave-to {
  transform: translateY(-30px) scale(1.2);
  opacity: 1;
}
.Goods {
  padding-top: 140px;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/Goods/GoodsBac.png");
  background-size: 100% 100%;
  position: relative;
  .leftTop {
    position: absolute;
    top: 42px;
    left: 160px;
    height: 40px;
    display: flex;
    .model {
      color: #fff;
      width: 260px;
      height: 40px;
      border-radius: 20px;
      background-color: #930909;
      display: flex;
      justify-content: space-between;
      padding: 0 22px;
      margin-right: 50px;
      .row1 {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        .rowll {
          margin-right: 6px;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          border: 1px solid #d8b275;
          position: relative;
        }
        .rowrr {
          padding-bottom: 2px;
        }
      }
      .active {
        color: #d8b275;
        .rowll {
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            width: 14px;
            height: 14px;
            background-color: #d8b275;
          }
        }
      }
    }
    .type {
      display: flex;
      font-size: 16px;
      color: #fff;
      background-color: #930909;
      height: 40px;
      border-radius: 20px;
      padding: 0 20px;
      margin-right: 50px;
      .typell {
        width: 50px;
        line-height: 38px;
      }
      .typerr {
        display: flex;
        align-items: center;
        padding-bottom: 4px;
        .row {
          cursor: pointer;
          margin: 0 10px;
        }
        .active {
          color: #d8b275;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #d8b275;
          }
        }
      }
    }
    .inputSearch {
      overflow: hidden;
      display: flex;
      font-size: 16px;
      color: #fff;
      width: 260px;
      height: 40px;
      border-radius: 20px;
      display: flex;
      .searll {
        width: 214px;
        height: 40px;
        border: none;
        background-color: #fff;
        padding: 0 10px 0 20px;
        &:focus {
          outline: none;
        }
      }
      .searrr {
        cursor: pointer;
        background-color: #930909;
        width: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 4px;
        img {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .rightTop {
    position: absolute;
    top: 32px;
    right: 160px;
    height: 60px;
    display: flex;
    .row {
      position: relative;
      cursor: pointer;
      width: 50px;
      text-align: center;
      margin-left: 24px;
      & > img {
        width: 50px;
      }
      .likeMove {
        color: #930909;
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
      }
    }
    .active2 {
      color: #930909;
    }
  }
  .nullSerach {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    & > div {
      width: 240px;
      & > img {
        width: 100%;
      }
      & > p {
        text-align: center;
        color: #666666;
        font-size: 24px;
        margin: 10px 0;
      }
    }
  }
  .shareBox {
    z-index: 11;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(4px);
    transition: opacity 0.5s;
    .shareMain {
      padding: 40px 30px 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 450px;
      height: 650px;
      background-image: url("../../assets/img/Goods/shareBac.png");
      background-size: 100% 100%;
      text-align: center;
      .close {
        width: 48px;
        height: 48px;
        cursor: pointer;
        position: absolute;
        right: -24px;
        top: -24px;
        background-image: url("../../assets/img/Goods/shareClose.png");
        background-size: 100% 100%;
      }
      h3 {
        text-align: left;
        color: #d8b275;
        font-size: 24px;
        margin-bottom: 50px;
      }
      p {
        font-size: 20px;
        color: #ffffff;
        margin-bottom: 40px;
      }
      img {
        width: 240px;
        margin-bottom: 50px;
      }
      .btnn {
        cursor: pointer;
        width: 280px;
        margin: 0 auto;
        height: 60px;
        border-radius: 30px;
        border: 2px solid #d8b275;
        line-height: 58px;
        font-size: 20px;
        color: #ffffff;
      }
    }
  }
  .shareBoxShow {
    opacity: 1;
    pointer-events: auto;
  }
}
</style>