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

222 lines
6.0 KiB
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>