feats

src/main.js

 import Vue from 'vue'
 import 'animate.css'
 import {
-  Cell, CellGroup,
+  Cell,
+  CellGroup,
   Icon,
   Notify,
   Form,
   Toast,
   Card,
   NavBar,
-  Image, SwipeItem, Tag, Swipe, Divider, Picker, Popup, List,ImagePreview 
+  Image, SwipeItem, Tag, Swipe, Divider, Picker, Popup, Dialog, List,ImagePreview 
 } from 'vant';
 import App from './App.vue'
 import { Login, redirect } from './util/initial'
 // Vue.use(parseTime);
 Vue.use(Picker);
 Vue.use(List);
+Vue.use(Dialog);
 Vue.use(Divider);
 Vue.use(Swipe);
 Vue.use(Tag);

src/util/api.js

 * @returns 
 * 
 */
-export const getQuestionAnswer = (id, data) => request(`/api/wx/questionnaire/${id}/answer`, { method: 'post', data })
+export const answerQuestionnaire = (id, data) => request(`/api/wx/questionnaire/${id}/answer`, { method: 'post', data })
 

src/views/MyCollection.vue

 <template>
   <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-    <div class="Card-box" v-for="(item, index) in shoucangList" :key="index">
+    <div class="Card-box" v-for="(item, index) in shoucangList" :key="index" @click="$router.push({ name: 'ClassInfo', query: { courseId: item.targetId } })">
       <div>
         <div class="Card-box-top">
           <!-- <img :src="item.content" alt /> -->

src/views/Questionnaire.vue

 <template>
-  <div>
-    <QuestionnHome />
-    <!-- <img :src="backgeImg" class="ImagStyle" /> -->
-    <popup
-      :show="showPopup"
-      @confirm="submitForm(currentQuestion.rightAnswer)"
-      @cancel="cancelForm"
-      :showCancel="true"
-      :LoadingShow="LoadingShowAAA"
-      :title="'确定提交答案吗'"
-      :confirmText="`提交`"
-      :cancelText="`取消提交`"
+  <div class="question-wrapper">
+    <QuestionnHome :show="showFirstScreen" :content="questionnaireContent" @confirm="showFirstScreen = false" />
+
+    <van-dialog
+      v-model="showPopup"
+      title="确定提交答案吗"
+      show-cancel-button
+      @confirm="submitForm()"
     >
-      <p>确定要提交答案吗？提交后内容不可更改！</p>
-    </popup>
+      <p style="margin: 2em">确定要提交答案吗？</p>
+    </van-dialog>
 
     <!-- 页面标题 -->
     <div class="VSTD_box" v-if="questionList.length > 0">
         <!-- 循环后端  的所有题 -->
         <div class="VSTD_box_item">
           <question
-            :types="questionList[netx].questionType"
-            :question="currentQuestion"
-            :serial-no="netx + 1"
-            v-model="currentQuestion.rightAnswer"
+            :step="step + 1"
+            :steps="total"
+            v-model="currentQuestion"
+            @next="step++"
+            @prev="step--"
+            @submit="showPopup = true"
           ></question>
-
-          <div class="but-box">
-            <van-form class="but-box-form-item">
-              <van-button class="butsize" v-show="ButPrevious" @click="PreviousBut">上一题</van-button>
-              <van-button
-                type="info"
-                class="butsize"
-                v-show="Butnetx"
-                @click="netxBut(currentQuestion.rightAnswer)"
-              >下一题</van-button>
-              <van-button type="info" class="butsize" v-show="Butsubmit" @click="firstSubmit">提交</van-button>
-            </van-form>
-          </div>
         </div>
-
-        <!-- 提交函数  -->
       </van-form>
     </div>
 
 </template>
 
 <script>
-import { getQuestion, getQuestionInfo, getQuestionAnswer } from '@/util/api'
-// import query from '@/util/query'
+import { Toast } from 'vant';
+import { getQuestionnaire, getQuestion, answerQuestionnaire } from '@/util/api'
 
 export default {
   name: 'QuestionDetail',
   props: {},
   data() {
     return {
+      showFirstScreen: true,
+      questionnaireContent: {},
+
       showPopup: false,
-      LoadingShowAAA: false,
-      // backgeImg: require('../assets/bgc.png'),
-      netx: 0, //第一题第二题下标
-      startData: null,
-      endData: null,
-      ButPrevious: false, //上一题
-      Butsubmit: false, //提交
-      Butnetx: true, //下一题
-
-      indexSum: 0, //第indexSum题
-      // questionId: '', //试题的id
-      title: '', //返回的题目信息
-      questionList: [], //答题保存的数组
-
-      DSQ: null, //定时器，到时间自动提交
-      DSQTime: 0 //后端返回的结束时间
+      step: 0,
+      total: 0,
+      questionList: []
     }
   },
   computed: {
     currentQuestion: {
       get: function () {
-        return this.questionList[this.netx]
+        return this.questionList[this.step]
       },
       set: function (val) {
-        this.$set(this.questionList, this.netx, val)
+        this.$set(this.questionList, this.step, val)
       }
     }
   },
-  created() {
-    // findIndex 用来获取数组中第一个满足条件的元素下标
-    var v = this.questionList.findIndex((value, index, arr) => {
-      return value.a == '2'
-    })
-  },
-
-  mounted() {
-    this.onSearch()
+  watch: {
+    '$route.query.id': {
+      handler(v) {
+        this.loadData(v)
+      },
+      immediate: true
+    }
   },
-
   methods: {
-    cancelForm() {
-      this.showPopup = false
-      console.log('点击了取消')
-    },
+    loadData(id) {
+      // 问卷信息
+      getQuestionnaire(id).then((e) => {
+        this.questionnaireContent = e || {}
+      })
 
-    onSearch() {
-      getQuestion('f5a47d178019bda33a370d7a6ed1e4c3').then((res) => {
+      // 问题列表
+      getQuestion(id).then((res) => {
         console.log('题目列表', res)
         const { records, total } = res
         this.questionList = records || []
+        this.total = total
       })
       // let sum = 0
     },
-    firstSubmit() {
-      this.showPopup = true
-    },
+  
     submitForm(e) {
-      this.LoadingShowAAA = true
-      console.log('🚀 ~ f e', e)
-      // const { questionId, rightAnswer } = this.question
-      console.log(this.questionList)
-
-      let NEW_ARR = this.questionList.map((obj) => {
-        if (Array.isArray(obj.rightAnswer)) {
-          let sliceArray = obj.rightAnswer.slice(1)
-          let stringArray = sliceArray.sort().toLocaleString()
-
-          return { questionId: obj.questionId, answer: stringArray }
-        } else {
-          return { questionId: obj.questionId, answer: obj.rightAnswer }
-        }
-      })
-      console.log(NEW_ARR)
-
-      getQuestionAnswer(
-        'f5a47d178019bda33a370d7a6ed1e4c3',
-        // answerOpt: '22',
-        // answerText: '1',
-        // personId: this.$store.state.user.personId,
-        // questionId: 'f5a47d178019bda33a370d7a6ed1e4c3',
-        // score: '1'
-        NEW_ARR
-      ).then((e) => {
-        console.log(e.score, e)
-        // this.$store.commit('SET_USER_INFO', { scoreNumb: e.result.score })
-        // this.$store.commit('SET_USER_INFO', { resultInfo: e.result.resultId })
-        this.LoadingShowAAA = false
-        this.showPopup = false
-
-        this.$router.go(-1) //replace  不记录页面 ，无法返回
+      const toast = Toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true,
+        message: '请稍后...',
+      });
+      answerQuestionnaire(this.$route.query.id, this.questionList).then(e => {
+        toast.clear();
+        Toast.success('感谢您的参与');
+        this.questionnaireContent.isAnswered = true
+        this.showFirstScreen = true
+      }).catch(e => {
+        toast.clear();
+        Toast.fail(e.message);
       })
     },
-
-    netxBut(e) {
-      if (e !== null) {
-        if (this.netx >= this.questionList.length - 2) {
-          this.Butnetx = false
-          this.Butsubmit = true
-        }
-        if (this.netx <= this.questionList.length - 2) {
-          this.netx = this.netx + 1
-          this.ButPrevious = this.ButPrevious = true
-          this.indexSum = this.indexSum + 1
-        }
-      } else {
-        this.$message.warning('请选择至少一项')
-      }
-    },
-
-    PreviousBut() {
-      if (this.netx >= 1) {
-        this.Butnetx = true
-        this.Butsubmit = false
-      }
-      if (this.netx <= 1) {
-        this.ButPrevious = this.ButPrevious = false
-        this.Butnetx = true
-      }
-      if (this.netx <= 0) {
-        console.log('???', this.netx, this.questionList.length)
-      } else {
-        this.netx = this.netx - 1
-        this.indexSum = this.indexSum - 1
-      }
-    }
   }
 }
 </script>
 
 
 <style lang="less" scoped>
+
+.question-wrapper {
+  background-image: url('~@/assets/userImag/backImag.png');
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
 .ImagStyle {
   width: 100%;
 }

src/views/components/Question/Answer.vue

   }
 
   &.active {
-    background-color: #409eff;
+    background-color: #2CB798;
     color: #fff;
   }
 }

src/views/components/Question/Title.vue

 <template>
   <div class="question-title">
-    <span>{{`第${this.serialNo+1}题:`}}</span>
+    <span>{{serialNum}}</span>
+    <span>({{ formatType(qType) }}): </span>
     <span>{{title}}</span>
-    <span>({{ formatType(qType) }})</span>
   </div>
 </template>
 
     title: String
   },
   computed: {
-    content() {
-      return ` 第${this.serailNo}题: ${this.title} `
+    serialNum() {
+      if (!this.serialNo) return ''
+
+      return ` 第${this.serialNo}题`
     }
   },
   methods: {

src/views/components/Question/index.vue

 <template>
-  <div class="question-box">
-    <q-title v-bind="qTitleContent"></q-title>
-    <div style="margin-top:3em;">
+  <div class="question-box flex flex-column">
+    <div class="flex-0">
+      <q-title v-bind="qTitleContent" :serial-no="step"></q-title>
+    </div>
+    <div class="flex-1">
       <div class="scroll">
-        <div v-if="types=='textarea'" class="textareass">
-          <textarea @input="handleTextArea"></textarea>
+        <div v-if="question.questionType === 'textarea'">
+          <div class="textarea" contenteditable="true"></div>
+          <textarea rows="10" :value="question.answerText" @input="handleTextArea"></textarea>
         </div>
         <div v-else v-for="answer in question.answerList" :key="answer.answerId">
           <answer
-            :active="values.includes(answer.optCode)"
+            :active="answerValues.includes(answer.optCode)"
             :option="answer.optCode"
             :label="answer.content"
             @click="handleAnswer(answer.optCode)"
         </div>
       </div>
     </div>
+    <div class="flex-0 flex">
+      <div class="flex-1 turn-btn" v-if="step > 1">
+        <van-button plain round block type="warning" @click="$emit('prev')">上一题</van-button>
+      </div>      
+      <div class="submit turn-btn flex-1" v-if="step === steps">
+        <van-button plain round block type="info" @click="$emit('submit')">提 交</van-button>
+      </div>
+      <div class="flex-1 turn-btn" v-if="step < steps">
+        <van-button plain round block type="info" @click="$emit('next')">下一题</van-button>
+      </div>
+    </div>
   </div>
 </template>
 
   },
   props: {
     value: {
-      type: [Array, String]
-    },
-    question: {
       type: Object,
       default: () => ({
         rightAnswer: '',
         answerList: []
       })
     },
-    serialNo: {
-      type: Number,
-      required: true
-    },
-    types: {
-      type: String
-    }
+    step: Number,
+    steps: Number,
   },
   data() {
-    return {
-      answerValues: {}
-    }
+    return {}
   },
 
   computed: {
+    question() {
+      return this.value;
+    },
     qTitleContent() {
       return {
         serialNo: this.question.sortNo,
       }
     },
 
-    values() {
+    answerValues() {
       // 为了便捷处理, 不同的问题类型。所有的答案统一处理为数组
-      return Array.isArray(this.value) ? this.value : [this.value]
+      return (this.value.answerOpt || '').split(',').filter(x => x !== '')
     }
   },
 
   methods: {
     handleTextArea(e) {
-      // console.log(e.target.value)
-      this.handleAnswer(e.target.value)
+      // 更新 answerText 字段
+      const data = { ...this.value, answerText: e.target.value }
+      this.$emit('input', data)
     },
     handleAnswer(opt) {
-      console.log('🚀 ~ file: index.vue ~ line 68 ~ handleAnswer ~ opt', opt)
-      const isChecked = this.values.includes(opt)
+      // 更新 answerOpt 字段
+      const isChecked = this.answerValues.includes(opt)
+      let data = { ...this.value }
 
       // 如果是多选
       if (this.question.questionType === 'checkBox') {
-        if (isChecked) {
-          this.$emit(
-            'input',
-            this.values.filter((x) => x !== opt)
-          )
-        } else {
-          this.$emit('input', [...this.values, opt])
-        }
+        const answers = isChecked ? this.answerValues.filter((x) => x !== opt) : this.answerValues.concat(opt);
+        data.answerOpt = answers.filter(x => x !== null && x !== undefined || x !== '').sort().join(',');
       } else {
-        this.$emit('input', opt)
+        data.answerOpt = opt;
       }
+      
+      this.$emit('input', data)
     }
   }
 }
 <style lang="less" scoped>
 .question-box {
   width: 80vw;
+  height: calc(100vh - 6em);
   margin: 0 auto;
+  margin-top: 3em;
   position: relative;
-  top: 5vh;
-  left: -4%;
   background: white;
   box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
-  padding: 1em 15px 2em 15px;
+  padding: 1em 2em;
+  box-sizing: border-box;
 
   .scroll {
     padding-top: 5px;
     width: 100%;
-    height: 46vh;
+    height: calc(100% - 6px);
     overflow: auto;
-    .textareass {
-      width: 93%;
-      > textarea {
-        width: 100%;
-        height: 20vh;
-        border: 1px solid rgb(192, 191, 191);
-        padding: 5px 8px;
-        font-size: 14px;
-      }
+
+    textarea {
+      width: 100%;
+      height: 90%;
+      border: 1px solid #2CB798;
+      padding: 1em;
+      box-sizing: border-box;
+      font-size: 14px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+
+  .turn-btn {
+    & + .turn-btn {
+      margin-left: 2em;
     }
   }
 }

src/views/components/QuestionnHome.vue

 <template>
-  <div :class="{'QuestionnHome-box':true,'actveBox':isActve}">
-    <h1>{{Content.name||''}}</h1>
-    <div @click="goTop">点我消失</div>
+  <div class="QuestionnHome-box" :class="{hideBox: !show}">
+    <div class="content">
+      <h3>{{content.name||''}}</h3>
+      <van-button
+        v-if="!content.isAnswered"
+        plain
+        round
+        block
+        type="primary"
+        size="normal"
+        @click="$emit('confirm')"
+      >开 始</van-button>
+      <div v-else style="text-align: center">
+        <p>您已完成当前问卷</p>
+        <p>欢迎继续参与我们后期的调研</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { getQuestionnaire } from '@/util/api'
-
 export default {
   name: 'QuestionnHome',
   props: {
-    active: Boolean
-  },
-  data() {
-    return {
-      isActve: false,
-      Content: null
+    show: Boolean,
+    content: {
+      type: Object,
+      default: () => ({})
     }
   },
-  mounted() {
-    this.onLoadQuestionn()
-  },
-  methods: {
-    goTop() {
-      if (this.Content.isAnswered) {
-        this.$toast('您已回答过此问卷！')
-      } else {
-        this.isActve = true
-      }
-    },
-    onLoadQuestionn() {
-      getQuestionnaire('f5a47d178019bda33a370d7a6ed1e4c3').then((e) => {
-        this.Content = e
-      })
-    }
-  }
 }
 </script>
 
 <style lang="less" scoped>
 .QuestionnHome-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+
   width: 100vw;
   height: 100vh;
-  z-index: 5000;
+  z-index: 999;
+  transition: top .6s ease;
+
   background-color: #fff;
-  display: flex;
-  position: absolute;
-  flex-direction: column;
-  top: 0;
-  transition: top 1.4s ease;
+  background-image: url('~@/assets/userImag/backImag.png');
+  background-size: 100%;
+  background-repeat: no-repeat;
 
+  display: flex;
+  justify-content: center;
   align-items: center;
-  & > div {
-    width: 100px;
-    height: 100px;
-    border: 1px solid red;
-    margin: 0 auto;
+
+  &.hideBox {
+    top: -150vh;
   }
+
+  .content {
+    width: 100%;
+    padding: 0 3em;
+    box-sizing: border-box;
+
+    & > h3 {
+      text-align: center;
+      margin-bottom: 10em;
+    }
+  }
+
 }
-.actveBox {
-  top: -250vh;
-}
+
 </style>

src/views/userPages/SetUser.vue

 <template>
   <div class="setInfo-box">
     <div class="setInfo">
-      <van-nav-bar title="修改个人信息" left-text="返回" left-arrow @click-left="onClickLeft" />
+      <!-- <van-nav-bar title="修改个人信息" left-text="返回" left-arrow @click-left="onClickLeft" /> -->
       <van-form @submit="onSubmit">
         <van-field
           v-model="personInfo.name"