通知公告

2021-11-22 10:59:46 +08:00
parent 5aa59dd401
commit dddbbc6faf
4 changed files with 113 additions and 96 deletions
--- a/src/apps/AppNotification/AppNotification.vue
+++ b/src/apps/AppNotification/AppNotification.vue
@@ -1,60 +1,67 @@
 <template>
  <div class="notification">
-    <AiTopFixed>
-      <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" @click="change"></u-tabs>
-    </AiTopFixed>
-    <div class="body" v-if="dataList.length">
-      <div class="card" v-for="(item,idx) in dataList" :key="idx" @click="handeClick(item)">
-        <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>
-            {{item.title}}
-          </label>
-          <u-gap height="16"></u-gap>
-          <span class="info">
+    <template v-if="showList">
+      <AiTopFixed>
+        <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" @click="change"></u-tabs>
+      </AiTopFixed>
+      <div class="body" v-if="dataList.length">
+        <div class="card" v-for="(item,idx) in dataList" :key="idx" @click="handeClick(item)">
+          <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>
+              {{item.title}}
+            </label>
+            <u-gap height="16"></u-gap>
+            <span class="info">
            <text>{{item.releaseUserName}}</text>
            <text>{{item.releaseTime}}</text>
          </span>
-        </template>
-        <template v-else>
-          <div class="has-pic">
-            <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>
-                {{item.title}}
-              </label>
-              <u-gap height="16"></u-gap>
-              <span class="info">
+          </template>
+          <template v-else>
+            <div class="has-pic">
+              <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>
+                  {{item.title}}
+                </label>
+                <u-gap height="16"></u-gap>
+                <span class="info">
                <text>{{item.releaseUserName}}</text>
                <text>{{item.releaseTime}}</text>
              </span>
+              </div>
+              <img :src="item.imgUrl" alt="">
            </div>
-            <img :src="item.imgUrl" alt="">
-          </div>
-        </template>
+          </template>
+        </div>
      </div>
-    </div>

-    <AiEmpty v-else/>
-    <u-loadmore :status="status" v-if="dataList.length"/>
-    <AiAdd @add="add"/>
-    <u-popup :show="show" mode="bottom">
-      <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-gap height="16"></u-gap>
-            {{item.name}}
-          </div>
-        </u-row>
-        <div class="btn" @click="show=false">关闭</div>
-      </div>
-    </u-popup>
-    <u-modal v-model="modal" :content="'是否确定' + content + '该公告？'" title="" show-confirm-button
-             show-cancel-button confirm-text="确定" cancel-text="取消"
-             @confirm="confirm"></u-modal>
+      <AiEmpty v-else/>
+      <u-loadmore :status="status" v-if="dataList.length"/>
+      <AiAdd @add="add"/>
+      <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="50" :custom-style="{backgroundColor:'#fff',borderRadius:'8px'}"></u-icon>
+              <u-gap height="16"></u-gap>
+              {{item.name}}
+            </div>
+          </u-row>
+          <div class="btn" @click="show=false">关闭</div>
+        </div>
+      </u-popup>
+      <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,19 +84,22 @@
        current: 1,
        dataList: [],
        detail: {},
+        showList: true,
+        comp: "",
+        params: null,
        status: "加载更多",
      }
    },

-    onLoad(){
+    onLoad() {
      this.$dict.load("announcementStatus");
    },

    computed: {
      tabs() {
-        return [{name: "最新公告"},{name: "公告管理"}];
+        return [{name: "最新公告"}, {name: "公告管理"}];
      },
-      optList(){
+      optList() {
        return [
          {
            name: "详情",
@@ -119,28 +130,28 @@
            val: 4,
            show: true,
          }
-        ].filter(e=>e.show)
+        ].filter(e => e.show)
      }
    },

    methods: {
-      changeState(){
-        this.$http.post(this.content =='删除' ? '/app/appannouncement/delete' : "/app/appannouncement/update-status",null,{
+      changeState() {
+        this.$http.post(this.content == '删除' ? '/app/appannouncement/delete' : "/app/appannouncement/update-status", null, {
          params: {
-            [this.content =='删除' ? 'ids' : 'id']:this.detail.id
+            [this.content == '删除' ? 'ids' : 'id']: this.detail.id
          }
-        }).then(res=>{
-          if(res.code==0){
+        }).then(res => {
+          if (res.code == 0) {
            this.$u.toast(this.content + "成功");
            this.getList();
          }
        })
      },
-      confirm(){
+      confirm() {
        this.show = false;
        this.changeState();
      },
-      handleOpt(item){
+      handleOpt(item) {
        this.content = {
          1: "撤回",
          2: "发布",
@@ -154,39 +165,41 @@
          });
        }

-        if ([1,2,4].includes(item.val)) {
+        if ([1, 2, 4].includes(item.val)) {
          return this.modal = true;
        }

-        if(item.val==3){
+        if (item.val == 3) {
          this.show = false;
          return uni.navigateTo({
-            url:"/pages/notification/components/add?id=" + this.detail.id + "&flag=" + false
+            url: "/pages/notification/components/add?id=" + this.detail.id + "&flag=" + false
          });
        }
      },
-      color(status){
+      color(status) {
        return [
-          {backgroundColor:"rgba(255,136,34,0.1)",color:"#FF8822"},
-          {backgroundColor:"rgba(34,102,255,0.1)",color:"#2266FF"},
-          {backgroundColor:"rgba(102,102,102,0.1)",color:"#666666"},
-          {backgroundColor:"rgba(255,136,34,0.1)",color:"#FF8822"}
+          {backgroundColor: "rgba(255,136,34,0.1)", color: "#FF8822"},
+          {backgroundColor: "rgba(34,102,255,0.1)", color: "#2266FF"},
+          {backgroundColor: "rgba(102,102,102,0.1)", color: "#666666"},
+          {backgroundColor: "rgba(255,136,34,0.1)", color: "#FF8822"}
        ][status];
      },
      handeClick(item) {
        this.detail = item;
        if (this.index == 1) {
          this.show = true;
-        }else {
-          uni.navigateTo({
-            url: "/pages/notification/components/detail?id=" + this.detail.id + "&flag=" + true
-          })
+        } else {
+          this.comp = "detail";
+          this.params = {
+            id: this.detail.id,
+            flag: true
+          };
+          this.showList = false;
        }
      },
-      add(){
-        uni.navigateTo({
-          url: "/pages/notification/components/add"
-        })
+      add() {
+        this.comp = "add";
+        this.showList = false;
      },
      change(val) {
        this.index = val.index;
@@ -194,7 +207,7 @@
        this.getList()
      },
      getList() {
-        this.$http.post(this.index ==0 ? "/app/appannouncement/list-latest" : "/app/appannouncement/list-mgr", null, {
+        this.$http.post(this.index == 0 ? "/app/appannouncement/list-latest" : "/app/appannouncement/list-mgr", null, {
          params: {
            size: 10,
            current: this.current
@@ -228,7 +241,7 @@
    background-color: #F5F5F5;
    padding-bottom: 32px;

-    ::v-deep .content{
+    ::v-deep .content {
      padding: 0 !important;
    }

@@ -247,7 +260,7 @@
        background-color: #ffffff;
        margin-bottom: 32px;

-        &:last-child{
+        &:last-child {
          margin-bottom: 0;
        }

@@ -272,7 +285,7 @@
          margin-right: 8px;
        }

-        .tag{
+        .tag {
          width: 96px;
          height: 44px;
          display: inline-block;
@@ -311,7 +324,8 @@
              -webkit-line-clamp: 2;
            }
          }
-          & > img{
+
+          & > img {
            width: 192px;
            height: 144px;
            flex-shrink: 0;
@@ -325,7 +339,7 @@
      height: 368px;
      background-color: #F7F7F7;

-      .btn{
+      .btn {
        height: 96px;
        display: flex;
        align-items: center;