answer

liukangdong

2024-05-23 e458bb3f97990a1dc8d811df18fe2a289a341619

 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">访客问卷小调研</text>
         <text class="box_bgimage_b">答题分值需要达到30分才能申请访问哦～</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,29 @@
                  <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">
               <view class="box_list_answer_name">
                  {{index + 1}}、{{item.title}}
               </view>
            </template>
               <view class="box_list_answer_item" v-for="(line, lIndex) in item.options" :key="lIndex" @click="select(index)">
                  <image src="@/static/video_error@2x.png"  />
                  <image src="@/static/video@2x.png"  />	
                  <image src="@/static/video_sel@2x.png"  />
                  <text style="color: rgba(237, 69, 69, 1)" >{{line.code}} {{line.value}}</text>
                  <text >{{line.code}} {{line.value}}</text>
                  <text style="color: rgba(2, 94, 239, 1)" >{{line.code}} {{line.value}}</text>
               </view>
               <view class="box_list_answer_tips" v-if="success">
                  <image src="@/static/ic_wrong@2x.png" />
                  <text>回答错误</text>
               </view>
            </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,12 +53,7 @@
                  <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>
@@ -66,10 +67,41 @@
      data() {
         return {
            i: 0,
            problemIndex: null,
            problemIndex: 0,
            multiple: null,
            success: false,
            list: [],
            success: true,
            list: [
               {
                  type: '1',
                  title: '第一题',
                  options: [
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                  ]
               },
               {
                  type: '1',
                  title: '第一题',
                  options: [
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                  ]
               },
               {
                  type: '1',
                  title: '第一题',
                  options: [
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                     { code: '年刊', value: '111111' },
                  ]
               }
            ],
            bg: require("@/static/banner_dati.jpg"),
            title: '',
            content: ''
@@ -77,7 +109,7 @@
      },
      
      onLoad() {
         this.getProblems()
         // this.getProblems()
         this.getInfo()
      },

@@ -238,6 +270,7 @@
         .box_list_answer {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            background: #FFFFFF;
            border-radius: 16rpx;
            padding: 30rpx;
@@ -255,6 +288,9 @@
               box-sizing: border-box;
               background: #F7F7F7;
               border-radius: 8rpx;
               display: flex;
               align-items: center;
               margin-bottom: 24rpx;
               image {
                  width: 28rpx;
                  height: 28rpx;
@@ -267,14 +303,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;
@@ -290,11 +326,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;