dvcp_v2_wxcp_app/src/apps/AppNotification/AppNotification.vue

<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>
      <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">
                <text>{{item.releaseUserName}}</text>
                <text>{{item.releaseTime}}</text>
              </span>
              </div>
              <img :src="item.imgUrl" alt="">
            </div>
          </template>
        </div>
      </div>

      <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 :show="modal" :content="'是否确定' + content + '该公告？'" title="" show-confirm-button
               show-cancel-button confirm-text="确定" cancel-text="取消"
               @confirm="confirm" :closeOnClickOverlay="true" @cancel="modal=false"></u-modal>
    </template>
    <component :is="comp" v-else :params="params"></component>
  </div>
</template>

<script>
  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, add, detail, read},
    data() {
      return {
        index: 0,
        show: false,
        modal: false,
        content: "",
        current: 1,
        dataList: [],
        detail: {},
        showList: true,
        comp: "",
        params: null,
        status: "加载更多",
      }
    },

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

    computed: {
      tabs() {
        return [{name: "最新公告"}, {name: "公告管理"}];
      },
      optList() {
        return [
          {
            name: "详情",
            icon: this.$cdn + "notice/yl.png",
            val: 0,
            show: true,
          },
          {
            name: "撤回",
            icon: this.$cdn + "notice/ch.png",
            val: 1,
            show: this.detail?.status == 1,
          },
          {
            name: "发布",
            icon: this.$cdn + "notice/fb.png",
            val: 2,
            show: this.detail?.status == 0,
          },
          {
            name: "编辑",
            icon: this.$cdn + "notice/bj.png",
            val: 3,
            show: this.detail?.status == 0 || this.detail?.status == 3,
          }, {
            name: "删除",
            icon: this.$cdn + "notice/sc.png",
            val: 4,
            show: true,
          }
        ].filter(e => e.show)
      }
    },

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

        if (item.val == 0) {
          this.show = false;
          this.comp = "detail";
          this.params = {
            id: this.detail.id,
            flag: true
          };
          this.showList = false;
          return
        }

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

        if (item.val == 3) {
          this.show = false;
          this.comp = "add";
          this.params = {
            id: this.detail.id,
            flag: false
          };
          this.showList = false;
          return
        }
      },
      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"}
        ][status];
      },
      handeClick(item) {
        this.detail = item;
        if (this.index == 1) {
          this.show = true;
        } else {
          this.comp = "detail";
          this.params = {
            id: this.detail.id,
            flag: true
          };
          this.showList = false;
        }
      },
      add() {
        this.comp = "add";
        this.params = {
          id: null,
          flag: false
        };
        this.showList = false;
      },
      change(val) {
        this.index = val.index;
        this.current = 1;
        this.getList()
      },
      getList() {
        this.$http.post(this.index == 0 ? "/app/appannouncement/list-latest" : "/app/appannouncement/list-mgr", null, {
          params: {
            size: 10,
            current: this.current
          }
        }).then(res => {
          if (res && res.data) {
            if (this.current > 1 && this.current > res.data.pages) {
              this.status = "已经到底啦"
            }
            this.dataList = this.current > 1 ? [...this.dataList, ...res.data.records] : res.data.records
          }
        })
      }
    },

    onShow() {
      this.current = 1;
      this.getList();
    },

    onReachBottom() {
      this.current = this.current + 1;
      this.getList()
    },
  }
</script>

<style lang="scss" scoped>
  .notification {
    min-height: 100%;
    background-color: #F5F5F5;
    padding-bottom: 32px;

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

    .body {
      box-sizing: border-box;
      padding: 32px;

      .card {
        height: 208px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 32px;
        border-radius: 8px;
        background-color: #ffffff;
        margin-bottom: 32px;

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

        & > label {
          font-size: 32px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #333333;
          line-height: 44px;
        }

        b {
          display: inline-block;
          font-style: normal;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #FF4466;
          margin-right: 8px;
        }

        .tag {
          width: 96px;
          height: 44px;
          display: inline-block;
          border-radius: 8px;
          margin-right: 16px;
          font-size: 26px;
          font-weight: 400;
          line-height: 46px;
          text-align: center;
        }

        .info {
          font-size: 28px;
          color: #999999;
          line-height: 40px;

          & > text:first-child {
            margin-right: 32px;
          }
        }

        & > .has-pic {
          display: flex;
          justify-content: space-between;

          & > .left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            & > label {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }

          & > img {
            width: 192px;
            height: 144px;
            flex-shrink: 0;
            margin-left: 32px;
          }
        }
      }
    }

    .popup-wrap {
      height: 368px;
      background-color: #F7F7F7;

      .btn {
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: 500;
        color: #333333;
        background-color: #ffffff;
      }

      & > .u-row {
        height: 272px;
        box-sizing: border-box;
        padding: 0 46px;

        & > .colum {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          color: #666666;
        }
      }
    }
  }
</style>