education/education_uni/subpkg/my_invite/my_invite.vue

<template>
	<view>
		<!-- 顶部对方已读和未读按钮 -->
			<view class="read">
				<text class="readDetail" @click="readYes">对方已读</text>
				<text class="readDetail" @click="readNo">对方未读</text>
			</view>
			<!-- 发出的邀请列表 -->
			<view v-if="showReadYes">
				<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.requireId}}</text>
							</view>
							<view class="other">
								<text>对方</text>
								<text class="invitatinDetail">{{Info.fromUname}}</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.readStatus}}</text>
							</view>
						</view>	
					</view>
					
				</view>    
			</view>
			<view v-if="showReadNo">
					<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.requireId}}</text>
						</view>
						<view class="other">
							<text>对方</text>
							<text class="invitatinDetail">{{Info.fromUname}}</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 {
				
				showReadYes: true,
				showReadNo: false,
				InviteInfoRead: [],
				InviteInfoUnRead: []
				
			};
		},
		created() {
			this.readYes()
		},
		methods:{
			async readYes(){
				const { data: result } = await uni.$http.get('/ucenter/invite-info/getSendedInvitationRead')
				console.log(result)
				this.InviteInfoRead = result.data.list
				this.showReadYes = true
				this.showReadNo = false
				// console.log(this.InviteInfo)
				// this.InviteInfo.fromUname = result.data.list
				// this.InviteInfo.requireDetail = result.data.list
				// this.InviteInfo.datetime = result.data.list
				// this.InviteInfo.operateStatus = result.data.list
			},
			async readNo(){
				const { data: result } = await uni.$http.get('/ucenter/invite-info/getSendedInvitationUnread')
				this.InviteInfoUnRead = result.data.list
				this.showReadNo = true
				this.showReadYes = false
				
			},
			async invitationDetail(Info){
				console.log(JSON.stringify(Info))
				uni.navigateTo({
					url: '/subpkg/my_invite_detail/my_invite_detail?Info='+ encodeURIComponent(JSON.stringify(Info))
				})
				
			}
			
		}
	}
</script>


<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;
}

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