答题

app.json

@@ -1,14 +1,18 @@
 {
   "pages": [
     "pages/index/index",
+    "pages/subject/subject",
     "pages/apply/apply",
+    "pages/online/online",
+    
+    
     
     "pages/mine/mine",
     "pages/classHour/classHour",
     "pages/onlinePost/onlinePost",
     "pages/web/web",
     "pages/user/user",
-    "pages/online/online",
+   
     "pages/clocklist/clocklist",
     "pages/plan/plan",
     "pages/pay/pay",
@@ -18,7 +22,7 @@
     "pages/upload/upload",
     "pages/download/download",
     "pages/article/article",
-    "pages/subject/subject",
+    
     "pages/myPapers/myPapers",
     "pages/message/message",
     "pages/video/video",

pages/clocklist/clocklist.wxml

@@ -1,5 +1,5 @@
 <view wx:for="{{list}}">
-  <image bindtap="preview" data-url='{{item.img}}' mode="widthFix" src="{{item.img}}"></image>
+  <image bindtap="preview" mode="aspectFill" data-url='{{item.img}}'  src="{{item.img}}"></image>
   <text>打卡时间：{{item.ctime}}</text>
 </view>
 

pages/clocklist/clocklist.wxss

@@ -4,6 +4,7 @@ view{
 }
 image{
   width: 100%;
+  height: 300rpx;
   border-radius: 10rpx;
 }
 text{

pages/online/online.wxml

@@ -28,7 +28,7 @@
       </view>
     </picker>
   </view> -->
-    <navigator  class="test"  wx:for="{{papers}}" wx:key="*this" url="../subject/subject?id={{item.id}}">
+    <navigator  class="test"  wx:for="{{papers}}" wx:key="*this" url="../subject/subject?id={{item.id}}&status={{item.status}}">
         <view class="title">{{item.title}}</view>
         <text>{{item.class_hour}}学时/{{item.full_mark}}分/{{item.time_limit}}分钟</text>
         <view class="score" wx:if='{{item.status == 1}}'>

pages/subject/subject.js

@@ -10,13 +10,21 @@ Page({
     data:{},
     idx:1,
     ans:[],
-    id:''
+    id:'',
+    show:0,
+    flag:[
+      {name:'正确',value:'对'},
+      {name:'错误',value:'错'}
+    ],
+    rePost:0
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    // options.id=65
+    // options.status=1
       wx.request({
         url: host+'/api/wx/paper/info',
         data: { id: options.id},
@@ -24,8 +32,10 @@ Page({
         success:res=>{
           this.setData({
             data:res.data.data,
-            id:options.id
+            id:options.id,
+            status:options.status
           })
+          if(options.status == 1) return
           this.countDown(res.data.data.time_limit)
         }
       })
@@ -47,9 +57,27 @@ Page({
         })
     },1000)
   },
+  openAns(){
+    this.setData({
+      show:1
+    })
+  },
+  closeAns(){
+    this.setData({
+      show:0
+    })
+  },
+  //重做
+  reDo(){
+    this.setData({
+      status:0,
+      rePost:1
+    })
+  },
   answer:function(e){
     let id = e.target.dataset.id, value = e.detail.value
     let ans = this.data.ans
+    let data=this.data.data
     let old=ans.filter(item=>item.id == id)
     if (old.length>0){
       for (let i = 0; i < ans.length; i++) {
@@ -63,24 +91,40 @@ Page({
         answer:value
       })
     }
+    data.questions.forEach(item=>{
+      if(id == item.id){
+        item.post_answer=value
+      }
+    })
     this.setData({
-      ans:ans
+      ans:ans,
+      data:data
     })  
   },
+  // 答题卡题目跳转
+  skip(e){
+    this.setData({
+      idx:e.target.dataset.id+1,
+      show:0
+    })
+  },
   next:function(){
     const idx=this.data.idx+1
     const cur = this.data.idx -1
-    if (!this.data.ans[cur].answer){
-      wx.showToast({
-        title: '请选择答案',
-        icon: 'none',
-        duration: 2000
-      })
-    }else{
-      this.setData({
-        idx:idx
-      })
-    }
+    this.setData({
+      idx:idx
+    })
+    // if (!this.data.ans[cur].answer){
+    //   wx.showToast({
+    //     title: '请选择答案',
+    //     icon: 'none',
+    //     duration: 2000
+    //   })
+    // }else{
+    //   this.setData({
+    //     idx:idx
+    //   })
+    // }
   },
   prev: function () {
     const idx = this.data.idx - 1
@@ -89,14 +133,28 @@ Page({
     })
   },
   post:function(){
-    var _this=this
+    var _this=this,txt='您确认要交卷吗？'
+    if(this.data.ans.length < this.data.data.questions.length){
+      if(this.data.data.paper_type == 'exam'){
+        wx.showToast({
+          title: '您还有题目没有作答,请完成后再交卷！',
+          icon:'none'
+        })
+        return
+      }
+      txt='您还有题目没有作答，确认要交卷吗？'
+    }
+    let url=host + '/api/wx/postpaper'
+    if(this.data.rePost){
+      url=host + '/api/wx/paper/retry'
+    }
     wx.showModal({
       title: '交卷确认',
-      content: '您确认要交卷吗？',   
+      content: txt,   
       success(res) {
         if (res.confirm) {
           wx.request({
-            url: host + '/api/wx/postpaper',
+            url: url,
             data: {
               paper_id: _this.data.id,
               questions: _this.data.ans

pages/subject/subject.wxml

@@ -1,29 +1,91 @@
-<view class="top">
-  满分{{data.full_mark}}分/{{data.time_limit}}分钟
-  <text bindtap="post">交卷</text>
-  <view class="count">倒计时 {{time}}</view>
+<wxs module="util" src="../../utils/pub.wxs"></wxs>
+<view class="top" wx:if="{{status != 1}}"> 
+  <text bindtap="openAns">答题卡</text>
+  总题数：{{idx}}/{{data.questions.length}}
+   <view>{{time}}</view>
+  
+</view>
+<view class="top" wx:else>
+  <text bindtap="reDo">重做试卷</text>
+  总题数 <view>{{idx}}/{{data.questions.length}}</view>
 </view>
 <!-- 判断 -->
 <view class="content" wx:for="{{data.questions}}"  hidden="{{idx != index+1}}" wx:key="idx">
-    <view class="num">{{index+1}}、{{item.title}}
-    <image wx:if="{{item.type == 1}}" src="../../images/danx.svg" mode="widthFix"></image>
-    <image wx:if="{{item.type == 2}}" src="../../images/duox.svg" mode="widthFix"></image>
-    <image wx:if="{{item.type == 3}}" src="../../images/pd.svg" mode="widthFix"></image>
+    <view class="num">{{index+1}}、
+      <view> 
+        <image wx:if="{{item.qtype == 1}}" src="../../images/danx.svg" mode="widthFix"></image>
+        <image wx:if="{{item.qtype == 2}}" src="../../images/duox.svg" mode="widthFix"></image>
+        <image wx:if="{{item.qtype == 3}}" src="../../images/pd.svg" mode="widthFix"></image>
+      {{item.title}}
+      </view>
     </view>
     <!-- <view class="ques">  {{item.title}}  </view> -->
-    <view class="ans">
-        <checkbox-group wx:if="{{item.type == 2}}" bindchange='answer' data-id='{{item.id}}'>
+    <view class="ans" wx:if="{{status}}">
+      <view class="option"  wx:for="{{item.options}}" wx:for-item="opt" wx:key="*this" wx:if='{{item.qtype == 1}}'>
+            <view wx:if='{{opt[0] == item.answer}}' class="correct">
+              {{opt}}
+            </view>
+            <view wx:elif='{{opt[0] == item.post_answer && !item.correct}}' class="error">
+              {{opt}}
+            </view>
+            <view wx:else>
+              {{opt}}
+            </view>  
+      </view>
+      <view class="option"  wx:for="{{item.options}}" wx:for-item="opt" wx:key="*this" wx:if='{{item.qtype == 2}}'>
+            <view wx:if='{{util.includes(item.post_answer, opt[0]) && item.correct}}' class="correct">
+              {{opt}} 
+            </view>
+            <view wx:elif='{{util.includes(item.post_answer, opt[0]) && !item.correct}}' class="error">
+              {{opt}}
+            </view>
+            <view wx:else>
+              {{opt}}
+            </view>  
+      </view>
+      <view class="option" wx:if='{{item.qtype == 3}}'  wx:for="{{flag}}" wx:for-item="opt">
+        <view wx:if='{{opt.value == item.answer}}' class="correct">{{opt.name}}</view>
+        <view wx:elif='{{opt.value == item.post_answer && !item.correct}}' class="error">{{opt.name}}</view>
+        <view wx:else>{{opt.name}}</view>
+      </view>
+      <view>
+          <view  style="color:#000;margin-bottom: 15rpx;"><text style="color: #666;">正确答案：</text>{{item.answer}}   
+          <text style="padding: 0 10px;"></text>
+          <text style="color: #666;">您的答案：</text>{{item.post_answer?item.post_answer:''}}
+          </view>
+          <view style="color:#666">答案解析：</view>
+          <view class="analysis">{{item.analysis}}</view>
+      </view>
+    </view>
+
+    <view class="ans" wx:if="{{!status}}">
+    
+      <radio-group class="option"  wx:if="{{item.qtype == 3}}" bindchange='answer' data-id='{{item.id}}'>
+              <view><radio color="#358BFF"   value="对">正确</radio></view>
+              <view><radio color="#358BFF"   value="错">错误</radio></view>
+        </radio-group>
+        <checkbox-group  class="option" wx:elif="{{item.qtype == 2}}" bindchange='answer' data-id='{{item.id}}'>
             <view wx:for="{{item.options}}" wx:for-item="opt" wx:key="*this">
             <checkbox color="#358BFF" value="{{opt[0]}}">{{opt}}</checkbox></view>
         </checkbox-group>
         <radio-group wx:else bindchange='answer' data-id='{{item.id}}'>
             <view wx:for="{{item.options}}" wx:for-item="opt" wx:key="*this">
-            <radio color="#358BFF" value="{{opt[0]}}">{{opt}}</radio></view>
-        </radio-group>
+              <radio color="#358BFF"  value="{{opt[0]}}">{{opt}}</radio>
+            </view>
+        </radio-group> 
     </view>
+
 </view> 
 
 <view class="btn">
     <text class="{{idx<=1?'hide':''}}" bindtap="prev">上一题</text>
     <text class="{{idx>=data.questions.length?'hide':''}}" bindtap="next">下一题</text>
+    <view bindtap="post" wx:if='{{status != 1}}'>交卷</view>
+</view>
+
+<view class="ans_bg" wx:if='{{show}}'>
+  <view class="ans_card">
+    <view>答题卡  <image bindtap="closeAns" class="close" mode="widthFix" src="../../images/back.png"></image></view>
+    <text wx:for="{{data.questions}}" class="{{item.post_answer ? 'act':''}}" bindtap="skip" data-id='{{index}}'>{{index+1}}</text>
+  </view>
 </view>

pages/subject/subject.wxss

@@ -1,24 +1,35 @@
 /* pages/subject/subject.wxss */
 .top{
   padding: 12px;
+  background-color: #D8EFFF;
+  color: #0091FF;
+}
+.top view{
+  color: #0091FF;
+  /* font-size: 13px; */
+  /* display: inline-block; */
+  float: right;
+  margin-right: 10px;
 }
 .top text{
   position: relative;
-  width:60px;
+  /* width:60px; */
   height:28px;
-  border-radius:16px;
-  border:1px solid rgba(153,153,153,1);
+  padding: 0 10px;
+  border-radius:8px;
+  background-color: #0091FF;
+  color: #fff;
   text-align: center;
   line-height: 28px;
   float: right;
-  position: relative;
+  font-size: 12px;
   top: -3px;
 }
 .count{
   top:13px;
   position: absolute;
   /* top: 55px; */
-  right: 85px;
+  right: 15px;
   color: #358BFF;
   text-align: right;
 }
@@ -28,6 +39,10 @@
 }
 .num{
   margin: 12px 0;
+  color: #000;
+  font-weight: 600;
+  line-height: 50rpx;
+  display: flex;
 }
 .num image{
   width: 38px;
@@ -37,11 +52,23 @@
 .ques{
   margin-bottom: 120rpx;
 }
-.ans view{
+.ans .option view{
   margin-bottom: 24px;
-  padding-left: 10px;
+  border: 1px solid #D8D8D8;
+  padding: 10px;
+  border-radius: 4px;
+}
+.ans .option .correct{
+  border-color: #36D488;
+  color: #36D488;
+}
+.ans .option .error{
+  border-color: #FF6868;
+  color: #FF6868;
+}
+.ans radio,.ans checkbox{
+  width: 100%;
 }
-
 .btn{
   position: fixed;
   width: 100%;
@@ -49,18 +76,96 @@
   z-index: 9;
   bottom: 80rpx;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  padding: 0 24px;
+  padding: 0 50px;
 }
 .btn text{
-  width:100px;
+  width:45%;
   height:40px;
-  background:rgba(212,230,255,1);
+  border: 1px solid #0091FF;
+  color: #0091FF;
+  /* background:rgba(212,230,255,1); */
   border-radius:31px;
-  display: block;
+  display: inline-block;
   text-align: center;
   line-height: 40px;
+  /* margin: 0 20px; */
+  font-weight: 500;
 }
 .btn .hide{
-  visibility: hidden;
+   /* background-color: #eee; */
+   border-color: #eee;
+   color: #eee;
+}
+.btn view{
+  width: 100%;
+  background-color: #DAEFFF;
+  color: #0091FF;
+  height: 84rpx;
+  border-radius: 44rpx;
+  text-align: center;
+  line-height: 84rpx;
+  font-size: 30rpx;
+  margin-top: 20rpx;
+}
+.analysis{
+  background-color: #FCF4DD;
+  padding: 10px;
+  border-radius: 4px;
+  margin-top: 10px;
+  font-size: 13px;
+  line-height: 23px;
+}
+
+.ans_bg{
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: rgba(0,0,0,.5);
+  z-index: 9999;
+}
+.ans_card{
+  width: 93%;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 10px;
+  margin:  auto;
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  overflow: auto;
+  max-height: 90%;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.ans_card view{
+  padding: 10px 0;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #d9d9d9;
+  font-weight: 600;
+  width: 100%;
+}
+.ans_card text{
+  display: inline-block;
+  width: 55rpx;
+  height: 55rpx;
+  border-radius: 50%;
+  border: 1px solid #d9d9d9;
+  text-align: center;
+  line-height: 55rpx;
+  margin:8rpx;
+}
+.ans_card .act{
+  background-color: #22CC62;
+  border-color: #22CC62;
+  color: #fff;
+}
+.close{
+  width: 20px;
+  float: right;
 }

utils/pub.wxs

@@ -0,0 +1,4 @@
+function includes(arr, value) {
+  return arr.indexOf(value) >= 0;
+}
+module.exports = {includes: includes};