horzi_rai_wxa/components/ItemComponent/roadshowItem.vue

<template>
  <view class="container-roadshow-item">
    <view class="title">
      <text class="text_twoLine">{{ list.Title }}</text>
    </view>
    <view class="cover-item" :style="{ 'background-image': 'url(' + list.BackgroundImg + ')' }">
      <block v-if="list.Type == 2 || list.Type == 3">
        <image class="img-bg" @click="handelPlay(list)" 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(list)"
          :src="
            curVoiceId === list.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">{{ list.PublishTime }}</text>
      <view :class="['identification', list.Type != 1 && 'identification-video']"> </view>
      <image
        class="identification-img"
        :src="
          list.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="share share-collected">
        <image @click="myLeavingMessageHandler(list)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
        <image
          @click="isCollectionHandeler(list)"
          :src="
            list.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="list">
          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
        </button>
      </view>
    </view>
    <view v-if="showAudioBox">
      <audioModule :showAudioPop.sync="showAudioPop" />
    </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 { color_word_bg, MultimediaIcon } from "@/utils/styleClassify";
import audioModule from "@/components/audioModule/index";
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: {
    audioModule,
    videoModule,
    modalDialog,
  },
  computed: {
    curVoiceId() {
      //当前正在播放的音频id
      return this.$store.state.audioBg.indexId;
    },
    curAudioPaused() {
      //当前音频是否暂停状态
      return this.$store.state.audioBg.paused;
    },
    showAudioBox() {
      return this.$store.state.audioBg.parseIntShow;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //播放的权限判断
    async handelPlay(item) {
      await this.$store.dispatch("showLoginModal");
      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 (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;
        }
      }
    },
    //视频的播放事件
    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 });
      }
      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;
    },
    // 微路演留言
    async myLeavingMessageHandler(item) {
      await this.$store.dispatch("showLoginModal");
      uni.navigateTo({
        url:
          "/activityPages/generationAsk/generationAsk?id=" +
          (item.Type == 3 ? item.Id : item.ActivityId) +
          "&type=文章&roadshow=" +
          item.Type +
          "&roadshowTitle=" +
          item.Title,
      });
    },

    // 微路演收藏
    async isCollectionHandeler(item) {
      this.$emit("isCollectionHandeler", item);
    },
  },
};
</script>
<style scoped lang="scss">
.container-roadshow-item {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
  padding: 20rpx 14rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  .cover-item {
    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 #3385ff;
      border-left: 90rpx solid transparent;
    }

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

    .identification-video {
      border-top: 90rpx solid #ffab31 !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;
    }
  }

  .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: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #dcdfe6;
    .share {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .share-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50rpx;
        height: 50rpx;
      }

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

      .share-text {
        position: flex;
        align-items: center;
        padding: 0 10rpx;

        image {
          width: 20rpx;
          height: 20rpx;
          margin-right: 5rpx;
        }
      }
    }

    .share-collected {
      justify-content: space-around;
    }
  }
}
</style>