fix：接口域名统一修改，手机号验证正则更换

components/common/form.vue

@@ -1,220 +1,220 @@
-<template>
-  <div class="submit-area">
-    <div class="label">加盟申请</div>
-    <div class="phone-num">
-      <img
-        src="https://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>
-        <el-form-item prop="project">
-          <el-select placeholder="合作项目" v-model="form.project">
-            <el-option
-              v-for="(item, index) in projectList"
-              :key="index"
-              :label="item.title"
-              :value="item.title">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-button class="submit" :loading="loading" :disabled="disabled" @click="handleSubmit('ruleForm')">提交申请</el-button>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-
-export default {
-  data() {
-    return {
-      form: {},
-      loading: false,
-      disabled: false,
-      rules: {
-        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-        phone: [
-          { required: true, message: "请输入手机号", trigger: "blur" },
-          {
-            pattern: /^1[345789]\d{9}$/,
-            message: "请输入正确手机号",
-            trigger: "blur",
-          },
-        ],
-        // email: [
-        //   { required: true, message: "请输入邮箱地址", trigger: "blur" },
-        //   {
-        //     type: "email",
-        //     message: "请输入正确的邮箱地址",
-        //     trigger: ["blur", "change"],
-        //   },
-        // ],
-        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
-        project: [{ required: true, message: "请选择合作项目", trigger: "blur" }]
-      },
-      // 1-家庭（专柜）1-逻辑狗思维游戏HOME&PLUS馆 2-思维芯游戏室 2-“思维芯”四大课程体系 4-逻辑狗·探索小镇
-      projectList: [
-        {
-          id: 1,
-          value: 1,
-          title: '逻辑狗专柜'
-        },
-        {
-          id: 2,
-          value: 1,
-          title: '逻辑狗创意馆'
-        },
-        {
-          id: 3,
-          value: 2,
-          title: '思维芯游戏室'
-        },
-        {
-          id: 4,
-          value: 2,
-          title: '“思维芯”四大课程体系'
-        },
-        {
-          id: 5,
-          value: 4,
-          title: '逻辑狗·探索小镇'
-        }
-      ],
-    }
-  },
-  methods: {
-    async handleSubmit(formName) {
-      this.$refs[formName].validate(async (valid) => {
-        if (valid) {
-          // 根据选项获取选项的value
-          // const index = this.projectList.findIndex(item => {
-          //   return item.id === this.form.project;
-          // })
-          // if(index == -1) {
-          //   this.$notify({
-          //     title: '失败',
-          //     message: '选择数据有误',
-          //     type: 'info'
-          //   });
-          //   return
-          // }
-          this.loading = true;
-          this.disabled = true;
-          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.loading = false;
-          this.disabled = false;
-          // this.$message.success('提交成功');
-        } else {
-          this.loading = false;
-          this.disabled = false;
-          console.log('err');
-          return false;
-        }
-      });
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.submit-area {
-  background: #FFFFFF;
-  border-radius: 20px;
-  padding: 32px 38px 32px;
-  .label {
-    text-align: left;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, sans-serif;
-    font-weight: 400;
-    color: #000000;
-    margin-bottom: 7px;
-  }
-  .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, sans-serif;
-      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;
-        }
-      }
-    }
-    .el-button {
-      border: none;
-    }
-    .submit {
-      margin: 0 auto;
-      text-align: center;
-      font-size: 14px;
-      color: #fff;
-      width: 148px;
-      height: 34px;
-      background: linear-gradient(180deg, #4482FE 0%, #004DE7 100%);
-      box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
-      border-radius: 32px;
-    }
-    img {
-      width: 176px;
-      height: 55px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="submit-area">
+    <div class="label">加盟申请</div>
+    <div class="phone-num">
+      <img
+        src="https://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>
+        <el-form-item prop="project">
+          <el-select placeholder="合作项目" v-model="form.project">
+            <el-option
+              v-for="(item, index) in projectList"
+              :key="index"
+              :label="item.title"
+              :value="item.title">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-button class="submit" :loading="loading" :disabled="disabled" @click="handleSubmit('ruleForm')">提交申请</el-button>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      form: {},
+      loading: false,
+      disabled: false,
+      rules: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        phone: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          {
+            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
+            message: "请输入正确手机号",
+            trigger: "blur",
+          },
+        ],
+        // email: [
+        //   { required: true, message: "请输入邮箱地址", trigger: "blur" },
+        //   {
+        //     type: "email",
+        //     message: "请输入正确的邮箱地址",
+        //     trigger: ["blur", "change"],
+        //   },
+        // ],
+        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
+        project: [{ required: true, message: "请选择合作项目", trigger: "blur" }]
+      },
+      // 1-家庭（专柜）1-逻辑狗思维游戏HOME&PLUS馆 2-思维芯游戏室 2-“思维芯”四大课程体系 4-逻辑狗·探索小镇
+      projectList: [
+        {
+          id: 1,
+          value: 1,
+          title: '逻辑狗专柜'
+        },
+        {
+          id: 2,
+          value: 1,
+          title: '逻辑狗创意馆'
+        },
+        {
+          id: 3,
+          value: 2,
+          title: '思维芯游戏室'
+        },
+        {
+          id: 4,
+          value: 2,
+          title: '“思维芯”四大课程体系'
+        },
+        {
+          id: 5,
+          value: 4,
+          title: '逻辑狗·探索小镇'
+        }
+      ],
+    }
+  },
+  methods: {
+    async handleSubmit(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          // 根据选项获取选项的value
+          // const index = this.projectList.findIndex(item => {
+          //   return item.id === this.form.project;
+          // })
+          // if(index == -1) {
+          //   this.$notify({
+          //     title: '失败',
+          //     message: '选择数据有误',
+          //     type: 'info'
+          //   });
+          //   return
+          // }
+          this.loading = true;
+          this.disabled = true;
+          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.loading = false;
+          this.disabled = false;
+          // this.$message.success('提交成功');
+        } else {
+          this.loading = false;
+          this.disabled = false;
+          console.log('err');
+          return false;
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.submit-area {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 32px 38px 32px;
+  .label {
+    text-align: left;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, sans-serif;
+    font-weight: 400;
+    color: #000000;
+    margin-bottom: 7px;
+  }
+  .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, sans-serif;
+      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;
+        }
+      }
+    }
+    .el-button {
+      border: none;
+    }
+    .submit {
+      margin: 0 auto;
+      text-align: center;
+      font-size: 14px;
+      color: #fff;
+      width: 148px;
+      height: 34px;
+      background: linear-gradient(180deg, #4482FE 0%, #004DE7 100%);
+      box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
+      border-radius: 32px;
+    }
+    img {
+      width: 176px;
+      height: 55px;
+    }
+  }
+}
+</style>

pages/campus/index.vue

@@ -1,562 +1,562 @@
-<template>
-  <div class="container">
-    <div class="header">
-      <span>中德全国校区</span>
-      <div class="right">
-        <div class="submit-area">
-          <div class="label">加盟申请</div>
-          <div class="phone-num">
-            <img src="https://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>
-              <el-form-item prop="project">
-                <el-select placeholder="合作项目" v-model="form.project">
-                  <el-option
-                    v-for="(item, index) in projectList"
-                    :key="index"
-                    :label="item.title"
-                    :value="item.title">
-                  </el-option>
-                </el-select>
-              </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="">
-          <div class="phone">400-6807300</div>
-        </div>
-        <div class="control-input">
-          <input type="text" placeholder="姓名">
-        </div>
-        <div class="control-input">
-          <input type="text" placeholder="手机号">
-        </div>
-        <div class="control-input">
-          <input type="text" placeholder="邮箱地址">
-        </div>
-        <div class="control-input">
-          <input type="text" placeholder="加盟城市">
-        </div>
-        <div class="submit">提交申请</div>
-      </div> -->
-    </div>
-
-    <!-- 全国校区 -->
-    <div class="campus">
-      <div class="title-content">
-        <div class="c-title title-zh title-content wow animate__animated animate__fadeInDown">
-          <div class="title-en">NATIONWIDE</div>
-          全国校区
-        </div>
-      </div>
-      <div class="c-content w1200">
-        <div class="list-wrap">
-          <ul class="list">
-            <li class="campus-item" v-for="(item, index) in campusList" :key="index">
-              <img :src="item.imgUrl" alt="">
-              <div class="info">
-                <div class="area">{{ item.area }}</div>
-                <div class="name">{{ item.name }}</div>
-                <div class="address">
-                  <div class="icon"><img :src="iconAddr" :srcset="`${iconAddrSet[0]} 1x, ${iconAddrSet[1]} 2x`" alt=""></div>
-                  <p>{{ item.address }}</p>
-                </div>
-                <div class="phone">
-                  <div class="icon"><img :src="iconPhone" :srcset="`${iconPhoneSet[0]} 1x, ${iconPhoneSet[1]} 2x`" alt=""></div>
-                  <p>{{ item.phone }}</p>
-                </div>
-                <div class="detail">
-                  <!-- to="{name:'news-category',params:{category: indexFirstNewsList.articleCategoryId}} -->
-                  <nuxt-link :to="{ name: 'campus-type', params: { type: item.id } }">
-                    查看详情
-                  </nuxt-link>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-
-if (process.browser) {
-  var {WOW} = require('wowjs')
-}
-
-export default {
-  data() {
-    return {
-      form: {},
-      iconAddr: require('~/assets/images/campus/icon_address.png'),
-      iconAddrSet: [require('~/assets/images/campus/icon_address.png'), require('~/assets/images/campus/icon_adderss@2x.png')],
-      iconPhone: require('~/assets/images/campus/icon_phone.png'),
-      iconPhoneSet: [require('~/assets/images/campus/icon_phone.png'), require('~/assets/images/campus/icon_phone@2x.png')],
-      campusList: [
-        {
-          id: 1,
-          // imgUrl: 'http://zaojiao.net/public/static/index/images/xq/xq1-1.jpg',
-          imgUrl: require('~/assets/images/campus/xq1-1.jpg'),
-          address: '盈港东路8300弄佳乐苑社区商铺',
-          phone: '4007288000',
-          name: '襄阳校区',
-          area: '上海市·上海市市辖区·青浦区'
-        },
-        {
-          id: 2,
-          imgUrl: require('~/assets/images/campus/xq2-1.jpg'),
-          address: '盈港东路8300弄佳乐苑社区商铺',
-          phone: '4007288000',
-          name: '武汉校区',
-          area: '上海市·上海市市辖区·青浦区'
-        },
-        {
-          id: 3,
-          imgUrl: require('~/assets/images/campus/xq3-1.jpg'),
-          address: '盈港东路8300弄佳乐苑社区商铺',
-          phone: '4007288000',
-          name: '唐山校区',
-          area: '上海市·上海市市辖区·青浦区'
-        },
-        {
-          id: 4,
-          imgUrl: require('~/assets/images/campus/xq4-1.jpg'),
-          address: '盈港东路8300弄佳乐苑社区商铺',
-          phone: '4007288000',
-          name: '莆田校区',
-          area: '上海市·上海市市辖区·青浦区'
-        }
-      ],
-      rules: {
-        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-        phone: [
-          { required: true, message: "请输入手机号", trigger: "blur" },
-          {
-            pattern: /^1[345789]\d{9}$/,
-            message: "请输入正确手机号",
-            trigger: "blur",
-          },
-        ],
-        // email: [
-        //   { required: true, message: "请输入邮箱地址", trigger: "blur" },
-        //   {
-        //     type: "email",
-        //     message: "请输入正确的邮箱地址",
-        //     trigger: ["blur", "change"],
-        //   },
-        // ],
-        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
-      },
-      // 1-家庭（专柜）1-逻辑狗思维游戏HOME&PLUS馆 2-思维芯游戏室 2-“思维芯”四大课程体系 4-逻辑狗·探索小镇
-      projectList: [
-        {
-          id: 1,
-          value: 1,
-          title: '逻辑狗专柜'
-        },
-        {
-          id: 2,
-          value: 1,
-          title: '逻辑狗创意馆'
-        },
-        {
-          id: 3,
-          value: 2,
-          title: '思维芯游戏室'
-        },
-        {
-          id: 4,
-          value: 2,
-          title: '“思维芯”四大课程体系'
-        },
-        {
-          id: 5,
-          value: 4,
-          title: '逻辑狗·探索小镇'
-        }
-      ],
-    }
-  },
-  head() {
-    return {
-      title: "逻辑狗官网-中德智慧教育",
-      meta: [
-        {
-          name: "keywords",
-          hid: "keywords",
-          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
-        },
-        {
-          name: "description",
-          hid: "description",
-          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
-        },
-      ],
-    };
-  },
-  created() {
-
-  },
-  mounted() {
-    if (process.browser) { 
-      new WOW({
-          offset: 0,   
-          live: true
-      }).init()
-    }
-  },
-  methods: {
-    async handleSubmit(formName) {
-      this.$refs[formName].validate(async (valid) => {
-        if (valid) {
-          // const index = this.projectList.findIndex(item => {
-          //   return item.id === this.form.project;
-          // })
-          // if(index == -1) {
-          //   this.$notify({
-          //     title: '失败',
-          //     message: '选择数据有误',
-          //     type: 'info'
-          //   });
-          // }
-          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">
-
-@import "~static/common/style.sass";
-
-.title-content {
-  position: relative;
-  text-align: center;
-}
-.title-en {
-  position: absolute;
-  font-size: 56px;
-  font-family: PingFangSC-Semibold, sans-serif;
-  font-weight: 600;
-  color:rgba(35,106,250,1);
-  opacity: 0.16;
-}
-
-.title-zh {
-  position: relative;
-  display: inline-block;
-  font-size: 46px;
-  font-family: PingFangSC-Semibold, sans-serif;
-  font-weight: 600;
-  color:#333333;
-  text-align: center;
-}
-
-.header {
-  position: relative;
-  background-image: url('~assets/images/campus/header.png');
-  background-repeat: no-repeat;
-  // background-size: cover;
-  background-size: 100% 100%;
-  // height: 882px;
-  height: 595px;
-  // padding: 446px 0 0 302px;
-  padding: 230px 0 0 15%;
-  background-position: center;
-  span {
-    font-size: 66px;
-    font-family: PingFangSC-Semibold, sans-serif;
-    font-weight: 600;
-    color:#ffffff;
-    line-height: 112px;
-  }
-  .right {
-    font-size: 16px;
-    position: absolute;
-    right: 13.8%;
-    top: 50%;
-    transform: translateY(-50%);
-    // bottom: 124px;
-    width: 327px;
-    height: 450px;
-    background-color: #fff;
-    padding: 34px 38px 12px 39px;
-    border-radius: 3px;
-    .submit-area {
-      .label {
-        font-size: 14px;
-        font-family: PingFangSC-Regular, sans-serif;
-        font-weight: 400;
-        color: rgba(91, 95, 93, 1);
-        margin-bottom: 7px;
-      }
-      .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, sans-serif;
-          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;
-        }
-      }
-    }
-  }
-  // .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, sans-serif;
-  //     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, sans-serif;
-  //       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 {
-  padding: 192px 0 206px;
-  .title-en {
-    top: -40px;
-    left: 50%;
-    transform: translate(-50%);
-  }
-  .c-content {
-    margin-top: 130px;
-    ul {
-      li.campus-item {
-        display: inline-block;
-        width: 374px;
-        background:#FFFFFF;
-        box-shadow: 0px 9px 13px 0px rgba(123,166,252,0.13);
-        border-radius: 10px;
-        margin: 0 38px 42px 0;
-        transition: transform .3s ease-in-out;
-        &:nth-child(3n) {
-          margin-right: 0;
-        }
-        &:hover {
-          transform: translate3d(0,-8px,0);
-        }
-        img {
-          width: 100%;
-          border-radius: 18px 18px 0 0;
-        }
-        .info {
-          height: 175px;
-          color: #898A8C;
-          padding: 15px 20px 15px;
-          .icon {
-            margin-right: 8px;
-            img {
-              width: 10px;
-              height: 12px;
-            }
-          }
-        }
-        .area {
-          font-size:14px;
-          font-family: PingFangSC-Regular, sans-serif;
-          font-weight: 400;
-          color:#898A8C;
-          line-height: 20px;
-        }
-        .name {
-          font-size:22px;
-          font-family: PingFangSC-Medium, sans-serif;
-          font-weight:500;
-          color:#1F241E;
-          line-height:30px;
-          margin-top: 5px;
-        }
-        .address {
-          display: flex;
-          align-items: center;
-          margin-top: 9px;
-          p {
-            font-size: 12px;
-            font-family: PingFangSC-Regular, sans-serif;
-            font-weight: 400;
-            color:#898A8C;
-          }
-        }
-        .phone {
-          display: flex;
-          align-items: center;
-          margin-top: 2px;
-          p {
-            color:#898A8C;
-            font-size: 12px;
-            font-family: PingFangSC-Regular, sans-serif;
-            font-weight: 400;
-          }
-        }
-        .detail {
-          width: 85px;
-          line-height: 26px;
-          border-radius: 4px;
-          font-size: 10px;
-          text-align: center;
-          margin: 17px auto 0;
-          background: linear-gradient(180deg, #5890FB 0%, #3375FC 100%);
-          box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
-          border-radius: 4px;
-          a {
-            color: #ffffff;
-          }
-        }
-      }
-    }
-  }
-}
-
-</style>
+<template>
+  <div class="container">
+    <div class="header">
+      <span>中德全国校区</span>
+      <div class="right">
+        <div class="submit-area">
+          <div class="label">加盟申请</div>
+          <div class="phone-num">
+            <img src="https://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>
+              <el-form-item prop="project">
+                <el-select placeholder="合作项目" v-model="form.project">
+                  <el-option
+                    v-for="(item, index) in projectList"
+                    :key="index"
+                    :label="item.title"
+                    :value="item.title">
+                  </el-option>
+                </el-select>
+              </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="">
+          <div class="phone">400-6807300</div>
+        </div>
+        <div class="control-input">
+          <input type="text" placeholder="姓名">
+        </div>
+        <div class="control-input">
+          <input type="text" placeholder="手机号">
+        </div>
+        <div class="control-input">
+          <input type="text" placeholder="邮箱地址">
+        </div>
+        <div class="control-input">
+          <input type="text" placeholder="加盟城市">
+        </div>
+        <div class="submit">提交申请</div>
+      </div> -->
+    </div>
+
+    <!-- 全国校区 -->
+    <div class="campus">
+      <div class="title-content">
+        <div class="c-title title-zh title-content wow animate__animated animate__fadeInDown">
+          <div class="title-en">NATIONWIDE</div>
+          全国校区
+        </div>
+      </div>
+      <div class="c-content w1200">
+        <div class="list-wrap">
+          <ul class="list">
+            <li class="campus-item" v-for="(item, index) in campusList" :key="index">
+              <img :src="item.imgUrl" alt="">
+              <div class="info">
+                <div class="area">{{ item.area }}</div>
+                <div class="name">{{ item.name }}</div>
+                <div class="address">
+                  <div class="icon"><img :src="iconAddr" :srcset="`${iconAddrSet[0]} 1x, ${iconAddrSet[1]} 2x`" alt=""></div>
+                  <p>{{ item.address }}</p>
+                </div>
+                <div class="phone">
+                  <div class="icon"><img :src="iconPhone" :srcset="`${iconPhoneSet[0]} 1x, ${iconPhoneSet[1]} 2x`" alt=""></div>
+                  <p>{{ item.phone }}</p>
+                </div>
+                <div class="detail">
+                  <!-- to="{name:'news-category',params:{category: indexFirstNewsList.articleCategoryId}} -->
+                  <nuxt-link :to="{ name: 'campus-type', params: { type: item.id } }">
+                    查看详情
+                  </nuxt-link>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+if (process.browser) {
+  var {WOW} = require('wowjs')
+}
+
+export default {
+  data() {
+    return {
+      form: {},
+      iconAddr: require('~/assets/images/campus/icon_address.png'),
+      iconAddrSet: [require('~/assets/images/campus/icon_address.png'), require('~/assets/images/campus/icon_adderss@2x.png')],
+      iconPhone: require('~/assets/images/campus/icon_phone.png'),
+      iconPhoneSet: [require('~/assets/images/campus/icon_phone.png'), require('~/assets/images/campus/icon_phone@2x.png')],
+      campusList: [
+        {
+          id: 1,
+          // imgUrl: 'http://zaojiao.net/public/static/index/images/xq/xq1-1.jpg',
+          imgUrl: require('~/assets/images/campus/xq1-1.jpg'),
+          address: '盈港东路8300弄佳乐苑社区商铺',
+          phone: '4007288000',
+          name: '襄阳校区',
+          area: '上海市·上海市市辖区·青浦区'
+        },
+        {
+          id: 2,
+          imgUrl: require('~/assets/images/campus/xq2-1.jpg'),
+          address: '盈港东路8300弄佳乐苑社区商铺',
+          phone: '4007288000',
+          name: '武汉校区',
+          area: '上海市·上海市市辖区·青浦区'
+        },
+        {
+          id: 3,
+          imgUrl: require('~/assets/images/campus/xq3-1.jpg'),
+          address: '盈港东路8300弄佳乐苑社区商铺',
+          phone: '4007288000',
+          name: '唐山校区',
+          area: '上海市·上海市市辖区·青浦区'
+        },
+        {
+          id: 4,
+          imgUrl: require('~/assets/images/campus/xq4-1.jpg'),
+          address: '盈港东路8300弄佳乐苑社区商铺',
+          phone: '4007288000',
+          name: '莆田校区',
+          area: '上海市·上海市市辖区·青浦区'
+        }
+      ],
+      rules: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        phone: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          {
+            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
+            message: "请输入正确手机号",
+            trigger: "blur",
+          },
+        ],
+        // email: [
+        //   { required: true, message: "请输入邮箱地址", trigger: "blur" },
+        //   {
+        //     type: "email",
+        //     message: "请输入正确的邮箱地址",
+        //     trigger: ["blur", "change"],
+        //   },
+        // ],
+        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
+      },
+      // 1-家庭（专柜）1-逻辑狗思维游戏HOME&PLUS馆 2-思维芯游戏室 2-“思维芯”四大课程体系 4-逻辑狗·探索小镇
+      projectList: [
+        {
+          id: 1,
+          value: 1,
+          title: '逻辑狗专柜'
+        },
+        {
+          id: 2,
+          value: 1,
+          title: '逻辑狗创意馆'
+        },
+        {
+          id: 3,
+          value: 2,
+          title: '思维芯游戏室'
+        },
+        {
+          id: 4,
+          value: 2,
+          title: '“思维芯”四大课程体系'
+        },
+        {
+          id: 5,
+          value: 4,
+          title: '逻辑狗·探索小镇'
+        }
+      ],
+    }
+  },
+  head() {
+    return {
+      title: "逻辑狗官网-中德智慧教育",
+      meta: [
+        {
+          name: "keywords",
+          hid: "keywords",
+          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
+        },
+        {
+          name: "description",
+          hid: "description",
+          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
+        },
+      ],
+    };
+  },
+  created() {
+
+  },
+  mounted() {
+    if (process.browser) {
+      new WOW({
+          offset: 0,
+          live: true
+      }).init()
+    }
+  },
+  methods: {
+    async handleSubmit(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          // const index = this.projectList.findIndex(item => {
+          //   return item.id === this.form.project;
+          // })
+          // if(index == -1) {
+          //   this.$notify({
+          //     title: '失败',
+          //     message: '选择数据有误',
+          //     type: 'info'
+          //   });
+          // }
+          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">
+
+@import "~static/common/style.sass";
+
+.title-content {
+  position: relative;
+  text-align: center;
+}
+.title-en {
+  position: absolute;
+  font-size: 56px;
+  font-family: PingFangSC-Semibold, sans-serif;
+  font-weight: 600;
+  color:rgba(35,106,250,1);
+  opacity: 0.16;
+}
+
+.title-zh {
+  position: relative;
+  display: inline-block;
+  font-size: 46px;
+  font-family: PingFangSC-Semibold, sans-serif;
+  font-weight: 600;
+  color:#333333;
+  text-align: center;
+}
+
+.header {
+  position: relative;
+  background-image: url('~assets/images/campus/header.png');
+  background-repeat: no-repeat;
+  // background-size: cover;
+  background-size: 100% 100%;
+  // height: 882px;
+  height: 595px;
+  // padding: 446px 0 0 302px;
+  padding: 230px 0 0 15%;
+  background-position: center;
+  span {
+    font-size: 66px;
+    font-family: PingFangSC-Semibold, sans-serif;
+    font-weight: 600;
+    color:#ffffff;
+    line-height: 112px;
+  }
+  .right {
+    font-size: 16px;
+    position: absolute;
+    right: 13.8%;
+    top: 50%;
+    transform: translateY(-50%);
+    // bottom: 124px;
+    width: 327px;
+    height: 450px;
+    background-color: #fff;
+    padding: 34px 38px 12px 39px;
+    border-radius: 3px;
+    .submit-area {
+      .label {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, sans-serif;
+        font-weight: 400;
+        color: rgba(91, 95, 93, 1);
+        margin-bottom: 7px;
+      }
+      .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, sans-serif;
+          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;
+        }
+      }
+    }
+  }
+  // .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, sans-serif;
+  //     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, sans-serif;
+  //       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 {
+  padding: 192px 0 206px;
+  .title-en {
+    top: -40px;
+    left: 50%;
+    transform: translate(-50%);
+  }
+  .c-content {
+    margin-top: 130px;
+    ul {
+      li.campus-item {
+        display: inline-block;
+        width: 374px;
+        background:#FFFFFF;
+        box-shadow: 0px 9px 13px 0px rgba(123,166,252,0.13);
+        border-radius: 10px;
+        margin: 0 38px 42px 0;
+        transition: transform .3s ease-in-out;
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+        &:hover {
+          transform: translate3d(0,-8px,0);
+        }
+        img {
+          width: 100%;
+          border-radius: 18px 18px 0 0;
+        }
+        .info {
+          height: 175px;
+          color: #898A8C;
+          padding: 15px 20px 15px;
+          .icon {
+            margin-right: 8px;
+            img {
+              width: 10px;
+              height: 12px;
+            }
+          }
+        }
+        .area {
+          font-size:14px;
+          font-family: PingFangSC-Regular, sans-serif;
+          font-weight: 400;
+          color:#898A8C;
+          line-height: 20px;
+        }
+        .name {
+          font-size:22px;
+          font-family: PingFangSC-Medium, sans-serif;
+          font-weight:500;
+          color:#1F241E;
+          line-height:30px;
+          margin-top: 5px;
+        }
+        .address {
+          display: flex;
+          align-items: center;
+          margin-top: 9px;
+          p {
+            font-size: 12px;
+            font-family: PingFangSC-Regular, sans-serif;
+            font-weight: 400;
+            color:#898A8C;
+          }
+        }
+        .phone {
+          display: flex;
+          align-items: center;
+          margin-top: 2px;
+          p {
+            color:#898A8C;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, sans-serif;
+            font-weight: 400;
+          }
+        }
+        .detail {
+          width: 85px;
+          line-height: 26px;
+          border-radius: 4px;
+          font-size: 10px;
+          text-align: center;
+          margin: 17px auto 0;
+          background: linear-gradient(180deg, #5890FB 0%, #3375FC 100%);
+          box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
+          border-radius: 4px;
+          a {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+}
+
+</style>

pages/cooperate/index.vue

@@ -432,7 +432,7 @@ export default {
         phone: [
           { required: true, message: "请输入手机号", trigger: "blur" },
           {
-            pattern: /^1[345789]\d{9}$/,
+            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
             message: "请输入正确手机号",
             trigger: "blur",
           },

pages/merchants/index.vue

@@ -1,185 +1,185 @@
-<template>
-  <div class="merchants">
-    <common-banner :img="bgImg" :height="644">
-      <div class="content-wrap">
-        <div class="content w1200">
-          <div class="left title">招商加盟体系</div>
-          <div class="right">
-            <no-ssr>
-              <submit-form></submit-form>
-            </no-ssr>
-          </div>
-        </div>
-      </div>
-    </common-banner>
-
-    <div class="list-wrap w1200">
-      <div class="item" v-for="(item, index) in merchantsList" :key="index">
-        <div class="item-left">
-          <img :src="item.imgUrl" alt="" srcset="">
-        </div>
-        <div class="item-right">
-          <div class="title">{{ item.title }}</div>
-          <div class="desc">{{ item.desc }}</div>
-          <div class="btn cp" v-if="index == 3" @click="navPage()">全国校区</div>
-        </div>
-      </div>
-    </div>
-    
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-import CommonBanner from '@/components/common/banner';
-import SubmitForm from '@/components/common/form';
-
-export default {
-  data() {
-    return {
-      form: {},
-      bgImg: require('@/assets/images/merchants/bg.png'),
-      merchantsList: [
-        {
-          imgUrl: require('@/assets/images/merchants/merchants_img_01.png'),
-          title: '逻辑狗专柜',
-          desc: '逻辑狗·专柜是襄阳市首家专注于儿童优质思维能力养成的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全球同频思维训练课程服务。通过多种思维游戏体验帮助孩子获得卓越的思维能力，养成优秀的思维习惯，成就未来幸福人生。'
-        },
-        {
-          imgUrl: require('@/assets/images/merchants/merchants_img_02.png'),
-          title: '逻辑狗思维体验Plus',
-          desc: '逻辑狗——中国家庭教育领军品牌，在市场上，以逻辑狗思维体验HOME、逻辑狗思维体验PLUS、逻辑狗探索小镇TOWN呈现在家庭用户端，以小而美的形式，线上线下营销模式，让家长和孩子获得更好的服务体验。爱游戏是孩子的天性！创研万种游戏，让孩子在游戏中形成良好的学习习惯，塑造优秀的学习品质。'
-        },
-        {
-          imgUrl: require('@/assets/images/merchants/merchants_img_03.png'),
-          title: '逻辑狗思维体验Home',
-          desc: '逻辑狗——中国家庭教育领军品牌，在市场上，以逻辑狗思维体验HOME、逻辑狗思维体验PLUS、逻辑狗探索小镇TOWN呈现在家庭用户端，以小而美的形式，线上线下营销模式，让家长和孩子获得更好的服务体验。爱游戏是孩子的天性！创研万种游戏，让孩子在游戏中形成良好的学习习惯，塑造优秀的学习品质。',
-        },
-        {
-          imgUrl: require('@/assets/images/merchants/merchants_img_04.png'),
-          title: '逻辑狗·探索小镇',
-          desc: '逻辑狗·探索小镇-逻辑狗思维训练馆，源自德国72年思维教育品牌，以28个语种版本，在德、美、日、韩等全球74个国家和地区推行的思维游戏升级训练课程体系，是中国大陆地区专注于儿童优质思维能力养成的场景式、游戏化体验中心，为2.4～7岁儿童提供具有国际品质的全球同频思维训练课程与服务。以全球优质的教育内容和理念、18年的品牌深耕和1100万家庭的庞大市场基础，赋能合作伙伴，共同成就具有影响力的学前教育知名品牌。',
-        }
-      ],
-      rules: {
-        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-        phone: [
-          { required: true, message: "请输入手机号", trigger: "blur" },
-          {
-            pattern: /^1[345789]\d{9}$/,
-            message: "请输入正确手机号",
-            trigger: "blur",
-          },
-        ],
-        // email: [
-        //   { required: true, message: "请输入邮箱地址", trigger: "blur" },
-        //   {
-        //     type: "email",
-        //     message: "请输入正确的邮箱地址",
-        //     trigger: ["blur", "change"],
-        //   },
-        // ],
-        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
-      },
-    }
-  },
-  components: {
-    CommonBanner,
-    SubmitForm
-  },
-  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;
-        }
-      });
-    },
-    navPage() {
-      this.$router.push({ path: '/merchants/campus' });
-    }
-  }
-  
-}
-</script>
-
-<style lang="scss">
-.merchants {
-  .list-wrap {
-    margin-top: 100px;
-    .item {
-      display: flex;
-      margin-bottom: 60px;
-      &:hover {
-        background: #FFFFFF;
-        box-shadow: 20px 20px 25px 0px rgba(211, 229, 255, 0.33);
-        .item-right {
-          .btn {
-            opacity: 1;
-          }
-        }
-      }
-      .item-left {
-        margin-right: 100px;
-        width: 511px;
-        height: 363px;
-        img {
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-      .item-right {
-        margin-right: 38px;
-        .title {
-          font-size: 30px;
-          font-family: PingFangSC-Semibold, PingFang SC;
-          font-weight: 600;
-          color: #333333;
-          line-height: 42px;
-          margin-top: 34px;
-        }
-        .desc {
-          font-size: 14px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #666666;
-          line-height: 28px;
-          margin-top: 47px;
-        }
-        .btn {
-          width: 104px;
-          height: 36px;
-          line-height: 36px;
-          text-align: center;
-          background: linear-gradient(180deg, #4482FE 0%, #004DE7 100%);
-          box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
-          border-radius: 32px;
-          color: #FFFFFF;
-          opacity: 0.8;
-          margin-top: 25px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="merchants">
+    <common-banner :img="bgImg" :height="644">
+      <div class="content-wrap">
+        <div class="content w1200">
+          <div class="left title">招商加盟体系</div>
+          <div class="right">
+            <no-ssr>
+              <submit-form></submit-form>
+            </no-ssr>
+          </div>
+        </div>
+      </div>
+    </common-banner>
+
+    <div class="list-wrap w1200">
+      <div class="item" v-for="(item, index) in merchantsList" :key="index">
+        <div class="item-left">
+          <img :src="item.imgUrl" alt="" srcset="">
+        </div>
+        <div class="item-right">
+          <div class="title">{{ item.title }}</div>
+          <div class="desc">{{ item.desc }}</div>
+          <div class="btn cp" v-if="index == 3" @click="navPage()">全国校区</div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import CommonBanner from '@/components/common/banner';
+import SubmitForm from '@/components/common/form';
+
+export default {
+  data() {
+    return {
+      form: {},
+      bgImg: require('@/assets/images/merchants/bg.png'),
+      merchantsList: [
+        {
+          imgUrl: require('@/assets/images/merchants/merchants_img_01.png'),
+          title: '逻辑狗专柜',
+          desc: '逻辑狗·专柜是襄阳市首家专注于儿童优质思维能力养成的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全球同频思维训练课程服务。通过多种思维游戏体验帮助孩子获得卓越的思维能力，养成优秀的思维习惯，成就未来幸福人生。'
+        },
+        {
+          imgUrl: require('@/assets/images/merchants/merchants_img_02.png'),
+          title: '逻辑狗思维体验Plus',
+          desc: '逻辑狗——中国家庭教育领军品牌，在市场上，以逻辑狗思维体验HOME、逻辑狗思维体验PLUS、逻辑狗探索小镇TOWN呈现在家庭用户端，以小而美的形式，线上线下营销模式，让家长和孩子获得更好的服务体验。爱游戏是孩子的天性！创研万种游戏，让孩子在游戏中形成良好的学习习惯，塑造优秀的学习品质。'
+        },
+        {
+          imgUrl: require('@/assets/images/merchants/merchants_img_03.png'),
+          title: '逻辑狗思维体验Home',
+          desc: '逻辑狗——中国家庭教育领军品牌，在市场上，以逻辑狗思维体验HOME、逻辑狗思维体验PLUS、逻辑狗探索小镇TOWN呈现在家庭用户端，以小而美的形式，线上线下营销模式，让家长和孩子获得更好的服务体验。爱游戏是孩子的天性！创研万种游戏，让孩子在游戏中形成良好的学习习惯，塑造优秀的学习品质。',
+        },
+        {
+          imgUrl: require('@/assets/images/merchants/merchants_img_04.png'),
+          title: '逻辑狗·探索小镇',
+          desc: '逻辑狗·探索小镇-逻辑狗思维训练馆，源自德国72年思维教育品牌，以28个语种版本，在德、美、日、韩等全球74个国家和地区推行的思维游戏升级训练课程体系，是中国大陆地区专注于儿童优质思维能力养成的场景式、游戏化体验中心，为2.4～7岁儿童提供具有国际品质的全球同频思维训练课程与服务。以全球优质的教育内容和理念、18年的品牌深耕和1100万家庭的庞大市场基础，赋能合作伙伴，共同成就具有影响力的学前教育知名品牌。',
+        }
+      ],
+      rules: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        phone: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          {
+            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
+            message: "请输入正确手机号",
+            trigger: "blur",
+          },
+        ],
+        // email: [
+        //   { required: true, message: "请输入邮箱地址", trigger: "blur" },
+        //   {
+        //     type: "email",
+        //     message: "请输入正确的邮箱地址",
+        //     trigger: ["blur", "change"],
+        //   },
+        // ],
+        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
+      },
+    }
+  },
+  components: {
+    CommonBanner,
+    SubmitForm
+  },
+  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;
+        }
+      });
+    },
+    navPage() {
+      this.$router.push({ path: '/merchants/campus' });
+    }
+  }
+
+}
+</script>
+
+<style lang="scss">
+.merchants {
+  .list-wrap {
+    margin-top: 100px;
+    .item {
+      display: flex;
+      margin-bottom: 60px;
+      &:hover {
+        background: #FFFFFF;
+        box-shadow: 20px 20px 25px 0px rgba(211, 229, 255, 0.33);
+        .item-right {
+          .btn {
+            opacity: 1;
+          }
+        }
+      }
+      .item-left {
+        margin-right: 100px;
+        width: 511px;
+        height: 363px;
+        img {
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .item-right {
+        margin-right: 38px;
+        .title {
+          font-size: 30px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #333333;
+          line-height: 42px;
+          margin-top: 34px;
+        }
+        .desc {
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 28px;
+          margin-top: 47px;
+        }
+        .btn {
+          width: 104px;
+          height: 36px;
+          line-height: 36px;
+          text-align: center;
+          background: linear-gradient(180deg, #4482FE 0%, #004DE7 100%);
+          box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
+          border-radius: 32px;
+          color: #FFFFFF;
+          opacity: 0.8;
+          margin-top: 25px;
+        }
+      }
+    }
+  }
+}
+</style>

store/index.js

@@ -1,75 +1,75 @@
-// import Vue from 'vue'
-// import Vuex from 'vuex'
-import axios from 'axios'
-
-// Vue.use(Vuex)
-
-export const state = () => ({
-	wordpressAPI: 'https://open.zaojiao.net',
-	newsNav: [
-		// {
-		// 	icon: require('~/assets/images/news/cate_01.png'),
-		// 	title: '中德资讯',
-		// 	id: 1
-		// },
-		// {
-		// 	icon: require('~/assets/images/news/cate_02.png'),
-		// 	title: '行业动态',
-		// 	id: 2
-		// },
-		// {
-		// 	icon: require('~/assets/images/news/cate_03.png'),
-		// 	title: '门店动态',
-		// 	id: 3
-		// }
-	],
-}) 
-
-export const mutations = {
-	setNav(state, data){
-		state.newsNav = data
-	},
-};
-
-export const getters = {
-};
-
-export const actions = {
-	async nuxtServerInit({commit,state,req}) {
-    let newsNav = [];
-    const { data } = await axios(`${state.wordpressAPI}/official-api/article/type`);
-		if(data.status === 200) {
-      newsNav = data.data;
-		}
-		commit('setNav', newsNav);
-		
-		// //产品导航
-		// 	let headProdNav = await axios(`${state.wordpressAPI}/proCategory/showAll/main`);
-		// 	commit('setHeadProdNav',headProdNav.data);
-		// //新闻导航
-		// 	let headNewsNav = await axios(`${state.wordpressAPI}/articleCategory/getAll`);
-		// 	commit('setHeadNewsNav',headNewsNav.data);
-		// //招聘导航
-		// 	let headJobNav = await axios(`${state.wordpressAPIForJob}/jobClass/getAll`);
-		// 	commit('setHeadJobNav',headJobNav.data);
-		// //友情链接
-		// 	let indexLinksData = await axios(`${state.wordpressAPI}/link/selectAll`);
-		// 	commit('setIndexLinksData',indexLinksData.data);
-	}
-};
-
-// export default {
-// 	state,
-// 	getters,
-// 	mutations,
-// 	actions	
-// }
-
-// const store = () => new Vuex.Store({
-// 	state,
-// 	getters,
-// 	mutations,
-// 	actions
-// })
-
-// export default store
+// import Vue from 'vue'
+// import Vuex from 'vuex'
+import axios from 'axios'
+
+// Vue.use(Vuex)
+
+export const state = () => ({
+	wordpressAPI: 'https://open.api.luojigou.vip',
+	newsNav: [
+		// {
+		// 	icon: require('~/assets/images/news/cate_01.png'),
+		// 	title: '中德资讯',
+		// 	id: 1
+		// },
+		// {
+		// 	icon: require('~/assets/images/news/cate_02.png'),
+		// 	title: '行业动态',
+		// 	id: 2
+		// },
+		// {
+		// 	icon: require('~/assets/images/news/cate_03.png'),
+		// 	title: '门店动态',
+		// 	id: 3
+		// }
+	],
+})
+
+export const mutations = {
+	setNav(state, data){
+		state.newsNav = data
+	},
+};
+
+export const getters = {
+};
+
+export const actions = {
+	async nuxtServerInit({commit,state,req}) {
+    let newsNav = [];
+    const { data } = await axios(`${state.wordpressAPI}/official-api/article/type`);
+		if(data.status === 200) {
+      newsNav = data.data;
+		}
+		commit('setNav', newsNav);
+
+		// //产品导航
+		// 	let headProdNav = await axios(`${state.wordpressAPI}/proCategory/showAll/main`);
+		// 	commit('setHeadProdNav',headProdNav.data);
+		// //新闻导航
+		// 	let headNewsNav = await axios(`${state.wordpressAPI}/articleCategory/getAll`);
+		// 	commit('setHeadNewsNav',headNewsNav.data);
+		// //招聘导航
+		// 	let headJobNav = await axios(`${state.wordpressAPIForJob}/jobClass/getAll`);
+		// 	commit('setHeadJobNav',headJobNav.data);
+		// //友情链接
+		// 	let indexLinksData = await axios(`${state.wordpressAPI}/link/selectAll`);
+		// 	commit('setIndexLinksData',indexLinksData.data);
+	}
+};
+
+// export default {
+// 	state,
+// 	getters,
+// 	mutations,
+// 	actions
+// }
+
+// const store = () => new Vuex.Store({
+// 	state,
+// 	getters,
+// 	mutations,
+// 	actions
+// })
+
+// export default store