285 lines
6.7 KiB
Vue
285 lines
6.7 KiB
Vue
<template>
|
|
<!-- 右侧商品列表区 - 上方子分类 + 下方滚动商品网格 -->
|
|
<view class="right-content">
|
|
<!-- 子分类(顶部条件) - Figma 1519:250 -->
|
|
<view class="sub-categories" v-if="subCategories.length > 0">
|
|
<view
|
|
class="sub-cat-item"
|
|
:class="{ active: activeSubId === item.id }"
|
|
v-for="(item, index) in subCategories"
|
|
:key="index"
|
|
@tap="selectSub(item.id)"
|
|
>{{ item.name }}</view>
|
|
</view>
|
|
|
|
<!-- 商品网格滚动区 -->
|
|
<scroll-view scroll-y class="product-scroll">
|
|
<view class="product-grid" v-if="list.length > 0">
|
|
<view
|
|
class="product-card"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@tap="onTapProduct(item)"
|
|
>
|
|
<!-- 图片 135x120 (Figma) -->
|
|
<view class="product-img">
|
|
<image
|
|
class="product-image"
|
|
:src="item.image"
|
|
mode="aspectFill"
|
|
v-if="item.image"
|
|
></image>
|
|
<view class="product-badges">
|
|
<view
|
|
class="product-badge"
|
|
:style="{ background: tag.bg, color: tag.color }"
|
|
v-for="(tag, tIdx) in item.tags"
|
|
:key="tIdx"
|
|
>{{ tag.text }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品信息 -->
|
|
<view class="product-info">
|
|
<text class="product-name">{{ item.name }}</text>
|
|
<text class="product-price">￥{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 空状态 -->
|
|
<view class="product-empty" v-else>
|
|
<text class="empty-icon">📦</text>
|
|
<text class="empty-text">没有找到相关商品</text>
|
|
</view>
|
|
|
|
<!-- 分页 -->
|
|
<view class="pagination" v-if="total > 0">
|
|
<text class="page-info">显示 {{ start }}-{{ end }} 共 {{ total }} 个产品</text>
|
|
<view class="page-controls">
|
|
<view class="page-btn" :class="{ disabled: current === 1 }" @tap="onPrev">上一页</view>
|
|
<view
|
|
class="page-num"
|
|
:class="{ active: current === item }"
|
|
v-for="(item, index) in pageNumbers"
|
|
:key="index"
|
|
@tap="onGoPage(item)"
|
|
>{{ item }}</view>
|
|
<view class="page-btn" :class="{ disabled: current === totalPages }" @tap="onNext">下一页</view>
|
|
</view>
|
|
<view class="page-size"><text>{{ pageSize }}/页</text></view>
|
|
</view>
|
|
|
|
<view class="loading-more" v-if="loading"><text>加载中...</text></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ProductGrid',
|
|
props: {
|
|
list: { type: Array, default: () => [] },
|
|
subCategories: { type: Array, default: () => [] },
|
|
activeSubId: { type: [String, Number], default: '' },
|
|
total: { type: Number, default: 0 },
|
|
current: { type: Number, default: 1 },
|
|
pageSize: { type: Number, default: 10 },
|
|
totalPages: { type: Number, default: 1 },
|
|
pageNumbers: { type: Array, default: () => [] },
|
|
start: { type: Number, default: 1 },
|
|
end: { type: Number, default: 10 },
|
|
loading: { type: Boolean, default: false }
|
|
},
|
|
methods: {
|
|
selectSub(id) { this.$emit('sub-select', id) },
|
|
onTapProduct(item) { this.$emit('product-click', item) },
|
|
onPrev() { if (this.current > 1) this.$emit('page-change', this.current - 1) },
|
|
onNext() { if (this.current < this.totalPages) this.$emit('page-change', this.current + 1) },
|
|
onGoPage(page) { this.$emit('page-change', page) }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 右侧内容区 - 上下分:顶部条件 + 下方滚动 */
|
|
.right-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f2f2f2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 顶部子分类条件 - padding 6px 10px 圆角 60px */
|
|
.sub-categories {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
padding: 20rpx 20rpx;
|
|
background: #ffffff;
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
}
|
|
.sub-cat-item {
|
|
padding: 12rpx 20rpx;
|
|
background: #ffffff;
|
|
border-radius: 60rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
line-height: 1.2;
|
|
}
|
|
/* 选中态 - 白底+橙色边框0.5px+橙色文字 */
|
|
.sub-cat-item.active {
|
|
border: 1rpx solid #ff6800;
|
|
color: #ff6800;
|
|
}
|
|
|
|
/* 滚动商品区 */
|
|
.product-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 商品网格 - 2列自适应(避免宽度+间距同时固定导致挤压) */
|
|
.product-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
padding: 20rpx;
|
|
}
|
|
.product-card {
|
|
flex: 1 1 calc(50% - 8rpx);
|
|
min-width: 0;
|
|
background: #ffffff;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
/* 图片 135x120 - 用 padding-bottom 撑比例 */
|
|
.product-img {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-bottom: 88.89%; /* 120/135 */
|
|
background: #f7f7f7;
|
|
overflow: hidden;
|
|
}
|
|
.product-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.product-badges {
|
|
position: absolute;
|
|
top: 12rpx;
|
|
left: 12rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
z-index: 1;
|
|
}
|
|
.product-badge {
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
/* 商品信息 - 内边距 10px */
|
|
.product-info {
|
|
padding: 20rpx;
|
|
}
|
|
/* 商品名 13px Medium #000000 */
|
|
.product-name {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
line-height: 1.4;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
/* 价格 15px Heavy #FF0000 红色 */
|
|
.product-price {
|
|
display: block;
|
|
margin-top: 16rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
color: #ff0000;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* 分页 */
|
|
.pagination {
|
|
padding: 32rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
}
|
|
.page-info {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
.page-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
.page-btn {
|
|
padding: 10rpx 20rpx;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
background: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
}
|
|
.page-btn.disabled {
|
|
color: #cccccc;
|
|
}
|
|
.page-num {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
background: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
}
|
|
.page-num.active {
|
|
background: #ff6800;
|
|
color: #ffffff;
|
|
}
|
|
.page-size {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
.loading-more {
|
|
padding: 32rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.product-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 0;
|
|
}
|
|
.empty-icon {
|
|
font-size: 96rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.empty-text {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
</style>
|