新闻中心已完成

2022-02-25 17:27:11 +08:00
parent 05d923b924
commit cb60468d0e
8 changed files with 973 additions and 5 deletions
--- a/project/xiushan/apps/AppNewsCenter/components/videoDetail.vue
+++ b/project/xiushan/apps/AppNewsCenter/components/videoDetail.vue
@@ -0,0 +1,90 @@
+<template>
+  <ai-detail class="video-detail">
+    <template slot="title">
+      <ai-title title="视频新闻详情" isShowBack isShowBottomBorder @onBackClick="$emit('goBack')"/>
+    </template>
+    <template slot="content">
+      <ai-card title="视频信息">
+        <template slot="right">
+          <el-button type="text" icon="iconfont iconEdit" @click="handleEdit">修改</el-button>
+        </template>
+        <template #content>
+          <ai-wrapper
+              :columnsNumber="1">
+            <ai-info-item label="标题：" :value="detail.title"></ai-info-item>
+            <ai-info-item label="类型："
+                          :value="dict.getLabel('newsCenterPolicyType', + detail.policyType)"></ai-info-item>
+            <ai-info-item label="视频：" isLine>
+              <video :src="detail.videoFile && detail.videoFile.url"
+                     style="width: 100%; height:100%; object-fit: fill;" muted controls="controls"></video>
+            </ai-info-item>
+            <ai-info-item label="封面：" isLine v-viewer>
+              <img :src="detail.videoFile && detail.coverFile.url" alt="">
+            </ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import Viewer from 'v-viewer';
+
+export default {
+  name: "videoDetail",
+  components: {Viewer},
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      detail: {}
+    }
+  },
+  methods: {
+    handleEdit() {
+      this.$emit("goPage", {key: "addVideo", row: this.detail});
+    },
+    /**
+     * 根据id查询详情
+     */
+    getDetail() {
+      let {id} = this.$route.query
+      this.instance.post(`/app/appnews/getById`, null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data;
+        }
+      })
+    }
+  },
+  created() {
+    this.getDetail();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.video-detail {
+  height: 100%;
+  overflow: hidden;
+
+  video {
+    width: 640px;
+    height: 360px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 2px;
+    border: 1px solid #D0D4DC;
+  }
+
+  img {
+    width: 319px;
+    height: 179px;
+    border-radius: 1px;
+  }
+}
+
+</style>