family-education/education_uni/subpkg/my/invitation/my_invitation_receive_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.fromUname}}</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.fromUid}}</text>
		        </view>
		        <view class="midTitle">
		            <text>需求号：</text>
		            <text class="toLink" @click="toNeedDetail" style="color: rebeccapurple;">{{Info.requireId}}</text>
		            <text class="needState">{{needState}}</text>
		        </view>
		        <view class="midTitle">
		            <text>课程号：</text>
		            <text class="toLink" @click="toCourseDetail" style="color: red;">{{Info.courseId}}</text>
		            <text class="needState">{{courseState}}</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.operateStatus}}</text>
		        </view>
		    </view>
		    <view class="operation" v-if="Info.operateStatus!=='拒绝'&&Info.operateStatus!=='同意'">
		        <view class="operationRefuseBtn" @click="refuse">拒绝</view>
		        <view class="operationConfirmBtn" @click="agree">同意</view>
		    </view>
		</view>

	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				Info:[],
			};
		},
		onLoad(option) {
			if (option.id !== undefined) {
				const id = decodeURIComponent(option.id)
				this.getInvitationDetail(id)
				this.toRead(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
			},
			async toRead(id){
				const queryObj = {
					id
				}
				const { data: result } = await uni.$http.get('/education/invite-info/modifyStatusToHold',queryObj)
			},
			async refuse(){
				const queryObj = {
					id: this.Info.id
				}
				const { data: result } = await uni.$http.get('/education/invite-info/refuse',queryObj)
				if (result.code == 20000) {
					uni.$showMsg('拒绝邀请成功')
					this.Info.operateStatus = '拒绝'
					setTimeout(() => {
						uni.navigateTo({
							url: '/subpkg/my/invitation/my_invitation_receive'
						}, 3000)
					})
				}
			},
			async agree(){
				const queryObj = {
					id: this.Info.id
				}
				const { data: result } = await uni.$http.get('/education/invite-info/agree',queryObj)
				if (result.message == '该需求已锁,请30分钟后查看' || result.message == '该需求已下架' || result.message == '同意失败，请稍后在试' || result.message == '该课程已下架' || result.message == '该课程已锁,请30分钟后查看') {
					return uni.$showMsg(result.message)
				} 
				const identify = result.data.identify
				if ('教员' === identify) {
					uni.$showMsg('已通知对方完成支付')
					this.Info.operateStatus = '同意'
					setTimeout(() => {
						
						uni.navigateTo({
							url: '/subpkg/my/invitation/my_invitation_receive'
						}, 3000)
					})
				}
				if ('学员' === identify) {
					const infos = result.data.info
					uni.navigateTo({
						url: '/subpkg/my/order/my_order_detail?orderId=' + encodeURIComponent(infos.orderId)
					})
				}			
			}
		}
	}
</script>

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

<style lang="scss" scoped>
/* 设置背景 */
.wrapper{
    width: 100%;
    height: 100%;
    //background-color: #FFF2CC;
    padding: 20rpx;
}

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

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

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

/* 需求号和课程号状态 */
.needState{
    padding-left: 30rpx;
    color: red;
    font-weight: bold;
}

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

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

.bottomWrapper{
    margin-top: 140rpx;
}

/* 底部按钮 */
.operation{
    display: flex;
    justify-content: space-around;
    margin-top: 120rpx;
}

/* 按钮 */
.operationRefuseBtn,
.operationConfirmBtn{
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    // border: 1rpx solid #5B9BD5;
    border-radius: 30rpx;
    font-size: 40rpx;
    // background-color: #5B9BD5;
    color: white;
}
.operationConfirmBtn{
	background-color: #35b882;
}
.operationRefuseBtn{
	background-color: #3ed598;
}

</style>