SmartParks_uniapp/pages/sys/workbench/unitManagement/employeeAdd.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>

      <!--      &lt;!&ndash; 验证码 &ndash;&gt;-->
      <!--      <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>