状态页面布局

pages/learn/index.scss

@@ -118,6 +118,9 @@
 		border-radius: 24rpx;
 		padding: 29rpx 29rpx 20rpx 24rpx;
 		margin-bottom: 20rpx;
+		.titlews {
+			padding-bottom: 24rpx;
+		}
 		.cou_titles {
 			margin-bottom: 12rpx;
 			color: #333333;
@@ -145,9 +148,14 @@
 			justify-content: space-between;
 			padding-top: 24rpx;
 		}
-
+		// 状态
+		.all_status {
+			width: 654rpx;
+			background: #F8F8F8;
+			border-radius: 16rpx;
+		}
 		.class-warm {
-			padding: 10rpx 20rpx;
+			padding: 20rpx 24rpx;
 			display: flex;
 			align-items: flex-start;
 
@@ -158,16 +166,11 @@
 			&__text {
 
 				.date {
-					font-size: 24rpx;
-					font-weight: bold;
-					color: #FF3B30;
-				}
-
-				.state {
-					margin-top: 15rpx;
-					font-size: 24rpx;
-					font-weight: bold;
 					color: #FF3B30;
+					font-size: 22rpx;
+					font-weight: 400;
+					color: #969696;
+					margin-bottom: 8rpx;
 				}
 			}
 		}
@@ -187,14 +190,14 @@
 			align-items: center;
 			justify-content: flex-end;
 			.exam_btns {
-				width: 64%;
+				// width: 64%;
 				display: flex;
 				justify-content: flex-end;
 				align-items: center;
 			}
 		}
 		.box_appoint {
-			width: 35%;
+			// width: 35%;
 			display: flex;
 			align-items: center;
 			justify-content: flex-end;
@@ -204,8 +207,23 @@
 				margin-right: 10rpx;
 			}
 			.exam_word {
-				font-size: 22rpx;
+				font-size: 24rpx;
+				font-weight: 500;
+				width: 144rpx;
+				height: 56rpx;
+				line-height: 56rpx;
+				text-align: center;
+				background: #FFFFFF;
+				border-radius: 66rpx;
+				margin-left: 32rpx;
+			}
+			.ones {
 				color: #484848;
+				border: 2rpx solid #B9B9B9;
+			}
+			.intos {
+				color: #498AFE;
+				border: 2rpx solid #498AFE;
 			}
 		}
 	}

pages/learn/index.vue

@@ -70,7 +70,7 @@
 					<text class="titles">我的课程</text>
 
 					<view v-for="(item, index) in courseLists" :key="index" class="course_item">
-						<view  @click="studyIn(item.goodsId,item.gradeId,item,index)">
+						<view class="titlews" @click="studyIn(item.goodsId,item.gradeId,item,index)">
 							<view class="cou_titles">{{ item.goodsName }}</view>
 							<view v-if="item.serviceStartTime && item.serviceEndTime" class="learn_ranges">
 								<image class="l_range" src="/static/learn/learn_range.png"></image>
@@ -78,6 +78,145 @@
 								<text class="l_time">{{ item.serviceStartTime | formate('yyyy.mm.dd') }} - {{ item.serviceEndTime | formate('yyyy.mm.dd') }}</text>
 							</view>
 						</view>
+
+						<!-- 状态 -->
+						<view v-if="item.goodsType == 1" class="all_status">
+							<!-- 不在学习服务期 -->
+							<template v-if="item.serviceStartTime && (sysTime < item.serviceStartTime || sysTime > item.serviceEndTime)">
+								<view class="class-warm" v-if="item.gradeId != 0 && item.gradeStatus == 1">
+									<view class="class-warm__text">
+										<view class="date">
+											不在学习服务期，不可以学习了哦
+										</view>
+									</view>
+								</view>
+							</template>
+
+							<template v-else>
+								<!-- 班级有效期过了 -->
+								<template v-if="item.classEndTime && (item.classEndTime < sysTime) ">
+									<view class="class-warm">
+										<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill">
+										</u-icon>
+										<view class="class-warm__text">
+											<view class="date">班级有效期：{{$method.timestampToTime(item.classStartTime,true,true)}} - {{$method.timestampToTime(item.classEndTime,true,true)}}</view>
+											<view class="date">班级状态：已过期，有疑问请联系 <text @click="call()">020-87085982</text></view>
+										</view>
+									</view>
+								</template>
+
+								<!-- 班级有效期之前 -->
+								<template v-else-if="item.classStartTime && (item.classStartTime > sysTime) ">
+									<view class="class-warm">
+										<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill">
+										</u-icon>
+										<view class="class-warm__text">
+											<view class="date">班级有效期：{{$method.timestampToTime(item.classStartTime,true,true)}} -
+												{{$method.timestampToTime(item.classEndTime,true,true)}}</view>
+											<view class="date">班级状态：未到学习时间，有疑问请联系 <text @click="call()">020-87085982</text></view>
+										</view>
+									</view>
+								</template>
+
+								<!-- 在班级有效期之间或者没有班级有效期 -->
+								<template v-else>
+									<view class="class-warm"
+										v-if="item.gradeId != 0 && item.gradeStatus == 1 && item.classStatus != null">
+										<view class="class-warm__text">
+											<view class="date">
+												班级状态：
+												<text v-if="item.classStatus == 1">已开班</text>
+												<text v-if="item.classStatus == 0">未开班</text>
+											</view>
+											<view class="date" v-if="item.classStatus == 0">教务处正在为您开通班级，请耐心等待</view>
+											<view class="date"
+												v-if="item.classStatus == 1 && item.classStartTime && item.classEndTime">
+												班级有效期：{{$method.timestampToTime(item.classStartTime,true,true)}}-{{$method.timestampToTime(item.classEndTime,true,true)}}
+											</view>
+										</view>
+									</view>
+									<!-- 学时审核状态不可审核 -->
+									<template v-if="item.periodStatus == -1 || item.periodStatus == 2">
+										<view class="class-warm" v-if="item.classStatus == 1 || item.classStatus === null">
+											<view class="class-warm__text">
+												<view class="date">
+													<template
+														v-if="sysTime >= item.serviceStartTime && sysTime <= item.serviceEndTime">
+														学习状态：
+														<text v-if="item.stuAllNum+item.recordNum == 0">未学习</text>
+														<text
+															v-else-if="item.stuAllNum+item.recordNum > 0 && item.stuAllNum+item.recordNum < item.secAllNum+item.examNum">学习中</text>
+														<text v-else-if="item.stuAllNum+item.recordNum >= item.secAllNum+item.examNum">已学完</text>
+													</template>
+													<template v-else>
+														<template v-if="item.serviceStartTime">已过学习服务期，不可以学习了哦！</template>
+													</template>
+												</view>
+											</view>
+										</view>
+
+									</template>
+
+									<!-- 学时审核状态可以审核 -->
+									<template v-if="item.periodStatus != -1">
+										<view class="class-warm">
+											<view class="class-warm__text">
+												<view class="date">
+													<text v-if="item.periodStatus == 0">机构审核：学时审核不通过</text>
+													<!-- <text v-else-if="item.periodStatus == 2">学时待审核</text> -->
+													<text v-else-if="item.periodStatus == 3">学时审核中</text>
+													<text v-else-if="item.periodStatus == 1">
+														<text v-if="item.periodPlush > 0">学时已上报注册中心</text>
+														<text v-else>机构审核：学时审核通过</text>
+													</text>
+												</view>
+											</view>
+										</view>
+
+										<view class="class-warm" v-if="item.subscribeId != null && item.periodStatus == 1">
+											<view class="class-warm__text">
+												<view class="date">
+													<view v-if="item.subExamStatus === null">待预约考试</view>
+													<view
+														v-else-if="item.subExamStatus === 0 &&  sysTime < $method.TimeTotimestamp(
+															$method.timestampToTime(item.subApplySiteExamTime, true) +
+																' ' +
+																item.subApplySiteStartTime
+														)">
+														待考试，考试时间：
+														{{
+															$method.timestampToTime(item.subApplySiteExamTime, true) +
+															" " +
+															item.subApplySiteStartTime
+														}}
+														-
+														{{
+															$method.timestampToTime(item.subApplySiteExamTime, true) +
+															" " +
+															item.subApplySiteEndTime
+														}}
+													</view>
+													<view v-else-if="item.subExamStatus === 0">待出考试结果</view>
+													<view v-else-if="item.subExamStatus === 1">
+														<text v-if="item.subResult === null">待出考试结果</text>
+														<text v-if="item.subResult === 0">考试结果：不通过，需补考</text>
+														<text
+															v-else-if="item.subResult === 1">考试结果：通过，考试成绩为{{item.subPerformance}}</text>
+													</view>
+													<view v-else-if="item.subExamStatus === 2">缺考，无成绩，需补考</view>
+													<view v-else-if="item.subExamStatus === 3">作弊，无成绩，需补考</view>
+													<view v-else-if="item.subExamStatus === 4">替考，无成绩，需补考</view>
+
+												</view>
+											</view>
+										</view>
+									</template>
+
+								</template>
+
+							</template>
+						</view>
+
 						<view class="c_downs"  @click="studyIn(item.goodsId,item.gradeId,item,index)">
 							<view class="lefts">
 								<image class="lefet_img" :src="$method.splitImgHost(item.coverUrl, true)" mode=""></image>
@@ -110,6 +249,8 @@
 								</view>
 							</view>
 						</view>
+						
+						<!-- 按钮 -->
 						<view class="study_btns">
 							<template
 								v-if="item.gradeStatus == 1 && item.status == 1 && (item.serviceEndTime > sysTime) && (item.serviceStartTime < sysTime) &&  (item.classEndTime && (item.classEndTime < sysTime)) && (item.periodStatus == 0 || item.periodStatus == -1) && item.studyCount > 0">
@@ -119,183 +260,22 @@
 									 || (item.classStartTime && sysTime <= item.classStartTime) || (item.classEndTime && sysTime >= item.classEndTime) || 
 									 item.learningStatus == 2 || item.classStatus == 0 || (item.learningStatus == 3 && sysTime < item.learningTimeStart))"
 									 @click="appointment(item,appoint)">
-									<image class="img" src="/static/learn/icon_apoint.png"></image>
-									<text class="exam_word">预约考试</text>
+									<view class="exam_word ones">预约考试</view>
 								</view>
 								<view class="box_appoint" v-if="item.beforeStatus === 1 && !( sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime
 									 || (item.classStartTime && sysTime <= item.classStartTime) || (item.classEndTime && sysTime >= item.classEndTime) || 
 									 item.learningStatus == 2 || item.classStatus == 0 || (item.learningStatus == 3 && sysTime < item.learningTimeStart))"
 									 @click="appBeforeAddress(item.goodsId,item)">
-									<image class="img" src="/static/learn/icon_study.png"></image>
-									<text class="exam_word">进入刷题</text>
+									<view class="exam_word ones">进入刷题</view>
 								</view>
 								
 							</view>
 							<view class="box_appoint" @click="studyIn(item.goodsId,item.gradeId,item,index)">
-								<image class="img" src="/static/learn/icon_learn.png"></image>
-								<text class="exam_word">进入学习</text>
+								<view class="exam_word  intos">进入学习</view>
 							</view> 
 						</view>
 
-						<!-- 不在学习服务期 -->
-						<template v-if="item.serviceStartTime && (sysTime < item.serviceStartTime || sysTime > item.serviceEndTime)">
-							<view class="class-warm" v-if="item.gradeId != 0 && item.gradeStatus == 1">
-								<view class="class-warm__text">
-									<view class="date">
-										不在学习服务期，不可以学习了哦
-									</view>
-								</view>
-							</view>
-						</template>
-
-						<template v-else>
-							<!-- 班级有效期过了 -->
-							<template v-if="item.classEndTime && (item.classEndTime < sysTime) ">
-								<view class="class-warm">
-									<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill">
-									</u-icon>
-									<view class="class-warm__text">
-										<view class="date">班级有效期：{{$method.timestampToTime(item.classStartTime,true,true)}} - {{$method.timestampToTime(item.classEndTime,true,true)}}</view>
-										<view class="state">班级状态：已过期，有疑问请联系 <text @click="call()">020-87085982</text></view>
-									</view>
-								</view>
-							</template>
-
-							<!-- 班级有效期之前 -->
-							<template v-else-if="item.classStartTime && (item.classStartTime > sysTime) ">
-								<view class="class-warm">
-									<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill">
-									</u-icon>
-									<view class="class-warm__text">
-										<view class="date">班级有效期：{{$method.timestampToTime(item.classStartTime,true,true)}} -
-											{{$method.timestampToTime(item.classEndTime,true,true)}}</view>
-										<view class="state">班级状态：未到学习时间，有疑问请联系 <text @click="call()">020-87085982</text></view>
-									</view>
-								</view>
-							</template>
-
-							<!-- 在班级有效期之间或者没有班级有效期 -->
-							<template v-else>
-								<view class="class-warm"
-									v-if="item.gradeId != 0 && item.gradeStatus == 1 && item.classStatus != null">
-									<view class="class-warm__text">
-										<view class="date">
-											班级状态：
-											<text v-if="item.classStatus == 1">已开班</text>
-											<text v-if="item.classStatus == 0">未开班</text>
-										</view>
-										<view class="state" v-if="item.classStatus == 0">教务处正在为您开通班级，请耐心等待</view>
-										<view class="state"
-											v-if="item.classStatus == 1 && item.classStartTime && item.classEndTime">
-											班级有效期：{{$method.timestampToTime(item.classStartTime,true,true)}}-{{$method.timestampToTime(item.classEndTime,true,true)}}
-										</view>
-									</view>
-								</view>
-								<!-- 学时审核状态不可审核 -->
-								<template v-if="item.periodStatus == -1 || item.periodStatus == 2">
-									<view class="class-warm" v-if="item.classStatus == 1 || item.classStatus === null">
-										<view class="class-warm__text">
-											<view class="date">
-												<template
-													v-if="sysTime >= item.serviceStartTime && sysTime <= item.serviceEndTime">
-													学习状态：
-													<text v-if="item.stuAllNum+item.recordNum == 0">未学习</text>
-													<text
-														v-else-if="item.stuAllNum+item.recordNum > 0 && item.stuAllNum+item.recordNum < item.secAllNum+item.examNum">学习中</text>
-													<text v-else-if="item.stuAllNum+item.recordNum >= item.secAllNum+item.examNum">已学完</text>
-												</template>
-												<template v-else>
-													<template v-if="item.serviceStartTime">已过学习服务期，不可以学习了哦！</template>
-												</template>
-											</view>
-										</view>
-									</view>
-
-								</template>
-
-								<!-- 学时审核状态可以审核 -->
-								<template v-if="item.periodStatus != -1">
-									<view class="class-warm">
-										<view class="class-warm__text">
-											<view class="date">
-												<text v-if="item.periodStatus == 0">机构审核：学时审核不通过</text>
-												<!-- <text v-else-if="item.periodStatus == 2">学时待审核</text> -->
-												<text v-else-if="item.periodStatus == 3">学时审核中</text>
-												<text v-else-if="item.periodStatus == 1">
-													<text v-if="item.periodPlush > 0">学时已上报注册中心</text>
-													<text v-else>机构审核：学时审核通过</text>
-												</text>
-											</view>
-										</view>
-									</view>
-
-									<view class="class-warm" v-if="item.subscribeId != null && item.periodStatus == 1">
-										<view class="class-warm__text">
-											<view class="date">
-												<view v-if="item.subExamStatus === null">待预约考试</view>
-												<view
-													v-else-if="item.subExamStatus === 0 &&  sysTime < $method.TimeTotimestamp(
-														$method.timestampToTime(item.subApplySiteExamTime, true) +
-															' ' +
-															item.subApplySiteStartTime
-													)">
-													待考试，考试时间：
-													{{
-														$method.timestampToTime(item.subApplySiteExamTime, true) +
-														" " +
-														item.subApplySiteStartTime
-													}}
-													-
-													{{
-														$method.timestampToTime(item.subApplySiteExamTime, true) +
-														" " +
-														item.subApplySiteEndTime
-													}}
-												</view>
-												<view v-else-if="item.subExamStatus === 0">待出考试结果</view>
-												<view v-else-if="item.subExamStatus === 1">
-													<text v-if="item.subResult === null">待出考试结果</text>
-													<text v-if="item.subResult === 0">考试结果：不通过，需补考</text>
-													<text
-														v-else-if="item.subResult === 1">考试结果：通过，考试成绩为{{item.subPerformance}}</text>
-												</view>
-												<view v-else-if="item.subExamStatus === 2">缺考，无成绩，需补考</view>
-												<view v-else-if="item.subExamStatus === 3">作弊，无成绩，需补考</view>
-												<view v-else-if="item.subExamStatus === 4">替考，无成绩，需补考</view>
-
-											</view>
-										</view>
-									</view>
-								</template>
-
-							</template>
-
-						</template>
-						<!-- 预约考试 进入刷题-->
-						<!-- <template
-							v-if="item.gradeStatus == 1 && item.status == 1 && (item.serviceEndTime > sysTime) && (item.serviceStartTime < sysTime) &&  (item.classEndTime && (item.classEndTime < sysTime)) && (item.periodStatus == 0 || item.periodStatus == -1) && item.studyCount > 0">
-						</template>
-						<template v-else>
-							<template v-for="(appoint,appointIndex) in item.examApplyGoodsList">
-								<view class="box_progress" :key="appointIndex" v-if="item.applyStatus === 1 && !( sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime || (item.classStartTime && sysTime <= item.classStartTime) || (item.classEndTime && sysTime >= item.classEndTime) || item.learningStatus == 2 || item.classStatus == 0 || (item.learningStatus == 3 && sysTime < item.learningTimeStart))">
-									<view style="flex:1;margin-right:10rpx;">
-										<text style="color: #333333;">{{ appoint.applyName }}</text>
-									</view>
-									<view>
-										<u-button :plain="true" type="primary" size="mini" @click.stop="appointment(item,appoint)">预约考试
-										</u-button>
-									</view>
-								</view>
-							</template>
-							<view class="box_progress" v-if="item.beforeStatus === 1 && !( sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime || (item.classStartTime && sysTime <= item.classStartTime) || (item.classEndTime && sysTime >= item.classEndTime) || item.learningStatus == 2 || item.classStatus == 0 || (item.learningStatus == 3 && sysTime < item.learningTimeStart))">
-								<view style="flex:1;margin-right:10rpx;">
-									<text style="color: #2979ff;">{{ item.beforeName }}</text>
-								</view>
-								<view>
-									<u-button type="primary" size="mini" @click="appBeforeAddress(item.goodsId,item)">进入刷题</u-button>
-								</view>
-							</view>
-						</template> -->
+						
 						
 					</view>
 				</view>
@@ -356,7 +336,7 @@
 												学习进度：{{item.doNum}}/{{item.totalNum}}
 											</view>
 											<view class="progress_bar" style="width: 100%;">
-												<u-line-progress :show-percent="false" height="22" active-color="#007AFF" :percent="(item.doNum/item.totalNum)*100"></u-line-progress>
+												<u-line-progress :show-percent="false" height="22" active-color="#ff9900" :percent="(item.doNum/item.totalNum)*100"></u-line-progress>
 											</view>
 										</view>
 										<view class="progress_down">