123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647 |
- <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>
|