zyronon
4 years ago
14 changed files with 529 additions and 205 deletions
@ -0,0 +1,115 @@ |
|||||||
|
<template> |
||||||
|
<div class="NoticeDialog" @click="$emit('dismiss')"> |
||||||
|
<div class="content" @click.stop="null"> |
||||||
|
<div class="body"> |
||||||
|
<div class="title">{{ title }}</div> |
||||||
|
<div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div> |
||||||
|
</div> |
||||||
|
<div class="footer"> |
||||||
|
<div class="cancel" @click.stop="$emit('cancel')">{{ cancelText }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "NoticeDialog", |
||||||
|
props: { |
||||||
|
visible: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default() { |
||||||
|
return '' |
||||||
|
} |
||||||
|
}, |
||||||
|
subtitle: { |
||||||
|
type: String, |
||||||
|
default() { |
||||||
|
return '' |
||||||
|
} |
||||||
|
}, |
||||||
|
subtitleColor: { |
||||||
|
type: String, |
||||||
|
default() { |
||||||
|
return 'gray' |
||||||
|
} |
||||||
|
}, |
||||||
|
cancelText: { |
||||||
|
type: String, |
||||||
|
default() { |
||||||
|
return '取消' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
@import "../../assets/scss/index"; |
||||||
|
|
||||||
|
.NoticeDialog { |
||||||
|
z-index: 10; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
background: #000000bb; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
color: black; |
||||||
|
|
||||||
|
|
||||||
|
.content { |
||||||
|
background: white; |
||||||
|
width: 70%; |
||||||
|
border-radius: 2px; |
||||||
|
box-sizing: border-box; |
||||||
|
font-size: 1.5rem; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
.body { |
||||||
|
padding: 2.5rem; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 1.5rem; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.subtitle { |
||||||
|
margin-top: 1rem; |
||||||
|
font-size: 1.3rem; |
||||||
|
|
||||||
|
&.gray{ |
||||||
|
color: $second-text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
height: 4.6rem; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-top: 1px solid whitesmoke; |
||||||
|
font-size: 1.4rem; |
||||||
|
|
||||||
|
|
||||||
|
.cancel { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
export default { |
||||||
|
name: "Base", |
||||||
|
props: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
isAgree: false, |
||||||
|
isOtherLogin: false, |
||||||
|
showAnim: false, |
||||||
|
showTooltip: false, |
||||||
|
loading: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async check() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
if (this.isAgree) { |
||||||
|
resolve(true) |
||||||
|
} else { |
||||||
|
if (!this.showAnim && !this.showTooltip) { |
||||||
|
this.showAnim = true |
||||||
|
setTimeout(() => { |
||||||
|
this.showAnim = false |
||||||
|
this.showTooltip = true |
||||||
|
}, 500) |
||||||
|
setTimeout(() => { |
||||||
|
this.showTooltip = false |
||||||
|
}, 3000) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
@import "../../assets/scss/index"; |
||||||
|
|
||||||
|
.content { |
||||||
|
padding: 6rem 3rem; |
||||||
|
//padding-top: 6rem; |
||||||
|
|
||||||
|
.desc { |
||||||
|
margin-bottom: 2rem; |
||||||
|
margin-top: 4rem; |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-weight: bold; |
||||||
|
font-size: 2rem; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-title { |
||||||
|
font-size: 1.2rem; |
||||||
|
color: $second-text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.notice { |
||||||
|
margin-top: 1rem; |
||||||
|
font-size: 1.3rem; |
||||||
|
color: $primary-btn-color; |
||||||
|
} |
||||||
|
|
||||||
|
.button { |
||||||
|
margin-bottom: .5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.protocol { |
||||||
|
position: relative; |
||||||
|
color: gray; |
||||||
|
margin-top: 2rem; |
||||||
|
margin-bottom: 2rem; |
||||||
|
font-size: 1.2rem; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.left { |
||||||
|
padding-top: .1rem; |
||||||
|
margin-right: .5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.options { |
||||||
|
font-size: 1.2rem; |
||||||
|
margin-top: 2rem; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,147 @@ |
|||||||
|
<template> |
||||||
|
<div class="RetrievePassword"> |
||||||
|
<BaseHeader mode="light" :isClose="true"></BaseHeader> |
||||||
|
<div class="content"> |
||||||
|
<div class="desc"> |
||||||
|
<div class="title">找回密码</div> |
||||||
|
<div class="sub-title">验证码已通过短信发送到+86 13800138000。 |
||||||
|
密码为8 - 20位，至少包含字母、数字、符号2种组合 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<LoginInput |
||||||
|
autofocus |
||||||
|
type="code" |
||||||
|
v-model="code" |
||||||
|
placeholder="请输入验证码" |
||||||
|
v-model:isSendVerificationCode="isSendVerificationCode" |
||||||
|
@send="sendCode" |
||||||
|
/> |
||||||
|
<LoginInput |
||||||
|
class="mt1r" |
||||||
|
autofocus |
||||||
|
type="password" |
||||||
|
v-model="password" |
||||||
|
placeholder="请输入密码" |
||||||
|
/> |
||||||
|
|
||||||
|
|
||||||
|
<div class="protocol" :class="showAnim?'anim-bounce':''"> |
||||||
|
<Tooltip style="top: -150%;left: -1rem;" v-model="showTooltip"/> |
||||||
|
<div class="left"> |
||||||
|
<Check v-model="isAgree"/> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
已阅读并同意 |
||||||
|
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”用户服务协议'})">用户协议</span> |
||||||
|
和 |
||||||
|
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span> |
||||||
|
，同时登录并使用抖音火山版（原“火山小视频”）和抖音 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="notice" v-if="notice"> |
||||||
|
{{ notice }} |
||||||
|
</div> |
||||||
|
|
||||||
|
<b-button |
||||||
|
:loading="loading" |
||||||
|
:active="false" |
||||||
|
:loadingWithText="true" |
||||||
|
:disabled="disabled" |
||||||
|
@click="login"> |
||||||
|
完成 |
||||||
|
</b-button> |
||||||
|
|
||||||
|
<div class="options" v-if="showVoiceCode"> |
||||||
|
<span> |
||||||
|
收不到短信？<span class="link" @click="getVoiceCode">获取语音验证码</span> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Check from "../../components/Check"; |
||||||
|
import LoginInput from "./components/LoginInput"; |
||||||
|
import Tooltip from "./components/Tooltip"; |
||||||
|
import Base from "./Base"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "RetrievePassword", |
||||||
|
extends: Base, |
||||||
|
components: { |
||||||
|
Check, |
||||||
|
Tooltip, |
||||||
|
LoginInput, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
phone: '', |
||||||
|
password: '', |
||||||
|
code: '', |
||||||
|
notice: '', |
||||||
|
isSendVerificationCode: true, |
||||||
|
showVoiceCode: false |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
disabled() { |
||||||
|
return !(this.code && this.password); |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
setTimeout(() => { |
||||||
|
this.showVoiceCode = true |
||||||
|
}, 3000) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getVoiceCode() { |
||||||
|
return this.$showNoticeDialog('语音验证码', |
||||||
|
'我们将以电话的方式告知你验证码，请注意接听', |
||||||
|
'', |
||||||
|
() => { |
||||||
|
setTimeout(() => { |
||||||
|
this.$showConfirmDialog('', '您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' + |
||||||
|
'您因为换号无法收到验证码，可以尝试找回账号', '', () => { |
||||||
|
}, null, '找回账号', '返回', '') |
||||||
|
}, 2000) |
||||||
|
}, |
||||||
|
'知道了' |
||||||
|
) |
||||||
|
}, |
||||||
|
//TODO loading样式不对 |
||||||
|
async sendCode() { |
||||||
|
this.$showLoading() |
||||||
|
await this.$sleep(500) |
||||||
|
this.$hideLoading() |
||||||
|
this.isSendVerificationCode = true |
||||||
|
}, |
||||||
|
async login() { |
||||||
|
let res = await this.check() |
||||||
|
if (res) { |
||||||
|
this.loading = true |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
@import "../../assets/scss/index"; |
||||||
|
@import "Base.scss"; |
||||||
|
|
||||||
|
.RetrievePassword { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
overflow: auto; |
||||||
|
color: black; |
||||||
|
font-size: 1.4rem; |
||||||
|
background: white; |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue