hi-ucs/front/src/views/detailsAll/components/Business/BusinessPresentation.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 15:25:33
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-14 11:30:52
 * @Description: 应用展示  视频播放
-->
<template>
  <div class="application-presentation" v-if="flag">
    <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
    <div class="box">
      <div class="left" @click="chagneShow()"></div>
      <div
        class="main"
        :style="`${img}background-position:center;background-size:cover;`"
        v-if="
          showArr.length > 0 && showArr[showFlag].attrType == '组件视频介绍'
        "
      >
        <div class="play" @click="showModal"></div>
      </div>
      <div
        class="main2"
        v-if="showArr.length > 0 && showArr[showFlag].attrType == '组件图片'"
      >
        <a-image
          :width="700"
          :height="340"
          :src="showArr[showFlag].attrValue"
        />
      </div>
      <div class="right" @click="chagneShow()"></div>
    </div>
    <a-modal
      v-model:visible="visible"
      title="视频预览"
      :width="750"
      destroyOnClose
    >
      <template #footer></template>
      <div style="width: 100%; display: flex; justify-content: center">
        <div style="width: 100%; height: 100%">
          <vue3VideoPlay v-bind="options" />
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
  import { ref, reactive, defineProps, watch } from 'vue'
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  const visible = ref(false)
  const options = reactive({
    width: '7.00rem', //播放器宽度
    height: '4.00rem', //播放器高度
    color: '#409eff', //主题色
    title: '', //视频名称
    src: '', //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
      'audioTrack',
      'quality',
      'speedRate',
      'volume',
      'setting',
      'pip',
      'pageFullScreen',
      'fullScreen',
    ], //显示所有按钮,
  })
  const showFlag = ref(0)
  const showArr = ref([])
  const chagneShow = () => {
    if (showArr.value.length > 1) {
      showFlag.value = showFlag.value == 0 ? 1 : 0
    }
  }
  const showModal = () => {
    visible.value = true
  }
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  const flag = ref(true)
  const img = ref({})
  console.log('111111111111111111111,', props.dataList)
  if (props.dataList.infoList) {
    showArr.value = props.dataList.infoList.filter(
      (item) => item.attrType === '组件视频介绍' || item.attrType === '组件图片'
    )
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '组件视频介绍'
    )[0]
    console.log('视频==============>', showArr.value)
    if (showArr.value.length == 0) {
      flag.value = false
    } else {
      if (obj) {
        options.src = obj.attrValue
      }
    }
    // if (!obj) {
    //   flag.value = false
    // } else {
    //   let imgindex = props.dataList.infoList.filter(
    //     (item) => item.attrType === '组件图片'
    //   )[0]
    //   options.src = obj.attrValue
    //   if (imgindex) {
    //     img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
    //   }
    // }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        showArr.value = props.dataList.infoList.filter(
          (item) =>
            item.attrType === '组件视频介绍' || item.attrType === '组件图片'
        )
        let obj = val.infoList.filter(
          (item) => item.attrType === '组件视频介绍'
        )[0]
        console.log('视频==============>', showArr.value)
        if (showArr.value.length == 0) {
          flag.value = false
        } else {
          if (obj) {
            options.src = obj.attrValue
          }
        }
        // if (!obj) {
        //   flag.value = false
        // } else {
        //   let imgindex = props.dataList.infoList.filter(
        //     (item) => item.attrType === '组件图片'
        //   )[0]
        //   options.src = obj.attrValue
        //   if (imgindex) {
        //     img.value =
        //       'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
        //   }
        // }
      }
    }
  )
</script>
<style lang="less" scoped>
  .application-presentation {
    padding: 0.8rem 3rem 0;
    .main {
      width: 13.14rem;
      height: 3.4rem;
      border-radius: 0.1rem;
      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
      background-size: 100%;
      margin-top: 0.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .play {
        width: 0.96rem;
        height: 0.96rem;
        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
        background-size: 100%;
        cursor: pointer;
      }
    }
    .main2 {
      width: 13.14rem;
      height: 3.4rem;
      border-radius: 0.1rem;
      background-size: 100%;
      margin-top: 0.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0.8rem;
    .left {
      width: 0.37rem;
      height: 0.6rem;
      cursor: pointer;
      margin-right: 0.2rem;
      background: url('~@/assets/detailsAll/business/business_previous.png')
        no-repeat;
      background-size: 100%;
      background-position: center;
    }
    .right {
      width: 0.37rem;
      height: 0.6rem;
      cursor: pointer;
      margin-left: 0.2rem;
      background: url('~@/assets/detailsAll/business/business_next.png')
        no-repeat;
      background-size: 100%;
      background-position: center;
    }
  }

  :deep(.ant-image-img) {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
</style>