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="business-presentation" v-if="flag">
    <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
    <div class="main">
      <img :src="leftImg" />
      <div class="play" @click="showModal"></div>
      <img :src="rightImg" />
    </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 leftImg = require('@/assets/detailsAll/business/business_previous.png')
  const rightImg = require('@/assets/detailsAll/business/business_next.png')
  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 showModal = () => {
    visible.value = true
  }
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  const flag = ref(true)
  console.log('111111111111111111111,', props.dataList)
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '组件视频介绍'
    )[0]
    console.log('视频==============>', obj)
    if (!obj) {
      flag.value = false
    } else {
      options.src = obj.attrValue
    }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter(
          (item) => item.attrType === '组件视频介绍'
        )[0]
        console.log('视频==============>', obj)
        if (!obj) {
          flag.value = false
        } else {
          options.src = obj.attrValue
        }
      }
    }
  )
</script>
<style lang="less" scoped>
  .business-presentation {
    padding: 0.8rem 3rem 0.8rem;
    background: url('~@/assets/detailsAll/business/business_module_bg.png')
      no-repeat;
    background-size: 100% 100%;
    .main {
      height: 3.4rem;
      border-radius: 0.1rem;
      background: url('~@/assets/detailsAll/business/business_element_content.png')
        no-repeat center;
      background-size: 50% 100%;
      margin-top: 0.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .play {
        width: 0.96rem;
        height: 0.96rem;
        background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
        background-size: 100%;
        cursor: pointer;
      }
      img {
        position: absolute;
        top: 1.3rem;
        left: 0.4rem;
        cursor: pointer;
      }
      img:last-of-type {
        position: absolute;
        top: 1.3rem;
        left: unset;
        right: 0.4rem;
      }
    }
  }
</style>