mteacher/src/views/creation/index-share.vue

<template>
  <div class="creation">
    <div class="playSection">
      <videoTcplayer v-if="playType === 'Video'" :src="musicDetail.videoUrl" :poster="musicDetail.videoImg || videoBg" />
      <div class="audioSection" v-if="playType === 'Audio'">
        <div class="audioContainer">
          <div class="waveActive" :style="{ width: audioWidth + '%' }"></div>
          <div class="waveDefault"></div>
        </div>

        <div class="audioBox">
          <div :class="['audioPan', paused ? 'imgRotate' : '']">
            <van-image class="audioImg" :src="musicDetail.img || musicBg" />
          </div>
          <i class="audioPoint"></i>
          <i :class="['audioZhen', paused && 'active']"></i>
        </div>
        <div class="controls" @click="onControls">
          <div class="actions">
            <div class="actionBtn" @click="onToggleAudio">
              <img v-if="paused" src="./img/icon-play.png" />
              <img v-else src="./img/icon-pause.png" />
            </div>
          </div>
          <div class="slider">
            <van-slider :step="0.01" class="timeProgress" v-model="currentTime" :max="duration" @input="handleChangeTime" @drag-start="dragStatus = true" @drag-end="dragStatus = false" />
          </div>
          <div class="time">
            <div>{{ getSecondRPM(currentTime) }}</div>
            <span>/</span>
            <div>{{ getSecondRPM(duration) }}</div>
          </div>
        </div>
      </div>
    </div>

    <van-cell class="userSection" center :border="false">
      <template #icon>
        <van-image class="userLogo" :src="musicDetail.avatar" />
      </template>
      <template #title>
        <div class="userInfo">
          <p class="name">
            <span>{{ musicDetail.username }}</span>
            <img v-if="musicDetail.vipFlag" src="./img/icon-member.png" class="iconMember" />
          </p>
          <p class="sub">
            {{ musicDetail.subjectName }}
            {{ getGradeCh(musicDetail.currentGradeNum - 1) }}
          </p>
        </div>
      </template>
      <template #default>
        <div :class="['zan', musicDetail.starFlag && 'zanActive']" @click="onStarChange">
          <img src="./img/icon-zan-active.png" v-if="musicDetail.starFlag" class="iconZan" />
          <img src="./img/icon-zan.png" v-else class="iconZan" />

          {{ musicDetail.likeNum }}
        </div>
      </template>
    </van-cell>

    <div class="musicSection">
      <div class="musicName">
        <span class="musicTag">曲目名称</span>
        {{ musicDetail.musicSheetName }}
      </div>
      <div class="musicDesc">{{ musicDetail.desc }}</div>
    </div>

    <div class="likeSection">
      <div class="likeTitle">推荐作品</div>

      <van-list v-if="listState.dataShow" class="container containerInformation" :finished="listState.finished" finished-text=" " :immediate-check="false" @load="getStarList()">
        <div class="cellGroup">
          <div v-for="(item, index) in list" :key="index" class="cell" @click="onDetail(item)">
            <div class="cellImg">
              <van-image class="cellImage" :src="item.img || musicBg" fit="cover" />

              <div class="iconZan">{{ item.likeNum }}</div>
            </div>
            <div class="cellTitle van-ellipsis">
              {{ item.musicSheetName }}
            </div>
            <div class="users">
              <van-image :src="item.avatar" class="userImg" />
              <span class="name">{{ item.username }}</span>
            </div>
          </div>
        </div>
      </van-list>

      <MEmpty v-else msg="暂无数据" />
    </div>

    <van-popup v-model="loginStatus" style="background: transparent;overflow: inherit ">
      <LoginModel @close="() => (this.loginStatus = false)" @confirm="onConfirm" />
    </van-popup>

    <van-popup v-model="messageStatus" class="wxPopupDialog">
      <div class="popupContainer">
        <p class="title1">温馨提示</p>
        <p class="popupTips">{{ message }}</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { getSecondRPM, browser, getGradeCh } from "@/common/common";
import videoTcplayer from "@/components/video-tcplayer";
import MEmpty from "@/components/MEmpty";
import { postMessage } from "@/helpers/native-message";
import { api_userMusicRemove, api_openUserMusicPage, api_userMusicStar, api_openUserMusicDetail } from "./api";
import LoginModel from "./login-model";
const audioDom = new Audio();
audioDom.controls = true;
audioDom.style.width = "100%";
audioDom.className = "audio";
export default {
  components: { videoTcplayer, MEmpty, LoginModel },
  data() {
    return {
      videoBg: require("./img/video-bg.png"),
      musicBg: require("./img/music_bg.png"),
      id: this.$route.query.id,
      loginTag: false, // 是否登录标识
      loginStatus: false,
      playType: "", // 播放类型
      musicDetail: {},
      timer: null,
      paused: true,
      audioWidth: 0,
      currentTime: 0,
      duration: 0.1,
      loop: false,
      dragStatus: false, // 是否开始拖动
      isClick: false,
      list: [],
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false,
      },
      params: {
        page: 1,
        rows: 20,
      },
      messageStatus: false,
      message: "",
    };
  },
  async mounted() {
    document.title = "作品详情";
    try {
      const res = await api_openUserMusicDetail(this.id);

      this.musicDetail = res.data || {};

      this.getStarList();
      // 判断是视频还是音频
      if (res.data.videoUrl.lastIndexOf("mp4") !== -1) {
        this.playType = "Video";
      } else {
        this.playType = "Audio";
        // 初始化
        this.$nextTick(() => {
          this.initAudio();
        });
      }
    } catch (e) {
      //
      if (e.code === 999) {
        this.messageStatus = true;
        this.message = e.msg;
        // this.$dialog
        //   .alert({
        //     message: e.msg,
        //     theme: "round-button",
        //     confirmButtonColor: "#2DC7AA",
        //   })
        //   .then(() => {
        //     if (browser().isApp) {
        //       postMessage({
        //         api: "goBack",
        //       });
        //     } else {
        //       this.$router.back();
        //     }
        //   });
        // return;
      }
    }

    // window.onpagehide = function() {
    //   if (audioDom) {
    //     audioDom.pause();
    //     this.paused = audioDom.paused;
    //   }
    // };

    // 设置隐藏属性和改变可见属性的事件的名称
    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") {
      // Opera 12.10 and Firefox 18 and later support
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
      hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }

    // 如果页面是隐藏状态，则暂停视频
    // 如果页面是展示状态，则播放视频
    const that = this;
    function handleVisibilityChange() {
      if (document[hidden]) {
        if (audioDom) {
          audioDom.pause();
          that.paused = audioDom.paused;
        }
      }
    }

    // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
    } else {
      // 处理页面可见属性的改变
      document.addEventListener(visibilityChange, handleVisibilityChange, false);
    }
  },
  methods: {
    onDetail(item) {
      if (audioDom) {
        audioDom.currentTime = 0;
        audioDom.pause();
        this.paused = audioDom.paused;
      }
      this.$router.push({
        path: "/shareCreation",
        query: {
          id: item.id,
        },
      });
    },
    /** 改变播放时间 */
    handleChangeTime(val) {
      this.currentTime = val;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        // audioRef.value.currentTime = val;
        audioDom.currentTime = val;
        this.timer = null;
      }, 60);
    },

    // 切换音频播放
    onToggleAudio(e) {
      e.stopPropagation();
      if (audioDom.paused) {
        audioDom.play();
      } else {
        audioDom.pause();
      }

      this.paused = audioDom.paused;
    },
    async onStarChange() {
      try {
        await api_userMusicStar({
          userMusicId: this.id,
          star: !this.musicDetail.starFlag,
        });

        this.musicDetail.starFlag = !this.musicDetail.starFlag;
        if (this.musicDetail.starFlag) {
          this.musicDetail.likeNum += 1;
        } else {
          this.musicDetail.likeNum -= 1;
        }
      } catch (e) {
        //
        if (e.code === 403) {
          this.loginStatus = true;
        }
      }
    },

    // 获取列表
    async getStarList() {
      try {
        if (this.isClick) return;
        this.isClick = true;
        const res = await api_openUserMusicPage({
          type: "FORMAL",
          exclusionId: this.id,
          sort: 1,
          ...this.params,
        });
        this.listState.loading = false;
        const result = res.data || {};
        // 处理重复请求数据
        if (this.list.length > 0 && result.current === 1) {
          return;
        }
        this.list = this.list.concat(result.rows || []);
        this.listState.finished = result.current >= result.pages;
        this.params.page = result.current + 1;
        this.listState.dataShow = this.list.length > 0;
        this.isClick = false;
      } catch {
        this.listState.dataShow = false;
        this.listState.finished = true;
        this.isClick = false;
      }
    },

    initAudio() {
      audioDom.src = this.musicDetail.videoUrl;
      audioDom.load();
      audioDom.oncanplaythrough = () => {
        this.paused = audioDom.paused;
        this.duration = audioDom.duration;
      };
      // 播放时监听
      audioDom.addEventListener("timeupdate", () => {
        this.duration = audioDom.duration;
        this.currentTime = audioDom.currentTime;
        const rate = (this.currentTime / this.duration) * 100;
        this.audioWidth = rate > 100 ? 100 : rate;
      });
      audioDom.addEventListener("ended", () => {
        this.paused = audioDom.paused;
      });
    },
    async onConfirm(val) {
      this.loginTag = val;
      this.loginStatus = false;
      const { data } = await api_openUserMusicDetail(this.id);
      this.musicDetail = data;
    },
    // 删除作品
    async onDelete() {
      try {
        await api_userMusicRemove({ id: this.id });

        setTimeout(() => {
          this.deleteStatus = false;
          this.$toast("删除成功");
        }, 100);

        setTimeout(() => {
          if (browser().isApp) {
            postMessage({
              api: "goBack",
            });
          } else {
            this.$router.back();
          }
        }, 1200);
      } catch {
        //
      }
    },
    // 下载
    async onDownload() {
      postMessage({
        api: "saveFile",
        content: {
          url: this.musicDetail.videoUrl,
        },
      });
    },
    onDayjs(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm");
    },
    getGradeCh,
    getSecondRPM,
    onControls(e) {
      e.stopPropagation();
    },
  },
  destory() {
    if (audioDom) {
      audioDom.pause();
      this.paused = audioDom.paused;
    }
  },
  watch: {
    $router(to) {
      this.id = to.query.id;
      this.playType = "";
      this.params.page = 1;
      if (audioDom) {
        audioDom.currentTime = 0;
        audioDom.pause();
        this.paused = audioDom.paused;
      }
      this.list = [];
      this.__init();
    },
  },
};
</script>

<style scoped lang="less">
.creation {
  min-height: 100vh;
  background-color: #f8f8f8;
}

/deep/ .vjs-poster {
  background-size: cover;
}

/deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: inherit !important;
}

/deep/ .video-js .vjs-slider:focus {
  box-shadow: none !important;
  text-shadow: none !important;
}
.playSection {
  min-height: 1.75rem;

  /deep/ .vjs-poster {
    background-size: cover;
  }

  /deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: inherit !important;
  }

  /deep/ .video-js .vjs-slider:focus {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

@keyframes rotateImg {
  100% {
    transform: rotate(360deg);
  }
}

.audioSection {
  position: relative;
  background: url("./img/audio-banner-bg.png") no-repeat top center;
  background-size: cover;
  height: 1.75rem;

  .audioContainer {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.96rem;
    height: 0.35rem;
    transform: translate(-50%, 0.6rem);

    .waveActive,
    .waveDefault {
      width: 100%;
      height: 100%;
    }

    .waveDefault {
      position: absolute;
      top: 0;
      left: 0;
      background: url("./img/wave-1.png") no-repeat center left;
      background-size: cover;
    }

    .waveActive {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: url("./img/wave-2.png") no-repeat center left;
      background-size: cover;
    }
  }

  .audioBox {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 2;
    width: 0.74rem;
    height: 0.75rem;
    background: url("./img/audio-bg.png") no-repeat center;
    background-size: contain;

    .audioPan {
      position: absolute;
      left: 0.08rem;
      top: 0.06rem;
      z-index: 8;
      width: 0.59rem;
      height: 0.6rem;
      background: url("./img/audio-pan.png") no-repeat center;
      background-size: contain;
      display: flex;
      align-items: center;
      justify-content: center;

      animation: rotateImg 6s linear infinite;

      &.imgRotate {
        animation-play-state: paused;
      }
    }

    .audioImg {
      width: 0.32rem;
      height: 0.32rem;
      border-radius: 50%;
      overflow: hidden;
    }

    .audioPoint {
      position: absolute;
      z-index: 9;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 0.08rem;
      height: 0.08rem;
      background: url("./img/audio-point.png") no-repeat center;
      background-size: contain;
    }

    .audioZhen {
      position: absolute;
      z-index: 9;
      right: -0.04rem;
      top: -0.33rem;
      width: 0.26rem;
      height: 0.87rem;
      background: url("./img/audio-zhen.png") no-repeat center;
      background-size: contain;
      transition: transform 0.5s ease-in-out;

      &.active {
        transform: rotate(92deg) translate3d(0, 0, 3px);
        transition: transform 0.5s ease-in-out;
      }
    }
  }
}

.controls {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 0.44rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-direction: row;
  transition: all 0.5s;
  padding: 0 0.12rem;

  & > div {
    display: flex;
    align-items: center;
  }

  &.hide {
    transform: translateY(100%);
  }

  .actionBtn {
    line-height: 0;
    margin-right: 0.04rem;

    img {
      width: 0.14rem;
      height: 0.14rem;
      margin-bottom: -0.02rem;
    }
  }

  .time {
    display: flex;
    justify-content: space-between;
    flex: 1;
    min-width: 0.86rem;
    font-size: 0.12rem;
    color: #131415;
    line-height: 0.2rem;

    span {
      font-size: 0.12rem;
      padding: 0 0.01rem;
    }
  }

  .slider {
    width: 100%;
    margin: 0 0.12rem;
    // --van-slider-bar-height: 4px;
    // --van-slider-button-width: 0.13rem !important;
    // --van-slider-button-height: 0.13rem !important;
    // --van-slider-inactive-background: #fff;
    // --van-slider-inactive-background-color: #fff;
    // --van-slider-active-background: #2DC7AA !important;

    /deep/ .van-slider {
      height: 0.04rem;
    }

    /deep/ .van-slider__button {
      width: 0.13rem;
      height: 0.13rem;
    }

    /deep/ .van-loading {
      width: 100%;
      height: 100%;
    }
  }
}

.userSection {
  padding: 0.15rem 0.12rem !important;
  background-color: transparent !important;

  .userLogo {
    width: 0.44rem;
    height: 0.44rem;
    border: 0.01rem solid #ffffff;
    margin-right: 0.1rem;
    border-radius: 50%;
    overflow: hidden;
  }

  .userInfo {
    .name {
      display: flex;
      align-items: center;
      font-size: 0.16rem;
      font-weight: 500;
      color: #333333;
      line-height: 0.22rem;

      span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 1rem;
      }
    }

    .sub {
      padding-top: 0.01rem;
      font-size: 0.12rem;
      color: #777777;
      line-height: 0.17rem;
    }

    .iconMember {
      margin-left: 0.06rem;
      width: 0.14rem;
      height: 0.14rem;
    }
  }

  .zan {
    background: #ffffff;
    border-radius: 0.13rem;
    font-size: 0.14rem;
    color: #777777;
    line-height: 0.2rem;
    padding: 0.04rem 0.09rem 0.03rem;
    display: inline-flex;
    align-items: center;

    &.zanActive {
      background: #f7eeee;
      color: #ff6a6a;
    }

    .iconZan {
      width: 0.18rem;
      height: 0.18rem;
      margin-right: 0.01rem;
    }
  }
}

.musicSection {
  margin: 0 0.13rem 0.12rem;
  padding: 0.14rem 0.12rem;
  background: #ffffff;
  border-radius: 0.1rem;

  .musicName {
    font-size: 0.15rem;
    font-weight: 500;
    color: #333333;
    line-height: 0.21rem;
    // display: flex;
    // align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;

    .musicTag {
      margin-right: 0.06rem;
      padding: 0.01rem 0.06rem;
      font-size: 0.12rem;
      color: #ff7b31;
      line-height: 0.17rem;
      background: rgba(255, 166, 115, 0.07);
      border-radius: 0.09rem;
      border: 0.01rem solid #ffbf9a;
      font-weight: 400;
      vertical-align: text-bottom;
      display: inline-block;
    }
  }

  .musicDesc {
    padding-top: 0.08rem;
    font-size: 0.14rem;
    color: #777777;
    line-height: 0.2rem;
  }
}

.likeSection {
  margin: 0 0.13rem 0.12rem;
  background: #ffffff;
  border-radius: 0.1rem;
  padding: 0.1rem 0.12rem;

  .likeTitle {
    display: flex;
    align-items: center;
    font-size: 0.17rem;
    font-weight: 600;
    color: #333333;
    line-height: 0.24rem;
    padding-bottom: 0.08rem;

    &::before {
      display: inline-block;
      content: "";
      width: 0.04rem;
      height: 0.14rem;
      border-radius: 0.01rem;
      background: linear-gradient(to bottom, #59e5d5, #2dc7aa);
      margin-right: 0.06rem;
    }
  }
}

.likeItem {
  padding: 0.16rem 0;

  .userLogo {
    border-radius: 50%;
    overflow: hidden;
    width: 0.42rem;
    height: 0.42rem;
    margin-right: 0.07rem;
  }

  .userInfo {
    .name {
      font-size: 0.16rem;
      font-weight: 500;
      color: #333333;
      line-height: 0.22rem;
    }

    .sub {
      padding-top: 0.01rem;
      font-size: 0.13rem;
      color: #777777;
      line-height: 0.18rem;
    }
  }

  .time {
    font-size: 0.13rem;
    color: #777777;
    line-height: 0.18rem;
  }
}

.bottomSection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 0.15rem 0.12rem calc(0.15rem + env(safe-area-inset-bottom));

  .bottomShare {
    display: flex;
    align-items: center;

    p {
      padding: 0 0.15rem;
      text-align: center;
      line-height: 0;

      &:first-child {
        padding-left: 0.05rem;
      }
    }

    img {
      width: 0.18rem;
      height: 0.18rem;
    }

    span {
      padding-top: 0.08rem;
      font-size: 0.12rem;
      color: #333333;
      line-height: 0.17rem;
      display: block;
    }
  }

  .btnEdit {
    font-size: 0.14rem;
    font-weight: 500;
    background: #2dc7aa;
    color: #ffffff;
    line-height: 0.22rem;
    min-width: 0.8rem;
    height: 0.3rem;
    border: none;
  }
}

.popupContainer {
  width: 80%;

  .popupContent {
    padding: 0.29rem 0 0.25rem;
    text-align: center;
    font-size: 0.18rem;
    font-weight: 500;
    color: #333333;
    line-height: 0.25rem;
  }

  .popupBtnGroup {
    text-align: center;
    margin-bottom: 0.22rem;

    .van-button {
      height: 0.4rem;
      font-size: 0.16rem;
      font-weight: 400 !important;
      line-height: 0.22rem;
      min-width: 1.22rem;

      &:last-child {
        margin-left: 0.1rem;
        background: #2dc7aa;
        border: none;
      }
    }
  }
}

.cellGroup {
  display: flex;
  flex-wrap: wrap;
}

.cell {
  // display: flex;
  // flex-direction: column;
  width: 0.96rem;
  margin-right: 0.18rem;
  margin-bottom: 0.18rem;

  &:nth-child(3n + 3) {
    margin-right: 0;
  }

  .cellImg {
    position: relative;
    width: 0.88rem;
    height: 0.88rem;

    &::before {
      content: "";
      position: absolute;
      right: -0.06rem;
      top: 0.03rem;
      z-index: 8;
      width: 0.84rem;
      height: 0.84rem;
      background: url("./img/audio-pan.png") no-repeat center;
      background-size: contain;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .iconZan {
      position: absolute;
      bottom: 0.04rem;
      left: 0.04rem;
      z-index: 10;
      padding: 0.03rem;
      background: rgba(67, 67, 67, 0.3);
      border-radius: 0.08rem;
      backdrop-filter: blur(0.04rem);

      font-size: 0.09rem;
      font-weight: 500;
      color: #ffffff;
      line-height: 0.13rem;
      display: flex;
      align-items: center;

      &::before {
        content: "";
        display: inline-block;
        width: 0.12rem;
        height: 0.12rem;
        background: url("./img/icon-z.png") no-repeat center;
        background-size: contain;
      }
    }
  }

  .cellImage {
    position: relative;
    width: 0.88rem;
    height: 0.88rem;
    border-radius: 0.12rem;
    overflow: hidden;
    z-index: 9;

    img {
      border-radius: 0.12rem;
    }
  }

  .cellTitle {
    font-size: 0.13rem;
    color: #131415;
    line-height: 0.18rem;
    margin: 0.08rem 0 0.06rem;
  }

  .users {
    display: flex;
    align-items: center;

    .userImg {
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 0.04rem;
      flex-shrink: 0;
    }

    .name {
      font-size: 0.12rem;
      color: #402424;
      line-height: 0.14rem;
    }
  }
}

.sticky-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.wxPopupDialog {
  // position: relative;
  overflow: initial;
  width: 88%;
  background: transparent;

  // margin-top: -160px;
  &::before {
    position: absolute;
    content: " ";
    top: -0.2rem;
    left: 50%;
    margin-left: -0.51rem;
    display: inline-block;
    background: url("./img/wx-no-top.png") no-repeat top center;
    background-size: contain;
    width: 1.02rem;
    height: 0.84rem;
  }
}

.popupContainer {
  background: url("./img/wx-no-bg.png") no-repeat top center #fff;
  background-size: cover;
  border-radius: 0.2rem;
  overflow: hidden;
  padding-bottom: 0.16rem;
  text-align: center;
  width: 100%;

  .title1 {
    padding-top: 0.57rem;
    text-align: center;
    font-size: 0.18rem;
    font-weight: 500;
    color: #3b2300;
  }

  .popupTips {
    padding-top: 0.16rem;
    padding-bottom: 0.16rem;
    text-align: center;
    font-size: 0.15rem;
    color: #777777;
    line-height: 0.21rem;
  }

  .button {
    padding: 0 0.32rem;
    height: 0.3rem;
    font-size: 0.16rem;
    font-size: 0.14rem;
    color: #777;
    border-color: #e7e7e7;
  }
}
</style>