zhc4dev
parent
41dacfbea6
commit
2fa74638ff
9 changed files with 891 additions and 0 deletions
@ -0,0 +1,478 @@ |
|||||||
|
<template> |
||||||
|
<div class="login d-flex"> |
||||||
|
<div class="left" :height="vh"> |
||||||
|
<span class="f_48">LOGO</span> |
||||||
|
<span class="f_24">黄淮服装定制商城</span> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="mode d-flex"> |
||||||
|
<p> |
||||||
|
<span v-if="flag">微信扫码登录</span><span v-else>账号密码登录</span> |
||||||
|
</p> |
||||||
|
|
||||||
|
<div @click="imgChange" class="d-flex"> |
||||||
|
<img src="./img/erweima.png" alt="" v-if="flag" /> |
||||||
|
<img src="./img/zhanghao.png" alt="" v-else /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="main d-flex" v-if="flag"> |
||||||
|
<div class="title"> |
||||||
|
<p class="f_36">密码登录</p> |
||||||
|
<p class="f_13">还没帐号？<a href="#">立即注册</a></p> |
||||||
|
</div> |
||||||
|
<el-form |
||||||
|
:model="ruleForm" |
||||||
|
:rules="rules" |
||||||
|
ref="ruleForm" |
||||||
|
label-position="top" |
||||||
|
> |
||||||
|
<el-form-item label="请输入账号" prop="name"> |
||||||
|
<el-input |
||||||
|
v-model="ruleForm.name" |
||||||
|
placeholder="登录名/手机号" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="请输入密码" prop="password"> |
||||||
|
<el-input |
||||||
|
v-model="ruleForm.password" |
||||||
|
placeholder="请输入8-16位密码" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="请输入验证码" required> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="16"> |
||||||
|
<el-form-item prop="yanzhengma"> |
||||||
|
<el-input required |
||||||
|
v-model="ruleForm.yanzhengma" |
||||||
|
placeholder="请输入右侧验证码" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<!--<img src="./img/yanzhengma.png" alt="" style="width: 100%" />--> |
||||||
|
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/> |
||||||
|
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item> |
||||||
|
<div class="button f_16" @click="dengLu" >登录</div> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
<div class="main d-flex" v-else> |
||||||
|
<div class="title"> |
||||||
|
<p class="f_36">微信登录</p> |
||||||
|
</div> |
||||||
|
<div class="coin d-flex"> |
||||||
|
<img src="./img/erweima2.png" alt="" /> |
||||||
|
<p class="f_20">使用微信扫一扫登录</p> |
||||||
|
<p class="f_16"> |
||||||
|
<a @click="flag = true">密码登录</a> ｜ <a>注册新账号</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import {mapActions} from "vuex"; |
||||||
|
import { getAction } from '@/api/manage' |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
requestCodeSuccess: false, |
||||||
|
currdatetime: '', |
||||||
|
randCodeImage :'', |
||||||
|
vh: 0, |
||||||
|
flag: true, //默认账号密码登录 |
||||||
|
dialogVisible: false, |
||||||
|
isChecked1: false, |
||||||
|
isChecked2: false, |
||||||
|
ruleForm: { |
||||||
|
|
||||||
|
name: "", |
||||||
|
yanzhengma: "", |
||||||
|
password: "", |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
name: [ |
||||||
|
{ required: true, message: "请输入账号", trigger: "blur" }, |
||||||
|
// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, |
||||||
|
], |
||||||
|
password: [ |
||||||
|
{ required: true, message: "请输入密码", trigger: "blur" }, |
||||||
|
{ |
||||||
|
min: 6, |
||||||
|
max: 18, |
||||||
|
message: "长度在 6 到 18 个字符", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
yanzhengma: [ |
||||||
|
{ required: true, message: "验证码不能为空！", trigger: "blur" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.vh = window.screen.availHeight; |
||||||
|
}, |
||||||
|
|
||||||
|
created() { |
||||||
|
this.handleChangeCheckCode(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** |
||||||
|
* 验证字段 |
||||||
|
* @param arr |
||||||
|
* @param callback |
||||||
|
*/ |
||||||
|
validateFields(arr, callback){ |
||||||
|
let promiseArray = [] |
||||||
|
for(let item of arr){ |
||||||
|
let p = new Promise((resolve, reject) => { |
||||||
|
this.$refs['form'].validateField(item, (err)=>{ |
||||||
|
if(!err){ |
||||||
|
resolve(); |
||||||
|
}else{ |
||||||
|
reject(err); |
||||||
|
} |
||||||
|
}) |
||||||
|
}); |
||||||
|
promiseArray.push(p) |
||||||
|
} |
||||||
|
Promise.all(promiseArray).then(()=>{ |
||||||
|
callback() |
||||||
|
}).catch(err=>{ |
||||||
|
callback(err) |
||||||
|
}) |
||||||
|
}, |
||||||
|
//账号密码登录 |
||||||
|
dengLu(rememberMe){ |
||||||
|
console.log("11111111111111111") |
||||||
|
this.loginSuccess(); |
||||||
|
this.validateFields([ 'username', 'password', 'inputCode' ], (err)=>{ |
||||||
|
if(!err){ |
||||||
|
let loginParams = { |
||||||
|
username: this.ruleForm.username, |
||||||
|
password: this.ruleForm.password, |
||||||
|
captcha: this.ruleForm.inputCode, |
||||||
|
checkKey: this.currdatetime, |
||||||
|
remember_me: rememberMe, |
||||||
|
} |
||||||
|
console.log("22222222222222222222222") |
||||||
|
console.log("登录参数", loginParams) |
||||||
|
this.Login(loginParams).then((res) => { |
||||||
|
console.log("33333333333333333333333333") |
||||||
|
this.$emit('success', res.result) |
||||||
|
this.loginSuccess(); |
||||||
|
}).catch((err) => { |
||||||
|
this.$emit('fail', err) |
||||||
|
}); |
||||||
|
|
||||||
|
}else{ |
||||||
|
this.$emit('validateFail') |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
//登录成功 |
||||||
|
loginSuccess() { |
||||||
|
console.log("---------------------") |
||||||
|
this.$router.push({path: "/dashboard/analysis"}).catch(() => { |
||||||
|
console.log('登录跳转首页出错,这个错误从哪里来的') |
||||||
|
}) |
||||||
|
this.$notification.success({ |
||||||
|
message: '欢迎', |
||||||
|
description: `${timeFix()}，欢迎回来`, |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
...mapActions(['Login']), |
||||||
|
/**刷新验证码*/ |
||||||
|
handleChangeCheckCode(){ |
||||||
|
this.currdatetime = new Date().getTime(); |
||||||
|
console.log("====================") |
||||||
|
this.ruleForm.yanzhengma = '' |
||||||
|
getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{ |
||||||
|
if(res.success){ |
||||||
|
this.randCodeImage = res.result |
||||||
|
this.requestCodeSuccess=true |
||||||
|
}else{ |
||||||
|
this.$message.error(res.message) |
||||||
|
this.requestCodeSuccess=false |
||||||
|
} |
||||||
|
}).catch(()=>{ |
||||||
|
this.requestCodeSuccess=false |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
imgChange() { |
||||||
|
this.flag = !this.flag; |
||||||
|
}, |
||||||
|
flagAdd(e) { |
||||||
|
this.flag = this.flag + e; |
||||||
|
if (this.flag >= 3) { |
||||||
|
this.flag = 3; |
||||||
|
} |
||||||
|
if (this.flag < 1) { |
||||||
|
this.flag = 1; |
||||||
|
} |
||||||
|
console.log(this.flag); |
||||||
|
}, |
||||||
|
checkFn1() { |
||||||
|
if (this.isChecked1) { |
||||||
|
this.dialogVisible = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
checkFn2() { |
||||||
|
if (this.isChecked2) { |
||||||
|
this.dialogVisible = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeClose(done) { |
||||||
|
this.isChecked1 = false; |
||||||
|
this.isChecked2 = false; |
||||||
|
done(); |
||||||
|
}, |
||||||
|
quxiao() { |
||||||
|
this.isChecked1 = false; |
||||||
|
this.isChecked2 = false; |
||||||
|
this.dialogVisible = false; |
||||||
|
}, |
||||||
|
queding() { |
||||||
|
this.isChecked1 = this.isChecked2; |
||||||
|
|
||||||
|
this.dialogVisible = false; |
||||||
|
}, |
||||||
|
/*dengLu() {},*/ |
||||||
|
|
||||||
|
submitForm(formName) { |
||||||
|
this.$refs[formName].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
alert("submit!"); |
||||||
|
} else { |
||||||
|
console.log("error submit!!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
resetForm(formName) { |
||||||
|
this.$refs[formName].resetFields(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
.right .coin { |
||||||
|
margin-top: 40px; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.coin img { |
||||||
|
width: 195px; |
||||||
|
height: 195px; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.coin .f_20 { |
||||||
|
margin-bottom: 80px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.coin .f_16 { |
||||||
|
color: rgba(51, 51, 51, 0.6); |
||||||
|
text-align: center; |
||||||
|
line-height: 16px; |
||||||
|
} |
||||||
|
.login { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.left { |
||||||
|
color: #fff; |
||||||
|
background: url(./img/bg02.png) 100% no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
width: 66%; |
||||||
|
/* height: 1080px; */ |
||||||
|
min-height: 900px; |
||||||
|
padding-left: 90px; |
||||||
|
padding-top: 50px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
width: 34%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.right .main { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 480px; |
||||||
|
height: 680px; |
||||||
|
flex-direction: column; |
||||||
|
color: #000; |
||||||
|
margin: 120px auto; |
||||||
|
padding: 60px 40px; |
||||||
|
} |
||||||
|
.right .main .title { |
||||||
|
margin-bottom: 40px; |
||||||
|
} |
||||||
|
.right .main .title .f_13 { |
||||||
|
margin-top: 10px; |
||||||
|
color: #9b9b9b; |
||||||
|
} |
||||||
|
|
||||||
|
.right .main .title .f_13 a { |
||||||
|
color: #2e58ff; |
||||||
|
} |
||||||
|
.right .main .button { |
||||||
|
background-color: rgba(238, 230, 217, 1); |
||||||
|
border-radius: 25px; |
||||||
|
height: 50px; |
||||||
|
width: 400px; |
||||||
|
text-align: center; |
||||||
|
line-height: 50px; |
||||||
|
color: #fff; |
||||||
|
transition: all 0.5s; |
||||||
|
margin-bottom: 15px; |
||||||
|
/* margin: 70px 0 91px 40px; */ |
||||||
|
} |
||||||
|
.right .main .button:active { |
||||||
|
background-color: #333333; |
||||||
|
color: rgba(238, 230, 217, 1); |
||||||
|
border: 1px solid rgba(238, 230, 217, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.right .mode { |
||||||
|
position: absolute; |
||||||
|
top: 2%; |
||||||
|
right: 1%; |
||||||
|
width: 180px; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.right .mode span { |
||||||
|
display: inline-block; |
||||||
|
width: 90px; |
||||||
|
font-size: 12px; |
||||||
|
color: #746957; |
||||||
|
border: 1px solid #746957; |
||||||
|
text-align: center; |
||||||
|
padding: 1px 3px; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
.right .mode div { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.right .mode img { |
||||||
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 0 10%); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
html, |
||||||
|
body, |
||||||
|
#app { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.jz { |
||||||
|
width: 1440px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.d-flex { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.f_12 { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.f_13 { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.f_16 { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.f_18 { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.f_20 { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.f_22 { |
||||||
|
font-size: 22px; |
||||||
|
} |
||||||
|
.f_24 { |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.f_30 { |
||||||
|
font-size: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.f_36 { |
||||||
|
font-size: 36px; |
||||||
|
} |
||||||
|
|
||||||
|
.f_48 { |
||||||
|
font-size: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb_30 { |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb_100 { |
||||||
|
margin-bottom: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.fw_600 { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.c_333 { |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.c_999 { |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
|
||||||
|
.c_fff { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.c_000 { |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
|
||||||
|
.c_9a9b9b { |
||||||
|
color: #9A9B9B; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,413 @@ |
|||||||
|
<template> |
||||||
|
<div class="login d-flex"> |
||||||
|
<div class="left" :height="vh"> |
||||||
|
<span class="f_48">LOGO</span> |
||||||
|
<span class="f_24">黄淮服装定制商城</span> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="main d-flex"> |
||||||
|
<div class="title"> |
||||||
|
<p class="f_36">欢迎注册</p> |
||||||
|
<p class="f_13">已有帐号？<a @click="signIn">登录</a></p> |
||||||
|
</div> |
||||||
|
<el-form |
||||||
|
:model="ruleForm" |
||||||
|
:rules="rules" |
||||||
|
ref="ruleForm" |
||||||
|
label-position="top" |
||||||
|
> |
||||||
|
<div v-if="flag == 1"> |
||||||
|
<el-form-item label="请输入手机号" prop="number"> |
||||||
|
<el-input |
||||||
|
v-model="ruleForm.number" |
||||||
|
placeholder="可用于登录和找回密码" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="请输入验证码" required> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="16"> |
||||||
|
<el-form-item prop="code1"> |
||||||
|
<el-input |
||||||
|
v-model="ruleForm.code1" |
||||||
|
placeholder="请输入右侧验证码" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<img src="./img/yanzhengma.png" alt="" style="width: 100%" /> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="请输入手机验证码" required> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="16"> |
||||||
|
<el-form-item prop="code2"> |
||||||
|
<el-input |
||||||
|
v-model="ruleForm.code2" |
||||||
|
placeholder="请输入手机验证码" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-button @click="resetForm('ruleForm')" |
||||||
|
>获取验证码</el-button |
||||||
|
> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div v-if="flag == 2"> |
||||||
|
<el-form-item label="设置登录名" prop="name"> |
||||||
|
<el-tooltip |
||||||
|
class="item" |
||||||
|
effect="dark" |
||||||
|
content="设置后不可更改，中英文均可，最长14个英文或7个汉字" |
||||||
|
placement="top-end" |
||||||
|
> |
||||||
|
<el-input |
||||||
|
v-model="ruleForm.name" |
||||||
|
placeholder="可用于登录的账号" |
||||||
|
></el-input |
||||||
|
></el-tooltip> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="设置密码" prop="password"> |
||||||
|
<el-input |
||||||
|
v-model="ruleForm.password" |
||||||
|
placeholder="请输入8-16位密码" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="请输入验证码" required> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="16"> |
||||||
|
<el-form-item prop="code3"> |
||||||
|
<el-input |
||||||
|
v-model="ruleForm.code3" |
||||||
|
placeholder="请输入右侧验证码" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<img src="./img/yanzhengma.png" alt="" style="width: 100%" /> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div v-if="flag == 3"> |
||||||
|
<el-checkbox |
||||||
|
style="margin-bottom: 20px" |
||||||
|
v-model="isChecked1" |
||||||
|
@change="checkFn1" |
||||||
|
>阅读并接受《黄淮服装定制商城用户协议》及《隐私权保护声明》</el-checkbox |
||||||
|
> |
||||||
|
<el-dialog |
||||||
|
title="黄淮服装定制商城用户注册协议和隐私政策" |
||||||
|
:visible.sync="dialogVisible" |
||||||
|
:before-close="beforeClose" |
||||||
|
:close-on-click-modal="true" |
||||||
|
> |
||||||
|
<el-form :model="form"> |
||||||
|
<p class="paragraph"> |
||||||
|
欢迎注册成为黄淮服装定制商城用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、 |
||||||
|
充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。 |
||||||
|
</p> |
||||||
|
<p class="paragraph"> |
||||||
|
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。 |
||||||
|
如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意 |
||||||
|
我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看《订单共享与安全》）。 |
||||||
|
如您对以下协议内容有任何疑问，您可随时通过 |
||||||
|
<a href="#" class="policy">《黄淮服装定制商城隐私政策》</a |
||||||
|
>中的联系方式联系我们。 |
||||||
|
</p> |
||||||
|
<p class="paragraph"> |
||||||
|
如您在使用我们的产品或服务中与其他用户发生争议的，依您与其他用户达成的协议处理。 |
||||||
|
</p> |
||||||
|
<p class="paragraph">一、服务条款的确认与接受</p> |
||||||
|
<p class="paragraph">二、服务须知</p> |
||||||
|
<p class="paragraph">三、订单</p> |
||||||
|
<el-form-item> |
||||||
|
<el-checkbox |
||||||
|
style="margin-bottom: 20px" |
||||||
|
v-model="isChecked2" |
||||||
|
@change="checkFn2" |
||||||
|
>阅读并接受<a href="#" class="policy" |
||||||
|
>《黄淮服装定制商城用户协议》</a |
||||||
|
>及<a href="#" class="policy" |
||||||
|
>《隐私权保护声明》</a |
||||||
|
></el-checkbox |
||||||
|
> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<div class="button f_16" @click="quxiao">取 消</div> |
||||||
|
<div class="button f_16" @click="queding">确 定</div> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
<el-form-item> |
||||||
|
<div |
||||||
|
class="button f_16" |
||||||
|
@click="flagAdd(1, ruleForm)" |
||||||
|
v-if="flag < 3" |
||||||
|
> |
||||||
|
下一步 |
||||||
|
</div> |
||||||
|
<div class="button f_16" v-if="flag == 3" @click="zhuce">注册</div> |
||||||
|
<div class="button f_16" @click="flagAdd(-1)" v-if="flag > 1"> |
||||||
|
上一步 |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
vh: 0, |
||||||
|
flag: 1, |
||||||
|
dialogVisible: false, |
||||||
|
isChecked1: false, |
||||||
|
isChecked2: false, |
||||||
|
ruleForm: { |
||||||
|
number: "", |
||||||
|
code1: "", |
||||||
|
code2: "", |
||||||
|
name: "", |
||||||
|
password: "", |
||||||
|
code3: "", |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
number: [ |
||||||
|
{ required: true, message: "请输入手机号", trigger: "blur" }, |
||||||
|
{ |
||||||
|
min: 1, |
||||||
|
max: 11, |
||||||
|
message: "手机号长度在 1 到 11 个字符", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
code1: [ |
||||||
|
{ required: true, message: "验证码不能为空！", trigger: "blur" }, |
||||||
|
{ |
||||||
|
min: 1, |
||||||
|
max: 4, |
||||||
|
message: "手机号长度在 1 到 4 个字符", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
code2: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: "手机验证码不能为空！", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: 1, |
||||||
|
max: 6, |
||||||
|
message: "手机验证码长度在 1 到 6 个字符", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
name: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: "登录名不能为空！", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: 1, |
||||||
|
max: 7, |
||||||
|
message: "最长14个英文或7个汉字", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
password: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: "密码不能为空！", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: 8, |
||||||
|
max: 16, |
||||||
|
message: "手机密码长度在 8 到 16 个字符", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
code3: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: "验证码不能为空！", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: 1, |
||||||
|
max: 4, |
||||||
|
message: "验证码长度在 1 到 4 个字符", |
||||||
|
trigger: "blur", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.vh = window.screen.availHeight; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
signIn() { |
||||||
|
this.$router.push("/view/Login/SignInView.vue"); |
||||||
|
}, |
||||||
|
flagAdd(e) { |
||||||
|
this.$refs["ruleForm"].clearValidate(); |
||||||
|
this.flag = this.flag + e; |
||||||
|
if (this.flag >= 3) { |
||||||
|
this.flag = 3; |
||||||
|
} |
||||||
|
if (this.flag < 1) { |
||||||
|
this.flag = 1; |
||||||
|
} |
||||||
|
console.log(this.flag); |
||||||
|
}, |
||||||
|
checkFn1() { |
||||||
|
if (this.isChecked1) { |
||||||
|
this.dialogVisible = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
checkFn2() { |
||||||
|
if (this.isChecked2) { |
||||||
|
this.dialogVisible = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeClose(done) { |
||||||
|
this.isChecked1 = false; |
||||||
|
this.isChecked2 = false; |
||||||
|
done(); |
||||||
|
}, |
||||||
|
quxiao() { |
||||||
|
this.isChecked1 = false; |
||||||
|
this.isChecked2 = false; |
||||||
|
this.dialogVisible = false; |
||||||
|
}, |
||||||
|
queding() { |
||||||
|
this.isChecked1 = this.isChecked2; |
||||||
|
|
||||||
|
this.dialogVisible = false; |
||||||
|
}, |
||||||
|
zhuce() { |
||||||
|
if (!this.isChecked1) { |
||||||
|
this.$alert( |
||||||
|
"请先阅读并接受《黄淮服装定制商城用户协议》及《隐私权保护声明》", |
||||||
|
"无法注册！", |
||||||
|
{ |
||||||
|
confirmButtonText: "确定", |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
submitForm(formName) { |
||||||
|
this.$refs[formName].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
alert("submit!"); |
||||||
|
} else { |
||||||
|
console.log("error submit!!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
resetForm(formName) { |
||||||
|
this.$refs[formName].resetFields(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.login { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.left { |
||||||
|
color: #fff; |
||||||
|
background: url(./img/bg02.png) 100% no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
width: 66%; |
||||||
|
/* height: 1080px; */ |
||||||
|
min-height: 900px; |
||||||
|
padding-left: 90px; |
||||||
|
padding-top: 50px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
width: 34%; |
||||||
|
} |
||||||
|
.right .main { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 480px; |
||||||
|
height: 680px; |
||||||
|
flex-direction: column; |
||||||
|
color: #000; |
||||||
|
margin: 120px auto; |
||||||
|
padding: 60px 40px; |
||||||
|
} |
||||||
|
.right .main .title { |
||||||
|
margin-bottom: 40px; |
||||||
|
} |
||||||
|
.right .main .title .f_13 { |
||||||
|
margin-top: 10px; |
||||||
|
color: #9b9b9b; |
||||||
|
} |
||||||
|
|
||||||
|
.right .main .title .f_13 a { |
||||||
|
color: #2e58ff; |
||||||
|
} |
||||||
|
.right .main .button { |
||||||
|
background-color: rgba(238, 230, 217, 1); |
||||||
|
border-radius: 25px; |
||||||
|
height: 50px; |
||||||
|
width: 400px; |
||||||
|
text-align: center; |
||||||
|
line-height: 50px; |
||||||
|
color: #fff; |
||||||
|
transition: all 0.5s; |
||||||
|
margin-bottom: 15px; |
||||||
|
/* margin: 70px 0 91px 40px; */ |
||||||
|
} |
||||||
|
.right .main .button:active { |
||||||
|
background-color: #333333; |
||||||
|
color: rgba(238, 230, 217, 1); |
||||||
|
border: 1px solid rgba(238, 230, 217, 1); |
||||||
|
} |
||||||
|
/* .right >>> .el-dialog { |
||||||
|
width: 1000px; |
||||||
|
} */ |
||||||
|
.right >>> .el-dialog { |
||||||
|
width: 1000px; |
||||||
|
} |
||||||
|
.right >>> .el-dialog__header { |
||||||
|
text-align: center; |
||||||
|
background-color: #e9eae9; |
||||||
|
height: 56px; |
||||||
|
line-height: 56px; |
||||||
|
font-size: 20px; |
||||||
|
color: #000; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
.right >>> .el-dialog__body { |
||||||
|
padding: 20px 50px; |
||||||
|
} |
||||||
|
.paragraph { |
||||||
|
margin-bottom: 20px; |
||||||
|
font-size: 16px; |
||||||
|
color: #666; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 27px; |
||||||
|
} |
||||||
|
.policy { |
||||||
|
color: #409eff; |
||||||
|
} |
||||||
|
.right >>> .dialog-footer { |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 540 B |
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 670 B |
Loading…
Reference in new issue