园区介绍

digital-park-web/digital-park/package.json

@@ -25,6 +25,7 @@
         "vue-meta-info": "^0.1.7",
         "vue-router": "^3.1.6",
         "vue-seamless-scroll": "^1.1.21",
+        "vue-video-player": "^5.0.2",
         "vuedraggable": "^2.24.0",
         "vuex": "^3.1.3",
         "vuex-persist": "^3.1.3"

digital-park-web/digital-park/src/utils/common.js

@@ -14,10 +14,19 @@ export const routerOpenInNewWindow = routerPath => {
  * @returns
  */
 export const formatImg = path => {
-    return path ? `${process.env.VUE_APP_PARK_DOMAIN}/common/getImg?path=${path}` : "";
+    return path ? `${process.env.VUE_APP_PARK_DOMAIN}common/getImg?path=${path}` : "";
     // return path ? `http://192.168.18.236:18888/common/getImg?path=${path}` : "";
 };
 
+/**
+ *
+ * @param {*} path 图片路径
+ * @returns
+ */
+export const formatVideo = path => {
+    return path ? `${process.env.VUE_APP_PARK_DOMAIN}common/getVideo?path=${path}` : "";
+};
+
 /**
  *
  * @param {*} status  1成功 0错误 可迭代
@@ -33,34 +42,34 @@ export const sendMsg = (status, msg) => {
 
 /**
  * markdown格式文本转成HTML文本
- * @param {*} markdownText 
- * @returns 
+ * @param {*} markdownText
+ * @returns
  */
 
-export const parseMarkdown = (markdownText) => {
+export const parseMarkdown = markdownText => {
     let imgUrl = `http://192.168.18.236:18888/common/getImg?path=`;
     // let imgUrl = `${process.env.VUE_APP_PARK_DOMAIN}/common/getImg?path=`;
     const htmlText = markdownText
-        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
-        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
-        .replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
-        .replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')
-        .replace(/\*(.*)\*/gim, '<i>$1</i>')
+        .replace(/^### (.*$)/gim, "<h3>$1</h3>")
+        .replace(/^## (.*$)/gim, "<h2>$1</h2>")
+        .replace(/^# (.*$)/gim, "<h1>$1</h1>")
+        .replace(/^\> (.*$)/gim, "<blockquote>$1</blockquote>")
+        .replace(/\*\*(.*)\*\*/gim, "<b>$1</b>")
+        .replace(/\*(.*)\*/gim, "<i>$1</i>")
         .replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='" + imgUrl + "$2' width='100%'/>")
         .replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2'>$1</a>")
-        .replace(/\n$/gim, '<br />')
+        .replace(/\n$/gim, "<br />")
         .replace(/[\r\n]/g, "<br />")
-        .replace(/\/filex\/img/g, '')
-    return htmlText.trim()
-}
+        .replace(/\/filex\/img/g, "");
+    return htmlText.trim();
+};
 
 export const formatDateFun = (time, fmtstring) => {
-    time = new Date(time)
-        // 使用momentjs这个日期格式化类库实现日期的格式化功能
-    if (time == '' || !time) {
-        return '——'
+    time = new Date(time);
+    // 使用momentjs这个日期格式化类库实现日期的格式化功能
+    if (time == "" || !time) {
+        return "——";
     } else {
         return dayjs(time).format(fmtstring);
     }
-}
+};

digital-park-web/digital-park/src/views/index/Service.vue

@@ -65,14 +65,7 @@
                                 <span>
                                     价格：
                                     <span class="price">
-                                        {{
-                                            activeTab === 0
-                                                ? item.showPrice
-                                                : item.housingInformationList &&
-                                                  item.housingInformationList.length > 0
-                                                ? item.housingInformationList[0].showPrice
-                                                : "0"
-                                        }}
+                                        {{ item.showPrice || "0" }}
                                     </span>
                                 </span>
                                 <span class="more"><i class="el-icon-right"></i></span>

digital-park-web/digital-park/src/views/index/park-introduce/Introduce.vue

@@ -5,11 +5,26 @@
             <span class="chinese">园区介绍</span>
             <span class="english">park introduce</span>
         </div>
-        <img
-            :class="[dataList.length < 5 ? 'park_img_100' : 'park_img_50']"
-            :src="formatImg(JSON.parse(parkInfo.photo)[0])"
-            alt="园区图片"
-        />
+        <div :class="[dataList.length < 5 ? 'park_img_100' : 'park_img_50']">
+            <el-carousel
+                trigger="click"
+                :autoplay="false"
+                :height="dataList.length < 5 ? '494px' : '238px'"
+            >
+                <el-carousel-item>
+                    <img :src="formatImg(JSON.parse(parkInfo.photo)[0])" alt="园区图片" />
+                </el-carousel-item>
+                <el-carousel-item v-if="this.parkInfo.video">
+                    <video-player
+                        class="video-player vjs-custom-skin"
+                        ref="videoPlayer"
+                        :playsinline="true"
+                        :options="playerOptions"
+                    ></video-player>
+                </el-carousel-item>
+            </el-carousel>
+        </div>
+
         <div class="content">
             {{ parkInfo.introduce }}
         </div>
@@ -19,11 +34,13 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
-import { formatImg } from "@/utils/common.js";
-
+import { formatImg, formatVideo } from "@/utils/common.js";
+import { videoPlayer } from "vue-video-player";
+import "video.js/dist/video-js.css";
+import "vue-video-player/src/custom-theme.css";
 export default {
     //import引入的组件需要注入到对象中才能使用
-    components: {},
+    components: { videoPlayer },
     props: {
         //每个标题内容
         dataList: {
@@ -40,12 +57,43 @@ export default {
         return {};
     },
     //监听属性 类似于data概念
-    computed: {},
+    computed: {
+        playerOptions() {
+            const playerOptionsObj = {
+                playbackRates: [0.7, 1.0, 1.5, 2.0], //视频播放速度
+                autoplay: true, // 如果true，浏览器准备好时开始回放。
+                muted: false, // 默认情况下将会消除任何音频。
+                loop: false, // 导致视频一结束就重新开始。
+                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）。
+                language: "zh-CN",
+                // aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）。
+                fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                sources: [
+                    {
+                        type: "video/" + JSON.parse(this.parkInfo.video)[0].split(".")[1], // 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。
+                        src: this.formatVideo(JSON.parse(this.parkInfo.video)[0]), // 视频url地址
+                    },
+                ],
+                poster: "", // 视频封面地址
+                // width: document.documentElement.clientWidth,
+                height: this.dataList.length < 5 ? 494 : 238, // 设置高度，fluid需要设置成false
+                notSupportedMessage: "此视频暂无法播放...", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                controlBar: {
+                    timeDivider: true, // 当前时间和持续时间的分隔符
+                    durationDisplay: true, // 显示持续时间
+                    remainingTimeDisplay: false, // 是否显示剩余时间功能
+                    fullscreenToggle: true, // 是否显示全屏按钮
+                },
+            };
+            return playerOptionsObj;
+        },
+    },
     //监控data中的数据变化
     watch: {},
     //方法集合
     methods: {
         formatImg,
+        formatVideo,
     },
     //生命周期 - 创建完成（可以访问当前this实例）
     created() {},
@@ -87,6 +135,19 @@ export default {
     margin: 0 auto;
     background-color: #d8d8d8;
 }
+::v-deep .el-carousel__item {
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+.video-player {
+    height: 100%;
+    .video-js {
+        height: 100%;
+    }
+}
+
 .content {
     width: 100%;
     @include font(16px, #334a5f);