zyronon
4 years ago
14 changed files with 529 additions and 205 deletions
@ -0,0 +1,115 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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