compdfkit_web_cn/pages/contact-sales.vue

<template>
  <div>
    <Header />
    <div class="banner md:mt-80px md:pt-75px md:pb-110px <md:pt-106px <md:pb-40px">
      <div class="container <md:text-center">
        <h1 class="font-bold md:mb-20px md:text-brand-1 md:text-2xl <md:mb-8px <md:text-white <md:text-lg">免费试用&获取报价</h1>
        <div class="md:text-brand-3 md:text-tiny <md:text-white <md:text-xs">请填写以下表单, 提供贵公司项目的详细信息获得免费试用和报价。ComPDFKit团队将在一个工作日内，以邮件的形式与您取得联系。</div>
      </div>
    </div>
    <div class="container contact-container lg:flex lg:justify-between lg:mb-120px">
      <div class="contact-box lg:w-[57.6271%] lg:mt-[-50px] lg:bg-white lg:rounded-18px lg:px-30px lg:pt-40px lg:pb-80px  <lg:my-40px">
        <div class="md:text-tiny <md:text-sm font-bold md:mb-20px <md:mb-8px text-brand-2"><i class="text-[#FF5050]">*</i> 项目描述</div>
        <textarea
          class="appearance-none w-full p-12px text-14px leading-20px rounded-6px outline-none border-1px border-[#CCCCCC] focus:border-brand-0 hover:border-brand-0 resize-y"
          v-model.trim="description"
          :placeholder="`您的项目使用场景是什么？您需要什么功能？您期望在哪些方面与ComPDFKit进行合作？\r\n详细的信息，有利于我们了解您的需求，并提供合适的解决方案以及精准的报价。`"
          rows="6"
          @input="handleInfo('description')"
        ></textarea>
        <div v-if="description_err && submitted" class="text-[#FF5050]">{{ description_err }}</div>
        <div class="md:mt-40px <md:mt-24px md:mb-20px md:text-tiny <md:mb-8px <md:text-sm text-brand-2 font-bold"><i class="text-[#FF5050]">*</i> 您的应用程序将用于：</div>
        <div class="relative">
          <select class="w-full md:h-50px <md:h-44px px-12px rounded-6px appearance-none border-1px border-[#CCCCCC] outline-none focus:border-brand-0 hover:border-brand-0" v-model="building" name="building" @change="handleInfo('building', $event)">
            <option value="A product for customers">公司内部</option>
            <option value="A product for internal use">公司产品的终端用户</option>
            <option value="A product for another company">另一家公司的产品</option>
          </select>
          <Arrow class="absolute bottom-12px right-10px z-2 w-20px h-20px pointer-events-none text-[#CCCCCC] transform rotate-90" />
        </div>
        <div class="md:mt-40px md:mb-20px <md:mt-24px <md:mb-17px md:text-tiny <md:text-sm font-bold text-brand-2"><i class="text-[#FF5050]">*</i> 您期望支持部署ComPDFKit产品到哪些开发平台？</div>
        <div class="tiny:flex tiny:justify-between tiny:flex-wrap">
          <label class="inline-flex items-center tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="platforms" type="checkbox" value="Android" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Android')" />
            <span v-else class="box"></span>
            <span class="ml-10px text-brand-0"><Android class="w-24px h-24px" /></span>
            <span class="text-sm text-brand-2 ml-8px">Android</span>
          </label>
          <label class="inline-flex items-center tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="platforms" type="checkbox" value="Windows" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Windows')" />
            <span v-else class="box"></span>
            <span class="ml-10px text-brand-0"><Windows class="w-24px h-24px" /></span>
            <span class="text-sm text-brand-2 ml-8px">Windows</span>
          </label>
          <label class="inline-flex items-center tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="platforms" type="checkbox" value="iOS" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('iOS')" />
            <span v-else class="box"></span>
            <span class="ml-10px text-brand-0"><iOS class="w-24px h-24px" /></span>
            <span class="text-sm text-brand-2 ml-8px">iOS</span>
          </label>
          <label class="inline-flex items-center tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="platforms" type="checkbox" value="Mac" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Mac')" />
            <span v-else class="box"></span>
            <span class="ml-10px text-brand-0"><Mac class="w-24px h-24px" /></span>
            <span class="text-sm text-brand-2 ml-8px">Mac</span>
          </label>
          <label class="inline-flex items-center tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="platforms" type="checkbox" value="Web" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Web')" />
            <span v-else class="box"></span>
            <span class="ml-10px text-brand-0"><Web class="w-24px h-24px" /></span>
            <span class="text-sm text-brand-2 ml-8px">Web</span>
          </label>
          <label class="inline-flex items-center tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="platforms" type="checkbox" value="Linux" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Linux')" />
            <span v-else class="box"></span>
            <span class="ml-10px text-brand-0"><Linux class="w-24px h-24px" /></span>
            <span class="text-sm text-brand-2 ml-8px">Linux</span>
          </label>
        </div>
        <div v-show="platforms_err && submitted" class="text-[#FF5050]">{{ platforms_err }}</div>
        <div class="md:my-20px md:text-tiny <md:mt-24px <md:mb-17px <md:text-sm font-bold text-brand-2"><i class="text-[#FF5050]">*</i> 选择您的项目需要的功能</div>
        <div class="features">
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] md:mb-20px <tiny:w-full <md:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Viewer" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Viewer')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Viewer</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] md:mb-20px <tiny:w-full <md:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Annotations" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Annotations')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Annotations</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] md:mb-20px <tiny:w-full <md:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Signatures" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Signatures')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Signatures</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] md:mb-20px <tiny:w-full <md:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Forms" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Forms')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Forms</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] md:mb-20px <tiny:w-full <md:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Document editor" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Document editor')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Document editor</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] md:mb-20px <tiny:w-full <md:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Edit PDF" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Edit PDF')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Edit PDF</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] md:mb-20px <tiny:w-full <md:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Security" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Security')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Security</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Conversion" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Conversion')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Conversion</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="OCR" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('OCR')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">OCR</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Redaction" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Redaction')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Redaction</span>
          </label>
          <label class="inline-flex items-center tiny:w-[24.1935%] @tiny:w-[30%] @lg:w-[30%] tiny:mb-20px <tiny:w-full <tiny:mb-16px <tiny:pl-16px">
            <input v-model="features" type="checkbox" value="Document Comparison" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('Document Comparison')" />
            <span v-else class="box"></span>
            <span class="text-sm text-brand-2 ml-8px">Document Comparison</span>
          </label>
        </div>
        <div v-show="features_err && submitted" class="text-[#FF5050]">{{ features_err }}</div>
        <div class="md:my-20px md:text-tiny <md:mt-24px <md:mb-8px <md:text-sm text-brand-2 font-bold"><i class="text-[#FF5050]">*</i> 终端用户人数</div>
        <div><input class="w-full md:h-50px <md:h-44px px-12px rounded-6px !border-1px !border-[#CCCCCC] border-solid !focus:border-brand-0 !hover:border-brand-0" v-model="number" min="1" type="number"></div>
        <div class="info-content">
          <div class="name">
            <span class="inline-block md:mt-40px md:mb-20px md:text-tiny <md:mt-24px <md:mb-8px <md:text-sm text-brand-2 font-bold"><i class="text-[#FF5050]">*</i> 姓名</span>
            <input class="w-full md:h-50px <md:h-44px px-12px rounded-6px !border-1px !border-[#CCCCCC] border-solid !focus:border-brand-0 !hover:border-brand-0" v-model.trim="name" type="text" placeholder="您的全名" @input="handleInfo('name')">
          </div>
          <div v-if="name_err" class="text-[#FF5050]">{{ name_err }}</div>
        </div>
        <div class="info-content">
          <div class="email">
            <span class="inline-block md:mt-40px md:mb-20px md:text-tiny <md:mt-24px <md:mb-8px <md:text-sm text-brand-2 font-bold"><i class="text-[#FF5050]">*</i> 公司邮箱地址</span>
            <input class="w-full md:h-50px <md:h-44px px-12px rounded-6px !border-1px !border-[#CCCCCC] border-solid !focus:border-brand-0 !hover:border-brand-0" v-model.trim="email" type="text" placeholder="name@company.com" @input="handleEmail">
          </div>
          <div v-if="email_err" class="text-[#FF5050]">{{ email_err }}</div>
        </div>
        <div class="info-content">
          <div class="phone">
            <span class="inline-block md:mt-40px md:mb-20px md:text-tiny <md:mt-24px <md:mb-8px <md:text-sm text-brand-2 font-bold">电话</span>
            <input class="w-full h-50px px-12px rounded-6px !border-1px !border-[#CCCCCC] border-solid !focus:border-brand-0 !hover:border-brand-0" v-model.trim="phone" type="text" placeholder="Enter phone number">
            <p class="lg:mt-8px lg:pl-12px <lg:mt-4px text-12px leading-18px text-brand-0">为了与您取得联系，移动电话最好开通了微信，固定电话请填写区号。</p>
          </div>
        </div>
        <div class="info-content">
          <div class="email">
            <span class="inline-block md:mt-40px md:mb-20px md:text-tiny <md:mt-24px <md:mb-8px <md:text-sm text-brand-2 font-bold"><i class="text-[#FF5050]">*</i> 公司名称</span>
            <input class="w-full md:h-50px <md:h-44px px-12px rounded-6px !border-1px !border-[#CCCCCC] border-solid !focus:border-brand-0 !hover:border-brand-0" v-model.trim="company" type="text" placeholder="填写您的公司名称" @input="handleInfo('company')">
          </div>
          <div v-if="company_err" class="text-[#FF5050]">{{ company_err }}</div>
        </div>
        <div class="info-content">
          <div class="email">
            <span class="inline-block md:mt-40px md:mb-20px md:text-tiny <md:mt-24px <md:mb-8px <md:text-sm text-brand-2 font-bold"><i class="text-[#FF5050]">*</i> 公司网站</span>
            <input class="w-full md:h-50px <md:h-44px px-12px rounded-6px !border-1px !border-[#CCCCCC] border-solid !focus:border-brand-0 !hover:border-brand-0" v-model.trim="website" type="text" placeholder="请留下您公司官网网址" @input="handleInfo('website')">
          </div>
          <div v-if="website_err" class="text-[#FF5050]">{{ website_err }}</div>
        </div>
        <div class="info-content">
          <div class="email">
            <span class="inline-block md:mt-40px md:mb-20px md:text-tiny <md:mt-24px <md:mb-8px <md:text-sm text-brand-2 font-bold"><i class="text-[#FF5050]">*</i> 公司行业</span>
            <div class="relative">
              <select  class="w-full md:h-50px <md:h-44px px-12px rounded-6px appearance-none border-1px border-[#CCCCCC] outline-none focus:border-brand-0 hover:border-brand-0" v-model="industry" name="Industry" @change="handleInfo('industry', $event)">
                <option value="Architecture">建筑</option>
                <option value="Engineering_Construction">工程与施工</option>
                <option value="Finance">金融</option>
                <option value="Law_Firms_Legal_Services">律师事务所和法律服务</option>
                <option value="Government">政府</option>
                <option value="Healthcare">医疗健康</option>
                <option value="Aerospace_Defense">航空航天</option>
                <option value="Automotive_Marine">汽车和船舶</option>
                <option value="Pharmaceuticals">制药产业</option>
                <option value="Security">安全</option>
                <option value="Information_Document_Management">信息和文档管理</option>
                <option value="Media">媒体</option>
                <option value="Publishing">图书出版</option>
                <option value="Education">教育</option>
                <option value="eLearning">电子学习</option>
                <option value="Marketing_Services">市场营销服务</option>
                <option value="Insurance">保险</option>
                <option value="HR_Staffing">人力资源和人员配置</option>
              </select>
              <Arrow class="absolute bottom-12px right-10px z-2 w-20px h-20px pointer-events-none text-[#CCCCCC] transform rotate-90" />
            </div>
          </div>
        </div>
        <div class="lg:hover:bg-[#548CF9] <lg:active:[#548CF9] w-full lg:max-w-280px md:mt-56px text-sm md:py-15px <md:mt-32px <md:py-10px text-center  mx-auto rounded-6px font-bold bg-brand-0 text-white cursor-pointer" @click="submit">{{ submitText }}</div>
        <div v-if="errText" class="w-full mt-5px text-[#FF5050] text-xs text-center">{{ errText }}</div>
      </div>
      <div class="lg:w-[37.7966%]">
        <h3 class="text-brand-1 text-base lg:mt-40px <md:text-20px <md:leading-24px font-bold">联系</h3>
        <div class="mt-16px pt-10px pb-18px text-0px border-b-black/8 border-b-2px">
          <a class="inline-flex items-center" href="mailto:support@compdf.com?subject=获取报价@@&@@免费试用ComPDFKit产品">
            <span class="inline-block rounded-1/2 bg-brand-0"><Email /></span>
            <span class="ml-12px font-bold text-sm text-brand-0">联系销售</span>
          </a>
        </div>
        <div class="<lg:hidden mt-116px">
          <div v-for="(item, index) in comment" :key="index" class="comment-item">
            <Dot />
            <div class="mt-20px mb-26px text-sm text-brand-3">{{ item.text }}</div>
            <div class="mb-3px text-xs text-brand-2 font-bold">{{ item.name }}</div>
            <div class="text-12px leading-18px text-brand-4">{{ item.job }}</div>
          </div>
        </div>
      </div>
    </div>
    <PdfSdkFormSwiper :comment="comment" />
    <Modal @close="doClose" :modalShow="modalShow" />
    <Footer />
  </div>
</template>

<script>
import checkEmail from '~/utils/checkemail'
import iOS from '~/assets/images/icons/apple.svg?inline'
import Mac from '~/assets/images/icons/macos.svg?inline'
import Android from '~/assets/images/icons/android.svg?inline'
import Windows from '~/assets/images/icons/windows.svg?inline'
import Web from '~/assets/images/icons/web.svg?inline'
import CheckBox from '~/assets/images/icons/check_box.svg?inline'
import Email from '~/assets/images/icons/email.svg?inline'
import Dot from '~/assets/images/icons/dot.svg?inline'
import Arrow from '~/assets/images/icons/arrow.svg?inline'
import Linux from '~/assets/images/icons/linux.svg?inline'

export default {
  components: {
    CheckBox,
    iOS,
    Mac,
    Android,
    Windows,
    Web,
    Email,
    Dot,
    Arrow,
    Linux
  },
  data() {
    return {
      modalShow: false,
      submitted: false,
      fieldsNum: 0,
      submitText: '提交',
      errText: '',
      building: 'A product for customers',
      number: 1,
      platforms: [],
      platforms_err: null,
      features: [],
      features_err: null,
      description: '',
      description_err: null,
      name: null,
      name_err: null,
      email: null,
      email_err: null,
      phone: '',
      company: null,
      company_err: null,
      website: null,
      website_err: null,
      industry: 'Architecture',
      err: {
        description: '请描述贵公司的项目',
        platforms: '请选择开发平台',
        features: '请勾选所需功能',
        name: '请输入您的姓名',
        phone: '请填写正确的联系电话',
        email: {
          err: '请输入您公司的邮箱地址',
          correct: '请填写正确格式的邮箱地址',
          business: 'Please enter a non generic email address'
        },
        company: '请填写您的公司名称',
        website: '请留下您公司官网网址'
      },
      comment: [
        {
          text: `Considered that our users want to take some notes when they are reading and studying. I was trying to process PDFs and to recreate all the functionality, but what I needed to provide is a solution to a business problem at my work, not write a PDF-processing piece of software. With the help of ComPDFKit, we needn't waste much time on development process.`,
          name: 'Gordon Hall',
          job: 'Operations Director, Information Technology'
        },
        {
          text: 'Thanks to ComPDFKit a lot. This time, our company want to offer customers a simple, fast, and secure way to sign and fill PDF forms, they could always meet the needs of our company. That is why PDF Technologies has been our partner for many years.',
          name: 'Ronald W. Reagan ',
          job: 'Product Manager, Modern service industry'
        }
      ]
    }
  },
  head() {
    return {
      title: this.$config.meta['contact-sales-title'],
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$config.meta['contact-sales-desc']
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: this.$config.meta['contact-sales-title']
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.$config.meta['contact-sales-desc']
        },
        {
          hid: 'twitter:title',
          property: 'twitter:title',
          content: this.$config.meta['contact-sales-title']
        },
        {
          hid: 'twitter:description',
          property: 'twitter:description',
          content: this.$config.meta['contact-sales-desc']
        }
      ],
      link: [{
        hid: 'canonical',
        rel: 'canonical',
        href: process.env.domain + this.$route.path
      }]
    }
  },
  watch: {
    fieldsNum(val) {
      if (val > 9) {
        this.errText = ''
      }
    }
  },
  methods: {
    doClose() {
      this.modalShow = false
      this.platforms = []
      this.features = []
      this.description = ''
      this.name = null
      this.email = null
      this.company = null
      this.website = null
      this.fieldsNum = 0
      this.submitText = 'Submit'
      document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop = 0
    },
    handleCheckBox(arg) {
      if (!this[arg].length) {
        if (!this[arg + '_err']) {
          this[arg + '_err'] = this.err[arg]
          if (this.fieldsNum > 0) {
            this.fieldsNum--
          }
        }
        return false
      } else {
        if (this[arg + '_err']) {
          this[arg + '_err'] = false
          this.fieldsNum++
        }
        return true
      }
    },
    handleErr(flag, errMessage, origin) {
      if (!this[flag]) {
        if (!this[flag + '_err']) {
          this[flag + '_err'] = errMessage
          if (this.fieldsNum > 0) {
            this.fieldsNum--
          }
        }
        return false
      } else {
        if (this[flag + '_err']) {
          this[flag + '_err'] = origin
          this.fieldsNum++
        }
        return true
      }
    },
    handleEmail() {
      if (!this.email) {
        if (!this.email_err) {
          this.email_err = this.err.email.err
          if (this.fieldsNum > 0) {
            this.fieldsNum--
          }
        }
        return false
      }
      if (!checkEmail(this.email)) {
        if (!this.email_err) {
          if (this.fieldsNum > 0) {
            this.fieldsNum--
          }
        }
        this.email_err = this.err.email.correct
        return false
      }
      if (this.email_err) {
        this.email_err = null
        this.fieldsNum++
      }
      return true
    },
    handleInfo(message, $event) {
      $event && $event.target.blur()
      return this.handleErr(message, this.err[message], null)
    },
    submit() {
      this.submitted = true
      let i = 0
      if (this.handleCheckBox('platforms')) i++
      if (this.handleCheckBox('features')) i++
      if (this.handleInfo('description')) i++
      if (this.handleInfo('name')) i++
      if (this.handleEmail()) i++
      if (this.handleInfo('company')) i++
      if (this.handleInfo('website')) i++
      this.fieldsNum = i
      if (this.fieldsNum < 7) {
        this.errText = '请完成必选项的填写'
        return
      }
      this.errText = ''
      const self = this
      this.$axios({
        method: 'POST',
        url: this.$config.pdfDomain + '/api/contact',
        data: {
          'detail[platform]': self.platforms.join(', '),
          'detail[feature]': self.features.join(', '),
          'detail[description]': self.description,
          'contact_email[user_name]': self.name,
          'contact_email[email]': self.email,
          'detail[building]': self.building,
          'detail[phone]': self.phone,
          'detail[number]': self.number,
          'detail[company]': self.company,
          'detail[website]': self.website,
          'detail[industry]': self.industry
        },
        transformRequest: [function (data) {
          let ret = ''
          for (let item in data) {
            ret += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
          }
          ret = ret.substr(0, ret.length - 1)
          return ret
        }]
      })
        .then((res) => {
          console.log(res)
          const { data } = res
          if (data.status === 'success') {
            console.log('Replace the success Flag')
            setTimeout(function () {
              self.submitText = 'Success'
              self.modalShow = true
            }, 0)
          } else if (data.status === 'faild') {
            alert('The email fails to send.')
          }
        })
        .catch((err) => {
          console.log(err)
          alert('The email fails to send.')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .contact-container {
    .contact-box {
      label {
        input {
          position: absolute;
          border: 0px;
          clip: rect(0px, 0px, 0px, 0px);
          height: 1px;
          width: 1px;
          margin: -1px;
          padding: 0px;
          overflow: hidden;
          white-space: nowrap;
        }
        svg {
          flex-shrink: 0;
          color: #1460F3;
        }
      }
      .box {
        flex-shrink: 0;
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid #A6B2BF;
        border-radius: 2px;
      }
    }
    .comment-item {
      &::before {
        content: '';
        display: block;
        width: 60px;
        height: 2px;
        margin-bottom: 18px;
        background-color: rgba(20, 96, 243, 0.1);
      }
      & + .comment-item {
        margin-top: 30px;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .banner {
      background: linear-gradient(90deg, #8D83FF 0%, #1D69FC 118.36%);
    }
  }
  @media screen and (min-width: 768px) {
    .banner {
      background: #F8FAFF url('/images/contact/sdk_form_bg.jpg') center bottom no-repeat;
      background-size: 1920px auto;
    }
  }
  @media screen and (min-width: 930px) {
    .contact-container {
      .contact-box {
        box-shadow: 0px 4px 35px rgba(129, 149, 200, 0.18);
      }
    }
  }
  @media screen and (min-width: 1920px) {
    .banner {
      background-size: cover;
    }
  }
</style>