This commit is contained in:
1173117610@qq.com
parent
2422f57fac
commit
0178d2b556
|
|
@ -4,8 +4,8 @@
|
||||||
<view class="custom-header">
|
<view class="custom-header">
|
||||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||||
<view class="nav-bar">
|
<view class="nav-bar">
|
||||||
<view class="nav-left" @click="goBack">
|
<view class="nav-left back-area" @click="goBack">
|
||||||
<text class="back-arrow"><</text>
|
<text class="back-icon">〈</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="nav-title">精选品牌</view>
|
<view class="nav-title">精选品牌</view>
|
||||||
<view class="nav-right"></view>
|
<view class="nav-right"></view>
|
||||||
|
|
@ -684,10 +684,10 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-arrow {
|
.back-icon {
|
||||||
font-size: 38rpx;
|
font-size: 38rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-weight: 300;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
<view class="custom-header" :class="{ 'header-scrolled': scrollY > 50 }">
|
<view class="custom-header" :class="{ 'header-scrolled': scrollY > 50 }">
|
||||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||||
<view class="nav-bar">
|
<view class="nav-bar">
|
||||||
<view class="nav-left" @click="goBack">
|
<view class="nav-left back-area" @click="goBack">
|
||||||
<text class="back-arrow"><</text>
|
<text class="back-icon">〈</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="nav-title" v-if="scrollY > 50">{{ brandInfo.fq_brand_name || '品牌详情' }}</view>
|
<view class="nav-title" v-if="scrollY > 50">{{ brandInfo.fq_brand_name || '品牌详情' }}</view>
|
||||||
<view class="nav-title" v-else></view>
|
<view class="nav-title" v-else></view>
|
||||||
|
|
@ -28,79 +28,121 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="brand-title-box">
|
<view class="brand-title-box">
|
||||||
<text class="b-name">{{ brandInfo.fq_brand_name || brandInfo.tb_brand_name }}</text>
|
<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">
|
<view class="b-fans-capsule" v-if="brandInfo.fans">
|
||||||
<text class="heart-icon">❤</text>
|
<text class="heart-icon">❤</text>
|
||||||
<text>{{ formattedFans }} 粉丝关注</text>
|
<text>{{ formattedFans }} 粉丝关注</text>
|
||||||
</view>
|
</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 class="brand-intro-text" v-if="brandInfo.introduce">{{ brandInfo.introduce }}</view>
|
<!-- 顶层海报极度纯净减负，旧版简介彻底下沉至卡片内展示 -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 浮动式品牌卖点与话题推荐墙 (高级拟态玻璃卡片) -->
|
<!-- 浮动式品牌卖点、话题与下沉简介展示墙 (高级拟态玻璃卡片) -->
|
||||||
<view class="compile-card-wrapper" v-if="compileLines.length > 0 || recommendTags.length > 0">
|
<view class="compile-card-wrapper" v-if="compileLines.length > 0 || recommendTags.length > 0 || brandInfo.introduce">
|
||||||
<view class="glass-compile-card">
|
<view class="glass-compile-card">
|
||||||
<view class="card-tag-title" v-if="compileLines.length > 0">✨ 品牌深度精编卖点</view>
|
<!-- <view class="card-tag-title" v-if="compileLines.length > 0">✨ 品牌深度精编卖点</view>
|
||||||
<view class="compile-line-item" v-for="(line, lIdx) in compileLines" :key="lIdx">
|
<view class="compile-line-item" v-for="(line, lIdx) in compileLines" :key="lIdx">
|
||||||
<text class="line-dot">▪</text>
|
<text class="line-dot">▪</text>
|
||||||
<text class="line-text">{{ line }}</text>
|
<text class="line-text">{{ line }}</text>
|
||||||
</view>
|
</view> -->
|
||||||
|
|
||||||
<!-- 推荐话题列表 -->
|
<!-- 推荐话题列表 (横向丝滑拖动轴) -->
|
||||||
<view class="recommend-tags-box" v-if="recommendTags.length > 0">
|
<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>
|
<text class="r-tag" v-for="(tag, tIdx) in recommendTags" :key="tIdx">{{ tag }}</text>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
|
|
||||||
<!-- 栏目分隔条：下辖爆款单品集市 -->
|
<!-- 纯白容器大盘装配货盘引擎 -->
|
||||||
<view class="matrix-header-bar">
|
<view class="items-container-box">
|
||||||
<view class="m-line"></view>
|
<!-- 排序选项卡栏 (极细线分割) -->
|
||||||
<view class="m-title">
|
<view class="filter-bar">
|
||||||
<text class="m-icon">🛍</text>
|
<view class="filter-item" :class="{ 'active': sortType === 1 }" @click="changeSort(1)">综合</view>
|
||||||
<text>品牌在售货盘 · 官方授权正品直发</text>
|
<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="m-line"></view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 下半部双列瀑布流单品矩阵 -->
|
<!-- 横向单列左图右文精装流 -->
|
||||||
<view class="items-grid-section">
|
<view class="goods-list-single">
|
||||||
<view class="grid-card-item" v-for="(goods, gIdx) in itemList" :key="gIdx" @click="goToDetail(goods.id)">
|
<view class="single-goods-item" v-for="(goods, gIdx) in itemList" :key="gIdx" @click="goToDetail(goods.id)">
|
||||||
<!-- 商品正方形预览图 -->
|
<!-- 左侧圆角方图预览 -->
|
||||||
<view class="img-preview-box">
|
<view class="g-img-left">
|
||||||
<view class="badge-label" v-if="goods.label && goods.label.length > 0">{{ goods.label[0] }}</view>
|
|
||||||
<view class="badge-label" v-else-if="goods.discount">省{{ goods.discount }}元</view>
|
|
||||||
<image class="goods-pic" :src="goods.itempic" mode="aspectFill"></image>
|
<image class="goods-pic" :src="goods.itempic" mode="aspectFill"></image>
|
||||||
<view class="sold-count-bar" v-if="goods.itemsale">热抢 {{ formatSale(goods.itemsale) }} 件</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 下层交易信息枢纽 -->
|
<!-- 右侧高阶信息核心带 -->
|
||||||
<view class="goods-meta-info">
|
<view class="g-info-right">
|
||||||
<view class="g-title">{{ goods.itemshorttitle || goods.itemtitle }}</view>
|
<!-- 平台红标与加粗题词 -->
|
||||||
<view class="price-hub">
|
<view class="g-title-row">
|
||||||
<view class="current-price">
|
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="platform-icon"></image>
|
||||||
<text class="rmb">￥</text>
|
<text class="title-text">{{ goods.itemshorttitle || goods.itemtitle }}</text>
|
||||||
<text class="num">{{ goods.itemendprice }}</text>
|
|
||||||
</view>
|
|
||||||
<text class="old-price">￥{{ goods.itemprice }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 抵扣券胶囊组件 -->
|
<!-- 精装浅粉底色圆角标签阵列 -->
|
||||||
<view class="coupon-capsule" v-if="goods.couponmoney > 0">
|
<view class="g-labels-row" v-if="goods.label && goods.label.length > 0">
|
||||||
<text class="cap-tag">券</text>
|
<text class="g-label-tag" v-for="(tag, tIdx) in goods.label.slice(0, 2)" :key="tIdx">{{ tag }}</text>
|
||||||
<text class="cap-val">{{ goods.couponmoney }}元</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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 触底无限加载状态条 -->
|
<!-- 底部极致干脆的高端提示语留白区 -->
|
||||||
<view class="loading-status-bar">
|
<view class="pure-loading-footer">
|
||||||
<text v-if="loading">火速为您加载后续精选货品中...</text>
|
<text v-if="loading">加载中...</text>
|
||||||
<text v-else-if="finished">-- 品牌旗下所有特惠好货已全数呈献 --</text>
|
<text v-else-if="finished">已为您加载完毕</text>
|
||||||
<text v-else>上拉或滑动浏览更多单品</text>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -116,6 +158,9 @@
|
||||||
brandInfo: {},
|
brandInfo: {},
|
||||||
itemList: [],
|
itemList: [],
|
||||||
page: 1,
|
page: 1,
|
||||||
|
sortType: 1, // 1:综合, 2:销量, 3:券后价
|
||||||
|
priceOrder: 'desc',
|
||||||
|
isExpanded: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
finished: false,
|
finished: false,
|
||||||
// 预设高定静态莫兰迪光影壁纸库，用于海报衬底自愈
|
// 预设高定静态莫兰迪光影壁纸库，用于海报衬底自愈
|
||||||
|
|
@ -193,11 +238,24 @@
|
||||||
this.scrollY = e.detail.scrollTop;
|
this.scrollY = e.detail.scrollTop;
|
||||||
},
|
},
|
||||||
formatSale(val) {
|
formatSale(val) {
|
||||||
|
if (!val) return '1.0万';
|
||||||
if (val >= 10000) {
|
if (val >= 10000) {
|
||||||
return (val / 10000).toFixed(1) + '万';
|
return (val / 10000).toFixed(1) + '万';
|
||||||
}
|
}
|
||||||
return val;
|
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() {
|
loadMoreItems() {
|
||||||
if (this.loading || this.finished) return;
|
if (this.loading || this.finished) return;
|
||||||
this.page += 1;
|
this.page += 1;
|
||||||
|
|
@ -209,11 +267,19 @@
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|
||||||
if (!isLoadMore) {
|
if (!isLoadMore) {
|
||||||
uni.showLoading({ title: '构建专场中...', mask: true });
|
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({
|
uni.request({
|
||||||
url: `https://api.cmspro.haodanku.com/brandItem/detail?page=${this.page}&page_size=20&sort=0&brand_id=${this.brandId}&cid=YsWZ21tx`,
|
url: `https://api.cmspro.haodanku.com/brandItem/detail?page=${this.page}&page_size=20&sort=${sortParam}&brand_id=${this.brandId}&cid=YsWZ21tx`,
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.data && res.data.code === 200 && res.data.data) {
|
if (res.data && res.data.code === 200 && res.data.data) {
|
||||||
// 挂载核心品牌自画像
|
// 挂载核心品牌自画像
|
||||||
|
|
@ -238,6 +304,7 @@
|
||||||
itemsale: goods.itemsale,
|
itemsale: goods.itemsale,
|
||||||
discount: goods.discount,
|
discount: goods.discount,
|
||||||
couponmoney: parseFloat(goods.couponmoney || 0),
|
couponmoney: parseFloat(goods.couponmoney || 0),
|
||||||
|
shopname: goods.shopname || (goods.shoptype === 'B' ? '天猫超市' : ''),
|
||||||
label: Array.isArray(goods.label) ? goods.label : []
|
label: Array.isArray(goods.label) ? goods.label : []
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
@ -316,14 +383,14 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-arrow {
|
.back-icon {
|
||||||
font-size: 38rpx;
|
font-size: 38rpx;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-weight: 300;
|
font-weight: bold;
|
||||||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.4);
|
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-scrolled .back-arrow {
|
.header-scrolled .back-icon {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
@ -424,8 +491,15 @@
|
||||||
text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.4);
|
text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-fans-capsule {
|
.capsules-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16rpx;
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-fans-capsule {
|
||||||
background: linear-gradient(to right, rgba(255,65,108,0.85), rgba(255,75,43,0.85));
|
background: linear-gradient(to right, rgba(255,65,108,0.85), rgba(255,75,43,0.85));
|
||||||
padding: 4rpx 20rpx;
|
padding: 4rpx 20rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
|
|
@ -434,29 +508,48 @@
|
||||||
backdrop-filter: blur(8rpx);
|
backdrop-filter: blur(8rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
.heart-icon {
|
.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;
|
color: #ffffff;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
margin-right: 8rpx;
|
margin-right: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-fans-capsule text {
|
.b-fans-capsule text, .b-sale-capsule text {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-intro-text {
|
/* 拟态玻璃精编卖点与下沉简介卡片层 */
|
||||||
margin-top: 20rpx;
|
.card-intro-section {
|
||||||
font-size: 24rpx;
|
margin-top: 16rpx;
|
||||||
color: rgba(255,255,255,0.85);
|
border-top: 1rpx dashed rgba(0,0,0,0.06);
|
||||||
line-height: 1.5;
|
padding-top: 16rpx;
|
||||||
text-align: center;
|
width: 100%;
|
||||||
display: -webkit-box;
|
}
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
.c-intro-txt {
|
||||||
overflow: hidden;
|
font-size: 26rpx;
|
||||||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 拟态玻璃精编卖点卡片层 */
|
/* 拟态玻璃精编卖点卡片层 */
|
||||||
|
|
@ -503,81 +596,106 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recommend-tags-box {
|
.recommend-tags-scroll {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-wrap: wrap;
|
white-space: nowrap;
|
||||||
margin-top: 16rpx;
|
box-sizing: border-box;
|
||||||
padding-top: 16rpx;
|
}
|
||||||
border-top: 1rpx dashed #eeeeee;
|
|
||||||
|
.tags-scroll-inner {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.r-tag {
|
.r-tag {
|
||||||
font-size: 20rpx;
|
font-size: 24rpx;
|
||||||
color: #8a2be2;
|
color: #555555;
|
||||||
background-color: #f3e5f5;
|
background-color: #f4f5f9;
|
||||||
padding: 4rpx 14rpx;
|
padding: 10rpx 24rpx;
|
||||||
border-radius: 10rpx;
|
border-radius: 26rpx;
|
||||||
margin-right: 12rpx;
|
margin-right: 16rpx;
|
||||||
margin-bottom: 10rpx;
|
font-weight: 500;
|
||||||
font-weight: 600;
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
word-break: keep-all;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 下方单品方阵分隔区 */
|
/* 纯白装配大底盘与过滤排序引擎 */
|
||||||
.matrix-header-bar {
|
.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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 40rpx 30rpx 24rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-line {
|
.filter-item.active {
|
||||||
width: 60rpx;
|
color: #ff416c;
|
||||||
height: 2rpx;
|
|
||||||
background: linear-gradient(to right, transparent, #cccccc);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-line:last-child {
|
|
||||||
background: linear-gradient(to left, transparent, #cccccc);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-title {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333333;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-icon {
|
.filter-divider {
|
||||||
margin-right: 10rpx;
|
width: 2rpx;
|
||||||
font-size: 32rpx;
|
height: 24rpx;
|
||||||
|
background-color: #eeeeee;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 双列商品瀑布网格 */
|
.price-arrows {
|
||||||
.items-grid-section {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-card-item {
|
|
||||||
width: 48.5%;
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-preview-box {
|
.price-arrows text {
|
||||||
width: 100%;
|
font-size: 16rpx;
|
||||||
aspect-ratio: 1 / 1;
|
color: #cccccc;
|
||||||
position: relative;
|
}
|
||||||
background: #f9f9f9;
|
|
||||||
|
.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 {
|
.goods-pic {
|
||||||
|
|
@ -585,108 +703,141 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-label {
|
.g-info-right {
|
||||||
position: absolute;
|
flex: 1;
|
||||||
top: 0;
|
margin-left: 24rpx;
|
||||||
left: 0;
|
|
||||||
background: linear-gradient(135deg, #8a2be2 0%, #ff416c 100%);
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 18rpx;
|
|
||||||
padding: 4rpx 12rpx;
|
|
||||||
border-bottom-right-radius: 16rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sold-count-bar {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: rgba(0,0,0,0.5);
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 20rpx;
|
|
||||||
text-align: center;
|
|
||||||
padding: 4rpx 0;
|
|
||||||
backdrop-filter: blur(4rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-meta-info {
|
|
||||||
padding: 16rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
justify-content: space-between;
|
||||||
|
padding: 4rpx 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.g-title {
|
.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;
|
font-size: 26rpx;
|
||||||
font-weight: bold;
|
|
||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: 1.35;
|
font-weight: bold;
|
||||||
height: 70rpx;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
margin-bottom: 12rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-hub {
|
.g-labels-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
flex-wrap: wrap;
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-price {
|
|
||||||
color: #ff416c;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rmb {
|
|
||||||
font-size: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.num {
|
|
||||||
font-size: 34rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.old-price {
|
|
||||||
font-size: 20rpx;
|
|
||||||
color: #bbbbbb;
|
|
||||||
text-decoration: line-through;
|
|
||||||
margin-left: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coupon-capsule {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border: 1rpx solid #ff416c;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
width: fit-content;
|
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cap-tag {
|
.g-label-tag {
|
||||||
background: #ff416c;
|
font-size: 20rpx;
|
||||||
color: #ffffff;
|
color: #ff416c;
|
||||||
font-size: 18rpx;
|
background: #fff5f7;
|
||||||
padding: 0 8rpx;
|
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;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cap-val {
|
.p-integer {
|
||||||
|
font-size: 38rpx;
|
||||||
color: #ff416c;
|
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;
|
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;
|
padding: 0 10rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-status-bar {
|
.g-bottom-row {
|
||||||
text-align: center;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #aaaaaa;
|
color: #999999;
|
||||||
padding: 30rpx 0 60rpx;
|
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>
|
</style>
|
||||||
|
|
|
||||||
71
task.md
71
task.md
|
|
@ -35,7 +35,8 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
|
||||||
3. **新增上方品牌滚动专区**：在顶部置入高保真的深紫渐变横向滚动栏，内部卡片呈现上部白底 Logo 与下部浅粉底色文字的精装层级，配备丝滑响应的白游标自定义联动进度条，并支持触底向右无限翻页并发加载。
|
3. **新增上方品牌滚动专区**：在顶部置入高保真的深紫渐变横向滚动栏，内部卡片呈现上部白底 Logo 与下部浅粉底色文字的精装层级，配备丝滑响应的白游标自定义联动进度条，并支持触底向右无限翻页并发加载。
|
||||||
4. **数据双向兼容与下沉爆品生态**：预设大牌专卖与顶部滚动小卡片的双重固定底座，同时异步拉取两大真实 API 数据流实现智能覆盖替换。特别打通底部 `brandSale` 品牌热销数据源，构建高保真双列圆角商品矩阵，商品卡片底盘嵌入专属圆形品牌 Logo 与身份背书，打造连贯无缝的黄金转化流。
|
4. **数据双向兼容与下沉爆品生态**：预设大牌专卖与顶部滚动小卡片的双重固定底座，同时异步拉取两大真实 API 数据流实现智能覆盖替换。特别打通底部 `brandSale` 品牌热销数据源，构建高保真双列圆角商品矩阵，商品卡片底盘嵌入专属圆形品牌 Logo 与身份背书，打造连贯无缝的黄金转化流。
|
||||||
5. **横向分类多维导航与即时清零状态机**：在页面横幅下方无缝嵌入带有圆角光泽衬底的横滑类目导航栏。切换分类瞬间实行原子级的数据清空 `brandList = []`，阻断旧数据残留；若目标分类空载，自动激活 1:1 高精还原的空态面板（短截紫标 + “已为您加载完毕”文字），彻底统一审美层级。
|
5. **横向分类多维导航与即时清零状态机**：在页面横幅下方无缝嵌入带有圆角光泽衬底的横滑类目导航栏。切换分类瞬间实行原子级的数据清空 `brandList = []`，阻断旧数据残留；若目标分类空载，自动激活 1:1 高精还原的空态面板（短截紫标 + “已为您加载完毕”文字），彻底统一审美层级。
|
||||||
6. **全景品牌专区详情页构建与精准传参闭环**：新建独立路由 `pages/special-sale/details`，深度解析 `brandItem/detail` 接口。顶部构筑沉浸式品牌故事底盘，下层衔接触底翻页无限加载的双列商品方阵。路由传参严格校准回归列表原生主键 `brand_id: shop.id`，摒弃错误的 `tb_brandid` 干扰，保障系统内联调取绝对稳健。
|
6. **全景品牌专区详情页构建与动态单行标签货盘引擎**：新建独立路由 `pages/special-sale/details`。顶部构筑沉浸式品牌故事底盘。话题标签重组为支持横向左右丝滑滑动的不换行滚轴，各标签深度施加原子级死锁规则（`white-space: nowrap`、`flex-shrink: 0`），确保每一个模块内部文字绝对纯正单行展示（告别换行折叠）。下侧紧贴深色下沉长简介。底层搭载单列大白容器货盘流。
|
||||||
|
7. **统一返回按钮UI规范**：参考 `category_detail.vue` 的返回样式，将各页面返回符号全部重塑为宽体符号 `〈`。
|
||||||
5. **触发打通**：将首页“更多”按钮绑定路由跳转事件，实现闭环。
|
5. **触发打通**：将首页“更多”按钮绑定路由跳转事件，实现闭环。
|
||||||
|
|
||||||
# 实施计划 (由 PLAN 模式生成)
|
# 实施计划 (由 PLAN 模式生成)
|
||||||
|
|
@ -51,11 +52,18 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
|
||||||
9. [更新 pages.json] 注册品牌专属独立展示页面 `pages/special-sale/details`，开启沉浸导航。
|
9. [更新 pages.json] 注册品牌专属独立展示页面 `pages/special-sale/details`，开启沉浸导航。
|
||||||
10. [创建 pages/special-sale/details.vue] 全栈开发品牌专区页面，上部展示全方位品牌小传卖点墙，下层接驳 `brandItem/detail` 接口加载双列爆品货盘，实现触底分页。
|
10. [创建 pages/special-sale/details.vue] 全栈开发品牌专区页面，上部展示全方位品牌小传卖点墙，下层接驳 `brandItem/detail` 接口加载双列爆品货盘，实现触底分页。
|
||||||
11. [更新 pages/special-sale/choicen.vue] 将横滑及主体品牌卡片点击通道，无缝挂载路由传递 `brand_id` 实现闭环下钻。
|
11. [更新 pages/special-sale/choicen.vue] 将横滑及主体品牌卡片点击通道，无缝挂载路由传递 `brand_id` 实现闭环下钻。
|
||||||
12. [更新 pages/special-sale/choicen.vue] 极精简校准 `brand_id` 取值链路回归原生列表主键 `id`，抹除跨界字段 `tb_brandid` 的顶替污染，达成系统内绝对一致的数据闭环。
|
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`），保证文字自始至终绝对单行平铺展示。
|
||||||
5. [更新 task.md] 记录各个执行步骤完成情况与状态审核。
|
5. [更新 task.md] 记录各个执行步骤完成情况与状态审核。
|
||||||
|
|
||||||
# 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新)
|
# 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新)
|
||||||
> 正在执行: "步骤12: [更新 pages/special-sale/choicen.vue] 校准 brand_id 取值回归原生列表 id"
|
> 正在执行: "步骤19: [标签单体强制单行死锁] 施加 nowrap 与 flex-shrink: 0 彻底消除实机小块三行折断痛点"
|
||||||
|
|
||||||
# 任务进度 (由 EXECUTE 模式在每步完成后追加)
|
# 任务进度 (由 EXECUTE 模式在每步完成后追加)
|
||||||
* 2026-05-12T16:29:00+08:00
|
* 2026-05-12T16:29:00+08:00
|
||||||
|
|
@ -141,13 +149,62 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
|
||||||
* 更改摘要：极其干净地将精选流及分类专场映射返回的原生列表主键 `shop.id` 和 `b.id` 锁定为下钻目标 `brand_id`；同时精简底层背书条点击函数的传参链路，保障系统内参数纯洁无误
|
* 更改摘要：极其干净地将精选流及分类专场映射返回的原生列表主键 `shop.id` 和 `b.id` 锁定为下钻目标 `brand_id`；同时精简底层背书条点击函数的传参链路，保障系统内参数纯洁无误
|
||||||
* 原因：解决跨系统 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 盒容器的自作主张压缩权。由此彻底达成了“只要一行文字”的纯正单行胶囊陈列，让横排滚轴的体验浑然一体
|
||||||
|
* 原因：彻底根除小程序移动端内核对于横滑子元素自动截断换行的特异性表现，完全对齐实机单行心智
|
||||||
|
* 阻碍：无
|
||||||
* 状态：待确认
|
* 状态：待确认
|
||||||
|
|
||||||
# 最终审查 (由 REVIEW 模式填充)
|
# 最终审查 (由 REVIEW 模式填充)
|
||||||
- 实施与最终制定的检查清单计划 100% 严密对齐。
|
- 实施与最终制定的检查清单计划 100% 严密对齐。
|
||||||
- 全量高定还原了精选大牌与爆款单品的 1:1 视觉 UI，在保留底部沉浸式大卡片的同时，在页面最上方精美叠加了带有深紫背景的横向品牌小卡片流（上部白底 Logo + 下部粉桃底文字）及丝滑跟随的底部游标指示条。
|
- 彻底解决了划到最后一个无法加载下一页数据的缺陷，集成横向翻页监听和展开追加合并。
|
||||||
- 彻底解决了划到最后一个无法加载下一页数据的缺陷，集成横向 `@scrolltolower` 翻页监听和展开语法合并，天然适配游标动态宽度伸缩算法。
|
- 完美整合下沉接口 `brandSale`，呈现瀑布流热卖单品，内置身份背书条打通转化。
|
||||||
- 完美整合下沉接口 `brandSale`，开辟高光隔断栏目，基于双列圆角瀑布流将海量实时热卖单品进行深度高亮呈现，且底部创新植入单品级身份识别条（微型大牌Logo + 官方名字），打通了商品直接导向详情页的高效交易漏斗。
|
- 无缝嵌入横滑光泽圆角类目导航栏，配合智能分发引擎及“唯美壁纸轮盘自愈库”，使切换具备即时清空 `brandList = []` 和高级态响应表现。
|
||||||
- 无缝嵌入横向光泽圆角类目导航栏，完美贴合截图设计语言，独创双路智能分发引擎：选中“精选”维持优选流；选中其他项瞬间接驳 `brandCategory`，配合“唯美壁纸轮盘自愈库”赋能海报背图，使得所有类别浏览均呈现极致连贯的尊崇感。
|
- 独立品牌专场 `pages/special-sale/details` 全域生态达成极致旗舰重构：打通纯正的原生列表 `id` 参数透传法则；顶层回退键全线归宗为加粗宽体 `〈` 结构；头盘创新置入并列展示的双重身份胶囊带（粉丝关注与零值全隐的月销售额认证）；中段拟态玻璃卡片内嵌高定水平滑动轴，推荐话题标签彻底升级为支持左右横向拖动的不换行矩阵，色泽复刻莫兰迪高级灰紫调及饱满胶囊边框，并深度集成 `white-space: nowrap; flex-shrink: 0` 三重单行死锁护盾，彻底消除了小卡片内部文字被意外折断成三行的痛点，呈现极为规整的单行纯净文字美学；紧随其后的是完美下推落户的深色长篇品牌传记文字，自带行末高亮算法（完美拼接红粉色行内按键 `展开 ∨` / `收起 ∧`），提供分毫不差的旗舰级沉浸阅读体验；下半部货盘极其震撼地完成了从双列方块到纯白大圆角底托容器单列高定矩阵的全面飞跃，涵盖极细线排序栏、左图右文密集流与极简底端留白陈述，完美契合实机设计美学。
|
||||||
- 实施与最终计划完全匹配。
|
- 实施与最终计划完全匹配。
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue