测试完成

WXL

2024-09-10 2073439ddb4584a1daa629bd749285ffb7f1d2c3

 src/views/outsideChainwt.vue

@@ -1,8 +1,14 @@
<template>
  <div class="questionnaire">
    <div class="CONTENT" v-if="!accomplish">
      <div class="title">{{ taskname ? taskname : "问卷" }}</div>
      <div class="preview-left">
        <div class="toptitle">
          <div class="title">{{ taskname ? taskname : "问卷" }}</div>
          <div style="font-size: 22px; margin-bottom: 20px; line-height: 1.5;">
            {{ kcb }}
          </div>
        </div>
        <el-divider></el-divider>
        <!-- 单选 -->
        <div
          class="topic-dev"
@@ -11,14 +17,19 @@
        >
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 1">
            <div class="dev-text">
              {{ index + 1 }}、[单选]<span>{{ item.scriptContent }}</span>
              {{ index + 1 }}、<span>{{ item.scriptContent }} <span style="color: #3BA2F7;">[单选]</span></span>
            </div>
            <div class="dev-xx">
              <el-radio-group
                class="radio-group"
                v-model="item.scriptResult"
                @change="handleOptionChange($event, index, item)"
              >
                <el-radio
                  :class="{
                    'radio-option': true,
                    'radio-option-first': index === 0,
                  }"
                  border
                  v-for="(items, index) in item.svyLibTemplateTargetoptions"
                  :key="index"
@@ -34,14 +45,19 @@
          <!-- 多选 -->
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 2">
            <div class="dev-text">
              {{ index + 1 }}、[多选]<span>{{ item.scriptContent }}</span>
              {{ index + 1 }}、<span>{{ item.scriptContent }} <span style="color: #3BA2F7;">[多选]</span></span>
            </div>
            <div class="dev-xx">
              <el-checkbox-group
                class="radio-group"
                v-model="item.scriptResult"
                @change="updateScore($event, index, item)"
              >
                <el-checkbox
                  :class="{
                    'radio-option': true,
                    'radio-option-first': index === 0,
                  }"
                border
                  @change="$forceUpdate()"
                  v-for="(items, indexs) in item.svyLibTemplateTargetoptions"
@@ -59,7 +75,7 @@
          <!-- 填空 -->
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 4">
            <div class="dev-text">
              {{ index + 1 }}、[问答]<span>{{ item.scriptContent }}</span>
              {{ index + 1 }}、<span>{{ item.scriptContent }}<span style="color: #3BA2F7;">[问答]</span></span>
            </div>
            <div class="dev-xx">
              <el-input
@@ -73,13 +89,10 @@
            </div>
          </div>
        </div>
        <div class="bottom-fixed">
          <el-button type="primary" style="width: 100%;" @click="cache(true)">提交问卷</el-button>
      </div>
      <el-form :model="formData" label-width="80px">
        <el-form-item>
          <el-button type="primary" @click="cache(true)">提交问卷</el-button>
          <!-- <el-button type="primary" @click="cache">缓存问卷</el-button> -->
        </el-form-item>
      </el-form>
      </div>
    </div>
    <div class="CONTENT" v-else>
      <div class="preview-left" style="margin-top: 100px">
@@ -120,11 +133,98 @@
    return {
      taskid: 355,
      patid: 265823,
      questionList: null,
      kcb:'',
      questionList: [
        // {
        //   scriptType: 1,
        //   scriptContent: "您的年龄范围是？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "18-25", value: "18-25" },
        //     { optioncontent: "26-35", value: "26-35" },
        //     { optioncontent: "36-45", value: "36-45" },
        //     { optioncontent: "46-55", value: "46-55" },
        //     { optioncontent: "56+", value: "56+" },
        //   ],
        //   required: true,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 2,
        //   scriptContent: "您感兴趣的活动有哪些？",
        //   scriptResult: [],
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "旅游", value: "travel" },
        //     { optioncontent: "阅读", value: "reading" },
        //     { optioncontent: "运动", value: "sports" },
        //     { optioncontent: "音乐", value: "music" },
        //     { optioncontent: "电影", value: "movies" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 4,
        //   scriptContent: "您的姓名是什么？",
        //   scriptResult: "name",
        //   required: true,
        //   scriptResult: null,
        // },
      ],
      revisitAfter: null,
      dialogVisible: false,
      Endornot: true,
      accomplish: true,
      accomplish: false,
      // 前端公钥
      publicKey:
        "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKR0yHv0rbJWQE+Sc7/FwpW66qMd9qX2k6z+SDgkSdxWh/1GbBoAP7bDQQRF6vXmoKsD2ya42H6XRLSDXAoayuMCAwEAAQ== ",
@@ -192,6 +292,7 @@
          if (res.code == 200) {
            this.questionList = res.data.script;
            this.revisitAfter = res.data.revisitAfter;
            this.kcb = res.data.kcb;
            // 处理题目收集结果格式
            this.questionList.forEach((item) => {
              item.nextScriptno = Number(item.nextScriptno);
@@ -300,7 +401,7 @@
<style lang="scss" scoped>
.questionnaire {
  // background-image: url("../assets/images/chainbackground.jpg");
  background-color: #DDDDDD;
  background-color: #f9f9fb;
  background-size: cover;
  background-attachment: fixed; /* 保持背景固定 */
  background-position: center;
@@ -309,8 +410,8 @@
  margin: 0;
  padding: 0;
  .CONTENT {
    padding: 10px;
    .title {
      color: #3769F3;
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 20px;
@@ -320,6 +421,9 @@
}
.preview-left {
  margin: 10px;
  margin-bottom: 60px;
  background-color: #fff;
  border-radius: 5px;
  //   margin: 20px;
  padding: 10px;
  // background: #ffff;
@@ -334,18 +438,56 @@
    }
  }
}
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 设置选项之间的间隔 */
  align-items: start; /* 确保选项上下对齐 */
  padding: 10px 0; /* 为整个组设置上下间隔 */
}

.radio-option {
  flex: none; /* 不让选项自动填充空间 */
  white-space: nowrap; /* 防止选项文本换行 */
  margin: 0 10px; /* 设置选项左右的间隔 */
  font-size: 20px; /* 增大字体大小 */
}

.el-radio__label {
  font-size: 20px; /* 增大标签文字大小 */
}
.toptitle {
}
.bottom-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0; /* 根据需要调整内边距 */
  background: #fff; /* 根据需要调整背景颜色 */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
  z-index: 1000; /* 确保按钮在页面最上层 */
}
::v-deep.el-alert--warning.is-light {
  background-color: #fbf9f3;
  color: #ffba00;
}
::v-deep {
  .el-alert__title {
    font-size: 18px;
    font-size: 20px;
    line-height: 18px;
  }
}
::v-deep.el-radio.el-radio__label {
  font-size: 22px;
  line-height: 2;
::v-deep.el-radio--medium.is-bordered .el-radio__label {
  font-size: 20px;
}
::v-deep.el-radio--medium.is-bordered {
    padding: 5px 20px 0px 10px;
    border-radius: 4px;
    height: 36px;
}
::v-deep.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label {
    line-height: 17px;
    font-size: 20px;
}
</style>