From 29ea97eedf261e19205578aa068443c75944a882 Mon Sep 17 00:00:00 2001
From: Connor <1813766834@qq.com>
Date: Wed, 5 Jun 2024 12:43:54 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=9D=E9=A2=98=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                      |   2 +
 pages/common/postview/index.vue | 481 ++++++++++++++++++++++++++-----
 pages/index.vue                 | 490 +++++++++++++-------------------
 3 files changed, 610 insertions(+), 363 deletions(-)

diff --git a/pages.json b/pages.json
index aa77fb1..11922a4 100644
--- a/pages.json
+++ b/pages.json
@@ -8,6 +8,8 @@
 		}
 	},
 	"pages": [
+		
+	
 
 		{
 			"path": "pages/index",
diff --git a/pages/common/postview/index.vue b/pages/common/postview/index.vue
index b6bcb53..d39df2c 100644
--- a/pages/common/postview/index.vue
+++ b/pages/common/postview/index.vue
@@ -1,85 +1,420 @@
 <template>
-	<view class="post-item">
-		<view class="post-list-item">
-			<view @click.stop="toUser('跳转到用户个人空间')">
-				<up-avatar :src="src" size="50"></up-avatar>
-			</view>
-			<view class="center">
-				<view class="post-top-box">
-					<view class="uname">
-						<text v-if="userType == 1" class="official">官方</text>
-						<text class="username">{{ username.substring(0, 10) }}</text>
+	<!-- 话题 -->
+		<view class="center-content-post">
+			<view class="center-content-post-padding">
+				<view class="center-content-post-head">
+				    <!-- 左对齐 -->
+				    <view class="flex alignCenter">
+						<!-- 头像 -->
+				        <div class="avatar-container">
+				            <u-avatar class="avatar-1" size="84rpx" :src="postValue.avatar"></u-avatar>
+				            <image v-if="postValue.isOfficial" class="official-1" src="../static/images/icon/tu3-6.png"></image>
+				        </div>
+						<!-- 用户名 -->
+				        <view class="center-content-post-head-title">
+				            <text class="center-content-post-head-title-uname">{{postValue.uname}}</text>
+				            <text class="center-content-post-head-title-timeAddress">{{postValue.createTime + '·' + postValue.address}}</text>
+				        </view>
+				    </view>
+				    <!-- 右对齐 -->
+				    <view class="flex alignCenter" v-if="postViewIndex != 0">
+				        <text class="no-focus-text" v-if="postValue.isFocus" @click="addFocus(index)">关注</text>
+				        <text class="focus-text" v-else @click="cancelFocus()">已关注</text>
+				    </view>
+				</view>
+				<text class="center-content-post-title" v-if="postValue.title">{{postValue.title}}</text>
+				<text class="center-content-post-content-0" v-if="postViewType == 0">{{postValue.content}}</text>
+				<text class="center-content-post-content-1" v-if="postViewType == 1">{{postValue.content}}</text>
+				<!-- 图片 -->
+				<!--一张图片-->
+				<block v-if="postValue.media.length == 1">
+					<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="postValue.media[0]"
+						@tap="previewImage(postValue.media[0], postValue.media)"></image>
+				</block>
+				<!--二张图片-->
+				<block v-if="postValue.media.length == 2">
+					<view class="img-style-2">
+						<image :lazy-load="true" v-for="(mediaItem, index2) in postValue.media" :key="index2"
+							@tap.stop="previewImage(mediaItem, postValue.media)" mode="aspectFill"
+							:src="mediaItem"></image>
 					</view>
+				</block>
+				<!--三张图片-->
+				<block v-if="postValue.media.length >= 3">
+					<u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
+				</block>
+				<!-- tab -->
+				<view class="center-content-post-tab" style="display: flex;">
+					<text
+						class="center-content-post-tab-text"
+						v-for="(tabItem, index2) in postValue.tab" :key="index2"
+						:text="'#' + tabItem">{{'#' + tabItem}}</text>
+				</view>
+				<view class="post-list-bottom" v-if="postViewType == 0" style="display: flex; justify-content: space-between;">
+				    <!-- 靠左对齐 -->
 					<view class="">
-						<text v-if="postTop>0" class="officials">置顶</text>
-						<text v-if="poststatus==1" class="officials">审核中</text>
-						<text v-if="poststatus==2" class="officials">已下架</text>
+						<view class="p-item">
+						    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu2-9.png" mode=""></image>
+						    <text class="count">{{ postValue.transmitCount }}</text>
+						</view>
 					</view>
-				</view>
-				<view>
-					<text class="time">{{createTime}}</text>
-				</view>
+				    <!-- 靠右对齐 -->
+					<view class="flex alignCenter">
+						<view v-if="postValue.isLike" class="p-item" @click.stop="cancelCollection()">
+						    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-8.png" mode=""></image>
+						    <text class="count">{{ postValue.likeCount }}</text>
+						</view>
+										
+						<!-- 靠右对齐 -->
+						<view v-if="!postValue.isLike" class="p-item" @click.stop="addCollection()">
+						    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-7.png" mode=""></image>
+						    <text class="count">{{ postValue.likeCount }}</text>
+						</view>
+										
+						<!-- 靠右对齐 -->
+						<view class="p-item margin50">
+						    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-3.png" mode=""></image>
+						    <text class="count">{{ postValue.commentCount }}</text>
+						</view>
+										
+						<!-- 靠右对齐 -->
+						<view class="p-item margin50" v-if="postValue.ifFavorite" @click.stop="cancelFavorite()">
+						    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-2.png" mode=""></image>
+						    <text class="count">{{ postValue.favoriteCount }}</text>
+						</view>
+										
+						<!-- 靠右对齐 -->
+						<view class="p-item margin50" v-if="!postValue.ifFavorite" @click.stop="addFavorite()">
+						    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-1.png" mode=""></image>
+						    <text class="count">{{ postValue.favoriteCount }}</text>
+						</view>
+					</view>
+				</view>				
 			</view>
+			<u-line></u-line>
 		</view>
-		<view class="post-content">
-			<rich-text class="post-text" :nodes="postcontent"></rich-text>
-			<block v-if="posttype == 1">
-				<up-album :urls="urls2" multipleSize="95" space="3"></up-album>
-			</block>
-		</view>
-		<!-- 位置 -->
-		<view class="address" v-if="postaddress">
-			<u-icon class="icon" name="map-fill"></u-icon>
-			<text>{{ postaddress }}</text>
-		</view>
-		<!-- 底部 -->
-		<view class="post-list-bottom">
-			<view class="p-item margin50">
-				<!-- <text class="iconfont icon-quanzi"></text> -->
-				<u-icon name="share"></u-icon>
-				<text class="count">{{ readCount }}</text>
-			</view>
-			<view v-show="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
-				<u-icon name="heart-fill" color="#cc0000"></u-icon>
-				<text class="count">{{ likeCount }}</text>
-			</view>
-			<view v-show="!isLike" class="p-item" @click.stop="addCollection('点赞')">
-				<u-icon name="heart"></u-icon>
-				<text class="count">{{ likeCount }}</text>
-			</view>
-			<view class="p-item margin50">
-				<!-- <text class="iconfont icon-pinglun"></text> -->
-				<u-icon name="chat"></u-icon>
-				<text class="count">{{ commentCount }}</text>
-			</view>
-		</view>
-	</view>
 </template>
 
-<script>
-	export default {
-	  props: {
-	    talkPost: {
-	      type: Object,
-	      required: true
-	    }
-	  },
-	  methods: {
-	    toUser(message) {
-	      // 跳转到用户个人空间的逻辑
-	      console.log(message);
-	    },
-	    cancelCollection(message) {
-	      // 取消点赞的逻辑
-	      console.log(message);
-	    },
-	    addCollection(message) {
-	      // 点赞的逻辑
-	      console.log(message);
-	    }
-	  }
+<script setup>
+	import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
+	const props = defineProps({
+	    postValue: Object,
+		postViewIndex: Number,
+		postViewType: Number
+	});
+	// const postValue = reactive(
+	// 	{
+	// 		avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
+	// 		uname: '爱吃饭的小张',
+	// 		createTime: '11分钟前',
+	// 		address: '南开大学',
+	// 		isFocus: false,
+	// 		isOfficial: true,
+	// 		title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+	// 		content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
+	// 		type: '1',
+	// 		media: [
+	// 			'https://tu.sioe.cn/gj/qiege/image.jpg',
+	// 			'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
+	// 			'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
+	// 			'https://tu.sioe.cn/gj/qiege/image.jpg',
+	// 		],
+	// 		tab: ['学术讨论组', '校园风景'],
+	// 		transmitCount: 136,
+	// 		isLike: true,
+	// 		likeCount: 999,
+	// 		commentCount: 136,
+	// 		ifFavorite: true,
+	// 		favoriteCount: 136
+	// 	}
+	// );
+	
+	const previewImage = (url, urls) => {
+		uni.previewImage({
+			current: url, // 当前显示图片的http链接
+			urls: urls // 需要预览的图片http链接列表
+		});
+	};
+	
+	const cancelCollection = () => {
+		props.postValue.likeCount -= 1;
+		props.postValue.isLike = !props.postValue.isLike;
+	};
+	
+	const addCollection = () => {
+		props.postValue.likeCount += 1;
+		props.postValue.isLike = !props.postValue.isLike;
+	};
+	
+	const cancelFavorite = () => {
+		props.postValue.favoriteCount -= 1;
+		props.postValue.ifFavorite = !props.postValue.ifFavorite;
+	};
+	
+	const addFavorite = () => {
+		props.postValue.favoriteCount += 1;
+		props.postValue.ifFavorite = !props.postValue.ifFavorite;
+	};
+	
+	const cancelFocus = () => {
+		props.postValue.isFocus = !props.postValue.isFocus;
+	};
+	
+	const addFocus = () => {
+		props.postValue.isFocus = !props.postValue.isFocus;
 	};
 </script>
 
-<style>
+<style lang="scss">
+
+		.center-content-post {
+		}
+		.center-content-post-padding {
+			padding: 46rpx 32rpx;
+		}
+		.center-content-post-head {
+		    display: flex;
+		    justify-content: space-between;
+		}
+		
+		.center-content-post-head-title {
+		    display: flex;
+		    flex-direction: column;
+			margin-left: 20rpx;
+		}
+		
+		.center-content-post-head-title-uname {
+		    font-weight: 400;
+		    font-size: 30rpx;
+		    text-align: left;
+		    color: #000000;
+		    align-self: flex-start; /* 垂直起始对齐 */
+			margin-bottom: 20rpx;
+			height: 32rpx;
+			line-height: 32rpx;
+		}
+		
+		.center-content-post-head-title-timeAddress {
+		    font-weight: 400;
+		    font-size: 30rpx;
+		    text-align: left;
+		    color: #999999;
+		    align-self: flex-end; /* 垂直结束对齐 */
+			height: 30rpx;
+			line-height: 30rpx;
+		}
+		.no-focus-text {
+			font-weight: 400;
+			width: 58rpx;
+			// height: 30rpx;
+			font-size: 28rpx;
+			text-align: left;
+			color: #3477FC;
+		}
+		.focus-text {
+			font-weight: 400;
+			/* width: 58rpx; */
+			// height: 30rpx;
+			font-size: 28rpx;
+			text-align: left;
+			color: #2553b4;
+		}
+		.center-content-post-title{
+			display: block;
+			font-weight: 600;
+			/* width: 670rpx; */
+			// height: 80rpx;
+			font-size: 32rpx;
+			text-align: left;
+			color: #000000;
+			margin-top: 30rpx;
+			display: -webkit-box; /* 将文本视为弹性盒子 */
+			    -webkit-line-clamp: 2; /* 设置最大行数 */
+			    -webkit-box-orient: vertical; /* 垂直方向排列文本 */
+			    overflow: hidden; /* 隐藏超出部分 */
+		}
+		.center-content-post-content-0{
+			display: block;
+			font-weight: 400;
+			/* width: 670rpx; */
+			// height: 80rpx;
+			font-size: 32rpx;
+			text-align: left;
+			color: #333333;
+			margin-top: 18rpx;
+			margin-bottom: 28rpx;
+			display: -webkit-box; /* 将文本视为弹性盒子 */
+			    -webkit-line-clamp: 2; /* 设置最大行数 */
+			    -webkit-box-orient: vertical; /* 垂直方向排列文本 */
+			    overflow: hidden; /* 隐藏超出部分 */
+		}
+		.center-content-post-content-1{
+			display: block;
+			font-weight: 400;
+			/* width: 670rpx; */
+			// height: 80rpx;
+			font-size: 32rpx;
+			text-align: left;
+			color: #333333;
+			margin-top: 18rpx;
+			margin-bottom: 28rpx;
+			
+		}
+		
+		.u-album__row[data-v-723ad357] {
+		    justify-content: center !important;
+		}
+		.u-album__row.data-v-723ad357 {
+			justify-content: center !important;
+			/* height: 200rpx !important; */
+		}
+		.u-album__row__wrapper {}
+		.data-v-6fcabaad {
+			border-radius: 20rpx 20rpx 20rpx 20rpx;
+	/* 		width: 200rpx !important;
+			height: 200rpx !important; */
+		}
+		
+		.center-content-post-tab{
+			margin-top: 20rpx;
+			margin-bottom: 20rpx;
+		}
+		
+	
+		.post-list-bottom {
+		  display: flex;
+		  justify-content: center; /* 水平居中 */
+		}
+		
+		.p-item {
+		    display: flex;
+		    align-items: center; /* 垂直居中 */
+		    justify-content: center; /* 水平居中 */
+	
+		}
+		.center-content-post-tab-text{
+			font-weight: 400;
+			/* width: 139rpx; */
+			// height: 26rpx;
+			font-size: 24rpx;
+			text-align: left;
+			color: #3477FC;
+			/* width: 130rpx; */
+			// height: 44rpx;
+			// line-height: 44rpx;
+			border-radius: 10rpx 10rpx 10rpx 10rpx;
+			background: #f7f8fa;
+			padding: 8rpx;
+			/* margin-left: 50rpx; */
+		}
+		.center-content-post-tab-text:nth-child(2) {
+		    /* 您的样式 */
+			margin-left: 24rpx; /* 添加额外的左边距 */
+		}
+		
+		.margin50 {
+		  margin-left: 50rpx; /* 添加额外的左边距 */
+		}
+		.count{
+			font-weight: 400;
+			width: 48rpx;
+			/* height: 23rpx; */
+			font-size: 28rpx;
+			text-align: left;
+			color: #787878;
+			margin-left: 10rpx;
+		}
+		
+	.box-a {
+	    margin-top: 42rpx;
+	    display: flex;
+	    flex-wrap: wrap;
+	    justify-content: space-between;
+	  }
+	
+	  .box-b {
+	    width: calc(33.33% - 16rpx); /* 每行三个元素，减去外边距的总宽度 */
+	    margin-bottom: 24rpx;
+	  }
+	
+	  .box-c {
+	    // width: 100%;
+	    // height: 82rpx;
+	    border-radius: 16rpx;
+	    background: #f7f8fc;
+	    border: 2rpx solid transparent;
+	    box-sizing: border-box;
+	    cursor: pointer;
+	    overflow: hidden;
+	  }
+	
+	  .offtext {
+	    font-weight: 400;
+	    font-size: 30rpx;
+	    text-align: center;
+	    font-family: "Microsoft YaHei";
+	    // line-height: 82rpx;
+	    display: block;
+	    cursor: pointer;
+	    transition: all 0.3s ease;
+		padding: 12rpx 0;
+	  }
+	
+	  .boxtext {
+	    font-weight: 600;
+	    color: #91b4ff;
+	  }
+	
+	  .box-d {
+	    border-color: #91b4ff;
+	  }
+		
+		.avatar-container {
+		    position: relative;
+		}
+		
+		.avatar-1 {
+		    position: relative;
+		}
+		
+		.official-1 {
+		    position: absolute;
+		    width: 32rpx;
+		    height: 32rpx;
+		    bottom: 0;
+		    right: 0;
+		}
+		.img-style-1 {
+			display: block;
+			width: 100%;
+			height: 600rpx;
+			border-radius: 6px;
+			overflow: hidden;
+		
+		width: 686rpx;
+		height: 370rpx;
+		border-radius: 18rpx 18rpx 18rpx 18rpx;
+		background: #b3d7ff;
+		}
+		
+		.img-style-2 {
+			display: flex;
+		
+			image {
+				margin: 6rpx;
+		
+				width: 100%;
+				height: 306rpx;
+				border-radius: 18rpx 18rpx 18rpx 18rpx;
+			}
+		}
+		.image-container {
+		  display: inline-block;
+		  position: relative; /* 设置父元素为相对定位 */
+		  width: 46rpx;
+		  height: 46rpx;
+		}
+	
+		
+
 </style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index ab30ab4..cd8692f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -62,116 +62,13 @@
 				</view>
 				<view class="center-content-focus-line"></view>
 			</view>
-			
-			<!-- 话题 -->
-			<view class="center-content-post" v-for="(item, index) in postList" :key="index">
-				<!-- <view class="center-content-post-head flex alignCenter justifyBetween">
-					<u-avatar size="84rpx" :src="item.avatar"></u-avatar>
-					<view class="center-content-post-head-title">
-						<text class="center-content-post-head-title-uname">{{item.uname}}</text>
-						<text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
-					</view>
-					<text v-if="item.isFocus">关注</text>
-					<text>已关注</text>
-				</view> -->
-				
-				<view class="center-content-post-padding">
-					<view class="center-content-post-head">
-					    <!-- 左对齐 -->
-					    <view class="flex alignCenter">
-							<!-- 头像 -->
-					        <div class="avatar-container">
-					            <u-avatar class="avatar-1" size="84rpx" :src="item.avatar"></u-avatar>
-					            <image v-if="item.isOfficial" class="official-1" src="../static/images/icon/tu3-6.png"></image>
-					        </div>
-							<!-- 用户名 -->
-					        <view class="center-content-post-head-title">
-					            <text class="center-content-post-head-title-uname">{{item.uname}}</text>
-					            <text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
-					        </view>
-					    </view>
-					    <!-- 右对齐 -->
-					    <view class="flex alignCenter" v-if="viewIndex != 0">
-					        <text class="no-focus-text" v-if="item.isFocus" @click="addFocus(index)">关注</text>
-					        <text class="focus-text" v-else @click="cancelFocus(index)">已关注</text>
-					    </view>
-					</view>
-					<text class="center-content-post-title" v-if="item.title">{{item.title}}</text>
-					<text class="center-content-post-content">{{item.content}}</text>
-					<!-- 图片 -->
-					<!--一张图片-->
-					<block v-if="item.media.length == 1">
-						<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="item.media[0]"
-							@tap="previewImage(item.media[0], item.media)"></image>
-					</block>
-					<!--二张图片-->
-					<block v-if="item.media.length == 2">
-						<view class="img-style-2">
-							<image :lazy-load="true" v-for="(mediaItem, index2) in item.media" :key="index2"
-								@tap.stop="previewImage(mediaItem, item.media)" mode="aspectFill"
-								:src="mediaItem"></image>
-						</view>
-					</block>
-					<!--三张图片-->
-					<block v-if="item.media.length >= 3">
-						<u-album :urls="item.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
-					</block>
-					<!-- tab -->
-					<view class="center-content-post-tab" style="display: flex;">
-						<text
-							class="center-content-post-tab-text"
-							v-for="(tabItem, index2) in item.tab" :key="index2"
-							:text="'#' + tabItem">{{'#' + tabItem}}</text>
-					</view>
-					<view class="post-list-bottom" style="display: flex; justify-content: space-between;">
-					    <!-- 靠左对齐 -->
-						<view class="">
-							<view class="p-item">
-							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu2-9.png" mode=""></image>
-							    <text class="count">{{ item.transmitCount }}</text>
-							</view>
-						</view>
-					    <!-- 靠右对齐 -->
-						<view class="flex alignCenter">
-							<view v-if="item.isLike" class="p-item" @click.stop="cancelCollection(index)">
-							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-8.png" mode=""></image>
-							    <text class="count">{{ item.likeCount }}</text>
-							</view>
-											
-							<!-- 靠右对齐 -->
-							<view v-if="!item.isLike" class="p-item" @click.stop="addCollection(index)">
-							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-7.png" mode=""></image>
-							    <text class="count">{{ item.likeCount }}</text>
-							</view>
-											
-							<!-- 靠右对齐 -->
-							<view class="p-item margin50">
-							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-3.png" mode=""></image>
-							    <text class="count">{{ item.commentCount }}</text>
-							</view>
-											
-							<!-- 靠右对齐 -->
-							<view class="p-item margin50" v-if="item.ifFavorite" @click.stop="cancelFavorite(index)">
-							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-2.png" mode=""></image>
-							    <text class="count">{{ item.favoriteCount }}</text>
-							</view>
-											
-							<!-- 靠右对齐 -->
-							<view class="p-item margin50" v-if="!item.ifFavorite" @click.stop="addFavorite(index)">
-							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-1.png" mode=""></image>
-							    <text class="count">{{ item.favoriteCount }}</text>
-							</view>
-						</view>
-					    
-					
-					</view>
-					
-				</view>
-				
-		
-				<u-line></u-line>
+
+			<view class="" v-for="(postItem, postIndex) in postList" :key="postIndex">
+				<PostView :postValue="postItem" :postViewIndex="viewIndex" :postViewType="0"></PostView>
 			</view>
+
 		</view>
+		
 		<!-- 热门弹出层 -->
 		<u-popup :round="20" :show="searchOpen" mode="bottom" @close="searchOpen = false" @open="searchOpen = true">
 		
@@ -230,193 +127,206 @@
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				viewIndex: 0,
-				searchOpen: false,
-				lefther: 0,
-				searchPrerequisite: '热门',
-				postTypeOpen: false,
-				postTypeList: ['发布话题', '发布活动'],
-				bgColor: 'rgba(170, 0, 0, 0)',
-				searchPrerequisiteList: [
-					'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8', '筛选9'
-					],
-				list1: [{
-					name: '关注',
-				}, {
-					name: '推荐',
-				}],
-				focusList: [{
-					avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
-					uname: '爱吃饭的小张'
-				},{
-					avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
-					uname: '喜欢你没道理'
-				},{
-					avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
-					uname: '恋爱60秒'
-				},{
-					avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
-					uname: '爱吃饭的小张'
-				}],
-				postList: [{
-					avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
-					uname: '爱吃饭的小张',
-					createTime: '11分钟前',
-					address: '南开大学',
-					isFocus: false,
-					isOfficial: true,
-					title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
-					content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
-					type: '1',
-					media: [
-						'https://tu.sioe.cn/gj/qiege/image.jpg',
-						'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
-						'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
-						'https://tu.sioe.cn/gj/qiege/image.jpg',
-					],
-					tab: [
-						'学术讨论组',
-						'校园风景'
-					],
-					transmitCount: 136,
-					isLike: true,
-					likeCount: 999,
-					commentCount: 136,
-					ifFavorite: true,
-					favoriteCount: 136
-				},{
-					avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
-					uname: '喜欢你没道理',
-					createTime: '2024-5-5',
-					address: '南开大学',
-					isFocus: false,
-					isOfficial: false,
-					// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
-					content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
-					type: '1',
-					media: [
-						'https://tu.sioe.cn/gj/qiege/image.jpg',
-					],
-					tab: [
-						'校园风景'
-					],
-					transmitCount: 13,
-					isLike: false,
-					likeCount: 99,
-					commentCount: 13,
-					ifFavorite: true,
-					favoriteCount: 13
-				},{
-					avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
-					uname: '恋爱60秒',
-					createTime: '2024-5-4',
-					address: '理工大学',
-					isFocus: false,
-					isOfficial: false,
-					title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
-					content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
-					type: '1',
-					media: [
-						'https://tu.sioe.cn/gj/qiege/image.jpg',
-						'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
-					],
-					tab: [
-						'校园风景'
-					],
-					transmitCount: 13,
-					isLike: false,
-					likeCount: 99,
-					commentCount: 13,
-					ifFavorite: false,
-					favoriteCount: 13
-				}]
-			}
-		},
-		onLoad() {
-			console.log(this.$store.state.user.QNDomain);
-		},
-		methods: {
-			previewImage(url, urls) {
-				uni.previewImage({
-					current: url, // 当前显示图片的http链接
-					urls: urls // 需要预览的图片http链接列表
-				});
-			},
-			toScanCode() {
-				// 允许从相机和相册扫码
-				uni.scanCode({
-					success: function (res) {
-						console.log('条码类型：' + res.scanType);
-						console.log('条码内容：' + res.result);
-					}
-				});
-			},
-			togglePostType() {
-			  this.postTypeOpen = !this.postTypeOpen;
-			},
-			toEarch() {
-				console.log()
-				this.$tab.navigateTo('/pages/search/index')
-			},
-			rightClick() {
-				console.log('rightClick');
-			},
-			leftClick() {
-				console.log('leftClick');
-			},
-			click(item) {
-			    console.log('item', item);
-				this.viewIndex = item.index;
-			},
-			cancelCollection(index) {
-				console.log(111,index)
-				this.postList[index].likeCount -= 1;
-				this.postList[index].isLike = !this.postList[index].isLike;
-			},
-			addCollection(index) {
-				console.log(111,index)
-				this.postList[index].likeCount += 1;
-				this.postList[index].isLike = !this.postList[index].isLike;
-			},
-			cancelFavorite(index) {
-				console.log(111,index)
-				this.postList[index].favoriteCount -= 1;
-				this.postList[index].ifFavorite = !this.postList[index].ifFavorite;
-			},
-			addFavorite(index) {
-				console.log(111,index)
-				this.postList[index].favoriteCount += 1;
-				this.postList[index].ifFavorite = !this.postList[index].ifFavorite;
-			},
-			cancelFocus(index) {
-				console.log(111,index)
-				this.postList[index].isFocus = !this.postList[index].isFocus;
-			}
-			,
-			addFocus(index) {
-				console.log(111,index)
-				this.postList[index].isFocus = !this.postList[index].isFocus;
-			},
-			handerLi(res) {
-				this.lefther = res;
-				console.log(res)
-				this.searchPrerequisite = this.searchPrerequisiteList[res]
-				setTimeout(() => {
-				    this.searchOpen = !this.searchOpen
-				}, 350);
+<script setup>
+import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
+import {onReachBottom,onLoad} from "@dcloudio/uni-app";
+import PostView from "@/pages/common/postview/index.vue";
 
+		
+		const { proxy } = getCurrentInstance();
+		onReachBottom(() => {
+		    console.log('触底了')
+		})
+
+		const viewIndex = ref(0);
+		const searchOpen = ref(false);
+		const lefther = ref(0);
+		const searchPrerequisite = ref('热门');
+		const postTypeOpen = ref(false);
+		const bgColor = ref('rgba(170, 0, 0, 0)');
+
+		const postTypeList = ['发布话题', '发布活动'];
+		const searchPrerequisiteList = [
+			'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8', '筛选9'
+		];
+
+		const list1 = reactive([
+			{ name: '关注' },
+			{ name: '推荐' }
+		]);
+
+		const focusList = reactive([
+			{
+				avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
+				uname: '爱吃饭的小张'
 			},
-			handerShowHand() {
-				this.searchOpen = !this.searchOpen
+			{
+				avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
+				uname: '喜欢你没道理'
+			},
+			{
+				avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
+				uname: '恋爱60秒'
+			},
+			{
+				avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
+				uname: '爱吃饭的小张'
 			}
-		}
-	}
+		]);
+
+		const postList = reactive([
+			{
+				avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
+				uname: '爱吃饭的小张',
+				createTime: '11分钟前',
+				address: '南开大学',
+				isFocus: false,
+				isOfficial: true,
+				title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+				content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并超出部分测试超出部分测试超出部分测试超出部分测试......超出部分测试超出部分测试超出部分测试超出部分测试',
+				type: '1',
+				media: [
+					'https://tu.sioe.cn/gj/qiege/image.jpg',
+					'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
+					'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
+					'https://tu.sioe.cn/gj/qiege/image.jpg',
+				],
+				tab: ['学术讨论组', '校园风景'],
+				transmitCount: 136,
+				isLike: true,
+				likeCount: 999,
+				commentCount: 136,
+				ifFavorite: true,
+				favoriteCount: 136
+			},
+			{
+				avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
+				uname: '喜欢你没道理',
+				createTime: '2024-5-5',
+				address: '南开大学',
+				isFocus: false,
+				isOfficial: false,
+				content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
+				type: '1',
+				media: [
+					'https://tu.sioe.cn/gj/qiege/image.jpg',
+				],
+				tab: ['校园风景'],
+				transmitCount: 13,
+				isLike: false,
+				likeCount: 99,
+				commentCount: 13,
+				ifFavorite: true,
+				favoriteCount: 13
+			},
+			{
+				avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
+				uname: '恋爱60秒',
+				createTime: '2024-5-4',
+				address: '理工大学',
+				isFocus: false,
+				isOfficial: false,
+				title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+				content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
+				type: '1',
+				media: [
+					'https://tu.sioe.cn/gj/qiege/image.jpg',
+					'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
+				],
+				tab: ['校园风景'],
+				transmitCount: 13,
+				isLike: false,
+				likeCount: 99,
+				commentCount: 13,
+				ifFavorite: false,
+				favoriteCount: 13
+			}
+		]);
+
+		const previewImage = (url, urls) => {
+			uni.previewImage({
+				current: url, // 当前显示图片的http链接
+				urls: urls // 需要预览的图片http链接列表
+			});
+		};
+
+		const toScanCode = () => {
+			// 允许从相机和相册扫码
+			uni.scanCode({
+				success: function (res) {
+					console.log('条码类型：' + res.scanType);
+					console.log('条码内容：' + res.result);
+				}
+			});
+		};
+
+		const togglePostType = () => {
+			postTypeOpen.value = !postTypeOpen.value;
+		};
+
+		const toEarch = () => {
+			proxy.$tab.navigateTo('/pages/search/index');
+		};
+
+		const rightClick = () => {
+			console.log('rightClick');
+		};
+
+		const leftClick = () => {
+			console.log('leftClick');
+		};
+
+		const click = (item) => {
+			viewIndex.value = item.index;
+		};
+
+		const cancelCollection = (index) => {
+			postList[index].likeCount -= 1;
+			postList[index].isLike = !postList[index].isLike;
+		};
+
+		const addCollection = (index) => {
+			postList[index].likeCount += 1;
+			postList[index].isLike = !postList[index].isLike;
+		};
+
+		const cancelFavorite = (index) => {
+			postList[index].favoriteCount -= 1;
+			postList[index].ifFavorite = !postList[index].ifFavorite;
+		};
+
+		const addFavorite = (index) => {
+			postList[index].favoriteCount += 1;
+			postList[index].ifFavorite = !postList[index].ifFavorite;
+		};
+
+		const cancelFocus = (index) => {
+			postList[index].isFocus = !postList[index].isFocus;
+		};
+
+		const addFocus = (index) => {
+			postList[index].isFocus = !postList[index].isFocus;
+		};
+
+		const handerLi = (res) => {
+			lefther.value = res;
+			searchPrerequisite.value = searchPrerequisiteList[res];
+			setTimeout(() => {
+				searchOpen.value = !searchOpen.value;
+			}, 350);
+		};
+
+		const handerShowHand = () => {
+			searchOpen.value = !searchOpen.value;
+		};
+
+		onMounted(() => {
+			console.log(proxy.$store.state.user.QNDomain);
+		});
+
 </script>
 
+
 <style lang="scss">
 	// 微信小程序配置
 :deep(.u-navbar__content__left.data-v-f631659b, .u-navbar__content__right.data-v-f631659b){