/**
* 注册页面
*/
<template>
<view class="register">
<p class="title">请填写以下信息</p>
<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
<u-form-item label="员工号" prop="number" labelWidth="80" class="form-item">
<u--input v-model="form.number" placeholder="请输入员工号"></u--input>
</u-form-item>
<u-form-item label="姓名" prop="name" labelWidth="80" class="form-item">
<u--input v-model="form.name" placeholder="请输入员姓名"></u--input>
</u-form-item>
<u-form-item label="员工类型" prop="type" :borderBottom="false" class="form-item" labelWidth="80">
<u-button @click="typeLx" v-model="form.type" border="none">{{form.type || '点击选择'}}</u-button>
</u-form-item>
<u-form-item label="手机号码" prop="phone" labelWidth="80" class="form-item">
<u-button v-model="form.phone"
@click="getUserInfo"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
border="none">
{{form.phone || '获取手机号'}}
</u-button>
</u-form-item>
</u--form>
<u-button type="primary" text="注册" @click="registerGo"></u-button>
<view @click="goRegister" class="link-login">已有账号，点击登录</view>
<u-action-sheet :show="show" :actions="list" title="请选择员工类型" description="只能单选" @close="show = false"
@select="sexSelect">
</u-action-sheet>
<u-popup :show="sqShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
<view class="popup">
<view class="popup-title"> 微信授权</view>
<view class="popup-content">
申请获取你微信绑定的手机号{{form.phone}}？
</view>
<view class="popup-buttom">
<view class="popup-jujue" @click="reject">
拒绝
</view>
<view class="popup-yunxu" @click="permit">
允许
</view>
</view>
</view>
</u-popup>
<u-popup :show="jujueShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
<view class="popup">
<view class="popup-all-title">
拒绝将无法进行注册!
</view>
<view class="popup-buttom">
<view class="popup-jujue" @click="rejectAll">
仍要拒绝
</view>
<view class="popup-yunxu" @click="permit">
允许授权
</view>
</view>
</view>
</u-popup>
<u-popup :show="successShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
<view class="popup">
<view class="popup-all-title">
注册成功!
</view>
<view class="popup-login" @click="goRegister">
返回登录
</view>
</view>
</u-popup>
<u-popup :show="errorShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
<view class="popup">
<view class="popup-error-title">
注册失败！请重新填写信息或联系管理人员
</view>
<view class="popup-buttom">
<view class="popup-jujue popup-jujue-fanhui" @click="errorFh">
返回
</view>
<view class="popup-yunxu popup-jujue-queren" @click="errorQr">
确认
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
rules: {
name: [{
required: true,
message: '请填写姓名',
trigger: ['blur', 'change'],
}],
number: [{
required: true,
message: '请填写员工号',
trigger: ['blur', 'change'],
}],
password: [{
required: true,
message: '请填写密码',
trigger: ['blur', 'change']
},
{
pattern: /^[0-9a-zA-Z]*$/g,
transform(value) {
return String(value);
},
message: '只能包含字母或数字'
},
{
min: 8,
max: 15,
message: '长度在8-15个字符之间'
}
],
confirmPassword: [{
required: true,
message: '请填写确认密码',
trigger: ['blur', 'change'],
}]
},
form: {
number: '', //员工号
name: '', //姓名
type: '', //员工类型
phone: '', //电话
password: '', //密码
confirmPassword: '', //确认密码
},
tips: {
text: '请选择员工类型',
color: '#909399',
fontSize: 24
},
list: [{
name: '广播电视台员工'
},
{
name: '广播电视台员工'
},
{
name: '网络有限公司员工'
},
],
show: false,
sqShow: false,
jujueShow: false,
successShow: false,
errorShow: false,
code: ""
}
},
methods: {
//注册失败确认
errorQr() {
this.errorShow = false
},
//注册失败返回
errorFh() {
this.errorShow = false
},
//点击注册
registerGo() {
console.log(this.form)
this.errorShow = true
},
//允许获取
permit() {
this.sqShow = false
this.jujueShow = false
},
//拒绝获取
reject() {
this.sqShow = false
this.jujueShow = true
},
//任然要拒绝
rejectAll() {
this.jujueShow = false
},
open() {
},
typeLx() {
this.show = true
},
getPhoneNumber(e) {
console.log(e, '666')
},
//获取用户手机号
getUserInfo() {
this.sqShow = true
uni.getUserInfo({
provider: 'weixin',
success: (res) => {
console.log('getUserInfo', res);
},
});
},
//关闭授权获取手机号弹窗
close() {
this.sqShow = false
},
//选中员工类型
sexSelect(e) {
setTimeout(() => {
this.form.type = e.name
}, 30)
// this.$refs.form1.validateField('userInfo.sex')
},
//跳转登录页面
goRegister() {
this.successShow = false
wx.navigateTo({
url: '/pages/login/login'
})
},
}
}
</script>
<style lang="scss" scoped>
.register {
padding: 50rpx;
.title {
font-size: 42rpx;
font-weight: 500;
margin-bottom: 32rpx;
}
.form-item {
// white-space: nowrap;
width: 390rpx;
color: red;
}
.popup {
width: 700rpx;
height: 450rpx;
.popup-title {
text-align: center;
font-size: 36rpx;
margin: 35rpx;
}
.popup-content {
width: 70%;
margin-left: 135rpx;
line-height: 54rpx;
}
.popup-error-title {
margin-left: 36rpx;
margin-right: 36rpx;
margin-top: 80rpx;
font-size: 38rpx
}
.popup-login {
margin-left: 240rpx;
margin-top: 120rpx;
width: 180rpx;
height: 52rpx;
background-color: skyblue;
border-radius: 8rpx;
line-height: 52rpx;
border: #000 1px solid;
text-align: center;
color: #fff;
}
.popup-buttom {
padding: 70rpx;
margin-top: 72rpx;
display: flex;
justify-content: space-between;
}
.popup-jujue-fanhui {
border: none;
border-radius: 8rpx;
background-color: gray;
color: #fff;
}
.popup-jujue-queren {
border: none;
border-radius: 8rpx;
background-color: skyblue;
color: #fff;
}
.popup-buttom view {
width: 180rpx;
height: 56rpx;
text-align: center;
line-height: 56rpx;
border-radius: 6rpx;
border: 1px #000 solid;
}
.popup-all-title {
text-align: center;
font-size: 42rpx;
margin-top: 142rpx;
}
}
}
.link-login {
margin-top: 20rpx;
float: right;
color: blue;
}
</style>
