提交

src/pages/questionBank/components/GradesChart.vue

@@ -0,0 +1,76 @@
+<template>
+  <view class="charts-box">
+    <qiun-data-charts 
+      type="arcbar"
+      :opts="opts"
+      :chartData="chartData"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: {},
+      //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
+      opts: {
+        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+        padding: undefined,
+        title: {
+          name: "80%",
+          fontSize: 35,
+          color: "#05C341"
+        },
+        subtitle: {
+          name: "",
+          fontSize: 25,
+          color: "#05C341"
+        },
+        extra: {
+          arcbar: {
+            type: "default",
+            width: 18,
+            backgroundColor: "#E9E9E9",
+            startAngle: 0.95,
+            endAngle: 0.05,
+            gap: 2
+          }
+        }
+      }
+    };
+  },
+  onReady() {
+    this.getServerData();
+  },
+  methods: {
+    getServerData() {
+      //模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+        let res = {
+            series: [
+              {
+                name: "正确率",
+                color: "#05C341",
+                data: 0.8
+              }
+            ]
+          };
+        this.chartData = JSON.parse(JSON.stringify(res));
+      }, 500);
+    },
+  }
+};
+</script>
+
+<style scoped>
+  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
+  .charts-box {
+    width: 100%;
+    height: 346rpx;
+		background-color: #fdfdfd;
+		border-radius: 20rpx;
+		ppadding-top: 20rpx;
+  }
+</style>

src/pages/questionBank/components/Question.vue

@@ -2,11 +2,10 @@
   <view style="margin-top: 100px;">
     <view class="flex ai-c jc-c">
       <view class="flex type_box jc-sb ai-c">
-        <view class="type_item" :class="tCurrent==0?'checked':'unchecked'" @tap="sectionChange(0)">答题</view>
-        <view class="type_item" :class="tCurrent==1?'checked':'unchecked'" @tap="sectionChange(1)">背题</view>
+				<view class="type_item" v-for="(item,index) of tabsList" :key="index" :class="tCurrent==item.value?'checked':'unchecked'" @tap="sectionChange(item.value)">{{item.label}}</view>
       </view>
     </view>
-    <swiper class="swiper" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true"	@change="onChange" @animationfinish="onAnimationfinish">
+    <swiper class="swiper mt20" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true"	@change="onChange" @animationfinish="onAnimationfinish" @touchend="touchEnd" >
       <swiper-item v-for="(quesItem,quesIndex) in swiperList" :key="quesIndex">
         <scroll-view scroll-y="true" class="swiper-scroll">
           <view>
@@ -40,24 +39,114 @@
         </scroll-view>
       </swiper-item>
     </swiper>
-    <u-modal :show="tipShow" :title="title" :content="content">
+		<view class="wp100 flex jc-sb ai-c p14 bc-fff" style="position: fixed;bottom: 0;left: 0;">
+			<view style="width: 220rpx;">
+				<button v-if="type==='practice'" class="btn">四步学科一</button>
+				<view v-else class="btn" style="text-align: center;">
+					<u-count-down :time="1 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
+					<text>交卷</text>
+				</view>
+			</view>
+			<view class="text-center flex jc-c ai-c" style="flex-direction: column;" @tap="toCollect">
+				<u-icon name="star-fill" v-if="questionList[topicIndex].isCollect" color="rgb(249,236,141)" size="24"></u-icon>
+				<u-icon name="star" v-else size="24"></u-icon>
+				<text class="cor-666">{{questionList[topicIndex].isCollect?'已收藏':'收藏'}}</text>
+			</view>
+			<view class="text-center">
+				<view style="color: #00B74F;">{{rightList.length}}</view>
+				<text class="cor-666">答对</text>
+			</view>
+			<view class="text-center">
+				<view style="color: #FF6E02;">{{wrongList.length}}</view>
+				<text class="cor-666">答错</text>
+			</view>
+			<view class="text-center" @tap="popupShow=!popupShow">
+				<view><text class="cor-333">{{topicIndex+1}}</text><text style="color:#999;">/{{questionList.length}}</text></view>
+				<text class="cor-666">题板</text>
+			</view>
+		</view>
+    <u-modal :show="tipShow">
+			<view class="relative wp100">
+				<view class="text-center">
+				<text>{{title}}</text>
+				<view class="mt20">{{content}}</view>
+				</view>
+				<view style="position: absolute;right:0px;top:0" @tap="cancel">
+					<u-icon name="close-circle-fill" color="rgb(204,204,204)" size="24"></u-icon>
+				</view>
+			</view>
       <template #confirmButton>
         <view class="p10" >
-          <u-button :customStyle="{width:'100%',height:'68rpx',borderRadius:'34rpx'}">查看练题结果</u-button>
+          <u-button :customStyle="{width:'100%',height:'68rpx',borderRadius:'34rpx',color:'#fff',backgroundColor:'#05C341'}" @click="toResult">查看练题结果</u-button>
         </view>
       </template>
     </u-modal>
+		<u-popup :show="popupShow" mode="bottom" :closeOnClickOverlay="true" @close="popupShow=false">
+			<view>
+				<view class="wp100 flex jc-sb p14 bc-fff">
+					<view style="width: 220rpx;">
+						<button v-if="type==='practice'" class="btn">四步学科一</button>
+						<view v-else class="btn" style="text-align: center;">
+							<u-count-down :time="1 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
+							<text>交卷</text>
+						</view>
+					</view>
+					<view class="text-center flex jc-c ai-c" style="flex-direction: column;" @tap="toCollect">
+						<u-icon name="star-fill" v-if="questionList[topicIndex].isCollect" color="rgb(249,236,141)" size="24"></u-icon>
+						<u-icon name="star" v-else size="24"></u-icon>
+						<text class="cor-666">{{questionList[topicIndex].isCollect?'已收藏':'收藏'}}</text>
+					</view>
+					<view class="text-center">
+						<view style="color: #00B74F;">{{rightList.length}}</view>
+						<text class="cor-666">答对</text>
+					</view>
+					<view class="text-center">
+						<view style="color: #FF6E02;">{{wrongList.length}}</view>
+						<text class="cor-666">答错</text>
+					</view>
+					<view class="text-center" @tap="popupShow=!popupShow">
+						<view><text class="cor-333">{{topicIndex+1}}</text><text style="color:#999;">/{{questionList.length}}</text></view>
+						<text class="cor-666">题板</text>
+					</view>
+				</view>
+				<view class="flex ai-c jc-sb p14" style="flex-wrap: wrap;max-height: 400px;overflow-y: scroll;">
+					<view v-for="(item,index) of questionList" :key="index" style="width:20%;" class="flex ai-c jc-c" @tap="chooseQueston(index)">
+						<view class="tCircle mb10" :class="{
+									'active':index == topicIndex,
+									'success':rightList.includes(item.questionId),
+									'error':wrongList.includes(item.questionId)
+								}">
+							{{index+1}}
+						</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
   </view>
 </template>
 
 <script>
 export default {
+	props:{
+		tabsList:{
+			type:Array
+		},
+		type:{
+			type:String,
+			default:'practice'
+		}
+	},
   data() {
     return {
+			popupShow:false,
       content:'太棒啦，已答完最后一题~',
       tipShow:false,
       title:'提示',
       tCurrent:0,
+			index:0,
+			qIndex:0,
+			rightList:[],
+			wrongList:[],
       questionList: [],//数据源
       swiperList: [], // 轮播图数据列表
       swiperIndex: 0, // 轮播图当前位置
@@ -71,6 +160,42 @@ export default {
     this.renderSwiper(0)
   },
   methods: {
+		//切换题目
+		chooseQueston(index){
+			this.popupShow=false
+			this.pickerTopic(index)
+		},
+		//查看考试结果
+		toResult(){
+			uni.navigateTo({
+				url:"/pages/questionBank/practiceResult"
+			})
+		},
+		toCollect(){
+			if(this.questionList[this.topicIndex].isCollect){
+				this.questionList[this.topicIndex].isCollect=false
+				uni.showToast({
+					title:"取消收藏",
+					icon:'none'
+				})
+			}else{
+				this.questionList[this.topicIndex].isCollect=true
+				uni.showToast({
+					title:"已收藏",
+					icon:'none'
+				})
+			}
+		},
+		cancel(){
+			this.tipShow=false
+		},
+		touchEnd(e){
+			if(this.topicIndex<this.questionList.length-1){
+				this.index=this.topicIndex
+			}else{
+				this.index++
+			}
+		},
     // 渲染 swiper
     renderSwiper(index) {
       let list = [];
@@ -112,12 +237,16 @@ export default {
         // 轮播图当前位置小于原来时则表示为上一题
         this.topicIndex--;
       }
-
       // 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
       this.swiperIndex = e.detail.current;
     },
     // 轮播图动画结束
     onAnimationfinish(e) {
+			if(this.index>=this.questionList.length){
+				this.tipShow=true
+			}else{
+				this.tipShow=false
+			}
       if (!this.isChange) return;
 
       this.isChange = false;
@@ -138,18 +267,38 @@ export default {
       }
       if(this.tCurrent!==1){
         if(this.questionList[this.topicIndex].clickAnswer===this.questionList[this.topicIndex].rightOp){
-          if(this.topicIndex<=this.questionList.length-1){
-            if(this.topicIndex===this.questionList.length-1){
-              this.tipShow=true
-            }else{
-              this.tipShow=false
-            }
+					if(!this.rightList.includes(this.questionList[this.topicIndex].questionId)){
+						this.rightList.push(this.questionList[this.topicIndex].questionId)
+					}
+					console.log(this.rightList);
+					if(this.wrongList.includes(this.questionList[this.topicIndex].questionId)){
+						const wIndex=this.wrongList.findIndex(this.questionList[this.topicIndex].questionId)
+						this.wrongList.splice(wIndex,1)
+					}
+          if(this.topicIndex<this.questionList.length-1){
             this.topicIndex ++;
+						this.qIndex=this.topicIndex
             setTimeout(()=>{
               this.renderSwiper(this.topicIndex);
             },1000)
           }
-        }
+					if(this.topicIndex<=this.questionList.length-1){
+							this.qIndex=this.topicIndex
+					}else{
+						this.qIndex++
+					}
+					if(this.qIndex>=this.questionList.length-1){
+						setTimeout(()=>{
+							this.tipShow=true
+						},1000)
+					}else{
+						this.tipShow=false
+					}
+        }else{
+					if(!this.wrongList.includes(this.questionList[this.topicIndex].questionId)){
+						this.wrongList.push(this.questionList[this.topicIndex].questionId)
+					}
+				}
       }
     },
     sectionChange(index) {
@@ -465,9 +614,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped  lang="scss">
 .type_box {
-  width: 280rpx;
+  width: 350rpx;
   height: 72rpx;
   background-color: #FFFFFF;
   border-radius: 8rpx;
@@ -476,7 +625,7 @@ export default {
 .type_item {
   text-align: center;
   line-height: 64rpx;
-  width: 126rpx;
+  width: 160rpx;
   height: 64rpx;
   border-radius: 8rpx;
 }
@@ -523,4 +672,46 @@ export default {
   background: #EEEEEE;
   border-radius: 20rpx;
 }
+.btn{
+	width: 220rpx;
+	height: 80rpx;
+	border-radius: 40rpx;
+	color:#fff;
+	background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%);
+	font-size: 28rpx;
+	line-height: 80rpx;
+}
+.tCircle{
+	width: 80rpx;
+	height: 80rpx;
+	background-color: #fff;
+	border: #ddd solid 1px;
+	border-radius: 50%;
+	line-height: 80rpx;
+	text-align: center;
+	
+	&.active {
+		border:  #05C341 solid 1px;
+	}
+	
+	&.success {
+		background-color:rgb(236,247,241);
+		color: #05C341;
+		border: none;
+	
+		&.active {
+			border: #05C341 solid 1px;
+		}
+	}
+	
+	&.error {
+		background-color: #ffeceb;
+		color: #f84d27;
+		border: none;
+	
+		&.active {
+			border: #f84d27 solid 1px;
+		}
+	}
+}
 </style>

src/pages/questionBank/practiceExams.vue

@@ -1,22 +1,55 @@
 <template>
 	<view>
-		
+		<u-navbar title="模拟考试" @rightClick="rightClick" :autoBack="true">
+		</u-navbar>
+		<Question :tabsList="tabsList" type="exam" />
 	</view>
 </template>
 
 <script>
+	import {
+		mapState,
+		mapActions
+	} from 'pinia' //引入映射函数
+	import useQuestionStore from '@/jtools/store/question' //引入store
+	import Question from './components/Question.vue';
 	export default {
+		components: {
+			Question
+		},
 		data() {
 			return {
-				
+				tabsList:[{
+					label:"模拟考试",
+					value:0
+				},{
+					label:"考前密卷",
+					value:1
+				}]
 			}
 		},
+		onLoad() {
+			console.log(this.orderQuestionList);
+		},
+		computed: {
+			...mapState(useQuestionStore, ["orderQuestionList"]) //映射函数，取出tagslist
+		},
 		methods: {
-			
+			rightClick() {
+				console.log('返回');
+			}
 		}
 	}
 </script>
 
-<style>
-
+<style scoped>
+	::v-deep .u-count-down{
+		font-size: 28rpx;
+		color:#fff !important;
+		display: inline-block !important;
+	}
+	::v-deep .u-count-down__text{
+		font-size: 28rpx;
+		color:#fff !important;
+	}
 </style>

src/pages/questionBank/practiceResult.vue

@@ -0,0 +1,71 @@
+<template>
+	<view>
+		<u-navbar title="本次练题结果" @rightClick="rightClick" :autoBack="true"></u-navbar>
+		<view style="margin-top: 100px;" class="p14 wp100">
+			<GradesChart />
+			<view class="top_box flex jc-c" style="flex-direction: column;">
+				<view class="wp100 text-center" style="margin-top: -153rpx;">
+					<text>太棒了！正确率很高了！</text>
+					<view class="flex ai-c jc-c mt10">
+						<view class="text-center wp50">
+							<view>1/3</view>
+							<text>本次错题</text>
+						</view>
+						<view class="text-center wp50 flex jc-c ai-c" style="flex-direction: column;">
+							<u-icon name="file-text" size="28"></u-icon>
+							<text>继续做题</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="p14">
+			<view class="bc-fff p14" style="border-radius: 20rpx;">
+				<view class="flex ai-c jc-sb">
+					<view>
+						<text class="fs18 cor-000 fw600">累计练题</text>
+						<text class="fs14 cor-666 ml10">33题</text>
+					</view>
+					<text class="fs14 cor-666">未做题2311题</text>
+				</view>
+				<view class="mt10">
+					<u-line-progress :percentage="20" activeColor="#05C341" height="16"></u-line-progress>
+				</view>
+				<view class="p14 mt10 flex ai-c jc-sb" style="border-radius: 20rpx;background-color: rgb(253,249,238);">
+					<view>
+						<text class="fs16 cor-666">题目太多？试试</text>
+						<text class="fs16 cor-000 fw600">精简500题</text>
+					</view>
+					<view style="width: 220rpx;">
+											<button style="background-color:rgb(246,211,115);height: 80rpx;border-radius: 40rpx;width: 220rpx;color:rgb(102,65,0)">开始答题</button>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import GradesChart from "./components/GradesChart.vue"
+	export default {
+		components: {
+			GradesChart
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.top_box {
+		padding: 15px;
+		background-color: #fdfdfd;
+		border-radius: 20rpx;
+	}
+</style>

src/pages/questionBank/questionBank.vue

@@ -2,21 +2,40 @@
 	<view>
 		<u-navbar title="顺序答题" @rightClick="rightClick" :autoBack="true">
 		</u-navbar>
-		<Question />
+		<Question :tabsList="tabsList" />
 	</view>
 </template>
 
 <script>
-import Question from './components/Question.vue';
+	import {
+		mapState,
+		mapActions
+	} from 'pinia' //引入映射函数
+	import useQuestionStore from '@/jtools/store/question' //引入store
+	import Question from './components/Question.vue';
 	export default {
-		components: {Question},
+		components: {
+			Question
+		},
 		data() {
 			return {
-
+				tabsList:[{
+					label:"答题",
+					value:0
+				},{
+					label:"背题",
+					value:1
+				}]
 			}
 		},
+		onLoad() {
+			console.log(this.orderQuestionList);
+		},
+		computed: {
+			...mapState(useQuestionStore, ["orderQuestionList"]) //映射函数，取出tagslist
+		},
 		methods: {
-			rightClick(){
+			rightClick() {
 				console.log('返回');
 			}
 		}