From 7db9e68e77ebe8ff6962808a06157365b69c4fe2 Mon Sep 17 00:00:00 2001
From: qsh <>
Date: Sat, 26 Aug 2023 20:42:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9C=9F=E5=AE=9E=E8=80=83=E5=9C=BA=E7=A7=91?=
 =?UTF-8?q?=E7=9B=AE1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                          |  68 ++++---
 src/pages/index/components/Subject1.vue |   2 +-
 src/pages/index/trueTest.vue            | 257 ++++++++++++++++++++++++
 3 files changed, 295 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/index/trueTest.vue

diff --git a/src/pages.json b/src/pages.json
index 39c249a..417cfb7 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -111,34 +111,41 @@
         "enablePullDownRefresh": false
       }
     },
-		{
-		  "path": "pages/index/iconSkill",
-		  "style": {
-		    "navigationBarTitleText": "图标技巧",
-		    "enablePullDownRefresh": false
-		  }
-		},
-		{
-		  "path": "pages/questionBank/chapterExercise",
-		  "style": {
-		    "navigationBarTitleText": "章节练习",
-		    "enablePullDownRefresh": false
-		  }
-		},
-		{
-		  "path": "pages/index/testRoom",
-		  "style": {
-		    "navigationBarTitleText": "考场实况",
-		    "enablePullDownRefresh": false
-		  }
-		},
-		{
-			"path": "pages/index/paySuccess",
-			"style": {
-			  "navigationBarTitleText": "支付结果",
-			  "enablePullDownRefresh": false
-			}
-		}
+    {
+      "path": "pages/index/iconSkill",
+      "style": {
+        "navigationBarTitleText": "图标技巧",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/questionBank/chapterExercise",
+      "style": {
+        "navigationBarTitleText": "章节练习",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/testRoom",
+      "style": {
+        "navigationBarTitleText": "考场实况",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/index/paySuccess",
+      "style": {
+        "navigationBarTitleText": "支付结果",
+        "enablePullDownRefresh": false
+      }
+    }, {
+      "path": "pages/index/trueTest",
+      "style": {
+        "navigationBarTitleText": "真实考场模拟",
+        "enablePullDownRefresh": false
+      }
+
+    }
   ],
 
   "globalStyle": {
@@ -152,8 +159,7 @@
     "selectedColor": "#333333",
     "backgroundColor": "#FFFFFF",
     "color": "#999999",
-    "list": [
-      {
+    "list": [{
         "pagePath": "pages/index/index",
         "iconPath": "static/image/tabbar/tab-home.png",
         "selectedIconPath": "static/image/tabbar/tab-home-selected.png",
@@ -168,4 +174,4 @@
       }
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/index/components/Subject1.vue b/src/pages/index/components/Subject1.vue
index 61975e5..2c19265 100644
--- a/src/pages/index/components/Subject1.vue
+++ b/src/pages/index/components/Subject1.vue
@@ -131,7 +131,7 @@
 		methods: {
 			toTestRoom(){
 				uni.navigateTo({
-					url:"/pages/index/testRoom"
+					url:"/pages/index/trueTest"
 				})
 			},
 			toVip(){
diff --git a/src/pages/index/trueTest.vue b/src/pages/index/trueTest.vue
new file mode 100644
index 0000000..77232c1
--- /dev/null
+++ b/src/pages/index/trueTest.vue
@@ -0,0 +1,257 @@
+<template>
+  <view class="ml40 p10lr hp100 bc-f5" style="overflow-y: auto;">
+    <view class="flex" style="align-items: stretch;">
+      <view class="left hp100">
+        <view class="fl1 flex" style="align-items: stretch;">
+          <view class="info">
+            <view class="flex ai-c jc-c mt10 mr10 fs16" style="border: 1px solid #999;height: 32px;">
+              第01考台
+            </view>
+            <view class="mt10 p10tb" style="background-color: rgb(177, 222, 255);">
+              <view style="margin: 0 auto;width: 64px;">
+                <u-avatar :size="64" mp-avatar shape="circle"></u-avatar>
+              </view>
+            </view>
+            <view class="p10" style="background-color: rgb(235, 235, 235);">
+              <view class="flex ai-c">
+                <text class="fs12 cor-333">姓名</text>
+                <view class="fl1 info-box">
+                  {{ user.userName }}{{ user.userId }}
+                </view>
+              </view>
+              <view class="flex ai-c">
+                <text class="fs12 cor-333">类型</text>
+                <view class="fl1 info-box">
+                  小车
+                </view>
+              </view>
+              <view class="flex ai-c">
+                <text class="fs12 cor-333">科目</text>
+                <view class="fl1 info-box">
+                  科目一
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="fl1 question-box">
+            <view class="fs14 cor-000">
+              {{questionIndex}} {{question.question}}
+            </view>
+            <view v-if="question.type != 1" v-for="item in question.optionList" class="mt5 fs14 cor-000">
+              {{item}}
+            </view>
+          </view>
+        </view>
+        <view class="ans-box">
+          <view class="flex ai-c">
+            <view class="time">
+              <text class="mt7">45:00</text>
+            </view>
+            <view class="ml20 fs16 cor-333 fwb">
+              您的答案：
+            </view>
+          </view>
+          <view v-if="question.type==1" class="flex">
+            <button class="btn" :class="{ done: question.yourAnswer==1 }" @tap="handleAnswer(1)">√</button>
+            <button class="btn" :class="{ done: question.yourAnswer==2 }" @tap="handleAnswer(2)">×</button>
+          </view>
+          <view v-else class="flex">
+            <template v-for="(item,index) in question.optionList">
+              <button class="btn" :class="{ done: question.yourAnswer.includes(index+1) }" @tap="handleAnswer(index+1)">{{['A','B','C','D','E','F','G'][index]}}</button>
+            </template>
+          </view>
+        </view>
+      </view>
+      <view class="right" style="border: 1px solid #999;;">
+        <u-grid border col="10">
+          <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" style="box-sizing: border-box;">
+            <view class="q-item" :class="{ 'current-question': questionIndex==listIndex+1, done: listItem.yourAnswer }" @tap="questionIndex=listIndex+1">{{listIndex+1}}</view>
+          </u-grid-item>
+        </u-grid>
+      </view>
+    </view>
+    <view class="operate-box">
+      <view class="fl1">
+        <view class="fs16" style="height: 20px;line-height: 20px;color: rgb(232, 72, 75);">
+          操作提示：{{['','判断题','单选题','多选题'][question.type]}}
+        </view>
+        <view class="fs14 cor-333" style="height: 20px;line-height: 20px;">
+          本题是{{getDesc(question.type)}}
+        </view>
+      </view>
+      <view class="flex">
+        <button :disabled="questionIndex==1" class="btn" @tap="questionIndex--">上一题</button>
+        <button :disabled="questionIndex==list.length" class="btn" @tap="questionIndex++">下一题</button>
+        <button class="btn">交卷</button>
+      </view>
+    </view>
+    <view class="img-box">
+
+    </view>
+  </view>
+</template>
+
+<script>
+  import useUserStore from '@/jtools/store/user'
+  export default {
+    data() {
+      return {
+        question: {},
+        questionIndex: 1,
+        list: [],
+        mutiAns: []
+      }
+    },
+    computed: {
+      user() {
+        return useUserStore().userInfo
+      },
+      question() {
+        if(this.questionIndex!=0 && this.list.length) {
+          return this.list[this.questionIndex-1]
+        } else {
+          return {}
+        }
+      }
+    },
+    onShow() {
+      this.fz()
+      setTimeout(() => {
+        for (var i = 0; i < 100; i++) {
+          this.list.push({
+            type: i%3+1,
+            question: '这是题目这是题目内容这是题目内容这是题目内容内容这是题目这是题目内容这是题目内容这是题目内容内容',
+            optionList: ['A', 'B', 'C', 'D'],
+            yourAnswer:''
+          })
+        }
+      },1000)
+    },
+    methods: {
+      fz() {
+        wx.setPageOrientation({
+          orientation: 'landscape'
+        });
+      },
+      handleAnswer(index) {
+        // 如果是多选
+        let q = this.list[this.questionIndex-1]
+        if(q.type == 3) {
+          let arr = q.yourAnswer ? q.yourAnswer.split(',') : []
+          arr.includes(index+'') ? arr = arr.filter(it=>it!=(index+'')) : arr.push(index)
+          this.list[this.questionIndex-1].yourAnswer = arr.join(',')
+        } else {
+          this.list[this.questionIndex-1].yourAnswer = index+''
+        }
+      },
+      getDesc(type) {
+        let tt1 = ['','判断题，','单选题，','多选题，'][type]
+        let tt2 = ['','请判断对错！','请在备选答案中选择你认为正确的答案！','请在备选答案中选择多个你认为正确的答案！'][type]
+        return tt1 + tt2
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .info {
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      .info-box {
+        margin-left: 5px;
+        padding-left: 5px;
+        height: 28px;
+        line-height: 28px;
+        box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
+        font-size: 10px;
+        color: #333;
+      }
+    }
+    .question-box {
+     position: relative;
+     padding: 10px;
+     border-top: 1px solid #999;
+     border-left: 1px solid #999; 
+    }
+    .ans-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 44px;
+      border-top: 1px solid #999;
+      .time {
+        position: relative;
+        display: flex;
+        width: 90px;
+        height: 28px;
+        line-height: 16px;
+        justify-content: center;
+        font-size: 14px;
+        color: #333;
+        border: 1px solid #ccc;
+
+        &::before {
+          content: '剩余时间';
+          position: absolute;
+          left: 5px;
+          top: 0;
+          background-color: #f5f5f5;
+          font-size: 10px;
+          color: #333;
+          transform: translateY(-50%);
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 270px;
+
+    .q-item {
+      width: 28px;
+      height: 27px;
+      font-size: 10px;
+      line-height: 27px;
+      text-align: center;
+    }
+  }
+
+  .operate-box {
+    padding-left: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+    border-top: 2px solid rgb(43, 102, 167);
+    border-bottom: 2px solid rgb(43, 102, 167);
+    border-left: 1px solid #999;
+    border-right: 1px solid #999;
+  }
+
+  .btn {
+    margin-right: 10px;
+    height: 30px;
+    line-height: 30px;
+    background-color: rgb(244, 243, 239);
+    font-size: 14px;
+  }
+
+  .img-box {
+    height: 120px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #999;
+  }
+  .current-question{
+    background-color: #93F0E4;
+  }
+  .done {
+    background-color: #33FF66;
+  }
+</style>
\ No newline at end of file