59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<template>
|
||
<!-- 只渲染背景图，卡片由父组件 BannerCarousel 渲染在 swiper 外层 -->
|
||
<view class="banner-top3-bg" @tap="onBannerTap">
|
||
<image class="banner-bg" src="/static/square/paihangbang.png" mode="aspectFill" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { getHotRankingApi } from '@/utils/api.js';
|
||
|
||
const emit = defineEmits(['dataLoaded']);
|
||
|
||
const resolveOssUrl = async (fileName, type) => {
|
||
if (!fileName) return '';
|
||
// 直接使用后端返回的图片URL
|
||
return fileName;
|
||
};
|
||
|
||
const loadTop3 = async () => {
|
||
try {
|
||
const res = await getHotRankingApi('total', null, 1, 3);
|
||
if (res.code === 200 && res.data?.items) {
|
||
const items = res.data.items.slice(0, 3);
|
||
const resolved = items.map(item => {
|
||
return { ...item, cover_url: item.cover_url || '', avatar_url: item.avatar_url || '' };
|
||
});
|
||
emit('dataLoaded', resolved);
|
||
}
|
||
} catch (e) {
|
||
console.error('[BannerTop3] 加载失败', e?.message ?? e);
|
||
}
|
||
};
|
||
|
||
const onBannerTap = () => {
|
||
uni.navigateTo({ url: '/pages/rank/rank' });
|
||
};
|
||
|
||
onMounted(loadTop3);
|
||
defineExpose({ reload: loadTop3 });
|
||
</script>
|
||
|
||
<style scoped>
|
||
.banner-top3-bg {
|
||
width: 100%;
|
||
height: 360rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.banner-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|