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

<template>
	<view>
		<view class="wrapper" >
		    <!-- 上方邀请号和照片 -->
		    <view class="above">
		        <view>
		            <view class="aboveTitle">
		                <text>邀请号：</text>
		                <text>{{Info.id}}</text>
		            </view>
		            <view class="aboveTitle">
		                <text>对方：</text>
		                <text>{{Info.toUname}}</text>
		            </view>
		        </view>
		        <!-- 头像 -->
		        <image v-if="Info.sex === null" class="headerPortrait" mode="widthFix" :src="Info.imgUrl"></image>
				<image v-else-if="Info.sex === '男' " class="headerPortrait" mode="widthFix" src="/static/boy.png"></image>
				<image v-else-if="Info.sex === '女' " class="headerPortrait" mode="widthFix" src="/static/girl.png"></image>
		    </view>
		    <!-- 中间详细信息 -->
		    <view>
		        <view class="midTitle">
		            <text>对方ID：</text>
		            <text>{{Info.toUid}}</text>
		        </view>
		        <view class="midTitle">
		            <text>需求号：</text>
		            <text class="toLink" @click="toNeedDetail">{{Info.requireId}}</text>
		        </view>
		        <view class="midTitle">
		            <text>课程号：</text>
		            <text class="toLink" @click="toCourseDetail">{{Info.courseId}}</text>
		        </view>
		        <view class="midTitle">
		            <text>需求金额：</text>
		            <text>{{Info.requireSalary}}</text>
		        </view>
		        <view class="midTitle">
		            <text>邀请内容：</text>
		            <text>{{Info.requireDetail}}</text>
		        </view>
		    </view>
		    <view class="bottomWrapper">
		        <view class="bottomTitle">
		            <text>邀请日期：</text>
		            <text>{{Info.datetime}}</text>
		        </view>
		        <view class="bottomTitle">
		            <text>对方阅读状态：</text>
		            <text class="operateState">{{Info.readStatus}}</text>
		        </view>
		        <view class="bottomTitle">
		            <text>对方操作状态：</text>
		            <text class="operateState">{{Info.operateStatus}}</text>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Info:[],
			};
		},
		onLoad(option) {
			if (option.id !== undefined) {
				const id = decodeURIComponent(option.id)
				this.getInvitationDetail(id)
			}
		},
		methods:{
			toNeedDetail() {
				uni.navigateTo({
					url: '/subpkg/student/require/student_require_all_detail?requireId=' + encodeURIComponent(this.Info.requireId)
				})
			},
			toCourseDetail() {
				uni.navigateTo({
					url: '/subpkg/teacher/course/teacher_course_all_detail?courseId=' + encodeURIComponent(this.Info.courseId)
				})
			},
			async getInvitationDetail(id) {
				const { data: result } = await uni.$http.get('/education/invite-info/getInvitationDetail', {inviteId: id})
				this.Info = result.data.one
			}
		}
	}
</script>

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

<style lang="scss" scoped>
/* 设置背景 */
.wrapper{
    width: 93%;
    padding: 20rpx;
    margin-left: 10rpx;
    border-radius: 20rpx;
    background-color: #FFF;
}

/* 上方邀请号和照片 */
.above{
    display: flex;
    width: 95%;
    justify-content: space-between;
}

/* 上方、中间左侧文字 */
.aboveTitle,
.midTitle,
.bottomTitle{
    padding-bottom: 20rpx;
}

/* 头像 */
.headerPortrait{
    width: 200rpx;
}

.bottomWrapper{
    margin-top: 160rpx;
}

/* 设置链接样式 */
.toLink{
    color: skyblue;
    text-decoration: underline;
}

/* 设置操作状态字体 */
.operateState{
    font-weight: bold;
    color: red;
}
</style>