305 lines
10 KiB
Vue
305 lines
10 KiB
Vue
<template>
|
|
<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="verificationCode"
|
|
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 {
|
|
utils: this.$utils,
|
|
safePt: 0,
|
|
backgroundImage: require("@/static/temp/1.png"),
|
|
canUse: true,
|
|
sec: 0,
|
|
timeTask: null,
|
|
tabIndex: 0,
|
|
mobile: "",
|
|
password: "",
|
|
verificationCode: "",
|
|
isAgree: false,
|
|
};
|
|
},
|
|
components: {
|
|
AppLayout,
|
|
AppAgreement,
|
|
},
|
|
onLoad() {},
|
|
onShow() {},
|
|
onReady() {},
|
|
onReachBottom() {},
|
|
onPullDownRefresh() {},
|
|
methods: {
|
|
forgetPassword() {
|
|
this.$utils.toast("正在开发中");
|
|
},
|
|
getVerifyCode() {
|
|
if (this.canUse) {
|
|
this.$models.user
|
|
.sendVerificationCode(this.mobile)
|
|
.then((response) => {
|
|
this.parseTime(60);
|
|
})
|
|
.catch((e) => {
|
|
this.$utils.toast(e);
|
|
});
|
|
} 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() {
|
|
this.$models.user
|
|
.login({
|
|
mobile: this.mobile,
|
|
password: this.password,
|
|
})
|
|
.then((response) => {
|
|
this.$utils.toPage("", {}, "back");
|
|
})
|
|
.catch((e) => {
|
|
this.$utils.toast(e);
|
|
});
|
|
},
|
|
register() {
|
|
const that = this;
|
|
if (!this.isAgree) {
|
|
this.$utils.toast("请先阅读并同意《服务协议》《隐私政策》");
|
|
return;
|
|
}
|
|
this.$models.user
|
|
.register(
|
|
{
|
|
mobile: this.mobile,
|
|
password: this.password,
|
|
},
|
|
this.verificationCode
|
|
)
|
|
.then((response) => {
|
|
this.$utils.toast(response.msg, {
|
|
duration: 1500,
|
|
complete() {
|
|
setTimeout(() => {
|
|
that.$utils.toPage("/pages/auth/auth");
|
|
}, 1500);
|
|
},
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
this.$utils.toast(e);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</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 {
|
|
position: relative;
|
|
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 {
|
|
z-index: 10;
|
|
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> |