tyyx_mobile/src/pages/jckc/zy_detail.vue

<template>
  <div class="zyDetailContent">
    <div class="top flex justify-between items-center w-full p-1">
      <van-icon name="arrow-left" color="#fff" size="16" @click="onClickLeft" />
    </div>
    <div class="look px-2" v-if="suffix!='doc' && suffix!='docx'">当前观看人数：{{detailInfo.kf_view_num}}</div>
    <div class="look px-2" v-else @click="download">
      <van-icon name="down" /> 点击下载
    </div>

    <div v-if="suffix=='mp4'" class="videoDiv">
      <div class="aliPlayerShow" id="J_prismPlayer"></div>
    </div>
    <audio v-else-if="suffix=='mp3'" ref="urlResouce" controls :src="commonUrl">
      <source :src="commonUrl" type="audio/mp3">
    </audio>
    <div v-else-if="suffix=='pdf'" style="height: calc(100% - 60px);">
      <iframe :src="commonUrl" frameborder="0" width="100%" height="100%"></iframe>
    </div>
    <div v-else-if="suffix=='doc' || suffix=='docx'" style="height: 100px;line-height: 140px;text-align: center;font-size: 12px;color: #ccc;">
      当前文件暂不支持预览
    </div>
    <div v-else style="height: calc(100% - 60px);">
      <iframe :src="(detailInfo.file_preview || commonUrl)" frameborder="0" width="100%" height="100%"></iframe>
    </div>

    <div class="flex justify-between items-center px-3 mt-2">
      <div style="font-size: 15px;">{{detailInfo.kf_name}}</div>
      <div class="flex space-x-4 tip">
        <div @click="handleFinger">
          <van-icon :name="detailInfo.is_like==0 ? 'good-job-o' : 'good-job'" />
          <span>{{detailInfo.kf_like_num}}</span>
        </div>
        <div @click="handleLoveIcon">
          <van-icon :name="detailInfo.is_fav==0 ? 'like-o' : 'like'" />
          <span>{{detailInfo.kf_fav_num}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getFullUrl } from '@/utils/helper';
import { files_detail, likeApi_add, likeApi_del, collectApi_add, collectApi_del } from "./api.js";
import { useRouter } from 'vue-router';
const router = useRouter();
const parentId = ref(router.currentRoute.value.params.id);
const parentKkId = ref("");
const detailInfo = ref({});
const suffix = ref("mp4");
const detailLoad = ref(false);
const commonUrl = ref("");
const sourceUrl = ref("");

const player = ref("");
const onClickLeft = () => history.back();

initDetailData();
function initDetailData() {
  detailLoad.value = true;
  files_detail({ kf_id: parentId.value }).then((res) => {
    if (res.code == 1) {
      detailInfo.value = res.data.one_info;
      parentKkId.value = detailInfo.value.kk_id;
      commonUrl.value = getFullUrl(res.data.one_info.kf_path);
      suffix.value = res.data.one_info.kf_path.substr(res.data.one_info.kf_path.lastIndexOf(".") + 1);
      // detailLoad.value = false;

      // console.log(detailInfo.value)

      // let tempD = res.data.one_info.kf_path;
      // this.typeKind = tempD.substr(tempD.lastIndexOf(".") + 1);
      // this.$refs.urlResouce.src = res.data.one_info.kf_path;

      //示例设置清晰度为超清和高清的地址("OD": "<原画URL>","FD": "<流畅URL>","LD":"<标清URL>","SD": "<高清URL>","HD": "<超清URL>","2K": "<2K URL>","4K": "<4K URL>")
      // source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'

      sourceUrl.value = { "OD": detailInfo.value.kf_path_od, "FD": detailInfo.value.kf_path_fd, "LD": detailInfo.value.kf_path_ld };
      let stringSourceUrl = JSON.stringify(sourceUrl.value)
      // 初始换aliplayer
      player.value = new Aliplayer({
        id: 'J_prismPlayer',
        source: stringSourceUrl,
        language: "zh-cn",
        width: '100%', //容器的大小
        height: '100%', //容器的大小
        isLive: false,//是不是直播
        preload: true,//播放器自动加载
        autoplay: true,//是否自动播放
        qualitySort: 'asc',//从小到大排序
      }, function (player) {
        console.log('播发器创建完成~')
      });
      if (localStorage.getItem('cur_time_' + parentKkId.value)) {
        player.value.seek(localStorage.getItem('cur_time_' + parentKkId.value));
      }
      var timer = setInterval(() => {
        var curTime = parseInt(player.value.getCurrentTime());
        if (player.value && player.value.getStatus() == "playing") {
          localStorage.setItem('cur_time_' + parentKkId.value, curTime);
        }
      }, 30000);

      // this.fingerNum = res.data.one_info.kf_like_num; //点赞数
      // this.fingerSwitch = res.data.one_info.is_like; //0：关 1：开
      // this.loveNum = res.data.one_info.kf_fav_num; //关注
      // this.loveSwitch = res.data.one_info.is_fav; //0：关 1：开
    }
  });
}

const download = () => {
  window.open(commonUrl.value);
}

const handleFinger = () => {
  if (detailInfo.value.is_like == 1) {//0：关 1：开
    //去掉赞
    let transObj = {
      kf_id: parentId.value,
    };
    likeApi_del(transObj)
      .then((res) => {
        if (res.code == "1") {
          detailInfo.value.kf_like_num--;
          detailInfo.value.is_like = 0;
          showSuccessToast(res.msg);
        } else {
          showFailToast(res.msg);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  } else {
    let transObj = {
      kczy_files_like: {
        kf_id: parentId.value,
        kt_id: parentKkId.value,
      },
    };
    likeApi_add(transObj)
      .then((res) => {
        if (res.code == "1") {
          detailInfo.value.kf_like_num++;
          detailInfo.value.is_like = 1;
          showSuccessToast(res.msg);
        } else {
          showFailToast(res.msg);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }
}

const handleLoveIcon = () => {
  if (detailInfo.value.is_fav == 1) {
    //去掉收藏
    let transObj = {
      kf_id: parentId.value,
    };
    collectApi_del(transObj)
      .then((res) => {
        if (res.code == "1") {
          detailInfo.value.kf_fav_num--;
          detailInfo.value.is_fav = 0;
          showSuccessToast(res.msg);
        } else {
          showFailToast(res.msg);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  } else {
    let transObj = {
      kczy_files_fav: {
        kf_id: parentId.value,
        kt_id: parentKkId.value,
      },
    };
    collectApi_add(transObj)
      .then((res) => {
        if (res.code == "1") {
          detailInfo.value.kf_fav_num++;
          detailInfo.value.is_fav = 1;
          showSuccessToast(res.msg);
        } else {
          showFailToast(res.msg);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }
}
</script>

<style lang="scss" scoped>
.zyDetailContent {
  height: 100vh;
  background: #fcfeff;
  .top {
    position: absolute;
    z-index: 10;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 12px;
  }
  .look {
    background: rgba($color: #050026, $alpha: 0.5);
    border-radius: 5px;
    line-height: 22px;
    position: absolute;
    z-index: 10;
    top: 24px;
    right: 10px;
    color: #fff;
    font-size: 12px;
  }
  .videoDiv {
    height: 220px;
  }
  video {
    width: 100%;
  }
  .tip {
    color: #00a3ff;
    font-size: 12px;
    white-space: nowrap;
  }
}
</style>