业务组件视频、图片分离

front/src/views/detailsAll/components/Business/BusinessPresentation.vue

@@ -8,12 +8,28 @@
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
-    <div
+    <div class="box">
-      class="main"
+      <div class="left" @click="chagneShow()"></div>
-      :style="`${img}background-position:center;background-size:cover;`"
+      <div
-    >
+        class="main"
-      <!-- <a-image :src="img"></a-image> -->
+        :style="`${img}background-position:center;background-size:cover;`"
-      <div class="play" @click="showModal"></div>
+        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"
@@ -60,6 +76,13 @@
       '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
   }
@@ -70,42 +93,63 @@
   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('视频==============>', obj)
+    console.log('视频==============>', showArr.value)
-    if (!obj) {
+    if (showArr.value.length == 0) {
       flag.value = false
     } else {
-      let imgindex = props.dataList.infoList.filter(
+      if (obj) {
-        (item) => item.attrType === '组件图片'
+        options.src = obj.attrValue
-      )[0]
-      options.src = obj.attrValue
-      if (imgindex) {
-        img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
       }
     }
+    // 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('视频==============>', obj)
+        console.log('视频==============>', showArr.value)
-        if (!obj) {
+        if (showArr.value.length == 0) {
           flag.value = false
         } else {
-          let imgindex = props.dataList.infoList.filter(
+          if (obj) {
-            (item) => item.attrType === '组件图片'
+            options.src = obj.attrValue
-          )[0]
-          options.src = obj.attrValue
-          if (imgindex) {
-            img.value =
-              'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
           }
         }
+        // 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;'
+        //   }
+        // }
       }
     }
   )
@@ -114,6 +158,7 @@
   .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;
@@ -130,5 +175,47 @@
         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>