b2894lxlx/jjx-wap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20261008

Browse Source
This commit is contained in:
b2894lxlx
2026-10-08 18:34:09 +08:00
commit 2933904f4c
905 changed files with 112129 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/login/register.vue
+438
View File
@@ -0,0 +1,438 @@
<template> <!-- 注册 -->
<view class="wrap pos-r h-100 flex flex-col justify-start items-center" style="background-color: #AB0011">
<u-image :src="registerBgImage || '/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>
<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">
<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>
<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.password"
type="password"
placeholder="设置登录密码"
prefixIcon="lock"
prefixIconStyle="font-size: 26px;color: #909399"
></u--input>
</view>
<view class="tips mb-15 text-gray">6~20位的数字、字母组合</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="tips mb-15 text-gray">6~20位的数字、字母组合</view>
<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.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" :disabled="!hasRead">
<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>
</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>
<u-button :disabled="readCountDown > 0" type="primary" @click="showRule = false;hasRead = true">
确定{{ readCountDown > 0 ? `${readCountDown}秒` : '' }}
</u-button>
</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,
registerBgImage: '',
readCountDown: 10,
readInterval: null
}
},
onLoad() {
this.loadSiteConfig()
},
methods: {
async loadSiteConfig() {
try {
const {data = {}} = await vk.callFunction({
url: 'client/site_config/pub/detail',
loading: false
})
this.registerBgImage = data.registerH5BgImage || ''
} catch (e) {
this.registerBgImage = ''
}
},
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: 'register',
},
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)
}
});
},
handleSubmit() {
if (!this.checked.includes('agree')) {
this.$message({
message: '请先阅读并同意《金久信注册协议》',
type: 'warning'
})
} else {
if (this.testForm()) {
const {
mobile, // 手机号
smsCode, // 短信验证码4-8位
password, // 密码 6-20位
repassword, // 重复输入密码
inviteCode, // 邀请码
accountType,
company,
person
} = this.form1
vk.userCenter.loginBySms({
data: {
type: 'register',
mobile: mobile,
code: smsCode,
password,
inviteCode,
accountType,
company,
person
},
success: (data) => {
uni.reLaunch({
url: '/'
})
}
});
}
}
},
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('请先阅读并同意《金久信注册协议》')
}
}
},
}
</script>
<style lang="scss">
page {
background: #e8f5fe;
}
.login-img {
width: 100%;
height: 330rpx;
}
.layout-login {
margin: 20rpx 30rpx;
padding: 30rpx;
.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;
}
.xie {
font-size: 26rpx;
line-height: 40rpx;
color: blue;
}
}
.rule {
height: 90vh;
margin: 20rpx;
overflow-y: scroll;
}
</style>