<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 back-area" @click="goBack">
					<text class="back-icon">〈</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 class="page-banner-img-box">
				<image class="banner-photo" src="https://web.cms.hykefu.cn/static/img/tm-desc.png" mode="widthFix"></image>
			</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" @click="goToBrandDetail(shop)">
					<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" v-if="activeCatId === 0">
				<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" v-if="activeCatId === 0">
				<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" @click.stop="goToBottomBrandDetail(item)">
						<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" v-if="activeCatId === 0">-- 更多精选大牌与热卖单品持续上新中 --</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('点击顶部品牌专区卡片，导向下钻专供页面ID:', item.id);
				uni.navigateTo({
					url: `/pages/special-sale/details?id=${item.id}`
				});
			},
			// 点击专供大图海报头部区，跳转专属自画像详情 (打通精选取 brand_id、分类取 id 的双轨业务链路)
			goToBrandDetail(shop) {
				let bid = this.activeCatId === 0 ? shop.brand_id : shop.id;
				// 双向容错保底机制
				if (!bid) bid = shop.brand_id || shop.id || 1292;
				console.log(`点击专区海报跳转详情页，当前状态激活类目ID: ${this.activeCatId}，取值ID:`, bid);
				uni.navigateTo({
					url: `/pages/special-sale/details?id=${bid}`
				});
			},
			// 点击底层热卖榜单独立背书条，下钻专属品牌页
			goToBottomBrandDetail(item) {
				let bid = 1292;
				if (item.brand_info && item.brand_info.id) {
					bid = item.brand_info.id;
				} else if (item.id) {
					bid = item.id;
				}
				console.log('点击底栏品牌识别条，下钻品牌详情ID:', bid);
				uni.navigateTo({
					url: `/pages/special-sale/details?id=${bid}`
				});
			},
			// 改造多路分发状态机：切换即刻原子级清空数据源，阻断旧列表遗留展示
			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 {
										brand_id: shop.brand_id || shop.id || 1292,
										id: shop.id || shop.brand_id || 1292,
										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 {
									brand_id: b.brand_id || b.id || 1292,
									id: b.id || b.brand_id || 1292,
									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-icon {
		font-size: 38rpx;
		color: #333333;
		font-weight: bold;
	}

	.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-img-box {
		margin: 20rpx 30rpx 0;
		border-radius: 20rpx;
		overflow: hidden;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-photo {
		width: 100%;
		display: block;
	}

	/* 横向分类选项卡导航区 */
	.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>
