优化 问卷 页面

src/views/questionnaire/index.vue

@@ -8,69 +8,97 @@
             @click-left="onClickLeft"
             @click-right="onClickRight"
         />
-        <div class="main">
-            <van-form>
-                <van-field name="radio" label="单选框">
+        <van-form>
+            <div v-for="(item, index) in formData" :key="index">
+                <!-- 单选 -->
+                <van-field
+                    v-if="item.type == 'radio'"
+                    :name="'radio_' + item.questionId"
+                    :label="item.subject"
+                >
                     <template #input>
-                        <van-radio-group v-model="form.radio" direction="horizontal">
-                            <van-radio name="1">单选框 1</van-radio>
-                            <van-radio name="2">单选框 2</van-radio>
+                        <van-radio-group v-model="item.value" direction="horizontal">
+                            <van-radio 
+                                v-for="(list, key) in item.answerItems" 
+                                :key="key"
+                                :name="list.serialNo"
+                            >
+                                {{ list.AnswerItem }}
+                            </van-radio>
                         </van-radio-group>
                     </template>
                 </van-field>
-                <van-field name="checkboxGroup" label="复选框组">
+                <!-- 多选 -->
+                <van-field
+                    v-if="item.type == 'multipleChoice'"
+                    :name="'multipleChoice_' + item.questionId"
+                    :label="item.subject"
+                >
                     <template #input>
-                        <van-checkbox-group v-model="form.checkboxGroup" direction="horizontal">
-                            <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
-                            <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
+                        <van-checkbox-group v-model="item.value" direction="horizontal">
+                            <van-checkbox
+                                v-for="(list, key) in item.answerItems"
+                                :key="key"
+                                :name="list.serialNo"
+                                shape="square"
+                            >
+                                {{ list.AnswerItem }}
+                            </van-checkbox>
                         </van-checkbox-group>
                     </template>
                 </van-field>
-                <van-field name="switch" label="开关">
+                <!-- 切换 -->
+                <van-field
+                    v-if="item.type == 'switch'"
+                    :name="'switch_' + item.questionId"
+                    :label="item.subject"
+                >
                     <template #input>
-                        <van-switch v-model="form.switchChecked" size="20" />
+                        <van-switch v-model="item.value" size="20" />
                     </template>
                 </van-field>
+                <!-- 单行文本 -->
                 <van-field
-                    v-model="form.text"
-                    name="文本"
-                    label="文本"
+                    v-if="item.type == 'textBox'"
+                    v-model="item.value"
+                    :name="'textBox_' + item.questionId"
+                    :label="item.subject"
                     placeholder="请输入文本"
                 />
+                <!-- 多行文本 -->
                 <van-field
-                    v-model="form.message"
+                    v-if="item.type == 'textareaBox'"
+                    v-model="item.value"
                     rows="3"
                     autosize
-                    label="留言"
+                    :label="item.subject"
                     type="textarea"
                     placeholder="请输入留言"
                 />
-            </van-form>
-        </div>
+                <!-- 分割线 -->
+                <van-divider />
+            </div>
+        </van-form>
     </div>
 </template>
 
 <script>
-import { Form, RadioGroup, Radio } from 'vant';
+import { Form, RadioGroup, Radio, Divider } from 'vant';
 export default {
     components: {
         [Form.name]: Form,
         [RadioGroup.name]: RadioGroup,
         [Radio.name]: Radio,
+        [Divider.name]: Divider
     },
     data() {
         return {
-            form: {
-                radio: "1",
-                checkboxGroup: [],
-                text: "",
-                message: "",
-                switchChecked: false
-            }
+            formData: []
         };
     },
     created() {
-
+        // 初始化问卷
+        this.init();
     },
     mounted() {},
     methods: {
@@ -78,7 +106,12 @@ export default {
             console.log(value)
         },
         onClickRight() {
-            console.log(this.form)
+            console.log(this.formData)
+        },
+        init() {
+            // 模拟获取
+            const data = "[{\"questionId\":1,\"subject\":\"1、问题1？（多选）\",\"type\":\"multipleChoice\",\"answerItems\":[{\"serialNo\":\"A\",\"AnswerItem\":\"A、天\"},{\"serialNo\":\"B\",\"AnswerItem\":\"B、天\"},{\"serialNo\":\"C\",\"AnswerItem\":\"C、向\"},{\"serialNo\":\"D\",\"AnswerItem\":\"D、上\"}],\"value\":[]},{\"questionId\":2,\"subject\":\"2、问题2（单选）\",\"type\":\"radio\",\"answerItems\":[{\"serialNo\":\"0\",\"AnswerItem\":\"是\"},{\"serialNo\":\"1\",\"AnswerItem\":\"否\"}],\"value\":null},{\"questionId\":3,\"subject\":\"3、问题3（开关）\",\"type\":\"switch\",\"value\":null},{\"questionId\":4,\"subject\":\"4、问题4（单行输入）\",\"type\":\"textBox\",\"value\":\"\"},{\"questionId\":5,\"subject\":\"5、问题5（多行输入）\",\"type\":\"textareaBox\",\"value\":\"\"}]";
+            this.formData = JSON.parse(data);
         }
     }
 };

src/views/questionnaire/scss/index.scss

@@ -1,3 +1,15 @@
 .questionnaire {
-    
+    ::v-deep(.van-cell) {
+        display: block !important;
+    }
+    ::v-deep(.van-field__label) {
+        width: 100% !important;
+    }
+    ::v-deep(.van-cell__value) {
+        margin-top: 10px;
+    }
+    ::v-deep(.van-divider) {
+        margin: 0;
+        display: none;
+    }
 }