MoeNovaClient/pages/crowdFunding/crowdFunding.vue

	<template>
		<view class="crowd-funding-page">
			<!-- 头部导航 -->
			<page-navbar>
				<template #navLeft>
					<view class="nav-left" @click="goBack">
						<image src="/static/icon/arrow-left.png" class="back-icon"></image>
					</view>
				</template>
				<template #navCenter>
					<view class="nav-title">众筹</view>
				</template>
				<template #navRight>
					<view class="nav-right">
						<image src="/static/icon/star.png" class="action-icon"></image>
						<image src="/static/icon/avatar-placeholder.png" class="avatar-icon"></image>
					</view>
				</template>
			</page-navbar>

			<!-- 搜索框 -->
			<view class="search-bar-container">
				<view class="search-input-wrapper">
					<image src="/static/icon/search-gray.png" class="search-icon"></image>
					<input type="text" placeholder="搜索你感兴趣的内容" class="search-input" />
				</view>
			</view>

			<!-- Banner -->
			<view class="banner-section">
				<swiper class="banner-swiper" :autoplay="true" :circular="true" :interval="5000" :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.image" class="banner-image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- Tab导航 -->
			<view class="tabs-section">
				<scroll-view scroll-x class="tabs-scroll-view" :show-scrollbar="false" :scroll-into-view="'tab-' +( currentTab -1)" scroll-with-animation>
					<view class="tabs-wrapper">
						<view v-for="(tab, index) in tabs" :key="index" :id="'tab-' + index" :class="['tab-item', currentTab === index ? 'active' : '']" @click="switchTab(index)">
							<image v-if="tab.icon" :src="tab.icon" class="tab-icon"></image>
							{{ tab.name }}
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 内容区域 -->
			<scroll-view scroll-y class="content-scroll">
				<view class="items-grid">
					<CrowdFundingItem
						v-for="(item, index) in itemList"
						:key="index"
						:item="item"
						@click="goToDetail"
					/>
				</view>
			</scroll-view>

		</view>
	</template>

	<script>
	import pageNavbar from '@/components/page-navbar/page-navbar.vue'; 
	import CrowdFundingItem from './components/CrowdFundingItem/CrowdFundingItem.vue';

	export default {
		components: {
			pageNavbar,
			CrowdFundingItem
		},
		data() {
			return {
				bannerList: [
					{ image: '/static/placeholder/banner-crowdfunding.png' } // Placeholder banner
				],
				tabs: [
					{ name: '全部', icon: '' },
					{ name: '创意', icon: '/static/icon/creative-star.png' }, // Placeholder icon
					{ name: '潮玩', icon: '/static/icon/toy-bear.png' }, // Placeholder icon
					{ name: '出版', icon: '' },
					{ name: '桌游', icon: '' },
					{ name: '桌游', icon: '' },
					{ name: '桌游', icon: '' },
					{ name: '桌游', icon: '' },
					{ name: '桌游', icon: '' },
					{ name: '桌游', icon: '' },
					{ name: '卡片', icon: '' }
				],
				currentTab: 0, // 默认选中"创意"
				itemList: [
					{
						id: 1,
						imageUrl: '/static/placeholder/item1.png',
						title: '糖指数100%12分BJD可动人偶盲盒',
						raisedAmount: '769.8',
						supporters: 3788
					},
					{
						id: 2,
						imageUrl: '/static/placeholder/item2.png',
						title: '糖指数100%12分BJD可动人偶盲盒',
						raisedAmount: '769.8',
						supporters: 3788
					},
					{
						id: 3,
						imageUrl: '/static/placeholder/item3.png',
						title: '糖指数100%12分BJD可动人偶盲盒',
						raisedAmount: '769.8',
						supporters: 3788
					},
					{
						id: 4,
						imageUrl: '/static/placeholder/item4.png',
						title: '糖指数100%12分BJD可动人偶盲盒',
						raisedAmount: '769.8',
						supporters: 3788
					}
				]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			switchTab(index) {
				this.currentTab = index;
				// 在这里可以根据选择的tab加载不同的数据
				console.log('Switched to tab:', this.tabs[index].name);
			},
			goToDetail(id) {
				console.log('Go to detail page for item ID:', id);
				// uni.navigateTo({ url: '/pages/crowdFunding/detail?id=' + id });
			}
		}
	};
	</script>

	<style lang="scss" scoped>
	.crowd-funding-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #f6f7fb;
	}

	.page-navbar {
		background: #fff;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
		.nav-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #222;
			letter-spacing: 2rpx;
		}
		.nav-right {
			display: flex;
			align-items: center;
			.action-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
				background: #fffbe6;
				border-radius: 50%;
				padding: 8rpx;
			}
			.avatar-icon {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
			}
		}
	}

	.search-bar-container {
		margin: 18rpx 24rpx 0 24rpx;
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
		padding: 0 24rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		.search-input-wrapper {
			display: flex;
			align-items: center;
			.search-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
			.search-input {
				font-size: 28rpx;
				color: #999;
				line-height: 64rpx;
			}
		}
	}

	.banner-section {
		margin: 16rpx 24rpx 0 24rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
		background: #fff;
		.banner-swiper {
			height: 180rpx;
			.banner-image {
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
			}
		}
	}

	.tabs-section {
		background: #fff;
		border-bottom: 1rpx solid #eee;
		margin-top: 12rpx;
		.tabs-scroll-view {
			width: 100%;
			.tabs-wrapper {
				display: flex;
				align-items: center;
				padding-left: 12rpx;
			}
		}
		.tab-item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #666;
			padding: 8rpx 28rpx;
			margin-right: 8rpx;
			border-radius: 32rpx;
			font-weight: 500;
			background: transparent;
			transition: background 0.2s, color 0.2s;
			.tab-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			&.active {
				font-weight: bold;
				color: #fff;
				background: #222;
				.tab-icon {
					filter: brightness(1.5) saturate(2);
				}
			}
		}
	}

	.content-scroll {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 24rpx;
	}

	.items-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
		padding: 16rpx 24rpx 0 24rpx;
		.grid-item {
			background: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			margin-bottom: 8rpx;
			.item-image {
				width: 100%;
				height: 220rpx;
				display: block;
				object-fit: cover;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
			.item-title {
				font-size: 26rpx;
				color: #222;
				padding: 12rpx 12rpx 0 12rpx;
				font-weight: 500;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.item-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 12rpx 12rpx 12rpx;
				font-size: 22rpx;
				.item-price {
					color: #ff5000;
					font-weight: bold;
				}
				.item-supporters {
					color: #999;
				}
			}
		}
	}
	</style>