通知公告

src/apps/AppNotification/AppNotification.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="notification">
+    <template v-if="showList">
       <AiTopFixed>
         <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" @click="change"></u-tabs>
       </AiTopFixed>
@@ -8,7 +9,9 @@
           <template v-if="!item.imgUrl">
             <label>
               <b v-if="index==0 && item.readStatus==0"></b>
-            <div class="tag" v-if="index==1" :style="color(item.status)">{{$dict.getLabel("announcementStatus",item.status)}}</div>
+              <div class="tag" v-if="index==1" :style="color(item.status)">
+                {{$dict.getLabel("announcementStatus",item.status)}}
+              </div>
               {{item.title}}
             </label>
             <u-gap height="16"></u-gap>
@@ -22,7 +25,9 @@
               <div class="left">
                 <label>
                   <b v-if="index==0 && item.readStatus==0"></b>
-                <div class="tag" v-if="index==1" :style="color(item.status)">{{$dict.getLabel("announcementStatus",item.status)}}</div>
+                  <div class="tag" v-if="index==1" :style="color(item.status)">
+                    {{$dict.getLabel("announcementStatus",item.status)}}
+                  </div>
                   {{item.title}}
                 </label>
                 <u-gap height="16"></u-gap>
@@ -40,11 +45,11 @@
       <AiEmpty v-else/>
       <u-loadmore :status="status" v-if="dataList.length"/>
       <AiAdd @add="add"/>
-    <u-popup :show="show" mode="bottom">
+      <u-popup :show="show" mode="bottom" closeOnClickOverlay>
         <div class="popup-wrap">
           <u-row justify="between">
             <div class="colum" v-for="(item,index) in optList" :key="index" @click="handleOpt(item)">
-            <u-icon :name="item.icon" size="100" :custom-style="{backgroundColor:'#fff',borderRadius:'16px'}"></u-icon>
+              <u-icon :name="item.icon" size="50" :custom-style="{backgroundColor:'#fff',borderRadius:'8px'}"></u-icon>
               <u-gap height="16"></u-gap>
               {{item.name}}
             </div>
@@ -55,6 +60,8 @@
       <u-modal v-model="modal" :content="'是否确定' + content + '该公告？'" title="" show-confirm-button
                show-cancel-button confirm-text="确定" cancel-text="取消"
                @confirm="confirm"></u-modal>
+    </template>
+    <component :is="comp" v-else :params="params"></component>
   </div>
 </template>
 
@@ -62,11 +69,12 @@
   import AiAdd from "../../components/AiAdd";
   import AiEmpty from "../../components/AiEmpty/AiEmpty";
   import AiTopFixed from "../../components/AiTopFixed";
+  import {add, detail, read} from "./components"
 
   export default {
     name: "notification",
     appName: "通知公告",
-    components: {AiAdd, AiEmpty,AiTopFixed},
+    components: {AiAdd, AiEmpty, AiTopFixed, add, detail, read},
     data() {
       return {
         index: 0,
@@ -76,6 +84,9 @@
         current: 1,
         dataList: [],
         detail: {},
+        showList: true,
+        comp: "",
+        params: null,
         status: "加载更多",
       }
     },
@@ -178,15 +189,17 @@
         if (this.index == 1) {
           this.show = true;
         } else {
-          uni.navigateTo({
-            url: "/pages/notification/components/detail?id=" + this.detail.id + "&flag=" + true
-          })
+          this.comp = "detail";
+          this.params = {
+            id: this.detail.id,
+            flag: true
+          };
+          this.showList = false;
         }
       },
       add() {
-        uni.navigateTo({
-          url: "/pages/notification/components/add"
-        })
+        this.comp = "add";
+        this.showList = false;
       },
       change(val) {
         this.index = val.index;
@@ -311,6 +324,7 @@
               -webkit-line-clamp: 2;
             }
           }
+
           & > img {
             width: 192px;
             height: 144px;

src/apps/AppNotification/components/detail.vue

@@ -63,16 +63,15 @@
   export default {
     name: "detail",
     components:{AiBack,AiEmpty},
+    props:{
+      params:Object
+    },
     data() {
       return {
-        detailObj: null,
-        id: null,
-        flag: null,
+        detailObj: {},
       }
     },
-    onLoad(opt){
-      this.id = opt.id;
-      this.flag = opt.flag;
+    created() {
       this.getDetail();
     },
     methods: {
@@ -90,8 +89,8 @@
       getDetail() {
         this.$http.post("/app/appannouncement/detail", null, {
           params: {
-            id: this.id,
-            detail: this.flag
+            id: this.params?.id,
+            detail: this.params?.flag
           }
         }).then(res=>{
           if(res && res.data){
@@ -100,9 +99,9 @@
         })
       },
       handleClick() {
-        uni.navigateTo({
-          url:"/pages/notification/components/read?id=" + this.id,
-        })
+        this.$parent.params = this.params.id;
+        this.$parent.comp = "read";
+        this.$parent.showList = false;
       }
     },
   }

src/apps/AppNotification/components/index.js

@@ -0,0 +1,3 @@
+export {default as add} from "./add"
+export {default as detail} from "./detail"
+export {default as read} from "./read"

src/apps/AppNotification/components/read.vue

@@ -5,7 +5,7 @@
     </AiTopFixed>
     <div class="body">
       <div class="item" v-for="(item,index) in (current==0 ? list.read : list.unRead)" :key="index">
-        <u-avatar :src="item.avatar" mode="square" size="76"></u-avatar>
+        <u-avatar :src="item.avatar" mode="square" size="38"></u-avatar>
         <span class="name">{{item.name}}</span>
       </div>
     </div>
@@ -20,22 +20,23 @@
   export default {
     name: "read",
     components: {AiBack, AiTopFixed},
+    props:{
+      params:[String,Number]
+    },
     data() {
       return {
         current: 0,
-        id: null,
         list: [],
       }
     },
-    onLoad(opt) {
-      this.id = opt.id;
+    created() {
       this.getList();
     },
     methods: {
       getList() {
         this.$http.post("/app/appannouncementreader/list-unread",null,{
           params:{
-            id:this.id
+            id:this.params
           }
         }).then(res => {
           if (res && res.data) {