integrated_traffic_vue/src/views/index/components/announcement.vue

105 lines
2.7 KiB
Vue

<template>
<el-tabs v-model="active">
<el-tab-pane label="平台公告" name="first" lazy>
<seamless-scroll
:list="platformAnnouncementList"
hover
class="scroll"
:step="0.5"
:single-wait-time="1000"
:single-height="24"
:model-value="!data.viewDialog.visible && active === 'first'"
>
<div
v-for="(item, index) in platformAnnouncementList"
:key="index"
class="line-1 item"
@click="fnPlatformAnnouncementView(item.NOTICE_ID)"
>
{{ item.SYNOPSIS }}
</div>
</seamless-scroll>
</el-tab-pane>
<el-tab-pane label="企业公告" name="second" lazy>
<seamless-scroll
:list="corporateAnnouncementList"
hover
class="scroll"
:step="0.5"
:single-wait-time="1000"
:single-height="24"
:model-value="!data.viewDialog.visible && active === 'second'"
>
<div
v-for="(item, index) in corporateAnnouncementList"
:key="index"
class="line-1 item"
@click="fnCorporateAnnouncementView(item.NOTICECORP_ID)"
>
{{ item.SYNOPSIS }}
</div>
</seamless-scroll>
</el-tab-pane>
</el-tabs>
<announcement-view
v-model:visible="data.viewDialog.visible"
:info="data.viewDialog.info"
/>
</template>
<script setup>
import { reactive, ref } from "vue";
import {
getCorporateAnnouncement,
getCorporateAnnouncementView,
getPlatformAnnouncement,
getPlatformAnnouncementView,
} from "@/request/index.js";
import useListData from "@/assets/js/useListData.js";
import AnnouncementView from "./announcement_view.vue";
import { Vue3SeamlessScroll as SeamlessScroll } from "vue3-seamless-scroll";
const active = ref("first");
const { list: platformAnnouncementList } = useListData(
getPlatformAnnouncement,
{ otherParams: { STATUS: 1 } }
);
const { list: corporateAnnouncementList } = useListData(
getCorporateAnnouncement,
{ otherParams: { STATUS: 1 } }
);
const data = reactive({
viewDialog: {
visible: false,
info: {},
},
});
const fnPlatformAnnouncementView = async (NOTICE_ID) => {
const resData = await getPlatformAnnouncementView({ NOTICE_ID });
data.viewDialog.visible = true;
data.viewDialog.info = resData.pd;
};
const fnCorporateAnnouncementView = async (NOTICECORP_ID) => {
const resData = await getCorporateAnnouncementView({ NOTICECORP_ID });
data.viewDialog.visible = true;
data.viewDialog.info = resData.pd;
};
</script>
<style scoped lang="scss">
.scroll {
height: 120px;
overflow: hidden;
.item {
padding: 4px 0;
font-size: 14px;
cursor: pointer;
&:hover {
color: #409eff;
}
}
}
</style>