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" v-show="model === '2D' || item.type !== 'straw'" @click="genre = item.type"
            :class="{ active: item.type === genre }" v-for="(item) in genreList" :key="item.bs">
            {{ item.name }}
          </div>
          <div class="row" @click="genre = 'picture'" :class="{ active: 'picture' === genre }" v-if="model === '2D'">
            照片
          </div>
          <div class="row" @click="genre = 'Italy'" :class="{ active: 'Italy' === genre }" v-if="model === '2D'">
            字画
          </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="data.length === 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'" :data="data" />
      <Tow v-else :data="data" />
    </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 { addNumAPI } from "@/utils/api";

import { goodsData } from "./data";
import Three from "./components/Three.vue";
import Tow from "./components/Tow.vue";


goodsData['2D'] = goodsData['2D'].map(v => ({
  ...v,
  imgNum: v.imgNum && v.imgNum > 3 ? 3 : v.imgNum

}))
export default {
  name: "Goods",
  //import引入的组件需要注入到对象中才能使用
  components: { Three, Tow },
  data() {
    //这里存放数据
    return {
      model: "3D",
      genre: "all",
      txt: "",
      genreList: [
        { name: "全部", type: "all" },
        { name: "手稿", type: "straw" },
        { name: "书刊", type: "book" },
        { name: "用具", type: "tool" },
        { name: "服装", type: "clothing" },
      ],
      rightList: [
        { name: "首页", type: 1 },
        { name: "声音", type: 2 },
        { name: "点赞", type: 3 },
        { name: "分享", type: 4 },
      ],
      music: false,
      like: false,
      share: false,
      data: [],

    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    genre(val) {
      let temp = goodsData[this.model]
      if (val === "all") {
        this.data = temp.filter((v) => v.name.includes(this.txt));
      } else {
        let temp2 = temp.filter((v) => v.type === val);
        this.data = temp2.filter((v) => v.name.includes(this.txt));
      }
    },
    share(val) {
      this.$refs.ThreeRef.moveShareCut(val);
    },
    music(val) {
      let dom = document.querySelector("#bacMusic");
      if (val) dom.play();
      else dom.pause();
    },
    model(val) {
      this.data = goodsData[val];
      this.genre = "all";
      this.txt = "";
    },
  },
  //方法集合
  methods: {
    mySearch() {
      let val = this.genre;
      let temp = goodsData[this.model];
      if (val === "all") {
        this.data = temp.filter((v) => v.name.includes(this.txt));
      } else {
        let temp2 = temp.filter((v) => v.type === val);
        this.data = temp2.filter((v) => v.name.includes(this.txt));
      }
    },
    rightClisk(type) {
      if (type === 1) this.$router.replace("/Home");
      if (type === 2) this.music = !this.music;
      if (type === 3) {
        if (this.like) return;
        this.like = true;
        setTimeout(() => {
          this.like = false;
        }, 2000);
        addNumAPI("star");
      }
      if (type === 4) this.share = true;
    },
    //点击复制链接
    copyPcTxt() {
      // 存储传递过来的数据
      let OrderNumber = window.location.origin + "/YHT/index.html";
      // 创建一个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() {
    this.data = goodsData[this.model];
  },
  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: 40px;

      .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: 40px;

      .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: 100px;
    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>