Skip to content
This repository has been archived by the owner on Nov 15, 2018. It is now read-only.

Commit

Permalink
feat: (#440) 注册协议
Browse files Browse the repository at this point in the history
  • Loading branch information
@mutoe
mutoe committed Jun 25, 2018
1 parent fa14bd5 commit d3a265e
Show file tree
Hide file tree
Showing 11 changed files with 168 additions and 349 deletions.
0 src/page/changePassword.vue → src/page/sign/changePassword.vue
View file
File renamed without changes.
0 src/page/forgot.vue → src/page/sign/forgot.vue
View file
File renamed without changes.
65 changes: 65 additions & 0 deletions src/page/sign/registerProtocol.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<template>
<transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutRight">
<div class="protocol">
<header class="m-box m-aln-center m-head-top m-pos-f m-main m-bb1">
<div class="m-box m-aln-center m-flex-grow1 m-flex-base0">
<svg class="m-style-svg m-svg-def" @click="goBack">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
</svg>
</div>
<div class="m-box m-aln-center m-justify-center m-flex-grow1 m-flex-base0 m-head-top-title">
<span>用户注册协议</span>
</div>
<div class="m-box m-aln-center m-justify-end m-flex-grow1 m-flex-base0"></div>
</header>
<main style="padding-top: 0.9rem">
<div class="content" v-html="content"></div>
</main>
</div>
</transition>
</template>

<script>
import markdownIt from "markdown-it";
// TODO: 注册页面和协议页面切换时保留过渡动画
export default {
name: "registerProtocol",
data() {
return {};
},
computed: {
content() {
let content = this.$store.state.CONFIG.registerSettings.content;
content = content.replace(/<br>/, "\n");
return markdownIt({ html: true }).render(content);
}
}
};
</script>

<style lang="less">
.protocol {
padding: 0.2rem;
.content > * {
margin-bottom: 0.4rem;
}
h1 {
font-size: 0.62rem;
font-weight: bold;
}
h4 {
font-weight: bold;
}
ol {
list-style: decimal outside;
margin-left: 1em;
}
blockquote {
margin-left: 1em;
}
}
</style>
8 changes: 4 additions & 4 deletions src/page/signin.vue → src/page/sign/signin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
v-model="account"
placeholder="用户名/手机号/邮箱">
</div>
<svg
<svg
@click="account = ''"
v-show="account.length > 0"
class="m-style-svg m-svg-def">
Expand All @@ -39,9 +39,9 @@
maxlength="16"
v-model="password"
placeholder="输入6位以上登录密码">
<input
<input
v-else
id="password"
id="password"
maxlength="16"
type="password"
v-model="password"
Expand Down Expand Up @@ -74,7 +74,7 @@
</router-link>
</div>
</main>

<!-- TODO: 其他三方登录方式 -->
<footer class="m-box-model m-trhsignin" v-if="isWechat">
<div class="m-box m-aln-center m-justify-aro m-trhsignin-list">
Expand Down
127 changes: 50 additions & 77 deletions src/page/signup.vue → src/page/sign/signup.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<transition
enter-active-class="animated bounceInRight"
leave-active-class="animated bounceOutLeft">
enter-active-class="animated bounceInRight"
leave-active-class="animated bounceOutLeft">
<div class="p-signup">
<header class="m-box m-aln-center m-head-top m-pos-f m-main m-bb1">
<div class="m-box m-aln-center m-flex-grow1 m-flex-base0">
Expand All @@ -20,116 +20,68 @@
<div class="m-form-row m-main">
<label for="username">用户名</label>
<div class="m-input">
<input
type="text"
id="username"
v-model.trim='name'
placeholder="用户名不能低于2个中文或4个英文"
maxlength="8">
<input type="text" id="username" v-model.trim='name' placeholder="用户名不能低于2个中文或4个英文" maxlength="8">
</div>
<svg
@click="name = ''"
v-show="name.length > 0"
class="m-style-svg m-svg-def">
<svg @click="name = ''" v-show="name.length > 0" class="m-style-svg m-svg-def">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-clean"></use>
</svg>
</div>
<div class="m-form-row m-main" v-if='verifiable_type === "sms"'>
<label for="phone">手机号</label>
<div class="m-input">
<input
id="phone"
type="number"
v-model='phone'
pattern="[0-9]*"
oninput="value=value.slice(0, 11)"
placeholder="输入11位手机号">
<input id="phone" type="number" v-model='phone' pattern="[0-9]*" oninput="value=value.slice(0, 11)" placeholder="输入11位手机号">
<!-- maxlength="11" -->
</div>
<span
class="signup-form--row-append c_59b6d7"
:class='{ disabled: phone.length < 11 || countdown > 0 }'
@click='getCode'
>{{ codeText }}</span>
<span class="code-text" :class='{ disabled: phone.length < 11 || countdown > 0 }' @click='getCode'>
{{ codeText }}
</span>
</div>
<div class="m-form-row m-main" v-if='verifiable_type === "mail"'>
<label for="email">邮箱</label>
<div class="m-input">
<input
id="email"
type="email"
v-model.trim='email'
placeholder="输入邮箱地址"
>
<input id="email" type="email" v-model.trim='email' placeholder="输入邮箱地址">
</div>
<span
class="signup-form--row-append c_59b6d7"
:class='{ disabled: email.length < 4 || countdown > 0 }'
@click='getCode'
>{{ codeText }}</span>
<span class="code-text" :class='{ disabled: email.length < 4 || countdown > 0 }' @click='getCode'>
{{ codeText }}
</span>
</div>
<div class="m-form-row m-main">
<label for="code">验证码</label>
<div class="m-input">
<input
id="code"
type="number"
pattern="[0-9]*"
v-model='verifiable_code'
oninput="value=value.slice(0, 6)"
placeholder="输入4-6位验证码"
>
<input id="code" type="number" pattern="[0-9]*" v-model='verifiable_code' oninput="value=value.slice(0, 6)" placeholder="输入4-6位验证码" />
</div>
<svg
@click="verifiable_code = ''"
v-show="verifiable_code.length > 0"
class="m-style-svg m-svg-def">
<svg @click="verifiable_code = ''" v-show="verifiable_code.length > 0" class="m-style-svg m-svg-def">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-clean"></use>
</svg>
</div>

<div class="m-form-row m-main">
<label for="password">密码</label>
<div class="m-input">
<input
v-if="eye"
type="text"
id="password"
maxlength='16'
v-model="password"
placeholder="输入6位以上登录密码">
<input
v-else
id="password"
maxlength='16'
type="password"
v-model="password"
placeholder="输入6位以上登录密码"
>
<input v-if="eye" type="text" id="password" maxlength='16' v-model="password" placeholder="输入6位以上登录密码" />
<input v-else id="password" maxlength='16' type="password" v-model="password" placeholder="输入6位以上登录密码" />
</div>
<svg
class="m-style-svg m-svg-def"
@click="eye=!eye">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
:xlink:href='`#eye-${eye?"open":"close"}`'></use>
<svg class="m-style-svg m-svg-def" @click="eye=!eye">
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href='`#eye-${eye?"open":"close"}`'></use>
</svg>
</div>
<div class="m-box m-aln-center m-text-box m-form-err-box">
<span>{{ error | plusMessageFirst }}</span>
</div>
<div class="m-form-row" style="border: 0">
<button
:disabled="loading||disabled"
class="m-long-btn m-signin-btn"
@click="signIn">
<button :disabled="loading||disabled" class="m-long-btn m-signin-btn" @click="signIn">
<svg v-if="loading" class="m-style-svg m-svg-def">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-loading"></use>
</svg>
<span v-else>注册</span>
</button>
</div>
</main>
<footer>
<router-link to="/signup/protocol" class="register-protocol">
点击注册即代表同意《ThinkSNS+用户使用协议》
</router-link>
</footer>
</div>
</transition>
</template>
Expand Down Expand Up @@ -359,15 +311,23 @@ export default {
this._$type = SMS;
break;
}
},
popProtocol() {
console.log("protocol");
}
}
};
</script>
<style lang='less' src='./style/signup.less'>
</style>

<style lang="less">
<style lang="less" scoped>
.p-signup {
display: flex;
height: 100%;
> * {
width: 100%;
}
.m-form-row {
label {
flex: 0 0 30 * 4px;
Expand All @@ -376,8 +336,8 @@ export default {
.m-input {
padding: 0 30px 0 0;
}
.c_59b6d7.disabled,
.c_59b6d7[disabled] {
.code-text.disabled,
.code-text[disabled] {
color: #ccc;
}
&-append {
Expand All @@ -391,5 +351,18 @@ export default {
}
}
}
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
text-align: center;
padding: 0.2rem;
.register-protocol {
font-size: 0.3rem;
color: #666;
}
}
}
</style>
Loading

0 comments on commit d3a265e

Please sign in to comment.