zhongde-website/pages/merchants/index.vue

<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>