horzi_rai_wxa/components/ItemComponent/roadshowItem.vue

<template>
  <view class="global_card_content container-roadshow-item">
    <view class="content-item-flex content-item-top">
      <view class="global_content_center">{{ list.LabelType == 1 ? "路演回放" : list.LabelType == 2 ? "调研反馈" : list.LabelType == 3 ? "产业视频" : "问答系列" }}</view>
      <view :class="['global_content_center', list.Type == 2 || list.Type == 3 ? 'is-video-sing' : 'is-audio-sing']">
        <image v-if="list.Type == 2 || list.Type == 3" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/video_icon.png"></image>
        <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/audio_icon.png"></image>
        {{ totalSeconds(list) }}
      </view>
    </view>
    <view class="global_title container-roadshow-title" @click="goDetails">
      <mp-html :content="richTextClamp(4) + list.Title + '</div>'" />
    </view>
    <view class="content-item-flex iten-buttom">
      <view class="global_content_center" @click.stop="handelPlay(list)">
        <image
          v-if="(ist.Type == 1 || list.Type == 4) && curVoiceId === list.Id && !curAudioPaused"
          class="play-img"
          src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/suspend_play_list.png"
        ></image>
        <image v-else class="play-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/play-circle-filled.png"></image>
        {{ (list.Type == 1 || list.Type == 4) && curVoiceId === list.Id && !curAudioPaused ? "暂停" : "播放" }}
      </view>
      <view v-if="list.Type == 1 || list.Type == 4" class="global_content_center" @click="joinPlaylist(list)">
        <image class="play-list" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/paly_list.png"></image>
        添加
      </view>
    </view>
    <view class="title-share">
      <view class="share share-collected">
        <image @click="myLeavingMessageHandler(list)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/leaving_message.png"></image>
        <image
          @click="isCollectionHandeler(list)"
          :src="list.IsCollect ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/not_collected.png'"
        ></image>
        <button class="share-icon" open-type="share" :data-item="list">
          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/share-btn-icon.png"></image>
        </button>
      </view>
    </view>
    <view class="item-itme">
      <view class="global_content_center chart-permission-name"> {{ list.ChartPermissionName }}</view>
      <view class="time"> {{ list.PublishTime }}</view>
    </view>
    <videoModule :showVideoPop.sync="showVideoPop" :curVideoId="curVideoId" :videoPopList="videoPopList" />
    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
  </view>
</template>

<script>
import { Search, activity, Report, Home } from "@/config/api";
import { MultimediaIcon } from "@/utils/styleClassify";
import videoModule from "@/components/videoModule/index";
import modalDialog from "@/components/modalDialog.vue";
export default {
  name: "",
  props: {
    list: {
      type: Object,
      default: {},
      required: true,
    },
  },
  data() {
    return {
      curVideoId: 0, //音频Id
      showVideoPop: false,
      showAudioPop: false, //播放音频
      videoPopList: {},
      isShowhasPermission: false, //  联系销售的提交申请
      applyForIsShow: false, // 提交申请
      jurisdictionList: {},
      hasPermission: "", //权限
    };
  },
  components: {
    videoModule,
    modalDialog,
  },
  computed: {
    curVoiceId() {
      //当前正在播放的音频id
      return this.$store.state.audioBg.indexId;
    },
    curAudioPaused() {
      //当前音频是否暂停状态
      return this.$store.state.audioBg.paused;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //播放的权限判断
    async handelPlay(item) {
      await this.$store.dispatch("showLoginModal");
      let content_item = null;
      if (item.SourceId) {
        content_item = {
          ActivityId: item.SourceId,
          PlaySeconds: item.PlaySeconds,
          ResourceUrl: item.ResourceUrl,
          Title: item.Title,
          Type: item.Type,
        };
      }
      if (item.AuthInfo.HasPermission == 1) {
        item.Type == 1 || item.AudioType == 1 || item.Type == 4 ? this.audioPlayBack(content_item ? content_item : item) : this.handelVideoPlay(item);
      } else {
        this.hasPermission = item.AuthInfo.HasPermission;
        this.jurisdictionList.ActivityId = item.Id;
        this.jurisdictionList.isAudioVideo = item.Type;
        if (this.hasPermission == 2) {
          this.jurisdictionList.SellerMobile = item.AuthInfo.SellerMobile;
          this.jurisdictionList.SellerName = item.AuthInfo.SellerName;
          this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
          this.isShowhasPermission = true;
        } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
          this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
          this.applyForIsShow = true;
        }
      }
    },
    //视频的播放事件
    handelVideoPlay(item) {
      if (this.$store.state.videoPlay.playVideoId != item.Id) {
        this.$store.commit("videoPlay/palyTimeUpdate", 0);
        this.$store.commit("videoPlay/playVideo", item.Id);
      }
      this.globalBgAudioManager.stop();
      this.videoPopList = item;
      this.showVideoPop = true;
    },
    //音频的播放事件
    async audioPlayBack(item) {
      this.curVideoId = 0;
      this.$store.commit("audioBg/parseIntAudio", true);
      // 判断是否为同一个音频
      if (this.$store.state.audioBg.indexId == item.ActivityId) {
        if (this.globalBgAudioManager.paused) {
          this.globalBgAudioManager.play();
        } else {
          this.globalBgAudioManager.pause();
        }
      } else {
        let VoiceList = {
          Url: item.ResourceUrl,
          Name: item.Title,
          PlaySeconds: +item.PlaySeconds,
        };
        this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.ActivityId, activityTitle: item.Title, recordList: item });
      }
      this.$parent.showAudioPop = true;
    },
    //音视频的图标
    classifyIcon(item) {
      let srcItem = MultimediaIcon.find((key) => key.name == (item.AudioChartPermissionName || item.ChartPermissionName));
      let imgSrc = item.Type == 1 || item.AudioType == 1 || item.Type == 4 ? srcItem.audio : srcItem.video;
      return imgSrc;
    },
    // 微路演留言
    async myLeavingMessageHandler(item) {
      await this.$store.dispatch("showLoginModal");
      uni.navigateTo({
        url: "/activityPages/generationAsk/generationAsk?id=" + item.SourceId + "&type=文章&roadshow=" + item.Type + "&roadshowTitle=" + item.Title,
      });
    },

    // 微路演收藏
    async isCollectionHandeler(item) {
      this.$emit("isCollectionHandeler", item);
    },
    // 跳转
    goDetails() {
      if (this.list.Type == 4) return;
      if (this.list.Type == 3) {
        // 跳转产业资源包
        uni.navigateTo({ url: "/reportPages/IndustryReport/IndustryReport?id=" + this.list.IndustryId });
      } else {
        uni.navigateTo({ url: "/activityPages/activityDetail/activityDetail?id=" + this.list.ActivityId });
      }
    },
    richTextClamp(val) {
      return `<div style="${
        val == 7 ? "min-height: 50px;" : ""
      }line-clamp: ${val};-webkit-line-clamp: ${val};text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;">`;
    },
    // 加入播放列表
    joinPlaylist(item) {
      let dataList = {
        Url: item.ResourceUrl,
        Name: item.Title,
        PlaySeconds: +item.PlaySeconds,
        indexId: item.SourceId || item.ActivityId,
        activityTitle: item.Title,
        recordList: item,
      };
      const playlist = this.$store.state.audioJoinPlaylist.playlist.some((key) => key.indexId === dataList.indexId);
      if (!playlist) {
        this.$store.commit("audioJoinPlaylist/addPlaylist", { dataList });
        uni.showToast({
          title: "已加入播放列表",
          icon: "success",
          duration: 2000,
        });
      }
    },
    // 播放时长的转换
    totalSeconds(item) {
      let minutes = Math.floor(item.PlaySeconds / 60);
      let seconds = item.PlaySeconds % 60;
      let time = minutes.toString().padStart(2, "0") + ":" + seconds.toString().padStart(2, "0");
      return time;
    },
  },
};
</script>
<style scoped lang="scss">
.container-roadshow-item {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding-top: 25rpx;
  margin-bottom: 20rpx;
  .cover-item {
    margin-top: 10rpx;
    width: calc(100% + 28rpx);
    height: 250rpx;
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 24rpx;
    color: #fff;
    margin-left: -14rpx;
    .identification {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-top: 90rpx solid $uni-color-new;
      border-left: 90rpx solid transparent;
    }

    .identification-img {
      position: absolute;
      top: 15rpx;
      right: 10rpx;
      width: 30rpx;
      height: 30rpx;
    }

    .identification-video {
      border-top: 90rpx solid #fa9550 !important;
    }

    .img-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80rpx;
      height: 80rpx;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }

    .time {
      position: absolute;
      bottom: 8rpx;
      left: 15rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 46rpx;
    }
  }
  .container-roadshow-title {
    height: 180rpx;
  }
  .title {
    height: 88rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid #dcdfe6;
    margin-bottom: 20rpx;
    word-wrap: break-word;
    word-break: break-all;
  }
  .title-share {
    margin-top: 5rpx;
    padding-top: 20rpx;
    image {
      width: 48rpx;
      height: 48rpx;
    }
    .share {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .share-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50rpx;
        height: 50rpx;
        background-color: rgba(0, 0, 0, 0);
      }
    }

    .share-collected {
      justify-content: space-around;
    }
  }
  .content-item-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .content-item-top {
    margin-bottom: 15rpx;
    view:nth-child(1) {
      width: 124rpx;
      height: 42rpx;
      font-size: 24rpx;
      font-weight: 500;
      border-radius: 38rpx;
      color: $uni-color-new;
      background-color: #e5efff;
    }
    view:nth-child(2) {
      width: 132rpx;
      height: 42rpx;
      border-radius: 38rpx;
      font-size: 24rpx;
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
    .is-video-sing {
      color: #e37318;
      background-color: #fff1e9;
    }
    .is-audio-sing {
      color: $uni-color-new;
      background-color: #e5efff;
    }
  }
  .iten-buttom {
    margin-top: 10rpx;
    view {
      height: 48rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      font-weight: 600;
    }
    view:nth-child(1) {
      flex: 1;
      background-color: $uni-color-new;
      color: #fff;
    }
    view:nth-child(2) {
      width: 146rpx;
      border-radius: 8rpx;
      background-color: #e5efff;
      color: $uni-color-new;
      margin-left: 25rpx;
    }
    .play-img,
    .play-list {
      width: 30rpx;
      height: 30rpx;
      margin-right: 6rpx;
    }
  }
  .item-itme {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    font-size: 24rpx;

    .chart-permission-name {
      font-weight: 500;
      width: 72rpx;
      height: 42rpx;
      border-radius: 38rpx;
      color: $uni-color-new;
      background-color: #e5efff;
    }
    .time {
      color: #999999;
    }
  }
}
</style>