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

<template>
	<view style="padding: 0px 30px;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.toUname}} {{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.toUname}} {{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>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				current: 1,
				items: ['对方已读', '对方未读'],
				InviteInfoRead: [],
				InviteInfoUnRead: []
			};
		},
		created() {
			this.readNo()
		},
		methods: {
			async readYes() {
				const {
					data: result
				} = await uni.$http.get('/education/invite-info/getSendedInvitationRead')
				this.InviteInfoRead = result.data.list
			},
			async readNo() {
				const {
					data: result
				} = await uni.$http.get('/education/invite-info/getSendedInvitationUnread')
				this.InviteInfoUnRead = result.data.list
			},
			async invitationDetail(Info) {
				uni.navigateTo({
					url: '/subpkg/my/invitation/my_invitation_send_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{
		padding: 20rpx;
		height: 100%;
		// background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
	// page {
	// 	padding: 20rpx;
	// 	height: 100%;
	// 	background-color: #E2F0D9;
	// }

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

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

	/* 列表样式 */
	.invitationWrapper {
		width: 93%;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF2CC;
		margin-left: 10rpx;
	}

	/* 邀请号和对方身份、邀请日期和对方状态 */
	.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>