🐞 fix(package): 添加邮箱发送服务

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.3.3",
     "ant-design-vue": "^1.7.8",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.14",

src/main.js

@@ -4,6 +4,9 @@ import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import './assets/icons';
+import { init as emailjsInit  } from '@emailjs/browser'
+import { emailConfig } from './utils/config';
+
 //引入ant
 // import Antd from 'ant-design-vue'
 // import 'ant-design-vue/dist/antd.css';
@@ -27,6 +30,10 @@ window.onresize = function () {
   setRem()
 }
 
+emailjsInit({
+  publicKey: emailConfig.PUBLIC_KEY,
+});
+
 new Vue({
   router,
   render: h => h(App)

src/utils/config.js

@@ -0,0 +1,5 @@
+export const emailConfig = {
+    PUBLIC_KEY: '46mxfxbF_jfi_rN0U',
+    SERVICE_ID: 'service_8ep1eof',
+    TEMPLATE_ID: 'template_ezifkte',
+}

src/views/ContactUs.vue

@@ -109,6 +109,9 @@
 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"
+
 export default {
   name: "ContactUs",
   data() {
@@ -147,15 +150,15 @@ export default {
           {
             required: true,
             trigger: ["blur"],
-            validator: elIsValidatePhone
+            validator: elIsValidatePhone,
           },
         ],
         email: [
           {
             required: true,
             trigger: ["blur"],
-            validator: elIsEmail
-          }
+            validator: elIsEmail,
+          },
         ],
         message: [{ required: true, message: "Please enter" }],
       },
@@ -163,10 +166,36 @@ export default {
   },
   methods: {
     submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
+      this.$refs[formName].validate(async (valid) => {
         if (valid) {
           // 在这里可以添加表单提交的逻辑,例如发送数据到服务器
-          console.log("Form submitted:", this.form);
+          try {
+            const language = this.languages.find(
+              (item) => item.value === this.form.languagePreference
+            );
+
+            const data = await emailSend(
+              emailConfig.SERVICE_ID,
+              emailConfig.TEMPLATE_ID,
+              {
+                from_name: "test",
+                name: this.form.name,
+                businessName: this.form.businessName,
+                mobile: this.form.mobile,
+                email: this.form.email,
+                languagePreference: language.value,
+                message: this.form.message,
+              }
+            );
+
+            if (data.status === 200) {
+              window.alert("Form submitted successfully!");
+            } else {
+              window.alert("Form submitted failed!");
+            }
+          } catch (error) {
+            console.log("Error submitting form!", error);
+          }
         } else {
           console.log("Error submitting form!");
           return false;

vue.config.js

@@ -7,7 +7,7 @@ const postcssPxToRem = require("postcss-pxtorem")
 
 module.exports = defineConfig({
   transpileDependencies: true,
-  publicPath:'./',
+  publicPath: './',
   // lintOnSave:false,
   // devServer:{
   //   host:'0.0.0.0',
@@ -19,43 +19,43 @@ module.exports = defineConfig({
   //     'Accept-Control-Allow-Origin':'*',
   //   }
   // },
-    chainWebpack:config=>{
-      //svg图标加载
-      config.module
-      .rule('svg')
-       .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
-      //.exclude.add(resolve('src/icons'))
-      .end()
-    
-      config.module
-      .rule('icons')//定义一个名叫icons的规则
-      .test(/\.svg$/)//设置icons的匹配正则
-      //设置当前规则的作用目录，只在当前目录下才执行当前规则 
-       .include.add(path.join(__dirname, 'src/assets/icons'))
-    //   .include.add(resolve('src/icons'))
-      .end()
-      .use('svg-sprite-loader')//指定一个命叫svg-sprite的loader配置
-      .loader('svg-sprite-loader')//改配置使用svg-sprite-loader作为处理loader
-      .options({
-        // 该 svg-sprite-loader 的配置
-        symbolId:'icon-[name]'
-      })
-      .end()
-     },
+  chainWebpack: config => {
+    //svg图标加载
+    config.module
+      .rule('svg')
+      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
+      //.exclude.add(resolve('src/icons'))
+      .end()
 
-    css: {
-      loaderOptions: {
-        postcss: {
-          postcssOptions: {
-            plugins: [
-              postcssPxToRem({
-                rootValue: 16, // 基准值，根据设计稿调整
-                propList: ['*'], // 需要转换的属性，这里设置为全部
-              })
-            ]
-          }
+    config.module
+      .rule('icons')//定义一个名叫icons的规则
+      .test(/\.svg$/)//设置icons的匹配正则
+      //设置当前规则的作用目录，只在当前目录下才执行当前规则 
+      .include.add(path.join(__dirname, 'src/assets/icons'))
+      //   .include.add(resolve('src/icons'))
+      .end()
+      .use('svg-sprite-loader')//指定一个命叫svg-sprite的loader配置
+      .loader('svg-sprite-loader')//改配置使用svg-sprite-loader作为处理loader
+      .options({
+        // 该 svg-sprite-loader 的配置
+        symbolId: 'icon-[name]'
+      })
+      .end()
+  },
+
+  css: {
+    loaderOptions: {
+      postcss: {
+        postcssOptions: {
+          plugins: [
+            postcssPxToRem({
+              rootValue: 16, // 基准值，根据设计稿调整
+              propList: ['*'], // 需要转换的属性，这里设置为全部
+            })
+          ]
         }
       }
     }
-    
+  }
+
 })