建言献策

src/views/dynamic/downparts/jyxc.vue

@@ -2,20 +2,30 @@
   <div id="wsdc">
     <el-row>
       <el-col :span="24" class="wsdc">
-        <el-form ref="form" :model="form">
-          <el-form-item>
-            <span slot="label">建言献策</span>
-            <el-input
-              type="textarea"
-              v-model="form.proposal"
-              :autosize="{ minRows: 4, maxRows: 6 }"
-              maxlength="300"
-              show-word-limit
-              placeholder="请输入您的对本平台的建言献策"
-            ></el-input>
+        <el-form :model="form" :rules="rules" ref="form" label-width="80px" class="demo-ruleForm">
+          <el-form-item label="昵称" prop="nickname">
+            <el-input v-model="form.nickname" placeholder="请输入昵称"></el-input>
+          </el-form-item>
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" prop="mobile">
+            <el-input v-model="form.mobile" placeholder="请输入联系电话"></el-input>
+          </el-form-item>
+          <el-form-item label="职业" prop="work">
+            <el-input v-model="form.work" placeholder="请输入职业"></el-input>
+          </el-form-item>
+          <el-form-item label="详细地址" prop="address">
+            <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
+          </el-form-item>
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="form.title" placeholder="请输入标题"></el-input>
+          </el-form-item>
+          <el-form-item label="内容" prop="proposal">
+            <el-input type="textarea" v-model="form.proposal" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="请输入您的对本平台的建言献策"></el-input>
           </el-form-item>
           <el-col :span="24" class="btn">
-            <el-button type="primary" @click="onSubmit">确认提交</el-button>
+            <el-button type="primary" @click="onSubmit('form')">确认提交</el-button>
           </el-col>
         </el-form>
       </el-col>
@@ -34,31 +44,67 @@ export default {
     return {
       cha: require('@a/cha.png'),
       form: {},
+      rules: {
+        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        mobile: [{ required: true, message: '请输入手机', trigger: 'blur' }],
+        work: [{ required: true, message: '请输入职业', trigger: 'blur' }],
+        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        proposal: [{ required: true, message: '请输入内容', trigger: 'blur' }],
+      },
     };
   },
   created() {},
   methods: {
     ...survey(['create']),
-    async onSubmit() {
-      let data = this.form;
-      data.uid = this.user.uid;
-      if (data.uid) {
-        let res = await this.create(data);
-        if (res.errcode === 0) {
-          this.$message({
-            message: '提交成功',
-            type: 'success',
-          });
-          this.form = {};
-          this.$emit('handleClose');
+    onSubmit(formName) {
+      this.$refs[formName].validate(async valid => {
+        if (valid) {
+          let data = this.form;
+          data.uid = this.user.uid;
+          if (data.uid) {
+            let res = await this.create(data);
+            if (res.errcode === 0) {
+              this.$message({
+                message: '提交成功',
+                type: 'success',
+              });
+              this.form = {};
+              this.$emit('handleClose');
+            }
+          } else {
+            this.$message({
+              message: '游客不可参与建言献策！',
+              type: 'warning',
+            });
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
         }
-      } else {
-        this.$message({
-          message: '游客不可参与网上调查！',
-          type: 'warning',
-        });
-      }
+      });
     },
+    // async onSubmit() {
+    //   let data = this.form;
+    //   data.uid = this.user.uid;
+    //   if (data.uid) {
+    //     let res = await this.create(data);
+    //     if (res.errcode === 0) {
+    //       this.$message({
+    //         message: '提交成功',
+    //         type: 'success',
+    //       });
+    //       this.form = {};
+    //       this.$emit('handleClose');
+    //     }
+    //   } else {
+    //     this.$message({
+    //       message: '游客不可参与网上调查！',
+    //       type: 'warning',
+    //     });
+    //   }
+    // },
   },
   computed: {
     ...mapState(['user']),
@@ -76,10 +122,10 @@ export default {
     text-align: center;
   }
 }
-/deep/.el-form-item__label {
-  width: 100%;
-  text-align: center;
-  font-size: 22px;
-  margin: 15px 0;
-}
+// /deep/.el-form-item__label {
+//   width: 100%;
+//   text-align: center;
+//   font-size: 22px;
+//   margin: 15px 0;
+// }
 </style>