nuxtProject/pages/urbanPartners/index.vue

<template>
  <div class="client-platform-page urban-partners-page">
      <!-- banner-->
      <div class="urban-partners-banner">
        <span @click="applyDialog =true">申请城市合作商</span>
      </div>
      <!-- 携手栋科软件 -->
      <div class="xs-dk-box">
        <div class="client-container">
          <h4 class="mta-hidden-xs urban-partners-title">携手栋科软件,共享千亿市场,开创移动学习产业新历史！</h4>
          <h4 class="mta-hidden-sm urban-partners-title">携手栋科软件,共享千亿市场,<br>开创移动学习产业新历史！</h4>
          <ul>
            <li>与<span>5000+</span>企业达成战略合作</li>
            <li>覆盖<span>12</span>大行业客户解决方案</li>
            <li><span>20</span>万平台注册用户</li>
            <li><span>4</span>大明星产品</li>
          </ul>
        </div>
      </div>

    <!-- 私有化部署 -->
    <div class="syh-bs-box">
      <div class="client-container syh-bs-card">
          <div>
            <div class="syh-bs-head">
              <h4>私有化部署</h4>
              <i></i>
            </div>
            <ul class="syh-bs-body syh-bs-left">
              <li>
                <div>
                  <i></i>
                  <h5>麦塔在线考试系统</h5>
                  <p>稳定安全的在线考场</p>
                  <p>为大中型企事业单位、教育机构提供不同场景的考试解决方案。</p>
                </div>
              </li>
              <li>
                <div>
                  <i></i>
                  <h5>麦塔在线培训系统</h5>
                  <p>企业线上培训组织专家</p>
                  <p>集学、测、考、练于一体的私有化移动智能学习平台。</p>
                </div>
              </li>
            </ul>
          </div>
          <div>
            <div class="syh-bs-head">
              <h4>SAAS服务</h4>
              <i></i>
            </div>
            <ul class="syh-bs-body syh-bs-right">
              <li>
                <div>
                  <i></i>
                  <h5>麦塔SAAS在线考试系统</h5>
                  <p>全功能定制化考务平台</p>
                  <p>即买即用、按需订阅、仅需10分钟超低成本云端部署。</p>
                </div>
              </li>
              <li>
                <div>
                  <i></i>
                  <h5>麦塔SAAS在线培训系统 </h5>
                  <p>学练考评一站式平台</p>
                  <p>支持灵活布局在线培训考试模块，帮助客户快速搭建完整内容平台。</p>
                </div>
              </li>
            </ul>
          </div>
      </div>
    </div>

    <!-- 合作优势 -->
    <div class="hz-ys-box">
      <div class="client-container">
        <h4 class="urban-partners-title">合作优势</h4>
        <h5>各大城市合作商，可享受以下扶持</h5>
        <div class="hz-ys-card card-left">
          <p><i></i><span>低成本加入，无风险</span></p>
          <p><i></i><span>免费提供系统化产品培训，全方位支持</span></p>
          <p><i></i><span>0技术要求，为客户搭建在线培训平台</span></p>
        </div>
        <div class="hz-ys-card card-right">
          <p><i></i><span>后期维护及服务保障</span></p>
          <p><i></i><span>高回报返利体系带来稳定营收</span></p>
          <p><i></i><span>季/年度优秀代理商激励</span></p>
        </div>
      </div>
    </div>

    <!-- 合作条件 -->
    <div class="hz-tj-box">
      <h4 class="urban-partners-title">合作条件</h4>
      <div class="client-container">
        <ul class="hz-yj-body">
        <li><div>
          <p>认同栋科的产品、理念</p>
          <span>愿与栋科达成长期合<br>作伙伴，形成事业共<br>同体</span>
        </div></li>
        <li><div>
          <p>具有公司资质</p>
          <span>有营业执照和独立法人代<br>表良好的业内口碑和信誉</span>
        </div></li>
        <li><div>
          <p>具有客户资源</p>
          <span>拥有丰富的客户资源<br>企事业单位及高校等教育<br>机构资源</span>
        </div></li>
        <li><div>
          <p>具有行业背景</p>
          <span>有互联网背景<br>对企业人才数字化培训行<br>业、SAAS行业有一定了解</span>
        </div></li>
      </ul>
      </div>
    </div>

    <!-- 栋科软件城市合作商申请流程 -->
    <div class="sq-lc-box">
      <div class="client-container">
        <h4 class="urban-partners-title">栋科软件城市合作商申请流程</h4>
        <ul class="sq-lc-body mta-hidden-xs">
          <li><i></i><span>提交申请</span></li>
          <li><i></i><span>审核资料</span></li>
          <li><i></i><span>合作洽谈</span></li>
          <li><i></i><span>签订合同</span></li>
          <li><i></i><span>业务培训</span></li>
          <li><i></i><span>开展合作</span></li>
        </ul>
        <div class="sq-lc-body-img mta-hidden-sm"></div>
        <div class="two-code-box">
          <i></i>
          <p>专属渠道合作小助手</p>
          <a @click="applyDialog =true">申请城市合作商</a>
        </div>
      </div>
    </div>

    <!-- 优秀合作伙伴真实评价 -->
    <div class="zs-pj-box">
      <div class="client-container">
        <h4 class="urban-partners-title">优秀合作伙伴真实评价</h4>
        <ul>
          <li>
            <div>
            <i></i>
            <h5>广州某合作伙伴</h5>
            <p>从2019年我们企业就开始用栋科软件的产品了，从客户发展成城市合作商最关键的原因，还是栋科的产品资质齐全、质量过硬，加盟扶持力度够大，其实加盟前也做了很多的市场调查，整体产品前景广泛，利润空间极大，打消了我迟迟不敢创业的顾虑。 </p>
            </div>
          </li>
          <li>
            <div>
            <i></i>
            <h5>河北某合作伙伴</h5>
            <p>这个项目最大的好处就是，虽然是高新技术产业，但栋科软件给我们提供技术和产品，不需要出开发成本，减少投入，可以快速回本，我经常和其他创业伙伴开玩笑说“这个项目是我开启财富之路的密码”。 </p>
            </div>
          </li>
          <li>
            <div>
            <i></i>
            <h5>上海某合作伙伴</h5>
            <p>现在在线学习行业发展是大势所趋，政策所向，身边很多企业都在用栋科这款麦塔在线培训（考试）系统，前景广阔，十分看好，合作首月就创下了高达20多万的业绩，实现了业务品牌的双赢。 </p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 申请城市合作商 -->
    <div class="sqcs-hzs-box">
      <div class="client-container">
        <h4>如果你有教育、企业、高校资源</h4>
        <h5>欢迎加入我们，抢占市场先机</h5>
        <a @click="applyDialog =true">申请城市合作商</a>
      </div>
    </div>

    <!-- 申请城市合作商弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="applyDialog"
      class="apply-collaborate-dialog"
      center>
      <h4>栋科软件城市合作商申请表</h4>
      <el-form :model="applyDialogDate" status-icon :rules="applyRules" ref="applyDialogForm" class="application-scheme-form">
        <el-form-item  prop="user">
          <el-input v-model="applyDialogDate.user" placeholder="请输入联系人" class="dialog-input-tel">
            <i slot="prefix" class="el-input__icon dialog-user-icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item  prop="tel">
          <el-input v-model="applyDialogDate.tel" placeholder="请输入联系电话" class="dialog-input-tel">
            <i slot="prefix" class="el-input__icon dialog-tel-icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item  prop="companyName">
        <el-input v-model="applyDialogDate.companyName" placeholder="请输入公司名称" class="dialog-input-tel">
          <i slot="prefix" class="el-input__icon dialog-company-icon"></i>
        </el-input>
      </el-form-item>
        <el-form-item  prop="region">
          <el-input v-model="applyDialogDate.region" placeholder="请输入公司所在地区" class="dialog-input-tel">
            <i slot="prefix" class="el-input__icon dialog-region-icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="applyDialogDate.email" placeholder="请输入邮箱" class="dialog-input-tel">
            <i slot="prefix" class="el-input__icon dialog-email-icon"></i>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-btn-box">
        <div class="apply-dialog-btn dialog-cancel-btn" @click="cancelBtn">取  消</div>
        <div class="apply-dialog-btn" @click="applyBtn">提  交</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  export default {
    name:     'urbanPartners',
    layout:   'templateB',
    async asyncData({ $axios,store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/urbanPartners');
    },
    data() {
      return {
        applyDialog:false,
        applyDialogDate:{},
        applyRules:        {
          user:          [
            { trigger: 'blur', required: true, message: '请输入联系人' },
          ],
          tel: [
            { required: true, message: "请输入手机号", trigger: "blur" },
            { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号", trigger: "blur" }
          ],
          companyName:          [
            { trigger: 'blur', required: true, message: '请输入公司名称' },
          ],
          region:          [
            { trigger: 'blur', required: true, message: '请输入公司所在地区' },
          ],
        },
      };
    },
    head(){
      return {
        title: 'SaaS考试系统_麦塔在线考试系统_麦塔在线培训系统体验版',
        meta:  [
          {
            description: '企业考培,就用麦塔,现在注册立享30人纯免费版本3年使用权限.麦塔在线考试系统体验版-简单好用的SaaS考试系统;麦塔在线培训系统体验版-学练考评一站式培训平台。',
            keywords:    'saas考试系统',
          },
        ],
      };
    },
    computed: {},
    methods:  {
      // 申请方案按钮
      applyBtn(){
        this.$refs['applyDialogForm'].validate((valid) => {
          if (valid) {
            this.$axios.$post('/business/exists',{phone: this.applyDialogDate.tel}).then(res=>{
            if (res.code === 0 && res.data) {
              this.addPartners();
            } else {
              this.$message.error(res.msg);
            }
          });
          }

        });
      },

      // 关闭
      cancelBtn(){
        this.applyDialog = false;
        this.clearApplyDL();
      },
      //  添加合作商
      addPartners(){
        const options = {
          name:  this.applyDialogDate.user,
          phone: this.applyDialogDate.tel,
          company:  this.applyDialogDate.companyName,
          area: this.applyDialogDate.region,
          email:  this.applyDialogDate.email,
        };
        this.$axios.$post('/business/add',options).then(res=>{
          if (res.code === 0 && res.data) {
            this.applyDialog = false;
            this.$message.success('申请成功');
            this.clearApplyDL();
          } else {
            this.$message.error('申请失败');
          }
        });
      },

      // 清空
      clearApplyDL(){
        this.$refs['applyDialogForm'].clearValidate();
          this.applyDialogDate.user = '';
          this.applyDialogDate.tel = '';
          this.applyDialogDate.companyName = '';
          this.applyDialogDate.region = '';
          this.applyDialogDate.email = '';
      },
    },
    created() {
    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>