100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<template>
|
||
|
||
<view >
|
||
<swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
|
||
:duration="duration" :indicator-dots="false">
|
||
<swiper-item v-for="item in bannerList" :key="item.entityName">
|
||
<view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10" @click="clickItem(item)">
|
||
<text class="font-size-12 font-600 color-B45309">
|
||
{{ item.entityName }}
|
||
</text>
|
||
<view class="flex flex-row flex-justify-between">
|
||
<text class="font-size-10 font-500 color-D97706">
|
||
发布时间：{{ item.effectiveStartTime }}
|
||
</text>
|
||
<text class="font-size-10 font-500 color-B45309 underline-text">
|
||
详情
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" duration="0.5" default-width="4px"
|
||
active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
|
||
active-color="rgba(255,255,255,1)" />
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref } from "vue";
|
||
import { getTimeNoticeList } from "@/request/api/MainPageDataApi";
|
||
|
||
const autoplay = ref(true);
|
||
const interval = ref(7000);
|
||
const duration = ref(500);
|
||
|
||
const currentIndex = ref(0);
|
||
// const bannerList = ref([]);
|
||
const bannerList = ref([
|
||
{
|
||
entityName: "小七欢迎你～",
|
||
effectiveStartTime: "2025年7月12日 09:30",
|
||
},
|
||
{
|
||
entityName: "小8欢迎你～",
|
||
effectiveStartTime: "2025年7月13日 09:30",
|
||
},
|
||
{
|
||
entityName: "小9欢迎你～",
|
||
effectiveStartTime: "2025年7月15日 09:30",
|
||
},
|
||
]);
|
||
|
||
|
||
const onSwiperChange = (e) => {
|
||
currentIndex.value = e.detail.current;
|
||
};
|
||
|
||
const getTimeNoticeListData = async () => {
|
||
const res = await getTimeNoticeList();
|
||
if (res && res.code === 0) {
|
||
bannerList.value = res.data;
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
getTimeNoticeListData();
|
||
});
|
||
|
||
const clickItem = (item) => {
|
||
uni.navigateTo({
|
||
url: `/pages/ChatMain/NoticeMessage/detail?noticeData=${encodeURIComponent(JSON.stringify(item))}`
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.swiper {
|
||
height: 50px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 46px;
|
||
background: #fffbeb;
|
||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 12px;
|
||
border: 2px solid #fef3c7;
|
||
}
|
||
|
||
.underline-text {
|
||
text-decoration: underline;
|
||
text-decoration-color: #b45309;
|
||
}
|
||
|
||
</style> |