417 lines
10 KiB
Vue
417 lines
10 KiB
Vue
<template>
|
||
<view class="register-container">
|
||
<!-- 表单内容 -->
|
||
<view class="form-content">
|
||
<!-- 所属单位 -->
|
||
<view class="form-item">
|
||
<text class="item-label">所属单位</text>
|
||
<input class="item-input" type="text" placeholder="区农委办" disabled/>
|
||
</view>
|
||
|
||
<!-- 用户姓名 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">用户姓名</text>
|
||
<input class="item-input" type="text" placeholder="请输入" v-model="employeeInfo.userName"/>
|
||
</view>
|
||
|
||
<!-- 性别 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">性别</text>
|
||
<picker class="item-input" @change="bindPickerChange" :range="array"
|
||
v-model="employeeInfo.gender">
|
||
<view class="picker-content">{{ array[index] }}</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 证件号 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">证件号</text>
|
||
<input class="item-input" type="text" placeholder="请输入" v-model="employeeInfo.idCard"
|
||
@blur="validateIdCard"/>
|
||
</view>
|
||
|
||
<!-- 联系电话 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">联系电话</text>
|
||
<input class="item-input" type="number" placeholder="请输入" v-model="employeeInfo.phone"/>
|
||
</view>
|
||
|
||
<!-- <!– 验证码 –>-->
|
||
<!-- <view class="form-item">-->
|
||
<!-- <text class="item-label required">验证码</text>-->
|
||
<!-- <view class="code-input-wrapper">-->
|
||
<!-- <input class="item-input code-input" type="number" placeholder="请输入"/>-->
|
||
<!-- <button class="get-code-btn">获取验证码</button>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
|
||
<!-- 登录密码 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">登录密码</text>
|
||
<input class="item-input" type="password" placeholder="请输入" v-model="employeeInfo.password"
|
||
@blur="validatePassword"/>
|
||
</view>
|
||
|
||
<!-- 确认密码 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">确认密码</text>
|
||
<input class="item-input" type="password" placeholder="请输入" v-model="rePassword" @blur="validatePassword"/>
|
||
</view>
|
||
|
||
<!-- 密码提示 -->
|
||
<view class="form-tip password-tip">
|
||
密码至少包含8~20位大写字母、小写字母、数字和特殊字符 (!@$%^&*$%&+&*=\[]?)其中的任意一种
|
||
</view>
|
||
|
||
<!-- 人脸照片 - 独立表单项 -->
|
||
|
||
<view class="form-item face-upload-item">
|
||
<text class="item-label">人脸照片</text>
|
||
<view class="face-upload-container">
|
||
<view class="upload-wrapper">
|
||
<button class="upload-btn" @click="chooseImage">+</button>
|
||
<view class="image-preview" v-if="employeeInfo.img">
|
||
<image :src="employeeInfo.img" mode="aspectFill" class="preview-image"></image>
|
||
<view class="delete-btn" @click="deleteImage">×</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-tip upload-tip">
|
||
请上传正脸并不超过5MB的jpg,jpeg,png,gif,webp格式文件
|
||
</view>
|
||
|
||
<!-- 邮箱和车牌号码 -->
|
||
<view class="form-item">
|
||
<text class="item-label">邮箱</text>
|
||
<input class="item-input" type="text" placeholder="请输入" v-model="employeeInfo.email"/>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="item-label">车牌号码</text>
|
||
<input class="item-input" type="text" placeholder="请输入" v-model="employeeInfo.carNumber"/>
|
||
</view>
|
||
</view>
|
||
<!-- 提交按钮 -->
|
||
<button class="submit-btn" @click="submitForm">提交</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {uploadFiles} from "../../../../common/upload";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
array: ['男', '女'],
|
||
index: 0,
|
||
employeeInfo: {
|
||
userName: '',
|
||
gender: 1,
|
||
idCard: '',
|
||
phone: '',
|
||
password: '',
|
||
img: '',
|
||
unitId: '',
|
||
email:'',
|
||
carNumber:''
|
||
},
|
||
rePassword: '',
|
||
passwordError: '', // 用于显示密码错误信息
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.unitId) {
|
||
const unitId = JSON.parse(decodeURIComponent(options.unitId));
|
||
this.employeeInfo.unitId = unitId;
|
||
}
|
||
},
|
||
methods: {
|
||
bindPickerChange: function (e) {
|
||
|
||
this.employeeInfo.gender = e.detail.value + 1
|
||
console.log('picker发送选择改变，携带值为', this.employeeInfo.gender)
|
||
},
|
||
// 选择图片
|
||
chooseImage() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: async (res) => {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
this.employeeInfo.img = tempFilePaths[0];
|
||
console.log(tempFilePaths);
|
||
// 图片上传到服务器的逻辑
|
||
const result = await uploadFiles({
|
||
files: tempFilePaths,
|
||
url: this.vuex_config.baseUrl + '/resource/oss/upload',
|
||
name: 'file',
|
||
vm: this // 关键：用于注入 token 等
|
||
});
|
||
const allSuccess = result.every(item => item.code == 200);
|
||
if (!allSuccess) {
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 删除图片
|
||
deleteImage() {
|
||
this.employeeInfo.img = '';
|
||
}, // 提交表单
|
||
submitForm() {
|
||
//密码对比
|
||
if (!this.validatePassword()) {
|
||
uni.showToast({
|
||
title: this.passwordError,
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
//身份证验证
|
||
if (!this.validateIdCard()) {
|
||
uni.showToast({
|
||
title: "身份证格式不正确",
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.$u.api.unit.addEmployee(this.employeeInfo).then(res => {
|
||
if (res.code == "200") {
|
||
// 提交逻辑
|
||
console.log('提交数据:', this.employeeInfo);
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 密码验证方法
|
||
validatePassword() {
|
||
// 密码正则表达式：8-20位，包含大小写字母、数字和特殊字符
|
||
const passwordRegex = /^(?=.*[a-zA-Z\d!@$%^&*$%&+&*=\[\]?])[a-zA-Z\d!@$%^&*$%&+&*=\[\]?]{8,20}$/;
|
||
|
||
// 验证密码格式
|
||
if (!passwordRegex.test(this.employeeInfo.password)) {
|
||
this.passwordError = '密码必须包含8-20位大小写字母、数字和特殊字符';
|
||
return false;
|
||
} else {
|
||
this.passwordError = '';
|
||
}
|
||
|
||
// 验证两次密码是否一致
|
||
if (this.employeeInfo.password !== this.rePassword) {
|
||
this.passwordError = '两次输入的密码不一致';
|
||
return false;
|
||
} else {
|
||
this.passwordError = '';
|
||
}
|
||
|
||
return true;
|
||
},
|
||
|
||
validateIdCard() {
|
||
const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
|
||
if (!idCardRegex.test(this.employeeInfo.idCard)) {
|
||
uni.showToast({title: '身份证格式错误', icon: 'none'});
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.register-container {
|
||
padding: 20px 15px;
|
||
background-color: #f7f7f7;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 表单内容 */
|
||
.form-content {
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding: 0;
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 表单项 - 只有上下边框 */
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
border-top: 1px solid #dcdfe6;
|
||
border-bottom: 1px solid #dcdfe6;
|
||
padding: 10px 15px;
|
||
margin: 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* 提示信息样式 - 独占一行灰色背景 */
|
||
.form-tip {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 10px 15px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
background-color: #f5f5f5;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.upload-tip {
|
||
margin-top: -1px; /* 消除与上方边框的重叠 */
|
||
}
|
||
|
||
/* 表单项标签 */
|
||
.item-label {
|
||
width: 80px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
text-align: left; /* 确保标签左对齐 */
|
||
}
|
||
|
||
/* 必填项标记 */
|
||
.item-label.required::before {
|
||
content: "*";
|
||
color: #f56c6c;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
/* 输入框样式 */
|
||
.item-input {
|
||
flex: 1;
|
||
height: 40px;
|
||
border: none;
|
||
padding: 0 10px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
background: transparent;
|
||
text-align: right;
|
||
}
|
||
|
||
/* 性别选择器 */
|
||
.picker-content {
|
||
text-align: right;
|
||
color: #333; /* 修改为与输入框一致的颜色 */
|
||
line-height: 40px; /* 与输入框高度匹配 */
|
||
}
|
||
|
||
/* 验证码输入区域 */
|
||
.code-input-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.code-input {
|
||
flex: 1;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.get-code-btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 12px;
|
||
color: #409eff;
|
||
background-color: #ecf5ff;
|
||
border: 1px solid #b3d8ff;
|
||
border-radius: 4px;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 提交按钮 */
|
||
.submit-btn {
|
||
width: 100%;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
background-color: #409eff;
|
||
border-radius: 4px;
|
||
border: none;
|
||
}
|
||
|
||
.upload-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start; /* 左对齐 */
|
||
flex: 1;
|
||
}
|
||
|
||
|
||
.face-upload-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.face-upload-container {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.upload-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 60px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
font-size: 30px;
|
||
color: #409eff;
|
||
background-color: #ecf5ff;
|
||
border: 1px dashed #b3d8ff;
|
||
border-radius: 4px;
|
||
margin-right: 10px;
|
||
padding: 0;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 图片预览样式 */
|
||
.image-preview {
|
||
position: relative;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.preview-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.delete-btn {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
}
|
||
|
||
|
||
</style> |