From 4aa20b72570084a9280978752facbdf6d840b866 Mon Sep 17 00:00:00 2001 From: "1173117610@qq.com" Date: Thu, 14 May 2026 14:38:33 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/detail/detail.vue | 459 ++++++++++++++++++++++++---------------- 1 file changed, 280 insertions(+), 179 deletions(-) diff --git a/pages/detail/detail.vue b/pages/detail/detail.vue index f9b061a..6c8ec4f 100644 --- a/pages/detail/detail.vue +++ b/pages/detail/detail.vue @@ -13,182 +13,202 @@ - - - - - - - - {{ currentSwiper + 1 }}/{{ product.images.length }} - - - - - - - - - - - - 🏆 - {{ product.rankText }} + + + + + + + + + + {{ currentSwiper + 1 }}/{{ product.images.length }} - | - - 今日已有{{ product.todaySale }}人下单 - - - - - - - 券后￥ - {{ product.price }} - ￥{{ product.oldPrice }} + + + + + + + + + + 🏆 + {{ product.rankText }} - - 已售 {{ product.totalSale }} 件 + | + + 今日已有{{ product.todaySale }}人下单 - - - - {{ product.title }} - - - - - {{ tag }} - - - - - - - - - {{ product.couponVal }} - 元优惠券 + + + + + 券后￥ + {{ product.price }} + ￥{{ product.oldPrice }} + + + 已售 {{ product.totalSale }} 件 - 使用期限: {{ product.couponTime }} - - 立即领券 - - - - - - - - - 品牌 - - - {{ product.brandName }} + + + + {{ product.title }} + + + + {{ tag }} + + + + + + + + + {{ product.couponVal }} + 元优惠券 + + 使用期限: {{ product.couponTime }} + + + 立即领券 + + + + + + + + + + 品牌 + + + {{ product.brandName }} + + + + + 店铺 + + + + {{ product.platform === '天猫' ? 'T' : '淘' }} + {{ product.shopName }} + + > + + + + 描述 {{ product.scores.desc }} ↑ + + + 服务 {{ product.scores.service }} ↑ + + + 物流 {{ product.scores.post }} ↑ + + + + + + + + + + + + 粉丝福利购 + + + + {{ product.desc }} + + + + + + + + 详情 + + + {{ isExpanded ? '收起' : '展开' }} + + + + + + + - - 店铺 - - - - {{ product.platform === '天猫' ? 'T' : '淘' }} - {{ product.shopName }} - - > - - - - 描述 {{ product.scores.desc }} ↑ - - - 服务 {{ product.scores.service }} ↑ - - - 物流 {{ product.scores.post }} ↑ - - + + + + - - - - - - - - - 粉丝福利购 - - - - {{ product.desc }} - - - - - - - - 详情 - - - {{ isExpanded ? '收起' : '展开' }} - - - - - - - - - - - - - - - - - - - - - - - - {{ item.itemtitle }} + + + + + - - {{ item.low_price_day }}天最低价 - 满{{ item.itemprice }}减{{ item.couponmoney }} - - - 券后¥ {{ item.itemendprice }} - - 券 - {{ item.couponmoney }}元 + + + + {{ item.itemtitle }} + + + {{ item.low_price_day }}天最低价 + 满{{ item.itemprice }}减{{ item.couponmoney }} + + + 券后¥ {{ item.itemendprice }} + + 券 + {{ item.couponmoney }}元 + + + + 已售{{ formatSales(item.itemsale) }}件 - - 已售{{ formatSales(item.itemsale) }}件 - + 已为您加载完毕 + ©️粉丝福利购专属优惠商城 - 已为您加载完毕 - ©️粉丝福利购专属优惠商城 + + + + + + + + + + + + + + + + + + + + - - - @@ -219,36 +239,30 @@ 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: '薇诺娜宝贝宝宝舒润霜50g宝宝特护面霜', - labels: ['109天最低价', '淘金币频道抵扣2.1元起'], - couponVal: 100, - couponTime: '2026.05.09-2026.05.11', - shopName: '润本旗舰店', - brandName: '润本', + images: [], + rank: 0, + todaySale: 0, + price: '', + oldPrice: '', + totalSale: '', + platform: '', + title: '', + labels: [], + couponVal: 0, + couponTime: '', + shopName: '', + brandName: '', brandLogo: '', scores: { - desc: '4.7', - service: '4.8', - post: '4.8' + desc: '-', + service: '-', + post: '-' }, activity: null, activityTime: '', - detailImages: [ - 'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310', - 'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310' - ] + detailImages: [] }, + isLoaded: false, navOpacity: 0, bgOpacity: 0.4, iconColor: '#ffffff', @@ -363,6 +377,8 @@ // 获取同类推荐 (使用 itemid 和 son_category) this.getSimilarProducts(d.itemid, d.son_category); + + this.isLoaded = true; } } }); @@ -494,6 +510,91 @@ position: relative; } + /* 渐现动画 */ + .animate-fade-in { + animation: fadeIn 0.4s ease-out forwards; + } + + @keyframes fadeIn { + from { opacity: 0; transform: translateY(10rpx); } + to { opacity: 1; transform: translateY(0); } + } + + /* 骨架屏样式 */ + .skeleton-wrap { + padding-bottom: 200rpx; + } + + .sk-swiper { + width: 100%; + height: 750rpx; + background-color: #eee; + } + + .sk-info { + background-color: #fff; + padding: 30rpx; + } + + .sk-price { + width: 260rpx; + height: 60rpx; + border-radius: 8rpx; + margin-bottom: 30rpx; + } + + .sk-title { + width: 100%; + height: 40rpx; + border-radius: 6rpx; + margin-bottom: 20rpx; + } + + .sk-title.sk-short { + width: 60%; + } + + .sk-tags { + display: flex; + margin-top: 30rpx; + } + + .sk-tag { + width: 120rpx; + height: 32rpx; + margin-right: 20rpx; + border-radius: 4rpx; + } + + .sk-coupon { + margin: 20rpx 30rpx; + height: 180rpx; + border-radius: 20rpx; + } + + .sk-shop { + margin: 20rpx 30rpx; + height: 160rpx; + border-radius: 20rpx; + } + + .sk-detail { + margin-top: 20rpx; + height: 800rpx; + background-color: #fff; + } + + .sk-animate { + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + background-size: 400% 100%; + animation: sk-loading 1.4s ease infinite; + } + + @keyframes sk-loading { + 0% { background-position: 100% 50%; } + 100% { background-position: 0 50%; } + } + /* 返回按钮 */ /* 顶部渐变导航栏 */ .fixed-header {