realtorEasier-webSite/mobile/src/pages/agent/index.vue

<template>
  <div class="agent-layout">
    <div class="mobile1">
      <div class="top">
        <img class="top-bg" src="@/assets/images/refactor/agent/banner.png" alt />
      </div>
    </div>
    <div class="mobile2">
      <h1 class="common-title">{{ $t('agent.planTitle') }}</h1>
      <p>{{ $t('agent.planDesc1') }}</p>
      <p>{{ $t('agent.planDesc2') }}</p>
      <p>{{ $t('agent.planDesc3') }}</p>
      <p>{{ $t('agent.planDesc4') }}</p>
    </div>
    <div class="mobile3">
      <h1 class="common-title">{{ $t('agent.advanTitle') }}</h1>
      <ul class="benefits">
        <li v-for="(item, index) in benefitGroup" :key="index">
          <div class="icon-bg" :style="{'background-image': `url(${item.img})`}"></div>
          <h4>{{ item.title }}</h4>
          <p>{{ item.sub }}</p>
        </li>
      </ul>
    </div>
    <div class="mobile4">
      <p class="common-title">{{ $t('agent.jinxiaoTitle') }}</p>
      <div class="info">
        <div class="input-con">
          <div class="f-title">{{langAgent.jingxiaoshang.companytitle}}</div>
          <p class="p-line"></p>
          <div class="s-title required">{{langAgent.jingxiaoshang.company.name.title}}</div>
          <div class="ant-input">
            <input v-model="form.name" :placeholder="langAgent.jingxiaoshang.company.name.placeholder" type="text" />
          </div>
          <div class="s-title required">{{langAgent.jingxiaoshang.company.address.title}}</div>
          <div class="divide">
            <div class="ant-input">
              <input v-model="form.country" :placeholder="langAgent.jingxiaoshang.company.address.placeholder" type="text" />
            </div>
            <div class="ant-input">
              <input v-model="form.region" :placeholder="langAgent.jingxiaoshang.company.address.placeholder2" type="text" />
            </div>
          </div>
          <div class="ant-input">
            <input v-model="form.address" :placeholder="langAgent.jingxiaoshang.company.address.placeholder3" type="text" />
          </div>
          <div class="s-title">{{langAgent.jingxiaoshang.company.store.title}}</div>
          <div class="select-btns">
            <div @click="form.type=1" :class="{'b-default':form.type!==1}">{{langAgent.jingxiaoshang.company.store.type1}}</div>
            <div @click="form.type=2" :class="{'b-default':form.type!==2}">{{langAgent.jingxiaoshang.company.store.type2}}</div>
          </div>
          <div class="ant-input">
            <input v-model="form.storeAddress" :placeholder="langAgent.jingxiaoshang.company.store.placeholder" type="text" />
          </div>
        </div>
      </div>

      <div class="info s-info">
        <div class="input-con">
          <div class="f-title">{{langAgent.jingxiaoshang.applytitle}}</div>
          <p class="p-line"></p>
          <div class="with-divide">
            <div>
              <p class="s-title required">{{langAgent.jingxiaoshang.apply.name.xing}}</p>
              <div class="ant-input">
                <input v-model="form.surName" :placeholder="langAgent.jingxiaoshang.apply.name.placeholder" type="text" />
              </div>
            </div>
            <div>
              <p class="s-title required">{{langAgent.jingxiaoshang.apply.name.ming}}</p>
              <div class="ant-input">
                <input v-model="form.userName" :placeholder="langAgent.jingxiaoshang.apply.name.placeholder1" type="text" />
              </div>
            </div>
          </div>
          <div class="s-title required">{{langAgent.jingxiaoshang.apply.position.title}}</div>
          <div class="ant-input">
            <input v-model="form.post" :placeholder="langAgent.jingxiaoshang.apply.position.placeholder" type="text" />
          </div>
          <div class="s-title required">{{langAgent.jingxiaoshang.apply.phone.title}}</div>
          <div class="divide phone-divide">
            <div class="ant-input area-div" ref="quhaoMenu" @click="showSelect=!showSelect">
              <span>{{codeActive[1]}}</span>
              <ul v-if="showSelect">
                <li
                  @click="selectItem(item)"
                  v-for="(item,i) in selectCall"
                  :key="i"
                >{{language==='en'?item[2]:item[0]}}{{item[1]}}</li>
              </ul>
            </div>
            <div class="ant-input">
              <input
                v-model="form.phone"
                oninput="value=value.replace(/[^\d]/g,'')"
                maxlength="11"
                :placeholder="langAgent.jingxiaoshang.apply.phone.placeholder"
                type="text"
              />
            </div>
          </div>
          <div class="s-title required">{{langAgent.jingxiaoshang.apply.email.title}}</div>
          <div class="ant-input">
            <input v-model="form.email" :placeholder="langAgent.jingxiaoshang.apply.email.placeholder" type="text" />
          </div>
        </div>
      </div>

      <div class="btns-con">
        <div class="btns" @click="submit">{{ $t('agent.jinxiaoForm.submit') }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import selectCall from '@/util/country.js'
import {reg} from '@/util'
import { mapState } from 'vuex'
import { i18n } from '@/lang'

export default {
  computed: {
    ...mapState({
      langAgent: state => state.language.home.agent,
      langToast: state => state.language.home.toast,
      language: state => state.language.current
    })
  },
  data () {
    let benefitGroup = [
      {
        img: require('@/assets/images/refactor/agent/ad1.png'),
        title: i18n.t('agent.advan.item1Title'),
        sub: i18n.t('agent.advan.item1Sub')
      },
      {
        img: require('@/assets/images/refactor/agent/ad2.png'),
        title: i18n.t('agent.advan.item2Title'),
        sub: i18n.t('agent.advan.item2Sub')
      },
      {
        img: require('@/assets/images/refactor/agent/ad3.png'),
        title: i18n.t('agent.advan.item3Title'),
        sub: i18n.t('agent.advan.item3Sub')
      },
      {
        img: require('@/assets/images/refactor/agent/ad4.png'),
        title: i18n.t('agent.advan.item4Title'),
        sub: i18n.t('agent.advan.item4Sub')
      },
      {
        img: require('@/assets/images/refactor/agent/ad5.png'),
        title: i18n.t('agent.advan.item5Title'),
        sub: i18n.t('agent.advan.item5Sub')
      }
    ]

    return {
      selectCall,
      showSelect: false,
      codeActive: ['中国', '+86', 'China'],
      form: {
        name: '',
        country: '',
        region: '',
        address: '',
        type: 1,
        storeAddress: '',
        surName: '',
        userName: '',
        post: '',
        areaCode: '',
        phone: '',
        email: ''
      },
      benefitGroup,
      agent: {
        title: '四维看看经销商计划概述',
        label:
          '四维时代独创的AI空间重构算法技术已屡获殊荣，并累计在全球范围采集超过30万个空间模型。<br/>这种全新的空间记录方式正在逐步改变各行各业的业务模式（房地产、建筑、文博、旅游、新闻、保险理赔、刑侦记录等等）。<br/>四维看看经销商计划诚邀各业界专业人士，参与到未来的“数字万物”的进程中，共同开拓市场，分享利润。<br/>如果您对3D捕捉世界的想法很感兴趣，并愿将其纳入到您的事业规划中，这是一个绝佳的合作机会'
      },
      jingxiaoshang: {
        title: '成为四维看看经销商'
      }
    }
  },
  methods: {
    selectItem (item) {
      this.codeActive = item
      this.showSelect = false
    },

    async submit () {
      let check = value => {
        for (let i = 0, len = value.length; i < len; i++) {
          if (!value[i].val) {
            return this.$toast.show('warn', (this.language === 'en' ? value[i].En : value[i].name) + this.langToast['7'])
          }
        }
        return true
      }

      let {
        name,
        country,
        region,
        address,
        type,
        storeAddress,
        surName,
        userName,
        post,
        phone,
        email
      } = this.form
      let checkStr = [
        {
          name: '公司注册名称',
          En: 'Registered Company Name',
          val: name
        },
        {
          name: '国家',
          En: 'Country',
          val: country
        },
        {
          name: '地区',
          En: 'Region',
          val: region
        },
        {
          name: '公司地址',
          En: 'Address',
          val: address
        },
        // {
        //   name: '门店地址',
        //   En:'',
        //   val: storeAddress
        // },
        {
          name: '姓',
          En: 'Last Name',
          val: surName
        },
        {
          name: '名',
          En: 'First Name',
          val: userName
        },
        {
          name: '职位',
          En: 'Title',
          val: post
        },
        {
          name: '电话',
          En: 'Phone',
          val: phone
        },
        {
          name: '电子邮箱',
          En: 'Email',
          val: email
        }
      ]
      if (!check(checkStr)) {
        return
      }
      if (!reg.email.test(email)) {
        return this.$toast.show('warn', this.langToast['8'])
      }
      let areaCode = Number(this.codeActive[1].substr(1))
      let params = {
        name,
        country,
        region,
        address,
        type,
        storeAddress,
        surName,
        userName,
        post,
        areaCode,
        phone,
        email
      }
      let res = await this.$http({
        method: 'post',
        data: params,
        url: '/agentAduit/save'
      })
      let response = res.data
      if (response.code !== 0) {
        return this.$toast.show('warn', this.langToast[response.code])
      }
      this.$toast.show('warn', this.langToast['9'], () => {
        this.form = {
          name: '',
          country: '',
          region: '',
          address: '',
          type: 1,
          storeAddress: '',
          surName: '',
          userName: '',
          post: '',
          areaCode: '',
          phone: '',
          email: ''
        }
      })
    }
  },

  mounted () {
    document.addEventListener('click', e => {
      if (this.$refs.quhaoMenu) {
        if (!this.$refs.quhaoMenu.contains(e.target)) {
          this.showSelect = false
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>