Quellcode durchsuchen

feat:详细信息静态页面

jianghaili vor 2 Wochen
Ursprung
Commit
91269e8c35

+ 6 - 0
pages/my/jobApplicant/workProgress.vue

@@ -20,6 +20,7 @@
           >
           <u-button
             type="primary"
+            @click="goWorkRecord"
             :customStyle="{
               marginTop: '134rpx',
               height: '90rpx',
@@ -38,6 +39,11 @@ export default {
   data() {
     return {};
   },
+  methods: {
+    goWorkRecord(){
+        uni.navigateTo({ url: '/pages/my/jobApplicant/workRecord' })
+    }
+  },
 };
 </script>
 <style scoped lang="scss">

+ 732 - 0
pages/my/jobApplicant/workRecord.vue

@@ -0,0 +1,732 @@
+<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>

+ 4 - 0
static/images/jobApplicant/icon-next.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24.0166 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.016602" height="24.000000" opacity="0.5" fill="none">
+	<rect id="Icon - Next" width="24.000000" height="24.016939" x="0.000000" y="0.000000" fill="rgb(255,255,255)" fill-opacity="0" transform="matrix(0,1,-1,0,24.0166,0)" />
+	<path id="Vector" d="M1.06602 0.000242275C0.858221 -0.00433146 0.654156 0.0559506 0.4822 0.1728C0.310245 0.28965 0.178943 0.457292 0.10655 0.652269C0.0341566 0.847246 0.0242696 1.05992 0.0782628 1.26078C0.132256 1.46164 0.247446 1.6406 0.40782 1.77292L6.52697 7.01879L0.40782 12.2628C0.296882 12.3444 0.203973 12.448 0.134914 12.5672C0.0658542 12.6864 0.0221309 12.8186 0.00648163 12.9555C-0.00916767 13.0924 0.00359449 13.231 0.0439687 13.3627C0.084343 13.4944 0.151459 13.6164 0.241115 13.721C0.330771 13.8255 0.441035 13.9103 0.565001 13.9703C0.688968 14.0302 0.823967 14.0639 0.961543 14.0692C1.09912 14.0745 1.23631 14.0514 1.36452 14.0012C1.49274 13.951 1.60921 13.8749 1.70665 13.7775L8.71252 7.77909C8.82254 7.68513 8.91088 7.56852 8.97146 7.43709C9.03204 7.30566 9.06341 7.16261 9.06341 7.01787C9.06341 6.87313 9.03204 6.73008 8.97146 6.59865C8.91088 6.46722 8.82254 6.35049 8.71252 6.25654L1.70665 0.252327C1.52967 0.0950184 1.30267 0.00558464 1.06602 1.14283e-05L1.06602 0.000242275Z" fill="rgb(23,23,37)" fill-rule="evenodd" transform="matrix(0,1,-1,0,19.043,7.46826)" />
+</svg>

Datei-Diff unterdrückt, da er zu groß ist
+ 2 - 0
static/images/jobApplicant/radio-check.svg


+ 14 - 0
static/images/jobApplicant/radio.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.000000" height="15.000000" fill="none" customFrame="#000000">
+	<defs>
+		<clipPath id="clipPath_0">
+			<rect width="8.750000" height="8.750000" x="3.125000" y="3.125000" fill="rgb(255,255,255)" />
+		</clipPath>
+	</defs>
+	<rect id="check" width="15.000000" height="15.000000" x="0.000000" y="0.000000" />
+	<circle id="bg" cx="7.5" cy="7.5" r="7.5" fill="rgb(255,255,255)" />
+	<circle id="bg" cx="7.5" cy="7.5" r="7" stroke="rgb(0,0,0)" stroke-opacity="0.100000001" stroke-width="1" />
+	<g id="check" opacity="0" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
+		<rect id="check" width="8.750000" height="8.750000" x="3.125000" y="3.125000" opacity="0" />
+		<path id="Vector" d="M4.94824 7.50016L6.77116 9.32308L10.417 5.67725" fill-rule="evenodd" stroke="rgb(255,255,255)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
+	</g>
+</svg>

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.