1314 lines
38 KiB
Vue
1314 lines
38 KiB
Vue
<template>
|
||
<view class="choiceness-container">
|
||
<!-- 自定义沉浸式头部导航 -->
|
||
<view class="custom-header">
|
||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<view class="nav-bar">
|
||
<view class="nav-left" @click="goBack">
|
||
<text class="back-arrow"><</text>
|
||
</view>
|
||
<view class="nav-title">精选品牌</view>
|
||
<view class="nav-right"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 占位符确保内容不被顶部悬浮覆盖 -->
|
||
<view class="header-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
|
||
|
||
<!-- 顶部深紫渐变横向品牌滚动专区 (支持右滑到底无限加载) -->
|
||
<view class="top-scroll-brands-section">
|
||
<scroll-view scroll-x class="top-brands-scroll" :show-scrollbar="false" @scroll="onTopBrandsScroll" @scrolltolower="loadMoreTopBrands">
|
||
<view class="t-brand-card" v-for="(item, idx) in topBrandList" :key="idx" @click="goToTopBrand(item)">
|
||
<view class="t-logo-box">
|
||
<image class="t-logo-img" :src="item.brand_logo" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="t-name-box">
|
||
<text class="t-name-text">{{ item.fq_brand_name }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 底部丝滑游标指示器 -->
|
||
<view class="t-indicator-wrap" v-if="topBrandList.length > 3">
|
||
<view class="t-indicator-bg">
|
||
<view class="t-indicator-slider" :style="{ left: topSliderLeft + '%' }"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 页面横幅 / 主题标语区 -->
|
||
<view class="page-banner">
|
||
<view class="banner-content">
|
||
<text class="banner-title">品牌大牌 特卖专场</text>
|
||
<text class="banner-subtitle">官方正品 · 爆款直降 · 限量大额券</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 横向分类选项卡导航区 (带有圆角光泽背景与高级紫标指示横线) -->
|
||
<view class="category-tabs-container">
|
||
<scroll-view scroll-x class="category-tabs-scroll" :show-scrollbar="false">
|
||
<view class="cat-tab-item" v-for="(cat, cIdx) in categoryList" :key="cIdx" @click="onSelectCategory(cat.cat_id)">
|
||
<text class="cat-tab-text" :class="{ 'active-text': activeCatId === cat.cat_id }">{{ cat.cat_name }}</text>
|
||
<!-- 底部高亮吸睛下划线 -->
|
||
<view class="cat-tab-line" v-if="activeCatId === cat.cat_id"></view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 品牌流式与单品热销集合滑动容器 -->
|
||
<scroll-view scroll-y class="brand-list-scroll" :show-scrollbar="false">
|
||
<!-- 新增：当分类下辖无专场数据时展示的高保真空态底板 (1:1 匹配截图小紫线与莫兰迪灰字) -->
|
||
<view class="empty-loaded-tip" v-if="brandList.length === 0">
|
||
<view class="elt-top-line"></view>
|
||
<text class="elt-text">已为您加载完毕</text>
|
||
</view>
|
||
|
||
<!-- 上部精选品牌店铺海报专场列表 -->
|
||
<view class="brand-card-item" v-for="(shop, sIdx) in brandList" :key="sIdx">
|
||
<!-- 品牌顶部大图背景区 -->
|
||
<view class="brand-hero">
|
||
<image class="hero-bg" :src="shop.bg" mode="aspectFill"></image>
|
||
<view class="hero-overlay"></view>
|
||
<view class="brand-meta">
|
||
<view class="logo-box">
|
||
<image class="logo-img" :src="shop.logo" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="meta-info">
|
||
<view class="name-row">
|
||
<text class="brand-name">{{ shop.name }}</text>
|
||
<view class="brand-tag">精选特卖</view>
|
||
</view>
|
||
<view class="brand-desc">{{ shop.desc }}</view>
|
||
<view class="tags-row">
|
||
<text class="p-tag" v-for="(tag, tIdx) in shop.tags" :key="tIdx">{{ tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 品牌下辖热门商品矩阵 -->
|
||
<view class="goods-matrix">
|
||
<view class="matrix-item" v-for="(goods, gIdx) in shop.items" :key="gIdx" @click="goToDetail(goods.id)">
|
||
<view class="goods-img-wrapper">
|
||
<!-- 限量/补贴角标 -->
|
||
<view class="badge-tag" v-if="goods.badge">{{ goods.badge }}</view>
|
||
<image class="goods-img" :src="goods.img" mode="aspectFill"></image>
|
||
<view class="sold-overlay">热卖 {{ goods.sold }} 件</view>
|
||
</view>
|
||
<view class="goods-info">
|
||
<view class="goods-title">{{ goods.title }}</view>
|
||
<view class="price-row">
|
||
<view class="price-current">
|
||
<text class="symbol">￥</text>
|
||
<text class="value">{{ goods.price }}</text>
|
||
</view>
|
||
<text class="price-old">￥{{ goods.oldPrice }}</text>
|
||
</view>
|
||
<!-- 券抵扣胶囊 -->
|
||
<view class="coupon-capsule" v-if="goods.coupon > 0">
|
||
<text class="c-left">券</text>
|
||
<text class="c-right">{{ goods.coupon }}元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 栏目分隔条：实时热卖单品爆单榜 -->
|
||
<view class="section-divider">
|
||
<view class="divider-line"></view>
|
||
<view class="divider-title">
|
||
<text class="fire-icon">🔥</text>
|
||
<text>品牌热销榜 · 实时爆品特卖</text>
|
||
</view>
|
||
<view class="divider-line"></view>
|
||
</view>
|
||
|
||
<!-- 下部双列爆品流式网格 (完美整合 brandSale 接口源) -->
|
||
<view class="brand-sale-grid">
|
||
<view class="bs-card" v-for="(item, bIdx) in brandSaleList" :key="bIdx" @click="goToDetail(item.id)">
|
||
<!-- 正方形顶图容器 -->
|
||
<view class="bs-img-box">
|
||
<view class="bs-badge" v-if="item.label && item.label.length > 0">{{ item.label[0] }}</view>
|
||
<view class="bs-badge" v-else-if="item.discount">立省{{ item.discount }}元</view>
|
||
<image class="bs-img" :src="item.itempic" mode="aspectFill"></image>
|
||
<view class="bs-sold">疯抢 {{ item.itemsale }} 件</view>
|
||
</view>
|
||
<!-- 中枢文案 -->
|
||
<view class="bs-info">
|
||
<view class="bs-title">{{ item.itemshorttitle || item.itemtitle }}</view>
|
||
<view class="bs-price-wrap">
|
||
<view class="bs-current">
|
||
<text class="bs-symbol">￥</text>
|
||
<text class="bs-val">{{ item.itemendprice }}</text>
|
||
</view>
|
||
<text class="bs-old">￥{{ item.itemprice }}</text>
|
||
</view>
|
||
<!-- 大字号抵扣券胶囊 -->
|
||
<view class="bs-coupon" v-if="item.couponmoney > 0">
|
||
<text class="bsc-tag">券</text>
|
||
<text class="bsc-num">{{ item.couponmoney }}元</text>
|
||
</view>
|
||
</view>
|
||
<!-- 最底端独立大牌身份认证横条 (圆形 Logo + 名字) -->
|
||
<view class="bs-brand-bar" v-if="item.brand_info || item.brand_name">
|
||
<image class="bsb-logo" v-if="item.brand_info && item.brand_info.brand_logo" :src="item.brand_info.brand_logo" mode="aspectFit"></image>
|
||
<image class="bsb-logo" v-else src="https://cdn-icons-png.flaticon.com/512/882/882730.png" mode="aspectFit"></image>
|
||
<text class="bsb-name">{{ (item.brand_info && item.brand_info.fq_brand_name) || item.brand_name || item.shopname }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-tip">-- 更多精选大牌与热卖单品持续上新中 --</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusBarHeight: 44,
|
||
topSliderLeft: 0,
|
||
// 横向翻页控制变量
|
||
topPage: 1,
|
||
topLoading: false,
|
||
topFinished: false,
|
||
// 当前激活选中的类目 ID
|
||
activeCatId: 0,
|
||
// 默认分类导航高保真死数据底座
|
||
categoryList: [
|
||
{ cat_id: 0, cat_name: "精选" },
|
||
{ cat_id: 11, cat_name: "美食" },
|
||
{ cat_id: 4, cat_name: "美妆" },
|
||
{ cat_id: 10, cat_name: "居家" },
|
||
{ cat_id: 9, cat_name: "母婴" },
|
||
{ cat_id: 13, cat_name: "家电" },
|
||
{ cat_id: 2, cat_name: "男装" },
|
||
{ cat_id: 1, cat_name: "女装" },
|
||
{ cat_id: 6, cat_name: "鞋品" }
|
||
],
|
||
// 顶部横向滚动品牌完整高精死数据底座（自动补全 https）
|
||
topBrandList: [
|
||
{ id: 145, fq_brand_name: "DARLIE好来", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FgrowKsguWGj9TRewurqGiaCRpjj" },
|
||
{ id: 537, fq_brand_name: "英氏", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FpUP2AsSv41uaLFzGV9dBhdYPMcm" },
|
||
{ id: 263, fq_brand_name: "宝宝金水", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FvhmQCKbJvJ-M3s1NoYybWX_Pk_n" },
|
||
{ id: 128, fq_brand_name: "得力", brand_logo: "https://img.alicdn.com/tfscom/TB1_tPSDwDqK1RjSZSyXXaxEVXa" },
|
||
{ id: 840, fq_brand_name: "参半", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FlXoNjuOE1KBgEWS1oirr2rn2QnV" },
|
||
{ id: 857, fq_brand_name: "伊利", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FpWriO1jA1dWBxi0_cJdQiqI39mu" },
|
||
{ id: 11, fq_brand_name: "维达", brand_logo: "https://img.alicdn.com/tfscom/TB1P1f.DxjaK1RjSZFAXXbdLFXa" },
|
||
{ id: 368, fq_brand_name: "白象", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fn3j76pBP4fBXNONMWaLQG6ESGQw" },
|
||
{ id: 392, fq_brand_name: "十月结晶", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FrV6PAll_Y5Yy6qac1LpZMuSKirZ" },
|
||
{ id: 586, fq_brand_name: "认养一头牛", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FmBJ-tDJcheqYn7U4iKLPKKDZYZd" },
|
||
{ id: 582, fq_brand_name: "舒蕾", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FipgVuozAEqWnEO9eV0ovgYp9_nF" },
|
||
{ id: 1940, fq_brand_name: "味滋源", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fnnt-YPRuR9FU1DSjnJNzCbBYFXo" },
|
||
{ id: 295, fq_brand_name: "好爸爸", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fk0F3C8Yaq47_WVpync9DgsEigDl" },
|
||
{ id: 45, fq_brand_name: "七度空间", brand_logo: "https://img.alicdn.com/tfscom/TB1tt3lDxjaK1RjSZKzXXXVwXXa" },
|
||
{ id: 474, fq_brand_name: "奥妙", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FuD0pymnDuJjC6QxPK0s01x1IJun" },
|
||
{ id: 475, fq_brand_name: "超能", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fl5ClCtmpIC4pqj-1vhrSTD18HQl" },
|
||
{ id: 12, fq_brand_name: "良品铺子", brand_logo: "https://img.alicdn.com/tfscom/TB1LBjWDCzqK1RjSZFLXXcn2XXa" },
|
||
{ id: 2155, fq_brand_name: "贝德美", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FhYLAg0sHyTTWIjMnifg2E6asfT5" },
|
||
{ id: 2045, fq_brand_name: "PMPM", brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FosnaV08sMDXFsQIwVXM9YVRyxng" },
|
||
{ id: 81, fq_brand_name: "贝亲", brand_logo: "https://img.alicdn.com/tfscom/TB199L1DxTpK1RjSZFMXXbG_VXa" }
|
||
],
|
||
// 默认大牌商品展示专区店铺流底座
|
||
brandList: [
|
||
{
|
||
name: '伊利官方旗舰店',
|
||
desc: '大牌优选乳品！全网热销100万+',
|
||
bg: 'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=800&q=80',
|
||
logo: 'https://img-haodanku-com.cdn.fudaiapp.com/FpWriO1jA1dWBxi0_cJdQiqI39mu',
|
||
tags: ['限时加补+大额券', '淘金币大额补'],
|
||
items: [
|
||
{ id: '55495891', img: 'https://img.alicdn.com/i4/725677994/O1CN016AbBIJ28vJD93ia6k_!!725677994.jpg_310x310', title: '【50支】伊利冰淇淋巧乐兹四个圈雪糕组合', price: '58.50', oldPrice: '68.5', coupon: 0, sold: '1.0万', badge: '官方立减' },
|
||
{ id: '55485105', img: 'https://img.alicdn.com/bao/uploaded/O1CN01UiyFIg1TM8bPOLGes_!!6000000002367-0-yinhe.jpg_310x310', title: '伊利中老年富硒高钙成人奶粉700g送礼正品', price: '73.80', oldPrice: '83.8', coupon: 0, sold: '8.0万', badge: '最低价' },
|
||
{ id: '55479684', img: 'https://img.alicdn.com/bao/uploaded/O1CN01nCg4S01zkTN2r7cup_!!6000000006752-0-yinhe.jpg_310x310', title: '伊利纯牛奶/脱脂250ml*16盒*1箱正品囤货装', price: '27.90', oldPrice: '47.2', coupon: 0, sold: '7.0万', badge: '限时直降' }
|
||
]
|
||
},
|
||
{
|
||
name: '维达官方旗舰店',
|
||
desc: '闪电加补！维达纸品超值囤',
|
||
bg: 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80',
|
||
logo: 'https://img.alicdn.com/tfscom/TB1P1f.DxjaK1RjSZFAXXbdLFXa',
|
||
tags: ['限时3倍补', '淘金币大额抵'],
|
||
items: [
|
||
{ id: '55487641', img: 'http://img-haodanku-com.cdn.fudaiapp.com/0_619945749414_1744945334.jpg_310', title: '维达细韧抽纸3层120抽20包整箱实惠装', price: '19.80', oldPrice: '29.8', coupon: 0, sold: '2.0万', badge: '下拉抢' },
|
||
{ id: '55502878', img: 'https://img.alicdn.com/imgextra/i3/2424338511/O1CN01ZltEUP2Ck5oljbWHk_!!2424338511.jpg_310x310', title: '维达吾皇超韧随身手帕纸4层便携式小包纸巾', price: '7.27', oldPrice: '11.0', coupon: 1, sold: '1.0万', badge: '补贴价' },
|
||
{ id: '55492702', img: 'https://img.alicdn.com/bao/uploaded/i3/2424338511/O1CN01NvsZod2Ck631NLpda_!!4611686018427385935-0-item_pic.jpg_310x310', title: '维达超韧抽纸家用面巾纸卫生纸巾3层120抽', price: '25.91', oldPrice: '35.9', coupon: 0, sold: '2.0万', badge: '金币抵扣' }
|
||
]
|
||
}
|
||
],
|
||
// 底部品牌热卖单品双列网格完整高精死数据底座
|
||
brandSaleList: [
|
||
{
|
||
id: 55492039,
|
||
itemtitle: "十月结晶宝宝儿童准孕妇精油贴防蚊驱蚊液家庭专用电热蚊香液组合",
|
||
itemshorttitle: "十月结晶蚊香液三液一器",
|
||
itemprice: "37.90",
|
||
itemendprice: "14.90",
|
||
itemsale: "3.0万",
|
||
discount: "3.90",
|
||
couponmoney: 9,
|
||
itempic: "https://img.alicdn.com/bao/uploaded/O1CN01Y7SUue1UCnrCQbyR5_!!6000000002482-0-yinhe.jpg_310x310",
|
||
label: ["淘金币抵扣", "9元券"],
|
||
brand_name: "十月结晶",
|
||
shopname: "十月结晶官方旗舰店",
|
||
brand_info: {
|
||
fq_brand_name: "十月结晶",
|
||
brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FrV6PAll_Y5Yy6qac1LpZMuSKirZ"
|
||
}
|
||
},
|
||
{
|
||
id: 55504025,
|
||
itemtitle: "【会员享加赠】舒蕾茶树精油控油去屑洗发露蓬松洗发水470g",
|
||
itemshorttitle: "舒蕾茶树控油去屑蓬松洗发水530g",
|
||
itemprice: "64.00",
|
||
itemendprice: "29.00",
|
||
itemsale: "1.0万",
|
||
discount: "4.50",
|
||
couponmoney: 21,
|
||
itempic: "https://img.alicdn.com/bao/uploaded/O1CN019jCAUk1xi3tSDnljW_!!6000000006476-0-yinhe.jpg_310x310",
|
||
label: ["官方8.5折", "包邮"],
|
||
brand_name: "舒蕾",
|
||
shopname: "舒蕾洗护旗舰店",
|
||
brand_info: {
|
||
fq_brand_name: "舒蕾",
|
||
brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FipgVuozAEqWnEO9eV0ovgYp9_nF"
|
||
}
|
||
},
|
||
{
|
||
id: 55495891,
|
||
itemtitle: "【50支】伊利冰淇淋巧乐兹四个圈雪糕组合",
|
||
itemshorttitle: "1.1/支四个圈组合!花老冰棍的米买高级货",
|
||
itemprice: "58.50",
|
||
itemendprice: "58.50",
|
||
itemsale: "1.0万",
|
||
discount: "10.00",
|
||
couponmoney: 0,
|
||
itempic: "https://img.alicdn.com/i4/725677994/O1CN016AbBIJ28vJD93ia6k_!!725677994.jpg_310x310",
|
||
label: ["官方立减50元", "最低价"],
|
||
brand_name: "伊利",
|
||
shopname: "天猫超市",
|
||
brand_info: {
|
||
fq_brand_name: "伊利",
|
||
brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FpWriO1jA1dWBxi0_cJdQiqI39mu"
|
||
}
|
||
},
|
||
{
|
||
id: 55505092,
|
||
itemtitle: "贝德美儿童健齿益生菌牙膏低氟固齿宝宝婴幼儿童牙刷牙膏牙龈护理",
|
||
itemshorttitle: "【送牙刷】贝德美儿童防蛀牙膏",
|
||
itemprice: "99.90",
|
||
itemendprice: "19.90",
|
||
itemsale: "5.0万",
|
||
discount: "2.00",
|
||
couponmoney: 65,
|
||
itempic: "https://img-haodanku-com.cdn.fudaiapp.com/fd_1760011073478_186872_310",
|
||
label: ["175天最低价", "低氟"],
|
||
brand_name: "贝德美",
|
||
shopname: "贝德美旗舰店",
|
||
brand_info: {
|
||
fq_brand_name: "贝德美",
|
||
brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/FhYLAg0sHyTTWIjMnifg2E6asfT5"
|
||
}
|
||
},
|
||
{
|
||
id: 55502518,
|
||
itemtitle: "植护10斤大桶装洗衣液持久留香双头家用实惠装整箱去污渍香氛正品",
|
||
itemshorttitle: "10斤植护大桶装香氛洗衣液",
|
||
itemprice: "49.90",
|
||
itemendprice: "29.90",
|
||
itemsale: "1.0万",
|
||
discount: "6.00",
|
||
couponmoney: 20,
|
||
itempic: "https://img.alicdn.com/imgextra/i4/2213165051053/O1CN01uuEnsS1JeKBuVZf0Q_!!2213165051053.png_310x310",
|
||
label: ["280天最低价", "大容量"],
|
||
brand_name: "植护",
|
||
shopname: "植护旗舰店",
|
||
brand_info: {
|
||
fq_brand_name: "植护",
|
||
brand_logo: "https://img-haodanku-com.cdn.fudaiapp.com/Fls7dtPb7yN7QTxHxjQi15eqADbr"
|
||
}
|
||
},
|
||
{
|
||
id: 55502878,
|
||
itemtitle: "维达吾皇超韧随身手帕纸4层便携式小包纸巾实惠装餐巾纸面巾纸",
|
||
itemshorttitle: "维达吾皇超韧随身手帕纸实惠装",
|
||
itemprice: "11.00",
|
||
itemendprice: "7.27",
|
||
itemsale: "1.0万",
|
||
discount: "6.60",
|
||
couponmoney: 1,
|
||
itempic: "https://img.alicdn.com/imgextra/i3/2424338511/O1CN01ZltEUP2Ck5oljbWHk_!!2424338511.jpg_310x310",
|
||
label: ["补贴3元", "包邮"],
|
||
brand_name: "维达",
|
||
shopname: "维达官方旗舰店",
|
||
brand_info: {
|
||
fq_brand_name: "维达",
|
||
brand_logo: "https://img.alicdn.com/tfscom/TB1P1f.DxjaK1RjSZFAXXbdLFXa"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
const sysInfo = uni.getSystemInfoSync();
|
||
this.statusBarHeight = sysInfo.statusBarHeight || 44;
|
||
|
||
// 并发拉取首屏三大数据体流
|
||
this.fetchTopBrandsData();
|
||
this.fetchChoicenessData();
|
||
this.fetchBrandSaleData();
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
const pages = getCurrentPages();
|
||
if (pages && pages.length > 1) {
|
||
uni.navigateBack({ delta: 1 });
|
||
} else {
|
||
uni.reLaunch({ url: '/pages/index/index' });
|
||
}
|
||
},
|
||
goToDetail(id) {
|
||
console.log('精选品牌页点击商品，跳转ID:', id);
|
||
uni.navigateTo({
|
||
url: `/pages/detail/detail?id=${id}`
|
||
});
|
||
},
|
||
goToTopBrand(item) {
|
||
console.log('点击顶部品牌专区卡片:', item.fq_brand_name);
|
||
uni.showToast({
|
||
title: `即将前往 ${item.fq_brand_name} 专场`,
|
||
icon: 'none'
|
||
});
|
||
},
|
||
// 改造多路分发状态机：切换即刻原子级清空数据源，阻断旧列表遗留展示
|
||
onSelectCategory(catId) {
|
||
if (this.activeCatId === catId) return;
|
||
this.activeCatId = catId;
|
||
console.log('精选品牌切换导航类目分流，激活ID:', catId);
|
||
|
||
// 核心修复：立刻原子级清空专场数据源，避免“上一个有下一个没有时残留展示上一个”
|
||
this.brandList = [];
|
||
|
||
uni.showLoading({ title: '加载中...', mask: true });
|
||
|
||
if (catId === 0) {
|
||
// 走精选通用专供数据源
|
||
this.fetchChoicenessData();
|
||
} else {
|
||
// 走类目专属接口引擎
|
||
this.fetchBrandCategoryData(catId);
|
||
}
|
||
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
}, 400);
|
||
},
|
||
onTopBrandsScroll(e) {
|
||
const { scrollLeft, scrollWidth } = e.detail;
|
||
if (!scrollWidth || scrollWidth <= 375) return;
|
||
const maxScroll = scrollWidth - 375;
|
||
let ratio = scrollLeft / maxScroll;
|
||
if (ratio < 0) ratio = 0;
|
||
if (ratio > 1) ratio = 1;
|
||
this.topSliderLeft = ratio * 62.5;
|
||
},
|
||
// 向右滑动触底触发翻页加载后续数据
|
||
loadMoreTopBrands() {
|
||
if (this.topLoading || this.topFinished) return;
|
||
this.topPage += 1;
|
||
console.log('上方品牌横向滚动触发触底翻页，即将请求页码:', this.topPage);
|
||
this.fetchTopBrandsData(true);
|
||
},
|
||
fetchTopBrandsData(isLoadMore = false) {
|
||
if (this.topLoading) return;
|
||
this.topLoading = true;
|
||
uni.request({
|
||
url: `https://api.cmspro.haodanku.com/brandItem/getBrands?page=${this.topPage}&page_size=20&cid=YsWZ21tx`,
|
||
success: (res) => {
|
||
if (res.data && res.data.code === 200 && res.data.data && Array.isArray(res.data.data.list)) {
|
||
const list = res.data.data.list.map(item => ({
|
||
id: item.id,
|
||
fq_brand_name: item.fq_brand_name,
|
||
brand_logo: item.brand_logo ? item.brand_logo.replace('http://', 'https://') : ''
|
||
})).filter(item => item.fq_brand_name && item.brand_logo);
|
||
|
||
if (isLoadMore) {
|
||
this.topBrandList = [...this.topBrandList, ...list];
|
||
} else {
|
||
if (list.length > 0) {
|
||
this.topBrandList = list;
|
||
}
|
||
}
|
||
|
||
const pagination = res.data.data.pagination;
|
||
if (pagination && this.topPage >= pagination.page_count) {
|
||
this.topFinished = true;
|
||
} else if (list.length < 20) {
|
||
this.topFinished = true;
|
||
}
|
||
} else {
|
||
if (isLoadMore) {
|
||
this.topFinished = true;
|
||
}
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('拉取上方滚动品牌接口异常', err);
|
||
if (isLoadMore && this.topPage > 1) {
|
||
this.topPage -= 1;
|
||
}
|
||
},
|
||
complete: () => {
|
||
this.topLoading = false;
|
||
}
|
||
});
|
||
},
|
||
// 全量通用专场初始化及导航字典挂载
|
||
fetchChoicenessData() {
|
||
uni.request({
|
||
url: 'https://api.cmspro.haodanku.com/brandItem/choiceness?is_get_category=1&cid=YsWZ21tx',
|
||
success: (res) => {
|
||
if (res.data && res.data.code === 200 && res.data.data) {
|
||
// 1. 挂载/补充导航字典
|
||
if (res.data.data.category && Array.isArray(res.data.data.category)) {
|
||
const mappedCats = res.data.data.category.map(c => ({
|
||
cat_id: Number(c.cat_id),
|
||
cat_name: c.cat_name
|
||
}));
|
||
this.categoryList = [{ cat_id: 0, cat_name: "精选" }, ...mappedCats];
|
||
}
|
||
|
||
// 2. 挂载全景精选海报流
|
||
if (res.data.data.brand_prefecture && Array.isArray(res.data.data.brand_prefecture)) {
|
||
const list = res.data.data.brand_prefecture.map(shop => {
|
||
let logoStr = shop.brand_logo ? shop.brand_logo.replace('http://', 'https://') : 'https://cdn-icons-png.flaticon.com/512/882/882730.png';
|
||
let bgStr = shop.backimage ? shop.backimage.replace('http://', 'https://') : 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80';
|
||
|
||
return {
|
||
name: shop.fq_brand_name || '大牌精选特卖',
|
||
desc: shop.title || '官方直降 爆款限时抢',
|
||
bg: bgStr,
|
||
logo: logoStr,
|
||
tags: shop.label ? shop.label.slice(0, 2) : ['限量立减专区', '官方授权正品'],
|
||
items: (shop.items || []).slice(0, 3).map(goods => ({
|
||
id: goods.id,
|
||
img: goods.itempic ? goods.itempic.replace('http://', 'https://') : '',
|
||
title: goods.itemshorttitle,
|
||
price: goods.itemendprice,
|
||
oldPrice: goods.itemprice || (parseFloat(goods.itemendprice) + parseFloat(goods.couponmoney || 10)).toFixed(1),
|
||
coupon: parseFloat(goods.couponmoney || 0),
|
||
sold: goods.itemsale >= 10000 ? (goods.itemsale / 10000).toFixed(1) + '万' : goods.itemsale,
|
||
badge: goods.couponmoney ? '大额券' : '直降'
|
||
}))
|
||
};
|
||
}).filter(shop => shop.items && shop.items.length > 0);
|
||
|
||
if (list.length > 0) {
|
||
this.brandList = list;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('拉取线上精选品牌专场分类联动数据失败，采用固定底座显示', err);
|
||
}
|
||
});
|
||
},
|
||
// 接驳 brandCategory 接口分流，内置光影轮盘自动修复缺失背景。取消突兀 Toast 完美适配内嵌底座
|
||
fetchBrandCategoryData(categoryId) {
|
||
uni.request({
|
||
url: `https://api.cmspro.haodanku.com/brandItem/brandCategory?category_id=${categoryId}&cid=YsWZ21tx`,
|
||
success: (res) => {
|
||
if (res.data && res.data.code === 200 && res.data.data && Array.isArray(res.data.data.brands)) {
|
||
// 预置唯美光影/极简质感图库底座，智能赋能无海报的品牌
|
||
const 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',
|
||
'https://images.unsplash.com/photo-1621939514649-280e2fc8a00w?w=800&q=80'
|
||
];
|
||
|
||
const list = res.data.data.brands.map((b, bIndex) => {
|
||
let logoStr = b.brand_logo ? b.brand_logo.replace('http://', 'https://') : 'https://cdn-icons-png.flaticon.com/512/882/882730.png';
|
||
let bgStr = defaultBanners[bIndex % defaultBanners.length];
|
||
|
||
// 智能提取旗下主打爆款单品名作为海报副标语
|
||
let shopDesc = '品牌官方授权直供 · 精品热销';
|
||
if (b.items && b.items.length > 0) {
|
||
shopDesc = b.items[0].itemshorttitle || b.items[0].itemtitle || shopDesc;
|
||
}
|
||
|
||
return {
|
||
name: b.fq_brand_name || b.tb_brand_name || '大牌精选特卖',
|
||
desc: shopDesc,
|
||
bg: bgStr,
|
||
logo: logoStr,
|
||
tags: ['正品保障', '类目好货'],
|
||
items: (b.items || []).slice(0, 3).map(goods => ({
|
||
id: goods.id,
|
||
img: goods.itempic ? goods.itempic.replace('http://', 'https://') : '',
|
||
title: goods.itemshorttitle || goods.itemtitle,
|
||
price: goods.itemendprice,
|
||
oldPrice: goods.itemprice || (parseFloat(goods.itemendprice) + parseFloat(goods.couponmoney || 10)).toFixed(1),
|
||
coupon: parseFloat(goods.couponmoney || 0),
|
||
sold: goods.itemsale >= 10000 ? (goods.itemsale / 10000).toFixed(1) + '万' : goods.itemsale,
|
||
badge: goods.couponmoney ? '大额券' : '直降'
|
||
}))
|
||
};
|
||
}).filter(shop => shop.items && shop.items.length > 0);
|
||
|
||
if (list.length > 0) {
|
||
this.brandList = list;
|
||
} else {
|
||
// 此时 this.brandList 已经初始化为 []，天然浮现“已为您加载完毕”面板
|
||
console.log('指定分类回传品牌为空，平滑展示占位提示面板');
|
||
}
|
||
} else {
|
||
console.log('拉取分类数据异常或格式不对');
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('调用 brandCategory 接口失败', err);
|
||
}
|
||
});
|
||
},
|
||
// 底部品牌热销单品聚合数据流
|
||
fetchBrandSaleData() {
|
||
uni.request({
|
||
url: 'https://api.cmspro.haodanku.com/brandItem/brandSale?cid=YsWZ21tx',
|
||
success: (res) => {
|
||
if (res.data && res.data.code === 200 && res.data.data && Array.isArray(res.data.data.items)) {
|
||
const list = res.data.data.items.map(item => {
|
||
let logoUrl = '';
|
||
if (item.brand_info && item.brand_info.brand_logo) {
|
||
logoUrl = item.brand_info.brand_logo.replace('http://', 'https://');
|
||
}
|
||
let picUrl = item.itempic ? item.itempic.replace('http://', 'https://') : '';
|
||
|
||
let sales = item.itemsale;
|
||
if (sales >= 10000) {
|
||
sales = (sales / 10000).toFixed(1) + '万';
|
||
}
|
||
|
||
return {
|
||
id: item.id,
|
||
itemtitle: item.itemtitle,
|
||
itemshorttitle: item.itemshorttitle,
|
||
itemprice: item.itemprice,
|
||
itemendprice: item.itemendprice,
|
||
itemsale: sales,
|
||
discount: item.discount,
|
||
couponmoney: parseFloat(item.couponmoney || 0),
|
||
itempic: picUrl,
|
||
label: Array.isArray(item.label) ? item.label : [],
|
||
brand_name: item.brand_name,
|
||
shopname: item.shopname,
|
||
brand_info: {
|
||
fq_brand_name: (item.brand_info && item.brand_info.fq_brand_name) || item.brand_name,
|
||
brand_logo: logoUrl
|
||
}
|
||
};
|
||
}).filter(item => item.itemendprice && item.itempic);
|
||
|
||
if (list.length > 0) {
|
||
this.brandSaleList = list;
|
||
}
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('拉取底部品牌热销接口异常，采用极尽精美的静态底座显示', err);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.choiceness-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #f5f6f8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 自定义沉浸式头部 */
|
||
.custom-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(255, 255, 255, 0.98);
|
||
backdrop-filter: blur(20rpx);
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
|
||
z-index: 999;
|
||
}
|
||
|
||
.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-arrow {
|
||
font-size: 38rpx;
|
||
color: #333333;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.nav-right {
|
||
width: 80rpx;
|
||
}
|
||
|
||
.header-placeholder {
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 顶部深紫渐变横向滚动专区 (1:1 原生惊艳质感) */
|
||
.top-scroll-brands-section {
|
||
background: linear-gradient(135deg, #8a2be2 0%, #4b0082 100%);
|
||
padding: 24rpx 0 16rpx;
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.top-brands-scroll {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.t-brand-card {
|
||
display: inline-block;
|
||
width: 160rpx;
|
||
height: 120rpx;
|
||
margin-right: 16rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.12);
|
||
vertical-align: top;
|
||
}
|
||
|
||
.t-brand-card:last-child {
|
||
margin-right: 48rpx;
|
||
}
|
||
|
||
/* 卡片上半部纯白底包裹 Logo */
|
||
.t-logo-box {
|
||
height: 72rpx; /* 60% */
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.t-logo-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 卡片下半部粉桃底包裹文字 */
|
||
.t-name-box {
|
||
height: 48rpx; /* 40% */
|
||
background-color: #ffe4e1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 6rpx;
|
||
}
|
||
|
||
.t-name-text {
|
||
font-size: 20rpx;
|
||
color: #8b4513;
|
||
font-weight: bold;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 底部游标指示底栏 */
|
||
.t-indicator-wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.t-indicator-bg {
|
||
width: 80rpx;
|
||
height: 8rpx;
|
||
background: rgba(255, 255, 255, 0.25);
|
||
border-radius: 4rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.t-indicator-slider {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 30rpx;
|
||
height: 100%;
|
||
background: #ffffff;
|
||
border-radius: 4rpx;
|
||
transition: left 0.05s linear;
|
||
}
|
||
|
||
/* 页面横幅标语区 */
|
||
.page-banner {
|
||
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
|
||
padding: 30rpx 40rpx;
|
||
margin: 20rpx 30rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 8rpx 20rpx rgba(255, 65, 108, 0.2);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.banner-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
/* 横向分类选项卡导航区 */
|
||
.category-tabs-container {
|
||
background: #ffffff;
|
||
border-top-left-radius: 24rpx;
|
||
border-top-right-radius: 24rpx;
|
||
margin: 0 30rpx;
|
||
padding: 0 10rpx;
|
||
box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.02);
|
||
border-bottom: 1rpx solid #f8f8f8;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.category-tabs-scroll {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
height: 88rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.cat-tab-item {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 88rpx;
|
||
padding: 0 24rpx;
|
||
position: relative;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.cat-tab-text {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
transition: all 0.2s linear;
|
||
}
|
||
|
||
.active-text {
|
||
color: #8a2be2;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.cat-tab-line {
|
||
position: absolute;
|
||
bottom: 8rpx;
|
||
width: 32rpx;
|
||
height: 4rpx;
|
||
background: #8a2be2;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
/* 品牌流式与单品区 */
|
||
.brand-list-scroll {
|
||
flex: 1;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 新增：高保真空载/无数据底板展示区 */
|
||
.empty-loaded-tip {
|
||
background-color: #f8f8fb;
|
||
border-radius: 20rpx;
|
||
margin: 20rpx 30rpx 40rpx;
|
||
padding: 60rpx 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.elt-top-line {
|
||
width: 32rpx;
|
||
height: 4rpx;
|
||
background-color: #8a2be2;
|
||
border-radius: 2rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.elt-text {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
/* 调整首图圆角拼合：上面已被导航栏圆角包裹，下方列表无缝紧随 */
|
||
.brand-card-item {
|
||
background: #ffffff;
|
||
margin: 20rpx 30rpx 30rpx;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
/* 顶部英雄大背图区域 */
|
||
.brand-hero {
|
||
position: relative;
|
||
height: 240rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.hero-bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.hero-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.65));
|
||
}
|
||
|
||
.brand-meta {
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
left: 24rpx;
|
||
right: 24rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.logo-box {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
padding: 10rpx;
|
||
box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
|
||
flex-shrink: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.logo-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.meta-info {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
color: #ffffff;
|
||
z-index: 2;
|
||
padding-bottom: 4rpx;
|
||
}
|
||
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.brand-tag {
|
||
background: linear-gradient(to right, #ffd700, #ff8c00);
|
||
color: #ffffff;
|
||
font-size: 18rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
margin-left: 12rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.brand-desc {
|
||
font-size: 22rpx;
|
||
color: rgba(255,255,255,0.9);
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.tags-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.p-tag {
|
||
font-size: 18rpx;
|
||
background: rgba(255,255,255,0.2);
|
||
backdrop-filter: blur(8rpx);
|
||
padding: 2rpx 12rpx;
|
||
border-radius: 6rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
/* 热门商品矩阵 */
|
||
.goods-matrix {
|
||
display: flex;
|
||
padding: 24rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.matrix-item {
|
||
width: 31%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.goods-img-wrapper {
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.goods-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.badge-tag {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background: linear-gradient(to right, #ff416c, #ff4b2b);
|
||
color: #ffffff;
|
||
font-size: 18rpx;
|
||
padding: 2rpx 8rpx;
|
||
border-bottom-right-radius: 12rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.sold-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0,0,0,0.5);
|
||
color: #ffffff;
|
||
font-size: 18rpx;
|
||
text-align: center;
|
||
padding: 2rpx 0;
|
||
}
|
||
|
||
.goods-info {
|
||
padding-top: 12rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
|
||
.goods-title {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 1.3;
|
||
height: 62rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.price-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.price-current {
|
||
color: #ff416c;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.symbol {
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.value {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.price-old {
|
||
font-size: 20rpx;
|
||
color: #bbbbbb;
|
||
text-decoration: line-through;
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
.coupon-capsule {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1rpx solid #ff416c;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
margin-top: auto;
|
||
width: fit-content;
|
||
}
|
||
|
||
.c-left {
|
||
background: #ff416c;
|
||
color: #ffffff;
|
||
font-size: 18rpx;
|
||
padding: 0 6rpx;
|
||
}
|
||
|
||
.c-right {
|
||
color: #ff416c;
|
||
font-size: 18rpx;
|
||
padding: 0 8rpx;
|
||
}
|
||
|
||
/* 栏目分隔头 */
|
||
.section-divider {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20rpx 30rpx 30rpx;
|
||
}
|
||
|
||
.divider-line {
|
||
width: 80rpx;
|
||
height: 2rpx;
|
||
background: linear-gradient(to right, transparent, #dddddd);
|
||
}
|
||
|
||
.divider-line:last-child {
|
||
background: linear-gradient(to left, transparent, #dddddd);
|
||
}
|
||
|
||
.divider-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.fire-icon {
|
||
margin-right: 8rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
/* 底部双列爆品网格 */
|
||
.brand-sale-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 30rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.bs-card {
|
||
width: 48.5%;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.bs-img-box {
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
position: relative;
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.bs-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.bs-badge {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
|
||
color: #ffffff;
|
||
font-size: 18rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-bottom-right-radius: 16rpx;
|
||
font-weight: bold;
|
||
z-index: 2;
|
||
}
|
||
|
||
.bs-sold {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0,0,0,0.45);
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
padding: 4rpx 0;
|
||
backdrop-filter: blur(4rpx);
|
||
}
|
||
|
||
.bs-info {
|
||
padding: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
|
||
.bs-title {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 1.35;
|
||
height: 70rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.bs-price-wrap {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.bs-current {
|
||
color: #ff416c;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bs-symbol {
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.bs-val {
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.bs-old {
|
||
font-size: 20rpx;
|
||
color: #bbbbbb;
|
||
text-decoration: line-through;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.bs-coupon {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1rpx solid #ff416c;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
width: fit-content;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.bsc-tag {
|
||
background: #ff416c;
|
||
color: #ffffff;
|
||
font-size: 18rpx;
|
||
padding: 0 8rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bsc-num {
|
||
color: #ff416c;
|
||
font-size: 18rpx;
|
||
padding: 0 10rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 最底端独立品牌身份识别底条 */
|
||
.bs-brand-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fafafa;
|
||
padding: 10rpx 16rpx;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.bsb-logo {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
flex-shrink: 0;
|
||
background: #ffffff;
|
||
border: 1rpx solid #eeeeee;
|
||
}
|
||
|
||
.bsb-name {
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.bottom-tip {
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: #bbbbbb;
|
||
padding: 30rpx 0 50rpx;
|
||
}
|
||
</style>
|