428 lines
12 KiB
Vue
428 lines
12 KiB
Vue
<template> <!-- 注册 -->
|
||
<view class="wrap pos-r h-100 flex flex-col justify-start items-center" style="background-color: #AB0011">
|
||
<u-image src="/static/img/login.jpg" width="750rpx" height="470rpx" mode=""></u-image>
|
||
<view class="layout-login card" style="z-index: 10">
|
||
<view class="login-title">手机号绑定</view>
|
||
<template v-if="showBind">
|
||
<view class="login-role flex justify-center m-top-20">
|
||
<view :class="['role', {active : form1.accountType === 2}]" @click="form1.accountType = 2">企业用户
|
||
</view>
|
||
<view :class="['role', {active : form1.accountType === 1}]" @click="form1.accountType = 1">个人用户
|
||
</view>
|
||
</view>
|
||
<view class="login-form">
|
||
<view class="m-top-30">
|
||
<u--input
|
||
v-model="form1.mobile"
|
||
placeholder="请输入手机号"
|
||
prefixIcon="account"
|
||
prefixIconStyle="font-size: 26px;color: #909399"
|
||
></u--input>
|
||
</view>
|
||
<view class="m-top-30">
|
||
<u--input
|
||
v-model="form1.password"
|
||
type="password"
|
||
placeholder="设置登录密码"
|
||
prefixIcon="lock"
|
||
prefixIconStyle="font-size: 26px;color: #909399"
|
||
></u--input>
|
||
</view>
|
||
<view class="m-top-30">
|
||
<u--input
|
||
v-model="form1.repassword"
|
||
type="password"
|
||
placeholder="确认登录密码"
|
||
prefixIcon="lock"
|
||
prefixIconStyle="font-size: 26px;color: #909399"
|
||
></u--input>
|
||
</view>
|
||
<view class="m-top-30" v-if="form1.accountType === 2">
|
||
<u--input
|
||
v-model="form1.company.companyName"
|
||
placeholder="请输入公司名称"
|
||
prefixIcon="integral"
|
||
prefixIconStyle="font-size: 26px;color: #909399"
|
||
></u--input>
|
||
</view>
|
||
<view class="m-top-30" v-if="form1.accountType === 1">
|
||
<u--input
|
||
v-model="form1.person.personName"
|
||
placeholder="请输入姓名"
|
||
prefixIcon="integral"
|
||
prefixIconStyle="font-size: 26px;color: #909399"
|
||
></u--input>
|
||
</view>
|
||
<view class="m-top-30">
|
||
<u--input
|
||
placeholder="请输入邀请码,选填"
|
||
prefixIcon="coupon"
|
||
prefixIconStyle="font-size: 26px;color: #909399"
|
||
></u--input>
|
||
</view>
|
||
<view class="m-top-30">
|
||
<u--input
|
||
v-model="form1.smsCode"
|
||
placeholder="请输入短信验证码"
|
||
prefixIcon="email"
|
||
prefixIconStyle="font-size: 26px;color: #909399"
|
||
>
|
||
<template slot="suffix">
|
||
<u-code
|
||
ref="uCode"
|
||
@change="codeChange"
|
||
seconds="20"
|
||
:changeText="smsTips"
|
||
></u-code>
|
||
<u-button
|
||
@tap="sendSmsCode"
|
||
type="success"
|
||
size="mini"
|
||
color="#db1c2c"
|
||
>{{ smsTips }}
|
||
</u-button>
|
||
</template>
|
||
</u--input>
|
||
</view>
|
||
<view class="check-box flex justify-start m-top-30">
|
||
<u-checkbox-group v-model="checked" placement="row" @change="changeCheck">
|
||
<u-checkbox activeColor="red" label="阅读并同意" name="agree"></u-checkbox>
|
||
</u-checkbox-group>
|
||
<text class="xie" @click="getInfo">《金久信注册协议》</text>
|
||
</view>
|
||
<view class="m-top-30">
|
||
<u-button color="#db1c2c" text="立即免费登录" @click="handleSubmit"></u-button>
|
||
</view>
|
||
<view class="flex justify-center m-top-20">
|
||
<view class="fg">已有账号，</view>
|
||
<view class="fg red" @click="loginLink">去登录</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<u-popup mode="center" :show="showRule" closeable close-on-click-overlay @close="showRule = false" round="15"
|
||
:customStyle="{width: '90%'}">
|
||
<view class="p-30 rule">
|
||
<view v-html="info"></view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
roleIndex: 1,
|
||
tabIndex: 1,
|
||
tips: '',
|
||
checked: [],
|
||
timer: null,
|
||
timeS: 60,
|
||
smsTips: '获取验证码',
|
||
form1: {
|
||
accountType: 2, // business 企业 、、personal个人
|
||
mobile: '',
|
||
smsCode: '',
|
||
password: '',
|
||
repassword: '',
|
||
inviteCode: '',
|
||
person: {
|
||
personName: ''
|
||
},
|
||
company: {
|
||
companyName: ''
|
||
}
|
||
},
|
||
hasRead: false,
|
||
showRule: false,
|
||
info: null,
|
||
code: null,
|
||
uid: null,
|
||
showBind: false,
|
||
}
|
||
},
|
||
methods: {
|
||
changeCheck(e) {
|
||
console.log(e)
|
||
},
|
||
loginLink() {
|
||
uni.$u.route('/pages/login/login')
|
||
},
|
||
handTab(index) {
|
||
this.tabIndex = index
|
||
},
|
||
codeChange(text) {
|
||
this.tips = text;
|
||
},
|
||
sendSmsCode() {
|
||
if (this.timer != null) return
|
||
if (!this.form1.mobile) return this.$message.error('请输入手机号');
|
||
vk.userCenter.sendSmsCode({
|
||
loading: false,
|
||
data: {
|
||
mobile: this.form1.mobile,
|
||
type: 'bind',
|
||
},
|
||
success: (data) => {
|
||
this.$message({
|
||
message: "验证码已发送",
|
||
type: 'success'
|
||
})
|
||
this.timeS = 60
|
||
this.timer = setInterval(() => {
|
||
console.log(this.smsTips)
|
||
this.timeS--
|
||
if (this.timeS <= 0) {
|
||
this.smsTips = "重新发送"
|
||
this.stopTimer()
|
||
} else {
|
||
this.smsTips = this.timeS + "秒"
|
||
}
|
||
}, 1000)
|
||
}
|
||
});
|
||
},
|
||
async handleSubmit() {
|
||
if (!this.checked.includes('agree')) {
|
||
this.$message({
|
||
message: '请先阅读并同意《金久信注册协议》',
|
||
type: 'warning'
|
||
})
|
||
} else {
|
||
if (this.testForm()) {
|
||
await vk.callFunction({
|
||
url: '/client/user/kh/updateLoginInfo',
|
||
data: {
|
||
uid: this.uid,
|
||
accountType: this.form1.accountType,
|
||
nickname: this.form1.nickname,
|
||
inviteCode: this.form1.inviteCode,
|
||
}
|
||
})
|
||
vk.userCenter.bindMobile({
|
||
data: {
|
||
mobile: this.form1.mobile,
|
||
code: this.form1.smsCode,
|
||
},
|
||
success: () => {
|
||
vk.userCenter.resetPwd({
|
||
data: {
|
||
password: this.form1.password,
|
||
},
|
||
success: async () => {
|
||
vk.redirectTo({url: '/pages/login/login'})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
testForm() {
|
||
const {
|
||
mobile, // 手机号
|
||
smsCode, // 短信验证码4-8位
|
||
password, // 密码 6-20位
|
||
repassword, // 重复输入密码
|
||
inviteCode, // 邀请码
|
||
accountType,
|
||
company,
|
||
person
|
||
} = this.form1;
|
||
|
||
// 手机号验证
|
||
if (!mobile || !/^1[3456789]\d{9}$/.test(mobile)) {
|
||
this.$message({
|
||
message: '手机号为空或格式不正确',
|
||
type: 'error'
|
||
})
|
||
return false
|
||
}
|
||
|
||
// 短信验证码验证
|
||
if (!smsCode || !/^\d{4,8}$/.test(smsCode)) {
|
||
// 短信验证码为空或格式不正确
|
||
// 处理错误逻辑
|
||
this.$message({
|
||
message: '短信验证码为空或格式不正确',
|
||
type: 'error'
|
||
})
|
||
return false
|
||
}
|
||
|
||
// 密码验证
|
||
if (!password || password.length < 6 || password.length > 20) {
|
||
// 密码为空或长度不符合要求
|
||
this.$message({
|
||
message: '密码长度不符合要求',
|
||
type: 'error'
|
||
})
|
||
return false
|
||
// 处理错误逻辑
|
||
}
|
||
|
||
const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+$/
|
||
if (!reg.test(password)) {
|
||
this.$message({
|
||
message: '密码必须由数字和字母组成',
|
||
type: 'error'
|
||
})
|
||
return false
|
||
}
|
||
|
||
// 重复输入密码验证
|
||
if (password !== repassword) {
|
||
// 两次输入的密码不一致
|
||
this.$message({
|
||
message: '两次输入的密码不一致',
|
||
type: 'error'
|
||
})
|
||
return false
|
||
// 处理错误逻辑
|
||
}
|
||
|
||
if (parseInt(accountType) === 1 && !person.personName) {
|
||
this.$message({
|
||
message: '请输入姓名',
|
||
type: 'error'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (parseInt(accountType) === 2 && !company.companyName) {
|
||
this.$message({
|
||
message: '请输入公司名称',
|
||
type: 'error'
|
||
})
|
||
return false
|
||
}
|
||
return true
|
||
|
||
},
|
||
stopTimer() {
|
||
if (this.timer != null) {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
}
|
||
},
|
||
async getInfo() {
|
||
const {content} = await vk.callFunction({
|
||
url: `client/otherArticle/list/pub/getDetail`,
|
||
data: {id: '65792dc8652341901b34a0bc'}
|
||
});
|
||
this.info = content
|
||
this.showRule = true
|
||
this.readCountDown = 10
|
||
this.readInterval = setInterval(() => {
|
||
this.readCountDown--
|
||
if (this.readCountDown <= 0) {
|
||
clearInterval(this.readInterval)
|
||
}
|
||
}, 1000)
|
||
},
|
||
clickAgree(check) {
|
||
if (check && !this.hasRead) {
|
||
this.agree = false
|
||
return this.$message.error('请先阅读并同意《金久信注册协议》')
|
||
}
|
||
},
|
||
loginSuccess() {
|
||
uni.reLaunch({url: '/'})
|
||
},
|
||
},
|
||
async onLoad(options) {
|
||
if (options.state && options.state.includes('jjx')) {
|
||
this.form1.accountType = parseInt(options.state.split('_')[1])
|
||
this.code = options.code
|
||
if (options.code) {
|
||
this.code = options.code
|
||
const {uid, type, mobileConfirmed} = await vk.callFunction({
|
||
url: 'user/pub/loginByWeixin',
|
||
data: {
|
||
code: this.code,
|
||
accountType: this.form1.accountType,
|
||
wap: true
|
||
},
|
||
})
|
||
this.uid = uid
|
||
this.showBind = type === "register"
|
||
if (mobileConfirmed) this.loginSuccess()
|
||
else this.showBind = true
|
||
|
||
} else {
|
||
this.showBind = !vk.getVuex('$user.userInfo.mobile')
|
||
}
|
||
} else this.loginSuccess()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.login-img {
|
||
width: 100%;
|
||
height: 330rpx;
|
||
}
|
||
|
||
.layout-login {
|
||
margin: 40rpx 30rpx;
|
||
padding: 30rpx 30rpx 50rpx;
|
||
width: 80%;
|
||
|
||
.login-title {
|
||
font-size: 44rpx;
|
||
font-weight: 500;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
color: #101010;
|
||
}
|
||
|
||
.login-type {
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
color: #8e8e8e;
|
||
}
|
||
|
||
.login-role .role {
|
||
position: relative;
|
||
margin: 0 50rpx;
|
||
padding-left: 60rpx;
|
||
font-size: 30rpx;
|
||
line-height: 40rpx;
|
||
color: #666666;
|
||
|
||
&:before {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
z-index: 9;
|
||
content: '';
|
||
transform: translateY(-50%);
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
padding: 10rpx;
|
||
border: 1px solid #f2f2f2;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
background-clip: content-box;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.login-role .active {
|
||
color: #A92924;
|
||
|
||
&:before {
|
||
border-color: #A92924;
|
||
background-color: #A92924;
|
||
}
|
||
}
|
||
|
||
.fg {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
</style>
|