vpUni/.svn/pristine/8e/8eb737679627a88c142209f484eba7abe6457938.svn-base

<template>
	<view class="product-detail-page">
		<!-- 全新方案：纯 CSS 手动构建的骨架屏 -->
		<view v-if="loading" class="skeleton-wrapper">
			<view class="skeleton-item skeleton-rect" style="width: 100%; height: 750rpx;"></view>
			<view class="skeleton-card" style="height: 200rpx;"></view>
			<view class="skeleton-card" style="height: 100rpx;"></view>
			<view class="skeleton-card">
				<view class="skeleton-item skeleton-text" style="width: 200rpx; height: 32rpx; margin-bottom: 20rpx;">
				</view>
				<view class="skeleton-item skeleton-rect" style="width: 100%; height: 300rpx;"></view>
			</view>
		</view>

		<!-- 页面实际内容 -->
		<view v-else class="page-content">

			<scroll-view scroll-y>
				<!-- 1. 商品轮播图 -->
				<view class="swiper-section">
					<swiper class="swiper-container" circular autoplay :interval="3000" :duration="500"
						@change="e => swiperCurrent = e.detail.current">
						<swiper-item >
							<view class="swiper-item">
								<view class="image-placeholder swiper-image">
									<image :src="images" style="width: 100%; height: 100%;" mode=""></image>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 2. 价格与商品信息 -->
				<view class="card info-card">
					<view class="price-line">
						<text class="points">{{ goodsInfo.price }} 积分</text>
					</view>
					<text class="name">{{ goodsInfo.goodsName }}</text>
					<view class="meta-line">
						<text class="sales">已兑换 {{ goodsInfo.sale }} 件</text>
						<text class="stock">库存 {{ goodsInfo.stock }} 件</text>
					</view>
				</view>


				<!-- 4. 图文详情 -->
				<view class="card detail-content-card">
					<view class="section-title">
						<text>图文详情</text>
					</view>
					<up-parse :content="goodsInfo.sign"></up-parse>
				</view>

			</scroll-view>
			<view class="" style=" height: 200rpx;">

			</view>

			<!-- 底部操作栏 -->
			<view class="bottom-bar">
				<button class="submit-btn" @click="pay()">立即兑换</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { Service } from "@/Service/Service";
	import { vpGoodsService } from '@/Service/vp/vpGoodsService'
	
	const loading = ref<boolean>(true);
	const swiperCurrent = ref(0);
	
	let goodsInfo=ref<any>({})
	
	let  goodsId=ref('')
	
	let images = ref<string>('')


	onLoad((options:any) => {
		goodsId.value=options.id
		getData()
	});
	onShow(() => { });
	
	const getData=()=>{
		vpGoodsService.GetGoodsInfo(goodsId.value).then(res=>{
			if(res.code==0){
				goodsInfo.value=res.data.goodsInfo
				images.value = res.data.goodsInfo.img
				loading.value = false
			}else{
				Service.Msg(res.msg)
			}
		})
	}
	
	const pay = () =>{
		
		vpGoodsService.AddGoodsOrder(goodsId.value,1).then(res=>{
			if(res.code==0){
				Service.Msg('下单成功！')
				Service.GoPage('/pages/goods/goodsPay?orderId='+res.data.orderId)
			}else{
				Service.Msg(res.msg)
			}
		})
		
		
	}
	
</script>

<style lang="scss" scoped>
	@keyframes skeleton-blink {
		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}

	.skeleton-item {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-blink 1.5s infinite linear;
	}

	.skeleton-rect {
		border-radius: 8rpx;
	}

	.skeleton-text {
		border-radius: 4rpx;
	}

	.skeleton-wrapper {
		background-color: #f7f7f7;

		.skeleton-card {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			margin: 24rpx;
		}
	}

	.product-detail-page {
		background-color: #f7f7f7;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.page-scroll {
		flex: 1;
		height: 0;
		padding-bottom: 140rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 24rpx;
		padding: 30rpx;
		box-shadow: 0 8rpx 30rpx rgba(220, 220, 230, 0.3);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		border-left: 8rpx solid #fa6400;
		padding-left: 16rpx;
	}

	.swiper-section {
		position: relative;

		.swiper-container {
			height: 600rpx;
			/* 1:1 的轮播图 */
		}

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

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

		.swiper-dots {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			background-color: rgba(0, 0, 0, 0.4);
			color: #fff;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
		}
	}

	.info-card {
		margin-top: -20rpx; // 与轮播图重叠
		position: relative;

		.price-line {
			display: flex;
			align-items: baseline;

			.points {
				font-size: 48rpx;
				font-weight: bold;
				color: #fa6400;
			}

			.original-price {
				font-size: 28rpx;
				color: #999;
				margin-left: 16rpx;
			}
		}

		.name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin: 16rpx 0;
			display: block;
		}

		.meta-line {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: #999;
		}
	}

	.spec-card {
		padding: 0;

		:deep(.up-cell) {
			.up-cell__body {
				padding: 30rpx;
			}
		}
	}

	.detail-content-card {
		:deep(img) {
			max-width: 100%;
			border-radius: 8rpx;
		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		z-index: 100;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);

		.submit-btn {
			background-color: #fa6400;
			color: #fff;
			font-weight: bold;
			border-radius: 44rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 30rpx;
			margin: 0;

			&::after {
				border: none;
			}
		}
	}
</style>