| | |
| | | <div class="login_page"> |
| | | <headers /> |
| | | <div class="login_title animated slideInDown"> |
| | | <span>{{ $t("hj18") }}</span> |
| | | <span>{{ $t("hj15") }}</span> |
| | | </div> |
| | | <div class="logins_content"> |
| | | <div class="login_forms"> |
| | | <div class="top_forms"> |
| | | <el-input :placeholder="placeholder" size="medium" v-model="phone" maxlength="10" clearable |
| | | @input="handleInput()"> |
| | | <template slot="prepend">+91</template> |
| | | <div class="forms_title">{{ placeholder }}</div> |
| | | <el-input :placeholder="$t('请输入')" :size="medium" v-model="phone" clearable @input="handleInput()"> |
| | | </el-input> |
| | | |
| | | <el-input style="margin-top: 0.46rem" show-password :placeholder="$t('hj19')" size="medium" |
| | | v-model="userPassword" @input="handleInput()"> |
| | | <!-- <div class="forms_title">{{ $t("hj25") }}</div> |
| | | <el-input :placeholder="$t('请输入')" :size="medium" v-model="yzmCode" clearable @input="handleInput()"> |
| | | <template slot="append"> |
| | | <van-button type="info" size="small" @click="getYzm" :loading="djs > 0" :loading-text="djs + ''"> |
| | | <span style="font-size: 14px;">{{ $t('获取验证码') }}</span> |
| | | </van-button> |
| | | </template> |
| | | </el-input> --> |
| | | |
| | | <div class="forms_title">{{ $t("Password") }}</div> |
| | | <el-input :placeholder="$t('hj19')" :size="medium" v-model="userPassword" clearable @input="handleInput()"> |
| | | </el-input> |
| | | <el-input style="margin-top: 0.46rem" show-password :placeholder="$t('hj20')" size="medium" |
| | | v-model="rePassword" @input="handleInput()"> |
| | | |
| | | <div class="forms_title">{{ $t("hj20") }}</div> |
| | | <el-input :placeholder="$t('请输入')" :size="medium" v-model="rePassword" clearable @input="handleInput()"> |
| | | </el-input> |
| | | <el-input style="margin-top: 0.46rem" :placeholder="$t('hj21')" size="medium" v-model="userName" clearable |
| | | @input="handleInput()"> |
| | | |
| | | <div class="forms_title">{{ $t("hj21") }}</div> |
| | | <el-input :placeholder="$t('请输入')" :size="medium" v-model="userName" clearable @input="handleInput()"> |
| | | </el-input> |
| | | </div> |
| | | <div class="radio-con" style="display: flex; align-items: center; font-size: 14px"> |
| | | <van-checkbox v-model="checked">{{ |
| | | $t("我已閱讀並同意") |
| | | }}</van-checkbox> |
| | | <span @click="gotoxy" style="color: #c4d600">{{ |
| | | $t("《用戶服務協議》") |
| | | }}</span> |
| | | <van-checkbox v-model="checked" @change="handleInput()"> |
| | | {{ $t("我已閱讀並同意") }} |
| | | </van-checkbox> |
| | | <span @click="gotoxy" style="color: #0e7ddd"> |
| | | {{ $t("《用戶服務協議》") }} |
| | | </span> |
| | | </div> |
| | | <div class="bottom_btns" :class="btnClass ? 'on' : 'off'"> |
| | | <van-button type="info" :disabled="!btnClass" class="butn" @click="gook">{{ $t("立即注册") }}</van-button> |
| | | |
| | | <van-button type="info" class="butn_2" plain @click="$router.push('/login')"> |
| | | <!-- <van-button |
| | | type="info" |
| | | class="butn_2" |
| | | plain |
| | | @click="$router.push('/login')" |
| | | > |
| | | {{ $t("已有賬號?") + $t("馬上登錄") }} |
| | | </van-button> |
| | | |
| | | <!-- <div class="register" @click="$router.push('/login')"> |
| | | {{ $t("已有賬號?") |
| | | }}<span style="color: #c4d600">{{ $t("馬上登錄") }}</span> |
| | | </div> --> |
| | | </van-button> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import * as api from "@/axios/api"; |
| | | import { Notify } from "vant"; |
| | | import { mapMutations } from "vuex"; |
| | | |
| | | import deTh from "@/utils/deTh"; |
| | | export default { |
| | | components: { |
| | | headers |
| | |
| | | verification: this.$t("hj25"), |
| | | loginWay: this.$t("hj26"), |
| | | loginWay: this.$t("hj26"), |
| | | placeholder: this.$t("hj27"), |
| | | placeholder: this.$t("hj16"), |
| | | phone: "", |
| | | userName: "", |
| | | yzmCode: '6666', |
| | | code: "", |
| | | userPassword: "", |
| | | btnClass: false, |
| | | rePassword: "" |
| | | rePassword: "", |
| | | medium: "medium", |
| | | djs: 0, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | handleInput() { |
| | | if ( |
| | | this.userPassword !== "" && |
| | | this.yzmCode !== "" && |
| | | this.phone !== "" && |
| | | this.userPassword == this.rePassword && |
| | | this.userName != "" |
| | | this.userName != "" && |
| | | this.checked |
| | | ) { |
| | | this.btnClass = true; |
| | | } else { |
| | | this.btnClass = false; |
| | | } |
| | | }, |
| | | async getYzm() { |
| | | |
| | | let data = await api.getsendmail({ email: this.phone }); |
| | | if (data.status == 0) { |
| | | Notify({ type: 'primary', message: data.msg }); |
| | | |
| | | this.djs = 60; |
| | | let time = setInterval(() => { |
| | | this.djs--; |
| | | if (this.djs <= 0) { |
| | | clearInterval(time); |
| | | } |
| | | }, 1000); |
| | | } else { |
| | | Notify({ type: "warning", message: data.msg }); |
| | | } |
| | | }, |
| | | async gook() { |
| | | if (this.phone.length == 0) { |
| | | Notify({ type: "warning", message: this.$t("hj28") }); |
| | |
| | | let opts = { |
| | | // agentCode:'4023', // SR330001 |
| | | phone: this.phone, |
| | | yzmCode: "6666", |
| | | yzmCode: this.yzmCode, |
| | | userPwd: this.userPassword, |
| | | agentCode: this.userName |
| | | }; |
| | | let data = await api.register(opts); |
| | | if (data.status === 0) { |
| | | Notify({ type: "success", message: this.$t('hj34') }); |
| | | setTimeout(() => { |
| | | this.$router.push("/login"); |
| | | }, 1000); |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | @green: #c4d600; |
| | | @green: #0e7ddd; |
| | | @Black1: #13161e; |
| | | |
| | | .register { |
| | | font-style: normal; |
| | |
| | | |
| | | .radio-con { |
| | | margin-top: 0.32rem; |
| | | } |
| | | |
| | | /deep/ .el-input-group__append { |
| | | background: #13161e; |
| | | border: none !important; |
| | | size: .3rem; |
| | | } |
| | | |
| | | /deep/ .van-checkbox__icon--checked .van-icon { |
| | |
| | | font-weight: 500; |
| | | font-size: 0.48rem; |
| | | line-height: 0.66667rem; |
| | | color: #14181f; |
| | | margin-left: 0.53333rem; |
| | | padding: 0.6rem 0.6rem 0; |
| | | } |
| | | |
| | | .login_page { |
| | |
| | | flex: 1; |
| | | width: 100%; |
| | | height: 9.7436rem; |
| | | margin-top: 0.4359rem; |
| | | background: #fff; |
| | | padding: 0.4rem 0.6rem 0; |
| | | border-top-left-radius: 0.26667rem; |
| | | border-top-right-radius: 0.26667rem; |
| | | |
| | |
| | | width: 100%; |
| | | height: 2.0513rem; |
| | | display: flex; |
| | | |
| | | padding: 0.6rem 0.6rem 0; |
| | | align-items: center; |
| | | font-size: 0.7023rem; |
| | | color: #000; |
| | |
| | | |
| | | border-top-left-radius: 0.26667rem; |
| | | border-top-right-radius: 0.26667rem; |
| | | padding: 0.34667rem 0.4rem; |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | |
| | | .forms_title { |
| | | font-size: 0.3rem; |
| | | margin-top: 0.5rem; |
| | | margin-bottom: 0.2rem; |
| | | font-weight: 300; |
| | | opacity: 0.7; |
| | | } |
| | | |
| | | .user_name, |
| | | .password { |
| | |
| | | /deep/.el-input__inner { |
| | | width: 100%; |
| | | height: 70px; |
| | | background-color: rgb(246, 246, 247) !important; |
| | | // background: #1e1e1e; |
| | | // border-radius: 8px; |
| | | font-size: 0.45rem !important; |
| | | border: none; |
| | | background-color: @Black1 !important; |
| | | font-size: 0.3rem !important; |
| | | border: @Black1 solid 1px; |
| | | color: #fff; |
| | | border-bottom: rgba(#fff, 0.7) solid 1px; |
| | | } |
| | | |
| | | .bottom_btns { |
| | |
| | | border-radius: 8px; |
| | | color: @green; |
| | | border-color: @green; |
| | | margin-top: .4rem; |
| | | margin-top: 0.4rem; |
| | | } |
| | | |
| | | .mes { |