YingXingAI/pages/my/personalResume/online.vue

<template>
  <view>
    <u-navbar :custom-back="goPageFn" title="在线简历"></u-navbar>
    <view class="base-box">
      <!-- 左侧头像 -->
      <view class="base-left">
        <u-avatar size="130" :src="$u.http.config.imgUrl + vuex_user.head"></u-avatar>
      </view>
      <!-- 右侧个人信息 -->
      <view class="base-right">
        <view class="base-item">
          <text class="base-name">{{ vuex_user.name }}</text>
          <text class="base-status">{{ baseMsg.startYear }}届</text>
        </view>
        <view class="base-item" v-if="workFieldName">
          {{ workFieldName }}</view
        >
        <view class="base-item">
          {{ baseMsg.educationStr }}-{{ baseMsg.college }}-{{ baseMsg.major }}
        </view>
        <view class="base-item"> 手机号:{{ vuex_user.phone }}</view>
      </view>
    </view>
    <!-- 线  -->
    <view style="height: 20rpx"></view>
    <!-- tabs -->
    <u-tabs-swiper
      ref="uTabs"
      :list="tabList"
      :current="tabsCurrent"
      :is-scroll="false"
      :active-item-style="{ color: '#3CB5FB', fontSize: '0.15rem' }"
      :bar-style="{ background: '#3CB5FB' }"
      @change="tabsChange"
    ></u-tabs-swiper>
    <!-- 教育经历 -->
    <template v-if="tabsCurrent === 0">
      <view class="school-item" v-for="(x, xIndex) in educationList" :key="xIndex">
        <!-- 学校logo -->
        <view class="school-logo">
          <u-avatar
            size="80"
            :src="$u.http.config.imgUrl + x.school.logo.slice(1)"
          ></u-avatar
        ></view>
        <view class="school-msg">
          <view class="school-name">{{ x.school.name }}</view>
          <view class="school-desc"
            >{{ x.startYear }}年入学 {{ x.major }} {{ x.educationStr }}</view
          >
        </view>
        <view class="school-time"> {{ x.startYear + "-" + x.endYear }} </view>
      </view>
     <!--  <u-empty
        v-if="!educationList.length"
        text="暂无数据"
        mode="list"
        style="margin-top: 100rpx"
      ></u-empty> -->
      <no-data v-if="!educationList.length" text="暂无数据" ></no-data
        >
    </template>
    <!-- 工作经历 -->
    <template v-if="tabsCurrent === 1">
      <view
        class="work-item"
        v-for="(x, xIndex) in workInfoList"
        :key="xIndex"
        @click="editWorkFn(x)"
      >
        <view class="work-msg">
          <text class="work-name">{{ x.corporateName }}</text>
          <text class="work-job">{{ x.corporatePosition }}</text>
          <view class="work-img">
            <image
              style="width: 20rpx; height: 25rpx; margin-left: 30rpx"
              src="/static/common/img/row_right.png"
            />
          </view>
        </view>
        <view class="work-date">
          {{ x.startTime.slice(0, 7).replaceAll("-", "年") + "月" }} 至
          {{ x.endTime.slice(0, 7).replaceAll("-", "年") + "月" }}
        </view>
        <view class="work-desc">{{ x.wordDesc || "-" }}</view>
      </view>
      <view style="padding-top: 100rpx">
      <no-data v-if="!workInfoList.length" text="暂无数据" ></no-data
        >
    </view>
    </template>
    <!-- 项目经历 -->
    <template v-if="tabsCurrent === 2">
      <view
        class="work-item"
        v-for="(x, xIndex) in projectInfoList"
        :key="xIndex"
        @click="editProFn(x)"
      >
        <view class="work-msg">
          <text class="work-name">{{ x.projectName }}</text>
          <text class="work-job">{{ x.projectPosition }}</text>
          <view class="work-img">
            <image
              style="width: 20rpx; height: 25rpx; margin-left: 30rpx"
              src="/static/common/img/row_right.png"
            />
          </view>
        </view>
        <view class="work-date">
          {{ x.startTime.slice(0, 7).replaceAll("-", "年") + "月" }} 至
          {{ x.endTime.slice(0, 7).replaceAll("-", "年") + "月" }}
        </view>
        <view class="work-desc">{{ x.projectDesc }}</view>
      </view>
      <view style="padding-top: 100rpx">
        <no-data v-if="!projectInfoList.length" text="暂无数据" ></no-data
      ></view>
    </template>
    <!-- 线  -->
    <view style="height: 200rpx"></view>
    <!-- 按钮 -->
    <view class="btn-box">
      <u-button
        v-if="tabsCurrent === 0"
        style="width: 80%"
        shape="circle"
        type="primary"
        @click="addEduFn"
        >添加教育经历</u-button
      >
      <u-button
        v-if="tabsCurrent === 1"
        style="width: 80%"
        shape="circle"
        type="primary"
        @click="addWorkFn"
        >添加工作经历</u-button
      >
      <u-button
        v-if="tabsCurrent === 2"
        style="width: 80%;"
        shape="circle"
        type="primary"
        @click="addProFn"
        >添加项目经历</u-button
      >
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import NoData from '@/components/NoData.vue';
export default {
  components:{
    NoData
  },
  data() {
    return {
      tabsCurrent: 0,
      tabList: [
        {
          name: "教育经历",
        },
        {
          name: "工作经历",
        },
        {
          name: "项目经历",
        },
      ],
      baseMsg: {
        id: "00dea3ba-dadb-4403-bf10-17c4b9682c94",
        logo: "/upload/20230223/1677116584712.jpg",
        school: "南昌理工学院",
        certifyStatus: 1,
        major: "计算机科学与技术",
        college: "计算机信息工程学院",
        startYear: "2025",
        endYear: "2029",
        educationStr: "本科",
        isSelected: true,
      },
      // 教育经历
      educationList: [],
      // 工作经历
      workInfoList: [],
      // 项目经历
      projectInfoList: [],
      queryParams: {
        type: 0,
      },
      // 获取个人职业
      workFieldName:'',
    };
  },
  onLoad(e) {
    // Object.assign(this.queryParams, e);
    // this.tabsCurrent = Number(this.queryParams.type);
  },
  onShow() {
    this.getListFn();
    this.getSchoolFn();
    // 获取个人职业
    this.getWorkNameFn();
  },
  methods: {
    async getWorkNameFn(){
      const res = await this.$u.apiList.GetWorkFile();
      console.log(res,'res--职业列表');
      this.workFieldName = res.find(x=>x.id === this.vuex_user.workFieldId)?.workFieldName;
    },
    goPageFn() {
      uni.switchTab({
        url: "/pages/my/my/my",
      });
    },
    // 获取教育经历
    async getSchoolFn() {
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.MyEducations(req);
      console.log(res, "res--");
      const findRow = res.find((x) => x.isSelected === true);
      if (!findRow) {
        /* uni.showToast({
          title: "未查询到当前教育经历",
          icon: "none",
        }); */
        this.$refs.uToast.show({
          title: "未查询到当前教育经历",
          type: "error",
        });
        return;
      }
      Object.assign(this.baseMsg, findRow);
      this.baseMsg.name = this.vuex_user.name;
      console.log(findRow, "findRow--");
    },
    tabsChange(i) {
      // console.log(i, "i");
      if (this.tabsCurrent !== i) {
        this.tabsCurrent = i;
        this.getListFn();
      }
    },
    // 获取教育经历
    async getListFn() {
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.ResumeUserApi(req);
      console.log(res, "res--");
      this.educationList = res.educationList;
      this.workInfoList = res.workInfoList;
      this.projectInfoList = res.projectInfoList;
    },
    //#region 教育经历相关
    // 添加教育经历
    addEduFn() {
      this.$u.route({
        url: "pages/my/AddEducation/AddEducation",
      });
    },
    //#endregion
    //#region 工作经历相关
    // 获取工作经历
    getWorkFn() {},
    // 添加工作经历
    addWorkFn() {
      uni.navigateTo({
        url: "/pages/my/personalResume/workPage?type=add",
      });
    },
    // 编辑工作经历
    editWorkFn(row) {
      localStorage.setItem("workRow", JSON.stringify(row));
      uni.navigateTo({
        url: `/pages/my/personalResume/workPage?type=edit&id=${row.id}`,
      });
    },
    //#endregion
    //#region 项目经历相关
    // 获取项目经历
    getProFn() {},
    // 添加项目经历
    addProFn() {
      uni.navigateTo({
        url: "/pages/my/personalResume/proPage?type=add",
      });
    },
    // 编辑项目经历
    editProFn(row) {
      localStorage.setItem("workRow", JSON.stringify(row));
      uni.navigateTo({
        url: "/pages/my/personalResume/proPage?type=edit&id=" + row.id,
      });
    },
    //#endregion
  },
  computed: {
    workFieldName() {
      // return this.vuex_user?.workField?.workFieldName;
    },
  }
};
</script>

<style lang="scss" scoped>
.base-box {
  display: flex;
  min-height: 300rpx;
  background-color: white;
  padding-top: 20rpx;
  .base-left {
    width: 150rpx;
    // border: 1px solid red;
    display: flex;
    justify-content: center;
  }
  .base-right {
    flex: 1;
    // border: 1px solid blue;
    padding-left: 20rpx;
    .base-item {
      line-height: 60rpx;
      color: rgba(0,0,0,0.4);
      .base-name {
        font-size: 30rpx;
        color: black;
      }
      .base-status {
        margin-left: 20rpx;
        background-color: rgba(54, 110, 244,0.1);
        color: #3db5fb;
        padding:5rpx 15rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
      }
    }
  }
}
// 教育经历
.school-item {
  border: 1px solid #f6f7fa;
  background-color: white;
  display: flex;
  padding-left: 30rpx;
  padding-right: 30rpx;
  height: 148rpx;
  align-items: center;
  .school-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
  }
  .school-msg {
    flex: 1;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    padding-left: 20rpx;
    .school-name {
      font-size: 32rpx;
      color: black;
    }
    .school-desc {
      font-size: 24rpx;
      color:#999999;
      margin-top: 20rpx;
    }
  }
  .school-time {
    padding-bottom: 40rpx;
    font-size: 24rpx;
    color:#999999;
    // border: 1px solid blue;
  }
}
// 工作经历
.work-item {
  background-color: white;
  padding: 30rpx;
  border: 1px solid #f6f7fa;
  .work-msg {
    display: flex;
    align-items: center;
    .work-name {
      font-size: 32rpx;
      color: black;
      // border: 1px solid green;
      width: 440rpx;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    .work-job {
      // border: 1px solid blue;
      color: #999999;
      width: 200rpx;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    .work-img {
      // border: 1px solid yellow;
    }
  }
  .work-date {
    color: #999999;
    margin-top: 20rpx;
  }
  .work-desc {
    color: #666666;
    margin-top: 15rpx;
    word-break: break-all;
    display: -webkit-box;
  -webkit-line-clamp: 5; /* 限制在 5 行 */
  -webkit-box-orient: vertical;
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  }
}
// 按钮
.btn-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 150rpx;
  border-top: 1px solid #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
</style>