From 4295fe09def342030a160fb78ef9a2fe0ae616eb Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Fri, 11 Nov 2022 17:02:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=20=E8=80=83?=
 =?UTF-8?q?=E8=AF=95=E5=8A=9F=E8=83=BD=E5=88=9D=E6=AC=A1=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client_mp/App.vue                |   1 +
 client_mp/common/http.api.js     |   8 +-
 client_mp/common/uni-ui.scss     | 119 +++++++++++++++++++++++++++
 client_mp/pages.json             |  57 ++++++++++++-
 client_mp/pages/exam/exam.vue    |  22 +++++
 client_mp/pages/exam/index.vue   |  60 ++++++++++++++
 client_mp/pages/exam/main.vue    |  22 +++++
 client_mp/pages/exam/preview.vue |  76 ++++++++++++++++++
 client_mp/pages/exam/record.vue  | 133 +++++++++++++++++++++++++++++++
 client_mp/pages/exam/result.vue  |  97 ++++++++++++++++++++++
 client_mp/pages/vod/video.vue    |   2 +-
 client_mp/uview-ui/theme.scss    |   7 ++
 12 files changed, 599 insertions(+), 5 deletions(-)
 create mode 100644 client_mp/common/uni-ui.scss
 create mode 100644 client_mp/pages/exam/exam.vue
 create mode 100644 client_mp/pages/exam/index.vue
 create mode 100644 client_mp/pages/exam/main.vue
 create mode 100644 client_mp/pages/exam/preview.vue
 create mode 100644 client_mp/pages/exam/record.vue
 create mode 100644 client_mp/pages/exam/result.vue

diff --git a/client_mp/App.vue b/client_mp/App.vue
index 051fa44..0453561 100644
--- a/client_mp/App.vue
+++ b/client_mp/App.vue
@@ -60,4 +60,5 @@
 <style lang="scss">
 	@import "uview-ui/index.scss";
 	@import "common/demo.scss";
+	@import "common/uni-ui.scss";
 </style>
diff --git a/client_mp/common/http.api.js b/client_mp/common/http.api.js
index 90377a5..4904415 100644
--- a/client_mp/common/http.api.js
+++ b/client_mp/common/http.api.js
@@ -44,6 +44,10 @@ const install = (Vue, vm) => {
 	let getVideos = (params={})=>vm.$u.get('/vod/video/', params);//点播视频
 	let getDickey = (params={})=>vm.$u.get('/system/dict/', params);//查询字典
 	let putMyVideoView =(id)=>vm.$u.put(`/vod/video/${id}/myview/`);//更新本人观看信息
+	
+	
+	//考试有关
+	let getExamList = (params={})=>vm.$u.get('/exam/exam/', params);//考试列表
 	vm.$u.api = {getUserInfo, 
 				getCode,
 				codeLogin,
@@ -64,7 +68,9 @@ const install = (Vue, vm) => {
 				getDocument,
 				getVideos,
 				getDickey,
-				putMyVideoView
+				putMyVideoView,
+				
+				getExamList
 				};
 }
 
diff --git a/client_mp/common/uni-ui.scss b/client_mp/common/uni-ui.scss
new file mode 100644
index 0000000..71bb980
--- /dev/null
+++ b/client_mp/common/uni-ui.scss
@@ -0,0 +1,119 @@
+.uni-flex {
+	display: flex;
+}
+
+.uni-flex-row {
+	@extend .uni-flex;
+	flex-direction: row;
+	box-sizing: border-box;
+}
+
+.uni-flex-column {
+	@extend .uni-flex;
+	flex-direction: column;
+}
+
+.uni-color-gary {
+	color: #3b4144;
+}
+
+/* 标题 */
+.uni-title {
+	display: flex;
+	margin-bottom: $uni-spacing-col-base;
+	font-size: $uni-font-size-lg;
+	font-weight: bold;
+	color: #3b4144;
+}
+
+.uni-title-sub {
+	display: flex;
+	// margin-bottom: $uni-spacing-col-base;
+	font-size: $uni-font-size-base;
+	font-weight: 500;
+	color: #3b4144;
+}
+
+/* 描述 额外文本 */
+.uni-note {
+	margin-top: 10px;
+	color: #999;
+	font-size: $uni-font-size-sm;
+}
+
+/* 列表内容 */
+.uni-list-box {
+	@extend .uni-flex-row;
+	flex: 1;
+	margin-top: 10px;
+}
+
+/* 略缩图 */
+.uni-thumb {
+	flex-shrink: 0;
+	margin-right: $uni-spacing-row-base;
+	width: 125px;
+	height: 75px;
+	border-radius: $uni-border-radius-lg;
+	overflow: hidden;
+	border: 1px #f5f5f5 solid;
+	image {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.uni-media-box {
+	@extend .uni-flex-row;
+	// margin-bottom: $uni-spacing-col-base;
+	border-radius: $uni-border-radius-lg;
+	overflow: hidden;
+	.uni-thumb {
+		margin: 0;
+		margin-left: 4px;
+		flex-shrink: 1;
+		width: 33%;
+		border-radius:0;
+		&:first-child {
+			margin: 0;
+		}
+	}
+}
+
+/* 内容 */
+.uni-content {
+	@extend .uni-flex-column;
+	justify-content: space-between;
+}
+
+/* 列表footer */
+.uni-footer {
+	@extend .uni-flex-row;
+	justify-content: space-around;
+	margin-top: $uni-spacing-col-lg;
+}
+.uni-footer-text {
+	font-size: $uni-font-size-sm;
+	color: $uni-text-color-grey;
+	margin-left: 5px;
+}
+
+/* 标签 */
+
+.uni-tag {
+	flex-shrink: 0;
+	padding: 0 5px;
+	border: 1px $uni-border-color solid;
+	margin-right: $uni-spacing-row-sm;
+	border-radius: $uni-border-radius-base;
+	background: $uni-bg-color-grey;
+	color: $uni-text-color;
+	font-size: $uni-font-size-sm;
+}
+
+/* 链接 */
+.uni-link {
+	margin-left: 10px;
+	color: $uni-text-color;
+	text-decoration: underline;
+}
\ No newline at end of file
diff --git a/client_mp/pages.json b/client_mp/pages.json
index 3305407..d388705 100644
--- a/client_mp/pages.json
+++ b/client_mp/pages.json
@@ -124,7 +124,52 @@
             "path" : "pages/vod/video",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "云点播",
+                "navigationBarTitleText": "视频观看",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/exam/index",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "考试列表",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+		,{
+		    "path" : "pages/exam/preview",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "考试须知",
+		        "enablePullDownRefresh": false
+		    }
+		    
+		}
+		,{
+		    "path" : "pages/exam/main",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "答题中",
+		        "enablePullDownRefresh": false
+		    }
+		    
+		}
+        ,{
+            "path" : "pages/exam/record",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "答题记录",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/exam/result",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "答题结束",
                 "enablePullDownRefresh": false
             }
             
@@ -147,12 +192,18 @@
 				"selectedIconPath": "static/common/homec.png",
 				"text": "主页"
 			},
-			/* {
+			{
+				"pagePath": "pages/exam/index",
+				"iconPath": "static/common/play.png",
+				"selectedIconPath": "static/common/playc.png",
+				"text": "答题"
+			},
+			{
 				"pagePath": "pages/vod/video",
 				"iconPath": "static/common/play.png",
 				"selectedIconPath": "static/common/playc.png",
 				"text": "点播"
-			}, */
+			},
 			{
 				"pagePath": "pages/my/my",
 				"iconPath": "static/common/me.png",
diff --git a/client_mp/pages/exam/exam.vue b/client_mp/pages/exam/exam.vue
new file mode 100644
index 0000000..8183fd0
--- /dev/null
+++ b/client_mp/pages/exam/exam.vue
@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/client_mp/pages/exam/index.vue b/client_mp/pages/exam/index.vue
new file mode 100644
index 0000000..085c88e
--- /dev/null
+++ b/client_mp/pages/exam/index.vue
@@ -0,0 +1,60 @@
+<template>
+	<view>
+		<uni-list>
+		    <!-- 垂直排列，无略缩图，主标题+副标题显示 -->
+		    <uni-list-item direction="column" :key="item.id" v-for="(item, index) in examList">
+		        <template v-slot:header>
+		            <view class="uni-title">{{item.name}}</view>
+		        </template>
+		        <template v-slot:body>
+		            <view class="uni-list-box">
+		                <view class="uni-content">
+		                    <view class="uni-title-sub uni-ellipsis-2">开启时间: {{item.open_time}}至{{item.close_time}}</view>
+		                    <view class="uni-note">考试机会: {{item.chance}}次</view>
+		                </view>
+		            </view>
+		        </template>
+		        <template v-slot:footer>
+		            <view class="uni-footer">
+						<u-button size="mini" type="primary" @click="attendExam(item)">我要参加</u-button>
+						<u-button size="mini" type="info">成绩排名</u-button>
+		            </view>
+		        </template>
+		    </uni-list-item>
+		</uni-list>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				query:{
+					page: 1
+				},
+				examList: []
+			}
+		},
+		onLoad() {
+			this.getExamList();
+		},
+		methods: {
+			getExamList(){
+				this.$u.api.getExamList(this.query).then(res=>{
+					this.examList = res.data.results
+				})
+			},
+			attendExam(val){
+				console.log(val)
+				uni.setStorageSync('currentExam', val)
+				uni.navigateTo({
+					url:"/pages/exam/preview"
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/client_mp/pages/exam/main.vue b/client_mp/pages/exam/main.vue
new file mode 100644
index 0000000..8183fd0
--- /dev/null
+++ b/client_mp/pages/exam/main.vue
@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/client_mp/pages/exam/preview.vue b/client_mp/pages/exam/preview.vue
new file mode 100644
index 0000000..17397dd
--- /dev/null
+++ b/client_mp/pages/exam/preview.vue
@@ -0,0 +1,76 @@
+<template>
+	<view class='wrap'>
+		<view class="subTitle">
+			考试信息
+		</view>
+		<view class="examContent">
+			<view>考试名称：<text>{{currentExam.name}}</text> </view>
+			<view>考试总分：<text>{{currentExam.paper_.total_score}}</text>分</view>
+			<view v-if="currentExam.limit>0">考试时长：<text>{{currentExam.limit}}</text>分钟</view>
+			<view v-else>考试时长：<text>不限时长</text></view>
+			<view>题目分布：单选<text>{{currentExam.paper_.danxuan_count}}</text>道;多选<text>{{currentExam.paper_.duoxuan_count}}</text>道;判断<text>{{currentExam.paper_.panduan_count}}</text>道</view>
+			<view>判分规则：单选{{currentExam.paper_.danxuan_score}}分,多选{{currentExam.paper_.duoxuan_score}}分,多选{{currentExam.paper_.panduan_score}}分,错选少选均不得分</view>
+		</view>
+		<view class="subTitle">答题须知</view>
+		<view class="tipsArea">
+			<ul>
+				<li>1.进入答题后请不要后退或返回。</li>
+				<li>2.可点击上一题/下一题切换。</li>
+				<li>3.可点击答题卡复查</li>
+				<li>4.请合理安排时间答题,可提前交卷</li>
+			</ul>
+		</view>
+		<u-button type="primary" @click="start()">开始答题</u-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentExam:{}
+			}
+		},
+		onLoad() {
+			this.currentExam = uni.getStorageSync('currentExam')
+		},
+		methods: {
+			start(){
+				uni.reLaunch({
+					url:'/pages/exam/main'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.wrap{
+		padding: 24rpx;
+		font-size: 32rpx;
+	}
+.subTitle {
+		font-size: $u-font-size-title;
+		font-weight: bold;
+		color: $theme-color;
+		text-align: center;
+		margin: 40rpx auto 20rpx auto;
+	}
+.examContent {
+		line-height: 50rpx;
+		margin-left: 80rpx;
+		text {
+			font-weight: bold;
+			color:$u-type-warning-dark;
+		}
+	}
+	.tipsArea {
+		padding: 0 40rpx;
+		margin-left: 0rpx;
+		margin-bottom: 30rpx;
+	}
+	ul {
+		margin: 0 30rpx;
+		line-height: 50rpx;
+	}
+</style>
diff --git a/client_mp/pages/exam/record.vue b/client_mp/pages/exam/record.vue
new file mode 100644
index 0000000..c716c20
--- /dev/null
+++ b/client_mp/pages/exam/record.vue
@@ -0,0 +1,133 @@
+<template>
+	<view>
+		<uni-list>
+			<uni-list-item v-for="item in list" :key="item.id" @click="goDetail(item.id)" :clickable="true" link>
+				<!-- 自定义 header -->
+				<!-- <view slot="header" class="slot-box">
+					<view>{{item.name}}</view>
+				</view> -->
+				<!-- 自定义 body -->
+				<template slot="body" style="display: block;">
+					<view>
+						<text v-if="item.type=='自助模考'">模拟练习</text>
+						<text v-else style="font-weight: bold;color:orange">正式竞赛</text>
+						<text v-if="item.name.indexOf('(补)') != -1">(补)</text>
+					</view>
+					<view style="color:gray;font-size: 26rpx;">
+						<span>耗时:
+							<span style="color:darkblue;font-weight: bold;">{{item.took}}</span>
+							s</span>
+						-
+						<text>提交时间:{{item.create_time}}</text>
+					</view>
+					<view style="color:gray;font-size: 26rpx;">
+						<span>总分:{{item.total_score}}分</span>
+						-
+						<span>得分:
+							<span style="color:green;font-weight: bold;">{{item.score}}</span>
+							分</span>
+					</view>
+				</template>
+				<!-- 自定义 footer-->
+				<!-- <template slot="footer">
+					<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
+				</template> -->
+
+			</uni-list-item>
+		</uni-list>
+		<!-- <uni-card :title="item.name" :isFull="true" isShadow='true' extra="查看详情" @click="clickCard" v-for="item in list" :key="item.id">
+			<view>
+				<text>{{item.type}}</text>
+			</view>
+			<view>
+				<text>耗时:{{item.took}}</text>
+				<text>开始答题:{{item.start_time}}</text>
+			</view>
+		</uni-card> -->
+		<view style="color:gray;text-align: center;margin-top:20upx">{{loadingText}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				listQuery: {
+					page: 1,
+					page_size: 20
+				},
+				list: [],
+				loadingText: '加载中...'
+			}
+		},
+		methods: {
+			getList() {
+				var that = this
+				that.$u.api.getMyExamRecord(that.listQuery).then(res => {
+					uni.stopPullDownRefresh()
+					uni.setNavigationBarTitle({
+						title: res.data.count + '条答题记录'
+					})
+					if (that.listQuery.page == 1) {
+						if (res.data.results.length == 0) {
+							that.loadingText = '暂无答题记录'
+						} else {
+							that.loadingText = ''
+							that.list = res.data.results
+						}
+					} else {
+						that.loadingText = ''
+						that.list = that.list.concat(res.data.results)
+					}
+				}).catch(res => {
+					uni.stopPullDownRefresh()
+					if (res.code == 404) {
+						that.loadingText = '到底了'
+					}
+				})
+			},
+			goDetail(id) {
+				uni.showLoading({
+					title:"正在获取答题详情",
+				})
+				this.$u.api.getExamRecordDetail(id).then(res=>{
+					uni.hideLoading()
+					uni.setStorageSync('currentExam', res.data)
+					if (res.data.questions.length>0){
+						uni.redirectTo({
+							url:'/pages/exam/detail?examrecord='+id
+						})
+					}
+					else{
+						uni.showToast({
+							title:'获取失败',
+							icon:'none'
+						})
+						return
+					}
+				}).catch(e=>{
+				})
+			}
+		},
+		onLoad() {
+			this.listQuery.page = 1
+			this.getList()
+		},
+		onPullDownRefresh() {
+			this.listQuery.page = 1
+			this.getList()
+		},
+		onReachBottom() {
+			this.listQuery.page = this.listQuery.page + 1
+			this.getList()
+		}
+
+	}
+</script>
+
+<style lang='scss'>
+	page {
+		background-color: $u-bg-color;
+
+	}
+</style>
diff --git a/client_mp/pages/exam/result.vue b/client_mp/pages/exam/result.vue
new file mode 100644
index 0000000..a79e1e3
--- /dev/null
+++ b/client_mp/pages/exam/result.vue
@@ -0,0 +1,97 @@
+<template>
+	<view>
+		<image class="examImage" :src="imageSrc" mode="aspectFit"></image>
+		<view class="finishText">
+			恭喜您完成考试！
+		</view>
+		<view class="finishText">
+			<view><text>{{currentExam.name}}</text></view>
+			<!-- 练习类型{{paperRecord.paperName}} -->
+			<view>总分：<text>{{currentExam.total_score}}</text>分</view>
+			<!-- <view>答对：<text>{{paperRecord.rightQueNum}}</text>题</view> -->
+			<view>得分：<text>{{currentExam.score}}</text> 分 </view>
+		</view>
+		<view class="btnArea">
+			<u-button class="btnClass" type="primary" :ripple="true" shape="circle" @click="goDetail">查看答卷</u-button>
+			<u-button class="btnClass" :ripple="true" shape="circle" @click="backToHome">返回首页</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				imageSrc: '/static/exam/result.png',
+				currentExam:{}
+			}
+		},
+		methods: {
+			goDetail(){
+				uni.showLoading({
+					title:"正在获取答题详情",
+				})
+				this.$u.api.getExamRecordDetail(this.currentExam.id).then(res=>{
+					uni.hideLoading()
+					uni.setStorageSync('currentExam', res.data)
+					uni.redirectTo({
+						url:'/pages/exam/detail?examrecord='+this.currentExam.id
+					})
+				}).catch(e=>{
+				})
+			},
+			backToHome(){
+				uni.reLaunch({
+					url:'/pages/index/index'
+				})
+			}
+		},
+		onLoad(options){
+			this.currentExam = uni.getStorageSync('currentExam')
+		},
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+	.examImage {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		// background-color: #000000;
+		margin-top: 100rpx;
+		height: 300rpx;
+	}
+
+	.finishText {
+		// margin: 100rpx 200rpx;
+		padding: 50rpx;
+		letter-spacing: 0.2em;
+		font-size: 32rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		text {
+			color: $theme-color;
+			font-weight: bold;
+		}
+	}
+
+	.btnArea {
+		display: flex;
+		margin-top: 50rpx;
+		justify-content: center;
+		align-items: center;
+		.btnClass {
+			width: 300rpx;
+		}
+	}
+
+	.infoArea {
+		display: flex;
+		
+		flex-direction: column;
+		justify-content: center;
+	}
+</style>
diff --git a/client_mp/pages/vod/video.vue b/client_mp/pages/vod/video.vue
index 8a5a0d6..d306c83 100644
--- a/client_mp/pages/vod/video.vue
+++ b/client_mp/pages/vod/video.vue
@@ -31,7 +31,7 @@
 								</video>
 								<view style="color:darkblue;margin-left:4upx">
 								<text>{{video.name}}</text>
-								<text style="float:right;color:gray;margin-right: 8upx;">{{video.viewsp}}人观看</text>
+								<text style="float:right;color:gray;margin-right: 8upx;">{{video.views}}次播放</text>
 								</view>
 							</view>
 						</view>
diff --git a/client_mp/uview-ui/theme.scss b/client_mp/uview-ui/theme.scss
index f3bb36d..37264d5 100644
--- a/client_mp/uview-ui/theme.scss
+++ b/client_mp/uview-ui/theme.scss
@@ -2,6 +2,7 @@
 // uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
 // 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
 
+$theme-color:#0080d1;
 $u-main-color: #303133;
 $u-content-color: #606266;
 $u-tips-color: #909399;
@@ -36,3 +37,9 @@ $u-type-info-light: #f4f4f5;
 
 $u-form-item-height: 70rpx;
 $u-form-item-border-color: #dcdfe6;
+
+/* 文字尺寸 */
+$u-font-size-sm:24rpx;
+$u-font-size-lg:32rpx;
+$u-font-size-base:28rpx;
+$u-font-size-title:36rpx;
\ No newline at end of file