11

components/tradeActivity/tradeIndex.vue

+<template>
+	<view class="tradeIndex">
+		<!-- Tab 栏 -->
+		<view class="tradeIndex-tabs">
+			<scroll-view class="tradeIndex-tabs-scroll" scroll-x enable-flex>
+				<view
+					class="tradeIndex-tab"
+					v-for="(tab, index) in tabs"
+					:key="index"
+					@click="switchTab(index)"
+				>
+					<text class="tradeIndex-tab-name" :class="{ active: currentTab === index }">
+						{{ tab.name }}
+					</text>
+					<view class="tradeIndex-tab-line" :class="{ active: currentTab === index }"></view>
+				</view>
+			</scroll-view>
+		</view>
 
+		<!-- 内容区 -->
+		<scroll-view
+			class="tradeIndex-scroll"
+			scroll-y
+			@scrolltolower="loadMore"
+			:lower-threshold="100"
+		>
+			<!-- 空状态 -->
+			<view class="tradeIndex-empty" v-if="!loading && listData.length === 0">
+				<image
+					class="tradeIndex-empty-icon"
+					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/empty.png"
+					mode="aspectFit"
+				/>
+				<text>暂无内容</text>
+			</view>
+
+			<!-- 瀑布流 -->
+			<view class="tradeIndex-waterfall" v-if="listData.length > 0">
+				<view class="waterfall-left">
+					<view
+						class="waterfall-item"
+						v-for="(item, index) in leftList"
+						:key="index"
+						@click="goDetail(item)"
+					>
+						<image class="waterfall-item-img" :src="item.CoverImg" mode="widthFix"></image>
+						<view class="waterfall-item-name">{{ item.DataName }}</view>
+					</view>
+				</view>
+				<view class="waterfall-right">
+					<view
+						class="waterfall-item"
+						v-for="(item, index) in rightList"
+						:key="index"
+						@click="goDetail(item)"
+					>
+						<image class="waterfall-item-img" :src="item.CoverImg" mode="widthFix"></image>
+						<view class="waterfall-item-name">{{ item.DataName }}</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 加载更多 -->
+			<view class="tradeIndex-loading" v-if="loading">
+				<text>加载中...</text>
+			</view>
+			<view class="tradeIndex-nomore" v-if="!loading && noMore && listData.length > 0">
+				<text>没有更多了</text>
+			</view>
+			<view style="height: 30rpx;"></view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			dataObj: {
+				type: [Object, Array],
+				default: () => ({})
+			}
+		},
+		data() {
+			return {
+				tabs: [
+					{ name: '推荐', type: '0' },
+					{ name: '找品牌', type: '3' },
+					{ name: '找项目', type: '1' },
+					{ name: '租写字楼', type: '2' },
+					{ name: '服务', type: '4' }
+				],
+				currentTab: 0,
+				listData: [],
+				loading: false,
+				noMore: false,
+				pageIndex: 1,
+				pageSize: 10
+			}
+		},
+		computed: {
+			leftList() {
+				return this.listData.filter((item, index) => index % 2 === 0);
+			},
+			rightList() {
+				return this.listData.filter((item, index) => index % 2 === 1);
+			}
+		},
+		mounted() {
+			this.loadData(true);
+		},
+		methods: {
+			switchTab(index) {
+				if (this.currentTab === index) return;
+				this.currentTab = index;
+				this.loadData(true);
+			},
+			loadData(refresh = false) {
+				if (this.loading) return;
+				this.loading = true;
+				if (refresh) {
+					this.pageIndex = 1;
+					this.noMore = false;
+					this.listData = [];
+				}
+				this.request2({
+						url: "/api/AppletTrade/GetTradeIndexData",
+						data: {
+							pageIndex: this.pageIndex,
+							pageSize: this.pageSize,
+							qType: Number(this.tabs[this.currentTab].type)
+						}
+					},
+					(res) => {
+						this.loading = false;
+						if (res.resultCode == 1) {
+							let pageData = res.data.pageData || [];
+							if (refresh) {
+								this.listData = pageData;
+							} else {
+								this.listData = [...this.listData, ...pageData];
+							}
+							this.noMore = this.pageIndex >= res.data.pageCount;
+						}
+					}
+				);
+			},
+			loadMore() {
+				if (this.noMore || this.loading) return;
+				this.pageIndex++;
+				this.loadData(false);
+			},
+			goDetail(item) {
+				console.log('[tradeIndex] 点击条目:', item);
+				if (item.DataId) {
+					uni.navigateTo({ url: `/pages/trade/detail?id=${item.DataId}` });
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+.tradeIndex {
+	width: 100%;
+	height: 100%;
+}
+
+/* Tab 栏 */
+.tradeIndex-tabs {
+	background-color: #fff;
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
+
+.tradeIndex-tabs-scroll {
+	white-space: nowrap;
+	padding: 0 20rpx;
+}
+
+.tradeIndex-tab {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 24rpx 28rpx 16rpx;
+}
+
+.tradeIndex-tab-name {
+	font-size: 30rpx;
+	color: #999;
+	transition: all 0.2s;
+}
+
+.tradeIndex-tab-name.active {
+	color: #1F1F1F;
+	font-weight: 700;
+}
+
+.tradeIndex-tab-line {
+	width: 40rpx;
+	height: 6rpx;
+	border-radius: 3rpx;
+	background-color: transparent;
+	margin-top: 8rpx;
+	transition: all 0.2s;
+}
+
+.tradeIndex-tab-line.active {
+	background-color: #ff4544;
+}
+
+/* 滚动区域 */
+.tradeIndex-scroll {
+	height: calc(100vh - 200rpx);
+}
+
+/* 空状态 */
+.tradeIndex-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 120rpx 0;
+	color: #999;
+	font-size: 28rpx;
+}
+
+.tradeIndex-empty-icon {
+	width: 160rpx;
+	height: 160rpx;
+	margin-bottom: 20rpx;
+	opacity: 0.4;
+}
+
+/* 瀑布流 */
+.tradeIndex-waterfall {
+	display: flex;
+	align-items: flex-start;
+	padding: 20rpx 20rpx 0;
+}
+
+.waterfall-left {
+	width: calc(50% - 10rpx);
+	margin-right: 20rpx;
+}
+
+.waterfall-right {
+	width: calc(50% - 10rpx);
+}
+
+.waterfall-item {
+	background-color: #fff;
+	border-radius: 12rpx;
+	overflow: hidden;
+	margin-bottom: 20rpx;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+}
+
+.waterfall-item-img {
+	width: 100%;
+	display: block;
+}
+
+.waterfall-item-name {
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #1F1F1F;
+	padding: 16rpx;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* 加载提示 */
+.tradeIndex-loading {
+	text-align: center;
+	padding: 24rpx 0;
+	font-size: 26rpx;
+	color: #999;
+}
+
+.tradeIndex-nomore {
+	text-align: center;
+	padding: 24rpx 0;
+	font-size: 26rpx;
+	color: #ccc;
+}
+</style>

pages/index/index.vue

@@ -83,7 +83,7 @@
 							<tradeActivity v-if="d.id == 'tradeActivity'" :dataObj="d.data" :pagePaddingBottom="pagePaddingBottom" @refresh="refreshPage"
 							 ref="tradeActive"></tradeActivity>
 							 <!--首店首页数据插件-->
-							<tradeIndex  v-if="d.id == 'tradeIndex'" :dataObj="d.data" @refresh="refreshPage"></tradeIndex>
+							<tradeIndex  v-if="d.id == 'tradeIndex'" @refresh="refreshPage"></tradeIndex>
 						</template>
 					</view>
 				</template>