MoeNovaClient/pages/crowdFunding/crowdfundingDetails.vue

<template>
	<view class="crowdfunding-details">
		<view class="custom-navbar" :style="navBgStyle">
			<view class="navbar-left scale-tap" @click="goBack">
				<image src="@/static/crowdFunding/back.png" mode="widthFix"></image>
			</view>
			<view class="navbar-center one-omit" style="max-width: 70vw; " :style="{ opacity: navBgOpacity }">
				【Woh】灯塔 塔罗牌 治愈风泛伟特系伟特系伟特系
			</view>
			<view class="navbar-right scale-tap" @click="showShare = true">
				<image src="@/static/crowdFunding/share.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 顶部视频图片混合轮播 -->
		<view class="swiper-container">
			<swiper class="top-swiper" 
				:indicator-dots="false" 
				circular 
				:current="currentMediaIndex" 
				@change="handleSwiperChange"
				:duration="300"
			>
				<swiper-item v-for="(item, idx) in mediaList" :key="idx" class="swiper-item">
					<view v-if="item.type === 'video'" class="media-wrapper">
						<video 
							class="swiper-video" 
							:src="item.src" 
							:poster="item.poster" 
							:id="'video-' + idx"
							controls
							object-fit="contain"
							enable-progress-gesture="false"
							:loop="false"
							:show-fullscreen-btn="false"
							:show-play-btn="true"
							:enable-play-gesture="false"
							@ended="onVideoEnded" 
							@play="onVideoPlay(idx)"
							@pause="onVideoPause"
						></video>
					</view>
					<image v-else class="swiper-img" :src="item.src" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<!-- 自定义指示点 -->
			<view class="custom-dots">
				<view 
					v-for="(item, index) in mediaList" 
					:key="index"
					:class="['dot', currentMediaIndex === index ? 'active' : '']"
					@click="switchMedia(index)"
				></view>
			</view>
		</view>

		<view class="content">
			<!-- 项目信息 -->
			<view class="section project-card">
				<view class="project-title">【Woh】灯塔 塔罗牌 治愈风泛传特系</view>
				<view class="progress-bar-wrap">
					<uv-line-progress height="8rpx" :showText="false" :percentage="85.45" inactiveColor="#F0F0F0"
						activeColor="#ACF934"></uv-line-progress>
					<view class="progress-percent">85.45%</view>
				</view>
				<view class="project-stats">
					<view class="stat-block">
						<view class="stat-main amountOfMoney">￥70,808.00</view>
						<view class="stat-sub">357人支持</view>
					</view>
					<view class="stat-block">
						<view class="stat-main">31天</view>
						<view class="stat-sub">剩余时间</view>
					</view>
					<view class="stat-block">
						<view class="stat-main">￥20,000</view>
						<view class="stat-sub">众筹目标</view>
					</view>
				</view>
			</view>


			<!-- 项目更新 -->
			<view class="section project-update">
				<view class="project-update-left">
					<view class="project-update-left-title">
						<view>·2次更新</view>
						<view style="color: #999;">2025.5.23 16:23</view>
					</view>
					<view class="project-update-left-content">
						<view>附赠精品灯塔牌包装，附赠精品灯塔牌包装</view>
						<view class="image">
							<image src="@/static/crowdFunding/crowdfundingDetails-poster.png" />
						</view>
					</view>
				</view>
				<view class="project-update-right scale-tap"
					@click="goPage('/pages/crowdFunding/discussionArea?tags=update')">
					<view>历史更新</view>
					<image src="@/static/crowdFunding/updateDetails.png"></image>

				</view>
			</view>

			<view class="section comment scale-tap">
				<view class="comment-title">
					<view>项目讨论(10)</view>
					<view class="comment-more" @click="goPage('/pages/crowdFunding/discussionArea?tags=comment')">查看更多
						<image src="@/static/crowdFunding/right.png"></image>
					</view>
				</view>
				<view class="comment-content">
					<block v-for="(item, idx) in commentList" :key="idx">
						<view class="comment-item">
							<image class="comment-avatar" :src="item.avatar"></image>
							<view class="comment-item-main">
								<view class="comment-item-content">{{ item.content }}</view>
							</view>
							<view class="comment-item-like">
								<image class="like-icon"
									:src="item.liked ? '/static/icon/icon-18.png' : '/static/icon/icon-19.png'"></image>
								<text class="like-num">{{ item.likeNum }}</text>
							</view>
						</view>
					</block>
				</view>
			</view>

			<!-- 塔罗牌介绍 -->
			<view class="section poster">
				<view class="initiator-bar">
					<image class="initiator-avatar" :src="initiator.avatar" />
					<view class="initiator-info">
						<text class="initiator-name">{{ initiator.name }}</text>
						<text class="initiator-tag">发起人</text>
					</view>
					<view class="initiator-service-btn  blick-btn-animation"
						@click="goPage('/pages/crowdFunding/customerService')">
						<image class="service-icon" src="@/static/crowdFunding/service.png" />
						<text>客服</text>
					</view>
				</view>
				<image class="intro-img" src="@/static/crowdFunding/crowdfundingDetails-poster.png" mode="widthFix" />

			</view>



			<!-- 风险说明 -->
			<view class="section risk-section">
				<view class="risk-row">
					<view class="risk-title">退款政策</view>
					<view class="risk-more  ">查看更多
						<image src="@/static/crowdFunding/right.png" class="risk-more-icon" />
					</view>
				</view>
				<view class="risk-desc">众筹结束前最后1个小时无法申请退款</view>
				<view class="risk-row risk-row-border">
					<view class="risk-title">风险提示</view>
				</view>
				<view class="risk-content">
					<view>1. 您参与众筹是支持将创意变为现实的过程，而不是直接的商品交易，因此存在一定风险。请您根据自己的判断选择，支持众筹项目。</view>
					<view>2. 众筹存在于发起人与支持者之间，摩点作为第三方平台，提供网络空间、技术支持等服务。众筹的回报产品和承诺由发起人负责。</view>
				</view>
			</view>
		</view>
		<view class="bottom-bar-reserveASeat"></view>
		<view class="bottom-bar">
			<view class="bottom-bar-left">
				<view class="bar-btn">
					<image v-if="true" src="@/static/crowdFunding/collect.png" class=" scale-tap bar-icon" />
					<image v-else src="@/static/crowdFunding/collect-active.png" class=" scale-tap bar-icon" />
					<view class="bar-text">收藏</view>
				</view>
				<view class="bar-btn">
					<image v-if="true" src="@/static/crowdFunding/like.png" class=" scale-tap bar-icon" />
					<image v-else src="@/static/crowdFunding/like-active.png" class=" scale-tap bar-icon" />
					<view class="bar-text">看好</view>
				</view>
			</view>
			<button class="buy-btn blick-btn-animation" @click="specificationsOpen()">立即购买支持</button>
		</view>
		<image src="@/static/crowdFunding/backToTop.png" class="back-top scale-tap" v-show="navBgOpacity > 0.9"
			@click="scrollToTop"></image>

		<!-- 分享弹窗 -->
		<SharePopup :visible="showShare" :userId="userId" :share-title="shareTitle" :share-desc="shareDesc"
			:share-img="shareImg" view="crowdfundingDetails" @close="showShare = false" :isReportContent="true" />

		<productSpecifications ref="specSheet" :price="29.9" :supportCount="357" :product="{
			img: '/static/crowdFunding/top-img.png',
			title: '灯塔 塔罗牌 治愈风泛',
			deliveryTime: '2025年5月内',
			detail: ['灯塔塔罗牌*1', '联名周边*1', '签名*1', ]
		}" :specList="['灯塔MINI版', '灯塔铁盒版', '灯塔典藏版']" @confirm="onSpecConfirm" />

	</view>
</template>

<script>
	import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
	import SharePopup from "@/components/SharePopup/SharePopup.vue";
	import productSpecifications from "./components/productSpecifications/productSpecifications.vue";
	export default {
		components: {
			VideoPlayer,
			SharePopup,
			productSpecifications
		},
		data() {
			return {
				mediaList: [
					{
						type: 'image',
						src: '../../static/crowdFunding/top-img.png'
					},{
						type: 'video',
						src: 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
						poster: 'https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg'
					},
					{
						type: 'image',
						src: 'https://img.alicdn.com/imgextra/i3/2200704180017/O1CN01Qw6QwF1w6Qw6QwF1w6QwF_!!2200704180017.jpg'
					}
				],
				videoPlaying: false,
				currentMediaIndex: 0,
				commentList: [{
						avatar: '/static/crowdFunding/top-img.png',
						content: '还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上还是希望签名能签在书上，还是希望签名能签在书上还是希望签名能签在书上',
						likeNum: 12,
						liked: false
					},
					{
						avatar: '/static/crowdFunding/top-img.png',
						content: '还是希望签名能签在书上',
						likeNum: 12,
						liked: true
					}
				],
				navBgOpacity: 0,
				swiperHeight: 0,
				initiator: {
					avatar: '/static/crowdFunding/top-img.png',
					name: '也许时间是一种解药'
				},
				showShare: false,
				shareTitle: '【Woh】灯塔 塔罗牌 治愈风泛传特系',
				shareDesc: '快来支持这个有趣的众筹项目吧！',
				shareImg: require('@/static/crowdFunding/top-img.png'),
				userId: 0, // 可根据实际登录用户赋值
			}
		},
		computed: {
			navBgStyle() {
				return {
					background: `rgba(255,255,255,${this.navBgOpacity})`,
					transition: 'background 0.3s'
				}
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			scrollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			switchMedia(index) {
				if (this.currentMediaIndex === index) return;
				
				// 如果当前在播放视频，先暂停
				if (this.mediaList[this.currentMediaIndex]?.type === 'video') {
					const videoContext = uni.createVideoContext('video-' + this.currentMediaIndex, this);
					if (videoContext) {
						videoContext.pause();
					}
				}
				
				this.currentMediaIndex = index;
			},
			handleSwiperChange(e) {
				const lastIndex = this.currentMediaIndex;
				this.currentMediaIndex = e.detail.current;
				
				// 如果上一个是视频，暂停它
				if (this.mediaList[lastIndex]?.type === 'video') {
					const videoContext = uni.createVideoContext('video-' + lastIndex, this);
					if (videoContext) {
						videoContext.pause();
						this.videoPlaying = false;
					}
				}
			},
			onVideoPlay(idx) {
				// 更新当前播放的视频索引
				this.videoPlaying = true;
				if (this.currentMediaIndex !== idx) {
					this.currentMediaIndex = idx;
				}
			},
			onVideoPause() {
				this.videoPlaying = false;
			},
			onVideoEnded() {
				this.videoPlaying = false;
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			onSpecConfirm(selectedSpec) {
				console.log('selectedSpec', selectedSpec);
			},
			specificationsOpen() {
				this.$refs.specSheet.show();
			},
		},
		mounted() {
			this.$nextTick(() => {
				// 动态获取轮播图高度
				uni.createSelectorQuery().in(this).select('.top-swiper').boundingClientRect(rect => {
					if (rect) {
						this.swiperHeight = rect.height;
					}
				}).exec();
			});
		},
		onPageScroll(e) {
			const threshold = this.swiperHeight || uni.upx2px(400); // 优先用实际高度
			let opacity = 0;
			if (e.scrollTop > 0) {
				opacity = Math.min(e.scrollTop / threshold, 1);
			}
			this.navBgOpacity = opacity;
		}
	}
</script>


<style lang="scss" scoped>
	.crowdfunding-details {

		/* 自定义导航栏样式 */
		.custom-navbar {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: calc(90rpx + var(--status-bar-height));
			padding: 0 20rpx;
			position: fixed;
			top: 0;
			z-index: 100;
			padding: 12rpx 24rpx;
			padding-top: calc(var(--status-bar-height) + 12rpx);
			background: transparent;
			transition: background 0.3s;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.swiper-container {
			position: relative;
			width: 100vw;
			height: 100vw;
			background: #000;

			.top-swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.media-wrapper {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #000;
				}

				.swiper-video {
					width: 100%;
					height: 100%;
				}

				.swiper-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.custom-dots {
				position: absolute;
				bottom: 20rpx;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				gap: 16rpx;

				.dot {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.5);
					transition: all 0.3s;

					&.active {
						width: 24rpx;
						border-radius: 6rpx;
						background: #fff;
					}
				}
			}
		}

		.content {
			background: #f2f6f2;
			padding: 20rpx;

			.section {
				background: #fff;
				border-radius: 12rpx;
				padding: 16rpx;
				padding-bottom: 20rpx;
				margin: 12rpx 0;

				.section-title {
					font-size: 28rpx;
					font-family: 'PingFang SC-Medium';
					margin-bottom: 6rpx;
				}

				.section-content {
					color: #333;
					font-size: 24rpx;
					line-height: 1.8;
				}

				.intro-img {
					width: 100%;
					margin: 0;
					padding: 0;
					margin-bottom: -10rpx;
				}
			}

			.project-card {
				padding-bottom: 15rpx;

				.project-title {
					font-size: 36rpx;
					color: 1f1f1f;
					font-family: "PingFang SC-Bold";
					font-weight: 400;
				}

				.progress-bar-wrap {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #1F1F1F;
					padding-top: 30rpx;
					padding-bottom: 14rpx;

					.progress-percent {
						padding-left: 12rpx;
					}
				}

				.project-stats {
					display: flex;
					justify-content: space-between;
					padding-top: 0;

					.stat-block {
						display: flex;
						flex-direction: column;
						align-items: center;
						text-align: center;
						justify-content: center;
						color: #1F1F1F;

						&:first-child {
							align-items: flex-start;
						}

						&:last-child {
							display: flex;
							flex-direction: column;
							align-items: center;
							text-align: center;
							justify-content: center;
							color: #1F1F1F;

							&:first-child {
								align-items: flex-start;
							}

							&:last-child {
								align-items: flex-end;
							}

							.stat-main {
								font-size: 28rpx;

								&.amountOfMoney {
									font-size: 32rpx;
									font-family: "PingFang SC-Bold";
								}
							}

							.stat-sub {
								font-size: 20rpx;
							}
						}
					}
				}
			}

			.project-update {
				background: transparent;
				height: 166rpx;
				display: flex;
				width: 100%;
				justify-content: space-between;
				padding: 0;

				>view {
					border-radius: 12rpx;
					background: #fff;
					flex-shrink: 0;
				}

				.project-update-left {
					width: 590rpx;
					height: 100%;
					padding: 16rpx;

					.project-update-left-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 22rpx;
					}

					.project-update-left-content {
						display: flex;
						align-items: center;
						margin-top: 8rpx;

						>view {
							font-size: 24rpx;
							font-weight: 400;
							font-family: "PingFang SC-Bold";
						}

						.image {
							width: 180rpx;
							height: 78rpx;
							overflow: hidden;
							margin-left: 26rpx;
							border-radius: 8rpx;

							image {
								overflow: hidden;
								width: 100%;
							}
						}
					}

				}

				.project-update-right {
					width: 108rpx;
					height: 100%;
					font-size: 22rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					image {
						margin-top: 12rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.poster {
				padding: 0;
				padding-top: 16rpx;
			}
		}

		.comment {
			border-radius: 12rpx;
			background: #fff;
			margin-top: 24rpx;
			padding: 0 0 16rpx 0;

			.comment-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #333;
				padding: 18rpx 20rpx 0 20rpx;

				.comment-more {
					color: #999;
					font-size: 22rpx;
					display: flex;
					align-items: center;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 4rpx;
					}
				}
			}

			.comment-content {
				padding: 0 20rpx;

				.comment-item {
					display: flex;
					align-items: flex-start;
					padding: 18rpx 0 0 0;
					border-bottom: 1rpx solid #f5f5f5;

					&:last-child {
						border-bottom: none;
					}

					.comment-avatar {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					.comment-item-main {
						flex: 1;
						display: flex;
						flex-direction: column;

						.comment-item-content {
							color: #1f1f1f;
							font-size: 24rpx;
							line-height: 1.7;
							margin-bottom: 8rpx;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}
					}

					.comment-item-like {
						display: flex;
						align-items: center;
						margin-left: 36rpx;

						.like-icon {
							width: 28rpx;
							height: 28rpx;
							margin-right: 4rpx;
						}

						.like-num {
							font-size: 22rpx;
							color: #888;
						}
					}
				}
			}
		}

		.bottom-bar-reserveASeat {
			width: 100%;
			height: calc(12rpx + 88rpx + var(--window-bottom) + 30rpx);
		}

		.bottom-bar {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			padding: 14rpx 40rpx;
			padding-bottom: calc(14rpx + var(--window-bottom));
			box-sizing: border-box;

			.bottom-bar-left {
				display: flex;
				align-items: center;
				gap: 32rpx;

				.bar-btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					border-radius: 12rpx;

					.bar-icon {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 4rpx;
					}

					.bar-text {
						font-size: 20rpx;
						color: #1f1f1f;
						font-family: "PingFang SC";
					}
				}
			}


			.buy-btn {
				width: 500rpx;
				height: 88rpx;
				background: #1f1f1f;
				color: #ACF934;
				font-size: 32rpx;
				border-radius: 80rpx;
				border: none;
				font-weight: bold;
				text-align: center;
				line-height: 80rpx;
				margin-left: 24rpx;
			}

		}
	}

	.back-top {
		position: fixed;
		bottom: calc(126rpx + var(--window-bottom));
		right: 16rpx;
		width: 82rpx;
		height: 82rpx;
	}

	.initiator-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 10rpx;
		padding: 18rpx 24rpx 18rpx 18rpx;
		margin: 0;

		.initiator-avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			margin-right: 18rpx;
			flex-shrink: 0;
		}

		.initiator-info {
			display: flex;
			align-items: center;
			flex: 1;
			min-width: 0;
		}

		.initiator-name {
			font-size: 30rpx;
			color: #222;
			font-weight: bold;
			margin-right: 12rpx;
			max-width: 260rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.initiator-tag {
			background: #1a1a1a;
			color: #b6ff4b;
			font-size: 20rpx;
			border-radius: 8rpx;
			padding: 2rpx 12rpx;
			margin-left: 2rpx;
		}

		.initiator-service-btn {
			display: flex;
			align-items: center;
			background: #1a1a1a;
			color: #b6ff4b;
			font-size: 28rpx;
			border-radius: 128rpx;
			padding: 0 24rpx 0 12rpx;
			height: 56rpx;
			margin-left: 18rpx;
			font-weight: bold;
		}

		.service-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}

	.scale-tap {
		transition: transform 0.15s;
	}

	.scale-tap:active {
		transform: scale(0.92);
	}

	.risk-section {
		background: #fff;
		border-radius: 12rpx;
		margin: 24rpx 0 0 0;
		padding: 0 0 18rpx 0;
		position: relative;
		overflow: hidden;

		.risk-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 18rpx 24rpx 0 0rpx;
			font-size: 28rpx;
			color: #1f1f1f;
			background: #fff;

			&.risk-row-border {
				border-top: 1rpx solid #f2f2f2;
				margin-top: 18rpx;
				padding-top: 18rpx;
			}
		}

		.risk-title {
			font-size: 28rpx;
			color: #1f1f1f;
			font-family: 'PingFang SC-Bold';
			font-weight: 400;

		}

		.risk-more {
			color: #1f1f1f;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			font-weight: 400;
			font-family: 'PingFang SC-Bold';

			.risk-more-icon {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
				margin-top: 4rpx;
			}
		}

		.risk-desc {
			font-size: 24rpx;
			color: #999;
			padding: 8rpx 24rpx 0 0;
			font-family: 'PingFang SC-Regular';
		}

		.risk-content {
			font-size: 24rpx;
			color: #999;
			padding: 12rpx 24rpx 0 0;
			font-family: 'PingFang SC-Regular';
			line-height: 1.7;

			>view {
				margin-bottom: 6rpx;
			}
		}
	}
</style>