Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/518-JSSWLT

定制化热点/src/views/Home.vue

@@ -5,27 +5,30 @@
     <!-- 主体带滚动条的盒子 -->
     <div class="main">
       <!-- 图片 -->
-      <div class="imgBox" :class="{ imgBoxOne: !myTxt }">
+      <div class="imgBox" v-if="oneTxt" :class="{ imgBoxOne: !myTxt }">
         <Swiper class="warpper" ref="mySwiper" :options="swiperOptions">
-          <SwiperSlide v-for="item in myImgArr" :key="item">
-            <!-- 线上数据 -->
-            <!-- <img :src="item" alt="" @click="lookImg(item)" /> -->
-
-            <!-- 本地化部署 -->
+          <SwiperSlide v-for="item in myDataArr" :key="item.url">
             <img
-              :src="item.replace('https://super.4dage.com', '')"
+              :src="urlToFitFu(item.url)"
               alt=""
-              @click="lookImg(item.replace('https://super.4dage.com', ''))"
+              @click="lookImg(urlToFitFu(item.url))"
+              v-if="item.type === 'img'"
             />
+            <video :src="urlToFitFu(item.url)" v-else controls autoplay />
           </SwiperSlide>
         </Swiper>
         <!-- 索引 -->
-        <div class="myIndBox" v-if="myImgArr.length">
-          {{ myInd + 1 }} / <span>{{ myImgArr.length }}</span>
+        <div class="myIndBox" v-if="myDataArr.length > 1">
+          {{ myInd + 1 }} / <span>{{ myDataArr.length }}</span>
         </div>
       </div>
       <!-- 介绍 -->
-      <div class="txtBox" v-if="myTxt" v-html="myTxt || '暂无内容'"></div>
+      <div
+        class="txtBox"
+        :class="{ txtBoxOne: !oneTxt }"
+        v-if="myTxt"
+        v-html="myTxt || '暂无内容'"
+      ></div>
     </div>
     <!-- 查看图片 -->
     <viewer class="viewerCla" ref="viewer" :images="lookPics">
@@ -46,7 +49,7 @@ export default {
       // 标题
       myTitle: "",
       // 图片数组
-      myImgArr: [],
+      myDataArr: [],
       // 简介
       myTxt: "",
       // 图片索引
@@ -66,11 +69,26 @@ export default {
       },
       // 查看图片
       lookPics: [],
+      // 单独只有文字
+      oneTxt: true,
     };
   },
   computed: {},
   watch: {},
   methods: {
+    urlToFitFu(url) {
+      // 线上
+      // return url;
+
+      // 本地化
+      const resUrl = url;
+      if (url.includes("https://super.4dage.com")) {
+        return url.replace("https://super.4dage.com", "");
+      } else if (url.includes("http://super.4dage.com")) {
+        return url.replace("http://super.4dage.com", "");
+      } else return resUrl;
+    },
+
     // 点击查看大图
     lookImg(url) {
       let dom = this.$refs.viewer.$viewer;
@@ -82,17 +100,41 @@ export default {
 
       //线上数据
       // let url = `https://super.4dage.com/data/${
-
       let url = `/data/${
         // 本地化部署
         this.id
       }/hot/js/data.js?time=${Math.random()}`;
       let result = (await this.$http.get(url)).data;
       const resData = result[this.m];
+
+      console.log("------", resData);
+
       if (!resData) return alert("热点解析错误");
       this.myTitle = resData.title;
-      this.myImgArr = resData.images || [];
+
+      let temp1 = [];
+      let temp2 = [];
+      if (resData.images) {
+        // 如果有图片
+        temp1 = resData.images.map((v) => ({
+          type: "img",
+          url: v,
+        }));
+      }
+      if (resData.video && resData.video.length > 0) {
+        // 如果有视频
+        temp2 = resData.video.map((v) => ({
+          type: "video",
+          url: v.url,
+        }));
+      }
+
+      this.myDataArr = [...temp2, ...temp1];
       this.myTxt = resData.content;
+
+      // 单独文字的情况
+      if ([...temp2, ...temp1].length <= 0 && resData.content)
+        this.oneTxt = false;
     },
   },
   created() {},
@@ -140,6 +182,10 @@ export default {
             height: 100%;
             object-fit: contain;
           }
+          video {
+            width: 100%;
+            height: 100%;
+          }
         }
       }
       .myIndBox {
@@ -184,6 +230,15 @@ export default {
         transform: translateX(-50%);
       }
     }
+    .txtBoxOne {
+      display: flex;
+      align-items: center;
+      color: #fff;
+      background-color: transparent;
+      &::before {
+        opacity: 0;
+      }
+    }
   }
 }
 @media screen and (min-width: 1200px) {
@@ -217,7 +272,6 @@ export default {
       }
     }
 
-    // 本地化
     .title {
       height: 70px;
       line-height: 70px;