crs-double-resistance/src/view/register/index.vue

<template>
  <div class="box">
    <div class="footerbox">
      <div class="topbox">
        {{$t('register.WELCOME')}}
      </div>
            <div class="taps_footerbox">
              <el-input class="inputbox" v-model="from.email" :placeholder="$t('register.Address')"></el-input>
              <div class="red-t">*</div>
            </div>
            <div class="taps_footerbox">
              <el-input class="inputbox" v-model="from.password" show-password :placeholder="$t('register.Password')"></el-input>
              <div class="red-t">*</div>
            </div>
            <div class="taps_footerbox">
              <el-input class="inputbox" v-model="from.confirmPassword" show-password :placeholder="$t('register.Confirm')"></el-input>
              <div class="red-t">*</div>
            </div>
            <div class="taps_footerbox">
              <el-input class="inputbox" v-model="from.name" :placeholder="$t('register.Fullname')"></el-input>
              <!-- <div class="red-t">*</div> -->
            </div>
            <div class="taps_footerbox">
              <el-input class="inputbox" v-model="from.company" :placeholder="$t('register.Company')"></el-input>
              <!-- <div class="red-t">*</div> -->
            </div>
            <div class="taps_footerbox">
              <el-select v-model="from.country" :placeholder="$t('register.Country')">
                <el-option
                  v-for="item in regionList"
                  :key="item.en"
                  :label="item.en"
                  :value="item.en">
                </el-option>
              </el-select>
            </div>
            <div class="taps_footerbox">
              <el-select v-model="from.accountType" :placeholder="$t('register.Account')">
                <el-option
                  v-for="item in accountTypeList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </div>
            <el-button class="buttonbox_taps" type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="postRegister">{{$t('register.Agree')}}</el-button>
          </div>
   <div class="rightbox">
     <div class="rightcenterbox">
       <div class="rightcenterbox_f">
         <!-- Contact Us -->
         {{$t('button.contactUs')}}
        </div>
       <div class="rightcenterbox_b">
         <p>{{$t('bottomBar.Tel')}} {{$t('taps.Telnum')}}</p>
         <p>{{$t('bottomBar.Email')}} {{$t('taps.Emailnum')}}</p>
       </div>
     </div>
   </div>
  </div>
</template>
<script>
import region from '@/js/region'
export default {
  components: {
  },
  name: 'register',
  data () {
    return {
      fullscreenLoading: false,
      langShow: this.$util.localeStorage(),
      checked: true,
      checkedp: true,
      regionList: [],
      from: {
        accountType: '',
        company: '',
        confirmPassword: '',
        country: '',
        email: '',
        name: '',
        password: '',
        country: ''
      },
      accountTypeList: [{
        name: 'Industry',
        nameCn: '工业客户'
      }, {
        name: 'Academic',
        nameCn: '科研客户'
      }, {
        name: 'Distributor',
        nameCn: '经销商'
      }]
    }
  },
  methods: {
    postRegister () { // 注册
      if (this.verification()) {
        this.fullscreenLoading = true;
        this.$api.post('auth/register', this.from).then((res) => {
          if (res.code == 0) {
            this.fullscreenLoading = false;
            this.$message({
              message: this.$t('message.registration'),
              type: 'success'
            })
            this.$router.push({
              name: 'registration'
            })
          } else if (res.code == 226) {
            this.$message(this.$t('message.alreadyExists'))
            this.fullscreenLoading = false;
          } else if (res.code == 407) {
            this.$message(this.$t('message.hasFailed'))
            this.fullscreenLoading = false;
          } else {
            this.$message(res.msg)
            this.fullscreenLoading = false;
          }
        })
        
      }
    },
    verification () {
      // if (!this.from.email) {
      //   this.$message.error(this.$t('register.Address') + this.$t('register.Cannot'))
      //   return false
      // } else if (!this.$util.isEmail(this.from.email)) {
      //   this.$message.error(this.$t('input.email') + this.$t('message.email'))
      //   return false
      // } else if (!this.from.password) {
      //   this.$message.error(this.$t('register.Password') + this.$t('register.Cannot'))
      //   return false
      // } else if (!this.$util.passwordValid(this.from.password)) {
      //   this.$message.error(this.$t('register.kinds'))
      //   return false
      // } else if (this.from.password !== this.from.confirmPassword) {
      //   this.$message.error(this.$t('register.inconsistent'))
      //   return false
      // } else if (!this.from.name) {
      //   this.$message.error(this.$t('register.Fullname') + this.$t('register.Cannot'))
      //   return false
      // } else if (!this.from.company) {
      //   this.$message.error(this.$t('register.Company') + this.$t('register.Cannot'))
      //   return false
      // } else if (!this.from.country) {
      //   this.$message.error(this.$t('register.Country') + this.$t('register.Cannot'))
      //   return false
      // } else if (!this.from.accountType) {
      //   this.$message.error(this.$t('register.Account') + this.$t('register.Cannot'))
      //   return false
      // } else {
      //   return true
      // }

      if (!this.from.email) {
        this.$message.error(this.$t('register.Address') + this.$t('register.Cannot'))
        return false
      } else if (!this.$util.isEmail(this.from.email)) {
        this.$message.error(this.$t('input.email') + this.$t('message.email'))
        return false
      } else if (!this.from.password) {
        this.$message.error(this.$t('register.Password') + this.$t('register.Cannot'))
        return false
      } else if (!this.$util.passwordValid(this.from.password)) {
        this.$message.error(this.$t('register.kinds'))
        return false
      } else if (this.from.password !== this.from.confirmPassword) {
        this.$message.error(this.$t('register.inconsistent'))
        return false
      } else {
        return true
      }
    }
  },
  mounted () {
  },
  created () {
    this.regionList = region
  }
}
</script>
<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
.box{
  overflow: hidden;
  margin-bottom: 3rem;
}

.footerbox{
  width: 40%;
  float: left;
  margin-left: 2rem;
  margin-top: 1.8rem;
  margin-right: 8rem;
  .topbox{
    margin-bottom: 1.8rem;
    font-size:  1.4rem;
    color: #005BAB;
    font-weight: 600;
    text-align: center;
    }
  .taps_footerbox /deep/{
    position: relative;
    margin-bottom: 0.8rem;
    .el-select{
      width: 100%;
    }
    .inputbox{
      width: 100%;
    }
    .red-t{
      font-size: 1.5rem;
      color: #E52323;
      position: absolute;
      top: 40%;
      left: -1rem;
    }
  }
    .buttonbox_taps{
      font-size: 16px;
      width: 100%;
      background: #0166b4;
      height: 3rem;
      padding: 0;
      margin-top: 1rem;
    }
  }

.register_box{
  margin-top: 0.6rem;
}

.rightbox{
  width: 30%;
  float: left;
  .rightcenterbox{
  width: 100%;
  margin-top: 5.2rem;
  border: 1px solid #DBDBDB;
  .rightcenterbox_f{
    height: 3rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #313131;
    background: #F5F5F5;
    line-height: 3rem;
    text-indent: 1rem;
  }
  .rightcenterbox_b{
    font-size: 1rem;
    padding: 1rem;
  }
  }
}

.rightcenterbox_b>p:nth-of-type(1){
  margin-top: 0;
}
.rightcenterbox_b>p{
  margin-top: 1rem;
  color: #6f6f6f;
}
}

@media screen and (min-width: 0px) and (max-width: 750px) {
.box{
  overflow: hidden;
  // margin-bottom: 3rem;
}

.footerbox{
  width: 90%;
  margin: 0 auto;
  // overflow: hidden;
  background: #ffffff;
  .topbox{
    margin-bottom: 0.24rem;
    font-size:  0.2rem;
    color: #005BAB;
    font-weight: 600;
    text-align: center;
    }
  .taps_footerbox /deep/{
    position: relative;
    margin-bottom: 0.16rem;
    .el-select{
      width: 100%;
    }
    .inputbox{
      width: 100%;
    }
    .red-t{
      font-size: 0.2rem;
      color: #E52323;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -0.1rem;
    }
  }
    .buttonbox_taps{
      font-size: 0.16rem;
      width: 100%;
      background: #0166b4;
      height: 0.42rem;
      padding: 0;
      margin-top: 0.2rem;
    }
  }

.register_box{
  margin-top: 0.1rem;
}

.rightbox{
  display: none;
}

}

</style>