From be42d78eca72d8ede852417a0a6a05128c5cbbf3 Mon Sep 17 00:00:00 2001
From: zengjunhong <1213276609@qq.com>
Date: Wed, 5 Mar 2025 18:05:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A4=BE=E5=8C=BA=E7=A7=8D?=
 =?UTF-8?q?=E8=8D=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                    |  14 ++
 pages/community/community.vue | 263 ++++++++++++++++++++++++++++++++++
 2 files changed, 277 insertions(+)
 create mode 100644 pages/community/community.vue

diff --git a/pages.json b/pages.json
index 868e051..b1dafb8 100644
--- a/pages.json
+++ b/pages.json
@@ -191,6 +191,20 @@
 				"enablePullDownRefresh": true,
 				"navigationStyle": "default"
 			}
+		},
+		{
+			"path" : "pages/community/community",
+			"style" : 
+			{
+				"navigationBarTitleText": "社区",
+				"enablePullDownRefresh": false
+			},
+			"meta": {
+				"auth": false,
+				"sync": true,
+				"title": "社区",
+				"group": "商城"
+			}
 		}
 	],
 	"subPackages": [{
diff --git a/pages/community/community.vue b/pages/community/community.vue
new file mode 100644
index 0000000..8323dc0
--- /dev/null
+++ b/pages/community/community.vue
@@ -0,0 +1,263 @@
+<template>
+	<s-layout title="社区种草">
+		<view class="search_box">
+			<view class="ss-flex ss-col-center">
+			  <uni-search-bar
+			    class="ss-flex-1"
+			    radius="33"
+			    placeholder="请输入关键字"
+			    cancelButton="none"
+			    :focus="true"
+			    @confirm="onSearch($event.value)"
+			  />
+			</view>
+		</view>
+		<view class="nav-bd longTab" style="background-color: white;">
+			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" >
+				<view class="longItem"
+					:style="'color:' + (index == ProductNavindex ? '#e93323' : 'black')+';--color:#e93323'"
+					:data-index="index" :class="index===ProductNavindex?'click':''" v-for="(item,index) in navList"
+					:key="index" :id="'id'+index" @click="ProductNavTab(item, index)">{{ item.val }}
+				</view>
+			</scroll-view>
+		</view>
+		<view class="discover-box" :style="'height:'+swiperHeight+'px'">
+			<!-- 发现 -->
+			<scroll-view 
+			:style="'height:'+swiperHeight+'px'"
+			      class="scroll-view" 
+			      scroll-y 
+			      :refresher-enabled="true" 
+			      @refresherrefresh="onRefresh" 
+			      :refresher-triggered="triggered"
+			      @scrolltolower="handleScrollToLower"
+			    >
+			      <!-- 列表内容 -->
+			      <!-- <view v-for="(item, index) in list" :key="index" class="scroll-item">{{ item }}</view> -->
+
+				  <grid-view type="masonry" main-axis-gap="{{10}}" cross-axis-gap="{{10}}">
+				              <view class="masonry_item" v-for="(item, index) in arr" :key="index" :style="getStyle(item)">
+				                  {{item}}
+				              </view>
+				          </grid-view>
+				  
+				  
+				  
+			
+			      <!-- 加载更多提示 -->
+			      <view v-if="loadingMore" class="loading-more">加载中...</view>
+			      <view v-else-if="noMoreData" class="no-more-data">没有更多数据了</view>
+			    </scroll-view>
+		</view>
+	</s-layout>
+</template>
+
+<script setup>
+	import { reactive,ref,onMounted,computed,nextTick } from 'vue';
+	import sheep from '@/sheep';
+	
+	//数据定义
+	const isLogin = computed(() => sheep.$store('user').isLogin);
+	const template = computed(() => sheep.$store('app').template.user);
+	// const checkColor = computed(() => '#e93323');
+	const tabLeft = ref(0);
+	let ProductNavindex = ref(0);
+	let isWidth = ref(0);
+	const navList = reactive([{val:'热门'},
+					{val:'bbb'},
+					{val:'ccc'},
+					{val:'热门'},
+					{val:'bbb'},
+					{val:'ccc'},
+					{val:'热门'},
+					{val:'bbb'},
+					{val:'ccc'},
+					{val:'热门'},
+					{val:'bbb'},
+					{val:'ccc'},])
+	const categoryList = reactive([])				
+	const discoverList = reactive([])
+	
+
+	
+	function ProductNavTab(item, index) {
+		ProductNavindex.value = index;
+		// this.itemStyle = this.navList[index].activeList.styleType;
+		// this.goodsSort = item.activeList.goodsSort;
+
+		nextTick(() => {
+			const id = 'id' + index.value;
+			tabLeft.value = (index.value - 2) * isWidth.value; // 设置下划线位置
+			// 如果需要对id对应的元素进行直接操作，可以在这里进行
+			// document.getElementById(id).style.left = `${tabLeft.value}px`;
+		  });
+		// this.limit = item.activeList.num;
+		// this.changeTab(item, index);
+	}
+	const getStyle = (item) => {
+	      return {
+	        height: `${item * 100}rpx`,
+	        border: '1rpx solid red'
+	      };
+	    };
+	// 搜索
+	function onSearch(keyword) {
+	  if (!keyword) {
+	    return;
+	  }
+	  console.log('搜索了',keyword)
+	  // saveSearchHistory(keyword);
+	  // 前往商品列表（带搜索条件）
+	  // sheep.$router.go('/pages/goods/list', { keyword });
+	}
+	
+	
+	
+	// 标签内容方法
+	const list = ref([]);
+	const total = ref(20); // 总数据量，用于模拟加载更多
+	const pageSize = ref(10); // 每次加载的数据量
+	const pageNum = ref(1); // 当前页码
+	const loadingMore = ref(false); // 正在加载更多数据
+	const noMoreData = ref(false); // 是否已无更多数据
+	const triggered = ref(false); // 下拉刷新触发状态
+	const swiperHeight = ref(0)
+	
+	const arr =  ref([3, 2, 5, 7, 3, 7, 5, 4, 5, 7]);
+	
+	
+	// 初始化数据
+	const init = async () => {
+	  await loadMore(pageNum.value);
+	};
+
+	const handleScrollToLower = () => {
+	console.log('触发了上拉加载');
+	let newArr = [5, 3, 4, 7, 8, 2, 1, 5, 7, 6]
+	    // this.setData({ arr: [...this.data.arr, ...newArr] })
+		arr.value = [...arr.value,...newArr]
+	    // this.setData({ arr: this.data.arr })
+	    // loadItems(pageNum.value);
+	};
+	// 上拉加载更多
+	const loadMore = async () => {
+	  if (list.value.length >= total.value) {
+	    noMoreData.value = true;
+	    return;
+	  }
+	  loadingMore.value = true;
+	  pageNum.value += 1;
+	  // 模拟网络请求
+	  setTimeout(() => {
+	    const newData = Array.from({ length: pageSize.value }, (_, i) => `Item ${(pageNum.value - 1) * pageSize.value + i + 1}`);
+	    list.value.push(...newData);
+	    loadingMore.value = false;
+	  }, 1000);
+	};
+	
+	// 下拉刷新
+	const onRefresh =  () => {
+	  triggered.value = true;
+	  setTimeout(() => {
+	  pageNum.value = 1; // 重置页码
+		init(); // 重新加载数据
+		uni.stopPullDownRefresh();
+	  triggered.value = false; // 关闭刷新动画
+	  },1000)
+	};
+	
+	
+	onMounted(() => {
+		uni.getSystemInfo({
+			success(e) {
+				isWidth.value = (e.windowWidth) / 5;
+				swiperHeight.value = e.windowHeight - 167;
+			}
+		});
+	  init();
+	});
+			
+
+	
+</script>
+
+<style lang="scss" scoped>
+	.search_box{
+		width: 100%;
+		background-color: white;
+		.ss-flex{
+			width: 90%;
+			margin: 0 auto;
+		}
+	}
+	.discover-box{
+		width: 100%;
+		background-color: lightpink;
+		.scroll-view {
+		  // height: 500px;
+		  .scroll-item {
+		    padding: 20rpx;
+		    height: 200px;
+		    border-bottom: 1px solid #eee;
+		  }
+			.masonry_item{
+				
+			}
+		}
+		
+	}
+	.loading-more, .no-more-data {
+	  text-align: center;
+	  padding: 40rpx;
+	  font-size: 40rpx;
+	  color: #999;
+	}
+.nav-bd {
+	height: 70rpx;
+	line-height: 70rpx;
+	padding-left: 20rpx;
+	background: #fff;
+
+	.item {
+		display: inline-block;
+		font-size: 28rpx;
+		color: #333;
+		font-weight: 400;
+		padding-right: 48rpx;
+
+		&.on {
+			border-radius: 0;
+		}
+	}
+}
+.longTab {
+	.longItem {
+		height: 70rpx;
+		display: inline-block;
+		line-height: 70rpx;
+		text-align: center;
+		font-size: 28rpx;
+		color: #333333;
+		white-space: nowrap;
+		margin-right: 46rpx;
+
+		&.click {
+			font-weight: bold;
+			font-size: 30rpx;
+			position: relative;
+
+			&::after {
+				content: '';
+				width: 40rpx;
+				height: 4rpx;
+				background: var(--color);
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				transform: translateX(-50%);
+			}
+		}
+	}
+}
+
+</style>