zhongde-website/pages/merchants/index.vue

<template>
  <div class="merchants">
    <common-banner :img="bgImg" :height="718">
      <div class="content-wrap">
        <div class="content w1200">
          <div class="left title">招商加盟体系</div>
          <div class="right form">
            <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>
                  <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>
                <!-- <img class="cp" src="http://res.training.luojigou.vip/Fk2Fz3gN8jDHAHiQaOBJI3KZSyHx?imageView2/0/q/50|imageslim" alt=""> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </common-banner>
    <!-- <div class="header">
      <img :src="bgImg" alt="" srcset="">
    </div> -->
    <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>
      </div>
    </div>
    
  </div>
</template>

<script>
import axios from "axios";
import CommonBanner from '@/components/common/banner';

export default {
  data() {
    return {
      form: {},
      bgImg: require('@/assets/images/merchants/bg.png'),
      projectList: [
        {
          id: 1,
          title: '逻辑狗·探索小镇'
        },
        {
          id: 2,
          title: '逻辑狗专柜'
        },
        {
          id: 3,
          title: '逻辑狗思维体验Plus'
        },
        {
          id: 4,
          title: '逻辑狗思维体验Home'
        },
        {
          id: 5,
          title: '逻辑狗体验中心'
        }
      ],
      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: '逻辑狗专柜是襄阳市首家专注于儿童优质思维能力养成的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全球同频思维训练课程服务。通过多种思维游戏体验帮助孩子获得卓越的思维能力，养成优秀的思维习惯，成就未来幸福人生。'
        },
        {
          imgUrl: require('@/assets/images/merchants/merchants_img_03.png'),
          title: '逻辑狗思维体验Home',
          desc: '逻辑狗专柜是襄阳市首家专注于儿童优质思维能力养成的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全球同频思维训练课程服务。通过多种思维游戏体验帮助孩子获得卓越的思维能力，养成优秀的思维习惯，成就未来幸福人生。',
        },
        {
          imgUrl: require('@/assets/images/merchants/merchants_img_04.png'),
          title: '逻辑狗·探索小镇',
          desc: '逻辑狗专柜是襄阳市首家专注于儿童优质思维能力养成的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全球同频思维训练课程服务。通过多种思维游戏体验帮助孩子获得卓越的思维能力，养成优秀的思维习惯，成就未来幸福人生。',
        }
      ],
      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
  },
  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">
.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-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;
        }
      }
    }
  }
  .content-wrap {
    margin-top: 94px;
    width: 100%;
    position: absolute;
    z-index: 10;

    // top: 50%;
    // transform: translateY(-50%);
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .title {
      width: 396px;
      height: 92px;
      font-size: 66px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 92px;
    }
    .submit-area {
      background: #FFFFFF;
      border-radius: 20px;
      padding: 32px 38px 32px;
      .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 {
          margin: 0 auto;
          text-align: center;
          font-size: 14px;
          color: #fff;
          width: 148px;
          height: 40px;
          line-height: 40px;
          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>