From cb60468d0eb71c074acfeda71c9a8ace2cfae024 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Fri, 25 Feb 2022 17:27:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E9=97=BB=E4=B8=AD=E5=BF=83=E5=B7=B2?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/xiushan/apps.import.json              |   5 -
 .../apps/AppNewsCenter/AppNewsCenter.vue      |  98 +++++++
 .../AppNewsCenter/components/addArticle.vue   | 154 ++++++++++
 .../AppNewsCenter/components/addVideo.vue     | 262 ++++++++++++++++++
 .../apps/AppNewsCenter/components/index.js    |   5 +
 .../AppNewsCenter/components/newsDetail.vue   | 143 ++++++++++
 .../AppNewsCenter/components/newsList.vue     | 221 +++++++++++++++
 .../AppNewsCenter/components/videoDetail.vue  |  90 ++++++
 8 files changed, 973 insertions(+), 5 deletions(-)
 delete mode 100644 project/xiushan/apps.import.json
 create mode 100644 project/xiushan/apps/AppNewsCenter/AppNewsCenter.vue
 create mode 100644 project/xiushan/apps/AppNewsCenter/components/addArticle.vue
 create mode 100644 project/xiushan/apps/AppNewsCenter/components/addVideo.vue
 create mode 100644 project/xiushan/apps/AppNewsCenter/components/index.js
 create mode 100644 project/xiushan/apps/AppNewsCenter/components/newsDetail.vue
 create mode 100644 project/xiushan/apps/AppNewsCenter/components/newsList.vue
 create mode 100644 project/xiushan/apps/AppNewsCenter/components/videoDetail.vue

diff --git a/project/xiushan/apps.import.json b/project/xiushan/apps.import.json
deleted file mode 100644
index 7513e61f..00000000
--- a/project/xiushan/apps.import.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "AppContentInfo": "新闻发布",
-  "AppCarousel": "轮播图设置",
-  "AppAddressBook": "内部通讯录"
-}
diff --git a/project/xiushan/apps/AppNewsCenter/AppNewsCenter.vue b/project/xiushan/apps/AppNewsCenter/AppNewsCenter.vue
new file mode 100644
index 00000000..ab741a6a
--- /dev/null
+++ b/project/xiushan/apps/AppNewsCenter/AppNewsCenter.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="AppNewsCenter">
+    <component
+        :is="currentPage"
+        :detail="detail"
+        :instance="instance"
+        :dict="dict"
+        :permissions="permissions"
+        :areaId="areaId"
+        @goBack="goBack"
+        @goPage="goPage"
+    />
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import {addArticle, addVideo, newsDetail, newsList, videoDetail} from './components'
+
+export default {
+  name: 'AppNewsCenter',
+  label: '新闻中心',
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  components: {
+    newsList,
+    addVideo,
+    addArticle,
+    newsDetail,
+    videoDetail
+  },
+  data() {
+    return {
+      areaId: '',
+      currIndex: '0',
+      detail: {}
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    tabs() {
+      return [
+        {
+          label: '内容管理',
+          name: 'newsList',
+          comp: newsList,
+          addVideo: addVideo,
+          addArticle: addArticle,
+          newsDetail: newsDetail,
+          videoDetail: videoDetail
+        },
+      ]
+    },
+    showList() {
+      return !this.$route.hash
+    },
+    hideLevel() {
+      return this.user.info.areaList?.length - 1
+    },
+    currentPage() {
+      return this.$route.hash?.substring(1) || newsList
+    }
+  },
+  methods: {
+    changeAreaId() {
+      this.$nextTick(() => {
+        this.$refs[this.currIndex][0].getList()
+      })
+    },
+    goBack() {
+      this.$router.push({})
+    },
+    goPage(obj) {
+      let hash = "#" + obj.key
+      if (obj.row) {
+        let {id} = obj.row
+        this.$router.push({query: {id}, hash})
+      } else {
+        this.$router.push({hash})
+      }
+    }
+  },
+  created() {
+    this.areaId = this.user.info.areaId
+    this.dict.load("appNewsType", "appNewsStatus")
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppNewsCenter {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/project/xiushan/apps/AppNewsCenter/components/addArticle.vue b/project/xiushan/apps/AppNewsCenter/components/addArticle.vue
new file mode 100644
index 00000000..1f6d31a7
--- /dev/null
+++ b/project/xiushan/apps/AppNewsCenter/components/addArticle.vue
@@ -0,0 +1,154 @@
+<template>
+  <ai-detail class="add-article">
+    <template slot="title">
+      <ai-title :title="isEdit?'编辑文章':'发布文章'" :isShowBack="true" :isShowBottomBorder="true"
+                @onBackClick="$emit('goBack')"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="发布文章">
+        <template #content>
+          <el-form ref="ruleForm" :model="articInfo" :rules="rules" label-width="120px" label-position="right">
+            <el-form-item prop="title" label="标题：">
+              <el-input v-model="articInfo.title" size="small" placeholder="请输入…" maxlength="30"
+                        show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item prop="policyType" label="类型：">
+              <ai-select
+                  v-model="articInfo.policyType"
+                  placeholder="选择新闻类型"
+                  :selectList="dict.getDict('newsCenterPolicyType')">
+              </ai-select>
+            </el-form-item>
+<!--            <el-form-item label="发布地区：" prop="areaId">-->
+<!--              <ai-area-get v-model="articInfo.areaId" :instance="instance" :root="areaId"/>-->
+<!--            </el-form-item>-->
+            <el-form-item prop="content" label="正文：">
+              <ai-editor v-model="articInfo.content" :instance="instance"/>
+            </el-form-item>
+            <el-form-item prop="coverFile" label="封面：">
+              <ai-uploader :instance="instance" v-model="articInfo.coverFile" :limit="1" :isShowTip="true"
+                           @change="$refs['ruleForm'].clearValidate('coverFile')" :cropOps="cropOps" is-crop>
+                <template slot="tips">最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png<br/>格式图片比例：1.6：1</template>
+              </ai-uploader>
+            </el-form-item>
+          </el-form>
+        </template>
+      </ai-card>
+    </template>
+    <template slot="footer">
+      <el-button class="footer_btn" @click="$emit('goBack')">取消</el-button>
+      <el-button type="primary" class="footer_btn" @click="handleSubmit('1')" v-if="!isEdit">发布</el-button>
+      <el-button class="footer_btn" @click="handleSubmit('0')">保存</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+export default {
+  name: "addArticle",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    areaId: String,
+    detail: Object,
+  },
+  data() {
+    return {
+      articInfo: {
+        areaId: '',
+        title: "",
+        content: "",
+        policyType: '',
+        coverFile: [],
+      },
+      rules: {
+        title: {required: true, message: '请输入标题', trigger: 'blur'},
+        areaId: {required: true, message: '请选择 发布地区', trigger: 'blur'},
+        policyType: {required: true, message: '请选择类型', trigger: 'change'},
+        content: {required: true, message: '请填写内容', trigger: 'blur'},
+        coverFile: {required: true, message: '请上传封面', trigger: 'blur'},
+      },
+      cropOps: {
+        fixedNumber: [1.8, 1],
+        fixed: true
+      }
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!this.$route.query.id;
+    }
+  },
+  methods: {
+    /**
+     * 发布、保存新闻
+     * @param status
+     */
+    handleSubmit(status) {
+      this.$refs["ruleForm"].validate(valid => {
+        if (valid) {
+          this.addOrUpdate(status);
+        }
+      })
+    },
+
+    /**
+     * 新增、修改
+     * */
+    addOrUpdate(status) {
+      const msg = +status ? '发布成功' : this.isEdit ? '编辑成功' : '保存成功';
+      this.instance.post(`/app/appnewscenterinfo/addOrUpdate`, {
+        ...this.articInfo,
+        coverFile: {
+          id: this.articInfo.coverFile[0].id
+        },
+        type: 0,
+        id: this.$route.query.id,
+        status: status
+      }).then(res => {
+        if (res.code == 0) {
+          this.$message.success(msg);
+          this.$emit("goBack");
+        }
+      })
+    },
+
+    /**
+     * 根据id查询详情
+     */
+    getDetail() {
+      let {id} = this.$route.query
+      id && this.instance.post(`/app/appnewscenterinfo/queryDetailById`, null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.articInfo = res.data
+          this.articInfo.areaId = res.data.areaId
+          this.articInfo.title = res.data.title;
+          this.articInfo.content = res.data.content;
+          this.articInfo.policyType = res.data.policyType
+          this.articInfo.coverFile = [{...res.data.coverFile, url: res.data.coverFile.accessUrl}];
+        }
+      })
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      this.getDetail();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-article {
+  height: 100%;
+  overflow: auto;
+  background: #F3F6F9;
+
+  .footer_btn {
+    width: 106px;
+  }
+}
+</style>
diff --git a/project/xiushan/apps/AppNewsCenter/components/addVideo.vue b/project/xiushan/apps/AppNewsCenter/components/addVideo.vue
new file mode 100644
index 00000000..ac510274
--- /dev/null
+++ b/project/xiushan/apps/AppNewsCenter/components/addVideo.vue
@@ -0,0 +1,262 @@
+<template>
+  <ai-detail class="add-video">
+    <template slot="title">
+      <ai-title :title="isEdit?'编辑视频':'发布视频'" :isShowBack="true" :isShowBottomBorder="true"
+                @onBackClick="$emit('goBack')"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="发布视频">
+        <template #content>
+          <el-form ref="ruleForm" :model="newsInfo" :rules="rules" label-width="120px" label-position="right">
+            <el-form-item prop="title" label="标题：">
+              <el-input v-model="newsInfo.title" size="small" placeholder="请输入…" maxlength="30"
+                        show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item prop="policyType" label="类型：">
+              <ai-select
+                  v-model="newsInfo.policyType"
+                  placeholder="选择新闻类型"
+                  :selectList="$dict.getDict('newsCenterPolicyType')">
+              </ai-select>
+            </el-form-item>
+<!--            <el-form-item label="发布地区：" prop="areaId">-->
+            <!--              <ai-area-get v-model="newsInfo.areaId" :instance="instance" :root="areaId"/>-->
+            <!--            </el-form-item>-->
+            <el-form-item prop="videoFile" label="视频：">
+              <el-upload :show-file-list="false" ref="upload1"
+                         action :http-request="submitUpload" :accept="accept" :limit="1">
+                <div class="video" v-if="!newsInfo.videoFile.length">
+                  <div class="icon">
+                    <ai-icon type="svg" icon="iconVideo"/>
+                    <span>上传视频</span>
+                  </div>
+                  <span class="tips">支持mp4格式，单个文件最大100MB</span>
+                </div>
+              </el-upload>
+              <video class="video-com" style="width:100%; height:100%; object-fit: fill;" muted
+                     :src="newsInfo.videoFile[0].url" controls="controls" v-if="newsInfo.videoFile.length"></video>
+              <el-upload :show-file-list="false" ref="upload2" action :http-request="submitUpload" :accept="accept"
+                         :limit="1" v-if="newsInfo.videoFile.length">
+                <el-button style="margin-top: 10px;">重新选择</el-button>
+              </el-upload>
+            </el-form-item>
+            <el-form-item prop="coverFile" label="封面：">
+              <ai-uploader :instance="instance" v-model="newsInfo.coverFile" :limit="1"
+                           @change="$refs['ruleForm'].clearValidate('coverFile')" :cropOps="cropOps" is-crop>
+                <template slot="tips">图片比例：1.8：1</template>
+              </ai-uploader>
+            </el-form-item>
+          </el-form>
+        </template>
+      </ai-card>
+    </template>
+    <template slot="footer">
+      <el-button class="footer_btn" @click="$emit('goBack')">取消</el-button>
+      <el-button type="primary" class="footer_btn" @click="handleSubmit('1')" v-if="!isEdit">发布</el-button>
+      <el-button class="footer_btn" @click="handleSubmit('0')">保存</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import mp4box from 'mp4box'
+
+export default {
+  name: "addVideo",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    areaId: String,
+    detail: Object,
+  },
+  data() {
+    return {
+      newsInfo: {
+        areaId: '',
+        title: "",
+        policyType: '',
+        videoFile: [],
+        coverFile: []
+      },
+      accept: ".mp4",
+      rules: {
+        title: {required: true, message: '请输入标题', trigger: 'blur'},
+        areaId: {required: true, message: '请选择 发布地区', trigger: 'blur'},
+        policyType: {required: true, message: '请选择类型', trigger: 'change'},
+        videoFile: {required: true, message: '请上传视频', trigger: 'blur'},
+        coverFile: {required: true, message: '请上传封面', trigger: 'blur'},
+      },
+      cropOps: {
+        width: "320px",
+        height: "180px"
+      },
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!this.$route.query.id;
+    }
+  },
+  methods: {
+    handleSubmit(status) {
+      this.$refs["ruleForm"].validate(valid => {
+        if (valid) {
+          this.addOrUpdate(status);
+        }
+      })
+    },
+
+    /**
+     * 上传视频
+     */
+    submitUpload(file) {
+      this.$refs['upload1']?.clearFiles();
+      this.$refs['upload2']?.clearFiles();
+      this.$refs['ruleForm']?.clearValidate('videoFile');
+      const fileType = file.file.name.split(".")[1];
+      const size = file.file.size / 1024 / 1024 > 100;
+      let mp4boxfile = mp4box.createFile();
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file.file);
+      reader.onload = (e) => {
+        const arrayBuffer = e.target.result;
+        arrayBuffer.fileStart = 0;
+        mp4boxfile.appendBuffer(arrayBuffer);
+      };
+      mp4boxfile.onReady = (info) => {
+        let codec = info.mime.match(/codecs="(\S*),/)[1]
+        if (codec.indexOf('avc') === -1) {
+          return this.$message.error("视频编码格式不支持")
+        }
+
+        if (size) {
+          return this.$message.error("视频大小不能超过100M");
+        }
+
+        if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
+          let formData = new FormData()
+          formData.append('file', file.file);
+          this.instance.post(`/admin/file/add-unlimited`, formData).then(res => {
+            if (res && res.data) {
+              let videoList = res.data[0].split(";");
+              this.newsInfo.videoFile.splice(0, 1, {
+                id: videoList[1],
+                url: videoList[0]
+              })
+            }
+          })
+        } else {
+          return this.$message.error("视频格式错误");
+        }
+
+      };
+    },
+    addOrUpdate(status) {
+      const msg = +status ? '发布成功' : this.isEdit ? '编辑成功' : '保存成功';
+      this.instance.post(`/app/appnews/addOrUpdate`, {
+        title: this.newsInfo.title,
+        videoFile: {
+          id: this.newsInfo.videoFile[0].id
+        },
+        coverFile: {
+          id: this.newsInfo.coverFile[0].id
+        },
+        policyType: this.newsInfo.policyType,
+        areaId: this.areaId,
+        type: 1,
+        id: this.detail.id,
+        status: this.isEdit ? this.detail.status : status
+      }).then(res => {
+        if (res.code == 0) {
+          this.$message.success(msg);
+          this.$emit("goBack");
+        }
+      })
+    },
+    getDetail() {
+      let {id} = this.$route.query
+      this.instance.post(`/app/appnews/getById`, null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.newsInfo.areaId = res.data.areaId
+          this.newsInfo.title = res.data.title;
+          this.newsInfo.policyType = res.data.policyType
+          this.newsInfo.videoFile = [{...res.data.videoFile, url: res.data.videoFile.accessUrl}];
+          this.newsInfo.coverFile = [{...res.data.coverFile, url: res.data.coverFile.accessUrl}];
+        }
+      })
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      this.getDetail();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-video {
+  height: 100%;
+  overflow: auto;
+
+  .video {
+    width: 640px;
+    height: 360px;
+    border-radius: 4px;
+    border: 1px dashed #D0D4DC;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      span:nth-child(2) {
+        display: inline-block;
+        font-size: 16px;
+        color: #333333;
+        line-height: 30px;
+      }
+
+      .iconfont {
+        display: inline-block;
+        font-size: 40px;
+        color: #2266FF;
+      }
+    }
+
+    .tips {
+      display: inline-block;
+      font-size: 12px;
+      color: #999999;
+      line-height: 26px;
+    }
+  }
+
+  .video-com {
+    width: 640px;
+    height: 360px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 2px;
+    border: 1px solid #D0D4DC;
+    margin-top: -40px;
+  }
+
+  ::v-deep .AiIcon {
+    width: 38px;
+    height: 38px;
+  }
+
+  .footer_btn {
+    width: 106px;
+  }
+}
+
+</style>
diff --git a/project/xiushan/apps/AppNewsCenter/components/index.js b/project/xiushan/apps/AppNewsCenter/components/index.js
new file mode 100644
index 00000000..38655446
--- /dev/null
+++ b/project/xiushan/apps/AppNewsCenter/components/index.js
@@ -0,0 +1,5 @@
+export {default as newsList} from "./newsList";
+export {default as addVideo} from "./addVideo";
+export {default as addArticle} from "./addArticle";
+export {default as newsDetail} from "./newsDetail";
+export {default as videoDetail} from "./videoDetail";
diff --git a/project/xiushan/apps/AppNewsCenter/components/newsDetail.vue b/project/xiushan/apps/AppNewsCenter/components/newsDetail.vue
new file mode 100644
index 00000000..6743c57e
--- /dev/null
+++ 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>
diff --git a/project/xiushan/apps/AppNewsCenter/components/newsList.vue b/project/xiushan/apps/AppNewsCenter/components/newsList.vue
new file mode 100644
index 00000000..c1a66644
--- /dev/null
+++ b/project/xiushan/apps/AppNewsCenter/components/newsList.vue
@@ -0,0 +1,221 @@
+<template>
+  <ai-list class="news-list">
+    <ai-title slot="title" title="新闻中心" isShowBottomBorder/>
+    <template slot="content">
+      <ai-search-bar>
+        <template slot="left">
+          <el-dropdown @visible-change="v=>isClick=v" @command="addNews"
+                       v-if="permissions('app_appnews_edit')">
+            <el-button type="primary" icon="iconfont iconAdd" size="small">发布新闻
+              <i class="el-icon--right" :class="dropIcon"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="video">发布视频</el-dropdown-item>
+              <el-dropdown-item command="article">发布文章</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+        <template slot="right">
+          <el-input
+              v-model="searchObj.title"
+              size="small"
+              placeholder="搜索标题"
+              clearable
+              @change="page.current = 1, getList()"
+              suffix-icon="iconfont iconSearch"/>
+        </template>
+      </ai-search-bar>
+      <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          stripe
+          :current.sync="page.current"
+          :size.sync="page.size"
+          :dict="dict"
+          @getList="getList">
+        <el-table-column slot="title" label="标题" width="280" align="left" show-overflow-tooltip>
+          <template slot-scope="{ row }">
+            <span style="color: #2266FF;margin-right:40px;" v-if="row.isTop == 1">[置顶]</span>
+            <span>{{ row.title }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" label="操作" fixed="right" width="260" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" title="取消发布" v-if="+row.status" @click="changeStatus(row)">取消发布</el-button>
+              <el-button type="text" v-else title="发布" @click="changeStatus(row)">发布</el-button>
+              <el-button type="text" @click="handleEdit(row)" v-if="permissions('app_appnews_edit')">编辑
+              </el-button>
+              <el-button type="text" @click="handleDelete(row)" v-if="permissions('app_appnews_del')">删除
+              </el-button>
+              <el-button type="text" @click="handleCopyShare(row)">小程序链接</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+import moment from "dayjs"
+
+export default {
+  name: "newsList",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    areaId: String
+  },
+  data() {
+    return {
+      tableData: [],
+      total: 0,
+      isClick: false,
+      page: {
+        current: 1,
+        size: 10
+      },
+      searchObj: {
+        title: '',
+        type: ''
+      },
+    }
+  },
+  computed: {
+    colConfigs() {
+      return [
+        {slot: 'title', label: '标题', width: 280},
+        {
+          prop: 'viewCount', label: '浏览/播放量', align: "center", width: 100,
+          render: (h, {row}) => {
+            return h('span', null, row.viewCount >= 10000 ? ((row.viewCount / 10000).toFixed(2) + '万') : row.viewCount)
+          }
+        },
+        {prop: 'createUserName', label: '发布人'},
+        {prop: 'createTime', label: '发布时间'},
+        {
+          prop: 'status', label: '发布状态', align: 'center',
+          render: (h, {row}) => {
+            return h('span', {
+              style: {
+                color: row.status ? this.dict.getColor('appNewsStatus', row.status) : 'auto'
+              }
+            }, this.dict.getLabel('appNewsStatus', row.status))
+          }
+        },
+        {slot: 'options', label: '操作'}
+      ]
+    },
+    dropIcon() {
+      return this.isClick ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
+    },
+  },
+  methods: {
+    /**
+     * 编辑
+     * */
+    handleEdit(row) {
+      if (+row.type) {
+        this.$emit("goPage", {key: "addVideo", row});
+      } else {
+        this.$emit("goPage", {key: "addArticle", row});
+      }
+    },
+
+    /**
+     * 修改新闻中心状态-发布、取消发布
+     * */
+    changeStatus(row) {
+      const msg = +row.status ? "是否取消发布？" : "是否发布？";
+      this.$confirm(msg).then(() => this.changeInfo(row));
+    },
+    /**
+     * 删除新闻
+     * */
+    handleDelete({id}) {
+      this.$confirm("是否要删除？").then(() => this.deleteInfo(id));
+    },
+    resetSearch() {
+      this.searchObj.title = "";
+      this.searchObj.type = "";
+      this.getList();
+    },
+    /**
+     * 添加新闻、视频
+     * */
+    addNews(command) {
+      switch (command) {
+        case "video":
+          this.$emit('goPage', {key: "addVideo"});
+          break;
+        case "article":
+          this.$emit('goPage', {key: "addArticle"});
+          break;
+      }
+    },
+    /**
+     * 修改发布状态
+     * */
+    changeInfo({id, status}) {
+      const msg = +status ? "取消发布成功" : "发布成功";
+      status = +status ? 0 : 1;
+      this.instance.post(`/app/appnews/setStatus?id=${id}&status=${status}`).then(() => {
+        this.$message.success(msg);
+        this.getList();
+      })
+    },
+    /**
+     * 删除新闻
+     * @param id
+     */
+    deleteInfo(id) {
+      this.instance.post(`/app/appnews/delete?ids=${id}`).then(() => {
+        this.$message.success("删除成功");
+        this.getList();
+      })
+    },
+    getList() {
+      this.instance.post(`/app/appnews/list`, null, {
+        params: {
+          ...this.page,
+          ...this.searchObj,
+          areaId: this.areaId
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records.map(e => {
+            return {
+              ...e,
+              createTime: +e.status ? moment(e.createTime).format("YYYY-MM-DD HH:mm") : ''
+            }
+          });
+          this.total = res.data.total;
+        }
+      })
+    },
+    handleCopyShare(row) {
+      navigator.clipboard.writeText(`/pages/newsList/detail?id=${row.id}`)
+      this.$message.success("小程序链接已复制!")
+    }
+  },
+  created() {
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.news-list {
+  height: 100%;
+  overflow: auto;
+  background: #f3f6f9;
+
+  ::v-deep.has-gutter th:nth-child(1) div {
+    margin-left: 40px;
+  }
+}
+
+</style>
diff --git a/project/xiushan/apps/AppNewsCenter/components/videoDetail.vue b/project/xiushan/apps/AppNewsCenter/components/videoDetail.vue
new file mode 100644
index 00000000..feef5fc5
--- /dev/null
+++ 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>