@retrun calc 去掉无些方法

08335 / hivui-platform-template

hivui平台项目模板

Browse code @retrun calc 去掉无些方法 master
1 parent dbb738d commit c09b1586c535548a6c4105c8788aad4575be3fb9 caibinghong authored on 8 Jun 2022

Showing 3 changed files

Ignore Space Show notes View project/hivuiLogin/components/pwStrength.vue
<template> <div class="pwStrength" id="container"> <el-row> <el-col :span="8"> <el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat"></el-progress> </el-col> <el-col :span="8"> <el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat"></el-progress> </el-col> <el-col :span="8"> <el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat"></el-progress> </el-col> </el-row> </div> </template> <script> export default { name: "PasswordStrength", model: { event: 'change', prop: 'password' }, props: { //密码 password: { type: [String,Boolean,Number,Object], required: true, default: "", }, minPw:{ type: [String,Boolean,Number,Object], default: 6, } }, watch:{ password(newValue){ const mode = this.checkPasswordStrength(newValue); //逻辑处理 switch (mode) { //初始化状态 case 0: this.content = ''; this.onePercentage = 0; this.twoPercentage = 0; this.ThreePercentage = 0; break; case 1: this.content = '弱'; this.onePercentage = 100; this.twoPercentage = 0; this.ThreePercentage = 0; break; case 2: this.content = '中'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 0; break; case 3: this.content = '中'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 0; break; default: this.content = '高'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 100; break; } } }, data(){ return{ content:"", onePercentage:0, twoPercentage:0, ThreePercentage:0, oneCustomColors: [ {color: '#7ecef4', percentage: 100} ], twoCustomColors: [ {color: '#fbae65', percentage: 100} ], ThreeCustomColors: [ {color: '#ff7665', percentage: 100} ] } }, methods:{ oneFormat() { return ""; }, twoFormat() { return ""; }, ThreeFormat() { return ""; }, //密码强度验证 checkPasswordStrength(value) { let mode = 0; //正则表达式验证符合要求的 if (value.length < this.minPw) return mode; if (/\d/.test(value)) mode++; //数字 if (/[a-z]/.test(value)) mode++; //小写 if (/[A-Z]/.test(value)) mode++; //大写 if (/\W/.test(value)) mode++; //特殊字符 return mode; } } } </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } .pwStrength{ ::v-deep.el-progress__text { display: none; } ::v-deep.el-progress-bar { padding: 0 px2vw(5); margin: 0px; } ::v-deep.el-progress-bar__outer{ height:px2vw(10); } } </style> <template> <div class="pwStrength" id="container"> <el-row> <el-col :span="8"> <el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat"></el-progress> </el-col> <el-col :span="8"> <el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat"></el-progress> </el-col> <el-col :span="8"> <el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat"></el-progress> </el-col> </el-row> </div> </template> <script> export default { name: "PasswordStrength", model: { event: 'change', prop: 'password' }, props: { //密码 password: { type: [String,Boolean,Number,Object], required: true, default: "", }, minPw:{ type: [String,Boolean,Number,Object], default: 6, } }, watch:{ password(newValue){ const mode = this.checkPasswordStrength(newValue); //逻辑处理 switch (mode) { //初始化状态 case 0: this.content = ''; this.onePercentage = 0; this.twoPercentage = 0; this.ThreePercentage = 0; break; case 1: this.content = '弱'; this.onePercentage = 100; this.twoPercentage = 0; this.ThreePercentage = 0; break; case 2: this.content = '中'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 0; break; case 3: this.content = '中'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 0; break; default: this.content = '高'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 100; break; } } }, data(){ return{ content:"", onePercentage:0, twoPercentage:0, ThreePercentage:0, oneCustomColors: [ {color: '#7ecef4', percentage: 100} ], twoCustomColors: [ {color: '#fbae65', percentage: 100} ], ThreeCustomColors: [ {color: '#ff7665', percentage: 100} ] } }, methods:{ oneFormat() { return ""; }, twoFormat() { return ""; }, ThreeFormat() { return ""; }, //密码强度验证 checkPasswordStrength(value) { let mode = 0; //正则表达式验证符合要求的 if (value.length < this.minPw) return mode; if (/\d/.test(value)) mode++; //数字 if (/[a-z]/.test(value)) mode++; //小写 if (/[A-Z]/.test(value)) mode++; //大写 if (/\W/.test(value)) mode++; //特殊字符 return mode; } } } </script> <style lang="scss" scoped> @function px2vw($px) { @return calc($px / 1920) * 100vw; } .pwStrength{ ::v-deep.el-progress__text { display: none; } ::v-deep.el-progress-bar { padding: 0 px2vw(5); margin: 0px; } ::v-deep.el-progress-bar__outer{ height:px2vw(10); } } </style>

Ignore Space Show notes View

project/hivuiLogin/components/pwStrength.vue

<template>
	<div class="pwStrength" id="container">
		<el-row>
			<el-col :span="8">
				<el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat"></el-progress>
			</el-col>
			<el-col :span="8">
				<el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat"></el-progress>
			</el-col>
			<el-col :span="8">
				<el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat"></el-progress>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		name: "PasswordStrength",
		model: {
			event: 'change',
			prop: 'password'
		},
		props: {
			//密码
			password: {
				type: [String,Boolean,Number,Object],
				required: true,
				default: "",
			},
			minPw:{
				type: [String,Boolean,Number,Object],
				default: 6,
			}
		},
		watch:{
			password(newValue){
				const mode = this.checkPasswordStrength(newValue);
				//逻辑处理
				switch (mode) {
				//初始化状态
					case 0:
						this.content = '';
						this.onePercentage = 0;
						this.twoPercentage = 0;
						this.ThreePercentage = 0;
						break;
					case 1:
						this.content = '弱';
						this.onePercentage = 100;
						this.twoPercentage = 0;
						this.ThreePercentage = 0;
						break;
					case 2:
						this.content = '中';
						this.onePercentage = 100;
						this.twoPercentage = 100;
						this.ThreePercentage = 0;
						break;
					case 3:
						this.content = '中';
						this.onePercentage = 100;
						this.twoPercentage = 100;
						this.ThreePercentage = 0;
						break;
					default:
						this.content = '高';
						this.onePercentage = 100;
						this.twoPercentage = 100;
						this.ThreePercentage = 100;
						break;
				}
			}
		},
		data(){
			return{
				content:"",
				onePercentage:0,
				twoPercentage:0,
				ThreePercentage:0,
				oneCustomColors: [
					{color: '#7ecef4', percentage: 100}
				],
				twoCustomColors: [
					{color: '#fbae65', percentage: 100}
				],
				ThreeCustomColors: [
					{color: '#ff7665', percentage: 100}
				]
			}
		},
		methods:{
			oneFormat() {
				return "";
			},
			twoFormat() {
				return "";
			},
			ThreeFormat() {
				return "";
			},
			//密码强度验证
			checkPasswordStrength(value) {
				let mode = 0;
				//正则表达式验证符合要求的
				if (value.length < this.minPw) return mode;
				if (/\d/.test(value)) mode++; //数字
				if (/[a-z]/.test(value)) mode++; //小写
				if (/[A-Z]/.test(value)) mode++; //大写
				if (/\W/.test(value)) mode++; //特殊字符
				return mode;
			}
		}
	}
</script>

Ignore Space Show notes View project/hivuiLogin/components/resetPw.vue
<template> <div class="reset"> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw"> <el-input ref="pw" v-model="registerForm.pw" type="password" placeholder="请输入密码"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button> </el-form-item> <el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">重置密码</el-button> </el-form> </div> </template> <script> import { getToken } from "../utils/auth"; import { captcha,resetpw } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "resetPw", components: { pwStrength }, data() { return { registerForm: { phone: "", pw: "", captcha: "", email: "", }, minPw:4, copyRight: "版权所有 © 2021-2025 中海创科技（福建）集团有限公司", registerRules: { phone: [ { required: true, message: "请填写手机号", trigger: "blur" }, { validator: (rule, value, callback)=>{ if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error('请填写正确的手机格式!')); } else { callback(); } }, trigger: "blur" }, ], pw: [ { required: true, message: "请填写密码", trigger: "blur" }, { validator: (rule, value, callback)=>{ if ((value+"").length<this.minPw) { callback(new Error('请输入至少'+this.minPw+'位密码！')); } else { callback(); } }, trigger: "blur" }, ], captcha: [ { required: true, message: "请填写验证码", trigger: "blur" } ], /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading:false, resetLoading:false, captchaTimer:0, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: {}, mounted() {}, methods: { //获取验证码 getCaptcha(){ this.$refs.registerForm.validateField("phone",(errMsg) => { if (!errMsg) { let me=this; me.captchaTimer=60; me.captchaLoading=true; captcha({ "phone": me.registerForm.phone }).then(res=>{ me.captchaLoading=false; }).catch(err=>{ me.captchaLoading=false; }); let _timer=setInterval(()=>{ --me.captchaTimer; if(me.captchaTimer==0){ clearInterval(_timer); } },1000); } }); }, //重置 reset(){ let me=this; this.$refs.registerForm.validate((valid) => { if (valid) { me.resetLoading=true; debugger;resetpw({ "phone":me.registerForm.phone, "password":md5(me.registerForm.pw), "captcha":me.registerForm.captcha, }).then(res=>{ me.$message({ message: '密码重置成功', type: 'success' }); me.$emit("resetCb"); }).catch(err=>{ me.resetLoading=false; }); } }); }, }, }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } .reset{ padding:px2vw(20) px2vw(50); .register_field{ margin-bottom: px2vw(22); line-height:px2vw(48); ::v-deep.el-input__inner{ line-height:px2vw(48); height:px2vw(48); } .register_pwStrength{ margin-top:px2vw(10); } &.register_row{ ::v-deep.el-form-item__content{ display: flex; align-items:center; } } } .register_capbtn{ width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit{ height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top:px2vw(10); } .register_tips{ padding-top: px2vw(20); span{ color:#3486d2; cursor: pointer; } } } </style> <template> <div class="reset"> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw"> <el-input ref="pw" v-model="registerForm.pw" type="password" placeholder="请输入密码"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button> </el-form-item> <el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">重置密码</el-button> </el-form> </div> </template> <script> import { getToken } from "../utils/auth"; import { captcha,resetpw } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "resetPw", components: { pwStrength }, data() { return { registerForm: { phone: "", pw: "", captcha: "", email: "", }, minPw:4, copyRight: "版权所有 © 2021-2025 中海创科技（福建）集团有限公司", registerRules: { phone: [ { required: true, message: "请填写手机号", trigger: "blur" }, { validator: (rule, value, callback)=>{ if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error('请填写正确的手机格式!')); } else { callback(); } }, trigger: "blur" }, ], pw: [ { required: true, message: "请填写密码", trigger: "blur" }, { validator: (rule, value, callback)=>{ if ((value+"").length<this.minPw) { callback(new Error('请输入至少'+this.minPw+'位密码！')); } else { callback(); } }, trigger: "blur" }, ], captcha: [ { required: true, message: "请填写验证码", trigger: "blur" } ], /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading:false, resetLoading:false, captchaTimer:0, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: {}, mounted() {}, methods: { //获取验证码 getCaptcha(){ this.$refs.registerForm.validateField("phone",(errMsg) => { if (!errMsg) { let me=this; me.captchaTimer=60; me.captchaLoading=true; captcha({ "phone": me.registerForm.phone }).then(res=>{ me.captchaLoading=false; }).catch(err=>{ me.captchaLoading=false; }); let _timer=setInterval(()=>{ --me.captchaTimer; if(me.captchaTimer==0){ clearInterval(_timer); } },1000); } }); }, //重置 reset(){ let me=this; this.$refs.registerForm.validate((valid) => { if (valid) { me.resetLoading=true; debugger;resetpw({ "phone":me.registerForm.phone, "password":md5(me.registerForm.pw), "captcha":me.registerForm.captcha, }).then(res=>{ me.$message({ message: '密码重置成功', type: 'success' }); me.$emit("resetCb"); }).catch(err=>{ me.resetLoading=false; }); } }); }, }, }; </script> <style rel="stylesheet/scss" lang="scss" scoped> @function px2vw($px) { @return calc($px / 1920) * 100vw; } .reset{ padding:px2vw(20) px2vw(50); .register_field{ margin-bottom: px2vw(22); line-height:px2vw(48); ::v-deep.el-input__inner{ line-height:px2vw(48); height:px2vw(48); } .register_pwStrength{ margin-top:px2vw(10); } &.register_row{ ::v-deep.el-form-item__content{ display: flex; align-items:center; } } } .register_capbtn{ width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit{ height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top:px2vw(10); } .register_tips{ padding-top: px2vw(20); span{ color:#3486d2; cursor: pointer; } } } </style>

Ignore Space Show notes View

project/hivuiLogin/components/resetPw.vue

<template>
  <div class="reset">
		<el-form ref="registerForm" :model="registerForm" :rules="registerRules">
			<el-form-item class="register_field" prop="phone">
				<el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input>
			</el-form-item>
			<el-form-item class="register_field" prop="pw">
				<el-input ref="pw" v-model="registerForm.pw" type="password" placeholder="请输入密码"></el-input>
				<pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength>
			</el-form-item>
			<el-form-item class="register_field register_row" prop="captcha">
				<el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input>
				<el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button>
			</el-form-item>
			<el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">重置密码</el-button>
		</el-form>
  </div>
</template>

Ignore Space Show notes View project/hivuiLogin/views/register.vue
<template> <div class="register"> <div class="register_hd"> <div class="register_logo"> <img :src="config.loginLogoImg"> </div> <div class="register_text">注册</div> </div> <div class="register_main" :style="bgStyle"> <div class="register_box"> <h3>注册账号</h3> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="username"> <el-input ref="username" v-model="registerForm.username" type="text" placeholder="账号"></el-input> </el-form-item> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw1"> <el-input ref="pw1" v-model="registerForm.pw1" type="password" placeholder="请输入密码"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field" prop="pw2"> <el-input ref="pw2" v-model="registerForm.pw2" type="password" placeholder="确认密码"></el-input> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha" >{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button> </el-form-item> <!-- <el-form-item class="register_field" prop="email"> <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input> </el-form-item>--> <el-button class="register_submit" :loading="registerLoading" type="primary" @click="register" >立即注册</el-button> </el-form> <div class="register_tips"> 已有账号， <span @click="goLoginPage">马上登录?</span> </div> </div> </div> <div class="register_ft">{{config.copyright}}</div> </div> </template> <script> import _loginLogoImg from "../assets/Logo1.png" import _registerBgImg from "../assets/register/bg.png" import { captcha, register } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "register", components: { pwStrength }, data() { return { registerForm: { phone: "", pw1: "", pw2: "", captcha: "", email: "" }, minPw: 4, registerRules: { username: [{ required: true, message: "请填写账号", trigger: "blur" }], phone: [ { required: true, message: "请填写手机号", trigger: "blur" }, { validator: (rule, value, callback) => { if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error("请填写正确的手机格式!")); } else { callback(); } }, trigger: "blur" } ], pw1: [ { required: true, message: "请填写密码", trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length < this.minPw) { callback(new Error("请输入至少" + this.minPw + "位密码！")); } else { callback(); } }, trigger: "blur" } ], pw2: [ { required: true, message: "请再次填写密码", trigger: "blur" }, { validator: (rule, value, callback) => { if (value !== this.registerForm.pw1) { callback(new Error("两次输入密码不一致!")); } else { callback(); } }, trigger: "blur" } ], captcha: [{ required: true, message: "请填写验证码", trigger: "blur" }] /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading: false, registerLoading: false, captchaTimer: 0, config: { title: window.customSysCofig?.loginTitle\|\|"中海创科技", loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, registerBgImg: window.customSysCofig?.registerBgImg\|\|_registerBgImg, copyright: window.customSysCofig?.copyright\|\|"版权所有 © 2020-2025 中海创科技", }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.registerBgImg + ")", }; }, }, mounted() {}, methods: { //获取验证码 getCaptcha() { this.$refs.registerForm.validateField("phone", errMsg => { if (!errMsg) { let me = this; me.captchaTimer = 60; me.captchaLoading = true; captcha({ phone: me.registerForm.phone }) .then(res => { me.captchaLoading = false; }) .catch(err => { me.captchaLoading = false; }); let _timer = setInterval(() => { --me.captchaTimer; if (me.captchaTimer == 0) { clearInterval(_timer); } }, 1000); } }); }, //注册 register() { let me = this; this.$refs.registerForm.validate(valid => { if (valid) { me.registerLoading = true; register({ type: "phone", username:me.registerForm.username, phone: me.registerForm.phone, password: md5(me.registerForm.pw2), captcha: me.registerForm.captcha }) .then(res => { me.$message({ message: "注册成功，即将返回登录页", type: "success" }); setTimeout(() => { this.$router.push("/"); }, 1000 * 2); }) .catch(err => { me.registerLoading = false; }); } }); }, goLoginPage() { this.$router.push("/"); } } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } $headH: px2vw(130); $footH: px2vw(172); .register { height: 100%; overflow: hidden; .register_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .register_logo { width: px2vw(236); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .register_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .register_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/register/bg.png") no-repeat center center; background-size: cover; .register_box { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(1200); height: px2vw(655); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(360) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .register_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } .register_pwStrength { margin-top: px2vw(10); } &.register_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .register_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit { height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top: px2vw(10); } .register_tips { padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } } } .register_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; } } </style> <template> <div class="register"> <div class="register_hd"> <div class="register_logo"> <img :src="config.loginLogoImg"> </div> <div class="register_text">注册</div> </div> <div class="register_main" :style="bgStyle"> <div class="register_box"> <h3>注册账号</h3> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="username"> <el-input ref="username" v-model="registerForm.username" type="text" placeholder="账号"></el-input> </el-form-item> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw1"> <el-input ref="pw1" v-model="registerForm.pw1" type="password" placeholder="请输入密码"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field" prop="pw2"> <el-input ref="pw2" v-model="registerForm.pw2" type="password" placeholder="确认密码"></el-input> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha" >{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button> </el-form-item> <!-- <el-form-item class="register_field" prop="email"> <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input> </el-form-item>--> <el-button class="register_submit" :loading="registerLoading" type="primary" @click="register" >立即注册</el-button> </el-form> <div class="register_tips"> 已有账号， <span @click="goLoginPage">马上登录?</span> </div> </div> </div> <div class="register_ft">{{config.copyright}}</div> </div> </template> <script> import _loginLogoImg from "../assets/Logo1.png" import _registerBgImg from "../assets/register/bg.png" import { captcha, register } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "register", components: { pwStrength }, data() { return { registerForm: { phone: "", pw1: "", pw2: "", captcha: "", email: "" }, minPw: 4, registerRules: { username: [{ required: true, message: "请填写账号", trigger: "blur" }], phone: [ { required: true, message: "请填写手机号", trigger: "blur" }, { validator: (rule, value, callback) => { if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error("请填写正确的手机格式!")); } else { callback(); } }, trigger: "blur" } ], pw1: [ { required: true, message: "请填写密码", trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length < this.minPw) { callback(new Error("请输入至少" + this.minPw + "位密码！")); } else { callback(); } }, trigger: "blur" } ], pw2: [ { required: true, message: "请再次填写密码", trigger: "blur" }, { validator: (rule, value, callback) => { if (value !== this.registerForm.pw1) { callback(new Error("两次输入密码不一致!")); } else { callback(); } }, trigger: "blur" } ], captcha: [{ required: true, message: "请填写验证码", trigger: "blur" }] /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading: false, registerLoading: false, captchaTimer: 0, config: { title: window.customSysCofig?.loginTitle\|\|"中海创科技", loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, registerBgImg: window.customSysCofig?.registerBgImg\|\|_registerBgImg, copyright: window.customSysCofig?.copyright\|\|"版权所有 © 2020-2025 中海创科技", }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.registerBgImg + ")", }; }, }, mounted() {}, methods: { //获取验证码 getCaptcha() { this.$refs.registerForm.validateField("phone", errMsg => { if (!errMsg) { let me = this; me.captchaTimer = 60; me.captchaLoading = true; captcha({ phone: me.registerForm.phone }) .then(res => { me.captchaLoading = false; }) .catch(err => { me.captchaLoading = false; }); let _timer = setInterval(() => { --me.captchaTimer; if (me.captchaTimer == 0) { clearInterval(_timer); } }, 1000); } }); }, //注册 register() { let me = this; this.$refs.registerForm.validate(valid => { if (valid) { me.registerLoading = true; register({ type: "phone", username:me.registerForm.username, phone: me.registerForm.phone, password: md5(me.registerForm.pw2), captcha: me.registerForm.captcha }) .then(res => { me.$message({ message: "注册成功，即将返回登录页", type: "success" }); setTimeout(() => { this.$router.push("/"); }, 1000 * 2); }) .catch(err => { me.registerLoading = false; }); } }); }, goLoginPage() { this.$router.push("/"); } } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return calc($px / 1920) * 100vw; } $headH: px2vw(130); $footH: px2vw(172); .register { height: 100%; overflow: hidden; .register_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .register_logo { width: px2vw(236); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .register_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .register_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("~@/assets/img/register/bg.png") no-repeat center center; background-size: cover; .register_box { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(1200); height: px2vw(655); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(360) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .register_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } .register_pwStrength { margin-top: px2vw(10); } &.register_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .register_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit { height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top: px2vw(10); } .register_tips { padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } } } .register_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; } } </style>

Ignore Space Show notes View

project/hivuiLogin/views/register.vue

<template>
  <div class="register">
    <div class="register_hd">
      <div class="register_logo">
        <img :src="config.loginLogoImg">
      </div>
      <div class="register_text">注册</div>
    </div>
    <div class="register_main" :style="bgStyle">
      <div class="register_box">
        <h3>注册账号</h3>
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules">
          <el-form-item class="register_field" prop="username">
            <el-input ref="username" v-model="registerForm.username" type="text" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item class="register_field" prop="phone">
            <el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item class="register_field" prop="pw1">
            <el-input ref="pw1" v-model="registerForm.pw1" type="password" placeholder="请输入密码"></el-input>
            <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength>
          </el-form-item>
          <el-form-item class="register_field" prop="pw2">
            <el-input ref="pw2" v-model="registerForm.pw2" type="password" placeholder="确认密码"></el-input>
          </el-form-item>
          <el-form-item class="register_field register_row" prop="captcha">
            <el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input>
            <el-button
              class="register_capbtn"
              :loading="captchaLoading"
              type="primary"
              :disabled="captchaTimer==0?false:true"
              @click="getCaptcha"
            >{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button>
          </el-form-item>
          
          <el-button
            class="register_submit"
            :loading="registerLoading"
            type="primary"
            @click="register"
          >立即注册</el-button>
        </el-form>
        <div class="register_tips">
          已有账号，
          <span @click="goLoginPage">马上登录?</span>
        </div>
      </div>
    </div>
    <div class="register_ft">{{config.copyright}}</div>
  </div>
</template>

Show line notes below