<template>
|
<div class="login">
|
<div class="logo">
|
<img :src="loginImg" alt="">
|
</div>
|
<div class="weui-cells weui-cells_form" v-if="signOptions">
|
<div class="weui-cell" v-for="item in signOptions.verifications" :key="item.type">
|
<div class="weui-cell__bd">
|
<input class="weui-input" type="text" v-model="item.value" :placeholder="item.placeholder">
|
</div>
|
<div class="weui-cell__ft" v-if="item.type === 'authcode'">
|
<button class="weui-vcode-btn" v-text="authMessage" :disabled="authMessage !== item.message1" @click="sendAuthcode(item)"></button>
|
</div>
|
</div>
|
<div class="weui-cells__tips" v-if="authMessage"><span v-if="tips"><i class="weui-icon-success"></i>{{tips}}</span></div>
|
<label class="weui-agree" v-if="signOptions.protocol" >
|
<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
|
<span for="weuiAgree" class="weui-agree__text">
|
{{signOptions.protocol.message1}}
|
</span>
|
<span>
|
<a href="javascript:void(0);" @click="switchType('protocol')">{{signOptions.protocol.message2}}</a>
|
</span>
|
</label>
|
<div class="weui-cell border-bottom-none" v-if="signOptions.links">
|
<div class="weui-cell__hd"><a href="javascript:;" class="weui-label" @click="switchType(signOptions.links[0].type)">{{signOptions.links[0].name}}</a></div>
|
<div class="weui-cell__bd"><a href="javascript:;" class="pull-right" @click="switchType(signOptions.links[1].type)">{{signOptions.links[1].name}}</a></div>
|
</div>
|
</div>
|
<a href="javascript:;" v-if="signOptions" class="weui-btn weui-btn_warn sign-in" @click="signIn(signOptions.confirm.type)">{{signOptions.confirm.name}}</a>
|
<div class="weui-footer" v-if="signOptions && signOptions.footer">
|
<p class="weui-footer__links" v-if="signOptions.footer.switch">
|
<a href="javascript:void(0);" class="weui-footer__link" @click="switchType(signOptions.footer.switch.type)" v-text="signOptions.footer.switch.name"></a>
|
</p>
|
<div style="text-align:center;" v-if="signOptions.footer.options">
|
<a href="javascript:;" class="weui-footer__link" v-for="item in signOptions.footer.options" :key="item.type" @click="switchType(item.type)">
|
<div class="weui-tabbar__icon">
|
<img :src="item.imgurl" alt="">
|
</div>
|
<p class="weui-tabbar__label" v-text="item.name"></p>
|
</a>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import signInList from '../store/login'
|
export default {
|
name: 'login',
|
components: {},
|
data () {
|
return {
|
view: null,
|
loginImg: null,
|
signOptions: null,
|
tips: null,
|
authMessage: null
|
}
|
},
|
methods: {
|
signIn (type) {
|
let verification = {}
|
this.signOptions.verifications.forEach(element => {
|
verification[element.type] = element.value
|
})
|
if (type === 'login-account') {
|
if (verification.account === 'mingke' && verification.password === '123456') {
|
this.$router.push('/' + this.view)
|
} else {
|
$.modal({
|
title: '',
|
text: '用户名或密码错误',
|
buttons: [
|
{text: '确定', onClick: () => {}},
|
{text: '找回密码', onClick: () => { console.log(2) }}
|
]
|
})
|
}
|
} else if (type === 'login-phone') {
|
if (verification.phone === '18310653075' && verification.authcode === '123456') {
|
this.$router.push('/' + this.view)
|
} else {
|
$.modal({
|
title: '',
|
text: '验证码错误',
|
buttons: [
|
{text: '确定', onClick: () => {}},
|
{text: '找回密码', onClick: () => { console.log(2) }}
|
]
|
})
|
}
|
} else if (type === 'signup-phone') {
|
if (verification.phone === '18310653075' && verification.authcode === '123456') {
|
this.signOptions = null
|
this.tips = null
|
this.authMessage = null
|
this.signOptions = signInList.setPassword
|
} else {
|
$.modal({
|
title: '',
|
text: '验证码错误',
|
buttons: [
|
{text: '确定', onClick: () => {}},
|
{text: '找回密码', onClick: () => { console.log(2) }}
|
]
|
})
|
}
|
} else if (type === 'signup') {
|
let modal = {
|
title: '',
|
text: '',
|
buttons: [
|
{text: '确定', onClick: () => {}},
|
{text: '取消', className: 'default', onClick: () => { console.log(2) }}
|
]
|
}
|
this.signOptions.verifications.some((cell) => {
|
if (cell.value === '') {
|
modal.text = cell.placeholder
|
return true
|
}
|
})
|
if (!modal.text && verification.password !== verification.conformPassword) {
|
modal.text = '两次输入密码不相等'
|
}
|
if (modal.text) {
|
$.modal(modal)
|
} else {
|
this.$router.push('/' + this.view)
|
}
|
} else if (type === 'retrieve-password') {
|
if (verification.phone === '18310653075' && verification.authcode === '123456') {
|
this.signOptions = null
|
this.tips = null
|
this.authMessage = null
|
this.signOptions = signInList.resetPassword
|
} else {
|
$.modal({
|
title: '',
|
text: '验证码错误',
|
buttons: [
|
{text: '确定', onClick: () => {}},
|
{text: '取消', className: 'default', onClick: () => { console.log(2) }}
|
]
|
})
|
}
|
} else if (type === 'resetpassword-signin') {
|
let modal = {
|
title: '',
|
text: '',
|
buttons: [
|
{text: '确定', onClick: () => {}},
|
{text: '取消', className: 'default', onClick: () => { console.log(2) }}
|
]
|
}
|
this.signOptions.verifications.some((cell) => {
|
if (cell.value === '') {
|
modal.text = cell.placeholder
|
return true
|
}
|
})
|
if (!modal.text && verification.password !== verification.conformPassword) {
|
modal.text = '两次输入密码不相等'
|
}
|
if (modal.text) {
|
$.modal(modal)
|
} else {
|
this.$router.push('/' + this.view)
|
}
|
}
|
},
|
switchType (type) {
|
this.signOptions = null
|
this.tips = null
|
this.authMessage = null
|
if (type === 'login-phone') {
|
this.signOptions = signInList.phoneSignIn
|
this.signOptions.verifications.forEach(ele => {
|
if (ele.type === 'authcode') {
|
this.authMessage = ele.message1
|
}
|
})
|
} else if (type === 'login-account') {
|
this.signOptions = signInList.accountSignIn
|
} else if (type === 'signup') {
|
this.signOptions = signInList.phoneSignUp
|
this.signOptions.verifications.forEach(ele => {
|
if (ele.type === 'authcode') {
|
this.authMessage = ele.message1
|
}
|
})
|
} else if (type === 'retrieve') {
|
this.signOptions = signInList.phoneRetrievePassword
|
this.signOptions.verifications.forEach(ele => {
|
if (ele.type === 'authcode') {
|
this.authMessage = ele.message1
|
}
|
})
|
}
|
},
|
sendAuthcode (item) {
|
this.tips = item.tip
|
let num = 60
|
this.authMessage = num + item.message2
|
let timer = setInterval(() => {
|
num--
|
this.authMessage = num + item.message2
|
if (num === 0) {
|
this.authMessage = item.message1
|
clearInterval(timer)
|
}
|
}, 1000)
|
}
|
},
|
mounted: function () {
|
this.signOptions = signInList.accountSignIn
|
this.loginImg = require('@/assets/images/login/circle.jpg')
|
this.view = this.$route.params.view
|
}
|
}
|
</script>
|
|
<style scoped>
|
.login {
|
width: 100%;
|
box-sizing: border-box;
|
padding: 15px;
|
}
|
.login .logo {
|
width: 100%;
|
text-align: center;
|
}
|
.login .logo img {
|
width: 50%;
|
}
|
.weui-cells:before {
|
border-top: none;
|
}
|
.weui-cells:after {
|
border-bottom: none;
|
}
|
.weui-cell:before {
|
border-top: none;
|
}
|
.weui-cell {
|
border-bottom: 1px solid #e5e5e5;
|
}
|
.weui-cell {
|
padding: 10px 5px;
|
}
|
.weui-cell:before {
|
left: 0;
|
}
|
.border-bottom-none {
|
border-bottom: none;
|
}
|
.weui-btn {
|
border-radius: 25px;
|
}
|
.sign-in {
|
margin-bottom: 15px;
|
margin-top: 20px;
|
}
|
.weui-footer__text {
|
font-size: 1em;
|
margin-top: 15px;
|
}
|
button.weui-vcode-btn {
|
height: 25px;
|
line-height: 25px;
|
font-size: 14px;
|
border-left: none;
|
background: #ececec;
|
border-radius: 10px;
|
padding: 0px 10px;
|
}
|
.weui-cells__tips {
|
height: 25px;
|
padding-left: 0px;
|
padding-bottom: 15px;
|
}
|
.weui-agree {
|
padding-left: 0px;
|
padding-bottom: 15px;
|
}
|
</style>
|
