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

<template>
  <div class="tab4-3" v-if="musicList.length !== 0">
    <div class="right">
      <div class="right_img"></div>
      <div class="right_top">
        <!-- 歌词 -->
        <div class="title">{{ myObj.name }}</div>
        <div class="txt" v-html="myObj.description"></div>
      </div>
      <div class="right_bottom">
        <Audio
          :audioSrc="baseURL + myObj.filePath"
          :title="myObj.name"
          @sonCutMu="sonCutMu"
        />
      </div>
    </div>

    <div class="left">
      <div class="title">歌单列表</div>
      <div class="listCon">
        <p
          :title="item.name"
          v-for="(item, index) in musicList"
          :key="item.id"
          :class="{ active: audioInd === index }"
          @click="cutMusic(item.id, index)"
        >
          <span
            class="triangle"
            :class="{ triangleShow: audioInd === index }"
          ></span>
          <span>{{ index + 1 }}</span>
          &emsp;{{ item.name }}
        </p>
      </div>
    </div>
    <!-- <div class="right_top" :style="{'background':`url(${baseURL+myObj.thumb}) #f3ebdd no-repeat center center`}"> -->
  </div>
  <div class="tab4-3 conNull" v-else>暂 无 数 据</div>
</template>

<script>
import Audio from "./audio.vue";
import axios from "@/utils/request";
import { musicList, webVisit } from "@/utils/api";
export default {
  name: "tab4-3",
  components: { Audio },
  data() {
    // 这里存放数据
    return {
      audioInd: 0,
      baseURL: "",
      musicList: [],
      myObj: {},
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    audioInd(index) {
      this.myObj = this.musicList[index];
      //控制被选中的音乐滚动在中间
      const gundong = document.querySelector(".listCon");
      gundong.scrollTo({ top: index * 40, behavior: "smooth" });
    },
  },
  // 方法集合
  methods: {
    // 点击左侧音乐
    async cutMusic(id, index) {
      this.audioInd = index;
      // 记录访问量
      await webVisit("music", id);
    },
    //子组件传过来的上一首下一首方法
    sonCutMu(val) {
      if (val === "left") {
        if (this.audioInd === 0) this.audioInd = this.musicList.length - 1;
        else this.audioInd--;
      } else {
        if (this.audioInd === this.musicList.length - 1) this.audioInd = 0;
        else this.audioInd++;
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    let res = await musicList({ pageNum: 1, pageSize: 999 });
    this.musicList = res.data.records;
    this.myObj = this.musicList[0];
    // 进页面为第一个视频添加访问量
    if (res.data.records[0]) await webVisit("music", res.data.records[0].id);
    // this.videoSrc=this.musicList[0].filePath
    // console.log(998, res);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.conNull {
  font-size: 30px;
  align-items: center;
  justify-content: center;
  color: #b9412e;
}
/deep/::-webkit-scrollbar-thumb {
  background-color: #d8b581 !important;
  outline: 1px solid #d8b581 !important;
  outline-offset: 0;
}

.tab4-3 {
  padding: 30px 200px;
  display: flex;
  width: 100%;
  height: 595px;
  .left {
    margin-left: 30px;
    border-radius: 8px;
    padding: 10px 0;
    text-align: center;
    color: #333333;
    width: 300px;
    height: 100%;
    .title {
      font-weight: 700;
      text-align: left;
      padding-left: 72px;
      font-size: 22px;
      margin-bottom: 10px;
    }
    .listCon {
      padding-right: 30px;
      height: 485px;
      overflow-y: auto;
    }
    p {
      .triangle {
        margin-right: 10px;
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-left: 15px solid transparent;
        border-bottom: 8px solid transparent;
      }
      .triangleShow {
        border-top: 8px solid transparent;
        border-left: 15px solid #b9412e;
        border-bottom: 8px solid transparent;
      }
      text-align: left;
      padding: 0 20px 0 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      font-size: 20px;
      height: 40px;
      line-height: 40px;
      margin: 10px 0;
      & > img {
        margin-top: -5px;
      }
      &:hover {
        color: #b9412e;
      }
      &:first-child {
        margin-top: 0px;
      }
    }
    .active {
      color: #b9412e;
    }
  }
  .right {
    flex: 1;
    display: flex;
    .right_img {
      width: 270px;
      background: url('../../assets/img/musicC.png') no-repeat center center;
    }
    .right_top {
      overflow-y: auto;
      padding: 15px 50px;
      padding-top: 0;
      flex: 1;
      & > div {
        margin: 10px 0;
        text-align: center;
        color: #333333;
      }
      .txt {
        font-size: 22px;
        /deep/p {
          margin: 10px 0;
          font-size: 18px;
        }
      }
      .title {
        margin-top: 0;
        font-size: 24px;
        font-weight: 700;
      }
    }
    .right_bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70px;
      background-color: rgba(0,0,0,.6);
    }
  }
}
</style>