From eb7103fe4f2f05864e8cfc4fedf98fe98ee55ab1 Mon Sep 17 00:00:00 2001
From: "1173117610@qq.com" <a15133400227>
Date: Sat, 9 May 2026 17:37:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json              |  12 +-
 pages/detail/detail.vue | 620 ++++++++++++++++++++++++++++++++++++++++
 pages/index/index.vue   |  15 +-
 3 files changed, 641 insertions(+), 6 deletions(-)
 create mode 100644 pages/detail/detail.vue

diff --git a/pages.json b/pages.json
index 869105d..78589ad 100644
--- a/pages.json
+++ b/pages.json
@@ -1,9 +1,15 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "首页"
+			}
+		},
+		{
+			"path": "pages/detail/detail",
+			"style": {
+				"navigationStyle": "custom"
 			}
 		}
 	],
@@ -14,4 +20,4 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"uniIdRouter": {}
-}
+}
\ No newline at end of file
diff --git a/pages/detail/detail.vue b/pages/detail/detail.vue
new file mode 100644
index 0000000..043934b
--- /dev/null
+++ b/pages/detail/detail.vue
@@ -0,0 +1,620 @@
+<template>
+	<view class="detail-container">
+		<!-- 悬浮返回按钮 -->
+		<view class="back-btn" :style="{ top: statusBarHeight + 'px' }" @click="goBack">
+			<text class="back-icon">〈</text>
+		</view>
+
+		<scroll-view scroll-y class="scroll-content" :show-scrollbar="false">
+			<!-- 主图轮播 -->
+			<view class="swiper-box">
+				<swiper class="main-swiper" circular @change="swiperChange">
+					<swiper-item v-for="(img, index) in product.images" :key="index">
+						<image :src="img" mode="aspectFill" class="swiper-img"></image>
+					</swiper-item>
+				</swiper>
+				<view class="swiper-indicator">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
+			</view>
+
+			<!-- 热销榜单提示 -->
+			<view class="hot-sale-bar">
+				<view class="hot-left">
+					<text class="trophy-icon">🏆</text>
+					<text class="hot-text">实时热销榜第{{ product.rank }}名</text>
+				</view>
+				<view class="hot-right">
+					<text>今日已有{{ product.todaySale }}人下单</text>
+				</view>
+			</view>
+
+			<!-- 价格与标题区 -->
+			<view class="info-section">
+				<view class="price-row">
+					<view class="price-left">
+						<text class="price-symbol">券后￥</text>
+						<text class="price-integer">{{ product.price.split('.')[0] }}</text>
+						<text class="price-decimal">.{{ product.price.split('.')[1] || '00' }}</text>
+						<text class="old-price">￥{{ product.oldPrice }}</text>
+					</view>
+					<view class="sales-count">已售 {{ product.totalSale }} 件</view>
+				</view>
+
+				<view class="title-row">
+					<text class="platform-tag">{{ product.platform }}</text>
+					<text class="product-title">{{ product.title }}</text>
+				</view>
+
+				<view class="label-row">
+					<text class="label-item">{{ product.timeTag }}</text>
+					<text class="label-item">{{ product.couponVal }}元</text>
+				</view>
+			</view>
+
+			<!-- 优惠券模块 (1:1 还原) -->
+			<view class="coupon-section">
+				<view class="coupon-card">
+					<view class="coupon-left">
+						<view class="coupon-amount">
+							<text class="amount-val">{{ product.couponVal }}</text>
+							<text class="amount-unit">元优惠券</text>
+						</view>
+						<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
+					</view>
+					<view class="coupon-right">
+						<view class="get-btn">立即领券</view>
+					</view>
+					<view class="coupon-circle top"></view>
+					<view class="coupon-circle bottom"></view>
+				</view>
+			</view>
+
+			<!-- 店铺评分 -->
+			<view class="shop-section">
+				<view class="shop-header">
+					<view class="shop-info">
+						<image :src="product.shopLogo" class="shop-logo"></image>
+						<text class="shop-name">{{ product.shopName }}</text>
+					</view>
+					<text class="shop-entry">进店逛逛 ></text>
+				</view>
+				<view class="score-row">
+					<view class="score-item">宝贝描述 <text class="score-val">{{ product.scores.desc }}</text> <text class="score-up">↑</text></view>
+					<view class="score-item">卖家服务 <text class="score-val">{{ product.scores.service }}</text> <text class="score-up">↑</text></view>
+					<view class="score-item">物流服务 <text class="score-val">{{ product.scores.post }}</text> <text class="score-up">↑</text></view>
+				</view>
+			</view>
+
+			<!-- 图文详情 -->
+			<view class="detail-images">
+				<view class="detail-title">商品详情</view>
+				<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
+			</view>
+			
+			<!-- 底部留白 -->
+			<view class="footer-placeholder"></view>
+		</scroll-view>
+
+		<!-- 底部固定操作栏 -->
+		<view class="bottom-bar">
+			<view class="bar-left">
+				<view class="bar-btn" @click="goHome">
+					<text class="bar-icon">🏠</text>
+					<text class="bar-text">首页</text>
+				</view>
+				<view class="bar-btn">
+					<text class="bar-icon">📤</text>
+					<text class="bar-text">分享</text>
+				</view>
+			</view>
+			<view class="bar-right">
+				<view class="copy-btn">复制口令购买</view>
+				<view class="buy-btn">领券购买</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				statusBarHeight: 44,
+				currentSwiper: 0,
+				product: {
+					id: '',
+					images: [
+						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
+						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
+						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
+					],
+					rank: 59,
+					todaySale: 1576,
+					price: '19.8',
+					oldPrice: '119.8',
+					totalSale: '1.0万',
+					platform: '天猫',
+					title: '【活动专享】润本植物精油贴儿童宝宝学生成人户外专用随身贴纸',
+					timeTag: '9天最低价',
+					couponVal: 100,
+					couponTime: '2026.05.09-2026.05.11',
+					shopName: '润本旗舰店',
+					shopLogo: 'https://cdn-icons-png.flaticon.com/512/732/732229.png',
+					scores: {
+						desc: '4.7',
+						service: '4.8',
+						post: '4.8'
+					},
+					detailImages: [
+						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
+						'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
+					]
+				}
+			}
+		},
+		onLoad(options) {
+			this.product.id = options.id || '55493973';
+			const sysInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = sysInfo.statusBarHeight || 44;
+			this.getDetailData();
+		},
+		methods: {
+			getDetailData() {
+				uni.request({
+					url: `https://api.cmspro.haodanku.com/detail/itemInfo?id=${this.product.id}&cid=qOstW90`,
+					success: (res) => {
+						if (res.data && res.data.code === 200) {
+							const d = res.data.data;
+							console.log('详情数据获取成功:', d);
+							
+							// 格式化销量
+							let salesStr = d.itemsale;
+							if (d.itemsale >= 10000) {
+								salesStr = (d.itemsale / 10000).toFixed(1) + '万';
+							}
+
+							// 解析排行榜标签
+							let rank = 10; // 默认
+							let rankText = '近期热销榜';
+							try {
+								const labels = JSON.parse(d.rank_label);
+								if (labels && labels.length > 0) {
+									rankText = labels[0].title;
+									rank = labels[0].sort || 10;
+								}
+							} catch (e) {}
+
+							this.product = {
+								id: d.id,
+								images: d.taobao_image_qiniu || [d.itempic],
+								rank: rank,
+								rankText: rankText,
+								todaySale: d.todaysale,
+								price: d.itemendprice,
+								oldPrice: d.itemprice,
+								totalSale: salesStr,
+								platform: d.shoptype === 'B' ? '天猫' : '淘宝',
+								title: d.itemtitle,
+								timeTag: d.label && d.label[0] ? d.label[0] : '超值特惠',
+								couponVal: d.couponmoney,
+								couponTime: d.couponlife.replace('有效期至：', ''),
+								shopName: d.shopname,
+								shopLogo: (d.brand_info && d.brand_info.brand_logo) || d.shopicon || 'https://cdn-icons-png.flaticon.com/512/732/732229.png',
+								scores: {
+									desc: d.shop_score.desc_score,
+									service: d.shop_score.serv_score,
+									post: d.shop_score.post_score
+								},
+								// 详情图处理：如果素材里有图，拼接前缀展示
+								detailImages: (d.material_info && d.material_info[0] && d.material_info[0].image) ? 
+									d.material_info[0].image.map(img => img.startsWith('http') ? img : `https://img-haodanku-com.cdn.fudaiapp.com/${img}`) : 
+									[d.itempic]
+							};
+						}
+					}
+				});
+			},
+			goBack() {
+				uni.navigateBack();
+			},
+			goHome() {
+				uni.switchTab({
+					url: '/pages/index/index'
+				});
+			},
+			swiperChange(e) {
+				this.currentSwiper = e.detail.current;
+			}
+		}
+	}
+</script>
+
+<style>
+	.detail-container {
+		width: 100%;
+		height: 100vh;
+		background-color: #f8f8f8;
+		position: relative;
+	}
+
+	/* 返回按钮 */
+	.back-btn {
+		position: fixed;
+		left: 30rpx;
+		width: 64rpx;
+		height: 64rpx;
+		background-color: rgba(0, 0, 0, 0.4);
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 100;
+		margin-top: 10rpx;
+	}
+
+	.back-icon {
+		color: #ffffff;
+		font-size: 32rpx;
+		font-weight: bold;
+	}
+
+	.scroll-content {
+		height: 100%;
+	}
+
+	/* 轮播图 */
+	.swiper-box {
+		width: 100%;
+		height: 750rpx;
+		position: relative;
+	}
+
+	.main-swiper {
+		width: 100%;
+		height: 100%;
+	}
+
+	.swiper-img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.swiper-indicator {
+		position: absolute;
+		right: 30rpx;
+		bottom: 30rpx;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: #ffffff;
+		padding: 4rpx 20rpx;
+		border-radius: 20rpx;
+		font-size: 24rpx;
+	}
+
+	/* 热销榜 */
+	.hot-sale-bar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: linear-gradient(to right, #fff1eb, #fbe9e7);
+		padding: 20rpx 30rpx;
+	}
+
+	.hot-left {
+		display: flex;
+		align-items: center;
+	}
+
+	.hot-text {
+		font-size: 26rpx;
+		color: #d84315;
+		margin-left: 10rpx;
+		font-weight: bold;
+	}
+
+	.hot-right {
+		font-size: 24rpx;
+		color: #bf360c;
+	}
+
+	/* 信息区 */
+	.info-section {
+		background-color: #ffffff;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.price-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-end;
+		margin-bottom: 20rpx;
+	}
+
+	.price-left {
+		display: flex;
+		align-items: baseline;
+		color: #ff416c;
+	}
+
+	.price-symbol {
+		font-size: 28rpx;
+		font-weight: bold;
+	}
+
+	.price-integer {
+		font-size: 56rpx;
+		font-weight: bold;
+	}
+
+	.price-decimal {
+		font-size: 32rpx;
+		font-weight: bold;
+	}
+
+	.old-price {
+		font-size: 26rpx;
+		color: #999;
+		text-decoration: line-through;
+		margin-left: 20rpx;
+	}
+
+	.sales-count {
+		font-size: 24rpx;
+		color: #999;
+	}
+
+	.title-row {
+		margin-bottom: 20rpx;
+		line-height: 44rpx;
+	}
+
+	.platform-tag {
+		background-color: #ff416c;
+		color: #ffffff;
+		font-size: 20rpx;
+		padding: 2rpx 10rpx;
+		border-radius: 4rpx;
+		margin-right: 10rpx;
+	}
+
+	.product-title {
+		font-size: 32rpx;
+		color: #333;
+		font-weight: bold;
+	}
+
+	.label-row {
+		display: flex;
+	}
+
+	.label-item {
+		font-size: 22rpx;
+		color: #ff416c;
+		background-color: #fff0f3;
+		padding: 4rpx 16rpx;
+		border-radius: 20rpx;
+		margin-right: 20rpx;
+	}
+
+	/* 优惠券 */
+	.coupon-section {
+		padding: 0 30rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.coupon-card {
+		height: 160rpx;
+		background: linear-gradient(to right, #ff715a, #ff416c);
+		border-radius: 16rpx;
+		display: flex;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.coupon-left {
+		flex: 1;
+		padding: 30rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		color: #ffffff;
+	}
+
+	.coupon-amount {
+		margin-bottom: 10rpx;
+	}
+
+	.amount-val {
+		font-size: 48rpx;
+		font-weight: bold;
+	}
+
+	.amount-unit {
+		font-size: 24rpx;
+		margin-left: 10rpx;
+	}
+
+	.coupon-time {
+		font-size: 20rpx;
+		opacity: 0.9;
+	}
+
+	.coupon-right {
+		width: 200rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-left: 2rpx dashed rgba(255, 255, 255, 0.4);
+	}
+
+	.get-btn {
+		background-color: #ffffff;
+		color: #ff416c;
+		font-size: 26rpx;
+		padding: 10rpx 24rpx;
+		border-radius: 30rpx;
+		font-weight: bold;
+	}
+
+	.coupon-circle {
+		position: absolute;
+		width: 24rpx;
+		height: 24rpx;
+		background-color: #f8f8f8;
+		border-radius: 50%;
+		left: auto;
+		right: 188rpx;
+	}
+
+	.coupon-circle.top {
+		top: -12rpx;
+	}
+
+	.coupon-circle.bottom {
+		bottom: -12rpx;
+	}
+
+	/* 店铺 */
+	.shop-section {
+		background-color: #ffffff;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.shop-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+	}
+
+	.shop-info {
+		display: flex;
+		align-items: center;
+	}
+
+	.shop-logo {
+		width: 80rpx;
+		height: 80rpx;
+		border-radius: 8rpx;
+		margin-right: 20rpx;
+	}
+
+	.shop-name {
+		font-size: 28rpx;
+		color: #333;
+		font-weight: bold;
+	}
+
+	.shop-entry {
+		font-size: 24rpx;
+		color: #999;
+	}
+
+	.score-row {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.score-item {
+		font-size: 24rpx;
+		color: #999;
+	}
+
+	.score-val {
+		color: #ff416c;
+		margin: 0 4rpx;
+	}
+
+	.score-up {
+		color: #ff416c;
+	}
+
+	/* 详情图 */
+	.detail-images {
+		background-color: #ffffff;
+		padding: 30rpx 0;
+	}
+
+	.detail-title {
+		font-size: 28rpx;
+		color: #333;
+		font-weight: bold;
+		padding: 0 30rpx 30rpx;
+	}
+
+	.detail-img {
+		width: 100%;
+		display: block;
+	}
+
+	.footer-placeholder {
+		height: 120rpx;
+	}
+
+	/* 底部栏 */
+	.bottom-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100rpx;
+		background-color: #ffffff;
+		display: flex;
+		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
+		align-items: center;
+		border-top: 1rpx solid #eeeeee;
+		z-index: 100;
+	}
+
+	.bar-left {
+		display: flex;
+		margin-right: 20rpx;
+	}
+
+	.bar-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-right: 40rpx;
+	}
+
+	.bar-icon {
+		font-size: 36rpx;
+		margin-bottom: 4rpx;
+	}
+
+	.bar-text {
+		font-size: 20rpx;
+		color: #666;
+	}
+
+	.bar-right {
+		flex: 1;
+		display: flex;
+		height: 80rpx;
+		border-radius: 40rpx;
+		overflow: hidden;
+	}
+
+	.copy-btn {
+		flex: 1;
+		background-color: #ffbcba;
+		color: #ffffff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 26rpx;
+		font-weight: bold;
+	}
+
+	.buy-btn {
+		flex: 1;
+		background: linear-gradient(to right, #ff715a, #ff416c);
+		color: #ffffff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 26rpx;
+		font-weight: bold;
+	}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 0468271..5986820 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -108,7 +108,7 @@
 
 				<swiper class="worth-swiper" :indicator-dots="true" indicator-active-color="#ff416c">
 					<swiper-item v-for="(chunk, cIdx) in worthBuyChunks" :key="cIdx">
-						<view class="worth-goods-item" v-for="(item, idx) in chunk" :key="idx">
+						<view class="worth-goods-item" v-for="(item, idx) in chunk" :key="idx" @click="goToDetail(item.id)">
 							<image class="worth-goods-img" :src="item.img" mode="aspectFill"></image>
 							<view class="worth-goods-info">
 								<view class="worth-goods-title">
@@ -174,7 +174,7 @@
 
 						<!-- 品牌商品格子 -->
 						<view class="brand-goods-grid">
-							<view class="brand-grid-item" v-for="(goods, gIdx) in shop.items" :key="gIdx">
+							<view class="brand-grid-item" v-for="(goods, gIdx) in shop.items" :key="gIdx" @click="goToDetail(goods.id)">
 								<view class="b-img-wrap">
 									<view class="anniversary-tag">
 										<text class="a-icon">🎂</text>
@@ -217,7 +217,7 @@
 
 			<!-- 商品列表 (1:1 还原) -->
 			<view class="goods-list" id="goods-list-section">
-				<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx">
+				<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx" @click="goToDetail(goods.id)">
 					<view class="g-img-wrap">
 						<view class="g-anniversary-tag">
 							<text class="a-icon">🎂</text>
@@ -346,6 +346,12 @@
 					}
 				});
 			},
+			goToDetail(id) {
+				console.log('正在跳转到详情页，商品ID:', id);
+				uni.navigateTo({
+					url: `/pages/detail/detail?id=${id}`
+				});
+			},
 			getBottomBar() {
 				uni.request({
 					url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
@@ -390,6 +396,7 @@
 								}
 								
 								return {
+									id: item.id,
 									image: item.itempic,
 									title: item.itemshorttitle,
 									finalPrice: item.itemendprice,
@@ -412,6 +419,7 @@
 						if (res.data && res.data.code === 200) {
 							const formatData = (list) => {
 								return list.map(item => ({
+									id: item.id,
 									img: item.itempic,
 									title: item.itemshorttitle,
 									label1: item.label && item.label[0] ? item.label[0] : '',
@@ -443,6 +451,7 @@
 								desc: shop.title || '官方直降 爆款秒杀',
 								tags: shop.label ? shop.label.slice(0, 2) : ['抢限量大额券', '霸榜天猫3大榜单'],
 								items: (shop.items || []).slice(0, 3).map(goods => ({
+									id: goods.id,
 									img: goods.itempic,
 									title: goods.itemshorttitle,
 									sold: goods.itemsale >= 10000 ? (goods.itemsale / 10000).toFixed(1) + '万' : goods.itemsale,