多选

src/apps/AppVillageDiscuss/Add.vue

@@ -32,6 +32,53 @@
           </div>
         </u-form-item>
       </u-form>
+
+      <div class="options" v-if="form.type == 1">
+        <div class="oneopt" v-if="opts == 0">
+          <div class="items">
+            <img src="./img/22.png" alt="" />
+
+            <div class="rightopts">
+              <u-input v-model="content" placeholder="选项" maxlength="20" :clearable="false" />
+            </div>
+          </div>
+        </div>
+
+        <div class="moreopt" v-if="opts == 1">
+          <div class="items info" v-for="(item, index) in list" :key="index">
+            <div class="rightopts" style="color: #666">{{ item }}</div>
+            <u-icon name="close-circle-fill" color="#666" @click="del(index)" :border="false"></u-icon>
+          </div>
+          <div class="items">
+            <img src="./img/22.png" alt="" />
+
+            <div class="rightopts">
+              <u-input v-model="content" placeholder="选项" :clearable="false" maxlength="20" />
+            </div>
+          </div>
+
+          <div class="items" @click="addOpts">
+            <img src="./img/11.png" alt="" />
+
+            <div class="addopts">添加选项</div>
+          </div>
+        </div>
+
+        <div class="submitType">提交方式</div>
+        <div class="summitOpt">
+          <div class="leftopt" @click="opts = 0">单选</div>
+
+          <div class="rightopt" @click="opts = 1">多选</div>
+        </div>
+
+        <div class="lines"></div>
+
+        <div class="switchs">
+          <span>匿名提交</span>
+
+          <u-switch v-model="checked"></u-switch>
+        </div>
+      </div>
     </div>
     <div class="pad-b112"></div>
     <div class="btn" @click="submit">保存</div>
@@ -60,6 +107,10 @@ export default {
         second: false,
         timestamp: true,
       },
+      opts: 0,
+      checked: true,
+      list: [],
+      content: '',
     }
   },
   computed: { ...mapState(['user']) },
@@ -114,6 +165,18 @@ export default {
         })
     },
 
+    addOpts() {
+      if (!this.content) {
+        return this.$u.toast('请输入选项内容')
+      }
+      this.list.push(this.content)
+      this.content = ''
+    },
+
+    del(index) {
+      this.list.splice(index, 1)
+    },
+
     areaSelect(e) {
       console.log(e)
       this.form.areaId = e
@@ -156,7 +219,7 @@ export default {
 
 <style lang="scss" scoped>
 .add {
-  height: 100%;
+  // height: 100%;
 
   .header-description {
     ::v-deep .u-form {
@@ -218,6 +281,73 @@ export default {
         }
       }
     }
+
+    .options {
+      background: #fff;
+      .oneopt,
+      .moreopt {
+        .items {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0 40px 0 32px !important;
+          width: 100%;
+          height: 120px;
+          line-height: 120px;
+          box-sizing: border-box;
+          img {
+            width: 36px;
+            height: 36px;
+            vertical-align: middle;
+          }
+          .rightopts {
+            width: 100%;
+            margin-left: 12px;
+            border-bottom: 1px solid #eee;
+            font-size: 28px;
+            color: #cdcdcf;
+          }
+          .addopts {
+            width: 100%;
+            margin-left: 12px;
+            font-size: 30px;
+            color: #2270f1;
+          }
+        }
+      }
+
+      .submitType {
+        padding: 34px 0 0 52px;
+        font-size: 32px;
+      }
+
+      .summitOpt {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        margin: 54px 32px 38px 32px;
+        .leftopt {
+          background: pink;
+          padding: 36px 126px 34px 128px;
+        }
+        .rightopt {
+          background: brown;
+          padding: 36px 126px 34px 128px;
+        }
+      }
+
+      .lines {
+        height: 16px;
+        background: #f5f5f5;
+      }
+
+      .switchs {
+        display: flex;
+        justify-content: space-between;
+        padding: 32px 56px 30px 40px;
+      }
+    }
   }
 
   .pad-b112 {
@@ -299,5 +429,16 @@ export default {
   .color-999 {
     color: #999;
   }
+
+  // .info {
+  //   display: flex !important;
+  //   div {
+  //     width: calc(100% - 100px) !important;
+  //   }
+  //   ::v-deep .u-icon {
+  //     display: inline-block;
+  //     width: 100px;
+  //   }
+  // }
 }
 </style>