P003-WX-HomeTeacher/education_uni/subpkg/my/invitation/my_invitation_send.vue

<template>
	<view >
		<!-- 顶部对方已读和未读按钮 style="padding: 0rpx 20rpx;margin-top: 5rpx;" -->
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" 
		  styleType="text" activeColor="#35b882"></uni-segmented-control>
		<!-- 发出的邀请列表 -->
		<view v-show="current === 0">
			<view v-for="(Info,index) in InviteInfoRead" :key="index">
				<view class="invitationWrapper" @click="invitationDetail(Info)">
					<uni-row class="invitationTitle">
						<uni-col :span="20">
							<text>邀请号</text>
							<text class="invitatinDetail">{{Info.id}}</text>
						</uni-col>
						<uni-col :span="4">
							<!-- <text>对方</text> -->
							<text class="invitatinDetail">{{Info.toUname}}</text>
						</uni-col>
					</uni-row>

					<uni-row class="invitationTitle">
						<text>邀请内容</text>
						<text class="invitatinDetail">{{Info.requireDetail}}</text>
					</uni-row>
					<uni-row class="invitationTitle">
						<uni-col :span="20">
							<text>邀请日期</text>
							<text class="invitatinDetail">{{Info.datetime}}</text>
						</uni-col>
						<uni-col :span="4">
							<text class="invitatinStatus">{{Info.operateStatus}}</text>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<view v-show="current === 1">
			<view v-for="(Info,index) in InviteInfoUnRead" :key="index">
				<view class="invitationWrapper" @click="invitationDetail(Info)">
					<uni-row class="invitationTitle">
						<uni-col :span="20">
							<text>邀请号</text>
							<text class="invitatinDetail">{{Info.id}}</text>
						</uni-col>
						<uni-col :span="4">
							<!-- <text>对方</text> -->
							<text class="invitatinDetail">{{Info.toUname}}</text>
						</uni-col>
					</uni-row>
					<uni-row class="invitationTitle">
						<text>邀请内容</text>
						<text class="invitatinDetail">{{Info.requireDetail}}</text>
					</uni-row>
					<uni-row class="invitationTitle">
						<text>邀请日期</text>
						<text class="invitatinDetail">{{Info.datetime}}</text>
					</uni-row>
				</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')
				const tempList = result.data.list
			//	console.log(tempList)
                for(var i = 0;i < tempList.length; i++){
					if (tempList[i].identity == '学员'){
						tempList[i].toUname = tempList[i].toUname.slice(0,1) + "教员"
					}else{
						tempList[i].toUname = tempList[i].toUname.slice(0,1) + "学员"
					}
				}
				this.InviteInfoRead = tempList
				//console.log(this.InviteInfoRead)
			},
			async readNo() {
				const {
					data: result
				} = await uni.$http.get('/education/invite-info/getSendedInvitationUnread')
				const tempList = result.data.list
				//console.log(tempList)
                for(var i = 0;i < tempList.length; i++){
					if (tempList[i].identity == '学员'){
						tempList[i].toUname = tempList[i].toUname.slice(0,1) + "教员"
					}else{
						tempList[i].toUname = tempList[i].toUname.slice(0,1) + "学员"
					}
				}
				this.InviteInfoUnRead = tempList
				//console.log(this.InviteInfoUnRead)
			},
			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{
		height: 100%;
	}
</style>

<style lang="scss" scoped>


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

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


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

</style>