1

src/components/global/notify.vue

 <template>
-<q-dialog v-model="persistent" maximized full-height position="right" @hide="closeShenheForm" class="flex">
-    <q-card style="margin-top:61px;width:375px;height:calc(100% - 61px) !important;" class="no-border-radius flex column">
-       <q-tabs
-          v-model="tab"
-          class="text-grey"
-          active-color="secondary"
-          indicator-color="secondary"
-          align="justify"
-          narrow-indicator
-          inline-label
-        >
+  <q-dialog v-model="persistent" maximized full-height position="right" @hide="closeShenheForm" class="flex">
+    <q-card style="margin-top:61px;width:375px;height:calc(100% - 61px) !important;"
+      class="no-border-radius flex column">
+      <q-tabs v-model="tab" class="text-grey" active-color="secondary" indicator-color="secondary" align="justify"
+        narrow-indicator inline-label>
         <q-tab alert="negative" name="msg" style="display:none;">
-                <inline-svg class="svg-icon q-mr-xs" :class="[tab=='msg'?'svg-icon-secondary':'svg-icon-grey']" src="icons/svg/Communication/Chat-check.svg"></inline-svg>
+          <inline-svg class="svg-icon q-mr-xs" :class="[tab=='msg'?'svg-icon-secondary':'svg-icon-grey']"
+            src="icons/svg/Communication/Chat-check.svg"></inline-svg>
           <span>消息</span>
         </q-tab>
         <q-tab name="notify">
-                <inline-svg class="svg-icon q-mr-xs" :class="[tab=='notify'?'svg-icon-secondary':'svg-icon-grey']" src="icons/svg/Communication/Urgent-mail.svg"></inline-svg>
+          <inline-svg class="svg-icon q-mr-xs" :class="[tab=='notify'?'svg-icon-secondary':'svg-icon-grey']"
+            src="icons/svg/Communication/Urgent-mail.svg"></inline-svg>
           <span>公告</span>
         </q-tab>
         <q-tab name="work">
-                <inline-svg class="svg-icon q-mr-xs" :class="[tab=='work'?'svg-icon-secondary':'svg-icon-grey']" src="icons/svg/Files/Folder.svg"></inline-svg>
+          <inline-svg class="svg-icon q-mr-xs" :class="[tab=='work'?'svg-icon-secondary':'svg-icon-grey']"
+            src="icons/svg/Files/Folder.svg"></inline-svg>
           <span>工作</span>
         </q-tab>
       </q-tabs>
-        <q-tab-panels v-model="tab" class="q-mt-none col" animated swipeable transition-prev="jump-up" transition-next="jump-up">
-            <q-tab-panel name="msg" class="scroll _scrollbar" >
+      <q-tab-panels v-model="tab" class="q-mt-none col" animated swipeable transition-prev="jump-up"
+        transition-next="jump-up">
+        <q-tab-panel name="msg" class="scroll _scrollbar">
           <q-list v-if="dataList.length>0">
-                    <q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in dataList" :key="i" clickable v-ripple @click="undefinedGongneng">
+            <q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in dataList" :key="i" clickable v-ripple
+              @click="undefinedGongneng">
               <q-item-section avatar>
-                            <q-avatar :style="{'background-color':x.icons.backgroundColor}" rounded size="40px" :text-color="x.icons.color">
-                                <inline-svg :class="['svg-icon',`svg-icon-${x.icons.color}`]" :src="x.icons.icon" v-if="x.icons.icon.length>1"></inline-svg>
+                <q-avatar :style="{'background-color':x.icons.backgroundColor}" rounded size="40px"
+                  :text-color="x.icons.color">
+                  <inline-svg :class="['svg-icon',`svg-icon-${x.icons.color}`]" :src="x.icons.icon"
+                    v-if="x.icons.icon.length>1"></inline-svg>
                   <span v-else>{{x.icons.icon}}</span>
                 </q-avatar>
               </q-item-section>
@@ -42,13 +43,15 @@
           </q-list>
           <none-data v-else></none-data>
         </q-tab-panel>
-            <q-tab-panel name="notify" class="scroll _scrollbar" >
-                <q-card flat class="relative-position overflow-hidden q-pa-md text-grey-1 cursor-pointer q-mb-md" style="height:130px" @click="undefinedGongneng">
+        <q-tab-panel name="notify" class="scroll _scrollbar">
+          <q-card flat class="relative-position overflow-hidden q-pa-md text-grey-1 cursor-pointer q-mb-md"
+            style="height:130px" @click="undefinedGongneng">
             <div class="gonggao-bg">
-                        <img src="../../assets/images/noticeBg.png"/>
+              <img src="../../assets/images/noticeBg.png" />
             </div>
             <div class="flex row items-center relative-position">
-                        <q-avatar size="30px" font-size="14px" rounded style="background:#C9F7F5" class="q-mr-md" text-color="secondary">
+              <q-avatar size="30px" font-size="14px" rounded style="background:#C9F7F5" class="q-mr-md"
+                text-color="secondary">
                 <img :src="showObj.UserIcon" v-if="showObj.UserIcon">
                 <span v-else>{{showObj.AccountName.substring(0,1)}}</span>
               </q-avatar>
@@ -61,191 +64,201 @@
             <div class="relative-position q-mt-md text-right text-grey-2 remark-font">甲鹤行2021-A-001</div>
           </q-card>
         </q-tab-panel>
-            <q-tab-panel name="work" class="scroll _scrollbar" >
+        <q-tab-panel name="work" class="scroll _scrollbar">
           <none-data></none-data>
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
-</q-dialog>
+  </q-dialog>
 </template>
 
 <script>
-import noneData from './none-data'
-import NoneData from './none-data.vue'
-export default {
+  import {
+    GetMyNoticePageList
+  } from '../../api/course/index'
+
+  import noneData from './none-data'
+  import NoneData from './none-data.vue'
+  export default {
     props: {
       showObj: {
         type: Object,
         default: null
       }
     },
-    components:{
+    components: {
       noneData
     },
     data() {
       return {
         persistent: true,
         saveLoading: false,
-            tab:"notify",
-            icons:{
-                '退':{
+        tab: "notify",
+        icons: {
+          '退': {
             backgroundColor: '#ffe2e5',
             color: 'negative',
-                    icon:'icons/svg/Design/Stamp.svg'
+            icon: 'icons/svg/Design/Stamp.svg'
           },
-                '订':{
+          '订': {
             backgroundColor: '#e1f0ff',
             color: 'primary',
-                    icon:'icons/svg/Shopping/Bag2.svg'
+            icon: 'icons/svg/Shopping/Bag2.svg'
           },
-                '考':{
+          '考': {
             backgroundColor: '#fff4de',
             color: 'warning',
-                    icon:'icons/svg/Code/Time-schedule.svg'
+            icon: 'icons/svg/Code/Time-schedule.svg'
           },
-                '续':{
+          '续': {
             backgroundColor: '#c9f7f5',
             color: 'secondary',
-                    icon:'icons/svg/General/Attachment1.svg'
+            icon: 'icons/svg/General/Attachment1.svg'
           },
-                '财':{
+          '财': {
             backgroundColor: '#eee5ff',
             color: 'accent',
-                    icon:'icons/svg/Shopping/Dollar.svg'
+            icon: 'icons/svg/Shopping/Dollar.svg'
           }
         },
-            defaultIcon:{
+        defaultIcon: {
           backgroundColor: '#f3f6f9',
           color: 'primary'
         },
-            dataList:[
-                {
-                    Title:'财务单据结果通知',
-                    Content:"你参与的财务审核已完成！",
-                    Time:"1小时前"
+        dataList: [{
+            Title: '财务单据结果通知',
+            Content: "你参与的财务审核已完成！",
+            Time: "1小时前"
           },
           {
-                    Title:'财务审批通知',
-                    Content:"你有待审批的财务单据",
-                    Time:"12小时前"
+            Title: '财务审批通知',
+            Content: "你有待审批的财务单据",
+            Time: "12小时前"
           },
           {
-                    Title:'考勤审批通知',
-                    Content:"李思思发起请假申请，请尽快审批",
-                    Time:"1天前"
+            Title: '考勤审批通知',
+            Content: "李思思发起请假申请，请尽快审批",
+            Time: "1天前"
           },
           {
-                    Title:'订单通知',
-                    Content:"你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
-                    Time:"1天前"
+            Title: '订单通知',
+            Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
+            Time: "1天前"
           },
           {
-                    Title:'续费通知',
-                    Content:"你的客户：“郑科”已申请续费课程，请尽快对接",
-                    Time:"1天前"
+            Title: '续费通知',
+            Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
+            Time: "1天前"
           },
           {
-                    Title:'退课通知',
-                    Content:"你的客户：“郑科”退课申请已通过，请办理相关退款单据",
-                    Time:"1天前"
+            Title: '退课通知',
+            Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
+            Time: "1天前"
           },
           {
-                    Title:'工作审批通知',
-                    Content:"你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
-                    Time:"1天前"
+            Title: '工作审批通知',
+            Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
+            Time: "1天前"
           },
           {
-                    Title:'财务单据结果通知',
-                    Content:"你参与的财务审核已完成！",
-                    Time:"1小时前"
+            Title: '财务单据结果通知',
+            Content: "你参与的财务审核已完成！",
+            Time: "1小时前"
           },
           {
-                    Title:'财务审批通知',
-                    Content:"你有待审批的财务单据",
-                    Time:"12小时前"
+            Title: '财务审批通知',
+            Content: "你有待审批的财务单据",
+            Time: "12小时前"
           },
           {
-                    Title:'考勤审批通知',
-                    Content:"李思思发起请假申请，请尽快审批",
-                    Time:"1天前"
+            Title: '考勤审批通知',
+            Content: "李思思发起请假申请，请尽快审批",
+            Time: "1天前"
           },
           {
-                    Title:'订单通知',
-                    Content:"你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
-                    Time:"1天前"
+            Title: '订单通知',
+            Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
+            Time: "1天前"
           },
           {
-                    Title:'续费通知',
-                    Content:"你的客户：“郑科”已申请续费课程，请尽快对接",
-                    Time:"1天前"
+            Title: '续费通知',
+            Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
+            Time: "1天前"
           },
           {
-                    Title:'退课通知',
-                    Content:"你的客户：“郑科”退课申请已通过，请办理相关退款单据",
-                    Time:"1天前"
+            Title: '退课通知',
+            Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
+            Time: "1天前"
           },
           {
-                    Title:'工作审批通知',
-                    Content:"你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
-                    Time:"1天前"
+            Title: '工作审批通知',
+            Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
+            Time: "1天前"
           },
           {
-                    Title:'财务单据结果通知',
-                    Content:"你参与的财务审核已完成！",
-                    Time:"1小时前"
+            Title: '财务单据结果通知',
+            Content: "你参与的财务审核已完成！",
+            Time: "1小时前"
           },
           {
-                    Title:'财务审批通知',
-                    Content:"你有待审批的财务单据",
-                    Time:"12小时前"
+            Title: '财务审批通知',
+            Content: "你有待审批的财务单据",
+            Time: "12小时前"
           },
           {
-                    Title:'考勤审批通知',
-                    Content:"李思思发起请假申请，请尽快审批",
-                    Time:"1天前"
+            Title: '考勤审批通知',
+            Content: "李思思发起请假申请，请尽快审批",
+            Time: "1天前"
           },
           {
-                    Title:'订单通知',
-                    Content:"你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
-                    Time:"1天前"
+            Title: '订单通知',
+            Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
+            Time: "1天前"
           },
           {
-                    Title:'续费通知',
-                    Content:"你的客户：“郑科”已申请续费课程，请尽快对接",
-                    Time:"1天前"
+            Title: '续费通知',
+            Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
+            Time: "1天前"
           },
           {
-                    Title:'退课通知',
-                    Content:"你的客户：“郑科”退课申请已通过，请办理相关退款单据",
-                    Time:"1天前"
+            Title: '退课通知',
+            Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
+            Time: "1天前"
           },
           {
-                    Title:'工作审批通知',
-                    Content:"你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
-                    Time:"1天前"
+            Title: '工作审批通知',
+            Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
+            Time: "1天前"
           },
         ],
-            imgCov:'http://192.168.1.214:8130/Upload/studentIcon/20201201044129361.png'
+        imgCov: 'http://192.168.1.214:8130/Upload/studentIcon/20201201044129361.png',
+
+        //通知请求参数
+        noticeMsg:{
+          pageIndex:1,
+          pageSize:5
+        },
       }
     },
     created() {
       this.init();
+      this.getNotify();
     },
     methods: {
-        init(){
-            this.dataList.forEach(x=>{
-                x.icons=this.getIcon(x.Title.substring(0,1))
+      init() {
+        this.dataList.forEach(x => {
+          x.icons = this.getIcon(x.Title.substring(0, 1))
         });
       },
       closeShenheForm() {
         this.$emit('close')
       },
-        getIcon(t){
-            if(this.icons[t]){
+      getIcon(t) {
+        if (this.icons[t]) {
           return this.icons[t]
-            }else{
-                let temp=JSON.parse(JSON.stringify(this.defaultIcon))
-                temp.icon=t
+        } else {
+          let temp = JSON.parse(JSON.stringify(this.defaultIcon))
+          temp.icon = t
           return temp
         }
       },
@@ -257,21 +270,50 @@ export default {
 
         });
       },
+      //请求公告数据
+      getNotify() {
+        GetMyNoticePageList(this.noticeMsg).then(res => {
+          if (res.Code == 1) {
+            console.log(res, 'notice数据');
+            // this.noticeObj = res.Data;
+            // if (res.Data.PageData.length > 0) {
+            //   this.isShowNotice = true;
+            // }
+          }
+        })
+      }
     },
-}
+  }
+
 </script>
 
 <style>
-  ._scrollbar::-webkit-scrollbar{width: 6px;height: 8px;}
-  ._scrollbar::-webkit-scrollbar-thumb{border-radius: 2px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);background: rgba(0, 0, 0, 0.5);}
-  ._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: transparent;display: none;}
-  .gonggao-bg{
+  ._scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+  }
+
+  ._scrollbar::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  ._scrollbar::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    background: transparent;
+    display: none;
+  }
+
+  .gonggao-bg {
     position: absolute;
     left: -10%;
     width: 120%;
     height: 130px;
   }
-  .gonggao-bg img{
+
+  .gonggao-bg img {
     width: 120%;
     height: 120%;
     /* filter: blur(20px); */
@@ -279,4 +321,5 @@ export default {
     margin-top: -8%;
     margin-left: -5%;
   }
+
 </style>