修复预览适配

.env.development

@@ -5,8 +5,8 @@ VUE_APP_TITLE = 扫码连网
 ENV = 'development'
 
 # 扫码连网/开发环境
-VUE_APP_BASE_API = 'https://192.168.0.105:9038'
+# VUE_APP_BASE_API = 'https://192.168.0.105:9038'
-# VUE_APP_BASE_API = 'https://www.jichuanglanhai.com:9038'
+VUE_APP_BASE_API = 'https://www.jichuanglanhai.com:9038'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/components/VideoView/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-dialog
+    title="预览广告"
+    :visible.sync="show"
+    width="500px"
+    append-to-body
+    destroy-on-close
+  >
+    <video :src="videoPath" class="avatar" controls="controls"></video>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      baseUrl: process.env.VUE_APP_BASE_API,
+      show: false,
+      videoPath: "",
+    };
+  },
+  methods: {
+    openDialog(url) {
+      this.videoPath = this.baseUrl + url;
+      this.show = true;
+    },
+  },
+};
+</script>
+
+<style></style>

src/main.js

@@ -46,6 +46,8 @@ import VueMeta from "vue-meta";
 import DictData from "@/components/DictData";
 //上传视频
 import VideoUpload from "@/components/VideoUpload";
+//阅览广告
+import VideoView from "@/components/VideoView";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
@@ -67,6 +69,7 @@ Vue.component("FileUpload", FileUpload);
 Vue.component("ImageUpload", ImageUpload);
 Vue.component("ImagePreview", ImagePreview);
 Vue.component("VideoUpload", VideoUpload);
+Vue.component("VideoView", VideoView);
 
 Vue.use(directive);
 Vue.use(plugins);

src/views/netEwm/posterHistory/index.vue

@@ -105,7 +105,7 @@
       <el-table-column label="商户名称" align="center" prop="posName" />
       <el-table-column label="广告名称" align="center" prop="posterName">
         <template slot-scope="scope">
-          <el-link type="primary" :href="baseUrl + scope.row.videoPath">{{
+          <el-link type="primary" @click="openVideoView(scope.row.videoPath)">{{
             scope.row.posterName
           }}</el-link>
         </template>
@@ -197,6 +197,7 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <VideoView ref="VideoView" />
   </div>
 </template>
 
@@ -214,7 +215,6 @@ export default {
   name: "PosterHistory",
   data() {
     return {
-      baseUrl: process.env.VUE_APP_BASE_API,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -270,6 +270,11 @@ export default {
     this.getList();
   },
   methods: {
+    openVideoView(url) {
+      if (url) {
+        this.$refs.VideoView.openDialog(url);
+      }
+    },
     /** 查询广告历史列表 */
     getList() {
       this.loading = true;

src/views/netEwm/shanghu/components/MyTable.vue

@@ -40,9 +40,11 @@
       <el-table v-loading="loading" :data="posterList" :height="tableHeigth">
         <el-table-column label="广告名称" align="center" prop="posterName">
           <template slot-scope="scope">
-            <el-link type="primary" :href="baseUrl + scope.row.videoPath">{{
+            <el-link
-              scope.row.posterName
+              type="primary"
-            }}</el-link>
+              @click="openVideoView(scope.row.videoPath)"
+              >{{ scope.row.posterName }}</el-link
+            >
           </template>
         </el-table-column>
         <el-table-column label="有效起始时间" align="center" prop="startTime">
@@ -81,6 +83,7 @@
         />
       </div>
     </div>
+    <VideoView ref="VideoView" />
   </el-dialog>
 </template>
 
@@ -89,7 +92,6 @@ import { listPoster, batchAllocation } from "@/api/netEwm/poster";
 export default {
   data() {
     return {
-      baseUrl: process.env.VUE_APP_BASE_API,
       loading: false,
       posterList: [],
       total: 0,
@@ -108,6 +110,11 @@ export default {
     };
   },
   methods: {
+    openVideoView(url) {
+      if (url) {
+        this.$refs.VideoView.openDialog(url);
+      }
+    },
     openDialog(data, posterId) {
       this.shanghuPosterId = posterId;
       this.fpData = data;