|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <div class="register-page-content">
|
|
|
+ <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" label-position="top">
|
|
|
+ <el-form-item label="会员名称" prop="loginName" style="width: 100%">
|
|
|
+ <el-input v-model="ruleForm.loginName" size="medium" style="width: 100%" placeholder="请输入会员名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码" prop="password" style="width: 100%">
|
|
|
+ <el-input v-model="ruleForm.password" type="password" size="medium" style="width: 100%" placeholder="请输入6~16位数字和字母的组合" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认密码" prop="confirmPassword" style="width: 100%">
|
|
|
+ <el-input v-model="ruleForm.confirmPassword" type="password" size="medium" style="width: 100%" placeholder="请再次输入密码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号码" prop="mobile" style="width: 100%">
|
|
|
+ <el-input v-model="ruleForm.mobile" size="medium" style="width: 100%" placeholder="请输入手机号码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码" prop="code" style="width: 100%">
|
|
|
+ <el-input v-model="ruleForm.code" size="medium" style="width: 100%" placeholder="请输入6位数验证码">
|
|
|
+ <template #append>
|
|
|
+ <verification-code type="phone" :code="ruleForm.mobile" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="企业地址" prop="enterpriseAddress" style="width: 100%">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-cascader
|
|
|
+ v-model="ruleForm.provinceCityIds"
|
|
|
+ :options="regionList"
|
|
|
+ :props="{ value: 'id', label: 'name' }"
|
|
|
+ size="medium"
|
|
|
+ style="width: 80%"
|
|
|
+ />
|
|
|
+ <el-input v-model="ruleForm.enterpriseAddress" size="medium" placeholder="请输入详细地址" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推荐码(选填)" prop="referralCode" style="width: 100%">
|
|
|
+ <el-input v-model="ruleForm.referralCode" size="medium" style="width: 100%" placeholder="您的长银保理业务经理或支付渠道推荐码(选填)" />
|
|
|
+ </el-form-item>
|
|
|
+ <div>
|
|
|
+ <el-checkbox v-model="ruleForm.checked" />
|
|
|
+ <span class="checked">
|
|
|
+ 我已阅读并接受
|
|
|
+ <span @click="protocolClick('register')">《注册协议》</span>
|
|
|
+ 和
|
|
|
+ <span @click="protocolClick('privacy')">《隐私政策》</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ type="primary"
|
|
|
+ class="btn"
|
|
|
+ style="width: 100%;"
|
|
|
+ @click="registerClick"
|
|
|
+ >
|
|
|
+ 注册
|
|
|
+ </el-button>
|
|
|
+ <!-- <div class="login">
|
|
|
+ 已有账号?
|
|
|
+ <span @click="$emit('goLogin')">马上登录</span>
|
|
|
+ </div> -->
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { register } from '@/api/user'
|
|
|
+import { getRegion } from '@/api/dictionary'
|
|
|
+import { treeChildrenEmpty } from '@/utils'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VerificationCode: () => import('@/components/VerificationCode/index.vue')
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ ruleForm: {
|
|
|
+ loginName: '',
|
|
|
+ password: '',
|
|
|
+ confirmPassword: '',
|
|
|
+ mobile: '',
|
|
|
+ code: '',
|
|
|
+ enterpriseAddress: '',
|
|
|
+ referralCode: '',
|
|
|
+ checked: false,
|
|
|
+ provinceCityIds: []
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ loginName: [{ required: true, message: '请输入会员名称', trigger: 'blur' }],
|
|
|
+ password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
|
+ confirmPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
|
|
|
+ mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
|
|
+ code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ regionList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler(val) {
|
|
|
+ if (val && val.query && val.query.referralCode) {
|
|
|
+ this.ruleForm.referralCode = val.query.referralCode
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getRegionList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getRegionList() {
|
|
|
+ getRegion({ flag: true }).then(({ data }) => {
|
|
|
+ this.regionList = treeChildrenEmpty(data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ protocolClick(type) {
|
|
|
+ this.$emit('protocol', type)
|
|
|
+ },
|
|
|
+ registerClick() {
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ const { password, confirmPassword, checked } = this.ruleForm
|
|
|
+ if (password !== confirmPassword) {
|
|
|
+ this.$message.warning('两次密码不一致')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!checked) {
|
|
|
+ this.$message.warning('请勾选用户协议')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
+ ... this.ruleForm
|
|
|
+ }
|
|
|
+ delete params.confirmPassword
|
|
|
+ params.password = this.$md5(params.password)
|
|
|
+ this.loading = true
|
|
|
+ register(params).then(() => {
|
|
|
+ this.$message.success('用户注册成功')
|
|
|
+ // this.$emit('goLogin')
|
|
|
+ this.$router.push({
|
|
|
+ path: '/login'
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.register-page-content {
|
|
|
+ width: 100vw;
|
|
|
+ // height: 100vh;
|
|
|
+ padding: 140px 20vw 0;
|
|
|
+ .checked {
|
|
|
+ color: #2C4270;
|
|
|
+ font-size: 12px;
|
|
|
+ & > span {
|
|
|
+ color: #0096FF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width:100%;
|
|
|
+ height: 43px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .login {
|
|
|
+ text-align: center;
|
|
|
+ color: #2C4270;
|
|
|
+ font-size: 12px;
|
|
|
+ & > span {
|
|
|
+ color: #0096FF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .register-page-content {
|
|
|
+ width: 100vw;
|
|
|
+ // height: 100vh;
|
|
|
+ padding: 80px 4vw 0;
|
|
|
+ .checked {
|
|
|
+ color: #2C4270;
|
|
|
+ font-size: 12px;
|
|
|
+ & > span {
|
|
|
+ color: #0096FF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width:90%;
|
|
|
+ height: 43px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .login {
|
|
|
+ text-align: center;
|
|
|
+ color: #2C4270;
|
|
|
+ font-size: 12px;
|
|
|
+ & > span {
|
|
|
+ color: #0096FF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.register-page-content {
|
|
|
+ .el-button--primary {
|
|
|
+ background-color: #0096FF;
|
|
|
+ border-color: #0096FF;
|
|
|
+ }
|
|
|
+ .el-button--primary:focus, .el-button--primary:hover {
|
|
|
+ background-color: #0096FF;
|
|
|
+ border-color: #0096FF;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|