talk_appAmin/pages/work/index.vue

<template>
	<!-- tabs标签 -->
	<view class="tabsinfo flex alignCenter justifyCenter">
		<up-tabs :list="list4" lineWidth="24" lineHeight="4" @click="tabsClick" lineColor="#6aa2ff" :activeStyle="{
      color: '#000000',
      fontSize: '30rpx',
      transform: 'scale(1.05)'
  }" :inactiveStyle="{
      color: '#999999',
      fontSize: '28rpx',
      transform: 'scale(1.05)'
  }" itemStyle="  width: 185rpx; padding-bottom:18rpx;">
		</up-tabs>
	</view>
	<view class="" v-for="(postItem, postIndex) in postList" :key="postIndex">
		<PostView :postValue="postItem"  :postViewType="0"
			></PostView>
		<u-line></u-line>
	</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,
	applist,
	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 list4 = ref([{
			name: '全部审核',
			state: 9
		},
		{
			name: '待审核',
			state: 2
		},
		{
			name: '已通过',
			state: 0
		},
		{
			name: '未通过',
			state: 4
		}
	]);
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: null,
		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() {
	uni.removeStorageSync('postList');
	applist(queryParams.value).then(response => {
		console.log('我是获取全部数据', response.rows)
		if (queryParams.value.pageNum > 1) {
			postList.value = 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;
	});
	console.log("这是get数据",postList.value);
	
}


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;
};
onLoad(() => {
	getList();
	uni.$on('refreshData', () => {
		reactiveList();
	})
	getLoginUserinfo().then(res => {
		uni.setStorageSync('loginUserPost', res.data)
	})
// 在data中添加isLoading标志
const isLoading = ref(false);
	onReachBottom( async ()  =>  {
		// console.log('触底了')

		// if (total.value > postList.value.length) {
		// 	queryParams.value.pageNum += 1;
		// 	getList();
		// }

		console.log("加载新数据：");
    // 检查是否还有更多数据可以加载
    if (queryParams.value.pageNum * queryParams.value.pageSize < total.value) {
        // 防止在数据加载时重复触发
        if (isLoading.value) return;
        isLoading.value = true;

        queryParams.value.pageNum += 1;
        try {
            const response = await applist(queryParams.value);
            // 使用Array.prototype.push.apply将新数据追加到actiInfoList中
            Array.prototype.push.apply(postList.value, response.rows);
			console.log("这是下拉apply新数据",postList.value);
        } catch (error) {
            console.error("加载更多数据时发生错误：", error);
        } finally {
            isLoading.value = false;
        }
    } else {
        // 可以在这里处理没有更多数据的情况，例如显示提示信息
        console.log("没有更多数据了");
    }
	})
})
onShow(() => {
	// getList();
	// postList.value = uni.getStorageSync('postList');
	console.log("我是onShow时期的 本地缓存：", postList.value);
})
const tabsClick = (e) => {
		console.log(e);
		queryParams.value.status = null;
		if(e.state == 9){

		}else{
			queryParams.value.status = e.state;
		}
		getList();
	}
function gotoworkinfo() {
	uni.navigateTo({
		url: '/pages/work/workinfo'
	})
}
</script>

<style lang="scss" scoped>

.tabsinfo {
	background-color: #fff;
	height: 80rpx;
	margin-bottom: 24rpx;
}

.shenghe_item {
	width: 750rpx;

	background: #ffffff;
	padding: 48rpx 32rpx 48rpx 32rpx;
}

.user_header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	height: 84rpx;

	.user_img {
		width: 84rpx;
		height: 84rpx;
		margin-right: 19rpx;

		image {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
		}
	}

	.user_msg {
		h4 {
			font-weight: 600;
			width: 186rpx;
			height: 31rpx;
			font-size: 30rpx;
			text-align: left;
			color: #000000 100%;
			margin-bottom: 18rpx;
		}

		p {
			height: 30rpx;
			font-size: 30rpx;
			color: #999999;
		}
	}

	.text_style {


		right: 0;
		font-weight: 400;
		width: 84rpx;
		height: 28rpx;
		font-size: 28rpx;
		text-align: left;
		color: #6AA2FF;
	}
}

.user_header>view {
	display: flex;

}

.shenghe_title {
	h4 {
		font-weight: 600;
		width: 100%;
		height: 80rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		margin-top: 31rpx;
	}
}

.shenghe_text {
	width: 100%;
	word-break: break-all;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-top: 26rpx;
}

.imgs_box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-top: 34rpx;

	image {
		width: 222rpx;
		height: 222rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 6rpx;
		margin-right: 6rpx;
	}
}

.text_span {
	margin-top: 28rpx;

	view {
		padding: 8rpx;
		background-color: #F7F8FA;
		display: inline-block;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-size: 24rpx;
		color: #3477FC;
		font-weight: 600;
		margin-bottom: 20rpx;
		margin-right: 24rpx;
	}
}
</style>