问卷预览

1

package.json

@@ -46,6 +46,7 @@
     "screenfull": "^5.1.0",
     "swiper": "^6.3.5",
     "v-charts": "^1.19.0",
+    "vant": "^2.12.19",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
     "vue-awesome-swiper": "^4.1.1",

src/styles/iconfont/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1644398529497') format('truetype');
+  src: url('iconfont.ttf?t=1645601707072') format('truetype');
 }
 
 .iconfont {
@@ -415,3 +415,15 @@
   content: "\e680";
 }
 
+.icon-gouxuan:before {
+  content: "\e681";
+}
+
+.icon-weigouxuan:before {
+  content: "\e682";
+}
+
+.icon-bofang:before {
+  content: "\e683";
+}
+

src/views/setQuestions/operation.vue

@@ -60,6 +60,7 @@
                 v-model="form.loginFlag"
                 placeholder="请选择是否需要登录"
                 :disabled="disabled"
+                @change="changeLoginFlag"
                 style="width: 100% !important"
               >
                 <el-option label="是" :value="1"></el-option>
@@ -67,7 +68,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :xs="12" :sm="12" :md="12" :lg="9" :xl="9">
+          <el-col :xs="12" :sm="12" :md="12" :lg="9" :xl="9" v-if="form.loginFlag">
             <el-form-item
               label="是否逐题提交"
               prop="commitType"
@@ -108,6 +109,7 @@
                       class="chioseBox"
                       :label="1"
                       :checked="form.preTemplate == 1"
+                       :disabled='disabled'
                       ><br
                     /></el-checkbox>
                     <!-- <div
@@ -126,6 +128,7 @@
                       class="chioseBox"
                       :label="2"
                       :checked="form.preTemplate == 2"
+                       :disabled='disabled'
                       ><br
                     /></el-checkbox>
                     <!-- <div
@@ -142,6 +145,7 @@
                       class="chioseBox"
                       :label="3"
                       :checked="form.preTemplate == 3"
+                       :disabled='disabled'
                       ><br
                     /></el-checkbox>
                     <!-- <div
@@ -158,6 +162,7 @@
                       class="chioseBox"
                       :label="4"
                       :checked="form.preTemplate == 4"
+                      :disabled='disabled'
                       ><br
                     /></el-checkbox>
                     <!-- <div
@@ -319,22 +324,15 @@
         width="415px"
         v-if="questionStatus"
       >
-        <!-- <answer-list
-          :form="form"
-          :close="
-            () => {
-              questionStatus = false;
-            }
-          "
-        /> -->
-        <iframe
+        <questionManger :form='form' @close="questionStatus = false"/>
+        <!-- <iframe
           src="http://192.168.3.8:9001/#/question"
           width="375px"
           height="667px"
           frameborder="0"
           ref="question"
           @load="loadfrom"
-        ></iframe>
+        ></iframe> -->
       </el-dialog>
     </div>
   </div>
@@ -346,10 +344,11 @@ import {
   questionnaireTopicGetDetail,
   questionnaireTopicUpdate,
 } from "./api";
+import questionManger from './questionManger'
 import AnswerList from "./components/answerList";
 export default {
   name: "operationQuestion",
-  components: { questionList, AnswerList },
+  components: { questionList, AnswerList,questionManger },
   data() {
     let query = this.$route.query;
     let titleName = "问卷";
@@ -458,6 +457,7 @@ export default {
         const validateResult = res.every((item) => !!item);
         if (validateResult) {
           this.questionStatus = true;
+          //  验证通过    我现在的问题是如何在h5 拿到题目 不然就得复制一套过来
         }
       });
     },
@@ -512,6 +512,7 @@ export default {
       );
     },
         setPreTemplate(index) {
+          if(this.disabled)return
       this.$set(this.form, "preTemplate", index);
       if (this.checkList.indexOf(index) == -1) {
         this.checkList.push(index);
@@ -528,6 +529,11 @@ export default {
       }
       this.$set(this.form, "preTemplate", this.checkList[0] || null);
     },
+    changeLoginFlag(val){
+      if(!val){
+        this.form.commitType = 0
+      }
+    }
   },
 };
 </script>

src/views/setQuestions/questionManger/component/Continuous.vue

@@ -0,0 +1,1016 @@
+<template>
+  <div :class="theme" class="wrap">
+    <div class="banner">
+      <van-image :src="banner" class="banner" width="375">
+        <template v-slot:loading>
+          <van-loading type="spinner" size="20" />
+        </template>
+      </van-image>
+      <h2 class="title">校管乐团启蒙课 调查问卷</h2>
+    </div>
+    <studentInfo v-if="form.loginFlag" class="studentInfo" />
+    <div class="questions" v-for="(item, index) in questionList" :key="index">
+      <van-tag class="form-mark" :color="themeColor" mark type="primary">{{
+        item["type"] | formTypeFormat
+      }}</van-tag>
+      <van-cell-group :border="false">
+        <van-cell title-class="questionName" :title="item['content']" />
+        <van-cell :border="false">
+          <template #title>
+            <van-radio-group v-model="check" v-if="item['type'] == 'radio'">
+              <van-cell-group :border="false">
+                <van-cell
+                  :border="false"
+                  v-for="item in item['questionnaireQuestionItemList']"
+                  :clickable="true"
+                  :key="item.id"
+                  :title="item.answerValue"
+                  class="teacher-item"
+                  @click="toggle(item.id)"
+                >
+                  <template #right-icon>
+                    <van-radio :name="item.id">
+                      <template #icon="props">
+                        <!-- <img
+                          class="img-icon"
+                          :src="props.checked ? activeButtonIcon : inactiveIcon"
+                        /> -->
+
+                        <i
+                          class="iconfont"
+                          :class="
+                            props.checked
+                              ? 'icon-gouxuan'
+                              : 'icon-weigouxuan'
+                          "
+                          :style="{ color: themeColor }"
+                        ></i>
+                      </template>
+                    </van-radio>
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </van-radio-group>
+            <van-checkbox-group
+              v-model="checkBox"
+              v-if="item['type'] == 'checkbox'"
+            >
+              <van-cell-group :border="false">
+                <van-cell
+                  :border="false"
+                  v-for="(item, index) in item['questionnaireQuestionItemList']"
+                  :clickable="true"
+                  :key="item.id"
+                  :title="item.answerValue"
+                  class="teacher-item"
+                  @click="toggle(index)"
+                >
+                  <template #right-icon>
+                    <van-checkbox
+                      shape="square"
+                      :name="item.id ? item.id.toString() : item.answerValue"
+                      ref="checkboxes"
+                    >
+                      <template #icon="props">
+                        <!-- <img
+                          class="img-icon"
+                          :src="props.checked ? activeButtonIcon : inactiveIcon"
+                        /> -->
+                        <i
+                          class="iconfont"
+                          :class="
+                            props.checked
+                              ? 'icon-gouxuan'
+                              : 'icon-weigouxuan'
+                          "
+                          :style="{ color: themeColor }"
+                        ></i>
+                      </template>
+                    </van-checkbox>
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </van-checkbox-group>
+
+            <div v-if="item['type'] == 'textarea'">
+              <van-field
+                v-model="textarea"
+                rows="4"
+                autosize
+                maxlength="255"
+                type="textarea"
+                class="textareaClass"
+                placeholder="请写下您的使用感受或建议～"
+              />
+            </div>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </div>
+    <van-goods-action>
+      <!-- <van-goods-action-button
+          class="btn-submit"
+          v-if="currentIndex != 1"
+          color="#F5F5F5"
+          @click="onPrev"
+          :style="{ color: themeColor }"
+          type="default"
+          text="上一题"
+        />
+        <van-goods-action-button
+          class="btn-submit"
+          :color="themeColor"
+          :disabled="!check"
+          type="primary"
+          v-if="item['type'] == 'radio'"
+          @click="onSubmit"
+          :text="
+            currentIndex == questionList.length
+              ? planStatus
+                ? '确定'
+                : '提交'
+              : '下一题'
+          "
+        />
+        <van-goods-action-button
+          class="btn-submit"
+          :color="themeColor"
+          :disabled="checkBox.length <= 0"
+          type="primary"
+          v-if="questionList[currentIndex - 1]['type'] == 'checkbox'"
+          @click="onSubmit"
+          :text="
+            currentIndex == questionList.length
+              ? planStatus
+                ? '确定'
+                : '提交'
+              : '下一题'
+          "
+        />-->
+      <van-goods-action-button
+        class="btn-submit"
+        :color="themeColor"
+        type="primary"
+        @click="onSubmit"
+        text="提交"
+      />
+    </van-goods-action>
+    <van-popup
+      v-model="showPopup"
+      round
+      closeable
+      @close="popupClose"
+      :close-on-click-overlay="false"
+    >
+      <div class="popup-success">
+        <img :src="icon_success" alt="" />
+        <p class="tips">提交成功，感谢您的参与！</p>
+        <van-button
+          type="primary"
+          :color="themeColor"
+          block
+          round
+          @click="popupClose"
+          >确认</van-button
+        >
+      </div>
+    </van-popup>
+    <!-- v-if="loginFlag" -->
+  </div>
+</template>
+<script>
+import studentInfo from "../models/studentInfo.vue";
+// import layout from "@/layout";
+// import { postMessage } from "@/helpers/native-message";
+// import { getDetail } from "@/views/questionnaire/api";
+// import { questionnaireUserResult, commitFlag } from "@/views/activeList/api";
+// import { browser } from "@/common/common";
+export default {
+  props: ['form'],
+  components: { studentInfo },
+  data() {
+    const query = this.$route.query;
+    return {
+      showPopup: false,
+      topicId: query.topicId || 28,
+      banner1: require("../images/banner1.png"),
+      banner2: require("../images/banner2.png"),
+      banner3: require("../images/banner3.png"),
+      banner4: require("../images/banner4.png"),
+      icon_success1: require("../images/icon_success1.png"),
+      icon_success2: require("../images/icon_success2.png"),
+      icon_success3: require("../images/icon_success3.png"),
+      icon_success4: require("../images/icon_success4.png"),
+      //   inactiveIcon: require("./images/icon_default.png"),
+      //   activeButtonIcon: require("./images/icon_active.png"),
+      currentIndex: 1,
+      check: null,
+      checkBox: [],
+      textarea: null,
+      checkList: [],
+      templateType: 2,
+         questionList: [{type:'',content:''}],
+    };
+  },
+  async mounted() {
+    this.templateType = this.form.templateType;
+    this.questionList = this.form.questionnaireQuestionList
+  },
+  computed: {
+    planStatus() {
+      if (this.questionList.length == this.currentIndex + 1) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    theme() {
+      switch (this.templateType) {
+        case 1: {
+          return "blue";
+          break;
+        }
+        case 2: {
+          return "org";
+          break;
+        }
+        case 3: {
+          return "green";
+          break;
+        }
+        default: {
+          return "pink";
+        }
+      }
+    },
+    themeColor() {
+      switch (this.templateType) {
+        case 1: {
+          return "#5986FD";
+          break;
+        }
+        case 2: {
+          return "#FF9E42";
+          break;
+        }
+        case 3: {
+          return "#33B23C";
+          break;
+        }
+        default: {
+          return "#FF7888";
+        }
+      }
+    },
+    banner() {
+      switch (this.templateType) {
+        case 1: {
+          return this.banner1;
+          break;
+        }
+        case 2: {
+          return this.banner2;
+          break;
+        }
+        case 3: {
+          return this.banner3;
+          break;
+        }
+        default: {
+          return this.banner4;
+        }
+      }
+    },
+    icon_success() {
+      switch (this.templateType) {
+        case 1: {
+          return this.icon_success1;
+          break;
+        }
+        case 2: {
+          return this.icon_success2;
+          break;
+        }
+        case 3: {
+          return this.icon_success3;
+          break;
+        }
+        default: {
+          return this.icon_success4;
+        }
+      }
+    },
+  },
+  methods: {
+    onPrev() {
+      // 上一步
+      // 已经是第一步了
+      if (this.currentIndex <= 1) {
+        return;
+      }
+      this.check = [];
+      --this.currentIndex;
+      let pervQuestion = this.questionList[this.currentIndex - 1];
+      if (pervQuestion.type == "radio") {
+        this.check =
+          this.checkList[this.currentIndex - 1].questionnaireQuestionItemIdList;
+      } else if (pervQuestion.type == "checkbox") {
+        this.checkBox =
+          this.checkList[
+            this.currentIndex - 1
+          ].questionnaireQuestionItemIdList.split(",");
+      } else if (pervQuestion.type == "textarea") {
+        this.textarea = this.checkList[this.currentIndex - 1].additionalValue;
+      }
+    },
+    toggle(index) {
+      let selectList = this.questionList[this.currentIndex - 1];
+      if (selectList.type == "radio") {
+        this.check = index;
+      } else if (selectList.type == "checkbox") {
+        this.$refs.checkboxes[index].toggle();
+      }
+    },
+    async onSubmit() {
+      // let selectList = this.questionList[this.currentIndex - 1];
+      // if (selectList.type == "radio" && !this.check) {
+      //   this.$toast("请回答当前问题");
+      //   return;
+      // } else if (selectList.type == "checkbox" && this.checkBox.length <= 0) {
+      //   this.$toast("请回答当前问题");
+      //   return;
+      // } else if (selectList.type == "textarea" && !this.textarea) {
+      //   this.$toast("请回答当前问题");
+      //   return;
+      // }
+      // 判断是否在题目列表里面
+      // if (this.currentIndex <= this.questionList.length) {
+      //   if (selectList.type == "radio") {
+      //     this.checkList[this.currentIndex - 1] = {
+      //       questionnaireQuestionId: selectList.id,
+      //       questionnaireQuestionItemIdList: this.check,
+      //     };
+      //     this.check = null;
+      //   } else if (selectList.type == "checkbox") {
+      //     this.checkList[this.currentIndex - 1] = {
+      //       questionnaireQuestionId: selectList.id,
+      //       questionnaireQuestionItemIdList: this.checkBox.join(","),
+      //     };
+      //     this.checkBox = [];
+      //   } else if (selectList.type == "textarea") {
+      //     this.checkList[this.currentIndex - 1] = {
+      //       questionnaireQuestionId: selectList.id,
+      //       additionalValue: this.textarea,
+      //     };
+      //     this.textarea = null;
+      //   }
+
+      //   if (this.currentIndex == this.questionList.length) {
+      //     // try {
+      //     //   await questionnaireUserResult({
+      //     //     topicId: this.topicId,
+      //     //     activeType: "CLOUD_TEACHER_FEEDBACK",
+      //     //     questionnaireUserResultList: this.checkList,
+      //     //   });
+      //     //   this.showPopup = true;
+      //     // } catch {
+      //     //   //
+      //     // }
+      //     return;
+      //   }
+
+      //   this.currentIndex++;
+      // }
+      // 回写信息
+      // if (this.checkList.length >= this.currentIndex) {
+      //   let selectValue = this.checkList[this.currentIndex - 1];
+      //   let tempList = this.questionList[this.currentIndex - 1];
+      //   if (tempList.type == "radio") {
+      //     this.check = selectValue.questionnaireQuestionItemIdList;
+      //   } else if (tempList.type == "checkbox") {
+      //     this.checkBox =
+      //       selectValue.questionnaireQuestionItemIdList.split(",");
+      //   } else if (tempList.type == "textarea") {
+      //     this.textarea = selectValue.additionalValue;
+      //   }
+      // }
+    },
+    popupClose() {
+      this.showPopup = false;
+      if (browser().isApp) {
+        postMessage({ api: "back", content: {} }, () => {});
+      } else {
+        const { state } = this.$store;
+        state.user.status = "init";
+      }
+    },
+  },
+  filters: {
+    formTypeFormat(type) {
+      const template = {
+        radio: "单选",
+        checkbox: "多选",
+        textarea: "问答",
+      };
+      return template[type];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wrap {
+  padding-bottom: 40px;
+}
+/deep/.van-tag {
+  padding: 2px 9px 2px 5px;
+}
+.iconfont {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  display: inline-block;
+}
+.icon-tuoyuanxing {
+  color: #c0c0c0 !important;
+}
+.blue {
+  background: #e4efff;
+
+  .banner {
+    display: block;
+    position: relative;
+    line-height: 0;
+    width: 100%;
+    min-height: 170px;
+    // background: #5986fd;
+    /deep/.van-image__img,
+    /deep/.van-image__loading {
+      background: #e4efff;
+    }
+     /deep/.van-image__img {
+      width: 375px;
+    }
+    .title {
+      width: 182px;
+      height: 80px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #4c84ea;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #e0eaff;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      z-index: 10;
+      left: 20px;
+      top: 37px;
+    }
+  }
+
+  .btn-submit {
+    // width: 90%;
+    height: 45px;
+    line-height: 45px;
+  }
+  .studentInfo {
+    margin-top: 12px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questionName {
+    // padding-top: .05rem;
+    padding: 15px 0 12px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+    span {
+      display: block;
+      width: 100%;
+      text-align: justify;
+    }
+  }
+  /deep/.van-cell {
+    padding: 10px 28px;
+  }
+  /deep/.van-checkbox {
+    align-items: flex-start;
+  }
+  /deep/.van-goods-action {
+    position: inherit;
+    padding: 0 15px;
+    margin: 20px auto 28px;
+     background: #e4efff;
+    .van-goods-action-button--last,
+    .van-goods-action-button--first {
+      border-radius: 6px;
+      margin-right: 0;
+      margin-left: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-goods-action-button--last {
+      margin-left: 6px;
+    }
+    .van-goods-action-button--first {
+      margin-right: 6px;
+    }
+    .van-goods-action-button--last.van-goods-action-button--first {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  .teacher-item {
+    padding: 15px 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+    .van-cell__title {
+      font-size: 16px;
+      color: #444;
+      span {
+        width: 95%;
+        display: block;
+        text-align: justify;
+      }
+    }
+    &.selected {
+      background-color: #f3f4f8;
+    }
+  }
+  .textareaClass {
+    background-color: #f5f5f5;
+    padding: 14px 12px;
+  }
+  /deep/.van-popup {
+    width: 80%;
+  }
+  .popup-success {
+    padding: 30px 20px 20px;
+    text-align: center;
+    img {
+      width: 68%;
+    }
+    .tips {
+      padding: 10px 0 25px;
+      font-size: 15px;
+      color: #808080;
+    }
+  }
+}
+
+.org {
+  background: #ffe7cd;
+  .banner {
+    display: block;
+    position: relative;
+    line-height: 0;
+    width: 100%;
+    min-height: 170px;
+    // background: #5986fd;
+    /deep/.van-image__img,
+    /deep/.van-image__loading {
+      background: #ffe7cd;
+    }
+     /deep/.van-image__img {
+      width: 375px;
+    }
+    .title {
+      width: 182px;
+      height: 80px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #fff;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #d37a1c;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      z-index: 10;
+      left: 20px;
+      top: 37px;
+    }
+  }
+
+  .btn-submit {
+    // width: 90%;
+    height: 45px;
+    line-height: 45px;
+  }
+  .studentInfo {
+    margin-top: 12px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questionName {
+    // padding-top: .05rem;
+    padding: 15px 0 12px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+    span {
+      display: block;
+      width: 100%;
+      text-align: justify;
+    }
+  }
+  /deep/.van-cell {
+    padding: 10px 28px;
+  }
+  /deep/.van-checkbox {
+    align-items: flex-start;
+  }
+  /deep/.van-goods-action {
+    position: inherit;
+    padding: 0 15px;
+    margin: 20px auto 28px;
+      background: #ffe7cd;
+    .van-goods-action-button--last,
+    .van-goods-action-button--first {
+      border-radius: 6px;
+      margin-right: 0;
+      margin-left: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-goods-action-button--last {
+      margin-left: 6px;
+    }
+    .van-goods-action-button--first {
+      margin-right: 6px;
+    }
+    .van-goods-action-button--last.van-goods-action-button--first {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  .teacher-item {
+    padding: 015px 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+    .van-cell__title {
+      font-size: 16px;
+      color: #444;
+      span {
+        width: 95%;
+        display: block;
+        text-align: justify;
+      }
+    }
+    &.selected {
+      background-color: #f3f4f8;
+    }
+  }
+  .textareaClass {
+    background-color: #f5f5f5;
+    padding: 14px 12px;
+  }
+  /deep/.van-popup {
+    width: 80%;
+  }
+  .popup-success {
+    padding: 30px 20px 20px;
+    text-align: center;
+    img {
+      width: 68%;
+    }
+    .tips {
+      padding: 10px 0 25px;
+      font-size: 15px;
+      color: #808080;
+    }
+  }
+}
+.green {
+  background: #e8f8e9;
+  .banner {
+    display: block;
+    position: relative;
+    line-height: 0;
+    width: 100%;
+    min-height: 170px;
+    // background: #5986fd;
+    /deep/.van-image__img,
+    /deep/.van-image__loading {
+      background: #e8f8e9;
+    }
+     /deep/.van-image__img {
+      width: 375px;
+    }
+    .title {
+      color: #38843c;
+      text-shadow: 0px 2px 4px #d2ffd4;
+      width: 182px;
+      height: 80px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      line-height: 40px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      z-index: 10;
+      left: 20px;
+      top: 37px;
+    }
+  }
+
+  .btn-submit {
+    // width: 90%;
+    height: 45px;
+    line-height: 45px;
+  }
+  .studentInfo {
+    margin-top: 12px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questionName {
+    // padding-top: .05rem;
+    padding: 15px 0 12px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+    span {
+      display: block;
+      width: 100%;
+      text-align: justify;
+    }
+  }
+  /deep/.van-cell {
+    padding: 10px 28px;
+  }
+  /deep/.van-checkbox {
+    align-items: flex-start;
+  }
+  /deep/.van-goods-action {
+    position: inherit;
+    padding: 0 15px;
+    margin: 20px auto 28px;
+      background: #e8f8e9;
+    .van-goods-action-button--last,
+    .van-goods-action-button--first {
+      border-radius: 6px;
+      margin-right: 0;
+      margin-left: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-goods-action-button--last {
+      margin-left: 6px;
+    }
+    .van-goods-action-button--first {
+      margin-right: 6px;
+    }
+    .van-goods-action-button--last.van-goods-action-button--first {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  .teacher-item {
+    padding: 015px 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+    .van-cell__title {
+      font-size: 16px;
+      color: #444;
+      span {
+        width: 95%;
+        display: block;
+        text-align: justify;
+      }
+    }
+    &.selected {
+      background-color: #f3f4f8;
+    }
+  }
+  .textareaClass {
+    background-color: #f5f5f5;
+    padding: 14px 12px;
+  }
+  /deep/.van-popup {
+    width: 80%;
+  }
+  .popup-success {
+    padding: 30px 20px 20px;
+    text-align: center;
+    img {
+      width: 68%;
+    }
+    .tips {
+      padding: 10px 0 25px;
+      font-size: 15px;
+      color: #808080;
+    }
+  }
+}
+.pink {
+  background: #f9dfdf;
+  .banner {
+    display: block;
+    position: relative;
+    line-height: 0;
+    width: 100%;
+    min-height: 170px;
+    // background: #5986fd;
+    /deep/.van-image__img,
+    /deep/.van-image__loading {
+      background: #f9dfdf;
+    }
+     /deep/.van-image__img {
+      width: 375px;
+    }
+    .title {
+      width: 182px;
+      height: 80px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #c73862;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #ffeaea;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      z-index: 10;
+      left: 20px;
+      top: 37px;
+    }
+  }
+
+  .btn-submit {
+    // width: 90%;
+    height: 45px;
+    line-height: 45px;
+  }
+  .studentInfo {
+    margin-top: 12px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questionName {
+    // padding-top: .05rem;
+    padding: 15px 0 12px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+    span {
+      display: block;
+      width: 100%;
+      text-align: justify;
+    }
+  }
+  /deep/.van-cell {
+    padding: 10px 28px;
+  }
+  /deep/.van-checkbox {
+    align-items: flex-start;
+  }
+  /deep/.van-goods-action {
+    position: inherit;
+    padding: 0 15px;
+    margin: 20px auto 28px;
+    background: #f9dfdf;
+    .van-goods-action-button--last,
+    .van-goods-action-button--first {
+      border-radius: 6px;
+      margin-right: 0;
+      margin-left: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-goods-action-button--last {
+      margin-left: 6px;
+    }
+    .van-goods-action-button--first {
+      margin-right: 6px;
+    }
+    .van-goods-action-button--last.van-goods-action-button--first {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  .teacher-item {
+    padding: 015px 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+    .van-cell__title {
+      font-size: 16px;
+      color: #444;
+      span {
+        width: 95%;
+        display: block;
+        text-align: justify;
+      }
+    }
+    &.selected {
+      background-color: #f3f4f8;
+    }
+  }
+  .textareaClass {
+    background-color: #f5f5f5;
+    padding: 14px 12px;
+  }
+  /deep/.van-popup {
+    width: 80%;
+  }
+  .popup-success {
+    padding: 30px 20px 20px;
+    text-align: center;
+    img {
+      width: 68%;
+    }
+    .tips {
+      padding: 10px 0 25px;
+      font-size: 15px;
+      color: #808080;
+    }
+  }
+}
+</style>

src/views/setQuestions/questionManger/component/Progressive.vue

@@ -0,0 +1,1034 @@
+<template>
+  <div :class="theme" class="wrap">
+    <div class="banner">
+      <van-image :src="banner" width="375" class="banner">
+        <template v-slot:loading>
+          <van-loading type="spinner" size="20" />
+        </template>
+      </van-image>
+      <h2 class="title">校管乐团启蒙课 调查问卷</h2>
+    </div>
+    <studentInfo v-if="form.loginFlag" class="studentInfo" />
+    <div class="questions">
+      <van-tag class="form-mark" :color="themeColor" mark type="primary">{{
+        questionList[currentIndex - 1]["type"] | formTypeFormat
+      }}</van-tag>
+      <van-cell-group :border="false">
+        <van-cell
+          title-class="questionName"
+          :title="questionList[currentIndex - 1]['content']"
+        />
+        <van-cell :border="false">
+          <template #title>
+            <van-radio-group
+              v-model="check"
+              v-if="questionList[currentIndex - 1]['type'] == 'radio'"
+            >
+              <van-cell-group :border="false">
+                <van-cell
+                  :border="false"
+                  v-for="item in questionList[currentIndex - 1][
+                    'questionnaireQuestionItemList'
+                  ]"
+                  :clickable="true"
+                  :key="item.id"
+                  :title="item.answerValue"
+                  class="teacher-item"
+                  @click="toggle(item.id)"
+                >
+                  <template #right-icon>
+                    <van-radio :name="item.id">
+                      <template #icon="props">
+                        <!-- <img
+                          class="img-icon"
+                          :src="props.checked ? activeButtonIcon : inactiveIcon"
+                        /> -->
+
+                        <i
+                          class="iconfont"
+                          :class="
+                            props.checked ? 'icon-gouxuan' : 'icon-weigouxuan'
+                          "
+                          :style="{ color: themeColor }"
+                        ></i>
+                      </template>
+                    </van-radio>
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </van-radio-group>
+            <van-checkbox-group
+              v-model="checkBox"
+              v-if="questionList[currentIndex - 1]['type'] == 'checkbox'"
+            >
+              <van-cell-group :border="false">
+                <van-cell
+                  :border="false"
+                  v-for="(item, index) in questionList[currentIndex - 1][
+                    'questionnaireQuestionItemList'
+                  ]"
+                  :clickable="true"
+                  :key="item.id"
+                  :title="item.answerValue"
+                  class="teacher-item"
+                  @click="toggle(index)"
+                >
+                  <template #right-icon>
+                    <van-checkbox
+                      shape="square"
+                      :name="item.id ? item.id.toString() : item.answerValue"
+                      ref="checkboxes"
+                    >
+                      <template #icon="props">
+                        <!-- <img
+                          class="img-icon"
+                          :src="props.checked ? activeButtonIcon : inactiveIcon"
+                        /> -->
+                        <i
+                          class="iconfont"
+                          :class="
+                            props.checked ? 'icon-gouxuan' : 'icon-weigouxuan'
+                          "
+                          :style="{ color: themeColor }"
+                        ></i>
+                      </template>
+                    </van-checkbox>
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </van-checkbox-group>
+
+            <div v-if="questionList[currentIndex - 1]['type'] == 'textarea'">
+              <van-field
+                v-model="textarea"
+                rows="4"
+                autosize
+                maxlength="255"
+                type="textarea"
+                class="textareaClass"
+                placeholder="请写下您的使用感受或建议～"
+              />
+            </div>
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <van-goods-action>
+        <van-goods-action-button
+          class="btn-submit"
+          v-if="currentIndex != 1"
+          color="#F5F5F5"
+          @click="onPrev"
+          :style="{ color: themeColor }"
+          type="default"
+          text="上一题"
+        />
+        <van-goods-action-button
+          class="btn-submit"
+          :color="themeColor"
+          :disabled="!check"
+          type="primary"
+          v-if="questionList[currentIndex - 1]['type'] == 'radio'"
+          @click="onSubmit"
+          :text="
+            currentIndex == questionList.length
+              ? planStatus
+                ? '确定'
+                : '提交'
+              : '下一题'
+          "
+        />
+        <van-goods-action-button
+          class="btn-submit"
+          :color="themeColor"
+          :disabled="checkBox.length <= 0"
+          type="primary"
+          v-if="questionList[currentIndex - 1]['type'] == 'checkbox'"
+          @click="onSubmit"
+          :text="
+            currentIndex == questionList.length
+              ? planStatus
+                ? '确定'
+                : '提交'
+              : '下一题'
+          "
+        />
+        <van-goods-action-button
+          class="btn-submit"
+          :color="themeColor"
+          :disabled="!textarea"
+          type="primary"
+          v-if="questionList[currentIndex - 1]['type'] == 'textarea'"
+          @click="onSubmit"
+          :text="
+            currentIndex == questionList.length
+              ? planStatus
+                ? '确定'
+                : '提交'
+              : '下一题'
+          "
+        />
+      </van-goods-action>
+    </div>
+
+    <van-popup
+      v-model="showPopup"
+      round
+      closeable
+      @close="popupClose"
+      :close-on-click-overlay="false"
+    >
+      <div class="popup-success">
+        <img :src="icon_success" alt="" />
+        <p class="tips">提交成功，感谢您的参与！</p>
+        <van-button
+          type="primary"
+          :color="themeColor"
+          block
+          round
+          @click="popupClose"
+          >确认</van-button
+        >
+      </div>
+    </van-popup>
+    <!-- v-if="loginFlag" -->
+  </div>
+</template>
+<script>
+import studentInfo from "../models/studentInfo.vue";
+// import layout from "@/layout";
+// import { postMessage } from "@/helpers/native-message";
+// import { getDetail } from "@/views/questionnaire/api";
+// import { questionnaireUserResult, commitFlag } from "@/views/activeList/api";
+// import { browser } from "@/common/common";
+export default {
+  props: ["form"],
+  components: { studentInfo },
+  data() {
+    const query = this.$route.query;
+    return {
+      showPopup: false,
+      topicId: query.topicId || 28,
+      banner1: require("../images/banner1.png"),
+      banner2: require("../images/banner2.png"),
+      banner3: require("../images/banner3.png"),
+      banner4: require("../images/banner4.png"),
+      icon_success1: require("../images/icon_success1.png"),
+      icon_success2: require("../images/icon_success2.png"),
+      icon_success3: require("../images/icon_success3.png"),
+      icon_success4: require("../images/icon_success4.png"),
+      //   inactiveIcon: require("./images/icon_default.png"),
+      //   activeButtonIcon: require("./images/icon_active.png"),
+      currentIndex: 1,
+
+      check: null,
+      checkBox: [],
+      textarea: null,
+      checkList: [],
+      templateType: 1,
+      questionList: [{type:'',content:''}],
+    };
+  },
+  async mounted() {
+    this.templateType = this.form.templateType;
+    this.questionList = this.form.questionnaireQuestionList;
+    console.log(this.form)
+  },
+  computed: {
+    planStatus() {
+      if (this.questionList.length == this.currentIndex + 1) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    theme() {
+      switch (this.templateType) {
+        case 1: {
+          return "blue";
+          break;
+        }
+        case 2: {
+          return "org";
+          break;
+        }
+        case 3: {
+          return "green";
+          break;
+        }
+        default: {
+          return "pink";
+        }
+      }
+    },
+    themeColor() {
+      switch (this.templateType) {
+        case 1: {
+          return "#5986FD";
+          break;
+        }
+        case 2: {
+          return "#FF9E42";
+          break;
+        }
+        case 3: {
+          return "#33B23C";
+          break;
+        }
+        default: {
+          return "#FF7888";
+        }
+      }
+    },
+    banner() {
+      switch (this.templateType) {
+        case 1: {
+          return this.banner1;
+          break;
+        }
+        case 2: {
+          return this.banner2;
+          break;
+        }
+        case 3: {
+          return this.banner3;
+          break;
+        }
+        default: {
+          return this.banner4;
+        }
+      }
+    },
+    icon_success() {
+      switch (this.templateType) {
+        case 1: {
+          return this.icon_success1;
+          break;
+        }
+        case 2: {
+          return this.icon_success2;
+          break;
+        }
+        case 3: {
+          return this.icon_success3;
+          break;
+        }
+        default: {
+          return this.icon_success4;
+        }
+      }
+    },
+  },
+  methods: {
+    onPrev() {
+      // 上一步
+      // 已经是第一步了
+      if (this.currentIndex <= 1) {
+        return;
+      }
+      this.check = [];
+      --this.currentIndex;
+      let pervQuestion = this.questionList[this.currentIndex - 1];
+      if (pervQuestion.type == "radio") {
+        this.check =
+          this.checkList[this.currentIndex - 1].questionnaireQuestionItemIdList;
+      } else if (pervQuestion.type == "checkbox") {
+        this.checkBox =
+          this.checkList[
+            this.currentIndex - 1
+          ].questionnaireQuestionItemIdList.split(",");
+      } else if (pervQuestion.type == "textarea") {
+        this.textarea = this.checkList[this.currentIndex - 1].additionalValue;
+      }
+    },
+    toggle(index) {
+      let selectList = this.questionList[this.currentIndex - 1];
+      if (selectList.type == "radio") {
+        this.check = index;
+      } else if (selectList.type == "checkbox") {
+        this.$refs.checkboxes[index].toggle();
+      }
+    },
+    async onSubmit() {
+      let selectList = this.questionList[this.currentIndex - 1];
+      if (selectList.type == "radio" && !this.check) {
+        this.$toast("请回答当前问题");
+        return;
+      } else if (selectList.type == "checkbox" && this.checkBox.length <= 0) {
+        this.$toast("请回答当前问题");
+        return;
+      } else if (selectList.type == "textarea" && !this.textarea) {
+        this.$toast("请回答当前问题");
+        return;
+      }
+      // 判断是否在题目列表里面
+      if (this.currentIndex <= this.questionList.length) {
+        if (selectList.type == "radio") {
+          this.checkList[this.currentIndex - 1] = {
+            questionnaireQuestionId: selectList.id,
+            questionnaireQuestionItemIdList: this.check,
+          };
+          this.check = null;
+        } else if (selectList.type == "checkbox") {
+          this.checkList[this.currentIndex - 1] = {
+            questionnaireQuestionId: selectList.id,
+            questionnaireQuestionItemIdList: this.checkBox.join(","),
+          };
+          this.checkBox = [];
+        } else if (selectList.type == "textarea") {
+          this.checkList[this.currentIndex - 1] = {
+            questionnaireQuestionId: selectList.id,
+            additionalValue: this.textarea,
+          };
+          this.textarea = null;
+        }
+
+        if (this.currentIndex == this.questionList.length) {
+          // try {
+          //   await questionnaireUserResult({
+          //     topicId: this.topicId,
+          //     activeType: "CLOUD_TEACHER_FEEDBACK",
+          //     questionnaireUserResultList: this.checkList,
+          //   });
+          //   this.showPopup = true;
+          // } catch {
+          //   //
+          // }
+          this.$emit('close')
+          return;
+        }
+
+        this.currentIndex++;
+      }
+      // 回写信息
+      if (this.checkList.length >= this.currentIndex) {
+        let selectValue = this.checkList[this.currentIndex - 1];
+        let tempList = this.questionList[this.currentIndex - 1];
+        if (tempList.type == "radio") {
+          this.check = selectValue.questionnaireQuestionItemIdList;
+        } else if (tempList.type == "checkbox") {
+          this.checkBox =
+            selectValue.questionnaireQuestionItemIdList.split(",");
+        } else if (tempList.type == "textarea") {
+          this.textarea = selectValue.additionalValue;
+        }
+      }
+    },
+    popupClose() {
+      this.showPopup = false;
+      if (browser().isApp) {
+        postMessage({ api: "back", content: {} }, () => {});
+      } else {
+        const { state } = this.$store;
+        state.user.status = "init";
+      }
+    },
+  },
+  filters: {
+    formTypeFormat(type) {
+      const template = {
+        radio: "单选",
+        checkbox: "多选",
+        textarea: "问答",
+      };
+      return template[type];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wrap {
+  padding-bottom: 40px;
+}
+/deep/.van-tag {
+  padding: 2px 9px 2px 5px;
+}
+.iconfont {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  display: inline-block;
+}
+.icon-tuoyuanxing {
+  color: #c0c0c0 !important;
+}
+.blue {
+  background: #e4efff;
+
+  .banner {
+    display: block;
+    position: relative;
+    line-height: 0;
+    width: 100%;
+    min-height: 170px;
+    // background: #5986fd;
+    /deep/.van-image__img,
+    /deep/.van-image__loading {
+      background: #e4efff;
+    }
+    /deep/.van-image__img {
+      width: 375px;
+    }
+    .title {
+      width: 182px;
+      height: 80px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #4c84ea;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #e0eaff;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      z-index: 10;
+      left: 20px;
+      top: 37px;
+    }
+  }
+
+  .btn-submit {
+    // width: 90%;
+    height: 45px;
+    line-height: 45px;
+  }
+  .studentInfo {
+    margin-top: 12px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questionName {
+    // padding-top: .05rem;
+    padding: 15px 0 12px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+    span {
+      display: block;
+      width: 100%;
+      text-align: justify;
+    }
+  }
+  /deep/.van-cell {
+    padding: 10px 28px;
+  }
+  /deep/.van-checkbox {
+    align-items: flex-start;
+  }
+  /deep/.van-goods-action {
+    position: inherit;
+    padding: 0 15px;
+    margin: 20px auto 28px;
+      background: #e4efff;
+    .van-goods-action-button--last,
+    .van-goods-action-button--first {
+      border-radius: 6px;
+      margin-right: 0;
+      margin-left: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-goods-action-button--last {
+      margin-left: 6px;
+    }
+    .van-goods-action-button--first {
+      margin-right: 6px;
+    }
+    .van-goods-action-button--last.van-goods-action-button--first {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  .teacher-item {
+    padding: 15px 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+    .van-cell__title {
+      font-size: 16px;
+      color: #444;
+      span {
+        width: 95%;
+        display: block;
+        text-align: justify;
+      }
+    }
+    &.selected {
+      background-color: #f3f4f8;
+    }
+  }
+  .textareaClass {
+    background-color: #f5f5f5;
+    padding: 14px 12px;
+  }
+  /deep/.van-popup {
+    width: 80%;
+  }
+  .popup-success {
+    padding: 30px 20px 20px;
+    text-align: center;
+    img {
+      width: 68%;
+    }
+    .tips {
+      padding: 10px 0 25px;
+      font-size: 15px;
+      color: #808080;
+    }
+  }
+}
+
+.org {
+  background: #ffe7cd;
+  .banner {
+    display: block;
+    position: relative;
+    line-height: 0;
+    width: 100%;
+    min-height: 170px;
+    // background: #5986fd;
+    /deep/.van-image__img,
+    /deep/.van-image__loading {
+      background: #ffe7cd;
+    }
+    /deep/.van-image__img {
+      width: 375px;
+    }
+    .title {
+      width: 182px;
+      height: 80px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #fff;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #d37a1c;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      z-index: 10;
+      left: 20px;
+      top: 37px;
+    }
+  }
+
+  .btn-submit {
+    // width: 90%;
+    height: 45px;
+    line-height: 45px;
+  }
+  .studentInfo {
+    margin-top: 12px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questionName {
+    // padding-top: .05rem;
+    padding: 15px 0 12px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+    span {
+      display: block;
+      width: 100%;
+      text-align: justify;
+    }
+  }
+  /deep/.van-cell {
+    padding: 10px 28px;
+  }
+  /deep/.van-checkbox {
+    align-items: flex-start;
+  }
+  /deep/.van-goods-action {
+    position: inherit;
+    padding: 0 15px;
+    margin: 20px auto 28px;
+     background: #ffe7cd;
+    .van-goods-action-button--last,
+    .van-goods-action-button--first {
+      border-radius: 6px;
+      margin-right: 0;
+      margin-left: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-goods-action-button--last {
+      margin-left: 6px;
+    }
+    .van-goods-action-button--first {
+      margin-right: 6px;
+    }
+    .van-goods-action-button--last.van-goods-action-button--first {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  .teacher-item {
+    padding: 015px 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+    .van-cell__title {
+      font-size: 16px;
+      color: #444;
+      span {
+        width: 95%;
+        display: block;
+        text-align: justify;
+      }
+    }
+    &.selected {
+      background-color: #f3f4f8;
+    }
+  }
+  .textareaClass {
+    background-color: #f5f5f5;
+    padding: 14px 12px;
+  }
+  /deep/.van-popup {
+    width: 80%;
+  }
+  .popup-success {
+    padding: 30px 20px 20px;
+    text-align: center;
+    img {
+      width: 68%;
+    }
+    .tips {
+      padding: 10px 0 25px;
+      font-size: 15px;
+      color: #808080;
+    }
+  }
+}
+.green {
+  background: #e8f8e9;
+  .banner {
+    display: block;
+    position: relative;
+    line-height: 0;
+    width: 100%;
+    min-height: 170px;
+    // background: #5986fd;
+    /deep/.van-image__img,
+    /deep/.van-image__loading {
+      background: #e8f8e9;
+    }
+    /deep/.van-image__img {
+      width: 375px;
+    }
+    .title {
+      color: #38843c;
+      text-shadow: 0px 2px 4px #d2ffd4;
+      width: 182px;
+      height: 80px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      line-height: 40px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      z-index: 10;
+      left: 20px;
+      top: 37px;
+    }
+  }
+
+  .btn-submit {
+    // width: 90%;
+    height: 45px;
+    line-height: 45px;
+  }
+  .studentInfo {
+    margin-top: 12px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questionName {
+    // padding-top: .05rem;
+    padding: 15px 0 12px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+    span {
+      display: block;
+      width: 100%;
+      text-align: justify;
+    }
+  }
+  /deep/.van-cell {
+    padding: 10px 28px;
+  }
+  /deep/.van-checkbox {
+    align-items: flex-start;
+  }
+  /deep/.van-goods-action {
+    position: inherit;
+    padding: 0 15px;
+    margin: 20px auto 28px;
+     background: #e8f8e9;
+    .van-goods-action-button--last,
+    .van-goods-action-button--first {
+      border-radius: 6px;
+      margin-right: 0;
+      margin-left: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-goods-action-button--last {
+      margin-left: 6px;
+    }
+    .van-goods-action-button--first {
+      margin-right: 6px;
+    }
+    .van-goods-action-button--last.van-goods-action-button--first {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  .teacher-item {
+    padding: 015px 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+    .van-cell__title {
+      font-size: 16px;
+      color: #444;
+      span {
+        width: 95%;
+        display: block;
+        text-align: justify;
+      }
+    }
+    &.selected {
+      background-color: #f3f4f8;
+    }
+  }
+  .textareaClass {
+    background-color: #f5f5f5;
+    padding: 14px 12px;
+  }
+  /deep/.van-popup {
+    width: 80%;
+  }
+  .popup-success {
+    padding: 30px 20px 20px;
+    text-align: center;
+    img {
+      width: 68%;
+    }
+    .tips {
+      padding: 10px 0 25px;
+      font-size: 15px;
+      color: #808080;
+    }
+  }
+}
+.pink {
+  background: #f9dfdf;
+  .banner {
+    display: block;
+    position: relative;
+    line-height: 0;
+    width: 100%;
+    min-height: 170px;
+    // background: #5986fd;
+    /deep/.van-image__img,
+    /deep/.van-image__loading {
+      background: #f9dfdf;
+    }
+    /deep/.van-image__img {
+      width: 375px;
+    }
+    .title {
+      width: 182px;
+      height: 80px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #c73862;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #ffeaea;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      z-index: 10;
+      left: 20px;
+      top: 37px;
+    }
+  }
+
+  .btn-submit {
+    // width: 90%;
+    height: 45px;
+    line-height: 45px;
+  }
+  .studentInfo {
+    margin-top: 12px;
+  }
+  .questions {
+    position: relative;
+    margin: 12px 12px 24px;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+    .form-mark {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      z-index: 10;
+    }
+  }
+  .img-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .questionName {
+    // padding-top: .05rem;
+    padding: 15px 0 12px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+    line-height: 1.5;
+    span {
+      display: block;
+      width: 100%;
+      text-align: justify;
+    }
+  }
+  /deep/.van-cell {
+    padding: 10px 28px;
+  }
+  /deep/.van-checkbox {
+    align-items: flex-start;
+  }
+  /deep/.van-goods-action {
+      background: #f9dfdf;
+    position: inherit;
+    padding: 0 15px;
+    margin: 20px auto 28px;
+    .van-goods-action-button--last,
+    .van-goods-action-button--first {
+      border-radius: 6px;
+      margin-right: 0;
+      margin-left: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-goods-action-button--last {
+      margin-left: 6px;
+    }
+    .van-goods-action-button--first {
+      margin-right: 6px;
+    }
+    .van-goods-action-button--last.van-goods-action-button--first {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  .teacher-item {
+    padding: 015px 5px;
+    margin-top: 5px;
+    border-radius: 5px;
+    .van-cell__title {
+      font-size: 16px;
+      color: #444;
+      span {
+        width: 95%;
+        display: block;
+        text-align: justify;
+      }
+    }
+    &.selected {
+      background-color: #f3f4f8;
+    }
+  }
+  .textareaClass {
+    background-color: #f5f5f5;
+    padding: 14px 12px;
+  }
+  /deep/.van-popup {
+    width: 80%;
+  }
+  .popup-success {
+    padding: 30px 20px 20px;
+    text-align: center;
+    img {
+      width: 68%;
+    }
+    .tips {
+      padding: 10px 0 25px;
+      font-size: 15px;
+      color: #808080;
+    }
+  }
+}
+</style>

src/views/setQuestions/questionManger/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <!-- 逐题提交 -->
+    <Progressive
+    @close="close"
+      v-if="commitType == 1"
+    :form='form'
+
+    />
+    <!-- 常规 -->
+    <Continuous
+    @close='close'
+      v-else
+      :form='form'
+    />
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import Continuous from "./component/Continuous";
+import Progressive from "./component/Progressive";
+import {
+  Button,
+  Popup,
+  Cell,
+  CellGroup,
+  Field,
+  Image,
+  Loading,
+  RadioGroup,
+  Radio,
+  CheckboxGroup,
+  Checkbox,
+  Dialog,
+  ImagePreview,
+  Slider,
+  Form,
+  GoodsActionButton,
+  GoodsAction,
+  Tag
+} from "vant";
+Vue.use(Button)
+  .use(Popup)
+  .use(Slider)
+  .use(Dialog)
+  .use(Form)
+  .use(Cell)
+  .use(CellGroup)
+  .use(Field)
+  .use(Image)
+  .use(Loading)
+  .use(RadioGroup)
+  .use(Radio)
+  .use(CheckboxGroup)
+  .use(Checkbox)
+  .use(ImagePreview).use(GoodsActionButton).use(GoodsAction).use(Tag);
+import 'vant/lib/index.css'
+export default {
+  props:['form'],
+  components: {
+    Continuous,
+    Progressive,
+  },
+  data() {
+    return {
+      loginFlag: true,
+      commitType: 0, // 1是逐题提交 0.一起提交
+      preView: false,
+    };
+  },
+  mounted() {
+    this.commitType = this.form.commitType;
+    // window.addEventListener("message", this.handleMessage);
+    // this.$emit("load");
+  },
+  methods: {
+    // handleMessage(e) {
+    //   var data = e.data;
+    //   if (data.cmd == "getFormJson") {
+    //     this.loginFlag = data.data.loginFlag;
+    //     this.commitType = data.data.commitType;
+    //     this.preView = true;
+    //     this.questionList = data.data.questionnaireQuestionList;
+    //     console.log(this.questionList, data.data);
+    //   }
+    // },
+    close(){
+      this.$emit('close')
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.icon-weigouxuan {
+  border: 1px solid #ccc;
+  border-radius: 50%;
+}
+
+</style>

src/views/setQuestions/questionManger/models/studentInfo.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="studentInfo">
+    <img class="studentIcon" :src="defaultAvatar" alt="" />
+    <div class="student">
+      <div class="nameWrap">
+        <p class="name">{{ studetnInfo.username }}</p>
+        <div class="userNumWrap">
+          <img src="../images/icon.png" alt="" />
+          <p>学员编号：{{ studetnInfo.id }}</p>
+        </div>
+      </div>
+      <p class="phone">{{ studetnInfo.phone }}</p>
+    </div>
+  </div>
+</template>
+<script>
+// import { queryUserInfo } from "@/api/login";
+export default {
+  data() {
+    return {
+      studetnInfo: {
+        phone: "学生电话",
+        username: "学生姓名",
+        id: "学生编号",
+        avatar: "",
+      },
+      defaultAvatar: require("@/assets/images/icon_new_student.png"),
+    };
+  },
+  //
+  async mounted() {
+    // const state = this.$store.state;
+    // console.log(state.user);
+    // if (state && state.user && state.user.data&&state.user.data.userId) {
+    //   await queryUserInfo().then((res) => {
+    //     let result = res.data;
+    //     if (res.data) {
+    //       this.studetnInfo = { ...res.data };
+    //     }
+    //   });
+    // }
+
+  },
+
+};
+</script>
+<style lang="less" scoped>
+.studentInfo {
+  margin: 0 12px 10px;
+  background-color: #fff;
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: row;
+  border-radius: 10px;
+  .studentIcon {
+    width: 52px;
+    height: 52px;
+  }
+  .student {
+    margin-left: 15px;
+    display: flex;
+    align-self: center;
+    flex-direction: column;
+    .phone {
+      color: #505050;
+      line-height: 20px;
+      font-size: 14px;
+    }
+  }
+  .nameWrap {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .name {
+      font-size: 18px;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 25px;
+      margin-right: 10px;
+    }
+    .userNumWrap {
+      background: #f5f5f5;
+      height: 22px;
+      border-radius: 11px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 9px;
+      img {
+        width: 12px;
+        height: 12px;
+        margin-right: 7px;
+      }
+      p {
+        font-size: 11px;
+        font-weight: 500;
+        color: #f57d4c;
+        line-height: 16px;
+      }
+    }
+  }
+}
+</style>