增加登录注册页面
This commit is contained in:
parent
d4f37fa386
commit
a3d25011fa
|
|
@ -1,25 +1,263 @@
|
|||
<template>
|
||||
<app-layout headerBackgroundColor="#00418c" textColor="light"> </app-layout>
|
||||
<app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :showHeader="false">
|
||||
<view class="auth-container">
|
||||
<view class="immerse-image">
|
||||
<image class="image" :src="backgroundImage" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="immerse-main" :style="{ paddingTop: safePt + utils.rpx2px(20) + 'px' }">
|
||||
<view class="head-title">
|
||||
<text class="title">熊熊建材安装<text class="color">师傅版</text></text>
|
||||
<text class="desc">将好师傅交给用户让好服务走进万家 </text>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="select-group">
|
||||
<view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
|
||||
<text>账号登录</text>
|
||||
</view>
|
||||
<view class="select-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
|
||||
<text>免费注册</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-group">
|
||||
<view class="tab-item" v-show="tabIndex == 0">
|
||||
<view class="input-item">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
v-model="mobile"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder-style-3"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
v-model="password"
|
||||
placeholder="请输入6位以上密码 "
|
||||
placeholder-class="placeholder-style-3"
|
||||
/>
|
||||
</view>
|
||||
<view class="helper">
|
||||
<text class="forget-password" @click="forgetPassword">忘记密码？</text>
|
||||
</view>
|
||||
<view class="form-save-btn" @click="login">
|
||||
<text>登录</text>
|
||||
</view>
|
||||
<view class="bottom-link">
|
||||
<text>没有账号？</text>
|
||||
<text class="link" @click="tabIndex = 1">免费注册</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-item" v-show="tabIndex == 1">
|
||||
<view class="input-item">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
v-model="mobile"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder-style-3"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
v-model="mobile"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="placeholder-style-3"
|
||||
/>
|
||||
<view class="get-code" @click="getVerifyCode">
|
||||
<text class="text active" v-if="canUse">获取验证码</text>
|
||||
<text class="text" v-else>{{ sec }}s后重新获取</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
v-model="password"
|
||||
placeholder="请输入6位以上密码 "
|
||||
placeholder-class="placeholder-style-3"
|
||||
/>
|
||||
</view>
|
||||
<view class="helper">
|
||||
<app-agreement v-model="isAgree" />
|
||||
</view>
|
||||
<view class="form-save-btn" @click="register">
|
||||
<text>同意协议并注册</text>
|
||||
</view>
|
||||
<view class="bottom-link">
|
||||
<text>已有账号？</text>
|
||||
<text class="link" @click="tabIndex = 0">立即登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</app-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppLayout from "@/components/layout/layout";
|
||||
import AppAgreement from "@/components/auth/agreement";
|
||||
export default {
|
||||
name: "auth",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
utils: this.$utils,
|
||||
safePt: 0,
|
||||
backgroundImage: require("@/static/temp/1.png"),
|
||||
canUse: true,
|
||||
sec: 0,
|
||||
timeTask: null,
|
||||
tabIndex: 0,
|
||||
mobile: "",
|
||||
password: "",
|
||||
isAgree: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
AppAgreement,
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
onPullDownRefresh() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
forgetPassword() {
|
||||
this.$utils.toast("正在开发中");
|
||||
},
|
||||
getVerifyCode() {
|
||||
if (this.canUse) {
|
||||
if (true) {
|
||||
this.parseTime(10);
|
||||
}
|
||||
} else {
|
||||
this.$utils.toast("请稍后再试");
|
||||
}
|
||||
},
|
||||
parseTime(sec) {
|
||||
const that = this;
|
||||
this.canUse = false;
|
||||
this.sec = sec;
|
||||
that.timeTask = setInterval(() => {
|
||||
that.sec -= 1;
|
||||
if (that.sec <= 0) {
|
||||
that.canUse = true;
|
||||
that.sec = 0;
|
||||
clearInterval(that.timeTask);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
login() {},
|
||||
register() {
|
||||
if (!this.isAgree) {
|
||||
this.$utils.toast("请先阅读并同意《服务协议》《隐私政策》");
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.auth-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.immerse-main {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.section {
|
||||
width: 710rpx;
|
||||
margin: 20rpx auto 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 46rpx 30rpx 150rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.select-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.select-item {
|
||||
padding: 18rpx 28rpx;
|
||||
font-size: 36rpx;
|
||||
line-height: 36rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.select-item.active {
|
||||
color: #7286f1;
|
||||
font-weight: bold;
|
||||
border-bottom: 7rpx solid #7286f1;
|
||||
}
|
||||
}
|
||||
.tab-group {
|
||||
width: 100%;
|
||||
.tab-item {
|
||||
width: 100%;
|
||||
}
|
||||
.input-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: 45rpx;
|
||||
border-bottom: 2rpx solid #d2d1d1;
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
padding: 30rpx 0;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
.helper {
|
||||
width: 100%;
|
||||
margin-top: 50rpx;
|
||||
text-align: right;
|
||||
.forget-password {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
.bottom-link {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
.link {
|
||||
color: #8b9beb;
|
||||
padding-left: 18rpx;
|
||||
}
|
||||
}
|
||||
.get-code {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: inline-block;
|
||||
padding: 30rpx 0;
|
||||
.text {
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.text.active {
|
||||
color: #ffa800;
|
||||
}
|
||||
}
|
||||
.form-save-btn {
|
||||
width: 570rpx;
|
||||
height: 98rpx;
|
||||
background: #8b9beb;
|
||||
border-radius: 49rpx;
|
||||
font-size: 36rpx;
|
||||
color: #ffffff;
|
||||
line-height: 98rpx;
|
||||
text-align: center;
|
||||
margin: 160rpx auto 160rpx auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue