jiangping
2024-05-27 2e6f381d09669635473faf5dd4a3f01b5797d97e
h5/pages/answer/answer.vue
@@ -1,16 +1,13 @@
<template>
   <view class="box">
      <view class="box_bgimage" :style="{backgroundImage: 'url(' + bg + ')'}">
         <text class="box_bgimage_a">{{title}}</text>
         <text class="box_bgimage_b">{{content}}</text>
         <text class="box_bgimage_a">{{ title }}</text>
         <text class="box_bgimage_b">{{ content }}</text>
      </view>
      <view class="box_list">
         <view class="box_list_answer" v-if="list && list.length > 0">
            <view class="box_list_answer_name">
               {{i + 1}}、{{list[i].title}}
            </view>
            <!--    判断   -->
            <template v-if="list[i].type === 0">
<!--             <template v-if="list[i].type === 0">
               <view class="box_list_answer_item" v-for="(item, index) in list[i].options" :key="index" @click="select(index)">
                  <image src="@/static/video_error@2x.png" v-if="success && problemIndex === index" />
                  <image src="@/static/video@2x.png" v-else-if="!String(problemIndex) || problemIndex !== index" />
@@ -19,20 +16,35 @@
                  <text v-else-if="!String(problemIndex) || problemIndex !== index">{{item.code}}</text>
                  <text style="color: rgba(2, 94, 239, 1)" v-else-if="problemIndex === index">{{item.code}}</text>
               </view>
            </template>
            </template> -->
            <!--    单选   -->
            <template v-else-if="list[i].type === 1">
               <view class="box_list_answer_item" v-for="(item, index) in list[i].options" :key="index" @click="select(index)">
                  <image src="@/static/video_error@2x.png" v-if="success && problemIndex === index" />
                  <image src="@/static/video@2x.png" v-else-if="!String(problemIndex) || problemIndex !== index" />
                  <image src="@/static/video_sel@2x.png" v-else-if="problemIndex === index" />
                  <text style="color: rgba(237, 69, 69, 1)" v-if="success && problemIndex === index">{{item.code}} {{item.value}}</text>
                  <text v-else-if="!String(problemIndex) || problemIndex !== index">{{item.code}} {{item.value}}</text>
                  <text style="color: rgba(2, 94, 239, 1)" v-else-if="problemIndex === index">{{item.code}} {{item.value}}</text>
            <view v-for="(item,index) in list"  :key="index" class="list_item">
               <template v-if="item.type == 1">
                  <view class="box_list_answer_name">
                  {{index + 1}}、{{item.title}}<text style="color:#ED4545;">*</text>
               </view>
            </template>
               <view class="box_list_answer_item" v-for="(line, lIndex) in item.options" :key="lIndex" @click="select(line, index)">
                  <image  src="@/static/video@2x.png" v-if="!item.selAnswer || item.selAnswer !== line.code" />
                  <image src="@/static/video_sel@2x.png" v-if="item.selAnswer && item.selAnswer == line.code && item.answer === item.selAnswer" />
                  <image src="@/static/video_error@2x.png" v-if="item.selAnswer && item.selAnswer == line.code && item.answer !== item.selAnswer" />
                  <text v-if="!item.selAnswer"><text class="mr24">{{line.code}}</text> {{line.value}}</text>
                  <text v-if="item.selAnswer && item.answer === item.selAnswer" style="color: rgba(2, 94, 239, 1)" ><text class="mr24" style="color: rgba(2, 94, 239, 1)">{{line.code}}</text> {{line.value}}</text>
                  <text v-if="item.selAnswer && item.answer !== item.selAnswer" style="color: rgba(237, 69, 69, 1)" ><text class="mr24" style="color: rgba(237, 69, 69, 1)">{{line.code}}</text> {{line.value}}</text>
               </view>
               <view class="box_list_answer_tips" v-if="item.selAnswer && item.answer !== item.selAnswer">
                  <image src="@/static/ic_wrong@2x.png" />
                  <text>回答错误</text>
               </view>
               <view class="box_list_answer_tips" v-if="item.selAnswer && item.answer === item.selAnswer">
                  <image src="@/static/meeting/icon/ic_choose_sel@2x.png" />
                  <text>回答正确</text>
               </view>
               </template>
            </view>
            <view class="empty"></view>
            <view class="box_list_answer_btn" @click="next()">提交</view>
            <!--    多选    -->
            <template v-else-if="list[i].type === 2">
<!--             <template v-else-if="list[i].type === 2">
               <view class="box_list_answer_item" v-for="(item, index) in list[i].options" :key="index"
                  @click="selectMultiple(item.code)">
                  <image src="@/static/checkbox_wrong@2x.png"
@@ -47,41 +59,54 @@
                  <text style="color: rgba(2, 94, 239, 1)"
                     v-else-if="multiple.toString().indexOf(item.code) !== -1">{{item.code}} {{item.value}}</text>
               </view>
            </template>
            <view class="box_list_answer_tips" v-if="success">
               <image src="@/static/ic_wrong@2x.png" />
               <text>回答错误</text>
            </view>
            <view class="box_list_answer_btn" @click="next()">下一题</view>
            </template> -->
         </view>
      </view>
   </view>
</template>
<script>
   import { getProblemsVO, getSystemDictData } from '@/api'
   export default {
      name: 'answer',
      data() {
         return {
            i: 0,
            problemIndex: null,
            multiple: null,
            success: false,
            list: [],
            bg: require("@/static/banner_dati.jpg"),
            title: '元气森林入厂安全知识考核',
            content: '请仔细阅读并选择对应的答案,答题正确方可继续'
            title: '',
            content: ''
         }
      },
      
      onLoad() {
         this.getProblems()
         this.getInfo()
      },
      methods: {
         getInfo() {
            // title
            getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'THEME'
            }).then(res => {
               if (res.code === 200) {
                  this.title = res.data.code
               }
            })
            // this.$u.api.getSystemDictData({
            getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'DESCRIPTION'
            }).then(res => {
               if (res.code === 200) {
                  this.content = res.data.code
               }
            })
         },
         getProblems() {
            this.$u.api.getProblemsVO({ useType: 1 })
            getProblemsVO({ useType: 1 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.forEach(item => {
@@ -93,9 +118,11 @@
                        if (item.type === 1 || item.type === 2) {
                           item.options = JSON.parse(item.options)
                        }
                        item.status = '0'
                        item.selAnswer = null
                     })
                     console.log('options', res.data);
                     this.list = res.data
                     console.log(this.list)
                  }
                  // res.param.problemsDOList.forEach(item => {
                  //    item.options = JSON.parse(item.options)
@@ -105,9 +132,13 @@
               })
         },
         // 单选选择中题目
         select(index) {
            console.log(index)
            this.problemIndex = index
         select(line, i) {
            this.list.forEach((item,index)=>{
               if(index === i){
                  item.selAnswer = line.code
               }
            })
            // this.problemIndex = index
         },
         sort(arr) {
            arr.sort(function(a, b) {
@@ -137,6 +168,10 @@
         },
         // 下一题
         next() {
            uni.navigateTo({
               url: `/pages/userinfo/userinfo?userAnswerId=${1}`
            })
            return
            if (this.list[this.i].type === 0 || this.list[this.i].type === 1) {
               if (!String(this.problemIndex)) return
               if (this.list[this.i].answer === this.list[this.i].options[this.problemIndex].code) {
@@ -216,6 +251,7 @@
         .box_list_answer {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            background: #FFFFFF;
            border-radius: 16rpx;
            padding: 30rpx;
@@ -233,6 +269,9 @@
               box-sizing: border-box;
               background: #F7F7F7;
               border-radius: 8rpx;
               display: flex;
               align-items: center;
               margin-bottom: 24rpx;
               image {
                  width: 28rpx;
                  height: 28rpx;
@@ -245,14 +284,14 @@
               }
            }
         }
         .list_item{
            margin-bottom: 24rpx;
         }
         .box_list_answer_item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;
            &:last-child {
               margin-bottom: 0 !important;
            }
            image {
               width: 36rpx;
               height: 36rpx;
@@ -268,11 +307,15 @@
            background: #CCCCCC !important;
            border: none !important;
         }
         .empty{
            height: 160rpx;
            width: 100%;
         }
         .box_list_answer_btn {
            position: absolute;
            bottom: 30rpx;
            left: 30rpx;
            width: calc(100% - 60rpx);
            position: fixed;
            bottom: 140rpx;
            left: 60rpx;
            width: 630rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;