family-education/education_uni/subpkg/my/invitation/my_invitation_receive.vue

<template>
	<view style="padding: 0px 20px;margin-top: 5px;">
		<!-- 顶部对方已读和未读按钮 -->
		<uni-segmented-control  :current="current" :values="items" @clickItem="onClickItem" styleType="button"
			activeColor="#6EB312"></uni-segmented-control>
		<!-- 发出的邀请列表 -->
		<view v-show="current === 0">
			<view v-for="(Info,index) in InviteInfoRead" :key="index">
				<view class="invitationWrapper" @click="invitationDetail(Info)">
					<view class="invitationTitle">
						<view>
							<text>邀请号</text>
							<text class="invitatinDetail">{{Info.id}}</text>
						</view>
						<view class="other">
							<!-- <text>对方</text> -->
							<text class="invitatinDetail">{{Info.fromUname}} {{Info.identity}}</text>
						</view>
					</view>
					<view class="invitationContent">
						<text>邀请内容</text>
						<text class="invitatinDetail">{{Info.requireDetail}}</text>
					</view>
					<view class="invitationDateAndStatus">
						<view>
							<text>邀请日期</text>
							<text class="invitatinDetailOther">{{Info.datetime}}</text>
						</view>
						<view class="other">
							<text>我方状态</text>
							<text class="invitatinStatus">{{Info.operateStatus}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view v-show="current === 1">
			<view v-for="(Info,index) in InviteInfoUnRead" :key="index">
				<view class="invitationWrapper" @click="invitationDetail(Info)">
					<view class="invitationTitle">
						<view>
							<text>邀请号</text>
							<text class="invitatinDetail">{{Info.id}}</text>
						</view>
						<view class="other">
							<!-- <text>对方</text> -->
							<text class="invitatinDetail">{{Info.fromUname}} {{Info.identity}}</text>
						</view>
					</view>
					<view class="invitationContent">
						<text>邀请内容</text>
						<text class="invitatinDetail">{{Info.requireDetail}}</text>
					</view>
					<view class="invitationDateAndStatus">
						<text>邀请日期</text>
						<text class="invitatinDetailOther">{{Info.datetime}}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['已读', '未读'],
				InviteInfoRead: [],
				InviteInfoUnRead: []
			};
		},
		created() {
			this.readYes()
		},
		methods: {
			async readYes() {
				const {
					data: result
				} = await uni.$http.get('/education/invite-info/getReceivedInvitationRead')
				this.InviteInfoRead = result.data.list
			},
			async readNo() {
				const {
					data: result
				} = await uni.$http.get('/education/invite-info/getReceivedInvitationUnread')
				this.InviteInfoUnRead = result.data.list
			},
			async invitationDetail(Info) {
				uni.navigateTo({
					url: '/subpkg/my/invitation/my_invitation_receive_detail?id='+encodeURIComponent(Info.id)
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
				if (this.current === 1) {
					this.readNo()
				} 
				if (this.current === 0) {
					this.readYes()
				}
			}
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>

	/* 顶部对方已读和未读按钮 */
	.read {
		display: flex;
		justify-content: space-around;
	}

	.readDetail {
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background-color: #FFF2CC;
		font-weight: bold;
	}

	/* 列表样式 */
	.invitationWrapper {
		width: 94%;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF;
		font-size: 30rpx;
	}

	/* 邀请号和对方身份、邀请日期和对方状态 */
	.invitationTitle,
	.invitationDateAndStatus {
		display: flex;
		position: relative;
	}

	/* 对方身份 */
	.other {
		position: absolute;
		left: 60%;
	}

	/* 具体内容的样式 */
	.invitatinDetail,
	.invitatinStatus {
		margin-left: 20rpx;
		font-weight: bold;
	}

	.invitatinDetailOther {
		margin-left: 20rpx;
		font-weight: bold;
		font-size: 26rpx;
	}

	.invitatinStatus {
		color: red;
	}

	/* 邀请内容、邀请日期和对方状态 */
	.invitationContent {
		margin-top: 10rpx;
	}
</style>