<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>