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

<template>
  <view class="resume-container">
    <!-- 导航栏 -->
    <navBar title="近期工作经验" color="#000" />

    <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
            v-else
              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 = 1">
              <image
                v-if="formData.gender === 1"
                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 = 2">
              <image
                v-if="formData.gender === 2"
                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>
          <u-input
            placeholder="请输入联系方式"
            v-model="formData.phone"
            :border="false"
            class="form-input"
          ></u-input>
        </view>

        <!-- 出生年月 -->
        <view class="form-item required">
          <view class="form-label">出生年月</view>
          <view @click="pickerShow" class="form-input-time">
            <text>{{
              formData.birthDate ? formData.birthDate : "请选择出生年月日"
            }}</text>
            <image src="@/static/images/jobApplicant/rili.svg" mode="scaleToFill" />
          </view>
        </view>

        <!-- 求职状态 -->
        <view class="form-item required">
          <view class="form-label">求职状态</view>
          <view @click.stop="showJobStatus" class="form-input-time">
            <text>{{ statusList[formData.jobStatus].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 
              @click="goWorkProgress"
                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="right-content">
            <view class="job-content-txt" v-for="it in exp.workExpDetails">
              <view class="exp-header">
                <view class="exp-position">
                  <view class="position">{{ it.position }}</view>
                  <view class="department">{{ it.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.companyName }}</view>
                <view class="yuan">·</view>
                <view class="duration">{{ it.startTime }} - {{ it.endTime }}</view>
              </view>
              <view class="exp-content">
                <view class="content-label">{{it.workContent}}</view>
              </view>
              <view class="exp-content">
                <view class="skill-tags">
					<view class="tag" v-for="skill in it.skills">{{skill}}</view>
				</view>
              </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="(item, index) in eduList"
          :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">{{item.school}}</view>
                </view>
              </view>
              <view class="exp-company">
                <view class="company">{{item.degree}}</view>
                <view class="yuan">·</view>
                <view class="duration">{{item.profession}}</view>
                <view class="yuan">·</view>
                <view class="duration">{{new Date(item.startTime).getFullYear()}} - {{new Date(item.endTime).getFullYear()}}</view>
              </view>
              <view class="exp-content">
                <view class="content-label">{{item.detail}}</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">
			<textarea
			  placeholder="请输入个人优势"
			  v-model="formData.advantages"
			  class=""
			></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
      v-model="showBirthDatePicker"
      :columns="dateColumns"
      keyName="label"
      @confirm="confirmBirthDate"
      @cancel="showBirthDatePicker = false"
    ></u-picker>
    <u-action-sheet :list="statusList" v-model="showStatus" @click="confirmStatus"></u-action-sheet>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
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 {
      show: false,
      showBirthDatePicker: false,
      dateColumns: [years, months, days],
      statusList: [
					{
						value: '0',
						text: '离职-随时到岗'
					},
					{
						value: '1',
						text: '在职-月内到岗',
					
					},
					{
						value: '2',
						text: '在职-考虑机会',
						
					},
					{
						value: '3',
						text: '在职-暂不考虑',
			
					}
				],
      showStatus: false,
      formData: {
		avatar:"",
        name: "",
        gender: 1,
		jobStatus:0,
		phone:'',
        birthDate: "",
        advantages: "",
		ifExp:0
      },
      workExperiences: [
        {
          companyName: "公司名称",
		  workExpDetails:[{
			  department: "部门",
			  position: "职位名称",
			  startTime: "就职时间",
			  endTime: "离职时间",
			  workContent: "请填写简历工作内容",
			  skills: ["请填写面试技能要求"],
			  }
		  ]
        },
      ],
	  eduList:[{
			  school: "学校时间",
			  profession: "专业",
			  startTime: "2012-09-1",
			  endTime: "2016-6-10",
			  detail: "请填写您的教育经历",
			  degree: "学历",
			  }
		  ]
    };
  },
    components: {
    navBar,
  },
  onLoad(){
	this.getData()
	var that=this
	uni.$on('updateResume',()=>{
		that.getData()
	})  
  },
  methods: {
	  getData(){
	  	var that=this
	  	this.$Request.getT("/app/userFirst/getUserResumes", {}).then((res) => {
	  	  if (res.code == 0) { 
	  		  res.data.workExps.forEach(function(item){
	  		  	item.type=JSON.parse(item.type)
	  			item.workExpDetails=[]
	  			res.data.workExpList.forEach(function(it){
	  				it.skills=JSON.parse(it.skills)
	  				it.startTime=it.startTime.slice(0, 7);
	  				if(that.$queue.isCurrentMonth(new Date(it.endTime)))
	  					it.endTime='至今'
	  				else
	  					it.endTime=	it.endTime.slice(0, 7);
	  				if(it.workExpId==item.workExpId)
	  					item.workExpDetails.push(it)
	  			})
	  		  })
			  if(res.data.workExps.length>0)
	  		  that.workExperiences=res.data.workExps
			  if(res.data.eduList.length>0)
			  that.eduList=res.data.eduList
			  that.formData.ifExp=res.data.resumeList.ifExp
	  	  } else {
	  	    uni.showToast({
	  	      title: res.msg,
	  	      icon: "none",
	  	    });
	  	  }
	  	});
	  },
    showJobStatus() {
      this.showStatus = true;
    },
    pickerShow() {
      this.showBirthDatePicker = true;
    },
    confirmStatus(e) {
      this.showStatus = false;
      this.formData.jobStatus=e
    },
    goWorkProgress(){
      uni.navigateTo({ url: '/pages/my/workExperience' })
    },
    // 选择头像
    chooseAvatar() {
		var that=this
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
		    that.$queue.uploadFile(res.tempFilePaths[0],function(path){
		      if(path)
		    	that.formData.avatar = path;
		    })
        },
      });
    },

    // 确认出生日期
    confirmBirthDate(e) {
      const { year, month, day } = e;
      this.formData.birthDate = `${year}-${month}-${day}`;
      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",
        });
      }
    },

    // 提交简历
    submitResume() {
		var that=this
      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;
      }
		let data={
			avatar:this.formData.avatar,
			userName:this.formData.name,
			sex:this.formData.gender,
			phone:this.formData.phone
		}
      uni.showLoading({ title: "提交中..." });
	  this.$Request.postJson("/app/user/updateUser", data).then((res) => {
		  uni.hideLoading();
	    if (res.code == 0) {
	        that.setResume()
	    } else {
	      uni.showToast({
	        title: res.msg,
	        icon: "none",
	      });
	    }
	  });
    },
	setResume() {
		let data={
			birthday:this.formData.birthDate,
			resumesStatus:this.formData.jobStatus,
			adv:this.formData.advantages,
			ifExp:this.formData.ifExp,
		}
	  this.$Request.postJson("/app/userFirst/regist", data).then((res) => {
	    if (res.code == 0) {
	        // 实际开发中可以在这里添加跳转逻辑
			uni.showToast({ title: "提交成功", icon: "none" });
			  uni.setStorageSync("firstLogin", true);
			  // 实际开发中可以在这里添加跳转逻辑
			setTimeout(() => {
			  uni.switchTab({ url: '/pages/index/index' })
			}, 1000);
	    } else {
	      uni.showToast({
	        title: res.msg,
	        icon: "none",
	      });
	    }
	  });
	}
  },
};
</script>

<style lang="scss" scoped>
.resume-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.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;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
}

/* 头像区域 */
.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;
	flex-shrink: 0;
    image {
      width: 64rpx;
      height: 64rpx;
    }
  }
  .right-content{
	  width: 100%;
  }
  .job-content-txt {
	margin-bottom: 20rpx;
  }
}
.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;
}
.skill-tags {
							display: flex;
							flex-wrap: wrap;
							gap: 8rpx;
                            margin-top: 12rpx;
							
							.tag {
								background: rgba(153, 153, 153, 0.1);
								border-radius: 12rpx;
								padding: 6rpx;
                                color: rgba(102, 102, 102, 1);
                                font-family: DM Sans;
                                font-size: 16rpx;
                                font-weight: 400;
                                letter-spacing: 0%;
                                text-align: left;
							}
						}
.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>