From 979458071dfd663ab627ea49c511f1f838e08d7c Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Mon, 25 Jul 2022 11:24:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E7=BB=84=E4=BB=B6=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Developer/DeveloperPresentation.vue       | 132 +++++++++++++++---
 1 file changed, 110 insertions(+), 22 deletions(-)

diff --git a/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue b/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue
index d1fa2b43..822cd6f5 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperPresentation.vue
@@ -8,11 +8,28 @@
 <template>
   <div class="application-presentation" v-if="flag">
     <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
-    <div
-      class="main"
-      :style="`${img}background-position:center;background-size:cover;`"
-    >
-      <div class="play" @click="showModal"></div>
+    <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"
@@ -59,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
   }
@@ -69,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)
-    if (!obj) {
+    console.log('视频==============>', showArr.value)
+    if (showArr.value.length == 0) {
       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;'
+      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('视频==============>', obj)
-        if (!obj) {
+        console.log('视频==============>', showArr.value)
+        if (showArr.value.length == 0) {
           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;'
+          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;'
+        //   }
+        // }
       }
     }
   )
@@ -113,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;
@@ -129,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>