预约考试样式

components/course/courseSection.vue

@@ -360,8 +360,9 @@ export default {
 			});
 		},
 		async playVideo() {
+			console.log('直播的课程：',this.menuItem)
 			if(this.menuItem.sectionType==1||this.menuItem.sectionType==3){
-				//录播
+				//1录播 3回放
 				if(!this.isBuy){
 					//非购买
 					if(!this.menuItem.tryListen){

pages/learn/index.scss

@@ -183,10 +183,20 @@
 		.study_btns {
 			width: 100%;
 			margin-top: 40rpx;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			.exam_btns {
+				width: 64%;
+				display: flex;
+				justify-content: space-between;
+			}
 		}
 		.box_appoint {
+			width: 35%;
 			display: flex;
 			align-items: center;
+			justify-content: flex-end;
 			.img {
 				width: 32rpx;
 				height: 32rpx;
@@ -243,12 +253,7 @@
 		.progress_up {
 			font-size: 24rpx;
 			color: #999999;
-			width: 50%;
-			// .wk_icon {
-			// 	width: 24rpx;
-			// 	height: 24rpx;
-			// 	margin-right: 8rpx;
-			// }
+			width: 100%;
 			.progress_bar {
 				margin-top: 16rpx;
 			}
@@ -438,4 +443,74 @@
 			}
 		}
 	}
-}
+}
+
+// 预约考试弹窗
+.popuptest_box {
+    width: 100%;
+    height: 938rpx;
+    padding: 56rpx 56rpx 0rpx;
+    .check_head {
+      height: 140rpx;
+      border-bottom: 2rpx solid #F0F0F0;
+    }
+    .headers {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .grade {
+        font-size: 40rpx;
+        font-weight: bold;
+        color: #222222;
+      }
+    }
+    .course_items {
+      width: 100%;
+      padding: 24rpx 0rpx 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2rpx solid #F0F0F0;
+      .course_lefts {
+        width: 510rpx;
+      }
+      .course_title {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #303030;
+      }
+    //   .course_pros {
+    //     font-size: 22rpx;
+    //     color: #969696;
+    //     margin-top: 16rpx;
+    //     >text {
+    //       color: #4B4B4B;
+    //     }
+    //   }
+      .course_rights {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // .cicles {
+        //   width: 32rpx;
+        //   height: 32rpx;
+        //   line-height: 26rpx;
+        //   text-align: center;
+        //   border-radius: 50%;
+        //   background-color: #D5E4FF;
+        // }
+        .intoStudy {
+			width: 108rpx;
+			height: 56rpx;
+			line-height: 56rpx;
+			text-align: center;
+			background: #D5E4FF;
+			border-radius: 66rpx;
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #498AFE;
+        }
+      }
+    }
+  }

pages/learn/index.vue

@@ -102,36 +102,34 @@
 												:percent="((item.stuAllNum+item.recordNum) / (item.secAllNum+item.examNum)) * 100"></u-line-progress>
 										</view>
 									</view>
-									<view class="progress_down">
+									<!-- <view class="progress_down">
 										
 										<view class="enter_into" @click.stop="studyIn(item.goodsId,item.gradeId,item,index)">进入学习</view>
-									</view>
+									</view> -->
 
 								</view>
 							</view>
 						</view>
-						<!-- <view class="study_btns">
+						<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">
 							</template>
 							<view v-else class="exam_btns">
-								<template v-for="(appoint,appointIndex) in item.examApplyGoodsList">
-									<view class="box_appoint" :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))">
-										<image class="img" src="/static/questionBank_collect.png"></image>
-										<text class="exam_word" @click="appointment(item,appoint)">预约考试</text>
-									</view>
-								</template>
+								<view class="box_appoint" 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))">
+									<image class="img" src="/static/learn/icon_apoint.png"></image>
+									<text class="exam_word" @click="appointment(item,appoint)">预约考试</text>
+								</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))">
-									<image class="img" src="/static/questionBank_collect.png"></image>
+									<image class="img" src="/static/learn/icon_study.png"></image>
 									<text class="exam_word"  @click="appBeforeAddress(item.goodsId,item)">进入刷题</text>
 								</view>
 								
 							</view>
 							<view class="box_appoint">
-								<image class="img" src="/static/questionBank_collect.png"></image>
+								<image class="img" src="/static/learn/icon_learn.png"></image>
 								<text class="exam_word" @click="studyIn(item.goodsId,item.gradeId,item,index)">进入学习</text>
 							</view> 
-						</view> -->
+						</view>
 
 						<!-- 不在学习服务期 -->
 						<template v-if="item.serviceStartTime && (sysTime < item.serviceStartTime || sysTime > item.serviceEndTime)">
@@ -268,7 +266,7 @@
 
 						</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>
@@ -291,7 +289,7 @@
 									<u-button type="primary" size="mini" @click="appBeforeAddress(item.goodsId,item)">进入刷题</u-button>
 								</view>
 							</view>
-						</template>
+						</template> -->
 						
 					</view>
 				</view>
@@ -450,6 +448,29 @@
 			</view>
 		</u-modal>
 
+		<!-- 多个预约考试时的弹窗 -->
+    	<u-popup v-model="appointTestShow" mode="bottom" border-radius="40">
+			<view class="popuptest_box">
+				<view class="check_head">
+            	<view class="headers">
+					<view class="grade">切换课程</view>
+						<u-icon name="close" color="#9C9C9C" size="40" @click="closePop()"></u-icon>
+					</view>
+				</view>
+				<view class="check_con">
+					<scroll-view scroll-y="true" style="height: 700rpx;">
+						<view class="course_items"  v-for="(appoint, index) in appointTestList" :key="index">
+							<view class="course_lefts">
+								<view class="course_title">{{ appoint.applyName }}</view>
+							</view>
+							<view class="course_rights" @click="jumpTest(appointItemIndex, appoint)">
+								<view class="intoStudy">预约</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+		</u-popup>
 		<!-- <tab-bar v-model="current" :list="tabbarlist" :mid-button="true" :mid-button-size="50" class="tab_items"></tab-bar> -->
     </view>
 </template>
@@ -489,7 +510,9 @@ export default {
 			livingLists: [], // 直播列表
 			allLoading: false, // 加载样式
 			current: 2,
-            tabbarlist: this.$store.state.tabLists
+			appointTestShow: false, //预约考试弹窗
+			appointTestList: [],
+			appointItemIndex: {}, // 点击了哪项课程
         }
     },
 	filters: {
@@ -1001,7 +1024,24 @@ export default {
 				phoneNumber: '020-87085982' //仅为示例
 			})
 		},
-		appointment(item,appoint) {
+		closePop() {
+			this.appointTestShow = false
+		},
+		jumpTest(item, appoint) {
+			this.appoint_an(item, appoint)
+			this.appointTestShow = false
+		},
+		appointment(item, appoint) {
+			this.appointItemIndex = item
+			if (item.examApplyGoodsList.length > 1) { // 多个考试预约				 
+				this.appointTestList = item.examApplyGoodsList
+				this.appointTestShow = true
+				return
+			}
+			appoint = item.examApplyGoodsList[0].appoint
+			this.appoint_an(item, appoint)
+		},
+		appoint_an(item, appoint) {
 			var data = {
 				goodsId: item.goodsId,
 				gradeId: item.gradeId,

pages3/live/detail.vue

@@ -895,6 +895,7 @@ export default {
         this.postStudyRecord(0, oldSectionId);
       });
       uni.$on("getSection", (item) => {
+        console.log('触发事件-=====')
         //清除直播
           this.hasStart = false;
         this.isPlayRebuild = item.rebuild;