Merge remote-tracking branch 'origin/wuhuyancao' into wuhuyancao

rk

2025-09-28 a8fb7ae2dbb61a94141ed5e73d3bb2632b7b84df

 h5/pages/answer/answer.vue

@@ -1,38 +1,215 @@
<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>
      </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">
               <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}}</text>
                  <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 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>
            </template>
            <!--    多选    -->
            <template v-else-if="list[i].type === 2">
  <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>
    </view>
    <view class="box_list">
      <view class="box_list_answer" v-if="list && list.length > 0">
        <view v-if="status == 1 || status == 2" class="score_static">
          <text class="name">本次得分：</text>
          <text class="num" :class="{ warry: status == 2 }">{{ score }}分</text>
        </view>
        <!--    单选/判断   -->
        <view v-for="(item, index) in list" :key="index" class="list_item">
          <view class="box_list_answer_name">
            <text>{{ index + 1 }}、{{ item.title }}</text>
            <text v-if="item.score"> ({{ item.score }}分)</text>
            <text style="color: #ed4545">*</text>
          </view>
          <template v-if="item.type == 1 || item.type == 0">
            <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.answer === item.selAnswer &&
                    item.selAnswer == line.code) ||
                  (item.selAnswer == line.code && status != '2') ||
                  (item.answer === item.selAnswer &&
                    item.selAnswer == line.code)
                "
              />
              <image
                src="@/static/video_error@2x.png"
                v-if="
                  item.selAnswer &&
                  item.selAnswer == line.code &&
                  item.answer !== item.selAnswer &&
                  status == '2'
                "
              />
              <text v-if="!item.selAnswer || item.selAnswer !== line.code"
                ><text class="mr24">{{ line.code }}</text>
                {{ line.value }}</text
              >
              <text
                v-if="
                  (item.selAnswer &&
                    item.answer === item.selAnswer &&
                    item.selAnswer == line.code) ||
                  (item.selAnswer == line.code && status != '2') ||
                  (item.answer === item.selAnswer &&
                    item.selAnswer == line.code)
                "
                style="color: rgba(77, 153, 168, 1)"
                ><text class="mr24" style="color: rgba(77, 153, 168, 1)">{{
                  line.code
                }}</text>
                {{ line.value }}</text
              >
              <text
                v-if="
                  item.selAnswer &&
                  item.selAnswer == line.code &&
                  item.answer !== item.selAnswer &&
                  status == '2'
                "
                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"
              style="margin-bottom: 0rpx"
              v-if="
                item.selAnswer &&
                item.answer !== item.selAnswer &&
                status != '0'
              "
            >
              <view class="line">
                <image src="@/static/ic_wrong@2x.png" />
                <text>回答错误</text>
              </view>
              <view class="line">正确答案：{{ item.answer }}</view>
            </view>
            <view
              class="box_list_answer_tips"
              v-if="
                item.selAnswer &&
                item.answer === item.selAnswer &&
                status != '0'
              "
            >
              <view class="line">
                <image src="@/static/ic_success@2.png" />
                <text class="success">回答正确</text>
              </view>
            </view>
          </template>
          <template v-if="item.type == 2">
            <view
              class="box_list_answer_item"
              v-for="(line, lIndex) in item.options"
              :key="lIndex"
              @click="changeBox(index, lIndex)"
            >
              <image src="@/static/checkbox@2x.png" v-if="!line.checked" />
              <image
                src="@/static/checkbo1x_sel@2x.png"
                v-if="
                  (line.checked && status != '2') ||
                  (item.selAnswer === item.answer && line.checked)
                "
              />
              <image
                src="@/static/checkbox_wrong@2x.png"
                v-if="
                  line.checked &&
                  item.selAnswer !== item.answer &&
                  status == '2'
                "
              />
              <text v-if="!line.checked"
                ><text class="mr24">{{ line.code }}</text>
                {{ line.value }}</text
              >
              <text
                v-if="
                  (line.checked && status != '2') ||
                  (item.selAnswer === item.answer && line.checked)
                "
                style="color: rgba(77, 153, 168, 1)"
                ><text class="mr24" style="color: rgba(77, 153, 168, 1)">{{
                  line.code
                }}</text>
                {{ line.value }}</text
              >
              <text
                v-if="
                  line.checked &&
                  item.selAnswer !== item.answer &&
                  status == '2'
                "
                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 &&
                status != '0'
              "
            >
              <view class="line">
                <image src="@/static/ic_wrong@2x.png" />
                <text>回答错误</text>
              </view>
              <view class="line">正确答案：{{ item.answer }}</view>
            </view>
            <view
              class="box_list_answer_tips"
              v-if="
                item.selAnswer &&
                item.answer === item.selAnswer &&
                status != '0'
              "
            >
              <view class="line">
                <image src="@/static/ic_success@2.png" />
                <text class="success">回答正确</text>
              </view>
            </view>
          </template>
        </view>
        <view class="empty"></view>
        <view
          v-if="status == '0'"
          class="box_list_answer_btn"
          :class="{ disable: !answerIng }"
          @click="onSubmit()"
          >提交</view
        >
        <view v-if="status == '1'" class="box_list_answer_btn" @click="next()"
          >恭喜你答题成功，去申请</view
        >
        <view
          v-if="status == '2'"
          style="background-color: #db534c"
          class="box_list_answer_btn"
          @click="handleAgain"
          >答题失败，再来一次</view
        >
        <!--    多选    -->
        <!--             <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"
@@ -44,245 +221,346 @@
                  <text style="color: rgba(237, 69, 69, 1)"
                     v-if="success && multiple.toString().indexOf(item.code) !== -1">{{item.code}} {{item.value}}</text>
                  <text v-else-if="!multiple || multiple.toString().indexOf(item.code) === -1">{{item.code}} {{item.value}}</text>
                  <text style="color: rgba(2, 94, 239, 1)"
                  <text style="color: rgba(77, 153, 168, 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>
         </view>
      </view>
   </view>
            </template> -->
      </view>
    </view>
  </view>
</template>

<script>
   export default {
      name: 'answer',
import { getProblemsVO, getSystemDictData, saveProblemsVO } 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: '请仔细阅读并选择对应的答案，答题正确方可继续'
         }
      },
		
      onLoad() {
         this.getProblems()
      },
  data() {
    return {
      list: [],
      bg: require("@/static/banner_dati.png"),
      title: '',
      content: '',

      methods: {
         getProblems() {
            this.$u.api.getProblemsVO({ useType: 1 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.forEach(item => {
                        // 判断
                        if (item.type === 0) {
                           item.options = [{ code: '正确', value: '正确' },{ code: '错误', value: '错误' }]
                        }
                        // 单选/多选
                        if (item.type === 1 || item.type === 2) {
                           item.options = JSON.parse(item.options)
                        }
                     })
                     this.list = res.data
                     console.log(this.list)
                  }
                  // res.param.problemsDOList.forEach(item => {
                  //    item.options = JSON.parse(item.options)
                  // })
                  // this.list = res.param.problemsDOList
                  // console.log(this.list)
               })
         },
         // 单选选择中题目
         select(index) {
            console.log(index)
            this.problemIndex = index
         },
         sort(arr) {
            arr.sort(function(a, b) {
               return a.localeCompare(b)
            })
         },
         // 多选
         selectMultiple(key) {
            if (!this.multiple) {
               this.multiple = key
               return
            }
            let arr = this.multiple.split(',')
            if (this.multiple.indexOf(key) !== -1) {
               arr.forEach((item, index) => {
                  if (key === item) {
                     arr.splice(index, 1)
                  }
               })
               this.sort(arr)
               this.multiple = arr.join(',')
            } else {
               arr.push(key)
               this.sort(arr)
               this.multiple = arr.join(',')
            }
         },
         // 下一题
         next() {
            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) {
                  this.success = false
                  this.problemIndex = null
                  this.i += 1
               } else {
                  this.success = true
               }
            } else {
               if (!this.multiple) return
               if (this.list[this.i].answer === this.multiple) {
                  this.success = false
                  this.multiple = null
                  this.i += 1
               } else {
                  this.success = true
               }
            }
            if (this.i + 1 > this.list.length) {
               let arr = []
               this.list.forEach(item => {
                  arr.push({ id: item.id, answer: item.answer })
               })
               this.$u.api.finishAnswer({
                  content: JSON.stringify(arr),
                  openId: this.$store.state.openId,
                  useType: 1
               }).then(res => {
                  if (res.code === 200) {
                     uni.navigateTo({
                        url: `/pages/userinfo/userinfo?userAnswerId=${res.data}`
                     })
                  }
               })
            }
         }
      }
   }
      status: '0',
      score: 0
    }
  },
  computed: {
    answerIng() {
      let count = 0
      this.list.forEach(item => {
        if (item.selAnswer || item.selAnswer == 0) {
          count++
        }
      })
      return count === this.list.length
    }
  },
  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() {
      getProblemsVO({ useType: 1 })
        .then(res => {
          if (res.code === 200) {
            res.data.forEach(item => {
              // 判断
              if (item.type === 0) {
                item.options = [{ code: '正确' }, { code: '错误' }]
              }
              // 单选/多选
              if (item.type === 1 || item.type === 2) {
                item.options = JSON.parse(item.options)
              }
              if (item.type === 2) {
                item.options.forEach(i => {
                  i.checked = false
                })
              }
              item.status = '0'
              item.selAnswer = null
            })
            this.list = res.data
          }
          // res.param.problemsDOList.forEach(item => {
          //    item.options = JSON.parse(item.options)
          // })
          // this.list = res.param.problemsDOList
          // console.log(this.list)
        })
    },
    // 单选选择中题目
    select(line, i) {
      if (this.status != '0') return
      this.list.forEach((item, index) => {
        if (index === i) {
          item.selAnswer = line.code
        }
      })
      // this.problemIndex = index
    },
    changeBox(index, jeck) {
      if (this.status != '0') return
      this.list.forEach((item, i) => {
        if (index === i) {
          item.options.forEach((item2, j) => {
            if (j === jeck) {
              item2.checked = !item2.checked
            }
          })
          item.selAnswer = item.options.filter(a => a.checked).map(b => b.code).sort().join(',')
        }
      })
    },
    sort(arr) {
      arr.sort(function (a, b) {
        return a.localeCompare(b)
      })
    },
    // 多选
    selectMultiple(key) {
      if (!this.multiple) {
        this.multiple = key
        return
      }
      let arr = this.multiple.split(',')
      if (this.multiple.indexOf(key) !== -1) {
        arr.forEach((item, index) => {
          if (key === item) {
            arr.splice(index, 1)
          }
        })
        this.sort(arr)
        this.multiple = arr.join(',')
      } else {
        arr.push(key)
        this.sort(arr)
        this.multiple = arr.join(',')
      }
    },
    // 下一题
    onSubmit() {
      if (!this.answerIng) return
      const { list } = this
      // 验证所有题目都有选项
      let count = 0
      list.forEach(item => {
        if (!item.selAnswer) {
          count++
        }
      })
      if (count > 0) {
        return uni.showToast({
          title: '请先完成所有答题在提交',
          icon: 'none'
        })
      }
      // 判断对错
      let flag = 0
      list.forEach(item => {
        if (item.selAnswer !== item.answer) {
          flag++
        } else {
          this.score += item.score
        }
      })
      if (flag > 0) {
        this.status = '2'
        return uni.showToast({
          title: '答题失败，再来一次',
          icon: 'none'
        })
      } else {
        this.status = '1'
      }
    },
    handleAgain() {
      this.status = '0'
      this.score = 0
      this.getProblems()
    },
    next() {
      saveProblemsVO({
        openId: this.$store.state.openId,
        useType: '1',
        content: '',
            score: this.score
      }).then(res => {
        this.score = 0
        uni.navigateTo({
          url: `/pages/appointment/appointment?answerId=${res.data}`
        })
      })

    }
  }
}
</script>

<style lang="scss" scoped>
   .box {
      width: 100%;
      height: 100vh;
      background: #025EEF;
      .box_bgimage {
         width: 100%;
         padding: 0 40rpx;
         box-sizing: border-box;
         height: 223rpx;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
         background-repeat: no-repeat;
         background-size: cover;
         .box_bgimage_a {
            font-size: 54rpx;
            font-weight: bold;
            color: #FFFFFF;
            text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.19);
         }
         .box_bgimage_b {
            font-size: 26rpx;
            font-weight: 400;
            color: #FFFFFF;
            text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.24);
            margin-top: 18rpx;
         }
      }
      .box_list {
         width: 100%;
         height: calc(100vh - 253rpx);
         padding: 0 30rpx 30rpx 30rpx;
         box-sizing: border-box;
         .box_list_answer {
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            border-radius: 16rpx;
            padding: 30rpx;
            box-sizing: border-box;
            position: relative;
            .box_list_answer_name {
               font-size: 30rpx;
               font-weight: 400;
               color: #222222;
               margin-bottom: 32rpx;
            }
            .box_list_answer_tips {
               width: 100%;
               padding: 22rpx 30rpx;
               box-sizing: border-box;
               background: #F7F7F7;
               border-radius: 8rpx;
               image {
                  width: 28rpx;
                  height: 28rpx;
               }
               text {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #E42D2D;
                  margin-left: 16rpx;
               }
            }
         }
         .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;
               margin-right: 20rpx;
            }
            text {
               font-size: 28rpx;
               font-weight: 400;
               color: #333333;
            }
         }
         .des {
            background: #CCCCCC !important;
            border: none !important;
         }
         .box_list_answer_btn {
            position: absolute;
            bottom: 30rpx;
            left: 30rpx;
            width: calc(100% - 60rpx);
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: #025EEF;
            box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(2, 94, 239, 0.3);
            border-radius: 44rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: #FFFFFF;
         }
      }
   }
.box {
  width: 100%;
  height: 100vh;
  background: $uni-color-primary;
  .box_bgimage {
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
    height: 223rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    .box_bgimage_a {
      font-size: 54rpx;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.19);
    }
    .box_bgimage_b {
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
      text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.24);
      margin-top: 18rpx;
    }
  }
  .box_list {
    width: 100%;
    height: calc(100vh - 253rpx);
    padding: 0 30rpx 30rpx 30rpx;
    box-sizing: border-box;
    .box_list_answer {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 30rpx;
      box-sizing: border-box;
      position: relative;
      .box_list_answer_name {
        font-size: 30rpx;
        font-weight: 400;
        color: #222222;
        margin-bottom: 32rpx;
      }
      .box_list_answer_tips {
        width: 100%;
        padding: 22rpx 30rpx;
        box-sizing: border-box;
        background: #f7f7f7;
        border-radius: 8rpx;
        margin-bottom: 24rpx;
        .line {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 20rpx;
          &:nth-last-child(1){
            margin-bottom: 0;
          }
        }
        image {
          width: 28rpx;
          height: 28rpx;
        }
        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #e42d2d;
          margin-left: 16rpx;
        }
        .success {
          color: $uni-color-primary;
        }
      }
    }
    .score_static {
      display: flex;
      font-size: 32rpx;
      margin-bottom: 40rpx;
      .name {
        font-weight: 600;
      }
      .num {
        color: $uni-color-primary;
      }
      .warry {
        color: #ed4545;
      }
    }
    .list_item {
      margin-bottom: 46rpx;
    }
    .box_list_answer_item {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }
      text {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
      }
    }
    .des {
      background: #cccccc !important;
      border: none !important;
    }
    .empty {
      height: 160rpx;
      width: 100%;
    }
    .box_list_answer_btn {
      position: fixed;
      bottom: 120rpx;
      left: 60rpx;
      width: 630rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: $uni-color-primary;
      box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(77, 153, 168, 0.3);
      border-radius: 44rpx;
      font-size: 30rpx;
      color: #ffffff;
    }
    .disable {
      background-color: #cccccc;
    }
  }
}
</style>