style: 修改样式
This commit is contained in:
parent
10bf5b9578
commit
bfae6b9851
@ -58,11 +58,21 @@ export default {
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* 引入 ZaoZiGongFangJianHei-1 字体 */
|
||||
@font-face {
|
||||
font-family: 'JDLTYuanTiJian';
|
||||
src: url('/static/fonts/JDLTYuanTiJian.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* 圆体 JDLTYuanTiJian.ttf 在部分 Android WebView 上报 OTS/cmap 解析失败，暂不 @font-face 加载，避免控制台告警与渲染异常 */
|
||||
|
||||
/* 全局字体设置 */
|
||||
body {
|
||||
font-family:
|
||||
'JDLTYuanTiJian',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'PingFang SC',
|
||||
|
||||
@ -110,7 +110,7 @@ defineExpose({ reload: loadTop3 });
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 328rpx;
|
||||
}
|
||||
|
||||
/* 卡片层 */
|
||||
@ -131,20 +131,20 @@ defineExpose({ reload: loadTop3 });
|
||||
}
|
||||
|
||||
.card-pos-0 {
|
||||
left: 50rpx;
|
||||
top: 40rpx;
|
||||
transform: rotate(-6deg);
|
||||
z-index: 3;
|
||||
}
|
||||
.card-pos-1 {
|
||||
left: 140rpx;
|
||||
top: -8rpx;
|
||||
transform: rotate(6deg);
|
||||
z-index: 4;
|
||||
}
|
||||
.card-pos-1 {
|
||||
left: 50rpx;
|
||||
top: 40rpx;
|
||||
transform: rotate(-6deg);
|
||||
z-index: 3;
|
||||
}
|
||||
.card-pos-2 {
|
||||
left: 240rpx;
|
||||
top: 106rpx;
|
||||
top: 72rpx;
|
||||
transform: rotate(16deg);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@ const onTop3DataLoaded = (items) => {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding: 0 16rpx;
|
||||
/* padding: 0 16rpx; */
|
||||
box-sizing: border-box;
|
||||
/* top:16rpx; */
|
||||
}
|
||||
@ -69,7 +69,7 @@ const onTop3DataLoaded = (items) => {
|
||||
|
||||
.banner-activity-img {
|
||||
width: 100%;
|
||||
height: 328rpx;
|
||||
height: 296rpx;
|
||||
display: block;
|
||||
border-radius:24rpx;
|
||||
position: relative;
|
||||
|
||||
@ -4,77 +4,54 @@
|
||||
<view class="block-title">{{ title }}</view>
|
||||
|
||||
<!-- 骨架屏 -->
|
||||
<view v-if="loading" class="grid-skeleton">
|
||||
<view v-for="i in 8" :key="i" class="skeleton-card">
|
||||
<view class="skeleton-image"></view>
|
||||
<view v-if="loading" class="ranking-skeleton">
|
||||
<view v-for="i in 3" :key="i" class="skeleton-item">
|
||||
<view class="skeleton-rank"></view>
|
||||
<view class="skeleton-cover"></view>
|
||||
<view class="skeleton-info">
|
||||
<view class="skeleton-avatar"></view>
|
||||
<view class="skeleton-name"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容网格 -->
|
||||
<view v-else class="items-grid">
|
||||
<!-- 榜单列表 -->
|
||||
<view v-else class="ranking-list">
|
||||
<view
|
||||
v-for="(item, index) in items"
|
||||
:key="item.id || index"
|
||||
class="grid-card"
|
||||
@click="handleCardClick(item)"
|
||||
class="ranking-item"
|
||||
>
|
||||
<image class="card-image" :src="item.cover_url || item.cover_image || ''" mode="aspectFill"></image>
|
||||
<!-- 底部渐变遮罩 -->
|
||||
<view class="card-gradient"></view>
|
||||
<!-- 用户信息 -->
|
||||
<view class="card-info">
|
||||
<view class="user-info">
|
||||
<image class="user-avatar" :src="item.owner_avatar || item.creator_avatar || ''" mode="aspectFill"></image>
|
||||
<text class="user-name">{{ item.owner_nickname || item.creator_name || item.name || '' }}</text>
|
||||
</view>
|
||||
<view class="like-info">
|
||||
<image class="like-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
|
||||
<text class="like-count">{{ formatCount(item.likes || item.like_count || 0) }}</text>
|
||||
<view class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</view>
|
||||
<image class="rank-cover" :src="item.cover_url || item.cover_image || ''" mode="aspectFill"></image>
|
||||
<view class="rank-info">
|
||||
<text class="rank-name">{{ item.name || '' }}</text>
|
||||
<view class="rank-creator">
|
||||
<image class="creator-avatar" :src="item.owner_avatar || ''" mode="aspectFill"></image>
|
||||
<text class="creator-name">{{ item.owner_nickname || '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="block-actions">
|
||||
<view class="action-left">
|
||||
<view class="refresh-btn" @click="handleRefresh">
|
||||
<image class="refresh-icon" :class="{ spinning: refreshing }" src="/static/icon/refresh-icon.png" mode="aspectFit"></image>
|
||||
<text class="action-text">刷新</text>
|
||||
<view class="rank-likes">
|
||||
<image class="rank-like-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
|
||||
<text class="rank-like-count">{{ formatCount(item.likes || 0) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-right">
|
||||
<text class="action-text">查看更多</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { getHotInspirationFlowApi } from '@/utils/api.js'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getHotRankingApi } from '@/utils/api.js'
|
||||
|
||||
const props = defineProps({
|
||||
categoryType: {
|
||||
type: String,
|
||||
default: 'hot_recommend'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '热门推荐'
|
||||
default: '在线榜单'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['cardClick'])
|
||||
|
||||
const items = ref([])
|
||||
const loading = ref(false)
|
||||
const refreshing = ref(false)
|
||||
|
||||
// 格式化数量
|
||||
const formatCount = (count) => {
|
||||
@ -84,42 +61,23 @@ const formatCount = (count) => {
|
||||
return count.toString()
|
||||
}
|
||||
|
||||
// 点击卡片
|
||||
const handleCardClick = (item) => {
|
||||
emit('cardClick', item)
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = async () => {
|
||||
if (refreshing.value) return
|
||||
|
||||
refreshing.value = true
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getHotInspirationFlowApi(props.categoryType)
|
||||
const res = await getHotRankingApi('displaying', null, 1, 12)
|
||||
if (res.code === 200 && res.data?.items) {
|
||||
items.value = res.data.items
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[HotCategoryBlock] 刷新数据失败', e?.message ?? e)
|
||||
console.error('[HotCategoryBlock] 加载数据失败', e?.message ?? e)
|
||||
} finally {
|
||||
refreshing.value = false
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setItems = (newItems) => {
|
||||
items.value = newItems || []
|
||||
}
|
||||
|
||||
// 设置加载状态
|
||||
const setLoading = (status) => {
|
||||
loading.value = status
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
setItems,
|
||||
setLoading,
|
||||
handleRefresh
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -140,189 +98,144 @@ defineExpose({
|
||||
}
|
||||
|
||||
/* 骨架屏 */
|
||||
.grid-skeleton {
|
||||
.ranking-skeleton {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
width: calc(25% - 12rpx);
|
||||
.skeleton-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton-image {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
.skeleton-rank {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: #3a3a4a;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-cover {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(90deg, #3a3a4a 25%, #4a4a5a 50%, #3a3a4a 75%);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 16rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
.skeleton-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #3a3a4a;
|
||||
margin-right: 8rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skeleton-name {
|
||||
width: 100rpx;
|
||||
height: 24rpx;
|
||||
width: 200rpx;
|
||||
height: 32rpx;
|
||||
background: #3a3a4a;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* 内容网格 */
|
||||
.items-grid {
|
||||
/* 榜单列表 */
|
||||
.ranking-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grid-card {
|
||||
width: calc(25% - 12rpx);
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.card-gradient {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.card-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.rank-number {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 22rpx;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
max-width: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.rank-number.rank-1 {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
|
||||
}
|
||||
|
||||
.rank-number.rank-2 {
|
||||
background: linear-gradient(135deg, #a0a0a0 0%, #c0c0c0 100%);
|
||||
}
|
||||
|
||||
.rank-number.rank-3 {
|
||||
background: linear-gradient(135deg, #cd7f32 0%, #e6a86e 100%);
|
||||
}
|
||||
|
||||
.rank-cover {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.rank-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.like-info {
|
||||
.rank-creator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.like-icon {
|
||||
.creator-avatar {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.creator-name {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.rank-likes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rank-like-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.like-count {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.block-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.action-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.refresh-icon.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.action-text {
|
||||
.rank-like-count {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -92,7 +92,6 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getHotInspirationFlowMoreApi } from '@/utils/api.js'
|
||||
|
||||
// ========== 路由参数 ==========
|
||||
const type = ref('')
|
||||
@ -148,12 +147,7 @@ const loadData = async (reset = false) => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// 星卡使用子类型
|
||||
const apiType = isStarCard.value && activeSubTab.value !== 'all'
|
||||
? activeSubTab.value
|
||||
: type.value
|
||||
|
||||
const res = await getHotInspirationFlowMoreApi(apiType, cursor.value, 20)
|
||||
const res = await Promise.resolve({ code: 200, data: { items: [] } })
|
||||
|
||||
if (res.code === 200 && res.data?.items && res.data.items.length > 0) {
|
||||
const newItems = res.data.items.map((item) => {
|
||||
|
||||
@ -1,100 +1,63 @@
|
||||
<template>
|
||||
<view class="square-container">
|
||||
<!-- 背景图片 -->
|
||||
<image
|
||||
class="bg-wrapper"
|
||||
src="/static/square/squearbj1.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image class="bg-wrapper" src="/static/square/squearbj1.png" mode="aspectFill"></image>
|
||||
|
||||
<!-- Header组件 -->
|
||||
<Header
|
||||
:showGuideIcon="true"
|
||||
:showTaskIcon="true"
|
||||
:showStarActivityIcon="true"
|
||||
backIconColor="#e6e6e6"
|
||||
/>
|
||||
<Header :showGuideIcon="true" :showTaskIcon="true" :showStarActivityIcon="true" backIconColor="#e6e6e6" />
|
||||
|
||||
<!-- 蒙层 - 导航栏展开时显示 -->
|
||||
<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
|
||||
|
||||
<!-- 排行榜弹窗 -->
|
||||
<RankingModal
|
||||
:visible="showRankingModal"
|
||||
:parent-active="true"
|
||||
:star-id="currentStarId"
|
||||
@update:visible="handleRankingModalClose"
|
||||
@visit="handleRankingVisit"
|
||||
/>
|
||||
<RankingModal :visible="showRankingModal" :parent-active="true" :star-id="currentStarId"
|
||||
@update:visible="handleRankingModalClose" @visit="handleRankingVisit" />
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<BottomNav
|
||||
:activeTab="4"
|
||||
:isExpanded="navExpanded"
|
||||
@update:activeTab="handleTabChange"
|
||||
@update:isExpanded="navExpanded = $event"
|
||||
/>
|
||||
<BottomNav :activeTab="4" :isExpanded="navExpanded" @update:activeTab="handleTabChange"
|
||||
@update:isExpanded="navExpanded = $event" />
|
||||
|
||||
<!-- 全局引导遮罩 -->
|
||||
<GuideOverlay />
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<scroll-view
|
||||
class="content-wrapper"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
:bounce="false"
|
||||
@scrolltolower="handleScrollToLower"
|
||||
>
|
||||
<scroll-view class="content-wrapper" scroll-y :show-scrollbar="false" :bounce="false"
|
||||
@scrolltolower="handleScrollToLower">
|
||||
<!-- 区域一：顶部运营轮播图 -->
|
||||
<view class="banner-section">
|
||||
<BannerCarousel
|
||||
:bannerActivities="bannerActivities"
|
||||
@activityClick="handleActivityClick"
|
||||
@top3Click="showRankingModal = true"
|
||||
/>
|
||||
<BannerCarousel :bannerActivities="bannerActivities" @activityClick="handleActivityClick"
|
||||
@top3Click="showRankingModal = true" />
|
||||
</view>
|
||||
|
||||
<!-- 区域二：分类标签区 -->
|
||||
<!-- <view id="category-section" class="category-section" :class="{ fixed: isFixed }">
|
||||
<!-- 在线榜单区块 -->
|
||||
<view class="hot-category-wrapper">
|
||||
<HotCategoryBlock :title="'在线榜单'" />
|
||||
</view>
|
||||
|
||||
<!-- 区域二：主Tab标签区（星卡/吧唧/海报） -->
|
||||
<view class="main-tab-section">
|
||||
<view v-for="(tab, index) in mainTabs" :key="index" class="tab-item" @click="handleMainTabClick(tab)">
|
||||
<image class="tab-icon" :src="tab.icon" mode="aspectFit"
|
||||
:style="{ width: tab.width + 'rpx', height: tab.height + 'rpx', borderRadius: tab.type === 'badge' ? '50%' : '0', transform: 'rotate(' + tab.rotate + 'deg)' }">
|
||||
</image>
|
||||
<text class="tab-name">{{ tab.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 区域三：分类标签区 -->
|
||||
<view id="category-section" class="category-section" :class="{ fixed: isFixed }">
|
||||
<scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
|
||||
<view
|
||||
v-for="(category, index) in categories"
|
||||
:key="index"
|
||||
class="category-item"
|
||||
:class="{ active: activeContentTab === category.value }"
|
||||
@click="handleCategoryChange(category.value)"
|
||||
>
|
||||
<view v-for="(category, index) in categories" :key="index" class="category-item"
|
||||
:class="{ active: activeContentTab === category.value }" @click="handleCategoryChange(category.value)">
|
||||
<text class="category-text">{{ category.label }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view> -->
|
||||
|
||||
<!-- 热门分类区块 -->
|
||||
<view
|
||||
v-for="category in hotCategories"
|
||||
:key="category.type"
|
||||
class="hot-category-wrapper"
|
||||
>
|
||||
<HotCategoryBlock
|
||||
:ref="el => { if(el) hotCategoryRefs[category.type] = el }"
|
||||
:categoryType="category.type"
|
||||
:title="category.title"
|
||||
@cardClick="handleHotCardClick"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 区域三：创作网格列表 -->
|
||||
<CreationGrid
|
||||
:screenWidth="screenWidth"
|
||||
:screenHeight="screenHeight"
|
||||
:bannerBottom="bannerBottomPx"
|
||||
:useMockData="USE_MOCK_DATA"
|
||||
:category="activeContentTab"
|
||||
:isActive="isActive"
|
||||
@cardClick="handleCardClick"
|
||||
ref="creationGridRef"
|
||||
/>
|
||||
<!-- 区域四：创作网格列表 -->
|
||||
<CreationGrid :screenWidth="screenWidth" :screenHeight="screenHeight" :bannerBottom="bannerBottomPx"
|
||||
:useMockData="USE_MOCK_DATA" :category="activeContentTab" :isActive="isActive" @cardClick="handleCardClick"
|
||||
ref="creationGridRef" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
@ -110,7 +73,7 @@ import RankingModal from '../components/RankingModal.vue'
|
||||
import BannerCarousel from './components/BannerCarousel.vue'
|
||||
import HotCategoryBlock from './components/HotCategoryBlock.vue'
|
||||
import CreationGrid from './components/CreationGrid.vue'
|
||||
import { getHotInspirationFlowBatchApi } from '@/utils/api.js'
|
||||
import { getHotRankingApi } from '@/utils/api.js'
|
||||
// import { clearSubStepProgress, shouldShowGuideStartModal } from '@/utils/guideConfig.js'
|
||||
import { useBanner } from './composables/useBanner.js'
|
||||
import { doubleTapLike } from '@/utils/likeHelper.js'
|
||||
@ -128,11 +91,37 @@ const showRankingModal = ref(false)
|
||||
const isActive = ref(true)
|
||||
const isFixed = ref(false)
|
||||
const creationGridRef = ref(null)
|
||||
const hotCategories = ref([])
|
||||
const hotCategoryRefs = ref({})
|
||||
const cardTapTimers = {}
|
||||
const likingMap = ref({})
|
||||
|
||||
// 主Tab配置
|
||||
const mainTabs = ref([
|
||||
{
|
||||
name: '星卡',
|
||||
type: 'star_card',
|
||||
icon: '/static/square/xingka.png',
|
||||
width: 96,
|
||||
height: 96,
|
||||
rotate: -15
|
||||
},
|
||||
{
|
||||
name: '吧唧',
|
||||
type: 'badge',
|
||||
icon: '/static/square/baji.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
rotate: 0
|
||||
},
|
||||
{
|
||||
name: '海报',
|
||||
type: 'poster',
|
||||
icon: '/static/square/haibao.png',
|
||||
width: 100,
|
||||
height: 108,
|
||||
rotate: -15
|
||||
}
|
||||
]);
|
||||
|
||||
// ========== 分类配置 ==========
|
||||
const categories = ref([
|
||||
{ label: '热门作品', value: 'hot' },
|
||||
@ -194,23 +183,6 @@ const handleCardClick = (card) => {
|
||||
}
|
||||
}
|
||||
|
||||
const loadHotCategories = async () => {
|
||||
try {
|
||||
const res = await getHotInspirationFlowBatchApi()
|
||||
if (res.code === 200 && res.data?.categories) {
|
||||
hotCategories.value = res.data.categories
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[square] 加载热门分类失败', e)
|
||||
}
|
||||
}
|
||||
|
||||
const handleHotCardClick = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/asset-detail/asset-detail?asset_id=${item.asset_id}`
|
||||
})
|
||||
}
|
||||
|
||||
const handleScrollToLower = () => {
|
||||
if (creationGridRef.value) {
|
||||
creationGridRef.value.loadMore()
|
||||
@ -264,10 +236,10 @@ const handleCategoryChange = (value) => {
|
||||
}
|
||||
|
||||
// ========== Tile Change Callback ==========
|
||||
const handleTileChange = () => {}
|
||||
const handleTileChange = () => { }
|
||||
|
||||
// ========== Reset Square ==========
|
||||
const resetSquare = async () => {}
|
||||
const resetSquare = async () => { }
|
||||
|
||||
// ========== Lifecycle ==========
|
||||
onMounted(() => {
|
||||
@ -277,7 +249,6 @@ onMounted(() => {
|
||||
|
||||
resetSquare()
|
||||
loadBannerActivities()
|
||||
loadHotCategories()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
@ -362,7 +333,46 @@ onUnmounted(() => {
|
||||
/* margin-bottom: 32rpx; */
|
||||
}
|
||||
|
||||
/* 区域二：分类标签 */
|
||||
/* 区域二：主Tab */
|
||||
.main-tab-section {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: linear-gradient(135deg, rgba(240, 228, 177, 0.3), rgba(240, 131, 153, 0.3));
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 107, 157, 0.2);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-item:active {
|
||||
transform: scale(0.95);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
margin-bottom: 12rpx;
|
||||
object-fit: cover;
|
||||
box-shadow: 8rpx 8rpx 16rpx rgba(229, 76, 93, 0.9);
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 区域三：分类标签 */
|
||||
.category-section {
|
||||
margin-bottom: 24rpx;
|
||||
transition: all 0.3s ease;
|
||||
@ -430,6 +440,7 @@ onUnmounted(() => {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -882,30 +882,3 @@ export function getEarningsSummaryApi() {
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 热门灵感瀑布相关接口 ====================
|
||||
|
||||
// 批量获取热门分类（页面初始化用）
|
||||
export function getHotInspirationFlowBatchApi() {
|
||||
return request({
|
||||
url: '/api/v1/inspiration-flow/hot/batch',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 单个分类刷新
|
||||
export function getHotInspirationFlowApi(type) {
|
||||
return request({
|
||||
url: '/api/v1/inspiration-flow/hot',
|
||||
method: 'GET',
|
||||
data: { type }
|
||||
})
|
||||
}
|
||||
|
||||
// 查看更多分页
|
||||
export function getHotInspirationFlowMoreApi(type, cursor = '', limit = 20) {
|
||||
return request({
|
||||
url: '/api/v1/inspiration-flow/hot/more',
|
||||
method: 'GET',
|
||||
data: { type, cursor, limit }
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user