|
|
@@ -0,0 +1,371 @@
|
|
|
+<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>
|
CzRger
