From e1e2fe5710a5b5cd9c19bd3aa99c998a1a613ca8 Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Sat, 17 Jan 2026 17:58:01 +0800
Subject: [PATCH] 团购组件增加筛选
---
mobile/components/diy/gxpp/gxpp.vue | 67 ++++++++++++++++++++++++++++++---
1 files changed, 61 insertions(+), 6 deletions(-)
diff --git a/mobile/components/diy/gxpp/gxpp.vue b/mobile/components/diy/gxpp/gxpp.vue
index a26795a..ba00015 100644
--- a/mobile/components/diy/gxpp/gxpp.vue
+++ b/mobile/components/diy/gxpp/gxpp.vue
@@ -3,17 +3,52 @@
<view class="hdzq-icon">
<image :src="itemData.style.image" mode="aspectFill"></image>
</view>
- <view class="diy-bg" :style="'background:url('+itemData.style.background+') no-repeat;'">
- <!--列表-->
+ <view class="diy-bg" :style="'background-image:url('+itemData.style.background+');'">
+
+ <!---列表-->
+ <swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration" @change="changeSwiper">
+ <!---第一个-->
+ <swiper-item v-if="listData.length > 0">
<view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
- :key="index" @click="gotoPageFunc(item)">
+ :key="index" @click="gotoPageFunc(item)" v-if="index < 4">
<template>
-
<view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'">
{{ item.name }}
</view>
</template>
</view>
+ </swiper-item>
+ <!---第一个-->
+
+ <!---第二个-->
+ <swiper-item v-if="listData.length > 4">
+ <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
+ :key="index" @click="gotoPageFunc(item)" v-if="index > 3 && index < 8">
+ <template>
+ <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'">
+ {{ item.name }}
+ </view>
+ </template>
+ </view>
+ </swiper-item>
+ <!---第二个-->
+
+ <!---第三个-->
+ <swiper-item v-if="listData.length > 8">
+ <view class="article-item" v-for="(item, index) in listData" :class="'show-type__'+ itemData.style.display"
+ :key="index" @click="gotoPageFunc(item)" v-if="index > 7 && index < 12">
+ <template>
+ <view class="f24 text-ellipsis-2 lh200" :style="'color:'+itemData.style.textColor+';'">
+ {{ item.name }}
+ </view>
+ </template>
+ </view>
+ </swiper-item>
+ <!---第三个-->
+
+ <!--列表-->
+ </swiper>
+
</view>
</view>
</template>
@@ -23,7 +58,13 @@
data() {
return {
/*数据列表*/
- listData: []
+ listData: [],
+ indicatorDots: true,
+ autoplay: true,
+ interval: 2000,
+ duration: 500,
+ indicatorActiveColor: '#ffffff',
+ current: 0
};
},
props: ['itemData'],
@@ -31,6 +72,10 @@
this.listData = this.itemData.data;
},
methods: {
+
+ changeSwiper(e) {
+ this.current = e.detail.current;
+ },
/*跳转页面*/
gotoPageFunc(e) {
@@ -70,9 +115,16 @@
border-radius: 6rpx;
box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
}
+ swiper {
+ height: 350rpx;
+ }
.diy-bg{
- background-size: 100%;
+ width: 100%;
+ height: 350rpx;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
}
.diy-article .show-type__10,
@@ -80,6 +132,9 @@
display: flex;
padding: 20rpx;
border-bottom: 1rpx solid #eeeeee;
+ white-space: nowrap; /* 不换行 */
+ overflow: hidden; /* 超出部分隐藏 */
+ text-overflow: ellipsis; /* 超出显示省略号 */
}
.diy-article .show-type__10:last-child,
--
Gitblit v1.9.2