horzi_rai_wxa/pages-search/components/roadshow.vue

<template>
  <view :class="['roadshow-search', tabsRoadshowSearch == 5 && 'roadshow-search-top']">
    <view class="audio-video-content">
      <view class="audio-item" v-for="item in roadshowPageList" :key="item.Id">
        <view class="cover-item" :style="{ 'background-image': 'url(' + item.BackgroundImg + ')' }">
          <!-- type:3 -- 产业视频 -->
          <block v-if="item.Type == 2 || item.Type == 3">
            <image class="img-bg" @click="handelPlay(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
          </block>
          <block v-else>
            <image
              class="img-bg"
              @click.stop="handelPlay(item)"
              :src="
                curVoiceId === item.ActivityId && !curAudioPaused
                  ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
                  : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
              "
            ></image>
          </block>
          <text class="time">{{ item.PublishTime }}</text>
          <view :class="['identification', item.Type != 1 && 'identification-video']"> </view>
          <image
            class="identification-img"
            :src="item.Type == 1 ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/video-iocn.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/audio-icon.png'"
          ></image>
        </view>
        <view class="title-share">
          <view class="title text_twoLine">{{ item.Title }}</view>
          <view class="share share-collected">
            <image @click="myLeavingMessageHandler(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
            <image
              @click="isCollectionHandeler(item)"
              :src="
                item.IsCollect ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/not_collected.png'
              "
            ></image>
            <button class="share-icon" open-type="share" :data-item="item">
              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { Search, activity, Report, Home } from "@/config/api";
import { color_word_bg, MultimediaIcon } from "@/utils/styleClassify";
export default {
  props: {
    roadshowPageList: {
      type: Array,
      default: [],
      required: true,
    },
    tabsRoadshowSearch: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {};
  },

  methods: {
    //播放的权限判断
    handelPlay(item) {
      let content_item = null;
      if (item.AudioActivityId) {
        content_item = {
          ActivityId: item.AudioActivityId,
          PlaySeconds: item.AudioPlaySeconds,
          ResourceUrl: item.AudioResourceUrl,
          Title: item.AudioTitle,
          Type: item.AudioType,
        };
      }
      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
        if (item.AuthInfo.HasPermission == 1) {
          item.Type == 1 || item.AudioType == 1 ? 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;
          }
        }
      } else {
        this.$store.dispatch("checkHandle");
      }
    },
    //视频的播放事件
    handelVideoPlay(item) {
      if (this.$store.state.videoPlay.playVideoId != item.Id) {
        this.$store.commit("videoPlay/palyTimeUpdate", 0);
        console.log(this.$store.state.videoPlay.palyCurrentTime);
        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 });
      }
      this.showAudioPop = true;
    },
    //音视频的背景色 文字颜色
    classifyColor(item) {
      let text_color = color_word_bg.color_word.find((key) => key.name == item).color;
      let back_ground = color_word_bg.color_bg.find((key) => key.name == item).color;
      let _isColor = { color: text_color, "background-color": back_ground };
      return _isColor;
    },
    //音视频的图标
    classifyIcon(item) {
      let srcItem = MultimediaIcon.find((key) => key.name == (item.AudioChartPermissionName || item.ChartPermissionName));
      let imgSrc = item.Type == 1 || item.AudioType == 1 ? srcItem.audio : srcItem.video;
      return imgSrc;
    },
    // 微路演留言
    myLeavingMessageHandler(item) {
      uni.navigateTo({
        url: "/activityPages/generationAsk/generationAsk?id=" + (item.Type == 3 ? item.Id : item.ActivityId) + "&type=文章&roadshow=" + item.Type + "&roadshowTitle=" + item.Title,
      });
    },

    // 微路演收藏
    async isCollectionHandeler(item) {
      const res = await Home.microRoadshowCollect({
        Id: item.Id,
        SourceType: item.Type,
      });
      if (res.Ret === 200) {
        let index = this.roadshowPageList.findIndex((key) => key.Id == item.Id);

        res.Data.Status == 1 ? (this.$parent.roadshowPageList[index].IsCollect = true) : (this.$parent.roadshowPageList[index].IsCollect = false);
        uni.showToast({
          title: res.Msg,
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.roadshow-search {
  padding: 35rpx;
  .audio-video-content {
    width: calc(100% + 40rpx);
    height: calc(100% + 25rpx);
    margin: -20rpx 0 0 -20rpx;
    padding: 0 !important;
    .audio-item {
      width: 100%;
      height: auto;
      box-shadow: none;
    }
  }
  @import "@/components/audioVideo.scss";
}
.roadshow-search-top {
  padding-top: 90rpx !important;
}
</style>