初步完成答题游戏

web/src/views/gui/component/issue.vue

@@ -2,7 +2,11 @@
 <template>
   <div class="issue">
     <div class="main">
-      <div class="top el-icon-close" @click="$emit('close')"></div>
+      <div class="top">
+        <h2 v-if="flag === 'tow'">趣味问答</h2>
+        <h2 v-else>&nbsp;</h2>
+        <i class="el-icon-close" @click="$emit('close')"></i>
+      </div>
       <!-- 开始答题 -->
       <div class="begin" v-show="flag === 'one'">
         <div class="begin_left">
@@ -13,11 +17,54 @@
           <p>大理洱海科普教育中心趣味问答小游戏，</p>
           <p>您将随机抽取十道题进行作答，</p>
           <p>答对六题及以上为闯关成功！</p>
-          <div class="btnn" @click="flag = 'tow'">开始答题</div>
+          <div class="btnn" @click="beginTopic">开始答题</div>
         </div>
       </div>
       <!-- 答题页面 -->
-      <div class="topic" v-show="flag === 'tow'"></div>
+      <div class="topic" v-if="flag === 'tow'">
+        <p class="topicTxt">
+          {{ topicInd + 1 }}.{{ topic[topicInd].title }}---{{
+            topic[topicInd].correct
+          }}
+        </p>
+        <ul class="topic_con">
+          <li v-for="(item, index) in topic[topicInd].answer" :key="index">
+            <div class="case" @click="select(index, item.id)">
+              <!-- 选中了之后的显示 -->
+              <div v-show="caseInd === index"></div>
+            </div>
+            <span :class="{ active: caseInd === index }">{{
+              item.id + "、" + item.txt
+            }}</span>
+          </li>
+          <!-- 下面的按钮 -->
+          <div class="topic_btn" @click="btnOk">确 定</div>
+        </ul>
+        <!-- 答错之后的提示 -->
+        <div class="error" v-if="caseErr">
+          <p>对不起，您答错了</p>
+          <p>正确答案：</p>
+          <p>{{ caseErrTxt }}</p>
+          <div class="errBtn" @click="nextTi">下一题</div>
+        </div>
+      </div>
+      <!-- 答对通关 -->
+      <div class="topicDui" v-if="flag === 'three'">
+        <img class="tini" src="@/assets/img/win.png" alt="" />
+        <div>
+          <p>您的得分：{{ cunot + "0" }}</p>
+          <p>分享海报，传播洱海的美丽文化！</p>
+          <img src="../../../assets/images/project/hotspot_bg.jpg" alt="" />
+          <div class="btnn">保存海报</div>
+        </div>
+      </div>
+      <!-- 答错失败 -->
+      <div class="topicCuo" v-if="flag === 'four'">
+        <img src="@/assets/img/lose.png" alt="" />
+        <p>您的得分：{{ cunot + "0" }}</p>
+        <p>失败乃兵家常事，大侠请重头再来</p>
+        <div @click="beginTopic()">重新开始</div>
+      </div>
     </div>
   </div>
 </template>
@@ -34,6 +81,12 @@ export default {
       flag: "one",
       // 题目组
       topic: [],
+      topicInd: 0, //用来控制题目的索引
+      cunot: 0, //用来记录答对的题目个数
+      caseInd: null, //用来控制选择的样式
+      caseABC: null, //用来记录当前选择的答案，进行判断
+      caseErr: false, //答错了显示的弹窗
+      caseErrTxt: "", //答错了显示的正确答案
     };
   },
   //监听属性 类似于data概念
@@ -41,26 +94,92 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    //点击答错里面的下一题
+    nextTi() {
+      // 最后一题
+      if (this.topicInd === 9 && this.cunot >= 6) {
+        this.flag = "three";
+        this.topic.forEach((v) => {
+          let temp = "";
+          v.answer.forEach((p) => {
+            if (p.id === v.correct) temp = p.txt;
+          });
+          v.title += "---" + temp;
+        });
+      } else if (this.topicInd === 9 && this.cunot < 6) {
+        this.flag = "four";
+      }
+
+      this.caseInd = null;
+      this.caseErr = false;
+      if (this.topicInd < 10) this.topicInd++;
+    }, //选择题目
+    select(index, id) {
+      this.caseInd = index;
+      this.caseABC = id;
+    },
+    //点击确定
+    btnOk() {
+      if (this.caseInd === null) return this.$message.warning("未选择答案");
+      // 最后一题
+      if (this.topicInd === 9 && this.cunot >= 6) {
+        this.flag = "three";
+        this.topic.forEach((v) => {
+          let temp = "";
+          v.answer.forEach((p) => {
+            if (p.id === v.correct) temp = p.txt;
+          });
+          v.title += "---" + temp;
+        });
+      } else if (this.topicInd === 9 && this.cunot < 6) {
+        this.flag = "four";
+      }
+      if (this.topic[this.topicInd].correct === this.caseABC) {
+        // console.log('答对了');
+        this.caseInd = null;
+        if (this.topicInd < 10) this.topicInd++;
+        this.cunot++;
+      } else {
+        // console.log('答错了');
+        this.caseErr = true;
+        this.topic[this.topicInd].answer.forEach((v) => {
+          if (v.id === this.topic[this.topicInd].correct)
+            this.caseErrTxt = v.id + "、" + v.txt;
+        });
+      }
+    },
+    // 点击开始答题
+    beginTopic() {
+      this.caseInd = null;
+      this.cunot = 0;
+      this.topicInd = 0;
+      this.caseErr = false;
+      this.flag = "tow";
+      this.getTopic();
+    },
+    // 封装随机获取10道题目
+    getTopic() {
+      let arr = [];
+      for (let i = 0; i < 200; i++) {
+        //一个从0到100的数组
+        arr.push(i);
+      }
+      arr.sort(function () {
+        //随机打乱这个数组
+        return Math.random() - 0.5;
+      });
+      arr.length = 10; //改写长度
+      arr.forEach((v) => {
+        this.topic.push(questions[v]);
+      });
+      console.log(999, this.topic); //控制台会输出10个不同的数
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    let arr = [];
-    for (let i = 0; i < 200; i++) {
-      //一个从0到100的数组
-      arr.push(i);
-    }
-    arr.sort(function () {
-      //随机打乱这个数组
-      return Math.random() - 0.5;
-    });
-    arr.length = 10; //改写长度
-    arr.forEach((v) => {
-      this.topic.push(questions[v]);
-    });
-    console.log(999, this.topic); //控制台会输出10个不同的数
-  },
+  mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -90,12 +209,17 @@ export default {
     height: 700px;
     background: url("../../../assets/img/bg.png") no-repeat left bottom #b7cdd9;
     .top {
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       color: #165491;
-      position: absolute;
-      right: 20px;
-      top: 20px;
-      cursor: pointer;
-      font-size: 30px;
+      font-weight: 700;
+      font-size: 22px;
+      & > i {
+        cursor: pointer;
+        font-size: 30px;
+      }
     }
     .begin {
       margin: 100px auto 0;
@@ -144,6 +268,145 @@ export default {
         }
       }
     }
+    .topic {
+      position: relative;
+      padding: 30px 50px;
+      border-radius: 3px;
+      width: 100%;
+      height: 610px;
+      background-color: rgba(22, 84, 145, 0.5);
+      color: #fff;
+      .topicTxt {
+        font-size: 20px;
+        line-height: 30px;
+      }
+      .topic_con {
+        width: 90%;
+        margin: 0 auto;
+        li {
+          display: flex;
+          height: 80px;
+          align-items: center;
+          .case {
+            cursor: pointer;
+            width: 30px;
+            height: 30px;
+            border: 2px solid #fff;
+            margin-right: 30px;
+            border-radius: 50%;
+            & > div {
+              margin: 3px;
+              width: 20px;
+              height: 20px;
+              background-color: #50ffa2;
+              border-radius: 50%;
+            }
+          }
+          & > span {
+            font-size: 18px;
+          }
+          .active {
+            color: #50ffa2;
+          }
+        }
+        .topic_btn {
+          cursor: pointer;
+          margin: 10px auto 0;
+          width: 257px;
+          height: 75px;
+          background: url("../../../assets/img/btn.png");
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 24px;
+        }
+      }
+      .error {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.8);
+        p {
+          margin: 20px;
+          font-size: 24px;
+          text-align: center;
+        }
+        div {
+          cursor: pointer;
+          margin: 10px auto 0;
+          width: 257px;
+          height: 75px;
+          background: url("../../../assets/img/btn.png");
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 24px;
+        }
+      }
+    }
+    // 答题失败的页面
+    .topicCuo {
+      width: 100%;
+      text-align: center;
+      color: #fff;
+      & > img {
+        width: 300px;
+        height: 300px;
+      }
+      & > p {
+        text-align: center;
+        font-size: 20px;
+        margin: 15px 0;
+      }
+      & > div {
+        cursor: pointer;
+        margin: 80px auto 0;
+        width: 257px;
+        height: 75px;
+        background: url("../../../assets/img/btn.png");
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+      }
+    }
+    // 答题通过的页面
+    .topicDui {
+      color: #fff;
+      .tini {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+      }
+      & > div {
+        text-align: center;
+        & > p {
+          font-size: 22px;
+        }
+        & > img {
+          margin: 30px 0;
+          max-width: 600px;
+          max-height: 410px;
+        }
+        .btnn {
+          cursor: pointer;
+          margin: 0px auto 0;
+          width: 257px;
+          height: 75px;
+          background: url("../../../assets/img/btn.png");
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 24px;
+        }
+      }
+    }
   }
 }
 </style>