realtorEasier-webSite/pc/src/page/distributor/index.vue

<template>
  <div class="distributor-page">
    <div class="banner">
      <div class="container">{{ $t('agent.bannerTitle') }}</div>
    </div>
    <div class="container">
      <div class="plate">
        <h1 class="common-title">{{ $t('agent.planTitle') }}</h1>
        <ul class="plan">
          <li>{{ $t('agent.planDesc1') }}</li>
          <li>{{ $t('agent.planDesc2') }}</li>
          <li>{{ $t('agent.planDesc3') }}</li>
          <li>{{ $t('agent.planDesc4') }}</li>
        </ul>
      </div>
      <div class="plate">
        <h1 class="common-title">{{ $t('agent.advanTitle') }}</h1>
        <div class="benefit-w clear">
          <div class="benefit-item" v-for="(item, index) in benefits" :key="index">
            <div class="icon" :style="{backgroundImage: `url(${item.icon})`}"></div>
            <h6>{{ item.name }}</h6>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="form-plate">
      <div class="container">
        <h1 class="common-title">{{ $t('agent.jinxiaoTitle') }}</h1>
        <h-row :gutter="96">
          <h-col :span="12">
            <div class="form">
              <p class="form-title">{{ $t('agent.jinxiaoForm.companytitle') }}</p>
              <div class="form-item">
                <p class="label">*{{ $t('agent.jinxiaoForm.companyNameLabel') }}</p>
                <input type="text" v-model="form.name" :placeholder="$t('agent.jinxiaoForm.companyNamePlaceholder')">
              </div>
              <div class="form-item">
                <p class="label">*{{ $t('agent.jinxiaoForm.addressLabel') }}</p>
                <h-row :gutter="10">
                  <h-col :span="12">
                    <input type="text" v-model="form.country" :placeholder="$t('agent.jinxiaoForm.addressPlaceholder1')">
                  </h-col>
                  <h-col :span="12">
                    <input type="text" v-model="form.region" :placeholder="$t('agent.jinxiaoForm.addressPlaceholder2')">
                  </h-col>
                </h-row>
                <input type="text"  v-model="form.address" :placeholder="$t('agent.jinxiaoForm.addressPlaceholder3')">
              </div>
              <div class="form-item">
                <p class="label">{{ $t('agent.jinxiaoForm.storeLabel') }}</p>
                <h-row :gutter="10">
                  <h-col :span="12">
                    <div :class="`input ${form.type === 1 ? 'active' : ''}`" @click="form.type = 1">{{ $t('agent.jinxiaoForm.storeType1') }}</div>
                  </h-col>
                  <h-col :span="12">
                    <div  :class="`input ${form.type === 2 ? 'active' : ''}`" @click="form.type = 2">{{ $t('agent.jinxiaoForm.storeType2') }}</div>
                  </h-col>
                </h-row>
                <input type="text" v-model="form.storeAddress" :placeholder="$t('agent.jinxiaoForm.storePlaceholder')">
              </div>
            </div>
          </h-col>
          <h-col :span="12"><div class="form">
              <p class="form-title">{{ $t('agent.jinxiaoForm.applytitle') }}</p>
              <div class="form-item">
                <h-row :gutter="10">
                  <h-col :span="12">
                    <p class="label">*{{ $t('agent.jinxiaoForm.applyNameXing') }}</p>
                    <input type="text"  v-model="form.surName" :placeholder="$t('agent.jinxiaoForm.applyNamePlaceholder')">
                  </h-col>
                  <h-col :span="12">
                    <p class="label">*{{ $t('agent.jinxiaoForm.applyNameMing') }}</p>
                    <input type="text"  v-model="form.userName" :placeholder="$t('agent.jinxiaoForm.applyNamePlaceholder1')">
                  </h-col>
                </h-row>
              </div>
              <div class="form-item" style="margin-bottom: 26px">
                <p class="label">*{{ $t('agent.jinxiaoForm.positionLabel') }}</p>
                <input type="text"  v-model="form.post" :placeholder="$t('agent.jinxiaoForm.positionPlaceholder')">
              </div>
              <div class="form-item">
                <p class="label">*{{ $t('agent.jinxiaoForm.phoneLabel') }}</p>
                <h-row :gutter="10">
                  <h-col :span="8">
                    <input type="text"  v-model="form.areaCode" placeholder="+86" value="+86">
                  </h-col>
                  <h-col :span="16">
                    <input type="text"  v-model="form.phone" :placeholder="$t('agent.jinxiaoForm.phonePlaceholder')">
                  </h-col>
                </h-row>
              </div>
              <div class="form-item">
                <p class="label">*{{ $t('agent.jinxiaoForm.emailLabel') }}</p>
                <input type="text"  v-model="form.email" :placeholder="$t('agent.jinxiaoForm.emailPlaceholder')">
              </div>
            </div></h-col>
        </h-row>
        <div class="submit-btn" @click="saveAduit">{{ $t('agent.jinxiaoForm.submit') }}</div>
      </div>
    </div>
    
  </div>
</template>

<script>
import { getPosition } from '@/util'
import { mapState } from 'vuex'
import Api from '@/apis'
export default {
  data () {
    return {
      form: {
        address: '',
        areaCode: '',
        email: '',
        name: '',
        country: '',
        surName: '',
        userName: '',
        post: '',
        phone: '',
        email: '',
        region: '',
        type: 1,
        storeAddress: ''
      },
      rules: {
        name: [ { required: true, message: this.$t('agent.jinxiaoForm.companyNamePlaceholder') } ],
        address: [ { required: true, message: this.$t('agent.jinxiaoForm.addressPlaceholder3') } ],
        country: [ { required: true, message: this.$t('agent.jinxiaoForm.addressPlaceholder1') } ],
        region: [ { required: true, message: this.$t('agent.jinxiaoForm.addressPlaceholder2') } ],
        userName: [ { required: true, message: this.$t('agent.jinxiaoForm.applyNamePlaceholder') } ],
        userName: [ { required: true, message: this.$t('agent.jinxiaoForm.applyNamePlaceholder1') } ],
        post: [ { required: true, message: this.$t('agent.jinxiaoForm.positionPlaceholder') } ],
        phone: [ { required: true, message: this.$t('agent.jinxiaoForm.phonePlaceholder') } ],
        email: [ { required: true, message: this.$t('agent.jinxiaoForm.emailPlaceholder') } ],
      },
      benefits: [
        {
          name: this.$t('agent.advan.item1Title'),
          desc: this.$t('agent.advan.item1Sub'),
          icon: require('@/assets/images/distributor/icon-1.png')
        },
        {
          name: this.$t('agent.advan.item2Title'),
          desc: this.$t('agent.advan.item2Sub'),
          icon: require('@/assets/images/distributor/icon-2.png')
        },
        {
          name: this.$t('agent.advan.item3Title'),
          desc: this.$t('agent.advan.item3Sub'),
          icon: require('@/assets/images/distributor/icon-3.png')
        },
        {
          name: this.$t('agent.advan.item4Title'),
          desc: this.$t('agent.advan.item4Sub'),
          icon: require('@/assets/images/distributor/icon-4.png')
        },
        {
          name: this.$t('agent.advan.item5Title'),
          desc: this.$t('agent.advan.item5Sub'),
          icon: require('@/assets/images/distributor/icon-5.png')
        },
      ]
    }
  },
  components: {
  },
  mounted () {
  },
  destroyed () {
  },
  methods: {
    saveAduit () {
      if (this.validator()) {
        return Api.saveAduit(this.form).then(res => {
          if (res.data.code === 0) {
            this.$alert('提交成功', {
              icon: 'success',
            })
          } else {
            this.$alert(res.msg)
          }
        })
      }
      
    },
    validator () {
      let pass = true
      Object.keys(this.rules).forEach(key => {
        if (this.rules[key][0].required && !this.form[key]) {
          pass = false
          this.$alert(this.rules[key][0].message)
          return
        }
      })
      return pass
    }
  }
}
</script>
<style lang="scss" >
.distributor-page {
  color: #202020;
  .banner {
    width: 100%;
    height: 420px;
    background: url(~@/assets/images/distributor/banner.jpg) no-repeat center center;
    margin-bottom: 110px;
    line-height: 420px;
    font-size: 40px;
  }
  .common-title {
    margin-bottom: 75px;
    margin-top: 102px;
  }
  .plan {
    line-height: 38px;
    color: #909090;
  }
  .benefit-w {
    padding-bottom: 113px;
  }
  .benefit-item {
    float: left;
    width: 20%;
    text-align: center;
    .icon {
      height: 60px;
      width: 100%;
      background-repeat: no-repeat;
      background-position: center center;
    }
    h6 {
      margin: 14px 0 10px;
    }
    p {
      color: #909090;
      width: 162px;
      margin: 0 auto;
    }
  }
  .form-plate {
    padding: 102px 0 160px;
    background: #F7F7F7;
    .common-title {
      margin-top: 0;
    }
  }
  .form {
    color: #202020;
    .form-title {
      font-weight: bold;
      padding-bottom: 38px;
      border-bottom: 1px solid #707070;
      margin-bottom: 30px;
    }
    .form-item {
      margin-bottom: 40px;
    }
    .label {
      margin-bottom: 3px;
    }
    input, .input {
      width: 100%;
      border:1px solid rgba(144,144,144,1);
      height: 40px;
      line-height: 38px;
      margin-top: 10px;
      
      font-size: 14px;
      padding: 0 10px;
      background: #fff;
    }
    
  }
  .input {
      cursor: pointer;
      color: #909090;
      &.active {
        color: #202020;
        border-color: #1FE4DC;
      }
    }
  .submit-btn {
    margin: 63px auto 0;
    width: 216px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #1FE4DC;
    font-weight: 600;
    cursor: pointer;
  }
}

</style>