<template>
|
<view class="page">
|
<!-- 分类药丸筛选栏 -->
|
<view class="filter-bar">
|
<view class="pill-group">
|
<view
|
v-for="(code, index) in categoryList"
|
:key="code"
|
class="pill"
|
:class="{ 'pill--active': index === activeIndex }"
|
@tap="handleCategoryTap(index)"
|
>
|
<text class="pill-text">{{ code }}</text>
|
</view>
|
</view>
|
<!-- 药丸组滚动位置指示条（滑块随选中项移动） -->
|
<view class="slider">
|
<view class="slider-thumb" :style="{ marginLeft: sliderOffset }"></view>
|
</view>
|
</view>
|
|
<!-- 产品名称 + 探索更多 -->
|
<view class="product-bar">
|
<view class="product-text">
|
<text class="product-code">{{ currentCategory }}</text>
|
<text class="product-name">{{ productName }}</text>
|
</view>
|
<view class="explore-btn" @tap="handleExploreMore">
|
<text class="explore-btn-text">探索更多</text>
|
<view class="explore-btn-arrow-wrap">
|
<view class="explore-btn-arrow"></view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 健康方案卡片列表 -->
|
<view class="plan-list">
|
<view
|
v-for="plan in planList"
|
:key="plan.id"
|
class="plan-card"
|
@tap="handlePlanTap(plan)"
|
>
|
<!-- 方案图素材未入仓，暂以同色系渐变块占位，素材就绪后替换为 image -->
|
<view class="plan-card-visual" :style="{ background: plan.background }"></view>
|
</view>
|
</view>
|
|
<!-- 全局缺货订单提示（存在缺货订单时所有页面均弹出） -->
|
<stock-order-toast />
|
</view>
|
</template>
|
|
<script setup>
|
import { computed, ref } from 'vue'
|
import StockOrderToast from '@/components/stock-order-toast/stock-order-toast.vue'
|
|
/** 分类药丸：与设计稿一致的三档产品系列代号 */
|
const categoryList = ['G&METS-II', 'HBBLF-2', 'NEARCLC-II']
|
|
/** 当前选中的分类下标 */
|
const activeIndex = ref(0)
|
|
/** 产品主名（三档分类当前共用一个产品名，接口就绪后按分类拉取） */
|
const productName = '超分子基团复合肽'
|
|
/** 方案卡片：素材缺失，先以设计稿同色系渐变占位 */
|
const planList = [
|
{ id: 1, background: 'linear-gradient(135deg, #16336e 0%, #2b52b8 48%, #4a6fd0 100%)' },
|
{ id: 2, background: 'linear-gradient(135deg, #3a2d86 0%, #5b4bc0 50%, #7d6bd8 100%)' },
|
{ id: 3, background: 'linear-gradient(135deg, #c9dcf3 0%, #e6f0fb 52%, #f7fbff 100%)' }
|
]
|
|
/** 当前选中的分类代号 */
|
const currentCategory = computed(() => categoryList[activeIndex.value])
|
|
/** 指示条滑块偏移：轨道 28pt、滑块 10pt，共 3 档 → 每档步进 18rpx */
|
const sliderOffset = computed(() => `${activeIndex.value * 18}rpx`)
|
|
/** 切换分类药丸 */
|
const handleCategoryTap = (index) => {
|
activeIndex.value = index
|
}
|
|
/** 探索更多：产品详情页尚未开发，先给出占位反馈 */
|
const handleExploreMore = () => {
|
uni.showToast({ title: '敬请期待', icon: 'none' })
|
}
|
|
/** 方案卡片：详情页尚未开发，先给出占位反馈 */
|
const handlePlanTap = () => {
|
uni.showToast({ title: '敬请期待', icon: 'none' })
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.page {
|
min-height: 100vh;
|
background: #f8fafc;
|
}
|
|
/* ==================== 分类药丸筛选栏（375×44pt） ==================== */
|
|
.filter-bar {
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 32rpx;
|
box-sizing: border-box;
|
}
|
|
.pill-group {
|
display: flex;
|
align-items: center;
|
gap: 16rpx;
|
}
|
|
.pill {
|
height: 56rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 28rpx;
|
border-radius: 28rpx;
|
background: #edf2f7;
|
}
|
|
.pill-text {
|
font-size: 23rpx;
|
font-weight: 600;
|
line-height: 1;
|
color: #475569;
|
}
|
|
.pill--active {
|
background: #003e7e;
|
}
|
|
.pill--active .pill-text {
|
font-weight: 700;
|
color: #ffffff;
|
}
|
|
/* 滚动指示条：轨道 28×3pt，滑块 10×3pt */
|
.slider {
|
flex-shrink: 0;
|
width: 56rpx;
|
height: 6rpx;
|
margin-left: 16rpx;
|
display: flex;
|
align-items: center;
|
border-radius: 3rpx;
|
background: #e2e8f0;
|
}
|
|
.slider-thumb {
|
width: 20rpx;
|
height: 6rpx;
|
border-radius: 3rpx;
|
background: #c5a566;
|
}
|
|
/* ==================== 产品名称 + 探索更多（375×48pt） ==================== */
|
|
.product-bar {
|
height: 96rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 32rpx;
|
box-sizing: border-box;
|
}
|
|
.product-text {
|
display: flex;
|
flex-direction: column;
|
gap: 4rpx;
|
}
|
|
.product-code {
|
font-size: 22rpx;
|
font-weight: 700;
|
letter-spacing: 2.4rpx;
|
line-height: 1;
|
color: #003e7e;
|
}
|
|
.product-name {
|
font-size: 35rpx;
|
font-weight: 800;
|
letter-spacing: -0.4rpx;
|
line-height: 1.1;
|
color: #0f172a;
|
}
|
|
/* 探索更多：绿色渐变胶囊按钮 */
|
.explore-btn {
|
flex-shrink: 0;
|
height: 64rpx;
|
display: flex;
|
align-items: center;
|
gap: 12rpx;
|
padding: 0 16rpx 0 28rpx;
|
border-radius: 32rpx;
|
background: linear-gradient(90deg, #82c236 0%, #639c1f 100%);
|
box-shadow: 0 6rpx 16rpx rgba(106, 160, 39, 0.21);
|
}
|
|
.explore-btn-text {
|
font-size: 24rpx;
|
font-weight: 600;
|
letter-spacing: 0.4rpx;
|
line-height: 1;
|
color: #ffffff;
|
}
|
|
.explore-btn-arrow-wrap {
|
width: 36rpx;
|
height: 36rpx;
|
border-radius: 18rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: rgba(255, 255, 255, 0.16);
|
}
|
|
/* 箭头：lucide chevron-right 白色 */
|
.explore-btn-arrow {
|
width: 22rpx;
|
height: 22rpx;
|
background-repeat: no-repeat;
|
background-position: center center;
|
background-size: 100% 100%;
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtOSAxOCA2LTYtNi02Ii8+PC9zdmc+');
|
}
|
|
/* ==================== 方案卡片列表（343×160pt / 张） ==================== */
|
|
.plan-list {
|
display: flex;
|
flex-direction: column;
|
gap: 24rpx;
|
padding: 8rpx 32rpx 32rpx;
|
box-sizing: border-box;
|
}
|
|
.plan-card {
|
width: 100%;
|
height: 320rpx;
|
overflow: hidden;
|
border-radius: 28rpx;
|
border: 1rpx solid rgba(226, 232, 240, 0.5);
|
box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.04);
|
}
|
|
.plan-card-visual {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
