新闻中心已完成

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/newsDetail.vue
+++ b/project/xiushan/apps/AppNewsCenter/components/newsDetail.vue
@@ -0,0 +1,143 @@
+<template>
+  <ai-detail class="news-detail">
+    <template slot="title">
+      <ai-title title="新闻文章详情" isShowBack isShowBottomBorder @onBackClick="$emit('goBack')"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-card titlePosition="center">
+        <template #title>
+          <h2>{{ detail.title }}</h2>
+          <p class="subTitle">类型：{{ dict.getLabel('newsCenterPolicyType', +detail.policyType) }}</p>
+        </template>
+        <template slot="right">
+          <el-button type="text" size="small" icon="iconfont iconEdit" @click="handleEdit">修改</el-button>
+        </template>
+        <template #content>
+          <ai-article :value="detail.content"></ai-article>
+        </template>
+      </ai-card>
+      <ai-card title="封面信息">
+        <template #content>
+          <div class="content">
+            <div class="img">
+              <span>封面：</span>
+              <img v-if="detail.coverFile" :src="detail.coverFile.url" alt="" v-viewer>
+            </div>
+          </div>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import Viewer from 'v-viewer';
+import Vue from 'vue';
+
+Vue.use(Viewer);
+export default {
+  name: "newsDetail",
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      detail: {},
+    }
+  },
+  methods: {
+    /**
+     * 修改
+     * */
+    handleEdit() {
+      this.$emit("goPage", {key: "addArticle", row: this.detail});
+    },
+    /**
+     * 根据id查询详情
+     */
+    getDetail() {
+      let {id} = this.$route.query
+      id && 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>
+.news-detail {
+  height: 100%;
+  overflow: auto;
+
+  ::v-deep .ai-detail__content {
+    background: #F3F6F9 !important;
+  }
+
+  .content {
+    height: 100%;
+    width: 100%;
+    position: relative;
+
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 1px solid #eee;
+      margin-bottom: 24px;
+
+      p {
+        font-size: 16px;
+        color: #333333;
+        line-height: 21px;
+        box-sizing: border-box;
+        padding-bottom: 24px;
+        text-align: center;
+      }
+
+      .iconfont {
+        font-size: 14px;
+        color: #5088FF;
+        line-height: 16px;
+        text-align: right;
+        position: absolute;
+        right: 16px;
+        top: 16px;
+      }
+    }
+
+    .title {
+      font-size: 16px;
+      color: #333333;
+      line-height: 21px;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 24px;
+      margin-bottom: 17px;
+    }
+
+    .img {
+      display: flex;
+
+      span {
+        font-size: 14px;
+        color: #999999;
+        line-height: 19px;
+      }
+
+      img {
+        width: 319px;
+        height: 179px;
+        border-radius: 1px;
+      }
+    }
+  }
+}
+</style>