365 lines
7.9 KiB
Vue
365 lines
7.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 加一个自定义导航栏 -->
|
|
|
|
|
|
<view class="header">
|
|
<!-- <image src="/static/index/index_bg.png"></image> -->
|
|
<cu-custom :isBack="true">
|
|
<view slot="backText">返回</view>
|
|
<view slot="content">注册新成员账号</view>
|
|
</cu-custom>
|
|
</view>
|
|
<!--
|
|
<view class="list">
|
|
<view class="list-call">
|
|
<image class="img" src="/static/index/phone.png"></image>
|
|
<input class="sl-input" v-model="phone" type="number" maxlength="11" placeholder="手机号" />
|
|
</view>
|
|
<view class="list-call">
|
|
<image class="img" src="/static/index/lock.png"></image>
|
|
<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="登录密码" :password="!showPassword" />
|
|
<text class="eye-icon" :class="{'eye-active': showPassword}" @tap="togglePassword"></text>
|
|
</view>
|
|
<view class="list-call">
|
|
<text class="code-icon"></text>
|
|
<input class="sl-input" v-model="code" type="number" maxlength="4" placeholder="验证码" />
|
|
<view class="yzm" :class="{ yzms: second > 0 }" @tap="getCode">{{codeText}}</view>
|
|
</view>
|
|
<view class="list-call">
|
|
<text class="invite-icon"></text>
|
|
<input class="sl-input" v-model="invitation" type="text" maxlength="12" placeholder="邀请码" />
|
|
</view>
|
|
</view> -->
|
|
<view class="padding solid radius margin">
|
|
<up-form labelPosition="left" :model="state.model1" :rules="state.rules" ref="form1">
|
|
<up-form-item label="加入企业" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
|
|
<up-input border="none" placeholder="请输入企业名称" inputAlign="right"></up-input>
|
|
</up-form-item>
|
|
<up-form-item :required="true" label="真实姓名" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
|
|
<up-input border="none" placeholder="请输入" inputAlign="right"></up-input>
|
|
</up-form-item>
|
|
<up-form-item :required="true" label="选择分组/部门" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="120">
|
|
<up-input border="none" placeholder="选择" inputAlign="right" ></up-input>
|
|
</up-form-item>
|
|
<up-form-item :required="true" label="手机号码" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
|
|
<up-input border="none" placeholder="请输入手机号码" inputAlign="right"></up-input>
|
|
</up-form-item>
|
|
<up-form-item :required="true" label="密码" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
|
|
<up-input border="none" placeholder="请输入密码" inputAlign="right"></up-input>
|
|
</up-form-item>
|
|
<up-form-item :required="true" label="确认密码" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
|
|
<up-input border="none" placeholder="请输入密码" inputAlign="right"></up-input>
|
|
</up-form-item>
|
|
</up-form>
|
|
<view class="">
|
|
<view class="button-login" hover-class="button-hover" @tap="handleRegister">
|
|
<text>申请加入</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onUnmounted,reactive } from 'vue';
|
|
|
|
// 响应式数据
|
|
const phone = ref('');
|
|
const password = ref('');
|
|
const code = ref('');
|
|
const invitation = ref('');
|
|
const second = ref(0);
|
|
const showPassword = ref(false);
|
|
let timer = null;
|
|
|
|
// 使用 reactive 创建响应式状态
|
|
const state = reactive({
|
|
showSex: false,
|
|
model1: {
|
|
userInfo: {
|
|
name: 'uview-plus UI',
|
|
sex: '',
|
|
},
|
|
},
|
|
rules: {
|
|
'userInfo.name': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写姓名',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
},
|
|
});
|
|
// 计算属性
|
|
const codeText = computed(() => {
|
|
if (second.value === 0) {
|
|
return '获取验证码';
|
|
} else {
|
|
const secondStr = second.value < 10 ? `0${second.value}` : second.value;
|
|
return `重新获取${secondStr}`;
|
|
}
|
|
});
|
|
|
|
// 方法定义
|
|
const togglePassword = () => {
|
|
showPassword.value = !showPassword.value;
|
|
};
|
|
|
|
const getCode = () => {
|
|
if (phone.value.length !== 11) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '手机号不正确'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (second.value > 0) {
|
|
return;
|
|
}
|
|
|
|
second.value = 60;
|
|
startCountdown();
|
|
|
|
// 发送验证码请求
|
|
uni.request({
|
|
url: 'http://example.com/api/code',
|
|
data: {
|
|
phone: phone.value,
|
|
type: 'reg'
|
|
},
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
success: (res) => {
|
|
if (res.data.code != 200) {
|
|
uni.showToast({
|
|
title: res.data.msg || '获取验证码失败',
|
|
icon: 'none'
|
|
});
|
|
second.value = 0;
|
|
clearCountdown();
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg || '验证码已发送'
|
|
});
|
|
}
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: '网络请求失败',
|
|
icon: 'none'
|
|
});
|
|
second.value = 0;
|
|
clearCountdown();
|
|
}
|
|
});
|
|
};
|
|
|
|
const startCountdown = () => {
|
|
clearCountdown();
|
|
timer = setInterval(() => {
|
|
second.value--;
|
|
if (second.value === 0) {
|
|
clearCountdown();
|
|
}
|
|
}, 1000);
|
|
};
|
|
|
|
const clearCountdown = () => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
};
|
|
|
|
const handleRegister = () => {
|
|
if (phone.value.length !== 11) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '手机号不正确'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (password.value.length < 6) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '密码不正确'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (code.value.length !== 4) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '验证码不正确'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 注册请求
|
|
uni.request({
|
|
url: 'http://example.com/api/register',
|
|
data: {
|
|
phone: phone.value,
|
|
password: password.value,
|
|
code: code.value,
|
|
invitation: invitation.value
|
|
},
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
success: (res) => {
|
|
if (res.data.code != 200) {
|
|
uni.showToast({
|
|
title: res.data.msg || '注册失败',
|
|
icon: 'none'
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg || '注册成功'
|
|
});
|
|
|
|
// 延时返回登录页
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
}
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: '网络请求失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 组件卸载时清除定时器
|
|
onUnmounted(() => {
|
|
clearCountdown();
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.header {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 50rpx;
|
|
padding-left: 70rpx;
|
|
padding-right: 70rpx;
|
|
|
|
.list-call {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
color: #333333;
|
|
background: #F5F7FB;
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid #F5F7FB;
|
|
margin-top: 30rpx;
|
|
padding: 0 30rpx;
|
|
|
|
.img {
|
|
width: 30rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
.sl-input {
|
|
flex: 1;
|
|
text-align: left;
|
|
font-size: 32rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.eye-icon {
|
|
font-size: 36rpx;
|
|
color: #999;
|
|
&::before {
|
|
content: '\e69c'; /* 闭眼图标的unicode */
|
|
}
|
|
|
|
&.eye-active {
|
|
color: #3D83F6;
|
|
&::before {
|
|
content: '\e69d'; /* 睁眼图标的unicode */
|
|
}
|
|
}
|
|
}
|
|
|
|
.yzm {
|
|
width: 200rpx;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
color: #3D83F6;
|
|
&.yzms {
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.code-icon::before {
|
|
content: '\e682'; /* 验证码图标的unicode */
|
|
color: #999;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.invite-icon::before {
|
|
content: '\e683'; /* 邀请码图标的unicode */
|
|
color: #999;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
// .padding-lr {
|
|
// padding-left: 70rpx;
|
|
// padding-right: 70rpx;
|
|
// }
|
|
|
|
.button-login {
|
|
color: #FFFFFF;
|
|
font-size: 34rpx;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background: linear-gradient(90deg, #3E95F1 0%, #4269F5 100%);
|
|
border-radius: 50rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 130rpx;
|
|
}
|
|
|
|
.button-hover {
|
|
opacity: 0.8;
|
|
}
|
|
::v-deep .up-input__input {
|
|
color: #3D83F6;
|
|
}
|
|
</style> |