pay-video-applet-uniapp-24-8-22/pages_mine/mine/releaseRecord.vue

<template>
	<view class="releaseRecord">
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="我的发布" />

		<!--主页面-->
		<view class="frame">
			<!--标题-->
			<view class="title">
				<span>我的发布</span>
			</view>
			<!--标签栏-->
			<view class="tabbar">
				<view class="" 
				@click="tabChange(index)"
				:key="index"
				v-for="(item, index) in tabs">
					<span :class="checkedIndex==index ? 
					'tabbarItemActive' : 
					'tabbarItemNoActive'">{{ item }}</span>
				</view>
				<!-- <view class="" @click="tabChange(2)">
					<span :class="checkedIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'">贴子</span>
				</view>
				<view class="" @click="tabChange(1)">
					<span :class="checkedIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'">名片</span>
				</view>
				<view class="" @click="tabChange(3)">
					<span :class="checkedIndex==3 ? 'tabbarItemActive' : 'tabbarItemNoActive'">作品</span>
				</view> -->
			</view>
			<!--发布列表-->
			<view style="" class="publishListClass">
				<ReleaseList :list="recordsList" ref="releaseList" />
			</view>
		</view>
	</view>
</template>

<script>
	import ReleaseList from "./sonPage/release/releaseList.vue";
	import {
		mapState
	} from 'vuex'

	export default {
		name: "releaseRecord",
		components: {
			ReleaseList
		},
		data() {
			return {
				recordsList: [],
				total: 0,
				checkedIndex: 0,
				queryParams: {
					pageNo: 1,
					pageSize: 10,
				},
				tabs : ['帖子', '名片', '作品'],
			};
		},
		onReachBottom() {
			console.log("===我的发布页面到底部了，开始加载数据===")
			let allTotal = this.queryParams.pageNo * this.queryParams.pageSize
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求数
				this.queryParams.pageSize += 10
				this.getData() //调用加载数据方法
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {
			// 检查是否登录
			// this.$refs.showLogin.checkLogin()
			// 获取用户个人信息
			this.$store.commit('getUserInfo')
			this.getData()
		},
		methods: {
			getData() {
				this.$api('infoGetMyReleasePage', {
					pageNo: this.queryParams.pageNo,
					pageSize: this.queryParams.pageSize,
					//   缺少type参数，需要补充
					type: this.checkedIndex
				}, res => {
					if (res.code == 200) {
						this.recordsList = res.result.records
						this.total = res.result.total
						console.log(res.result, "发布列表")
					}
				})
			},

			// 标签栏发生变化
			tabChange(type) {
				this.checkedIndex = type
				this.queryParams.pageNo = 1
				this.queryParams.pageSize = 10
				this.getData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.releaseRecord {
		width: 100vw;
		height: 100vh;

		.frame {
			width: 100%;
			//height: calc(100vh - 220rpx);
			padding: 28rpx 28rpx 0 28rpx;

			.title {
				font-size: 34rpx;
				color: #333;
				font-weight: 700
			}

			.tabbar {
				display: flex;
				justify-content: flex-start;
				gap: 20rpx;
				margin-top: 40rpx;

				.tabbarItemActive {
					padding: 10rpx 40rpx;
					background: $uni-linear-gradient-color;
					-webkit-background-clip: text;
					/*将设置的背景颜色限制在文字中*/
					-webkit-text-fill-color: transparent;
					/*给文字设置成透明*/
					border-radius: 20rpx;
				}

				.tabbarItemNoActive {
					padding: 10rpx 40rpx;
					background-color: #eaeaeb;
					color: #777777;
					border-radius: 20rpx;
				}
			}


			.publishListClass {
				//margin-top: 10rpx;
				//height: 78vh;
				//margin-top: 300rpx;
				overflow: auto;
				width: 100%;
			}
		}
	}
</style>