Compare commits
10 Commits
5ae276cfeb
...
4aa20b7257
| Author | SHA1 | Date |
|---|---|---|
1173117610@qq.com
|
4aa20b7257 | |
|
1173117610@qq.com
|
bdc742934a | |
|
1173117610@qq.com
|
da8d437cbb | |
|
1173117610@qq.com
|
f8c247a2a0 | |
|
1173117610@qq.com
|
3c2fecf308 | |
|
1173117610@qq.com
|
0178d2b556 | |
|
1173117610@qq.com
|
2422f57fac | |
|
1173117610@qq.com
|
3a981b04ab | |
|
1173117610@qq.com
|
260d0b5b71 | |
|
1173117610@qq.com
|
5b588efa67 |
18
pages.json
18
pages.json
|
|
@ -41,6 +41,24 @@
|
|||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/special-sale/choicen",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/special-sale/details",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/save-money/save-money",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -310,10 +310,10 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* 去掉阴影让头部更轻 */
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
|
|
@ -340,12 +340,13 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 32rpx;
|
||||
.nav-header .title-text {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.placeholder-area {
|
||||
width: 60rpx;
|
||||
}
|
||||
|
|
@ -363,9 +364,8 @@
|
|||
.filter-bar {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
height: 88rpx;
|
||||
height: 76rpx;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 90;
|
||||
|
|
@ -390,16 +390,17 @@
|
|||
.sub-filter-row {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
padding: 10rpx 20rpx 20rpx;
|
||||
padding: 0 20rpx 16rpx;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
}
|
||||
|
||||
.sub-filter-item {
|
||||
padding: 6rpx 20rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
background: #f5f6f8;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
border-radius: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,182 +13,202 @@
|
|||
</view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-content" :show-scrollbar="false" @scroll="handleScroll">
|
||||
<!-- 主图轮播 -->
|
||||
<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="activity-banner" v-if="product.activity && product.activity.app_img">
|
||||
<image :src="product.activity.app_img" mode="widthFix" class="banner-img"></image>
|
||||
<view class="banner-time" v-if="product.activityTime">TIME: {{ product.activityTime }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 热销榜单提示 -->
|
||||
<view class="hot-sale-bar">
|
||||
<view class="hot-left">
|
||||
<text class="trophy-icon">🏆</text>
|
||||
<text class="hot-text">{{ product.rankText }}</text>
|
||||
<!-- 真实内容 -->
|
||||
<view v-if="isLoaded" class="animate-fade-in">
|
||||
<!-- 主图轮播 -->
|
||||
<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" v-if="product.images.length > 0">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
|
||||
</view>
|
||||
<view class="hot-divider">|</view>
|
||||
<view class="hot-right">
|
||||
<text>今日已有{{ product.todaySale }}人下单</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格与标题区 (1:1 还原) -->
|
||||
<view class="info-section">
|
||||
<view class="price-row">
|
||||
<view class="price-left">
|
||||
<text class="price-label">券后￥</text>
|
||||
<text class="price-val">{{ product.price }}</text>
|
||||
<text class="price-old">￥{{ product.oldPrice }}</text>
|
||||
<!-- 活动横幅 -->
|
||||
<view class="activity-banner" v-if="product.activity && product.activity.app_img">
|
||||
<image :src="product.activity.app_img" mode="widthFix" class="banner-img"></image>
|
||||
<view class="banner-time" v-if="product.activityTime">TIME: {{ product.activityTime }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 热销榜单提示 -->
|
||||
<view class="hot-sale-bar" v-if="product.rankText">
|
||||
<view class="hot-left">
|
||||
<text class="trophy-icon">🏆</text>
|
||||
<text class="hot-text">{{ product.rankText }}</text>
|
||||
</view>
|
||||
<view class="price-right">
|
||||
已售 <text class="sales-red">{{ product.totalSale }}</text> 件
|
||||
<view class="hot-divider">|</view>
|
||||
<view class="hot-right">
|
||||
<text>今日已有{{ product.todaySale }}人下单</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="title-row">
|
||||
<view class="title-content">
|
||||
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQklEQVRYR+2XX4hUdRTHP+euGAsbLKiU9KDRRvhnvL+7E4v5YvYSZLIu6T5JBIJilH+eDERckUh90P5BFEFg9FAmlhj6pFugwj7s/d2ZnUgsWQUFldqFWBuEuUd+s3f0zrg7M46JL3sfZmB+v+85n985vznnXCF5lMxHIH3AS5XfHtN3AeScEG129sV9KMv0MTmra1bIiSj+l6CbngQA6H5Rlo0AS54MABcdQDPhvw589ZCQW4BnGmmaBNA+If9TI2PpdSXzDsg3jTRNAjAA8a9pY8LIYLXDpa9WO/NWgtPVf5oFqLGig0J+Vc2Jz4LUQDRyDzMAMxGYicBMBFqMgOvjuXIrvz9PNNVTHqhMLQO4Mivk9ibzxJ5myu5UdVGUzFnQsiHw3gC2AbMbF9GWdtwGjkD8/aRa9lSFcfI0S1eA9x2wsCUX04tCiNcLI39VNzUgm83Ob2truzM0NPT3/ZxmLIj/P0FcEXL3DtTT0zNnYmJCC4XCP2KMSefvgoj0hmF4S1n8LMzKA3MfEeJf8LKCvRQEwTxV/Rl4pZwAkV4HUDWSqeqxKIrWTaYjsxbk+CMCrBNyx5wN3/d/FJG3UvbOOYAHRjIRORCG4QfJDd8KfNIixLtC7gunDYJgv6rurLUzJUCyqc9aWx7DlMwmkLeTd4ZGKbkFXAT9VsiX50hjzFpgykjWAyiISH8Yhr+3ePqyLAiCxar6w3STdz0Apy+o6u4oilq6B77v94nIvnpj/3QAAyKyXFX/U9VZIuLG6yvANWC8QUQ6geeABSJyI9mrqjo8VbV0AOcrfwt3YuA9oBfYnog3xHF81fO83x4mFZ7nvRzHcQaojOYHgVPA56mIXHAAh4AdzrnL+djY2OXOzs6bwNOJw0Fr7SpjzHrA5bKZp99aezQIghOquiYRTHS3t88rFovPp+7E4XIpNsY4w5estbt8339dRE6nvYyPj7ePjo4WjTEngdXJ2oC1ttxDaorZL9baN7u6up7q6Ogopu04mCiKThpjPgRetNb23+sF3d3drw0PD58JgmCjqn6dFpZKpUX5fP4P3/c/FZH33Zq1tqqPVOqJqn4WRdHWbDb7QqlU+rMmXDustR9XfLm1uwCwZa9OY0IsAAAAAElFTkSuQmCC" class="title-platform-icon"></image>
|
||||
<text class="title-text">{{ product.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tags-row">
|
||||
<text class="tag-capsule" v-for="(tag, index) in product.labels" :key="index">{{ tag }}</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 class="info-section">
|
||||
<view class="price-row">
|
||||
<view class="price-left">
|
||||
<text class="price-label">券后￥</text>
|
||||
<text class="price-val">{{ product.price }}</text>
|
||||
<text class="price-old">￥{{ product.oldPrice }}</text>
|
||||
</view>
|
||||
<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
|
||||
</view>
|
||||
<view class="coupon-right">
|
||||
<view class="get-btn" @click="goBuy">立即领券</view>
|
||||
</view>
|
||||
<view class="coupon-circle top"></view>
|
||||
<view class="coupon-circle bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 品牌与店铺 (1:1 还原) -->
|
||||
<view class="brand-shop-card">
|
||||
<view class="brand-row">
|
||||
<text class="row-label">品牌</text>
|
||||
<view class="brand-content">
|
||||
<image :src="product.brandLogo" mode="aspectFit" class="brand-logo-img"></image>
|
||||
<text class="brand-name-text">{{ product.brandName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="shop-row">
|
||||
<text class="row-label">店铺</text>
|
||||
<view class="shop-main-content">
|
||||
<view class="shop-name-row">
|
||||
<view class="shop-title-box">
|
||||
<text :class="product.platform === '天猫' ? 'tag-tmall-mini' : 'tag-taobao-mini'">{{ product.platform === '天猫' ? 'T' : '淘' }}</text>
|
||||
<text class="shop-name-text">{{ product.shopName }}</text>
|
||||
</view>
|
||||
<text class="row-arrow">></text>
|
||||
</view>
|
||||
<view class="score-detail-row">
|
||||
<view class="score-item">
|
||||
描述 <text class="val-red">{{ product.scores.desc }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="score-item">
|
||||
服务 <text class="val-red">{{ product.scores.service }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="score-item">
|
||||
物流 <text class="val-red">{{ product.scores.post }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="price-right">
|
||||
已售 <text class="sales-red">{{ product.totalSale }}</text> 件
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 粉丝福利购 (1:1 还原) -->
|
||||
<view class="benefit-card" v-if="product.desc">
|
||||
<view class="benefit-header">
|
||||
<view class="benefit-title-box">
|
||||
<image src="/static/img/fuli.png" class="benefit-icon"></image>
|
||||
<text class="benefit-title">粉丝福利购</text>
|
||||
<view class="title-row">
|
||||
<view class="title-content">
|
||||
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQklEQVRYR+2XX4hUdRTHP+euGAsbLKiU9KDRRvhnvL+7E4v5YvYSZLIu6T5JBIJilH+eDERckUh90P5BFEFg9FAmlhj6pFugwj7s/d2ZnUgsWQUFldqFWBuEuUd+s3f0zrg7M46JL3sfZmB+v+85n985vznnXCF5lMxHIH3AS5XfHtN3AeScEG129sV9KMv0MTmra1bIiSj+l6CbngQA6H5Rlo0AS54MABcdQDPhvw589ZCQW4BnGmmaBNA+If9TI2PpdSXzDsg3jTRNAjAA8a9pY8LIYLXDpa9WO/NWgtPVf5oFqLGig0J+Vc2Jz4LUQDRyDzMAMxGYicBMBFqMgOvjuXIrvz9PNNVTHqhMLQO4Mivk9ibzxJ5myu5UdVGUzFnQsiHw3gC2AbMbF9GWdtwGjkD8/aRa9lSFcfI0S1eA9x2wsCUX04tCiNcLI39VNzUgm83Ob2truzM0NPT3/ZxmLIj/P0FcEXL3DtTT0zNnYmJCC4XCP2KMSefvgoj0hmF4S1n8LMzKA3MfEeJf8LKCvRQEwTxV/Rl4pZwAkV4HUDWSqeqxKIrWTaYjsxbk+CMCrBNyx5wN3/d/FJG3UvbOOYAHRjIRORCG4QfJDd8KfNIixLtC7gunDYJgv6rurLUzJUCyqc9aWx7DlMwmkLeTd4ZGKbkFXAT9VsiX50hjzFpgykjWAyiISH8Yhr+3ePqyLAiCxar6w3STdz0Apy+o6u4oilq6B77v94nIvnpj/3QAAyKyXFX/U9VZIuLG6yvANWC8QUQ6geeABSJyI9mrqjo8VbV0AOcrfwt3YuA9oBfYnog3xHF81fO83x4mFZ7nvRzHcQaojOYHgVPA56mIXHAAh4AdzrnL+djY2OXOzs6bwNOJw0Fr7SpjzHrA5bKZp99aezQIghOquiYRTHS3t88rFovPp+7E4XIpNsY4w5estbt8339dRE6nvYyPj7ePjo4WjTEngdXJ2oC1ttxDaorZL9baN7u6up7q6Ogopu04mCiKThpjPgRetNb23+sF3d3drw0PD58JgmCjqn6dFpZKpUX5fP4P3/c/FZH33Zq1tqqPVOqJqn4WRdHWbDb7QqlU+rMmXDustR9XfLm1uwCwZa9OY0IsAAAAAElFTkSuQmCC" class="title-platform-icon"></image>
|
||||
<text class="title-text">{{ product.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tags-row">
|
||||
<text class="tag-capsule" v-for="(tag, index) in product.labels" :key="index">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="benefit-content">
|
||||
<text class="benefit-text">{{ product.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详情控制条 (展开和收益) -->
|
||||
<view class="detail-control-bar">
|
||||
<view class="control-left">
|
||||
<text class="red-line"></text>
|
||||
<text class="control-title">详情</text>
|
||||
</view>
|
||||
<view class="control-right" @click="isExpanded = !isExpanded">
|
||||
<text class="expand-text">{{ isExpanded ? '收起' : '展开' }}</text>
|
||||
<view :class="['expand-arrow', isExpanded ? 'up' : 'down']"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文详情 -->
|
||||
<view class="detail-images" :class="{ 'collapsed': !isExpanded }">
|
||||
<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
|
||||
</view>
|
||||
|
||||
<!-- 同类型产品推荐 (1:1 还原) -->
|
||||
<view class="more-like com" v-if="similarProducts.length > 0">
|
||||
<view class="top g-df-c">
|
||||
<image src="https://web.cms.hykefu.cn/static/img/tongleituij.png" mode="widthFix" class="recommend-title-img"></image>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="list-container">
|
||||
<view class="g-shop-list" v-for="(item, idx) in similarProducts" :key="idx" @click="goToDetail(item.itemid)">
|
||||
<view class="shop-img">
|
||||
<image :src="item.itempic" mode="aspectFill" lazy-load></image>
|
||||
<!-- 优惠券模块 -->
|
||||
<view class="coupon-section" v-if="product.couponVal">
|
||||
<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="shop-box">
|
||||
<view class="shop-title van-multi-ellipsis--l2">
|
||||
<image :src="item.shoptype === 'B' ? 'https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4' : 'https://img-haodanku-com.cdn.fudaiapp.com/Fpx7_72-zY-n-zX_5_f2_f-f'" class="platform-icon"></image>
|
||||
<text>{{ item.itemtitle }}</text>
|
||||
<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
|
||||
</view>
|
||||
<view class="coupon-right">
|
||||
<view class="get-btn" @click="goBuy">立即领券</view>
|
||||
</view>
|
||||
<view class="coupon-circle top"></view>
|
||||
<view class="coupon-circle bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 品牌与店铺 -->
|
||||
<view class="brand-shop-card" v-if="product.shopName">
|
||||
<view class="brand-row" v-if="product.brandName">
|
||||
<text class="row-label">品牌</text>
|
||||
<view class="brand-content">
|
||||
<image :src="product.brandLogo" mode="aspectFit" class="brand-logo-img" v-if="product.brandLogo"></image>
|
||||
<text class="brand-name-text">{{ product.brandName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="shop-row">
|
||||
<text class="row-label">店铺</text>
|
||||
<view class="shop-main-content">
|
||||
<view class="shop-name-row">
|
||||
<view class="shop-title-box">
|
||||
<text :class="product.platform === '天猫' ? 'tag-tmall-mini' : 'tag-taobao-mini'" v-if="product.platform">{{ product.platform === '天猫' ? 'T' : '淘' }}</text>
|
||||
<text class="shop-name-text">{{ product.shopName }}</text>
|
||||
</view>
|
||||
<view class="shop-tag">
|
||||
<text v-if="item.is_low_price === '1'">{{ item.low_price_day }}天最低价</text>
|
||||
<text v-if="item.couponmoney">满{{ item.itemprice }}减{{ item.couponmoney }}</text>
|
||||
<text class="row-arrow">></text>
|
||||
</view>
|
||||
<view class="score-detail-row">
|
||||
<view class="score-item">
|
||||
描述 <text class="val-red">{{ product.scores.desc }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="flex-left flex-left-o">
|
||||
<view class="discount-price"> 券后¥ <text class="price-num">{{ item.itemendprice }}</text></view>
|
||||
<view class="g-coupon-label g-df-vc" v-if="item.couponmoney">
|
||||
<span class="g-df-c">券</span>
|
||||
<text>{{ item.couponmoney }}元</text>
|
||||
<view class="score-item">
|
||||
服务 <text class="val-red">{{ product.scores.service }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="score-item">
|
||||
物流 <text class="val-red">{{ product.scores.post }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 粉丝福利购 -->
|
||||
<view class="benefit-card" v-if="product.desc">
|
||||
<view class="benefit-header">
|
||||
<view class="benefit-title-box">
|
||||
<image src="/static/img/fuli.png" class="benefit-icon"></image>
|
||||
<text class="benefit-title">粉丝福利购</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="benefit-content">
|
||||
<text class="benefit-text">{{ product.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详情控制条 -->
|
||||
<view class="detail-control-bar">
|
||||
<view class="control-left">
|
||||
<text class="red-line"></text>
|
||||
<text class="control-title">详情</text>
|
||||
</view>
|
||||
<view class="control-right" @click="isExpanded = !isExpanded">
|
||||
<text class="expand-text">{{ isExpanded ? '收起' : '展开' }}</text>
|
||||
<view :class="['expand-arrow', isExpanded ? 'up' : 'down']"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文详情 -->
|
||||
<view class="detail-images" :class="{ 'collapsed': !isExpanded }">
|
||||
<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
|
||||
</view>
|
||||
|
||||
<!-- 同类型产品推荐 -->
|
||||
<view class="more-like com" v-if="similarProducts.length > 0">
|
||||
<view class="top g-df-c">
|
||||
<image src="https://web.cms.hykefu.cn/static/img/tongleituij.png" mode="widthFix" class="recommend-title-img"></image>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="list-container">
|
||||
<view class="g-shop-list" v-for="(item, idx) in similarProducts" :key="idx" @click="goToDetail(item.itemid)">
|
||||
<view class="shop-img">
|
||||
<image :src="item.itempic" mode="aspectFill" lazy-load></image>
|
||||
</view>
|
||||
<view class="shop-box">
|
||||
<view class="shop-title van-multi-ellipsis--l2">
|
||||
<image :src="item.shoptype === 'B' ? 'https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4' : 'https://img-haodanku-com.cdn.fudaiapp.com/Fpx7_72-zY-n-zX_5_f2_f-f'" class="platform-icon"></image>
|
||||
<text>{{ item.itemtitle }}</text>
|
||||
</view>
|
||||
<view class="shop-tag">
|
||||
<text v-if="item.is_low_price === '1'">{{ item.low_price_day }}天最低价</text>
|
||||
<text v-if="item.couponmoney">满{{ item.itemprice }}减{{ item.couponmoney }}</text>
|
||||
</view>
|
||||
<view class="flex-left flex-left-o">
|
||||
<view class="discount-price"> 券后¥ <text class="price-num">{{ item.itemendprice }}</text></view>
|
||||
<view class="g-coupon-label g-df-vc" v-if="item.couponmoney">
|
||||
<span class="g-df-c">券</span>
|
||||
<text>{{ item.couponmoney }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-left flex-left-t">
|
||||
<view class="sales-volume">已售{{ formatSales(item.itemsale) }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-left flex-left-t">
|
||||
<view class="sales-volume">已售{{ formatSales(item.itemsale) }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="end-tips">已为您加载完毕</view>
|
||||
<view class="custom-copyright">©️粉丝福利购专属优惠商城</view>
|
||||
</view>
|
||||
<view class="end-tips">已为您加载完毕</view>
|
||||
<view class="custom-copyright">©️粉丝福利购专属优惠商城</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="footer-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="footer-placeholder"></view>
|
||||
<!-- 骨架屏占位 -->
|
||||
<view class="skeleton-wrap" v-else>
|
||||
<view class="sk-swiper sk-animate"></view>
|
||||
<view class="sk-info">
|
||||
<view class="sk-price sk-animate"></view>
|
||||
<view class="sk-title sk-animate"></view>
|
||||
<view class="sk-title sk-short sk-animate"></view>
|
||||
<view class="sk-tags">
|
||||
<view class="sk-tag sk-animate"></view>
|
||||
<view class="sk-tag sk-animate"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sk-coupon sk-animate"></view>
|
||||
<view class="sk-shop sk-animate"></view>
|
||||
<view class="sk-detail sk-animate"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部固定操作栏 -->
|
||||
|
|
@ -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,35 +377,44 @@
|
|||
|
||||
// 获取同类推荐 (使用 itemid 和 son_category)
|
||||
this.getSimilarProducts(d.itemid, d.son_category);
|
||||
// 加载完商品后请求淘口令 / 领券链接
|
||||
this.fetchTaoWord();
|
||||
|
||||
this.isLoaded = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
fetchTaoWord() {
|
||||
fetchTaoWord(callback) {
|
||||
if (!this.product.taobaoId) return;
|
||||
uni.showLoading({ title: '加载中...', mask: true });
|
||||
uni.request({
|
||||
url: 'https://api.cmspro.haodanku.com/taobao/getTaoWord',
|
||||
url: 'https://v2.api.haodanku.com/ratesurl',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: {
|
||||
domain: 'cms.baimajiayuanjiankang.com',
|
||||
itemid: this.product.taobaoId,
|
||||
activityid: this.product.activityId || '',
|
||||
title: this.product.title || '',
|
||||
relation_id: '2887601176',
|
||||
cid: 'YsWZ21tx'
|
||||
get_taoword: 1,
|
||||
pid: 'mm_284380119_1881450385_111415850448',
|
||||
tb_name: 'michuan2018',
|
||||
relation_id: '2864040832',
|
||||
apikey: '5417B681C5EA'
|
||||
},
|
||||
success: (res) => {
|
||||
uni.hideLoading();
|
||||
const body = res.data || {};
|
||||
if (body.code === 200 && body.data) {
|
||||
this.product.taoCode = body.data.tao_code || '';
|
||||
this.product.spreadUrl = body.data.spread_url || '';
|
||||
this.product.couponUrl = body.data.coupon_url || '';
|
||||
if (body.code === 1 && body.data) {
|
||||
this.product.taoCode = body.data.taoword || '';
|
||||
this.product.couponUrl = body.data.coupon_click_url || '';
|
||||
if (callback) callback();
|
||||
} else {
|
||||
uni.showToast({ title: body.msg || '获取失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: '网络错误', icon: 'none' });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -420,37 +443,41 @@
|
|||
uni.navigateBack();
|
||||
},
|
||||
copyTaoWord() {
|
||||
if (!this.product.taoCode) {
|
||||
uni.showToast({ title: '口令加载中，请稍候', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
uni.setClipboardData({
|
||||
data: this.product.taoCode,
|
||||
success: () => {
|
||||
uni.showToast({ title: '淘口令已复制', icon: 'success' });
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '复制失败', icon: 'none' });
|
||||
this.fetchTaoWord(() => {
|
||||
if (!this.product.taoCode) {
|
||||
uni.showToast({ title: '暂无口令', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
uni.setClipboardData({
|
||||
data: this.product.taoCode,
|
||||
success: () => {
|
||||
uni.showToast({ title: '淘口令已复制', icon: 'success' });
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '复制失败', icon: 'none' });
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
goBuy() {
|
||||
const url = this.product.couponUrl;
|
||||
if (!url) {
|
||||
uni.showToast({ title: '链接加载中，请稍候', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
// #ifdef H5
|
||||
window.location.href = url;
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.setClipboardData({
|
||||
data: url,
|
||||
success: () => {
|
||||
uni.showToast({ title: '链接已复制，请到浏览器打开', icon: 'none' });
|
||||
this.fetchTaoWord(() => {
|
||||
const url = this.product.couponUrl;
|
||||
if (!url) {
|
||||
uni.showToast({ title: '暂无领券链接', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
// #ifdef H5
|
||||
window.location.href = url;
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.setClipboardData({
|
||||
data: url,
|
||||
success: () => {
|
||||
uni.showToast({ title: '链接已复制，请到浏览器打开', icon: 'none' });
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
handleScroll(e) {
|
||||
const scrollTop = e.detail.scrollTop;
|
||||
|
|
@ -483,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 {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<text class="search-input" style="color: #999;">输入关键词或粘贴商品标题</text>
|
||||
<view class="search-btn-red">搜索</view>
|
||||
</view>
|
||||
<image class="search-right-ad" src="https://img.bc.haodanku.com/cms_web/1651735687" mode="aspectFit"></image>
|
||||
<image class="search-right-ad" src="https://img.bc.haodanku.com/cms_web/1651735687" mode="aspectFit" @click="goToSaveMoney"></image>
|
||||
</view>
|
||||
<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
|
||||
<view class="nav-item" :class="{ 'active': currentTab === index }" v-for="(item, index) in navList" :key="index" @click="switchTab(index)">
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 金刚区 / 导航图标 (滑动 1:1 还原) -->
|
||||
<view class="grid-menu-wrap">
|
||||
<!-- <view class="grid-menu-wrap">
|
||||
<swiper class="grid-swiper" @change="e => gridCurrent = e.detail.current">
|
||||
<swiper-item v-for="(page, pIdx) in (gridMenuPages || [])" :key="pIdx">
|
||||
<view class="grid-menu">
|
||||
|
|
@ -56,23 +56,23 @@
|
|||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</swiper> -->
|
||||
<!-- 自定义指示器 -->
|
||||
<view class="grid-indicator" v-if="gridMenuPages && gridMenuPages.length > 1">
|
||||
<!-- <view class="grid-indicator" v-if="gridMenuPages && gridMenuPages.length > 1">
|
||||
<view class="indicator-bg">
|
||||
<view class="indicator-slider" :style="{ width: (gridMenuPages && gridMenuPages.length ? 100 / gridMenuPages.length : 100) + '%', transform: 'translateX(' + (gridCurrent * 100) + '%)' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 活动专区 (胶囊形轮播图) -->
|
||||
<view class="ad-swiper-box">
|
||||
<!-- <view class="ad-swiper-box">
|
||||
<swiper class="ad-swiper" circular autoplay indicator-dots indicator-active-color="#ff416c" indicator-color="rgba(255,255,255,0.6)">
|
||||
<swiper-item v-for="(ad, idx) in adList" :key="idx">
|
||||
<image class="ad-swiper-img" :src="ad" mode="aspectFill"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 今日值得买 (1:1 还原) -->
|
||||
<view class="worth-buy-card">
|
||||
|
|
@ -83,11 +83,10 @@
|
|||
</view>
|
||||
<view class="worth-header-right">
|
||||
<view class="avatar-list">
|
||||
<image class="avatar" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&q=80"></image>
|
||||
<image class="avatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80"></image>
|
||||
<image class="avatar" v-for="(item, index) in noticeList.slice(0, 3)" :key="index" :src="item.img"></image>
|
||||
<view class="avatar-more">...</view>
|
||||
</view>
|
||||
<text class="搶購人数">2263人正在抢</text>
|
||||
<text class="搶購人数">{{ qiangNum }}人正在抢</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="worth-subtitle-tag">高性价比好物，买TA!</view>
|
||||
|
|
@ -147,7 +146,7 @@
|
|||
<text class="brand-title">品牌特卖</text>
|
||||
<text class="brand-subtitle-tag">跟着潮流买 限时抢好货</text>
|
||||
</view>
|
||||
<text class="brand-more">更多 ></text>
|
||||
<text class="brand-more" @click="goToChoiceness">更多 ></text>
|
||||
</view>
|
||||
|
||||
<!-- 品牌特卖分页轮播 (以店铺为单位整体翻页) -->
|
||||
|
|
@ -197,7 +196,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 平台切换选项卡 -->
|
||||
<view class="platform-tabs">
|
||||
<!-- <view class="platform-tabs">
|
||||
<view class="p-tab-item" :class="{ 'active': platformActive === 0 }" @click="platformActive = 0">
|
||||
<text>淘宝</text>
|
||||
<view class="p-active-line" v-if="platformActive === 0"></view>
|
||||
|
|
@ -214,7 +213,7 @@
|
|||
<text>抖音电商</text>
|
||||
<view class="p-active-line" v-if="platformActive === 3"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 商品列表 (1:1 还原) -->
|
||||
<view class="goods-list" id="goods-list-section">
|
||||
|
|
@ -279,6 +278,7 @@
|
|||
// 初始兜底数据
|
||||
{ img: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&q=80', msg: '正在获取最新订单信息...' }
|
||||
],
|
||||
qiangNum: 2263,
|
||||
adList: [
|
||||
'https://images.unsplash.com/photo-1607083206968-13611e3d76db?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&q=80'
|
||||
|
|
@ -347,8 +347,19 @@
|
|||
uni.request({
|
||||
url: 'https://api.cmspro.haodanku.com/index/index?cid=YsWZ21tx',
|
||||
success: (res) => {
|
||||
if (res.data && res.data.code === 200 && res.data.data.navs) {
|
||||
this.menus = res.data.data.navs;
|
||||
if (res.data && res.data.code === 200 && res.data.data) {
|
||||
const d = res.data.data;
|
||||
if (Array.isArray(d.navs)) {
|
||||
this.menus = d.navs;
|
||||
}
|
||||
// 顶部轮播图
|
||||
if (Array.isArray(d.banners) && d.banners.length > 0) {
|
||||
this.banners = d.banners.map(b => b.img).filter(Boolean);
|
||||
}
|
||||
// 活动专区（胶囊形轮播图）
|
||||
if (Array.isArray(d.tile_long) && d.tile_long.length > 0) {
|
||||
this.adList = d.tile_long.map(t => t.img).filter(Boolean);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -376,6 +387,9 @@
|
|||
success: (res) => {
|
||||
if (res.data && res.data.code === 200) {
|
||||
this.noticeList = res.data.data.msgs;
|
||||
if (res.data.data.num) {
|
||||
this.qiangNum = res.data.data.num;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -483,6 +497,17 @@
|
|||
this.scrollTarget = 'top-section';
|
||||
}
|
||||
});
|
||||
},
|
||||
goToChoiceness() {
|
||||
console.log('触发品牌特卖更多跳转');
|
||||
uni.navigateTo({
|
||||
url: '/pages/special-sale/choicen'
|
||||
});
|
||||
},
|
||||
goToSaveMoney() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/save-money/save-money'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<view class="save-money-container">
|
||||
<!-- 沉浸式状态栏与高定自定义顶部导航条 -->
|
||||
<view class="custom-nav-bar">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="nav-header">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<text class="back-arrow">〈</text>
|
||||
</view>
|
||||
<text class="nav-title">省钱攻略</text>
|
||||
<view class="nav-right-placeholder"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 占位符防止图片被顶部悬浮遮挡 -->
|
||||
<view class="nav-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
|
||||
|
||||
<!-- 核心内容区：无缝连接的两张全景自适应介绍照片 -->
|
||||
<view class="photo-flow">
|
||||
<image class="flow-img" src="https://img.bc.haodanku.com/cms_web/cms-save-money-1" mode="widthFix"></image>
|
||||
<image class="flow-img" src="https://img.bc.haodanku.com/cms_web/cms-save-money-2" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 底部专属版权说明 -->
|
||||
<view class="custom-copyright">
|
||||
<text class="copyright-txt">©️粉丝福利购专属优惠商城</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 20
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
if (systemInfo.statusBarHeight) {
|
||||
this.statusBarHeight = systemInfo.statusBarHeight;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.save-money-container {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 顶部沉浸式导航条 */
|
||||
.custom-nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 60rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav-right-placeholder {
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
/* 照片瀑布流底板 */
|
||||
.photo-flow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0; /* 彻底清除图片间的空白缝隙 */
|
||||
}
|
||||
|
||||
.flow-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部版权说明 */
|
||||
.custom-copyright {
|
||||
padding: 40rpx 0 60rpx;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.copyright-txt {
|
||||
font-size: 24rpx;
|
||||
color: rgb(150, 151, 153);
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,843 @@
|
|||
<template>
|
||||
<view class="brand-detail-container">
|
||||
<!-- 自定义沉浸式头部导航 -->
|
||||
<view class="custom-header" :class="{ 'header-scrolled': scrollY > 50 }">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="nav-bar">
|
||||
<view class="nav-left back-area" @click="goBack">
|
||||
<text class="back-icon">〈</text>
|
||||
</view>
|
||||
<view class="nav-title" v-if="scrollY > 50">{{ brandInfo.fq_brand_name || '品牌详情' }}</view>
|
||||
<view class="nav-title" v-else></view>
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面滚动主视图区 -->
|
||||
<scroll-view scroll-y class="main-scroll-view" :show-scrollbar="false" @scroll="onScroll" @scrolltolower="loadMoreItems">
|
||||
<!-- 顶部品牌英雄传记大幕区 -->
|
||||
<view class="hero-biography-section">
|
||||
<!-- 底层唯美梦幻光影背景 -->
|
||||
<image class="biography-bg" :src="heroBgImage" mode="aspectFill"></image>
|
||||
<view class="biography-overlay"></view>
|
||||
|
||||
<!-- 品牌身份核心图腾层 -->
|
||||
<view class="biography-core" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
|
||||
<view class="logo-wrapper">
|
||||
<image class="brand-logo-img" :src="brandInfo.brand_logo || brandInfo.inside_logo" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="brand-title-box">
|
||||
<text class="b-name">{{ brandInfo.fq_brand_name || brandInfo.tb_brand_name }}</text>
|
||||
<!-- 并列双认证背书矩阵 -->
|
||||
<view class="capsules-row">
|
||||
<view class="b-fans-capsule" v-if="brandInfo.fans">
|
||||
<text class="heart-icon">❤</text>
|
||||
<text>{{ formattedFans }} 粉丝关注</text>
|
||||
</view>
|
||||
<!-- 月销量动态胶囊，0值全隐 -->
|
||||
<view class="b-sale-capsule" v-if="brandInfo.todaysale && Number(brandInfo.todaysale) > 0">
|
||||
<text class="fire-icon">🔥</text>
|
||||
<text>月销 {{ formatSale(brandInfo.todaysale) }} 件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 顶层海报极度纯净减负，旧版简介彻底下沉至卡片内展示 -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 浮动式品牌卖点、话题与下沉简介展示墙 (高级拟态玻璃卡片) -->
|
||||
<view class="compile-card-wrapper" v-if="compileLines.length > 0 || recommendTags.length > 0 || brandInfo.introduce">
|
||||
<view class="glass-compile-card">
|
||||
<!-- <view class="card-tag-title" v-if="compileLines.length > 0">✨ 品牌深度精编卖点</view>
|
||||
<view class="compile-line-item" v-for="(line, lIdx) in compileLines" :key="lIdx">
|
||||
<text class="line-dot">▪</text>
|
||||
<text class="line-text">{{ line }}</text>
|
||||
</view> -->
|
||||
|
||||
<!-- 推荐话题列表 (横向丝滑拖动轴) -->
|
||||
<scroll-view scroll-x class="recommend-tags-scroll" :show-scrollbar="false" v-if="recommendTags.length > 0">
|
||||
<view class="tags-scroll-inner">
|
||||
<text class="r-tag" v-for="(tag, tIdx) in recommendTags" :key="tIdx">{{ tag }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 下沉式高定深色简介与行末跟随红字按钮 -->
|
||||
<view class="card-intro-section" v-if="brandInfo.introduce">
|
||||
<text class="c-intro-txt">{{ isExpanded ? brandInfo.introduce : (brandInfo.introduce.length > 95 ? brandInfo.introduce.slice(0, 95) + '...' : brandInfo.introduce) }}</text>
|
||||
<text class="inline-toggle-btn" v-if="brandInfo.introduce.length > 95" @click="isExpanded = !isExpanded">{{ isExpanded ? ' 收起' : ' 展开'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 纯白容器大盘装配货盘引擎 -->
|
||||
<view class="items-container-box">
|
||||
<!-- 排序选项卡栏 (极细线分割) -->
|
||||
<view class="filter-bar">
|
||||
<view class="filter-item" :class="{ 'active': sortType === 1 }" @click="changeSort(1)">综合</view>
|
||||
<view class="filter-divider"></view>
|
||||
<view class="filter-item" :class="{ 'active': sortType === 2 }" @click="changeSort(2)">销量</view>
|
||||
<view class="filter-divider"></view>
|
||||
<view class="filter-item" :class="{ 'active': sortType === 3 }" @click="changeSort(3)">
|
||||
券后价
|
||||
<view class="price-arrows">
|
||||
<text class="up" :class="{ 'hl': sortType === 3 && priceOrder === 'asc' }">▲</text>
|
||||
<text class="down" :class="{ 'hl': sortType === 3 && priceOrder === 'desc' }">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 横向单列左图右文精装流 -->
|
||||
<view class="goods-list-single">
|
||||
<view class="single-goods-item" v-for="(goods, gIdx) in itemList" :key="gIdx" @click="goToDetail(goods.id)">
|
||||
<!-- 左侧圆角方图预览 -->
|
||||
<view class="g-img-left">
|
||||
<image class="goods-pic" :src="goods.itempic" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<!-- 右侧高阶信息核心带 -->
|
||||
<view class="g-info-right">
|
||||
<!-- 平台红标与加粗题词 -->
|
||||
<view class="g-title-row">
|
||||
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="platform-icon"></image>
|
||||
<text class="title-text">{{ goods.itemshorttitle || goods.itemtitle }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 精装浅粉底色圆角标签阵列 -->
|
||||
<view class="g-labels-row" v-if="goods.label && goods.label.length > 0">
|
||||
<text class="g-label-tag" v-for="(tag, tIdx) in goods.label.slice(0, 2)" :key="tIdx">{{ tag }}</text>
|
||||
</view>
|
||||
<view class="g-labels-row" v-else-if="goods.discount">
|
||||
<text class="g-label-tag">省{{ goods.discount }}元</text>
|
||||
</view>
|
||||
<view class="g-labels-row" v-else>
|
||||
<text class="g-label-tag">精选特卖</text>
|
||||
</view>
|
||||
|
||||
<!-- 超大字粉红券后价与实心红底连体券标 -->
|
||||
<view class="g-price-row">
|
||||
<view class="price-left">
|
||||
<text class="p-tip">券后</text>
|
||||
<text class="p-symbol">￥</text>
|
||||
<text class="p-integer">{{ goods.itemendprice }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 连体实心红胶囊 -->
|
||||
<view class="coupon-solid-box" v-if="goods.couponmoney > 0">
|
||||
<text class="c-left">券</text>
|
||||
<text class="c-right">{{ goods.couponmoney }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部已售与店铺背书墙 -->
|
||||
<view class="g-bottom-row">
|
||||
<text class="sales">已售{{ formatSale(goods.itemsale) }}件</text>
|
||||
<text class="divider">|</text>
|
||||
<text class="shop">店铺：{{ goods.shopname || brandInfo.tb_brand_name || brandInfo.fq_brand_name || '官方旗舰店' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部极致干脆的高端提示语留白区 -->
|
||||
<view class="pure-loading-footer">
|
||||
<text v-if="loading">加载中...</text>
|
||||
<text v-else-if="finished">已为您加载完毕</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 44,
|
||||
scrollY: 0,
|
||||
brandId: 0,
|
||||
brandInfo: {},
|
||||
itemList: [],
|
||||
page: 1,
|
||||
sortType: 1, // 1:综合, 2:销量, 3:券后价
|
||||
priceOrder: 'desc',
|
||||
isExpanded: false,
|
||||
loading: false,
|
||||
finished: false,
|
||||
// 预设高定静态莫兰迪光影壁纸库，用于海报衬底自愈
|
||||
defaultBanners: [
|
||||
'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&q=80'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
heroBgImage() {
|
||||
// 优先采用配置中的合成图或随机自愈壁纸
|
||||
if (this.brandInfo.composeimage) {
|
||||
return this.brandInfo.composeimage.replace('http://', 'https://');
|
||||
}
|
||||
const idx = Number(this.brandId) || 1;
|
||||
return this.defaultBanners[idx % this.defaultBanners.length];
|
||||
},
|
||||
formattedFans() {
|
||||
const f = this.brandInfo.fans;
|
||||
if (!f) return '10万+';
|
||||
if (f >= 10000) {
|
||||
return (f / 10000).toFixed(1) + '万';
|
||||
}
|
||||
return f;
|
||||
},
|
||||
compileLines() {
|
||||
const comp = this.brandInfo.brand_compile || '';
|
||||
if (!comp) return [];
|
||||
// 根据 \n 拆分，过滤掉空行，并去掉首位可能带有的星号及箭头
|
||||
return comp.split('\n')
|
||||
.map(s => s.trim())
|
||||
.filter(s => s.length > 0)
|
||||
.map(s => s.replace(/^[★☆▪•]/, '').trim());
|
||||
},
|
||||
recommendTags() {
|
||||
const rec = this.brandInfo.brand_recommend;
|
||||
if (Array.isArray(rec)) return rec;
|
||||
if (typeof rec === 'string' && rec.length > 0) {
|
||||
try {
|
||||
return JSON.parse(rec);
|
||||
} catch (e) {
|
||||
return rec.split(' ').filter(s => s.length > 0);
|
||||
}
|
||||
}
|
||||
return [];
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
this.statusBarHeight = sysInfo.statusBarHeight || 44;
|
||||
|
||||
this.brandId = options.id || options.brand_id || 1292;
|
||||
console.log('品牌详情专页加载，传入目标ID:', this.brandId);
|
||||
|
||||
this.fetchBrandDetailData();
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
const pages = getCurrentPages();
|
||||
if (pages && pages.length > 1) {
|
||||
uni.navigateBack({ delta: 1 });
|
||||
} else {
|
||||
uni.reLaunch({ url: '/pages/special-sale/choicen' });
|
||||
}
|
||||
},
|
||||
goToDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/detail?id=${id}`
|
||||
});
|
||||
},
|
||||
onScroll(e) {
|
||||
this.scrollY = e.detail.scrollTop;
|
||||
},
|
||||
formatSale(val) {
|
||||
if (!val) return '1.0万';
|
||||
if (val >= 10000) {
|
||||
return (val / 10000).toFixed(1) + '万';
|
||||
}
|
||||
return val;
|
||||
},
|
||||
changeSort(type) {
|
||||
if (type === 3 && this.sortType === 3) {
|
||||
this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
this.sortType = type;
|
||||
if (type === 3) this.priceOrder = 'desc';
|
||||
}
|
||||
this.page = 1;
|
||||
this.finished = false;
|
||||
this.itemList = [];
|
||||
this.fetchBrandDetailData();
|
||||
},
|
||||
loadMoreItems() {
|
||||
if (this.loading || this.finished) return;
|
||||
this.page += 1;
|
||||
console.log('品牌单品列表触发触底翻页，发起页码:', this.page);
|
||||
this.fetchBrandDetailData(true);
|
||||
},
|
||||
fetchBrandDetailData(isLoadMore = false) {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
|
||||
if (!isLoadMore) {
|
||||
uni.showLoading({ title: '加载中...', mask: true });
|
||||
}
|
||||
|
||||
// 推导后端要求排序规则：综合为0，销量为3，券后价升序为8，降序为9
|
||||
let sortParam = 0;
|
||||
if (this.sortType === 2) {
|
||||
sortParam = 3;
|
||||
} else if (this.sortType === 3) {
|
||||
sortParam = this.priceOrder === 'asc' ? 8 : 9;
|
||||
}
|
||||
|
||||
uni.request({
|
||||
url: `https://api.cmspro.haodanku.com/brandItem/detail?page=${this.page}&page_size=20&sort=${sortParam}&brand_id=${this.brandId}&cid=YsWZ21tx`,
|
||||
success: (res) => {
|
||||
if (res.data && res.data.code === 200 && res.data.data) {
|
||||
// 挂载核心品牌自画像
|
||||
if (res.data.data.brand_info) {
|
||||
const info = res.data.data.brand_info;
|
||||
if (info.brand_logo) info.brand_logo = info.brand_logo.replace('http://', 'https://');
|
||||
if (info.inside_logo) info.inside_logo = info.inside_logo.replace('http://', 'https://');
|
||||
this.brandInfo = info;
|
||||
}
|
||||
|
||||
// 挂载分页商品方阵
|
||||
if (res.data.data.items && Array.isArray(res.data.data.items.list)) {
|
||||
const list = res.data.data.items.list.map(goods => {
|
||||
let pic = goods.itempic ? goods.itempic.replace('http://', 'https://') : '';
|
||||
return {
|
||||
id: goods.id,
|
||||
itemtitle: goods.itemtitle,
|
||||
itemshorttitle: goods.itemshorttitle,
|
||||
itempic: pic,
|
||||
itemprice: goods.itemprice,
|
||||
itemendprice: goods.itemendprice,
|
||||
itemsale: goods.itemsale,
|
||||
discount: goods.discount,
|
||||
couponmoney: parseFloat(goods.couponmoney || 0),
|
||||
shopname: goods.shopname || (goods.shoptype === 'B' ? '天猫超市' : ''),
|
||||
label: Array.isArray(goods.label) ? goods.label : []
|
||||
};
|
||||
});
|
||||
|
||||
if (isLoadMore) {
|
||||
this.itemList = [...this.itemList, ...list];
|
||||
} else {
|
||||
this.itemList = list;
|
||||
}
|
||||
|
||||
const pagination = res.data.data.items.pagination;
|
||||
if (pagination && this.page >= pagination.page_count) {
|
||||
this.finished = true;
|
||||
} else if (list.length < 20) {
|
||||
this.finished = true;
|
||||
}
|
||||
} else {
|
||||
if (isLoadMore) this.finished = true;
|
||||
}
|
||||
} else {
|
||||
uni.showToast({ title: '加载专区数据失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('拉取品牌专页接口错误', err);
|
||||
if (isLoadMore && this.page > 1) this.page -= 1;
|
||||
},
|
||||
complete: () => {
|
||||
this.loading = false;
|
||||
if (!isLoadMore) uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.brand-detail-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f5f6f8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 顶部回退沉浸式导航栏 */
|
||||
.custom-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.header-scrolled {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: blur(20rpx);
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
width: 80rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 38rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.header-scrolled .back-icon {
|
||||
color: #333333;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.header-scrolled .nav-title {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 80rpx;
|
||||
}
|
||||
|
||||
/* 滚动主体区 */
|
||||
.main-scroll-view {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 品牌英雄大幕传记层 */
|
||||
.hero-biography-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 480rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.biography-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.biography-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(138,43,226,0.35) 50%, rgba(20,20,20,0.85) 100%);
|
||||
}
|
||||
|
||||
.biography-core {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
padding: 12rpx;
|
||||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.25);
|
||||
border: 4rpx solid rgba(255,255,255,0.8);
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.brand-logo-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.brand-title-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.b-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2rpx;
|
||||
text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.capsules-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.b-fans-capsule {
|
||||
background: linear-gradient(to right, rgba(255,65,108,0.85), rgba(255,75,43,0.85));
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(8rpx);
|
||||
}
|
||||
|
||||
.b-sale-capsule {
|
||||
background: linear-gradient(to right, rgba(255,140,0,0.85), rgba(255,69,0,0.85));
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(8rpx);
|
||||
}
|
||||
|
||||
.heart-icon, .fire-icon {
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.b-fans-capsule text, .b-sale-capsule text {
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 拟态玻璃精编卖点与下沉简介卡片层 */
|
||||
.card-intro-section {
|
||||
margin-top: 16rpx;
|
||||
border-top: 1rpx dashed rgba(0,0,0,0.06);
|
||||
padding-top: 16rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c-intro-txt {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
line-height: 1.6;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.inline-toggle-btn {
|
||||
color: #ff416c;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
padding-left: 6rpx;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* 拟态玻璃精编卖点卡片层 */
|
||||
.compile-card-wrapper {
|
||||
padding: 0 30rpx;
|
||||
margin-top: -24rpx;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.glass-compile-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
|
||||
border: 1rpx solid rgba(255,255,255,0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-tag-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #8a2be2;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.compile-line-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.line-dot {
|
||||
color: #ff416c;
|
||||
font-size: 24rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.line-text {
|
||||
font-size: 26rpx;
|
||||
color: #444444;
|
||||
line-height: 1.45;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.recommend-tags-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tags-scroll-inner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 0;
|
||||
}
|
||||
|
||||
.r-tag {
|
||||
font-size: 24rpx;
|
||||
color: #555555;
|
||||
background-color: #f4f5f9;
|
||||
padding: 10rpx 24rpx;
|
||||
border-radius: 26rpx;
|
||||
margin-right: 16rpx;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 纯白装配大底盘与过滤排序引擎 */
|
||||
.items-container-box {
|
||||
background: #ffffff;
|
||||
border-top-left-radius: 24rpx;
|
||||
border-top-right-radius: 24rpx;
|
||||
margin: 0 24rpx;
|
||||
padding-bottom: 40rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filter-item.active {
|
||||
color: #ff416c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.filter-divider {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.price-arrows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.price-arrows text {
|
||||
font-size: 16rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.price-arrows text.hl {
|
||||
color: #ff416c;
|
||||
}
|
||||
|
||||
/* 单列横排货盘流 */
|
||||
.goods-list-single {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.single-goods-item {
|
||||
display: flex;
|
||||
padding: 24rpx;
|
||||
border-bottom: 1rpx solid #f9f9f9;
|
||||
}
|
||||
|
||||
.g-img-left {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.goods-pic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.g-info-right {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 4rpx 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.g-title-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.platform-icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-top: 4rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.g-labels-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.g-label-tag {
|
||||
font-size: 20rpx;
|
||||
color: #ff416c;
|
||||
background: #fff5f7;
|
||||
border: 1rpx solid #ffd6de;
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.g-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-top: auto;
|
||||
padding-top: 12rpx;
|
||||
}
|
||||
|
||||
.price-left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.p-tip {
|
||||
font-size: 22rpx;
|
||||
color: #ff416c;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.p-symbol {
|
||||
font-size: 24rpx;
|
||||
color: #ff416c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.p-integer {
|
||||
font-size: 38rpx;
|
||||
color: #ff416c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 连体实心红胶囊 */
|
||||
.coupon-solid-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ff416c;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
height: 32rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.c-left {
|
||||
font-size: 18rpx;
|
||||
color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 0 8rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c-right {
|
||||
font-size: 18rpx;
|
||||
color: #ffffff;
|
||||
padding: 0 10rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.g-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 12rpx;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.shop {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pure-loading-footer {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding: 40rpx 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
# 上下文
|
||||
文件名：task.md
|
||||
创建于：2026-05-12T16:25:00+08:00
|
||||
创建者：AI
|
||||
关联协议：RIPER-5 + Multidimensional + Agent Protocol
|
||||
|
||||
# 任务描述
|
||||
点击更多的时候 需要跳转新页面 需要新建一个页面 https://cms.baimajiayuanjiankang.com/?cid=YsWZ21tx#/special-sale/choicen 页面是这样的 最好是可以1比1还原 商品可以先固定数据 后期通过接口替换
|
||||
|
||||
# 项目概述
|
||||
baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
|
||||
|
||||
---
|
||||
*以下部分由 AI 在协议执行过程中维护*
|
||||
---
|
||||
|
||||
# 分析 (由 RESEARCH 模式填充)
|
||||
- **跳转触发点**：`pages/index/index.vue` 第 150 行附近的 `<text class="brand-more">更多 ></text>` 按钮。
|
||||
- **目标路由**：由于参考链接路由格式为 `#/special-sale/choicen`，我们计划新建页面 `pages/special-sale/choicen.vue`（或同级目录结构）。
|
||||
- **视觉结构还原分析**：
|
||||
- 参考链接精选专区（Choiceness）的典型布局包含：顶部自定义导航栏（带返回键及页面标题“精选品牌”或“品牌特卖”）、分类/标签栏（可选）、以及依次垂直排布的品牌专场卡片。
|
||||
- 每个品牌专场卡片通常有：品牌背景图/横幅、品牌标识（Logo）、品牌名称、专场活动标语（如“官方直降 爆款秒杀”）、以及该品牌主推的若干款精选商品（带图片、券后价、原价、领券标签等）。
|
||||
- 在首页 `index.vue` 中，已经实现了高度精美的品牌特卖 UI（类名为 `brand-sale-module`，包含 `brand-highlight`、`brand-goods-grid` 等结构）。我们可以直接抽取并针对全屏滚动页面进行适配与增强，实现 1:1 视觉惊艳还原。
|
||||
- **数据处理**：初期提供写死的丰富精选品牌与商品结构数据，并在 `onLoad` 中预留对接 `https://api.cmspro.haodanku.com/brandItem/choiceness?cid=YsWZ21tx` 接口的完整逻辑。
|
||||
- **后续追加需求（上方品牌横向滚动栏）分析**：
|
||||
- 用户上传了精美参考截图，展示页面最上方（自定义头部下方）有一段高保真的品牌队列区域，带有深邃且通透的紫色渐变背景。
|
||||
- 队列内部包含多个横向依次排列的圆角小卡片，每个卡片上半部分为纯白背景包裹的品牌 Logo，下半部分为浅橘色/浅桃红底色配上居中品牌文字（如“DARLIE好来”、“英氏”、“宝宝金水”等）。
|
||||
- 最下方带有一个精巧的横向自定义滚动指示条（底栏条配合纯白游标）。
|
||||
- **接口对接与横向无限翻页**：除了加载首屏 `page=1` 外，当向右滑动接近末尾时，需要支持无缝触发下一页加载请求（`@scrolltolower` 机制）。我们将在组件模型中引入 `topPage`、`topLoading`、`topFinished` 分页控制器，在每次触底触发追加数据流合并，并支持指示器游标自动随动态 `scrollWidth` 延展更新。
|
||||
|
||||
# 提议的解决方案 (由 INNOVATE 模式填充)
|
||||
采用独立页面开发与双重数据融合方案：
|
||||
1. **新建高定页面**：在 `pages/special-sale/choicen.vue` 创建沉浸式精选品牌特卖页。
|
||||
2. **1:1 极致视觉还原**：沿用和升级首页已有的大牌主推沉浸背景、圆角白底 Logo 浮层、品牌直降文案及 1:1 方形精选商品大图带满减券胶囊的高级样式，构建连贯流畅的垂直滚动品牌大赏。
|
||||
3. **新增上方品牌滚动专区**：在顶部置入高保真的深紫渐变横向滚动栏，内部卡片呈现上部白底 Logo 与下部浅粉底色文字的精装层级，配备丝滑响应的白游标自定义联动进度条，并支持触底向右无限翻页并发加载。
|
||||
4. **数据双向兼容与下沉爆品生态**：预设大牌专卖与顶部滚动小卡片的双重固定底座，同时异步拉取两大真实 API 数据流实现智能覆盖替换。特别打通底部 `brandSale` 品牌热销数据源，构建高保真双列圆角商品矩阵，商品卡片底盘嵌入专属圆形品牌 Logo 与身份背书，打造连贯无缝的黄金转化流。
|
||||
5. **横向分类多维导航与专属会场动态折叠引流**：嵌入横滑类目导航栏。切换瞬间实行原子级的数据清空 `brandList = []`；若目标分类空载，自动激活空态面板。深度打通精选接口与分类接口的主键差异化下钻规则构建双轨网络。实现底部热销推荐商品池的智能折叠隔离：仅在精选/推荐会场 (`activeCatId === 0`) 开放展示公共热卖爆品矩阵，其他选项卡下自动屏蔽隐去，打造纯粹聚焦的细分浏览生态。
|
||||
6. **全景品牌专区详情页构建与动态单行标签货盘引擎**：新建独立路由 `pages/special-sale/details`。顶部构筑沉浸式品牌故事底盘。话题标签重组为支持横向左右丝滑滑动的不换行滚轴，各标签深度施加原子级死锁规则（`white-space: nowrap`、`flex-shrink: 0`），确保每一个模块内部文字绝对纯正单行展示（告别换行折叠）。下侧紧贴深色下沉长简介。底层搭载单列大白容器货盘流。
|
||||
7. **大牌主站标语横幅全景图形化升级**：彻底移除原版采用代码拼接的渐变标语卡片，全面替以网络图床分发的定稿背书图 `tm-desc.png`，采用等比拉展策略完美契合容器边缘。
|
||||
8. **省钱攻略无缝长图生态构建**：开辟全新独立页面 `pages/save-money/save-money`。装载自定义返回条与两张无缝贴合的宽度等比科普大图，底部点缀中灰色泽版权声明。同时在首页搜索栏右侧广告图绑定下钻通道，打通流量转化闭环。
|
||||
9. **统一返回按钮UI规范**：参考 `category_detail.vue` 的返回样式，将各页面返回符号全部重塑为宽体符号 `〈`。
|
||||
5. **触发打通**：将首页“更多”按钮绑定路由跳转事件，实现闭环。
|
||||
10. **值得买动态数据绑定**：复用 `getNoticeList` 接口拉取链路，同步保存返回的 `num` 字段至新增响应式变量 `qiangNum`，并在模板中以 `v-for` 循环渲染前 3 个订单头像，结合原有的负边距堆叠样式，提供生动真实的抢购氛围。
|
||||
|
||||
# 实施计划 (由 PLAN 模式生成)
|
||||
实施检查清单：
|
||||
1. [修改 pages.json] 在 pages 数组中增加 `pages/special-sale/choicen` 页面路由配置，设置自定义导航样式。（已完成）
|
||||
2. [新建 pages/special-sale/choicen.vue] 创建精选品牌特卖独立页面，编写高保真沉浸式大牌展示与商品卡片，注入丰富精美的默认固定数据，并预置真实 API 接口拉取与赋值逻辑。（已完成）
|
||||
3. [修改 pages/index/index.vue] 为首页品牌特卖模块的“更多 >”文字添加点击跳转事件，打通前往新页面的访问入口。（已完成）
|
||||
4. [更新 pages/special-sale/choicen.vue] 追加页面上方深紫渐变背景的横向品牌小卡片滚动专区，注入写死底座 20 个品牌队列，绑定滚动指示器游标联动计算，并支持向右滑动边缘触发无限翻页并发加载。
|
||||
5. [更新 pages/special-sale/choicen.vue] 在页面底部置入“品牌热销爆品榜”双列高保真卡片流，实现包含商品大图、折扣价及底端圆形品牌身份条的丰富布局，同步请求真实 `brandSale` 接口实现智能覆盖。
|
||||
6. [更新 pages/special-sale/choicen.vue] 在横幅区下方新增高雅横滑圆角类目导航栏，首项置入“精选”并动态解析拉回的类目数组，打通 `@click` 触发机制实现维度切换与专场列表过滤重绘。
|
||||
7. [更新 pages/special-sale/choicen.vue] 改造分类切换中心接入智能分流状态机：精选走全量接口，指定类目接驳 `brandCategory` 并内置高级莫兰迪/光影图底座填补品牌背景海报缺口，保障页面视图结构高级无损呈现。
|
||||
8. [更新 pages/special-sale/choicen.vue] 植入切换类目原子级清零机制 `brandList = []`，并在视图顶部高保真还原无数据占位板（短截紫杠 + “已为您加载完毕”莫兰迪字样），阻断脏数据污染。
|
||||
9. [更新 pages.json] 注册品牌专属独立展示页面 `pages/special-sale/details`，开启沉浸导航。
|
||||
10. [创建 pages/special-sale/details.vue] 全栈开发品牌专区页面，上部展示全方位品牌小传卖点墙，下层接驳 `brandItem/detail` 接口加载双列爆品货盘，实现触底分页。
|
||||
11. [更新 pages/special-sale/choicen.vue] 将横滑及主体品牌卡片点击通道，无缝挂载路由传递 `brand_id` 实现闭环下钻。
|
||||
12. [更新 pages/special-sale/choicen.vue] 极精简校准 `brand_id` 取值链路回归原生列表主键 `id`，抹除跨界字段 `tb_brandid` 的顶替污染，达成系统内绝对一致的数据闭闭环。
|
||||
13. [重构返回按键 UI 规范] 参照 `category_detail.vue` 样式，将独立品牌专供详情页 `details.vue` 及主站页面 `choicen.vue` 顶层的返回符号全部重塑统一为经典的宽体结构 `<text class="back-icon">〈</text>`。
|
||||
14. [重构 pages/special-sale/details.vue 货盘] 彻底抛弃双列网格！依据截图 1:1 重构货盘，包裹进顶端大圆角的纯白容器，呈现精致的单列左图右文流。
|
||||
15. [优化 pages/special-sale/details.vue 头层] 在品牌自画像区的“粉丝关注”后方嵌入并列展示的 `todaysale` 月销背书胶囊，设定严密的 `todaysale > 0` 渲染逻辑。
|
||||
16. [增强 pages/special-sale/details.vue 简介] 针对后方被截断的品牌长文简介，补充 `isExpanded` 弹性伸缩交互通道与精致半透明控制按键。
|
||||
17. [重构 pages/special-sale/details.vue 简介排版] 完美对标实机截图！将长简介从顶层大幕彻底下沉迁移至下方卖点卡片内部（话题标签组下方），文字改为高对比深色，末尾无缝追加行内红字“展开 ∨”/“收起 ∧”动态控制按钮。
|
||||
18. [升级 pages/special-sale/details.vue 标签轴] 将推荐话题标签墙重构成支持横向左右自由滑动的不换行滚轴，各标签深度对标采用莫兰迪浅底衬、深灰色文本与高定圆润胶囊边框。
|
||||
19. [死锁 pages/special-sale/details.vue 标签单行] 针对小模块出现三行文字的实机痛点，为 `.r-tag` 注入强力防折行死锁规则（`white-space: nowrap; flex-shrink: 0`），保证文字自始至终绝对单行平铺展示。
|
||||
20. [分发 pages/special-sale/choicen.vue 双轨传参] 打通后台接口差异化规则！在 `goToBrandDetail` 跳转中感知选项卡状态，若是精选专供 (`activeCatId === 0`) 传参采用 `brand_id`，若是其他选项卡传参采用 `id`，并在数据源映射时双向保留这两个原生主键。
|
||||
21. [图化 pages/special-sale/choicen.vue 横幅区] 全面提升首页首图视觉美感！移除原纯文字渐变背景横幅，替换为高清定稿图片 `tm-desc.png`，采用自适应布局。
|
||||
22. [隔离 pages/special-sale/choicen.vue 热单池] 打通选项卡垂直浏览心智！为底部热单分隔栏、瀑布流容器及提示语附加 `v-if="activeCatId === 0"` 屏障，确保仅推荐/精选会场展示，其他类目自动隐去。
|
||||
23. [新建 pages/save-money/save-money.vue 长页] 打通粉丝省钱心智链路！新建独立省钱长页，搭载宽体返回键、无缝贴合的科普长图及灰色版权说明；并在首页右上侧广告图挂载对应跳转通道。
|
||||
24. [对接 pages/index/index.vue 值得买数据] 引入 `qiangNum` 响应式变量，重塑 `getNoticeList` 回调注入实时拉取的抢购数字，并在界面通过 `v-for` 循环遍历前 3 个订单头像完美重置右侧状态展示。
|
||||
5. [更新 task.md] 记录各个执行步骤完成情况与状态审核。
|
||||
|
||||
# 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新)
|
||||
> 正在执行: "步骤24: [对接 pages/index/index.vue 值得买数据] 引入 qiangNum 变量同步抢购人数及循环渲染上方订单头像"
|
||||
|
||||
# 任务进度 (由 EXECUTE 模式在每步完成后追加)
|
||||
* 2026-05-12T16:29:00+08:00
|
||||
* 步骤：1. [修改 pages.json] 在 pages 数组中增加页面路由配置
|
||||
* 修改：`pages.json` 添加 `pages/special-sale/choicen` 路由配置
|
||||
* 更改摘要：注册新页面支持跳转
|
||||
* 原因：执行计划步骤 1
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T16:32:00+08:00
|
||||
* 步骤：2. [新建 pages/special-sale/choicen.vue] 创建精选品牌特卖独立页面
|
||||
* 修改：新建 `pages/special-sale/choicen.vue` 源码
|
||||
* 更改摘要：实现沉浸式大牌展示与兼容数据源拉取
|
||||
* 原因：执行计划步骤 2
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T16:33:00+08:00
|
||||
* 步骤：3. [修改 pages/index/index.vue] 打通跳转逻辑
|
||||
* 修改：`pages/index/index.vue` 绑定点击事件及添加 `goToChoiceness` 方法
|
||||
* 更改摘要：绑定更多按钮的路由访问事件
|
||||
* 原因：执行计划步骤 3
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T16:35:00+08:00
|
||||
* 步骤：4. [更新 task.md] 记录状态审核
|
||||
* 修改：`task.md` 填充各步骤闭环状态
|
||||
* 更改摘要：完成任务追踪汇总
|
||||
* 原因：执行计划步骤 4
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T16:56:00+08:00
|
||||
* 步骤：5. [追加上方品牌滚动栏] 实现横向小卡片队列与游标联动
|
||||
* 修改：`pages/special-sale/choicen.vue` 全景重置
|
||||
* 更改摘要：追加深紫光晕横向队列、20组写死底座及并发API请求
|
||||
* 原因：执行计划追加步骤 4
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T17:05:00+08:00
|
||||
* 步骤：6. [横向右滑无限加载追加] 集成触底翻页合并数据流
|
||||
* 修改：`pages/special-sale/choicen.vue` 补充 `@scrolltolower` 监听及翻页状态机
|
||||
* 更改摘要：实现防抖加锁、页码递增、数据结构展开追加及错误回退处理
|
||||
* 原因：执行计划追加后续需求
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T17:12:00+08:00
|
||||
* 步骤：7. [打通下方品牌热卖单品流] 注入 brandSale 接口实现双列身份认证矩阵
|
||||
* 修改：`pages/special-sale/choicen.vue` 重构追加 `.brand-sale-grid` 矩阵及拉取挂载逻辑
|
||||
* 更改摘要：适配呈现带疯抢数量、大字券后价、领券红框以及圆形Logo认证底条的高能转化卡片流
|
||||
* 原因：拥抱最新传入的核心热销数据源生态
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T17:23:00+08:00
|
||||
* 步骤：8. [横向分类多维导航栏嵌入] 打通带有 is_get_category 接口分类筛选机制
|
||||
* 修改：`pages/special-sale/choicen.vue` 追加 `.category-tabs-container` 布局及 `@click` 触发机制
|
||||
* 更改摘要：1:1还原截图紫色高亮与下划线游标，提取接口返回分类并在头部补充全景“精选”兜底流
|
||||
* 原因：满足多维度分类浏览的用户诉求
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T17:31:00+08:00
|
||||
* 步骤：9. [按类查询专属 brandCategory 分流引擎] 实现点击非精选类目映射及背景自愈重构
|
||||
* 修改：`pages/special-sale/choicen.vue` 重塑 `onSelectCategory` 接驳 `fetchBrandCategoryData`
|
||||
* 更改摘要：多路路由分控，非精选调用 brandCategory 接口，结合高精唯美静物/光影壁纸库智能映射填补海报大图缺口
|
||||
* 原因：精准对接真实的类目维度专场下发层级
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T17:52:00+08:00
|
||||
* 步骤：8. [更新 pages/special-sale/choicen.vue] 切换分类即时清零与空载占位板注入
|
||||
* 修改：`pages/special-sale/choicen.vue` 调整 `onSelectCategory` 与模板视图
|
||||
* 更改摘要：在分流起点加入 `this.brandList = [];` 阻断前序类目残留，并在首层置入 1:1 还原截图的亮紫杠及“已为您加载完毕”莫兰迪灰提示卡片
|
||||
* 原因：解决上一个有下一个无时数据不更新的混淆痛点，完美提供高保真空态反馈
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T18:06:00+08:00
|
||||
* 步骤：9-11. [创建品牌详情页及入口绑定] 实现全方位品牌小传展示与爆品分页
|
||||
* 修改：新建 `pages/special-sale/details.vue`，更新 `pages.json` 与 `choicen.vue`
|
||||
* 更改摘要：注册沉浸式独立品牌路由；构建上层品牌故事传记区及下层触底翻页双列商品流矩阵；改造主站各级入口绑定下钻跳转
|
||||
* 原因：搭建完善的品牌心智沉淀闭环
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-12T18:15:00+08:00
|
||||
* 步骤：12. [更新 pages/special-sale/choicen.vue] 校准 brand_id 取值回归原生列表 id
|
||||
* 修改：`pages/special-sale/choicen.vue` 剥离适配器中的 `tb_brandid` 引用
|
||||
* 更改摘要：极其干净地将精选流及分类专场映射返回的原生列表主键 `shop.id` 和 `b.id` 锁定为下钻目标 `brand_id`；同时精简底层背书条点击函数的传参链路，保障系统内参数纯洁无误
|
||||
* 原因：解决跨系统 ID 混淆导致的调取错位痛点，完美对齐后端接口规范
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T09:20:00+08:00
|
||||
* 步骤：13. [重构返回按键 UI 规范] 参照 category_detail 样式实现符号与类名对齐
|
||||
* 修改：`pages/special-sale/details.vue` 及 `pages/special-sale/choicen.vue` 调整视图与样式层
|
||||
* 更改摘要：将两页顶层的普通退回箭头全部严格替换为同款加粗的宽体符号 `〈`（挂载 `back-area` 及 `.back-icon` 规则），实现了全景顶级返回心智的完美统一
|
||||
* 原因：保障全线定制产品的高端统一审美规范
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T09:30:00+08:00
|
||||
* 步骤：14. [重写详情页货盘生态] 彻底抛弃双列网格，1:1 重构大白容器单列流与筛选栏
|
||||
* 修改：`pages/special-sale/details.vue` 拓展逻辑、模板及 CSS
|
||||
* 更改摘要：引入 `sortType`、`priceOrder` 状态响应与排序传参引擎，把整个下级商品陈列收束进顶部带大圆角的纯白底盘容器 `.items-container-box` 中；上方植入带有淡色竖杠分割的选项卡栏，内部 1:1 极致复现单列横排布局（220rpx圆角方图、平台天猫标、粉红圆角标签组、超大核心券后价以及无缝拼接实心红底白字券胶囊），最底端直接留白呈现高级莫兰迪提示语“已为您加载完毕”
|
||||
* 原因：完全响应真实转化场景及实机 UI 规范设计图要求
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T09:35:00+08:00
|
||||
* 步骤：15. [优化品牌自画像区] 关注后方挂载 todaysale 流光月销胶囊，实现零值智能隐藏
|
||||
* 修改：`pages/special-sale/details.vue` 更新头层模板与样式集
|
||||
* 更改摘要：将原先单一垂直排列的粉丝组件扩容升级为水平 Flex 矩阵 `.capsules-row`，囊括经典的红粉粉丝胶囊与全新定制的金橙色流光渐变月销胶囊 `.b-sale-capsule`（搭载前置小火焰标 `🔥`）。应用 `todaysale > 0` 严密判定，在确保非零值时并置呈现双重尊崇身份背书，为0时智能无缝跳过渲染
|
||||
* 原因：满足精细化业务背书展示诉求，构建饱满的品牌大牌转化心智
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T09:43:00+08:00
|
||||
* 步骤：16. [增强品牌简介交互] 针对后方截断文本装载 isExpanded 伸缩引擎与通透控制按钮
|
||||
* 修改：`pages/special-sale/details.vue` 拓展脚本层、模板及 CSS
|
||||
* 更改摘要：引入 `isExpanded` 响应式布尔开关，为原本受限的简介文字段落配备外层弹性容器。当文本较长被 `-webkit-line-clamp: 2` 自动截断时，底部渲染出带有微透明高光衬托的控制按钮；点击即刻触发类名 `.expanded` 解绑截断法则呈现详尽全文，二次点击瞬间闭合，实现全量与精简背书信息的极度优雅互切
|
||||
* 原因：平衡首屏空间展示效率与全景品牌故事心智传达的黄金用户体验
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T09:55:00+08:00
|
||||
* 步骤：17. [重写品牌长简介排版位置] 从顶层海报剥离下沉迁移至卡片内部，装配深色文本与行末红字按钮
|
||||
* 修改：`pages/special-sale/details.vue` 优化模板与样式规范
|
||||
* 更改摘要：极其干净地从顶层海报核心区摘除简介节点，为首屏 Logo 与称号区做极致纯净减负；在下方玻璃卡片 `.glass-compile-card` 内部的话题标签墙下方置入下沉容器 `.card-intro-section`。文字换用极高对比度、极其清晰的深黑灰色展示，并内嵌行末跟随算法：收起且超长时末尾直接拼接红粉色高亮行内按键 `展开 ∨`，展开后全文伴生 `收起 ∧`，极其震撼地做到了与实机视觉 1:1 对齐的跟进行末阅读心智
|
||||
* 原因：彻底贴合真实业务 UI 规范及电商级视觉阅读舒适度要求
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T10:10:00+08:00
|
||||
* 步骤：18. [高定横向滑动标签轴] 将推荐话题重塑为支持左右拖动的不换行滚轴，复刻莫兰迪灰紫配色
|
||||
* 修改：`pages/special-sale/details.vue` 升级视图结构层与 CSS
|
||||
* 更改摘要：废弃了原先采用多行 Flex 折叠堆叠的话题排列方式，全面升级为包裹在 `<scroll-view scroll-x class="recommend-tags-scroll">` 内部的单行不换行横排左右拖动轴。为单体标签 `.r-tag` 1:1 定制复刻了附图中的莫兰迪淡紫/浅灰色背板衬垫（`#f4f5f9`）、适中的深灰色字（`#555555`）及极度饱满圆润的胶囊圆角（`border-radius: 26rpx`），不仅极大节约了纵向屏幕空间，更提供了极佳的水平探索操控感与克制优雅的大牌视觉心智
|
||||
* 原因：对齐用户提供的高清 UI 实机截图范本，提升页面组件的高级动态感
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T10:15:00+08:00
|
||||
* 步骤：19. [标签单体强制单行死锁] 施加 nowrap 与 flex-shrink: 0 彻底消除实机小块三行折断痛点
|
||||
* 修改：`pages/special-sale/details.vue` 优化样式层防折行原子属性
|
||||
* 更改摘要：极其敏锐地响应了实机预览中小模块被诡异折成三行的痛点反馈。直接向 `.r-tag` 单体层注入三重终极死锁护盾：声明 `white-space: nowrap` 强制内部文本无限平展单行展示；声明 `word-break: keep-all` 保持中文字词连续免受边界断裂；声明极其关键的 `flex-shrink: 0` 免疫父级 Flex 盒容器的自作主张压缩权。由此彻底达成了“只要一行文字”的纯正单行胶囊陈列，让横排滚轴的体验浑然一体
|
||||
* 原因：彻底根除小程序移动端内核对于横滑子元素自动截断换行的特异性表现，完全对齐实机单行心智
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T10:24:00+08:00
|
||||
* 步骤：20. [主站双轨传参分发引擎] 感知 activeCatId 状态，实现精选取 brand_id 与分类取 id 的完美适配
|
||||
* 修改：`pages/special-sale/choicen.vue` 重构 API 实体映射器与跳转逻辑
|
||||
* 更改摘要：彻底打通了历史遗留的多源后台接口主键命名分歧！在 `fetchChoicenessData`（精选）与 `fetchBrandCategoryData`（普通分类）的源数据映射器内部，双轨并行地保留录入真实的 `brand_id` 与 `id` 参数；同时升级核心路由下钻函数 `goToBrandDetail`，通过极其透明的逻辑感知当前激活选项卡状态，若是精选专区 (`activeCatId === 0`) 优先传值 `shop.brand_id`，若切换至分类选项卡 (`activeCatId !== 0`) 优先传值 `shop.id`，并在底层增加安全 fallback 校验，保障链路绝对高精畅达
|
||||
* 原因：解决多源独立接口回传数据主键名不同引起的详情页访问传参失败缺陷，保障全域链路闭环
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T10:35:00+08:00
|
||||
* 步骤：21. [主站专场横幅图文直替] 彻底移除原纯文字拼接渐变标语模块，全面接入定稿图 tm-desc.png
|
||||
* 修改：`pages/special-sale/choicen.vue` 重组视图层与纯净 CSS 规范
|
||||
* 更改摘要：极其果断地剥离了原版采用代码拼合的文字标语卡片 `.page-banner` 及其附带的冗杂字号与渐变阴影规则集；全面重构接入包裹器 `.page-banner-img-box`，内部装载直指官方图床定稿的高清专场背书图 `https://web.cms.hykefu.cn/static/img/tm-desc.png`，并严密配置 `mode="widthFix"` 保证全景自适应等比延展。顺道修正校准了前序残留的外部闭合错位标签，使代码结构与视觉表达双向升维
|
||||
* 原因：图形化排版能够传达原生纯文字代码无法表现的高阶字体艺术与阴影微距，完美拔高会场入口的顶级大牌心智
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T10:44:00+08:00
|
||||
* 步骤：22. [主站专场热单按需呈现] 仅当 activeCatId 处于精选/推荐专区时开放透出底部瀑布流，其他垂直品类自动隐身
|
||||
* 修改：`pages/special-sale/choicen.vue` 优化视图模板层的条件渲染屏障
|
||||
* 更改摘要：极其精工地打通了多类目垂直浏览的心智隔离法则！直接在 `<template>` 层级为承载全局热销商品的栏目分隔条 `.section-divider`、双列瀑布流容器 `.brand-sale-grid` 乃至底端版权上新声明 `.bottom-tip` 附加了严密的视图判断属性 `v-if="activeCatId === 0"`。由此，仅当用户停留于主站总览的“精选/推荐”初始会场时透传展示公共爆单商品矩阵；一旦向右横移下钻独立品类，底层混合商品源瞬间自动屏蔽隐去，为对应类目的大牌店铺流创造出绝对纯净、免受干扰的闭环探索空间
|
||||
* 原因：对齐头部电商交互规范，消除全局推荐流对独立细分品类商品墙浏览注意力的不当分流
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T10:56:00+08:00
|
||||
* 步骤：23. [新建省钱攻略独立路由与直连打通] 落地高保真无缝长图生态 save-money.vue 并在首页图标挂载下钻事件
|
||||
* 修改：`pages/index/index.vue`、`pages.json` 及新建 `pages/save-money/save-money.vue`
|
||||
* 更改摘要：极其圆满地完成了粉丝商城转化赋能链路的搭建！在 `pages.json` 中配置了统一的 custom 导航风格独立页面路由；全新编写的 `save-money.vue` 顶部搭载加粗回退键 `〈` 的高阶沉浸标题条，内容部分极其精妙地通过包裹容器层级的 `font-size: 0` 配合 `display: block` 彻底清除了图片间隙死角，完美无缝地将云图床分发的两张宽度等比拉展长图 `cms-save-money-1` 与 `cms-save-money-2` 拼合为一幅极具冲击力的省钱教育全景长卷，底层优雅点缀了色值为 `rgb(150, 151, 153)` 的粉丝商城专属权益声明；同步在首页核心地带为原先静态的侧边广告图绑定了下钻触发事件 `goToSaveMoney`，打通了全盘转化的黄金闭环
|
||||
* 原因：满足直击用户福利优惠心智的业务运营诉求，实现外部参考设计的高阶移动端 1:1 无缝复刻
|
||||
* 阻碍：无
|
||||
* 状态：待确认
|
||||
* 2026-05-13T14:34:00+08:00
|
||||
* 步骤：24. [对接 pages/index/index.vue 值得买数据] 引入 qiangNum 变量同步抢购人数及循环渲染上方订单头像
|
||||
* 修改：`pages/index/index.vue` 新增 `qiangNum` 字段及接口回调赋值，更新值得买头栏模板头像循环渲染与总人数绑定
|
||||
* 更改摘要：成功实现值得买头栏头像与人数状态对接远程真实订单数据
|
||||
* 原因：执行计划步骤 24
|
||||
* 阻碍：无
|
||||
* 用户确认状态：待确认
|
||||
|
||||
# 最终审查 (由 REVIEW 模式填充)
|
||||
- 实施与最终制定的检查清单计划 100% 严密对齐。
|
||||
- 彻底解决了划到最后一个无法加载下一页数据的缺陷，集成横向翻页监听和展开追加合并。
|
||||
- 完美整合下沉接口 `brandSale`，呈现瀑布流热卖单品，内置身份背书条打通转化。
|
||||
- 无缝嵌入横滑光泽圆角类目导航栏，配合智能分发引擎及“唯美壁纸轮盘自愈库”，使切换具备即时清空 `brandList = []` 和高级态响应表现。
|
||||
- 粉丝福利矩阵 `pages/save-money/save-money` 达成终极高定闭环：全新构建基于自适应全景宽度拉展的独立教育基地，应用 `font-size: 0` 彻底终结多图排列自带的空隙塌陷死角，呈现极其连贯的垂直长卷心智，并在首页搜索侧栏挂载了顺畅的直达通道。
|
||||
- 主站大牌专区 `pages/special-sale/choicen` 全域生态跨入旗舰终极态：彻底打通双轨传参引擎，周密规避后台精选与分类接口主键名不一致陷阱，建立选项卡态感知下钻转化流；将会场顶盘的标语横幅从粗糙纯文字流整体拔高升级为直连官方图床定稿的高清自适应大图 `tm-desc.png`；为底部公共热卖货盘域注入了选项卡感知屏障 `v-if="activeCatId === 0"`，确保仅推荐总会场透出，细分品类会场自动折叠隐身，构建出登峰造极的垂直导购心智。
|
||||
- 独立品牌专场 `pages/special-sale/details` 全域生态达成极致旗舰重构：建立了纯正的原生列表参数透传法则；顶层回退键全线归宗为加粗宽体 `〈` 结构；头盘创新置入并列展示的双重身份胶囊带（粉丝关注与零值全隐的月销售额认证）；中段拟态玻璃卡片内嵌高定水平滑动轴，推荐话题标签彻底升级为支持左右横向拖动的不换行矩阵，色泽复刻莫兰迪高级灰紫调及饱满胶囊边框，并深度集成 `white-space: nowrap; flex-shrink: 0` 三重单行死锁护盾，彻底消除了小卡片内部文字被意外折断成三行的痛点，呈现极为规整的单行纯净文字美学；紧随其后的是完美下推落户的深色长篇品牌传记文字，自带行末高亮算法（完美拼接红粉色行内按键 `展开 ∨` / `收起 ∧`），提供分毫不差的旗舰级沉浸阅读体验；下半部货盘极其震撼地完成了从双列方块到纯白大圆角底托容器单列高定矩阵的全面飞跃，涵盖极细线排序栏、左图右文密集流与极简底端留白陈述，完美契合实机设计美学。
|
||||
- 实施与最终计划完全匹配。
|
||||
|
||||
Loading…
Reference in New Issue