113 lines
2.8 KiB
Vue
113 lines
2.8 KiB
Vue
<template>
|
||
<div v-if="hasBannerList">
|
||
<van-swipe class="h-[50px] mt-[8px]" loop vertical :autoplay="autoplay" @change="onSwiperChange">
|
||
<van-swipe-item v-for="item in bannerList" :key="item.entityName">
|
||
<div class="swiper-item bg-white flex flex-col items-start justify-between px-10" @click="clickItem(item)">
|
||
<span class="text-[#0CCD58] text-[12px] text-[600]">
|
||
{{ item.entityName }}
|
||
</span>
|
||
<div class="flex flex-row justify-between">
|
||
<span class="text-[#0CCD58] text-[10px] text-[500]">
|
||
发布时间：{{ item.effectiveStartTime }}
|
||
</span>
|
||
<span class="text-[#0CCD58] text-[10px] text-[500] underline-text">
|
||
详情
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</van-swipe-item>
|
||
</van-swipe>
|
||
</div>
|
||
|
||
<div v-else-if="tipsMessage">
|
||
<div class="noMessage">
|
||
<span class="noMessage-text text-[#0CCD58] text-[12px] text-[600]">
|
||
{{ tipsMessage }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, ref } from "vue";
|
||
import { getTimeNoticeList } from "@/api/home";
|
||
import { NOTICE_EVENT_LOGIN_SUCCESS } from "@/constants/constant";
|
||
import { emitter } from '@/utils/events'
|
||
|
||
const props = defineProps({
|
||
tipsMessage: {
|
||
type: String,
|
||
default: "随时吩咐，懂你的旅游搭子",
|
||
},
|
||
});
|
||
|
||
const autoplay = ref(3000);
|
||
|
||
const currentIndex = ref(0);
|
||
const bannerList = ref([]);
|
||
const hasBannerList = computed(() => Array.isArray(bannerList.value) && bannerList.value.length > 0);
|
||
|
||
const onSwiperChange = (e) => {
|
||
currentIndex.value = e.detail.current;
|
||
};
|
||
|
||
const getTimeNoticeListData = async () => {
|
||
const res = await getTimeNoticeList();
|
||
if (res && res.code === 0) {
|
||
bannerList.value = Array.isArray(res.data) ? res.data : [];
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
getTimeNoticeListData();
|
||
|
||
emitter.on(NOTICE_EVENT_LOGIN_SUCCESS, () => {
|
||
getTimeNoticeListData();
|
||
});
|
||
});
|
||
|
||
const clickItem = (item) => {
|
||
router.push({
|
||
path: '/pages/ChatMain/NoticeMessage/detail',
|
||
query: {
|
||
noticeData: encodeURIComponent(JSON.stringify(item))
|
||
}
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.swiper-item {
|
||
display: block;
|
||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 12px;
|
||
border: 1px solid #C7D2FE;
|
||
}
|
||
|
||
.underline-text {
|
||
text-decoration: underline;
|
||
text-decoration-color: #0CCD58;
|
||
}
|
||
|
||
.noMessage {
|
||
display: inline-flex;
|
||
margin-top: 8px;
|
||
padding: 4px 12px;
|
||
background: #EBEFFF;
|
||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 8px;
|
||
border: 1px solid #C7D2FE;
|
||
width: fit-content;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.noMessage-text {
|
||
line-height: 18px;
|
||
white-space: normal;
|
||
overflow-wrap: break-word;
|
||
word-break: break-all;
|
||
}
|
||
</style> |