yizhizan-h5/pages/my/jobApplicant/workRecord.vue

<template>
  <view class="resume-container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">近期工作经验</view>
    </view>

    <view class="resume-content">
      <!-- 头像上传区域 -->
      <view class="form-label">头像</view>
      <view class="avatar-section">
        <view class="avatar-upload" @click="chooseAvatar">
          <view class="avatar-preview">
            <image
              v-if="formData.avatar"
              :src="formData.avatar"
              class="avatar-image"
              mode="aspectFill"
            ></image>
            <image
              src="@/static/images/jobApplicant/touxiang.svg"
              mode="scaleToFill"
              class="user-img"
            />
          </view>
          <view class="upload-view">上传头像</view>
        </view>
      </view>

      <!-- 基本信息表单 -->
      <view class="form-section">
        <!-- 姓名 -->
        <view class="form-item required">
          <view class="form-label">姓名</view>
          <u-input
            placeholder="请输入姓名"
            v-model="formData.name"
            :border="false"
            class="form-input"
          ></u-input>
        </view>

        <!-- 性别 -->
        <view class="form-item required">
          <view class="form-label">性别</view>
          <view class="gender-select">
            <view class="gender-option" @click="formData.gender = 'male'">
              <image
                v-if="formData.gender === 'male'"
                src="/static/images/jobApplicant/radio-check.svg"
                mode="scaleToFill"
              />
              <image
                v-else
                src="/static/images/jobApplicant/radio.svg"
                mode="scaleToFill"
              />
              男</view
            >
            <view class="gender-option" @click="formData.gender = 'female'">
              <image
                v-if="formData.gender === 'female'"
                src="/static/images/jobApplicant/radio-check.svg"
                mode="scaleToFill"
              />
              <image
                v-else
                src="/static/images/jobApplicant/radio.svg"
                mode="scaleToFill"
              />
              女</view
            >
          </view>
        </view>

        <!-- 联系方式 -->
        <view class="form-item required">
          <view class="form-label">联系方式</view>
          <view class="phone-view">188******39</view>
        </view>

        <!-- 出生年月 -->
        <view class="form-item required">
          <view class="form-label">出生年月</view>
          <!-- formData.birthDate -->
          <view @click="showBirthDatePicker = true" class="form-input-time">
            <text>请输入出生年月</text>
            <image src="@/static/images/jobApplicant/rili.svg" mode="scaleToFill" />
          </view>
        </view>

        <!-- 求职状态 -->
        <view class="form-item required">
          <view class="form-label">求职状态</view>
          <!-- formData.birthDate -->
          <view @click="showBirthDatePicker = true" class="form-input-time">
            <text>离职&随时到岗</text>
            <image src="@/static/images/jobApplicant/icon-next.svg" mode="scaleToFill" />
          </view>
        </view>
      </view>

      <!-- 工作经历 -->
      <view class="section">
        <view class="section-header">
          <view class="form-item required">
            <view class="job-title">
              <view class="job-title-txt"
                >工作经历 <text class="job-txt">请填写专属聘用行业的工作经验</text></view
              >
              <image
                class="job-image"
                src="@/static/images/jobApplicant/edit.svg"
                mode="scaleToFill"
              />
            </view>
          </view>
        </view>

        <view
          class="experience-item"
          v-for="(exp, index) in workExperiences"
          :key="index"
        >
          <view class="job-content">
            <view class="job-icon">
              <image src="/static/images/jobApplicant/xuexiao.svg" mode="scaleToFill" />
            </view>
            <view class="job-content-txt">
              <view class="exp-header">
                <view class="exp-position">
                  <view class="position">{{ exp.position }}</view>
                  <view class="department">{{ exp.department }}</view>
                </view>
                <!-- <u-icon
                  name="close"
                  size="18"
                  color="#999"
                  @click="removeWorkExperience(index)"
                ></u-icon> -->
              </view>
              <view class="exp-company">
                <view class="company">{{ exp.company }}</view>
                <view class="yuan">·</view>
                <view class="duration">{{ exp.duration }}</view>
              </view>
              <view class="exp-content">
                <view class="content-label">请填写您的工作内容</view>
              </view>
              <view class="exp-content">
                <view class="content-label tag-box">请填写您的技能标签</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 教育经历 -->
      <view class="section">
        <view class="section-header">
          <view class="form-item required">
            <view class="job-title">
              <view class="job-title-txt">教育经历</view>
              <image
                class="job-image"
                src="@/static/images/jobApplicant/edit.svg"
                mode="scaleToFill"
              />
            </view>
          </view>
        </view>

        <view
          class="experience-item"
          v-for="(exp, index) in workExperiences"
          :key="index"
        >
          <view class="job-content">
            <view class="job-icon">
              <image src="/static/images/jobApplicant/bumen.svg" mode="scaleToFill" />
            </view>
            <view class="job-content-txt">
              <view class="exp-header">
                <view class="exp-position">
                  <view class="position">学校名称</view>
                </view>
              </view>
              <view class="exp-company">
                <view class="company">学历</view>
                <view class="yuan">·</view>
                <view class="duration">专业</view>
                <view class="yuan">·</view>
                <view class="duration">在校时间</view>
              </view>
              <view class="exp-content">
                <view class="content-label">请填写您的教育经历</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 个人优势 -->
      <view class="section">
        <view class="section-header">
          <view class="form-item required">
            <view class="job-title">
              <view class="job-title-txt">个人优势</view>
              <image
                class="job-image"
                src="@/static/images/jobApplicant/edit.svg"
                mode="scaleToFill"
              />
            </view>
          </view>
        </view>
        <view class="advantage-content">
          <view type="textarea" class="advantage-textarea">
            这是个人编辑的个人优势区域还是个人编辑的个人优势区域还是个人编辑的个人优势区域还是个人编辑的个人优势区域。展示三行
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="footer">
        <u-button
          type="primary"
          @click="submitResume"
          :customStyle="{
            height: '90rpx',
            fontSize: '32rpx',
            borderRadius: '45rpx',
            margin: '40rpx 0',
          }"
          >开启求职之旅</u-button
        >
      </view>
    </view>
    <u-picker
      :show="showBirthDatePicker"
      :columns="dateColumns"
      keyName="label"
      @confirm="confirmBirthDate"
      @cancel="showBirthDatePicker = false"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    // 生成日期选择器数据
    const currentYear = new Date().getFullYear();
    const years = [];
    const months = [];
    const days = [];

    for (let i = currentYear - 50; i <= currentYear; i++) {
      years.push({ label: i + "年", value: i });
    }

    for (let i = 1; i <= 12; i++) {
      months.push({ label: i + "月", value: i });
    }

    for (let i = 1; i <= 31; i++) {
      days.push({ label: i + "日", value: i });
    }

    return {
      avatarUrl: "",
      showBirthDatePicker: false,
      dateColumns: [years, months, days],
      formData: {
        name: "",
        gender: "male",
        birthDate: "",
        advantages: "",
      },
      workExperiences: [
        {
          position: "职位",
          department: "部门",
          company: "公司名称",
          duration: "就职时间",
          content: "请填写简历工作内容",
          skills: "请填写面试技能要求",
        },
      ],
      educationExperiences: [
        {
          school: "学校名称",
          degree: "学历",
          major: "专业",
          duration: "在职时间",
          content: "请填写简历或简历",
        },
      ],
    };
  },
  methods: {
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          this.avatarUrl = res.tempFilePaths[0];
        },
      });
    },

    // 确认出生日期
    confirmBirthDate(e) {
      const [year, month, day] = e.value;
      this.formData.birthDate = `${year.label}${month.label}${day.label}`;
      this.showBirthDatePicker = false;
    },

    // 添加工作经历
    addWorkExperience() {
      this.workExperiences.push({
        position: "职位",
        department: "部门",
        company: "公司名称",
        duration: "就职时间",
        content: "请填写简历工作内容",
        skills: "请填写面试技能要求",
      });
    },

    // 删除工作经历
    removeWorkExperience(index) {
      if (this.workExperiences.length > 1) {
        this.workExperiences.splice(index, 1);
      } else {
        uni.showToast({
          title: "至少保留一条工作经历",
          icon: "none",
        });
      }
    },

    // 添加教育经历
    addEducationExperience() {
      this.educationExperiences.push({
        school: "学校名称",
        degree: "学历",
        major: "专业",
        duration: "在职时间",
        content: "请填写简历或简历",
      });
    },

    // 删除教育经历
    removeEducationExperience(index) {
      if (this.educationExperiences.length > 1) {
        this.educationExperiences.splice(index, 1);
      } else {
        uni.showToast({
          title: "至少保留一条教育经历",
          icon: "none",
        });
      }
    },

    // 提交简历
    submitResume() {
      if (!this.formData.name) {
        uni.showToast({ title: "请输入姓名", icon: "none" });
        return;
      }
      if (!this.formData.gender) {
        uni.showToast({ title: "请选择性别", icon: "none" });
        return;
      }
      if (!this.formData.birthDate) {
        uni.showToast({ title: "请输入出生年月", icon: "none" });
        return;
      }

      uni.showLoading({ title: "提交中..." });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: "提交成功", icon: "success" });
        // 实际开发中可以在这里添加跳转逻辑
      }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
.resume-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.job-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.job-image {
  width: 48rpx;
  height: 48rpx;
}
.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000;
}

.resume-content {
  padding: 32rpx;
}

/* 头像区域 */
.avatar-section {
  display: flex;
}

.avatar-upload {
  display: flex;
  align-items: center;
}

.avatar-preview {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.upload-view {
  color: #016bf6;
  font-family: DM Sans;
  font-size: 20rpx;
  font-weight: 500;
  line-height: 48rpx;
}

.form-item {
  padding-bottom: 24rpx;
  box-sizing: border-box;
  .job-txt {
    color: #016bf6;
    font-family: DM Sans;
    font-size: 20rpx;
    margin-left: 16rpx;
  }
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  color: #1f2c37;
  font-family: DM Sans;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 44rpx;
  padding-top: 30rpx;
  padding-bottom: 27rpx;
  box-sizing: border-box;
}

.form-input {
  flex: 1;
  box-sizing: border-box;
  border: 2rpx solid #9ea1a8;
  border-radius: 100rpx;
  background: rgba(255, 255, 255, 1);
  padding: 0rpx 24rpx !important;
}
.form-input-time {
  flex: 1;
  box-sizing: border-box;
  border: 2rpx solid #e3e7ec;
  border-radius: 100rpx;
  background: rgba(255, 255, 255, 1);
  padding: 10rpx 24rpx;
  color: rgba(153, 153, 153, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  image {
    width: 48rpx;
    height: 48rpx;
  }
}
::v-deep .input-placeholder {
  color: rgba(153, 153, 153, 1) !important;
  font-family: DM Sans;
  font-size: 24rpx !important;
  font-weight: 500;
}
.user-img {
  width: 48rpx;
  height: 48rpx;
}
.required .form-label::before {
  content: "*";
  color: #fa3534;
  margin-right: 8rpx;
}

/* 性别选择 */
.gender-select {
  display: flex;
  flex: 1;
  gap: 40rpx;
}

.gender-option {
  display: flex;
  align-items: center;
  color: #171725;
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 48rpx;
  text-align: left;

  image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }
}

.phone-view,
.job-status {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}
.section {
  box-sizing: border-box;
  border: 2rpx solid #016bf6;
  border-radius: 24rpx;
  background: #fff;
  padding: 32rpx;
  box-sizing: border-box;
  margin-bottom: 30rpx;
}
.section-header {
  margin-bottom: 24rpx;
}

/* 经历项目 */
.experience-item {
  border-radius: 12rpx;
  padding: 24rpx;
  box-sizing: border-box;
}
.job-content {
  display: flex;
  gap: 42rpx;
  .job-icon {
    width: 96rpx;
    height: 96rpx;
    border-radius: 16rpx;
    background: rgba(246, 246, 246, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 64rpx;
      height: 64rpx;
    }
  }
  .job-content-txt {
  }
}
.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.exp-position {
  display: flex;
  align-items: center;
}

.position {
  color: #171725;
  font-family: DM Sans;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 44rpx;
  text-align: left;
}

.department {
  font-size: 24rpx;
  color: #999;
  margin-left: 16rpx;
}

.exp-company {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  color: #78828a;
  font-family: DM Sans;
  font-size: 16rpx;
  font-weight: 400;
  line-height: 40rpx;
  text-align: left;
  .yuan {
    padding: 0 16rpx;
    box-sizing: border-box;
    font-size: 40rpx;
  }
}
.exp-content {
  margin-bottom: 12rpx;
}

.exp-content:last-child {
  margin-bottom: 0;
}

.content-label {
  color: rgba(120, 130, 138, 1);
  font-family: DM Sans;
  font-size: 16rpx;
  font-weight: 400;
  line-height: 20rpx;
  text-align: left;
  margin-bottom: 10rpx;
}
.tag-box {
  border-radius: 8rpx;
  background: rgba(153, 153, 153, 0.1);
  padding: 8rpx;
  box-sizing: border-box;
}
.content-view {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

/* 教育经历 */
.education-item {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.edu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.edu-school {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.edu-info {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.edu-degree,
.edu-major,
.edu-duration {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
}

.edu-content {
  margin-top: 12rpx;
}
.add-view {
  font-size: 28rpx;
  margin-left: 12rpx;
}

.advantage-textarea {
  color: rgba(120, 130, 138, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  padding: 32rpx;
  padding-top: 0;
  box-sizing: border-box;
}

.footer {
  padding-bottom: 40rpx;
}
::v-deep .u-input {
  text-align: left !important;
}
</style>