talk_appAmin/pages/index.vue

<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor">
		    <template class="img1BOX" #left>
				<image src="../static/images/icon/tu2-4.png" class="img1"></image>
				<!-- <image src="../static/images/icon/tu2-5.png" class="img2 image-container" @click="togglePostType"></image> -->
				<view class="image-container">
				  <image src="../static/images/icon/tu2-5.png" class="img2" @click="togglePostType"></image>
				  <!-- 加号小弹窗 -->
				  <view class="postTypeContainer" v-if="postTypeOpen">
				    <view class="postTypeWindow" v-for="(item, index) in postTypeList" :key="index">
				      <text @click="publishTalk(item)">{{item.lable}}</text>
				    </view>
				  </view>
				</view>

		    </template>
			 <template class="img2Box" #center>
				<view class="qiehuanBox">
					<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4"
					:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
					:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
					:list="list1" @click="click"></u-tabs>
				</view>
			</template>

		</u-navbar>

		<view class="bgc"></view>
		<!-- 搜索栏 -->
		<view class="sousuoBox1 flex alignCenter justifyBetween">
			<view class="sousuoBox flex alignCenter justifyBetween" @click="toEarch">
				<view class="souBOx flex alignCenter">
					<image src="../static/images/icon/tu2-2.png" class="img3"></image>
					<view class="shuruText">在食堂捡到一张饭卡</view>
				</view>
				<image @click.stop="toScanCode" src="../static/images/icon/tu2-3.png" class="img4"></image>
			</view>
			<view class="category-dropdown flex alignCenter" @click="searchOpen = !searchOpen">
			    <text class="text1 flex alignCenter">{{searchPrerequisite}}</text>
			    <image v-if="!searchOpen" src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image>
			    <!-- <image v-else src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image> -->
				<u-icon v-else name="arrow-up-fill"  size="26rpx" class="flex alignCenter"></u-icon>
			</view>
		</view>
		<view class="center-content">
			<!-- 关注 -->
			<view class="" v-if="viewIndex == 0">
				<view class="center-content-focus">
					<text class="center-content-focus-text">我关注的人</text>
					<view class="center-content-focus-list">
					    <u-scroll-list :indicator='false'>
					        <view class="flex  alignCenter justifyBetween">
					            <view class="center-content-focus-item" v-for="(item, index) in focusList" :key="index">
					                <u-avatar class="center-content-focus-item-avatat" size="120rpx" :src="item.avatar"></u-avatar>
					                <text class="center-content-focus-item-text">{{item.uname}}</text>
					            </view>
					        </view>
					    </u-scroll-list>
					</view>
				</view>
				<view class="center-content-focus-line"></view>
			</view>

			<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">

			<view style="height: 77vh; position: relative;margin-left: 32rpx;">
				<view style="display: flex; height: 48rpx; margin-top: 32rpx;">
					<image src="../static/images/icon/tu3-5.png" style="width: 48rpx; height: 48rpx;" @click="handerShowHand"></image>

					<view style="
					margin: auto ;
					margin-right: 308rpx;
					font-weight: 600;
					width: 136rpx;
					height: 35rpx;
					font-size: 34rpx;
					text-align: left;
					color: #000000;
					line-height: 35rpx;
					">
						全部类目
					</view>

				</view>

				<view class="">
					<text style="
					font-weight: Regular;
					width: 338rpx;
					height: 26rpx;
					font-size: 26rpx;
					text-align: left;
					color: #999999;
					display: block;
					margin-top: 42rpx;
					">点击选择类目，仅可选择一个</text>
				</view>


				<view class="box-a">
				    <view class="box-b" v-for="(item, index) in searchPrerequisiteList" :key="index">
				      <ul
				        class="box-c"
				        :class="{ 'box-d': lefther === index }"
				        @click="handerShowHand"
				      >
				        <li class="offtext" :class="{ boxtext: lefther === index }" @click.stop="handerLi(index)">
				          <text>{{ item }}</text>
				        </li>
				      </ul>
				    </view>
				  </view>


			</view>
		</u-popup>

	</view>
</template>

<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 postTypeList =  [{lable:'发布话题',id:1}, {lable:'发布活动',id:2}];
		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: '爱吃饭的小张'
			},
			{
				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 publishTalk = (item) => {
			console.log()
			if(item.id === 2){
				//todo 判断用户是否有增加活动的接口调用权限
				proxy.$tab.navigateTo('/pages/activity/publish')
			}
		}

		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 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){
	padding-left: 32rpx !important;
}
	// 安卓app配置
:deep(.u-navbar__content__left[data-v-f631659b], .u-navbar__content__right[data-v-f631659b]){
	padding-left: 32rpx !important;
}
	.img1BOX{
		padding-left: 32rpx;
		display: flex;
		align-content: center;
	}
	.img1{
		width: 46rpx;
		height: 46rpx;
		margin-right: 28rpx;
	}
	.img2{
		width: 46rpx;
		height: 46rpx;
	}

	.content {
		position: relative;

		.img2Box{

			.qiehuanBox{
			padding-left: 32rpx;
			display: flex;
			align-content: center;
			justify-content: center;
			}
		}

	}

	.u-scroll-list.data-v-fea2b4f4 {
		padding-bottom: 0px !important;
	}
	.u-tabs__wrapper__nav__line[data-v-0de61367]{
		position: absolute !important;
		bottom: 0rpx !important;
	}
	/* .u-navbar__content[data-v-75dad532] {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    height: 44px;
	    background-color: linear-gradient(90deg, rgba(170, 0, 0, 1.0) 100%, rgba(255, 255, 255, 0) 100%) !important;
	    position: relative;
	    justify-content: center;
	} */


	.bgc{
			width: 750rpx;
			height: 356rpx;
			background: linear-gradient(90deg, rgb(201, 246, 245), rgb(248, 248, 226));
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			z-index: -1;
		}
		.sousuoBox1{
			margin: 16rpx 32rpx;
			width: auto;
		}
		.sousuoBox{
			width: 538rpx;
			height: 60rpx;
			border: #B3D7FF solid 2rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			background: #ffffff80;
		}
		.souBOx{
			margin-left: 32rpx;
		}
		.img3{
			width: 36rpx;
			height: 36rpx;
		}
		.img4{
			width: 36rpx;
			height: 36rpx;
			margin-right: 16rpx;
		}
		.category-dropdown {
			// margin-left: 42rpx;
		}
		.text1{
			font-weight: 400;
			// width: 60rpx;
			// height: 31rpx;
			font-size: 30rpx;
			text-align: left;
			color: #1B1B1B;
			margin-right: 8rpx;
		}
		.img5{
			width: 26rpx;
			height: 26rpx;
		}
		.shuruText{
			font-weight: 400;
			font-size: 28rpx;
			text-align: left;
			color: #999999;
			margin-left: 18rpx;
		}
		.center-content{
			/* width: 750rpx; */
			/* height: 2592rpx; */
			border-radius: 64rpx 64rpx 0 0;
			background: #ffffff;
			margin-top: 40rpx;
		}
		.center-content-focus{
			padding: 50rpx 0;
		}
		.center-content-focus-text{
			font-weight: 400;
			width: 174rpx;
			// height: 35rpx;
			font-size: 34rpx;
			text-align: left;
			color: #000000;
			display: block;
			/* padding-top: 52rpx; */
			margin-left: 32rpx;
			margin-bottom: 30rpx;
		}
		.center-content-focus-list {
			margin-left: 32rpx;
			margin-bottom: 0;
			padding-bottom: 0px !important;
		}
		.u-scroll-list.data-v-e2a26316 {
		    padding-bottom: 0px !important;
		}
		.center-content-focus-item{
			/* flex-direction: column; */
			    display: flex;
			    flex-direction: column;
			    align-items: center; /* 水平居中对齐 */
			    text-align: center; /* 文字水平居中对齐 */
			width: 160rpx;
			/* height: 160rpx; */
			margin-right: 44rpx;
		}
		.center-content-focus-item-avatat{
			width: 120rpx !important;
			height: 120rpx !important;
			background: #999999 !important;
			margin-bottom: 16rpx !important;
		}
		.center-content-focus-item-text{
			font-weight: 400;
			width: 162rpx;
			// height: 28rpx;
			// line-height: 28rpx;
			font-size: 26rpx;
			text-align: center;
			color: #999999;
			margin-top: 16rpx;
		}
		.center-content-focus-line{
			height: 16rpx;
			background: #e5e5e5;
		}
		
		.data-v-6fcabaad {
				border-radius: 20rpx 20rpx 20rpx 20rpx !important;
		/* 		width: 200rpx !important;
				height: 200rpx !important; */
			}

	.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;
		}
		
		.image-container {
		  display: inline-block;
		  position: relative; /* 设置父元素为相对定位 */
		  width: 46rpx;
		  height: 46rpx;
		}

		/* 其他样式... */

		.postTypeContainer {
		  display: flex;
		  flex-direction: column;
		  align-items: center; /* 垂直居中 */
		  justify-content: space-around; /* 平均分布子元素 */
		  width: 202rpx;
		  height: 122rpx;
		  border-radius: 16rpx;
		  background: #ffffff;
		  box-shadow: 0 0 0 2rpx #B4D6FF;
		  position: absolute; /* 设置子元素为绝对定位 */
		  top: 100%; /* 将子元素定位到父元素底部 */
		  left: 50%; /* 将子元素水平居中 */
		  transform: translateX(-50%); /* 通过平移来水平居中 */
		  top: calc(100% + 20rpx); /* 将子元素定位到父元素底部，并增加 20rpx 的距离 */
		}


		.postTypeWindow {
		  /* 这里不需要设置 display: flex; */
		  /* 这里也不需要设置 flex-direction: column; */
		  /* 这里也不需要设置 align-items: center; */
		  font-weight: 400;
		  width: 100rpx;
		  height: 26rpx;
		  font-size: 24rpx;
		  line-height: 26rpx;
		  text-align: left;
		  color: #CAF6F5;
		}

</style>