✨ feat(ContactUs): 添加发送限制

src/utils/index.js

@@ -0,0 +1,10 @@
+// 判断时间戳是否是同一天
+export const isSameDay = (time1, time2) => {
+    const date1 = new Date(time1);
+    const date2 = new Date(time2);
+    return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
+}
+
+export const SEND_COUNT_KEY = 'SEND_COUNT';

src/utils/store.js

@@ -0,0 +1,22 @@
+// localStorage
+export class Store {
+    store = null;
+    constructor(store = localStorage) {
+        
+        this.store = store;
+        
+    }
+    save(key, value) {
+        this.store.setItem(key, JSON.stringify(value));
+    }
+    get(key, defaultValue) {
+        console.log('localStorage',this.store);
+        return JSON.parse(this.store.getItem(key)) || defaultValue;
+    }
+    remove(key) {
+        this.store.removeItem(key);
+    }
+    clear() {
+        this.store.clear();
+    }
+}

src/views/ContactUs.vue

@@ -93,8 +93,12 @@
               </div>
             </div>
             <el-form-item>
-              <el-button type="primary" @click="submitForm('contactForm')"
-              :loading="isLoading">Submit</el-button>
+              <el-button
+                type="primary"
+                @click="submitForm('contactForm')"
+                :loading="isLoading"
+                >Submit</el-button
+              >
             </el-form-item>
           </el-form>
         </div>
@@ -109,13 +113,15 @@ import headTop from "@/components/headTop.vue";
 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 { emailConfig } from "@/utils/config";
+import { isSameDay } from "@/utils";
+import { Store } from "@/utils/store";
 
 export default {
   name: "ContactUs",
   data() {
     return {
-      isLoading:false,
+      isLoading: false,
       form: {
         name: "",
         businessName: "",
@@ -129,8 +135,7 @@ export default {
         { value: "中文", label: "中文" },
         { value: "한국", label: "한국" },
         { value: "हिंदी", label: "हिंदी" },
-        { value: "Ελληνικά", label: "Ελληνικά" },       
-       
+        { value: "Ελληνικά", label: "Ελληνικά" },
       ],
       rules: {
         name: [
@@ -161,20 +166,40 @@ export default {
             validator: elIsEmail,
           },
         ],
-       
       },
     };
   },
   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 {
             const language = this.languages.find(
               (item) => item.value === this.form.languagePreference
-            );       
+            );
 
-            this.isLoading=true
+            this.isLoading = true;
 
             const data = await emailSend(
               emailConfig.SERVICE_ID,
@@ -189,14 +214,24 @@ export default {
               }
             );
 
-            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) => {},
+                }
+              );
+              // 发送成功后，保存发送次数
+              store.save(SEND_COUNT_KEY, {
+                time: Date.now(),
+                count:
+                  localStorageData.count + 1 >= 4
+                    ? 1
+                    : localStorageData.count + 1,
+              });
             } else {
               window.alert("Form submitted failed!");
             }
@@ -204,7 +239,7 @@ export default {
             console.log("Error submitting form!", error);
           }
         } else {
-          this.isLoading=false
+          this.isLoading = false;
           console.log("Error submitting form!");
           return false;
         }