'表单提交'

pages/campus/index.vue

@@ -2,7 +2,34 @@
   <div class="container">
     <div class="header">
       <span>中德全国校区</span>
-      <div class="form channel">
+      <div class="right">
+        <div class="submit-area">
+          <div class="label">加盟申请</div>
+          <div class="phone-num">
+            <img src="http://res.training.luojigou.vip/FmUjRlN7yn8o8HkXV21yOAJt-2C0?imageView2/0/q/50|imageslim" alt="" />
+            <div class="num">400-6807300</div>
+          </div>
+          <div class="form">
+            <el-form :model="form" :rules="rules" ref="ruleForm">
+              <el-form-item prop="name">
+                <el-input placeholder="姓名" v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item prop="phone">
+                <el-input placeholder="手机号" v-model="form.phone"></el-input>
+              </el-form-item>
+              <el-form-item prop="email">
+                <el-input placeholder="邮箱地址" v-model="form.email"></el-input>
+              </el-form-item>
+              <el-form-item prop="city">
+                <el-input placeholder="加盟城市" v-model="form.city"></el-input>
+              </el-form-item>
+              <div class="submit" @click="handleSubmit('ruleForm')">提交申请</div>
+            </el-form>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="form channel">
         <div class="text control">加盟申请</div>
         <div class="info control">
           <img src="~assets/images/campus/phone.png" alt="">
@@ -21,7 +48,7 @@
           <input type="text" placeholder="加盟城市">
         </div>
         <div class="submit">提交申请</div>
-      </div>
+      </div> -->
     </div>
 
     <!-- 全国校区 -->
@@ -64,6 +91,8 @@
 </template>
 
 <script>
+import axios from "axios";
+
 if (process.browser) {
   var {WOW} = require('wowjs')
 }
@@ -71,6 +100,7 @@ if (process.browser) {
 export default {
   data() {
     return {
+      form: {},
       campusList: [
         {
           id: 1,
@@ -105,7 +135,27 @@ export default {
           name: '莆田校区',
           area: '上海市·上海市市辖区·青浦区'
         }
-      ]
+      ],
+      rules: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        phone: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          {
+            pattern: /^1[34578]\d{9}$/,
+            message: "请输入正确手机号",
+            trigger: "blur",
+          },
+        ],
+        email: [
+          { required: true, message: "请输入邮箱地址", trigger: "blur" },
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"],
+          },
+        ],
+        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
+      },
     }
   },
   head() {
@@ -137,12 +187,38 @@ export default {
     }
   },
   methods: {
-
+    async handleSubmit(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          const { data } = await axios.post(`${this.$store.state.wordpressAPI}/official-api/joinIn`,{
+            ...this.form
+          });
+          if(data.status == 200 ) {
+            this.$notify({
+              title: '成功',
+              message: '提交成功',
+              type: 'success'
+            });
+            this.$refs[formName].resetFields();
+          } else {
+              this.$notify({
+                title: '失败',
+                message: '提交失败',
+                type: 'info'
+              });
+          }
+          // this.$message.success('提交成功');
+        } else {
+          console.log('err');
+          return false;
+        }
+      });
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 @import "~static/common/style.sass";
 
@@ -182,72 +258,150 @@ export default {
     color:#ffffff;
     line-height: 112px;
   }
-  .form {
+  .right {
     font-size: 16px;
     position: absolute;
     right: 13.8%;
-    // right: 266px;
     bottom: 124px;
     width: 327px;
     height: 450px;
-    background:#FFFFFF;
+    background-color: #fff;
+    padding: 34px 38px 12px 39px;
     border-radius: 3px;
-    padding: 34px 0 12px;
-    div.text {
-      font-size:14px;
-      line-height:20px;
-      font-family:PingFangSC-Regular,PingFang SC;
-      font-weight:400;
-      color: #5B5F5D;
-      margin-bottom: 7px;
-    }
-    div.info {
-      display: flex;
-      align-items: center;
-      margin-bottom: 20px;
-      .phone {
-        font-size: 26px;
-        font-family: PingFangSC-Medium,PingFang SC;
-        font-weight: 500;
-        margin-left: 15px;
+    .submit-area {
+      .label {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(91, 95, 93, 1);
+        margin-bottom: 7px;
       }
-    }
-    .control {
-      width:250px;
-      margin: 0 auto;
-    }
-    .control-input {
-      margin: 0 auto;
-      width:250px;
-      border-radius: 3px;
-      border: 1px solid rgba(151,151,151,1);
-      margin-bottom: 23px;
-      input {
-        width: 100%;
-        height:44px;
-        line-height: 44px;
-        padding: 0 13px ;
-        background: none;
-        outline: none;  
-        border: 0px;
-        &::-webkit-input-placeholder {
-          color: #A4A6A5;
+      .phone-num {
+        display: flex;
+        align-items: center;
+        img {
+          width: 22px;
+          height: 22px;
+          display: block;
+          margin-right: 15px;
+        }
+        .num {
+          font-size: 26px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: bold;
+          color: rgba(0, 0, 0, 1);
+        }
+      }
+      .form {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        .el-input {
+          width: 250px;
+          height: 44px;
+        }
+        .el-form-item__error {
+          color: #cd2026;
+          // left: 124px;
+        }
+        .el-form-item {
+          &.is-error {
+            .el-input__inner {
+              border-color: #dcdfe6;
+            }
+          }
+        }
+        .submit {
+          cursor: pointer;
+          margin: 0 auto;
+          text-align: center;
+          font-size: 14px;
+          width: 148px;
+          height: 27px;
+          line-height: 27px;
+          background: linear-gradient(
+            180deg,
+            rgba(88, 144, 251, 1) 0%,
+            rgba(51, 117, 252, 1) 100%
+          );
+          box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
+          border-radius: 3px;
+          color: #ffffff;
+        }
+        img {
+          width: 176px;
+          height: 55px;
         }
       }
-    }
-    .submit {
-      margin: 0 auto;
-      text-align: center;
-      font-size:14px;
-      width: 148px;
-      height: 27px;
-      line-height: 27px;
-      background: linear-gradient(180deg,rgba(88,144,251,1) 0%,rgba(51,117,252,1) 100%);
-      box-shadow: 0px 7px 14px 0px rgba(136,176,254,0.79);
-      border-radius: 3px;
-      color: #ffffff;
     }
   }
+  // .form {
+  //   font-size: 16px;
+  //   position: absolute;
+  //   right: 13.8%;
+  //   bottom: 124px;
+  //   width: 327px;
+  //   height: 450px;
+  //   background:#FFFFFF;
+  //   border-radius: 3px;
+  //   padding: 34px 0 12px;
+  //   div.text {
+  //     font-size:14px;
+  //     line-height:20px;
+  //     font-family:PingFangSC-Regular,PingFang SC;
+  //     font-weight:400;
+  //     color: #5B5F5D;
+  //     margin-bottom: 7px;
+  //   }
+  //   div.info {
+  //     display: flex;
+  //     align-items: center;
+  //     margin-bottom: 20px;
+  //     .phone {
+  //       font-size: 26px;
+  //       font-family: PingFangSC-Medium,PingFang SC;
+  //       font-weight: 500;
+  //       margin-left: 15px;
+  //     }
+  //   }
+  //   .control {
+  //     width:250px;
+  //     margin: 0 auto;
+  //   }
+  //   .control-input {
+  //     margin: 0 auto;
+  //     width:250px;
+  //     border-radius: 3px;
+  //     border: 1px solid rgba(151,151,151,1);
+  //     margin-bottom: 23px;
+  //     input {
+  //       width: 100%;
+  //       height:44px;
+  //       line-height: 44px;
+  //       padding: 0 13px ;
+  //       background: none;
+  //       outline: none;  
+  //       border: 0px;
+  //       &::-webkit-input-placeholder {
+  //         color: #A4A6A5;
+  //       }
+  //     }
+  //   }
+  //   .submit {
+  //     margin: 0 auto;
+  //     text-align: center;
+  //     font-size:14px;
+  //     width: 148px;
+  //     height: 27px;
+  //     line-height: 27px;
+  //     background: linear-gradient(180deg,rgba(88,144,251,1) 0%,rgba(51,117,252,1) 100%);
+  //     box-shadow: 0px 7px 14px 0px rgba(136,176,254,0.79);
+  //     border-radius: 3px;
+  //     color: #ffffff;
+  //   }
+  // }
 }
 
 .campus {

pages/cooperate/index.vue

@@ -24,8 +24,8 @@
             </div>
             <div class="form">
               <el-form :model="form" :rules="rules" ref="ruleForm">
-                <el-form-item prop="username">
-                  <el-input placeholder="姓名" v-model="form.username"></el-input>
+                <el-form-item prop="name">
+                  <el-input placeholder="姓名" v-model="form.name"></el-input>
                 </el-form-item>
                 <el-form-item prop="phone">
                   <el-input placeholder="手机号" v-model="form.phone"></el-input>
@@ -115,8 +115,8 @@
     <!-- 校区 -->
     <div class="campus">
       <div class="label">
-        <div class="label-en">CAMPUS</div>
-        <div class="label-zn">全国校区分布</div>
+        <div class="label-en wow animate__animated animate__fadeInDown">CAMPUS</div>
+        <div class="label-zn wow animate__animated animate__fadeInDown">全国校区分布</div>
       </div>
       <img
         class="campus-img"
@@ -127,8 +127,8 @@
     <!-- 风采 -->
     <div class="show cp">
       <div class="label">
-        <div class="label-en">SHOW</div>
-        <div class="label-zn">校园风采</div>
+        <div class="label-en wow animate__animated animate__fadeInDown">SHOW</div>
+        <div class="label-zn wow animate__animated animate__fadeInDown">校园风采</div>
       </div>
       <div class="show-box">
         <div class="show-item" v-for="item in showImg" :key="item.id">
@@ -142,8 +142,8 @@
     <!-- 加盟流程 -->
     <div class="join">
       <div class="label">
-        <div class="label-en">FLOW</div>
-        <div class="label-zn">加盟流程</div>
+        <div class="label-en wow animate__animated animate__fadeInDown">FLOW</div>
+        <div class="label-zn wow animate__animated animate__fadeInDown">加盟流程</div>
       </div>
       <div class="flow">
         <div class="line-box">
@@ -181,14 +181,14 @@
     <!-- 加入我们 -->
     <div class="join-us">
       <div class="label">
-        <div class="label-en">JOIN US</div>
-        <div class="label-zn">加入我们</div>
+        <div class="label-en wow animate__animated animate__fadeInDown">JOIN US</div>
+        <div class="label-zn wow animate__animated animate__fadeInDown">加入我们</div>
       </div>
       <div class="line"></div>
       <div class="join-us-form">
-        <el-form :model="form" :rules="rules" ref="ruleForm">
-          <el-form-item prop="username">
-            <el-input placeholder="姓名" v-model="form.username"></el-input>
+        <el-form :model="form" :rules="rules" ref="ruleBottomForm">
+          <el-form-item prop="name">
+            <el-input placeholder="姓名" v-model="form.name"></el-input>
           </el-form-item>
           <el-form-item prop="phone">
             <el-input placeholder="手机号" v-model="form.phone"></el-input>
@@ -206,7 +206,7 @@
               <el-input placeholder="邮箱地址:"></el-input>
         <el-input placeholder="加盟城市:"></el-input>-->
         <img
-          @click="handleSubmit('ruleForm')"
+          @click="handleSubmit('ruleBottomForm')"
           src="http://res.training.luojigou.vip/FipijbS16GJiwUe4oaWOBWjFxGLO?imageView2/0/q/50|imageslim"
           alt=""
         >
@@ -353,13 +353,14 @@ export default {
   data() {
     return {
       form: {},
+      bottomform: {},
       advantageImg,
       exprienceImg,
       showImg,
       joinImg,
       joinData,
       rules: {
-        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
         phone: [
           { required: true, message: "请输入手机号", trigger: "blur" },
           {
@@ -401,16 +402,32 @@ export default {
   async asyncData({ params, store }) {},
   methods: {
     async handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
+      this.$refs[formName].validate(async (valid) => {
         if (valid) {
-          // const data = await axios(`${store.state.wordpressAPI}/proCategory/showAll/main`)
+          const { data } = await axios.post(`${this.$store.state.wordpressAPI}/official-api/joinIn`,{
+            ...this.form
+          });
+          if(data.status == 200 ) {
+            this.$notify({
+              title: '成功',
+              message: '提交成功',
+              type: 'success'
+            });
+            this.$refs[formName].resetFields();
+          } else {
+              this.$notify({
+                title: '失败',
+                message: '提交失败',
+                type: 'info'
+              });
+          }
+          // this.$message.success('提交成功');
         } else {
-          console.log("error submit!!");
+          console.log('err');
           return false;
         }
       });
-      console.log(this.form);
-    },
+    }
   },
 };
 </script>
@@ -640,13 +657,11 @@ export default {
       left: 50%;
       /* left: 763px; */
       transform: translateX(-50%);
-
       .label-en {
         font-size: 78px;
         font-family: PingFangSC-Semibold, PingFang SC;
         font-weight: 600;
-        color: rgba(35, 106, 250, 1);
-        opacity: 0.16;
+        color: rgba(35, 106, 250, 0.16);
       }
       .label-zn {
         font-size: 58px;
@@ -674,7 +689,9 @@ export default {
       display: flex;
       position: absolute;
       top: 321px;
-      left: 344px;
+      left: 50%;
+      transform: translateX(-50%);
+      // left: 344px;
       .exprience-item {
         height: 176px;
         position: relative;
@@ -715,8 +732,7 @@ export default {
         font-size: 78px;
         font-family: PingFangSC-Semibold, PingFang SC;
         font-weight: 600;
-        color: rgba(35, 106, 250, 1);
-        opacity: 0.16;
+        color: rgba(35, 106, 250, 0.16);
       }
       .label-zn {
         font-size: 58px;
@@ -753,8 +769,7 @@ export default {
         font-size: 78px;
         font-family: PingFangSC-Semibold, PingFang SC;
         font-weight: 600;
-        color: rgba(35, 106, 250, 1);
-        opacity: 0.16;
+        color: rgba(35, 106, 250, 0.16);
       }
       .label-zn {
         font-size: 58px;
@@ -830,8 +845,7 @@ export default {
         font-size: 78px;
         font-family: PingFangSC-Semibold, PingFang SC;
         font-weight: 600;
-        color: rgba(35, 106, 250, 1);
-        opacity: 0.16;
+        color: rgba(35, 106, 250, 0.16);
       }
       .label-zn {
         font-size: 58px;
@@ -919,8 +933,7 @@ export default {
         font-size: 78px;
         font-family: PingFangSC-Semibold, PingFang SC;
         font-weight: 600;
-        color: rgba(255, 255, 255, 1);
-        opacity: 0.16;
+        color: rgba(255, 255, 255, 0.16);
       }
       .label-zn {
         font-size: 58px;

store/index.js

@@ -5,7 +5,7 @@ import axios from 'axios'
 // Vue.use(Vuex)
 
 export const state = () => ({
-	wordpressAPI: 'http://visney.cn',
+	wordpressAPI: 'https://open.zaojiao.net',
 	newsNav: [
 		{
 			icon: require('~/assets/images/news/cate_01.png'),