添加表单清空功能

src/components/Panel.vue

@@ -22,7 +22,7 @@
           <el-form-item label="Email" prop="email">
             <el-input v-model="form.email"></el-input>
           </el-form-item>
-          <el-form-item label="Language Preference">
+          <el-form-item label="Language Preference" prop="language">
             <el-select v-model="form.language" placeholder="Select Language">
               
               <el-option label="English" value="English"></el-option>
@@ -33,7 +33,7 @@
               
             </el-select>
           </el-form-item>
-          <el-form-item label="Your message">
+          <el-form-item label="Your message" prop="message">
             <el-input type="text" v-model="form.message"></el-input>
           </el-form-item>
           <el-form-item>
@@ -50,6 +50,8 @@
   import { elIsEmail, elIsValidatePhone } from "@/utils/el-validate";
   import { send as emailSend } from "@emailjs/browser";
   import { emailConfig } from "@/utils/config"
+  import { SEND_COUNT_KEY, isSameDay } from "@/utils";
+  import { Store } from "@/utils/store";
 
   export default {
     data() {
@@ -95,11 +97,33 @@
       }
     },
     methods: {
+      
       submitForm(formName) {
+      const store = new Store();
+      const localStorageData = store.get(SEND_COUNT_KEY, {
+        time: Date.now(),
+        count: 0,
+      });
+
+      // 判断是否同一天
+      if (isSameDay(localStorageData.time, new Date().getTime())) {
+        // 同一天 超过3次 则不允许提交
+        if (localStorageData.count >= 3) {
+          this.$alert(
+            "You have reached the maximum number of submissions!",
+            "",
+            {
+              callback: (action) => {},
+            }
+          );
+          return;
+        }
+      }
+
         this.$refs[formName].validate(async (valid) => {
         if (valid) {
           try {
-            this.isLoading=true;
+            this.isLoading = true;
 
             const data = await emailSend(
               emailConfig.SERVICE_ID,
@@ -113,13 +137,24 @@
                 message: this.form.message,
               }
             );
-              this.isLoading=false;
+              this.isLoading = false;
               
             if (data.status === 200) {
-              this.$alert('Thank you for contacting us. We’ll get in touch with you in the next 24 hours', '', {
-          callback: action => {
+              this.$alert( "Thank you for contacting us. We’ll get in touch with you in the next 24 hours", '', 
+              {
+              callback: action => {
+                this.$refs[formName].resetFields();
           }
+         
         });
+                    // 发送成功后，保存发送次数
+                store.save(SEND_COUNT_KEY, {
+                time: Date.now(),
+                count:
+                  localStorageData.count + 1 >= 4
+                    ? 1
+                    : localStorageData.count + 1,
+              });1213             
              
             } else {
               window.alert("Form submitted failed!");
@@ -139,7 +174,7 @@
   }
   </script>
   
-  <style  scoped>
+  <style scoped>
 .el-card{
   background: #9bc943;
 }

src/views/ContactUs.vue

@@ -49,7 +49,7 @@
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-form-item label="Language Preference">
+            <el-form-item label="Language Preference" prop="languagePreference">
               <el-select
                 v-model="form.languagePreference"
                 placeholder="Select Language"
@@ -62,7 +62,7 @@
                 ></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="Your message">
+            <el-form-item label="Your message" prop="message">
               <el-input
                 type="textarea"
                 v-model="form.message"
@@ -114,7 +114,7 @@ import footerMenu from "@/components/footerMenu.vue";
 import { elIsEmail, elIsValidatePhone } from "@/utils/el-validate";
 import { send as emailSend } from "@emailjs/browser";
 import { emailConfig } from "@/utils/config";
-import { isSameDay } from "@/utils";
+import { SEND_COUNT_KEY, isSameDay } from "@/utils";
 import { Store } from "@/utils/store";
 
 export default {
@@ -221,7 +221,9 @@ export default {
                 "Thank you for contacting us. We’ll get in touch with you in the next 24 hours",
                 "",
                 {
-                  callback: (action) => {},
+                  callback: (action) => {
+                    this.$refs[formName].resetFields();
+                  },
                 }
               );
               // 发送成功后，保存发送次数
@@ -232,6 +234,7 @@ export default {
                     ? 1
                     : localStorageData.count + 1,
               });
+             
             } else {
               window.alert("Form submitted failed!");
             }