bandhuBuy-admin/src/app/notice/index.vue

<template>
  <div class="sa-notice" @click="showNotice">
    <div class="sa-float-icon-wrap">
      <el-badge is-dot :hidden="!noticeUnreadNum">
        <sa-svg class="sa-float-icon" name="sa-Notification" size="24" />
      </el-badge>
    </div>

    <el-drawer
      v-model="isShowNotice"
      direction="rtl"
      class="chat-drawer"
      modal-class="chat-drawer-overlay"
      :show-close="false"
    >
      <template #header>
        <ul v-if="noticeTypeList.length" class="chat-status-wrap sa-flex sa-col-center">
          <li class="bg" :style="bgStyle"></li>
          <!-- {{noticeTypeList}} -->
          <li
            v-for="item in noticeTypeList"
            :key="item"
            class="chat-status"
            :class="{ 'is-active': item.value == noticeTypeList[0].value }"
            @click="onNoticeMenu(item.value)"
          >
            <el-badge is-dot :hidden="!item.unread_num">
              {{ item.label }}
            </el-badge>
          </li>
          <!-- <li
              class="chat-status"
              :class="{ 'is-active': sessionType == 'ing' }"
              @click="changeSessionType('ing')"
            >
              会话中
            </li>
            <el-badge is-dot :hidden="!hasWaiting">
              <li
                class="chat-status"
                :class="{ 'is-active': sessionType == 'waiting' }"
                @click="changeSessionType('waiting')"
              >
                排队中
              </li>
            </el-badge>
            <li
              class="chat-status"
              :class="{ 'is-active': sessionType == 'history' }"
              @click="changeSessionType('history')"
            >
              历史记录
            </li> -->
        </ul>
        <el-icon class="close" @click="isShowNotice = false">
          <CircleCloseFilled />
        </el-icon>
        <!-- <el-menu
          v-if="noticeTypeList.length"
          class="el-menu-demo sa-flex sa-row-around sa-col-center"
          mode="horizontal"
          :default-active="noticeTypeList[0].value"
          @select="onNoticeMenu"
        >
          <template v-for="(item, index) in noticeTypeList" :key="index">
            <el-menu-item :index="item.value">
              <div class="sa-flex sa-col-center sa-row-center">
                <span>{{ item.label }}</span>
                <span class="sa-m-l-4" v-if="item.unread_num"
                  >({{ item.unread_num }})</span
                >
              </div>
            </el-menu-item>
          </template>
        </el-menu> -->
      </template>
      <div class="chat-content sa-flex sa-flex-1">
        <el-scrollbar id="noticeScroll" class="notice-scroll" height="100%">
          <div
            class="notice-list sa-flex sa-row-around"
            :class="isEmpty(item.read_time) ? '' : 'notice-list-read'"
            v-for="(item, index) in noticeList"
            :key="item.id"
            @click="readNotice(item, index)"
          >
            <div class="notice-list-content">
              <div class="wrapper">
                <input :id="`exp-${index}`" class="exp" type="checkbox" />
                <div class="text">
                  <label class="btn" :for="`exp-${index}`"></label>
                  【{{ item.data.message_title }}】{{ item.data.message_text }}
                </div>
              </div>
              <span class="notice-time">{{ item.create_time }}</span>
            </div>
          </div>

          <!-- 置空页 -->
          <el-empty v-show="!noticeList.length">
            <template #image>
              <sa-svg className="empty-svg" name="sa-neirongweikong" size="150"></sa-svg>
            </template>
            <template #description>
              <div class="empty-description"> 您的工作效率很高哦， 现在还没有新的待办消息！ </div>
            </template>
          </el-empty>
          <!-- 加载状态 -->
          <button
            class="loadmore-btn sa-reset-button"
            v-show="noticeList.length"
            @click="onLoadMore"
          >
            {{ loadingMap[noticeListparmas.loadStatus].title
            }}<i
              class="loadmore-icon sa-m-l-6"
              :class="loadingMap[noticeListparmas.loadStatus].icon"
            ></i>
          </button>
        </el-scrollbar>
      </div>
      <div class="chat-footer">
        <div class="empty" @click="clearNotice()">清空 已读消息</div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  /**
   * Botice 站内信
   *
   */
  import { reactive, ref, defineComponent, computed } from 'vue';
  import { isEmpty } from 'lodash';

  export default defineComponent({
    name: 'SaNotice',
    components: {},
    setup() {
      // 默认数据
      const noticeTypeList = ref([
        { label: '系统消息', value: 'system', unread_num: 3 },
        { label: '订单消息', value: 'order', unread_num: 1 },
        // { label: '营销消息', value: 'marketing', unread_num: 0 },
      ]);

      const noticeList = ref([
        {
          id: 1,
          data: {
            message_title: '系统通知',
            message_text: '欢迎使用商城管理系统，您有新的订单需要处理。',
          },
          create_time: '2024-01-15 10:30:00',
          read_time: null,
        },
        {
          id: 2,
          data: {
            message_title: '订单提醒',
            message_text: '您有一个新的订单等待确认，订单号：#202401150001',
          },
          create_time: '2024-01-15 09:15:00',
          read_time: '2024-01-15 10:00:00',
        },
        {
          id: 3,
          data: {
            message_title: '库存警告',
            message_text: '商品"BOLON经典太阳镜"库存不足，当前库存：5件',
          },
          create_time: '2024-01-15 08:45:00',
          read_time: null,
        },
      ]);

      const noticeUnreadNum = computed(() => {
        return noticeList.value.filter((item) => !item.read_time).length;
      });

      // loading
      const noticeLoading = ref(false);
      // 查看更多
      const onLoadMore = () => {
        if (noticeListparmas.current_page < noticeListparmas.last_page) {
          noticeListparmas.current_page += 1;
          // getNoticeList(); // 暂时注释掉API调用
        }
      };
      const isShowNotice = ref(false);

      // 获取站内信列表
      const noticeListparmas = reactive({
        current_page: 1,
        last_page: 1,
        loadStatus: 'nomore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
      });

      // 暂时注释掉API调用
      // const getNoticeList = async () => {
      //   noticeLoading.value = true;
      //   noticeListparmas.loadStatus = 'loading';
      //   // API调用逻辑
      //   noticeLoading.value = false;
      // };

      // 获取站内信分类
      const curNoticeType = ref('system');

      // 暂时注释掉API调用
      // const getNoticeType = async () => {
      //   // API调用逻辑
      // };

      // 显示站内信
      const showNotice = () => {
        isShowNotice.value = true;
        noticeListparmas.current_page = 1;
        // 暂时不调用API
        // getNoticeList();
      };

      const bgStyle = computed(() => {
        let index = noticeTypeList.value.findIndex((item) => item.value == curNoticeType.value);
        return {
          left: 2 + index * 118 + 'px',
        };
      });

      // 切换站内信
      const onNoticeMenu = (e) => {
        curNoticeType.value = e;
        noticeListparmas.current_page = 1;
        // 暂时不调用API
        // getNoticeList();
      };

      function desc(item) {
        let str = `【${item.data.message_title}】${item.data.message_text}`;
        if (str.length > 42) {
          item.show = true;
        }
        return item.hidden ? str : str.substring(0, 42) + '...';
      }

      async function readNotice(item) {
        // 模拟标记为已读
        item.read_time = new Date().toLocaleString();
        // 暂时注释掉API调用
        // const { data } = await noticeApi.read(item.id);
      }

      const clearNotice = async () => {
        // 清空已读消息
        noticeList.value = noticeList.value.filter((item) => !item.read_time);
        noticeListparmas.current_page = 1;
        // 暂时注释掉API调用
        // const { data } = await noticeApi.clear();
      };

      // 暂时注释掉初始化API调用
      // onMounted(() => {
      //   getNoticeType();
      // });

      return {
        isEmpty,
        noticeTypeList,
        noticeUnreadNum,
        noticeList,
        onLoadMore,
        noticeLoading,
        curNoticeType,
        onNoticeMenu,
        noticeListparmas,
        loadingMap: {
          loadmore: {
            title: '查看更多',
            icon: 'el-icon-d-arrow-left',
          },
          nomore: {
            title: '没有更多了',
            icon: '',
          },
          loading: {
            title: '加载中... ',
            icon: 'el-icon-loading',
          },
        },
        showNotice,
        isShowNotice,
        bgStyle,
        desc,
        readNotice,
        clearNotice,
      };
    },
  });
</script>
<style>
  .notice-popper {
    padding: 0 !important;
  }
</style>
<style lang="scss" scoped>
  .sa-notice {
    :deep() {
      .el-badge__content.is-dot {
        height: 6px;
        width: 6px;
      }
    }
  }
  .empty-svg {
    color: var(--sa-subfont);
  }
  .empty-description {
    width: 200px;
    font-size: 16px;
    color: var(--sa-subfont);
  }
  // 按钮
  .tools-btn {
    border: none;
    height: 32px;
    min-height: 32px;
    width: 32px;
    padding: 0;
    border-radius: 50%;
    &:active {
      background-color: var(--t-btn-hover);
      .tool-icon {
        font-size: 20px;
        color: var(--sa-background-assist);
      }
    }
    &:hover {
      background-color: var(--t-btn-hover);
      .tool-icon {
        font-size: 20px;
        color: var(--sa-background-assist);
      }
    }
    &:focus {
      background-color: var(--t-btn-hover);
      .tool-icon {
        font-size: 20px;
        color: var(--sa-background-assist);
      }
    }
    .tool-icon {
      font-size: 20px;
      color: var(--sa-font);
    }
    :deep(.el-badge__content) {
      background-color: #ed5b56 !important;
    }
  }
  // 站内信
  .notice-wrap {
    .notice-header {
      height: 60px;
      border-bottom: 1px solid var(--sa-border);
    }
    .el-menu {
      height: 100%;
    }
    .el-menu--horizontal {
      border-bottom: none;
    }
    .el-menu:not(.el-menu--collapse) .el-menu-item,
    .el-menu:not(.el-menu--collapse) .el-sub-menu__title {
      height: 100%;
      border-radius: 0;
      margin-bottom: 0;
    }

    // .notice-list {
    //   .notice-list-content {
    //     width: 250px;
    //     border-bottom: 1px solid var(--sa-space);
    //     .notice-text {
    //       font-family: PingFang SC;
    //       font-size: 14px;
    //       color: var(--sa-font);
    //       line-height: 20px;
    //     }
    //     .notice-time {
    //       font-family: PingFang SC;
    //       font-size: 12px;
    //       color: var(--sa-subfont);
    //     }
    //   }
    // }
  }
  // 加载更多
  .loadmore-btn {
    width: 100%;
    height: 40px;
    font-size: 12px;
    color: var(--sa-subfont);
    .loadmore-icon {
      transform: rotate(-90deg);
    }
  }

  .notice-scroll {
    width: 100%;
    //   height: 600px;
  }
  @media all and (min-width: 0) and (max-width: 500px) {
    // .notice-scroll {
    //   height: 520px;
    // }
  }

  :deep() {
    .chat-drawer-overlay {
      background-color: transparent;
    }
    .chat-drawer {
      width: 360px !important;
      height: unset;
      border-radius: 8px;
      top: 48px;
      bottom: 30px;
      @media only screen and (max-width: 768px) {
        width: 100% !important;
        border-radius: 0;
        top: 0;
        bottom: 0;
      }
      .el-drawer__header {
        height: 56px;
        padding: 0 12px;
        background: var(--t-btn-hover);
        color: var(--sa-background-assist);
        margin-bottom: 0;
        justify-content: center;
        position: relative;
        .close {
          position: absolute;
          top: 20px;
          right: 12px;
          font-size: 16px;
          &:hover {
            color: var(--t-color-primary);
          }
          @media only screen and (max-width: 768px) {
            top: 18px;
            font-size: 20px;
          }
        }
      }
      .el-drawer__body {
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .chat-content {
          flex: 1;
          height: calc(100% - 40px);

          .notice-list {
            .notice-list-content {
              // width: 250px;
              width: 100%;
              padding: 16px 16px;
              border-bottom: 1px solid var(--sa-space);

              &:hover {
                background: var(--t-bg-hover);

                .text::after {
                  content: '';
                  width: 999vw;
                  height: 999vw;
                  position: absolute;
                  box-shadow: inset calc(100px - 999vw) calc(21px - 999vw) 0 0 var(--t-bg-hover);
                  margin-left: -100px;
                }
              }
              .notice-text {
                font-family: PingFang SC;
                font-size: 14px;
                color: var(--sa-font);
                line-height: 20px;
                position: relative;
                // padding-right: 26px;
                .notice-hidden {
                  // position: absolute;
                  // top: 20px;
                  // right: 0;
                  color: var(--t-color-primary);
                  font-size: 12px;
                }
              }
              .notice-time {
                font-family: PingFang SC;
                font-size: 12px;
                color: var(--sa-subfont);
              }

              .wrapper {
                display: flex;
                width: inherit;
                overflow: hidden;
              }
              .text {
                font-size: 14px;
                color: var(--sa-font);
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: justify;
                position: relative;
                line-height: 1.5;
                max-height: 3em;
                transition: 0.3s max-height;
                white-space: normal;
                word-break: break-all;
              }
              .text::before {
                content: '';
                height: calc(100% - 21px);
                float: right;
              }
              .text::after {
                content: '';
                width: 999vw;
                height: 999vw;
                position: absolute;
                box-shadow: inset calc(100px - 999vw) calc(21px - 999vw) 0 0 #fff;
                margin-left: -100px;
              }
              .btn {
                position: relative;
                float: right;
                clear: both;
                margin-left: 20px;
                font-size: 12px;
                padding: 0 8px;
                // background: #3f51b5;
                line-height: 1.5;
                border-radius: 4px;
                color: var(--t-color-primary);
                cursor: pointer;
                /* margin-top: -30px; */
              }
              .btn::after {
                content: '展开';
              }
              .exp {
                display: none;
              }
              .exp:checked + .text {
                max-height: none;
              }
              .exp:checked + .text::after {
                visibility: hidden;
              }
              .exp:checked + .text .btn::before {
                visibility: hidden;
              }
              .exp:checked + .text .btn::after {
                content: '收起';
              }
              .btn::before {
                content: '...';
                position: absolute;
                left: -5px;
                color: var(--sa-font);
                transform: translateX(-100%);
              }
            }

            &.notice-list-read {
              .text,
              .notice-time {
                color: var(--sa-place);
              }
              .btn::before {
                color: var(--sa-place);
              }
            }
          }
        }
        // 输入框
        .chat-footer {
          border-top: 1px solid var(--sa-space);
          background-color: var(--sa-table-striped);
          height: 40px;
          display: flex;
          align-items: center;
          flex-shrink: 0;
          .empty,
          .more {
            flex: 1;
            text-align: center;
            font-size: 12px;
            font-weight: 400;
            color: var(--sa-font);
          }
          .line {
            width: 1px;
            height: 20px;
            background: var(--sa-border);
          }
        }
      }
    }
  }
  .chat-status-wrap {
    width: fit-content !important;
    flex: unset !important;
    height: 36px;
    padding: 0 2px;
    border-radius: 8px;
    background: var(--t-bg-focus);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .bg {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 118px;
      height: 32px;
      background: var(--sa-background-assist);
      border-radius: 6px;
      transition: all 0.2s;
    }
    .chat-status {
      min-width: 118px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      padding: 0 7px;
      font-size: 14px;
      color: var(--t-color-primary);
      cursor: pointer;
    }
  }
</style>