Browse Source

feat: 题库页面

xuqiaoying 2 years ago
parent
commit
0f2cea9e2a
4 changed files with 480 additions and 38 deletions
  1. 1 2
      common/httpList/goods.js
  2. 16 34
      pages/learn/index.vue
  3. 299 0
      pages/questionBank/index.scss
  4. 164 2
      pages/questionBank/index.vue

+ 1 - 2
common/httpList/goods.js

@@ -461,8 +461,7 @@ export default {
 		return myRequest({
 			url: '/bank/question/listUserFreeUnionBuyGoodsList',
 			method: 'get',
-			data: data,
-			compleLoading: true
+			data: data
 		})
 	},
 	

+ 16 - 34
pages/learn/index.vue

@@ -278,7 +278,7 @@
 				</view>
 
 				<!-- 我的题库 -->
-				<view class="my_courses">
+				<!-- <view class="my_courses">
 					<text class="titles">我的题库</text>
 					<view class="bottoms">
 						<navigator hover-class="none" url="/pages2/subject/collect">
@@ -346,7 +346,7 @@
 						</view>
 					</template>
 					
-				</view>
+				</view> -->
 			</view>
 			<!-- 没有学习的课程 -->
 			<view v-if="!allLoading && !allCourse" class="no_datas">
@@ -452,7 +452,6 @@
 				</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>
 
@@ -480,12 +479,12 @@ export default {
 			gradeValue: -1,
 			sysTime: 0,
 			courseLists: [], // 课程列表
-			questionLists: [], // 题库列表
-			paramQ: {
-				pageNum: 1,
-				pageSize: 50
-			},
-			queitemIndex:'',
+			// questionLists: [], // 题库列表
+			// paramQ: {
+			// 	pageNum: 1,
+			// 	pageSize: 50
+			// },
+			// queitemIndex:'',
 			livingLists: [], // 直播列表
 			allLoading: false, // 加载样式
 			current: 2,
@@ -507,7 +506,7 @@ export default {
 	computed: {
 		...mapGetters(['userInfo']),
 		allCourse() {
-			return this.courseLists.length || this.questionLists.length || this.livingLists.length ? true : false
+			return this.courseLists.length || this.livingLists.length ? true : false
 		}
 	},
 	onLoad() {
@@ -567,9 +566,9 @@ export default {
 		// 查询直播课
 		getCourseLiveQues() {
 			this.allLoading = true
+			// this.$api.listUserFreeUnionBuyGoodsList(this.paramQ), // 查询用户拥有免费+自购题库商品 /bank/question/listUserFreeUnionBuyGoodsList
 			let arrs = [
 				this.$api.listUserVideoLive(this.paramC), // 查询用户拥有视频+直播商品 /goods/listUserVideoLive
-				this.$api.listUserFreeUnionBuyGoodsList(this.paramQ), // 查询用户拥有免费+自购题库商品 /bank/question/listUserFreeUnionBuyGoodsList
 				this.$api.getgoodsLiveList({
 					pageNum: 1,
 					pageSize: 3 // 默认3条
@@ -578,17 +577,17 @@ export default {
 			wx.stopPullDownRefresh()
 			Promise.all(arrs).then((res) => {
 				// if (res.data.code == 200) {
-					const [{ data: res1}, { data: res2}, {data: res3}] = res
+					const [{ data: res1}, { data: res2}] = res
 					if (res1.code == 200) {
 						this.courseLists = res1.rows || []
 					}
+					// if (res2.code == 200) {
+					// 	this.questionLists = res2.rows || []
+					// }
 					if (res2.code == 200) {
-						this.questionLists = res2.rows || []
-					}
-					if (res3.code == 200) {
-						this.livingLists = res3.rows || []
+						this.livingLists = res2.rows || []
 					} else {
-						this.$u.toast(res3.msg)
+						this.$u.toast(res2.msg)
 					}
 					this.allLoading = false
 				// }
@@ -895,21 +894,6 @@ export default {
 				}
 			});
 		},
-		// 进入练习
-		studyques(item,index){
-			this.queitemIndex = index;
-			let sysTime = this.$method.timest()
-			if (item.serviceStartTime && item.serviceEndTime && (sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime)) {
-				uni.showToast({
-					icon: 'none',
-					title: '不在学习服务期,不能进入学习'
-				})
-				return;
-			}
-			uni.navigateTo({
-				url:'/pages2/bank/question_detail?id='+item.goodsId+'&orderGoodsId='+item.orderGoodsId
-			})
-		},
 		radioGroupChange(e) {
 			// console.log(e)
 		},
@@ -1010,7 +994,6 @@ export default {
 			this.appointTestShow = false
 		},
 		appointment(item, appoint) {
-			console.log('====', item.examApplyGoodsList, this.userInfo)
 			this.appointItemIndex = item
 			if (item.examApplyGoodsList.length > 1) { // 多个考试预约				 
 				this.appointTestList = item.examApplyGoodsList
@@ -1021,7 +1004,6 @@ export default {
 			this.appoint_an(item, appoint_item)
 		},
 		appoint_an(item, appoint) {
-			// console.log('==appoint=', appoint)
 			var data = {
 				goodsId: item.goodsId,
 				gradeId: item.gradeId,

+ 299 - 0
pages/questionBank/index.scss

@@ -0,0 +1,299 @@
+@mixin threeDot {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.had_courses{
+	width: 100%;
+	padding: 0rpx 24rpx 31rpx;
+}
+
+.my_courses {
+	.titles {
+		font-size: 32rpx;
+		color: #333333;
+		margin: 44rpx 0rpx 24rpx 43rpx;
+		font-weight: bold;
+		display: block;
+	}
+	.course_item {
+		width: 100%;
+		// height: 278rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1,99,235,0.1000);
+		border-radius: 24rpx;
+		padding: 29rpx 29rpx 20rpx 24rpx;
+		margin-bottom: 20rpx;
+		.titlews {
+			padding-bottom: 24rpx;
+		}
+		.cou_titles {
+			margin-bottom: 12rpx;
+			color: #333333;
+			font-size: 32rpx;
+			font-weight: bold;
+			width: 100%;
+			@include threeDot();
+		}
+		.learn_ranges {
+			color: #666;
+			font-size: 24rpx;
+			.l_range {
+				width: 20rpx;
+				height: 24rpx;
+				margin-right: 9rpx;
+			}
+			.l_time {
+				color: #333;
+			}
+		}
+		.c_downs {
+			display: flex;
+			align-items: center;
+			// justify-content: flex-start;
+			justify-content: space-between;
+			padding-top: 24rpx;
+		}
+		// 状态
+		.all_status {
+			width: 654rpx;
+			background: #F8F8F8;
+			border-radius: 16rpx;
+		}
+		.class-warm {
+			padding: 20rpx 24rpx;
+			display: flex;
+			align-items: flex-start;
+
+			&__icon {
+				margin-right: 10rpx;
+			}
+
+			&__text {
+
+				.date {
+					color: #FF3B30;
+					font-size: 22rpx;
+					font-weight: 400;
+					// color: #969696;
+					margin-bottom: 8rpx;
+				}
+			}
+		}
+		.box_progress {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 20rpx;
+			// .disabled {
+			// 	opacity: 0.6;
+			// }
+		}
+		.study_btns {
+			width: 100%;
+			margin-top: 40rpx;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			.exam_btns {
+				// width: 64%;
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+			}
+		}
+		.box_appoint {
+			// width: 35%;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			.img {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 10rpx;
+			}
+			
+		}
+		.exam_word {
+			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;
+		}
+	}
+	.lefts {
+		width: 204rpx;
+		height: 120rpx;
+		border-radius: 12rpx;
+		margin-right: 48rpx;
+		position: relative;
+		top: 0;
+		left: 0;
+		.lefet_img {
+			width: 100%;
+			height: 100%;
+			display: block;
+			border-radius: 16rpx;
+		}
+		.live_icon {
+			width: 65rpx;
+			height: 35rpx;
+			line-height: 35rpx;
+			border-radius: 12rpx 0rpx 12rpx 0rpx;
+			background-color: #FFB102;
+			color: #fff;
+			font-size: 20rpx;
+			text-align: center;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+	}
+	.rights {
+		width: 380rpx;
+		height: 120rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;;
+		
+		.learn_progress {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+		.progress_up {
+			font-size: 24rpx;
+			color: #999999;
+			width: 100%;
+			.progress_bar {
+				margin-top: 16rpx;
+			}
+		}
+		.progress_down {
+			// width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+		.enter_into {
+			width: 144rpx;
+			height: 52rpx;
+			line-height: 52rpx;
+			background: #FFB102;
+			border-radius: 16rpx;
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #FFFFFF;
+			text-align: center;
+		}
+	}
+	// 收藏集,做题记录
+	.bottoms {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 32rpx;
+		.item {
+			width: 335rpx;
+			&.collect {
+				position: relative;
+				font-size: 32rpx;
+				color: #FFFFFF;
+				height: 240rpx;
+				border-radius: 24rpx;
+				padding:32rpx;
+				
+				.text {
+					position:relative;
+					z-index: 10;
+					font-size: 32rpx;
+					font-weight: bold;
+					color: #FFFFFF;
+				}
+				
+				.img {
+					position:absolute;
+					left:0;
+					top:0;
+					width:100%;
+					height:100%;
+					
+				}
+			}
+			
+			&.list {
+				.list-in {
+					position:relative;
+					width: 335rpx;
+					height: 112rpx;
+					background: #007AFF;
+					border-radius: 24rpx;
+					display: flex;
+					align-items: center;
+					font-size: 32rpx;
+					color: #fff;
+					
+					&:first-of-type {
+						margin-bottom:16rpx;
+					}
+					
+					.text {
+						padding-left:91rpx;
+						position:relative;
+						z-index: 10;
+						font-size: 32rpx;
+						font-weight: bold;
+						color: #FFFFFF;
+					}
+					
+					.img {
+						position:absolute;
+						left:0;
+						top:0;
+						width:100%;
+						height:100%;
+					}
+				}
+			}
+		}
+	}
+}
+.no_datas {
+	margin-top: 70rpx;
+	display: flex;
+    flex-direction: column;
+    align-items: center;
+	.courses {
+		width: 360rpx;
+		height: 349rpx;
+	}
+	.no_learns {
+		font-size: 32rpx;
+		color: #999;
+		margin: 46rpx 0rpx 56rpx;
+	}
+	.choose {
+		width: 280rpx;
+		height: 64rpx;
+		line-height: 64rpx;
+		border-radius: 32rpx;
+		background-color: #007AFF;
+		color: #fff;
+		font-size: 30rpx;
+		text-align: center;
+	}
+}

+ 164 - 2
pages/questionBank/index.vue

@@ -1,9 +1,171 @@
 <template>
     <view class="questionBank">
-        <u-navbar :is-back="false" title="题库" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
+        <u-navbar :is-back="false" title="题库中心" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
 			<view class="slot-wrap">
 				<image  src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
 			</view>
 		</u-navbar>
+		<!-- 有学习的课程 -->
+		<view v-if="questionLists.length" class="had_courses">
+			<!-- 我的题库 -->
+			<view class="my_courses">
+				<text class="titles">我的题库</text>
+				<view class="bottoms">
+					<navigator hover-class="none" url="/pages2/subject/collect">
+						<view class="item collect">
+							<view class="text">收藏集<u-icon name="arrow-right"></u-icon></view>
+							<image class="img" src="/static/questionBank_collect.png"></image>
+						</view>
+					</navigator>
+					<view class="item list">
+						<navigator  hover-class="none" url="/pages2/bank/question_record">
+							<view class="list-in">
+								<image class="img" src="/static/questionBank_record.png" ></image>
+								<view class="text">
+									做题记录 <u-icon name="arrow-right"></u-icon>
+								</view>
+								
+							</view>
+						</navigator>
+						
+						<navigator  hover-class="none" url="/pages2/subject/wrong">
+							<view class="list-in">
+								<image class="img" src="/static/questionBank_wrong.png"></image>
+								<view class="text">
+									错题集 <u-icon name="arrow-right"></u-icon>
+								</view>
+							</view>
+						</navigator>
+					</view>
+				</view>
+
+				<template v-if="questionLists.length">
+					<view v-for="(item, indexq) in questionLists" :key="indexq" class="course_item">
+						<view>
+							<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>
+								学习周期:
+								<text class="l_time">{{ item.serviceStartTime | formate('yyyy.mm.dd') }} - {{ item.serviceEndTime | formate('yyyy.mm.dd') }}</text>
+							</view>
+						</view>
+						<view class="c_downs">
+							<view class="lefts">
+								<image class="lefet_img" :src="$method.splitImgHost(item.coverUrl, true)" mode=""></image>
+							</view>
+							<view class="rights">
+								<view class="learn_progress">
+									<view class="progress_up">
+										<view>
+											学习进度:{{item.doNum}}/{{item.totalNum}}
+										</view>
+										<view class="progress_bar" style="width: 100%;">
+											<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">
+										<view class="enter_into" @click="studyques(item,index)">进入练习</view>
+									</view> -->
+								</view>
+							</view>
+						</view>
+						<!-- 按钮 -->
+						<view class="study_btns">
+							<view class="exam_word intos">每日一练</view>
+							<view class="exam_word intos">随机联系</view>
+							<view class="exam_word intos" @click="studyques(item,index)">章节练习</view>
+						</view>
+					</view>
+				</template>
+				
+			</view>
+		</view>
+		<!-- 没有学习的课程 -->
+		<view v-if="!allLoading && !questionLists.length" class="no_datas">
+			<image class="courses" src="/static/learn/no_course.png" mode=""></image>
+			<view class="no_learns">您目前没有可学习的题库</view>
+			<view class="choose" @click="toChoose()">立即去选购</view>
+		</view>
     </view>
-</template>
+</template>
+
+<script>
+import {mapGetters, mapActions} from 'vuex'
+export default {
+	data() {
+		return {
+			allLoading: false, // 加载样式
+			questionLists: [], // 题库列表
+			param: {
+				pageNum: 1,
+				pageSize: 10
+			},
+			total: 0,
+		}
+	},
+	computed: {
+		...mapGetters(['userInfo']),
+	},
+	onLoad() {},
+	onShow() {
+		this.param.pageNum = 1
+		this.questionLists = []
+		this.getBankList()
+	},
+	onPullDownRefresh() {
+		this.param.pageNum = 1
+		this.questionLists = []
+		this.getBankList()
+	},
+	onReachBottom() {
+		if (this.questionLists.length < this.total) {
+			this.param.pageNum++
+			this.getBankList()
+		}
+	},
+	methods: {
+		// 查询用户拥有免费+自购题库商品 /bank/question/listUserFreeUnionBuyGoodsList
+		getBankList() {
+			this.allLoading = true
+			this.$api.listUserFreeUnionBuyGoodsList(this.param).then((res) => {
+				if (res.data.code == 200) {
+					this.questionLists.push(...(res.data.rows || [] ))
+					console.log('this.courseList', this.questionLists)
+					this.total = res.data.total
+				}
+				this.allLoading = false
+			}).catch((err) => {
+				this.allLoading = false
+			})
+		},
+		toChoose() {
+			uni.switchTab({
+				url:'/pages/course/index'
+			})
+		},
+		// 进入练习
+		studyques(item,index){
+			let sysTime = this.$method.timest()
+			if (item.serviceStartTime && item.serviceEndTime && (sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime)) {
+				uni.showToast({
+					icon: 'none',
+					title: '不在学习服务期,不能进入学习'
+				})
+				return;
+			}
+			uni.navigateTo({
+				url:'/pages2/bank/question_detail?id='+item.goodsId+'&orderGoodsId='+item.orderGoodsId
+			})
+		},
+	},
+}
+</script>
+
+<style>
+page {
+	background: #eaeef1;
+}
+</style>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>