social-management-screen/src/views/screen/message/index.vue

<template>
  <div v-if="isInit" class="message-main animate__animated" ref="ref_message" v-loading="loadingPage" element-loading-background="rgba(0, 0, 0, 0.7)">
    <div class="ma-head">
      <div class="mah-block"/>
      <span class="mah-title">通知公告</span>
      <span class="mah-title-en">INFORM</span>
      <span class="mah-back __hover" @click="$emit('update:show', false)">返回 》</span>
    </div>
    <div class="ma-content" ref="ref_messagePage">
      <template v-for="(item, index) in queryResult.data">
        <div class="mac-item" :class="{active: currentId === item.id}" @click="onMessageInfo(item)">
          <div class="mac-item-index">{{index + 1}}</div>
          <div class="mac-item-title">{{item.title}}</div>
          <div class="mac-item-time">{{$util.YMD(item.createTime)}}</div>
        </div>
        <div class="mac-item-line"/>
      </template>
    </div>
    <div class="message-info" v-if="showInfo">
      <div class="mi-content" v-loading="loadingInfo">
        <div class="mic-title">{{messageInfo.title}}</div>
        <div class="mic-time">{{messageInfo.createTime}}</div>
        <div class="mic-line"/>
        <div class="mic-html" v-html="messageInfo.content"/>
      </div>
      <div class="mi-buttons">
        <div class="__hover download" @click="onMessageDownload" v-if="messageInfo.attachmentName" v-loading="loadingDownload">下载附件</div>
        <div class="__hover back" @click="onMessageBack">返回</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
    show: {
      required: true
    }
  },
  setup(props) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const ref_message = ref()
    const ref_messagePage = ref()
    const state = reactive({
      isInit: false,
      queryParams: {
        page: 1,
        pageSize: 20
      },
      queryResult: {
        data: [],
        total: 0,
        totalPage: 0
      },
      currentId: null,
      loadingPage: true,
      loadingInfo: false,
      loadingDownload: false,
      messageInfo: {},
      showInfo: false
    })
    watch(() => props.show, (n) => {
      state.isInit = true
      nextTick(() => {
        if (n) {
          ref_message.value.classList.remove('animate__fadeOutRight')
          ref_message.value.classList.add('animate__fadeInRight')
        } else {
          ref_message.value.classList.remove('animate__fadeInRight')
          ref_message.value.classList.add('animate__fadeOutRight')
        }
      })
    })
    watch(() => state.isInit, () => {
      nextTick(() => {
        ref_messagePage.value.onscroll = () => {
          const scrollHeight = ref_messagePage.value.scrollHeight;
          const scrollTop = ref_messagePage.value.scrollTop;
          const clientHeight = ref_messagePage.value.clientHeight;
          if (scrollHeight - clientHeight == scrollTop) {
            if (state.queryParams.page < state.queryResult.totalPage) {
              state.queryParams.page++
              initData()
            }
          }
        }
      })
    })
    const initData = () => {
      state.loadingPage = true
      that.$api.noticeMorePage(state.queryParams).then((res: { data: {
          totalPage: number; dataList: never[]; totalCount: number;
        }; }) => {
        state.queryResult.data = [...state.queryResult.data, ...res.data.dataList]
        state.queryResult.totalPage = res.data.totalPage
        state.loadingPage = false
      }).catch(() => {
        state.loadingPage = false
      })
    }
    const onMessageInfo = (val: { id: null; }) => {
      state.showInfo = true
      state.currentId = val.id
      state.loadingInfo = true
      that.$api.noticeMoreInfo(state.currentId).then((res: { code: number; data: {}; }) => {
        if (res.code === 0) {
          state.messageInfo = res.data
        }
        state.loadingInfo = false
      }).catch(() => {
        state.loadingInfo = false
      })
    }
    const onMessageBack = () => {
      state.showInfo = false
      state.currentId = null
      state.messageInfo = {}
    }
    const onMessageDownload = () => {
      state.loadingDownload = true
      that.$api.noticeMoreInfoDownload(state.messageInfo.id).then(res => {
        state.loadingDownload = false
      }).catch(() => {
        state.loadingDownload = false
      })
    }
    onMounted(() => {
      if (store.getters['app/isLogin']) {
        initData()
      }
    })
    return {
      ...toRefs(state),
      ref_message,
      ref_messagePage,
      onMessageInfo,
      onMessageBack,
      onMessageDownload
    }
  },
})
</script>

<style scoped lang="scss">
$messageWidth: 990px;
.message-main {
  z-index: 2;
  position: absolute;
  right: 0;
  width: $messageWidth;
  height: 100%;
  background: #31538C;
  box-sizing: border-box;
  padding-top: 30px;
  $mainPL: 26px;
  $mainPR: 22px;
  display: flex;
  flex-direction: column;
  .ma-head {
    margin: 0 $mainPR 0 $mainPL;
    display: flex;
    align-items: center;
    padding-bottom: 9px;
    border-bottom: 1px solid #0B3672;
    .mah-block {
      width: 5px;
      height: 25px;
      background: #82D6FF;
    }
    .mah-title {
      margin-left: 11px;
      font-size: 24px;
      font-family: FZLanTingHeiS-DB-GB;
      font-weight: 400;
      color: #32DCFB;
    }
    .mah-title-en {
      margin-left: 8px;
      font-size: 16px;
      font-family: FZLanTingHeiS-DB-GB;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.2);
    }
    .mah-back {
      margin-left: auto;
      font-size: 16px;
      font-family: FZLanTingHeiS-DB-GB;
      font-weight: 400;
      color: #32DCFB;
    }
  }
  .ma-content {
    flex: 1;
    overflow-y: auto;
    .mac-item {
      margin: 12px 0;
      padding: 0 $mainPR 0 $mainPL;
      height: 46px;
      display: flex;
      align-items: center;
      .mac-item-index {
        padding: 4px 6px;
        background: #0B3672;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: FZLanTingHeiS-DB-GB;
        font-weight: 400;
        color: #FFFFFF;
      }
      .mac-item-title {
        flex: 1;
        margin-left: 10px;
        margin-right: 40px;
        font-size: 20px;
        font-family: FZLanTingHeiS-DB-GB;
        font-weight: 400;
        color: #FFFFFF;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mac-item-time {
        margin-left: auto;
        font-size: 16px;
        font-family: FZLanTingHeiS-DB-GB;
        font-weight: 400;
        color: #C9C9C9;
      }
      &:nth-child(1) {
        .mac-item-index {
          background-color: #FF8363;
        }
      }
      &:nth-child(3) {
        .mac-item-index {
          background-color: #63B841;
        }
      }
      &:nth-child(5) {
        .mac-item-index {
          background-color: #4481FE;
        }
      }
      &.active {
        background-color: #5A75A3;
        position: relative;
        //&:before {
        //  position: absolute;
        //  content: '';
        //  left: 0;
        //  border-top: 10px solid transparent;
        //  border-bottom: 10px solid transparent;
        //  border-right: 10px solid #5A75A3;
        //  transform: translateX(-10px);
        //}
      }
      &:hover {
        cursor: pointer;
        background-color: #5A75A3;
      }
    }
    .mac-item-line {
      margin: 0 $mainPR 0 $mainPL;
      border-bottom: 1px dashed #C9C9C9;
    }
  }
}
.message-info {
  position: absolute;
  right: $messageWidth;
  height: calc(100% - 60px);
  width: 1373px;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 58px 0 22px;
  display: flex;
  flex-direction: column;
  .mi-content {
    width: 100%;
    height: calc(100% - 20px - 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    .mic-title {
      font-size: 38px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      width: 100%;
      text-align: center;
    }
    .mic-time {
      margin-top: 16px;
      font-size: 20px;
      font-family: SimSun;
      font-weight: 400;
      color: #666666;
    }
    .mic-line {
      margin-top: 16px;
      width: calc(100% - 120px);
      height: 1px;
      background: #DCDCDC;
    }
    .mic-html {
      flex: 1;
      margin-top: 28px;
      width: 100%;
      padding: 0 180px;
      overflow-y: auto;
      box-sizing: border-box;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 32px;
    }
  }
  .mi-buttons {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    >div {
      width: 150px;
      height: 56px;
      font-size: 20px;
      font-family: FZLanTingHeiS-DB-GB;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-radius: 3px;
    }
    .download {
      background: #4481FE;
      color: #FFFFFF;
      margin-right: 20px;
    }
    .back {
      background: rgba(68,129,254,0.2);
      border: 1px solid #4481FE;
      color: #4481FE;
    }
  }
}
</style>