11

components/tradeActivity/tradeIndex.vue

@@ -11,17 +11,14 @@
 				</view>
 			</scroll-view>
 		</view>
-
-		<!-- 内容区 -->
-		<scroll-view class="tradeIndex-scroll" scroll-y @scrolltolower="loadMore" :lower-threshold="150"
-			refresher-enabled :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
 		<!-- 空状态 -->
 		<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 class="tradeIndex-empty-text">暂无内容</text>
 		</view>
-
+		<!-- 内容区 -->
+		<view v-if="listData.length > 0" class="tradeIndex-content">
 			<!-- 瀑布流 -->
 			<view class="tradeIndex-waterfall" v-if="listData.length > 0">
 				<view class="waterfall-left">
@@ -71,19 +68,18 @@
 					</view>
 				</view>
 			</view>
-
-			<!-- 加载更多 -->
-			<view class="tradeIndex-loading" v-if="loading && !refreshing">
-				<view class="loading-dot"></view>
-				<text class="loading-text">加载中...</text>
 		</view>
+		<!-- 加载更多按钮 -->
+		<view class="tradeIndex-loadmore" v-if="listData.length > 0 && !noMore" @click="loadMore">
+			<text v-if="loading">加载中...</text>
+			<text v-else>点击加载更多</text>
+		</view>
+		<!-- 没有更多了 -->
 		<view class="tradeIndex-nomore" v-if="!loading && noMore && listData.length > 0">
 			<view class="nomore-line"></view>
 			<text class="nomore-text">没有更多了</text>
 			<view class="nomore-line"></view>
 		</view>
-			<view style="height: 30rpx;"></view>
-		</scroll-view>
 	</view>
 </template>
 
@@ -97,6 +93,7 @@
 		},
 		data() {
 			return {
+				mainColor: '#ff4544',
 				tabs: [{
 						name: '推荐',
 						type: '0'
@@ -134,6 +131,9 @@
 			}
 		},
 		mounted() {
+			// if (this.$uiConfig && this.$uiConfig.mainColor) {
+			// 	this.mainColor = this.$uiConfig.mainColor;
+			// }
 			this.loadData(true);
 		},
 		methods: {
@@ -188,7 +188,6 @@
 				this.loadData(false);
 			},
 			goDetail(item) {
-				console.log('[tradeIndex] 点击条目:', item);
 				let gotoUrl = '';
 				//载体项目
 				if (item.DataType == 1) {
@@ -216,13 +215,16 @@
 
 <style lang="scss">
 	.tradeIndex {
-		width: 100%;
-		height: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
 		background-color: #f8f8f8;
 	}
 
 	/* ========== Tab 栏 ========== */
 	.tradeIndex-tabs {
+		flex-shrink: 0;
+		height: 100rpx;
 		background-color: #fff;
 		position: sticky;
 		top: 0;
@@ -271,9 +273,9 @@
 		background: linear-gradient(90deg, #ff6b6b, #ff4544);
 	}
 
-	/* ========== 滚动区域 ========== */
-	.tradeIndex-scroll {
-		height: calc(100vh - 120rpx);
+	/* ========== 内容区域 ========== */
+	.tradeIndex-content {
+		padding: 20rpx 24rpx 0;
 	}
 
 	/* ========== 空状态 ========== */
@@ -281,14 +283,15 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding: 160rpx 0 100rpx;
+		justify-content: center;
+		padding: 100rpx 0;
 	}
 
 	.tradeIndex-empty-icon {
-		width: 200rpx;
-		height: 200rpx;
+		width: 120rpx;
+		height: 120rpx;
 		opacity: 0.35;
-		margin-bottom: 32rpx;
+		margin-bottom: 16rpx;
 	}
 
 	.tradeIndex-empty-text {
@@ -301,7 +304,6 @@
 	.tradeIndex-waterfall {
 		display: flex;
 		align-items: flex-start;
-		padding: 20rpx 24rpx 0;
 	}
 
 	.waterfall-left {
@@ -395,41 +397,29 @@
 		letter-spacing: 0.5rpx;
 	}
 
-	/* ========== 加载更多 ========== */
-	.tradeIndex-loading {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 32rpx 0;
-	}
-
-	.loading-dot {
-		width: 8rpx;
-		height: 8rpx;
-		border-radius: 50%;
-		background-color: #ff4544;
-		margin-right: 12rpx;
-		animation: loadingPulse 1.2s ease-in-out infinite;
-	}
-
-	.loading-text {
-		font-size: 26rpx;
-		color: #b0b0b0;
-		letter-spacing: 1rpx;
+	/* ========== 加载更多按钮 ========== */
+	.tradeIndex-loadmore {
+		background-color: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		margin: 30rpx 24rpx 40rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.07);
+		transition: box-shadow 0.25s ease, transform 0.25s ease;
 	}
 
-	@keyframes loadingPulse {
-
-		0%,
-		100% {
-			opacity: 0.4;
-			transform: scale(0.8);
+	.tradeIndex-loadmore:active {
+		transform: scale(0.98);
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 	}
 
-		50% {
-			opacity: 1;
-			transform: scale(1.2);
-		}
+	.tradeIndex-loadmore text {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 80rpx;
+		font-size: 28rpx;
+		font-weight: 500;
+		letter-spacing: 2rpx;
 	}
 
 	.tradeIndex-nomore {