20261008
This commit is contained in:
@@ -0,0 +1,427 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user