talk_appAmin/pages/index.vue

<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
			<template class="img1BOX" #left>
				<image @click="GotoUNISignid()" 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>
				<image @click="togoFriend()" src="../static/images/icon/tong-1.png" class="img1" ></image>
			</template>
			<template class="img2Box" #center>
				<view class="qiehuanBox">
					<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4" :scrollable="false"
						:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
						:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}" :list="list1"
						:current="viewIndex" @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="getAvatar(item.avatar)"></u-avatar>
									<text class="center-content-focus-item-text">{{item.nickName}}</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"
					@updateFocusFather="updateFocusFather"></PostView>
				<u-line></u-line>
			</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">
						<view class="box-c" :class="{ 'box-d': lefther === index }" @click="handerShowHand">
							<view class="offtext" :class="{ boxtext: lefther === index }" @click.stop="handerLi(index)">
								<text>{{ item }}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		onUnmounted,
		onBeforeUnmount,
		getCurrentInstance
	} from 'vue';
	import {
		onReachBottom,
		onLoad,
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app";
	import PostView from "@/pages/common/postview/index.vue";
	import {
		listPost,
		listPostFollow,
		getPost,
		delPost,
		addPost,
		updatePost,
		getLoginUserinfo
	} from "@/api/talk/post";
	import {
		listFollowUser,
		getFollowUser,
		delFollowUser,
		addFollowUser,
		updateFollowUser
	} from "@/api/followUser/followUser";
	import {
		useStore
	} from 'vuex';
	const store = useStore();
	const {
		proxy
	} = getCurrentInstance();

	const loginUser = reactive(uni.getStorageSync('loginUserPost'));
	const QNDomain = store.state.user.QNDomain;
	const postList = ref([]);

	const loading = ref(true);
	const total = ref(0);

	const data = reactive({
		form: {},
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			uid: null,
			topicId: null,
			discussId: null,
			voteId: null,
			title: null,
			content: null,
			media: null,
			tab: null,
			readCount: null,
			transmitCount: null,
			likeCount: null,
			commentCount: null,
			favoriteCount: null,
			postTop: null,
			type: null,
			anonymity: null,
			postPrivate: null,
			address: null,
			longitude: null,
			latitude: null,
			auditor: null,
			status: 0,
			auditTime: null,
			auditAdvice: null,
			cut: null,
			sortField: null,
			sortDirection: null,
		},
		rules: {
			status: [{
				required: true,
				message: "状态不能为空",
				trigger: "change"
			}],
			cut: [{
				required: true,
				message: "分类不能为空",
				trigger: "change"
			}],
		}
	});

	const {
		queryParams,
		form,
		rules
	} = toRefs(data);

	const followTotal = ref(0);
	const queryFollowParams = reactive({
		pageNum: 1,
		pageSize: 10,
		uid: null,
		topicId: null,
		discussId: null,
		voteId: null,
		title: null,
		content: null,
		media: null,
		tab: null,
		readCount: null,
		transmitCount: null,
		likeCount: null,
		commentCount: null,
		favoriteCount: null,
		postTop: null,
		type: null,
		anonymity: null,
		postPrivate: null,
		address: null,
		longitude: null,
		latitude: null,
		auditor: null,
		status: 0,
		auditTime: null,
		auditAdvice: null,
		cut: null,
		sortField: null,
		sortDirection: null,
	})

	/** 查询话题投稿new列表 */
	function getList() {
		if (searchPrerequisite.value == '热门') {
			queryParams.value.sortField = 'like_count';
		} else if (searchPrerequisite.value == '最新') {
			queryParams.value.sortField = 'create_time';
		}
		listPost(queryParams.value).then(response => {
			console.log('看一下查了啥啊', response.rows)
			if (queryParams.value.pageNum > 1) {
				postList.value.push(...response.rows);
				uni.setStorageSync('postList', postList.value)
			} else {
				uni.setStorageSync('postList', response.rows)
			}
			postList.value = uni.getStorageSync('postList');
			// postList.value = response.rows;
			total.value = response.total;
		});
	}

	function getFollowList() {
		if (searchPrerequisite.value == '热门') {
			queryFollowParams.sortField = 'like_count';
		} else if (searchPrerequisite.value == '最新') {
			queryFollowParams.sortField = 'create_time';
		}
		listPostFollow(queryFollowParams).then(response => {
			console.log('看一下查了啥啊关注', response)
			if (queryFollowParams.pageNum > 1) {
				postList.value.push(...response.rows);
			} else {
				postList.value = response.rows;
			}

			followTotal.value = response.total;
		});
	}

	function getAvatar(avatar) {
		return QNDomain + avatar;
	}
	const toimage = (url) => {
		if (typeof url === 'string') {
			let info = url.split(",");
			let processedInfo = info.map(item => QNDomain + item);
			console.log("processedInfo", processedInfo);
			return processedInfo;
		}
		return null;
	};

	const bgColor = ref('rgba(170, 0, 0, 0)');
	onLoad(() => {
		uni.$on('refreshData', () => {
			reactiveList();
		})
		getLoginUserinfo().then(res => {
			uni.setStorageSync('loginUserPost', res.data)
		})
		onPageScroll((e) => {
			// console.log("滚动距离为：" + e.scrollTop);
			if (e.scrollTop >= 70) {
				bgColor.value = 'rgba(255, 255, 255, 1)'
			} else {
				bgColor.value = 'rgba(170, 0, 0, 0)'
			}
		});
		onReachBottom(() => {
			console.log('触底了')
			if (viewIndex.value == 1) {
				if (total.value > postList.value.length) {
					queryParams.value.pageNum += 1;
					getList();
				}
			}
			if (viewIndex.value == 0) {
				if (followTotal.value > postList.value.length) {
					queryFollowParams.pageNum += 1;
					getFollowList();
				}
			}
		})
		InspectionData()
	})
	//检查资料完整性
	const InspectionData = () => {

		let birthday = proxy.$store.state.userInfo.birthday
		let area = proxy.$store.state.userInfo.area
		let remark = proxy.$store.state.userInfo.remark
		console.log(birthday, "   ", area, "   ", remark);
		if (birthday == '' | area == '' | remark == '') {
			console.log(birthday, "   ", area);
			proxy.$modal.showToast("请去完善个人信息")
			proxy.$tab.navigateTo('/pages/mine/updateInfo/newUserupInfo')
		}

	}

	onShow(() => {
		if (viewIndex.value == 1) {
			postList.value = uni.getStorageSync('postList');
		}
		if (viewIndex.value == 0) {
			selectFollowView();
		}
	})

	const viewIndex = ref(1);
	const searchOpen = ref(false);
	const lefther = ref(0);
	const searchPrerequisite = ref('热门');
	const postTypeOpen = ref(false);

	// const postTypeList = ['发布话题', '发布活动'];
	const postTypeList = [{
		lable: '发布话题',
		id: 1
	}, {
		lable: '发布活动',
		id: 2
	}];
	const searchPrerequisiteList = [
		'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8'
	];

	const list1 = reactive([{
			name: '关注'
		},
		{
			name: '推荐'
		}
	]);

	const focusList = ref([]);

	const publishTalk = (item) => {
		if (item.id === 1) {
			uni.setStorageSync('postInfoPublish', null)
			proxy.$tab.navigateTo('/pages/post/postPublish/postPublish')
		}
		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 togoFriend =()=>{
		proxy.$tab.navigateTo('/pages/Friend/messageswitching');
	}

	const rightClick = () => {
		console.log('rightClick');
	};

	const leftClick = () => {
		console.log('leftClick');
	};

	const click = (item) => {
		if (item.index == 1 && viewIndex.value == 0) {
			queryParams.value.pageNum = 1;
			getList();
		}
		viewIndex.value = item.index;
		if (item.index == 0) {
			selectFollowView();
		}
		if (item.index == 1) {
			postList.value = uni.getStorageSync('postList');
		}
	};

	const selectFollowView = () => {
		const FollowUser = {
			userId: loginUser.userId
		};
		listFollowUser(FollowUser).then(res => {
			console.log(res.rows);
			queryFollowParams.pageNum = 1;
			postList.value = [];
			if (res.rows.length == 0) {
				const noFollew = {
					avatar: 'noFollew',
					nickName: '暂无关注'
				};
				res.rows.push(noFollew);
				focusList.value = res.rows;
				return;
			};
			focusList.value = res.rows;
			getFollowList();
		})
	}

	const handerLi = (res) => {
		lefther.value = res;
		searchPrerequisite.value = searchPrerequisiteList[res];
		if (viewIndex.value == 1) {
			queryParams.value.pageNum = 1;
			postList.value = [];
			getList();
		} else if (viewIndex.value == 0) {
			getFollowList();
		}
		setTimeout(() => {
			searchOpen.value = !searchOpen.value;
		}, 350);
	};

	const handerShowHand = () => {
		searchOpen.value = !searchOpen.value;
	};

	function GotoUNISignid() {
		proxy.$tab.navigateTo("/pages/signln/signid");
	}

	// 关注操作  updateFocusFather
	const updateFocusFather = (val) => {
		// postList.value.forEach(post => {
		//     if (post.uid === val.followId) {
		//       post.focus = val.focus;
		//     }
		//   });
		// console.log("子传父")
		postList.value = uni.getStorageSync('postList');
		// console.log('关注' + uni.getStorageSync('postList'))
	}

	const reactiveList = () => {
		queryParams.value.pageNum = 1;
		getList();
	}

	getList();
</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; */
	}

	.data-v-6fcabaad {
		border-radius: 20rpx 20rpx 20rpx 20rpx !important;
	}

	.box-a {
		margin-top: 42rpx;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
	}

	.box-b {
		width: calc(33.33% - 26rpx);
		/* 每行三个元素，减去外边距的总宽度 */
		margin-bottom: 24rpx;
		// margin-left: 12rpx;
		margin-right: 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;
	}

	.image-container {
		// display: inline-block;
		position: relative;
		/* 设置父元素为相对定位 */
		width: 46rpx;
		height: 46rpx;
		margin-right: 28rpx;
	}

	/* 其他样式... */

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