zc_saas_admin/src/components/bankInfo.vue

<template>
  <div id="bankInfo">
    <el-dialog
      :visible.sync="dialogCG"
      width="660px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">预览题目</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogCG = false"
          />
        </div>
      </div>
      <div>
        <el-form label-width="80px">
          <el-form-item label="题目类型">
            <span v-if="listData.type === 1">单选题</span>
            <span v-if="listData.type === 2">多选题</span>
            <span v-if="listData.type === 3">判断题</span>
            <span v-if="listData.type === 4">案例题</span>
            <span v-if="listData.type === 5">简答题</span>
          </el-form-item>
          <el-form-item label="题目标题">
            <div v-html="listData.content"></div>
          </el-form-item>
          <el-form-item v-if="listData.type === 4">
            <div v-for="(items, indexs) in listData.jsonStr" :key="indexs">
              <div>第{{ indexs + 1 }}题</div>
              <el-form-item label="题目类型">
                <span v-if="items.type === 1">单选题</span>
                <span v-if="items.type === 2">多选题</span>
                <span v-if="items.type === 3">判断题</span>
                <span v-if="items.type === 5">简答题</span>
              </el-form-item>
              <el-form-item label="题目标题">
                <div v-html="items.content"></div>
              </el-form-item>
              <el-form-item label="题目选项" v-if="items.type !== 3">
                <ul>
                  <li
                    v-for="(item, index) in items.optionsList"
                    :key="index"
                    class="dis_flex"
                  >
                    <span>{{ index + 1 }}：</span>
                    <span>{{ item.content }}</span>
                    <img
                      v-if="item.imgUrl"
                      style="width: 50px; height: 50px"
                      :src="$methodsTools.splitImgHost(item.imgUrl)"
                      alt=""
                    />
                  </li>
                </ul>
              </el-form-item>
              <el-form-item label="正确选项">
                <span v-if="items.type === 3">{{
                  items.answerQuestion == 1
                    ? "正确"
                    : items.answerQuestion == 0
                    ? "错误"
                    : ""
                }}</span>
                <span v-else>{{ items.answerQuestion }}</span>
              </el-form-item>
              <el-form-item label="答案解析">
                <div v-html="items.analysisContent"></div>
              </el-form-item>
            </div>
          </el-form-item>
          <div v-else>
            <el-form-item label="题目选项" v-if="listData.type !== 3">
              <ul>
                <li
                  v-for="(item, index) in listData.jsonStr"
                  :key="index"
                  class="dis_flex"
                >
                  <span>{{ index + 1 }}：</span>
                  <span>{{ item.content }}</span>
                  <img
                    v-if="item.imgUrl"
                    style="width: 50px; height: 50px"
                    :src="$methodsTools.splitImgHost(item.imgUrl)"
                    alt=""
                  />
                </li>
              </ul>
            </el-form-item>
            <el-form-item label="正确选项">
              <span v-if="listData.type === 3">{{
                listData.answerQuestion == 1
                  ? "正确"
                  : listData.answerQuestion == 0
                  ? "错误"
                  : ""
              }}</span>
              <span v-else>{{ listData.answerQuestion }}</span>
            </el-form-item>
          </div>
          <el-form-item label="答案解析">
            <div v-html="listData.analysisContent"></div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCG = false">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogCG: false,
      listData: {},
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.$on("childmethod", function (v) {
        this.getInfos(v);
      });
    });
  },
  methods: {
    getInfos(v) {
      this.$api
        .inquirebankexamquestionList({ examId: v.examId })
        .then((res) => {
          if (res.data.length) {
            res.data.map((item) => {
              item.jsonStr = JSON.parse(item.jsonStr);
            });
            this.listData = res.data[v.topicNum - 1];
            this.dialogCG = true;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>