提交

package.json

@@ -23,33 +23,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "@vue/eslint-config-standard": "^8.0.1",
-    "eslint": "^8.0.1",
-    "eslint-plugin-vue": "^9.2.0",
     "less": "^4.2.0",
     "less-loader": "^11.1.4",
     "sass": "^1.74.1",
     "sass-loader": "^13.0.0",
     "vue-template-compiler": "2.7.16"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",

src/views/About/ContactUs/Index.vue

@@ -63,31 +63,45 @@
             </div>
           </div>
           <el-form
+            ref="feekform"
             :model="form"
+            :rules="formRules"
             label-width="110rem"
             style="margin-top: 40rem"
           >
             <div class="formBarContent">
               <el-row>
                 <el-col :span="10">
-                  <el-form-item label="标题">
-                    <el-input v-model="form.title" />
+                  <el-form-item
+                    label="标题"
+                    prop="captionName"
+                  >
+                    <el-input v-model="form.captionName" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="7">
-                  <el-form-item label="反馈人">
-                    <el-input v-model="form.feedbackPerson" />
+                  <el-form-item
+                    label="反馈人"
+                    prop="userName"
+                  >
+                    <el-input v-model="form.userName" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="7">
-                  <el-form-item label="联系方式">
-                    <el-input v-model="form.contactWay" />
+                  <el-form-item
+                    label="联系方式"
+                    prop="phoneNumber"
+                  >
+                    <el-input v-model="form.phoneNumber" />
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-form-item label="反馈内容">
+              <el-form-item
+                label="反馈内容"
+                prop="abstracts"
+              >
                 <el-input
-                  v-model="form.feedbackContent"
+                  v-model="form.abstracts"
                   :autosize="{ minRows: 6, maxRows: 6 }"
                   type="textarea"
                 />
@@ -99,7 +113,10 @@
               </el-form-item>
             </div>
             <el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
-              <el-button class="subBtn">
+              <el-button
+                class="subBtn"
+                @click="handleAdd"
+              >
                 提交
               </el-button>
             </el-form-item>
@@ -136,10 +153,36 @@ export default {
         { title: '公司地址', value: '海南省三亚市天涯区育春路七巷九号', src: '/static/img/contactUs/address.png' },
       ],
       form: {
-        title: '',
-        feedbackPerson: '',
-        contactWay: '',
-        feedbackContent: '',
+        captionName: '',
+        userName: '',
+        phoneNumber: '',
+        abstracts: '',
+      },
+      formRules: {
+        captionName: [
+          { required: true, message: '请输入标题', trigger: 'blur' },
+        ],
+        userName: [
+          { required: true, message: '请输入联系人', trigger: 'blur' },
+        ],
+        phoneNumber: [
+          { required: true, message: '请输入联系方式', trigger: 'blur' },
+          {
+            validator: function (rule, value, callback) {
+              const reg = /^1[3456789]\d{9}$/;
+              const reg3 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
+              if (!(reg.test(value) || reg3.test(value))) {
+                callback(new Error('请输入手机号、座机号或邮箱'));
+              } else {
+                callback();
+              }
+            },
+            trigger: 'blur',
+          },
+        ],
+        abstracts: [
+          { required: true, message: '请输入反馈内容', trigger: 'blur' },
+        ],
       },
     };
   },
@@ -163,6 +206,27 @@ export default {
         this.screen1.bannerUrl = res.rows[0].imageurl;
       } catch (error) {}
     },
+    handleAdd () {
+      try {
+        this.$refs["feekform"].validate(valid => {
+          if (valid) {
+            this.$request.post(
+              '/official/message/add',
+              this.form,
+            ).then(res => {
+              if(res.code == 200) {
+                this.form = {
+                  captionName: '',
+                  userName: '',
+                  phoneNumber: '',
+                  abstracts: '',
+                }
+              }
+            });
+          }
+        });
+      } catch (error) {}
+    },
   },
 };
 </script>
@@ -271,6 +335,10 @@ export default {
 .el-form-item {
   margin-bottom: 22rem !important;
 }
+/deep/.el-form-item__error {
+  font-size: 12rem;
+  padding-top: 4rem;
+}
 /deep/.el-form-item__label {
   font-size: 14rem;
   line-height: 40rem;