✨ 公告飘带上下轮播

Author: Hccake

src/api/notify/announcement.js

@@ -54,3 +54,19 @@ export function uploadImage (resultFiles) {
   });
   return request.post('/notify/announcement/image', formData, { contentType: false, processData: false })
 }
+
+
+export function getUserAnnouncements() {
+  return request({
+    url: '/notify/announcement/user',
+    method: 'get'
+  })
+}
+
+
+export function readAnnouncement(announcementId) {
+  return request({
+    url: '/notify/announcement/user/read/' + announcementId,
+    method: 'patch'
+  })
+}

src/components/notify/AnnouncementModal.vue

@@ -5,7 +5,7 @@
 import { Modal } from 'ant-design-vue'
 
 export default {
-  name: 'AnnouncementPage',
+  name: 'AnnouncementModal',
   methods: {
     show(announcement){
       Modal.info({

src/components/notify/AnnouncementRibbon.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="text-container" v-if="announcementNum > 0">
+    <transition class="" name="slide" mode="out-in">
+      <span :key="announcement.id" class="announcement-content">
+        <a-icon type="sound" theme="filled"/>
+        <a href="javascript:" class="text" @click="readAnnouncement">{{ announcement.title }}</a>
+      </span>
+    </transition>
+    <announcement-modal ref="announcementModal"></announcement-modal>
+  </div>
+</template>
+
+<script>
+import AnnouncementModal from '@/components/notify/AnnouncementModal'
+import { getUserAnnouncements, readAnnouncement } from '@/api/notify/announcement'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'AnnouncementRibbon',
+  components: {AnnouncementModal},
+  data () {
+    return {
+      activeIndex: 0, // 当前索引
+      intervalId: null, // 定时器ID
+      playTime: 4000, // 定时器执行间隔
+      announcements: [] // 公告信息
+    }
+  },
+  computed: {
+    announcementNum() {
+      return this.announcements.length
+    },
+    announcement () {
+      return this.announcements[this.activeIndex]
+    }
+  },
+  created () {
+    // 获取公告信息
+    getUserAnnouncements().then(res => {
+      this.announcements = res.data
+    })
+    // 定义定时器
+    this.intervalId = setInterval(() => {
+      if (this.activeIndex < this.announcementNum - 1) {
+        this.activeIndex++ // 自增
+      } else {
+        this.activeIndex = 0
+      }
+    }, this.playTime)
+
+  },
+  destroyed () {
+    // 清除定时器
+    clearInterval(this.intervalId)
+  },
+  methods: {
+    readAnnouncement(){
+      // 展示公告
+      this.$refs.announcementModal.show(this.announcement)
+      // 已读上报
+      readAnnouncement(this.announcement.id).resolve();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.text-container {
+  font-size: 14px;
+  color: #f56b6b;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  min-height: 32px;
+  position: relative;
+  background: rgb(230, 247, 255);
+  padding-left: 18px;
+}
+
+.text {
+  color: #f56b6b;
+  display: inline;
+  padding-left: 12px
+}
+
+.announcement-content {
+  width: 100%;
+  position: absolute;
+  text-align: left;
+  line-height: 32px;
+}
+
+.slide-enter-active, .slide-leave-active {
+  transition: all 0.8s linear;
+}
+
+.slide-enter {
+  transform: translateY(20px);
+  opacity: 1;
+}
+
+.slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+</style>
+

src/layouts/BasicLayout.vue

@@ -39,6 +39,8 @@
         @toggle="toggle"
       />
 
+      <announcement-ribbon/>
+
       <!-- layout content -->
       <a-layout-content :style="{ height: '100%', margin: '18px 18px 0', paddingTop: fixedHeader ? '64px' : '0' }">
         <multi-tab v-if="multiTab"></multi-tab>
@@ -70,11 +72,13 @@ import SideMenu from '@/components/Menu/SideMenu'
 import GlobalHeader from '@/components/GlobalHeader'
 import GlobalFooter from '@/components/GlobalFooter'
 import SettingDrawer from '@/components/SettingDrawer'
+import AnnouncementRibbon from '@/components/notify/AnnouncementRibbon'
 
 export default {
   name: 'BasicLayout',
   mixins: [mixin, mixinDevice],
   components: {
+    AnnouncementRibbon,
     RouteView,
     SideMenu,
     GlobalHeader,

src/views/notify/announcement/AnnouncementForm.vue

@@ -76,14 +76,23 @@
       </dict-check-box-group>
     </a-form-item>
 
-    <a-form-item label="失效时间">
-      <a-date-picker
-        v-decorator="['deadline']"
-        placeholder="不选则永久有效"
-        format="YYYY-MM-DD HH:mm:ss"
-        value-format="YYYY-MM-DD HH:mm:ss"
-        :show-time="true"
-      />
+    <a-form-item label="永久有效">
+      <a-row>
+        <a-col :xs="5" :md="2">
+          <a-switch v-model="isImmortal"></a-switch>
+        </a-col>
+        <a-col :xs="16" :md="16">
+          <a-form-item label="">
+            <a-date-picker
+              v-if="!isImmortal"
+              v-decorator="['deadline']"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              :show-time="true"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form-item>
 
     <a-form-item :wrapperCol="{offset: 7 }">
@@ -137,6 +146,8 @@ export default {
         sm: { span: 16 }
       },
 
+      // 是否永久有效
+      isImmortal: true,
       // 接收人筛选类型
       recipientFilterType: null,
       // 创建公告的默认状态
@@ -157,6 +168,7 @@ export default {
   },
   methods: {
     echoDataProcess (data) {
+      this.isImmortal = data.immortal === 1
       this.recipientFilterType = data.recipientFilterType
     },
     recipientFilterTypeChange (val) {
@@ -172,6 +184,7 @@ export default {
       this.$refs.announcementModal.show(data)
     },
     submitDataProcess (formData) {
+      formData.immortal = this.isImmortal ? 1 : 0
       formData.status = this.newAnnouncementStatus
       return formData
     },

src/views/notify/announcement/AnnouncementPage.vue

@@ -127,7 +127,7 @@ const statusFilterArr = [
   },
   {
     state: 'processing',
-    text: '发布中',
+    text: '已发布',
     value: 1
   },
   {
@@ -187,8 +187,8 @@ export default {
         {
           title: '失效时间',
           dataIndex: 'deadline',
-          customRender: function (text) {
-            return text ? text : '永久有效'
+          customRender: function (text, record) {
+            return record.immortal ? '永久有效' : text
           }
         },
         {