qingdao-employment-service/packageA/pages/myResume/myResume.vue

<template>
  <AppLayout title="我的简历" title-color="#FFFFFF" back-gorund-color="#F4F4F4">
    <template #headerleft>
      <view class="btn">
        <image src="@/static/icon/back-white.png" @click="navBack"></image>
      </view>
    </template>
    <view v-if="userInfo.resumeOcrStatus && showNotice" class="notice-line" :class="userInfo.resumeOcrStatus?.includes('成功')?'green':'blue'">
      <image v-if="userInfo.resumeOcrStatus?.includes('成功')" class="icon" src="@/static/icon/notice-green.png" />
      <image v-else class="icon" src="@/static/icon/notice-blue.png" />
      <view class="text">{{userInfo.resumeOcrStatus}}</view>
      <image @click="closeNotice" v-if="userInfo.resumeOcrStatus?.includes('成功')" class="close" src="@/static/icon/close-green.png" />
      <image @click="closeNotice" v-else class="close" src="@/static/icon/close-blue.png" />
    </view>
    <view class="mys-container">
      <!-- 个人信息 -->
      <view
        class="card-top"
        style="margin-top: 12rpx; padding: 0; background: none"
      >
        <view class="mys-tops btn-feel">
          <view class="tops-left">
            <view class="name">
              <text>{{ userInfo.name || "编辑用户名" }}</text>
              <view class="edit-icon mar_le10">
                <image
                  class="button-click"
                  src="@/static/icon/edit1.png"
                  @click="navTo('/packageA/pages/personalInfo/personalInfo')"
                ></image>
              </view>
            </view>
            <view class="subName">
              <dict-Label
                class="mar_ri10"
                dictType="sex"
                :value="userInfo.sex"
              ></dict-Label>
              <text class="mar_ri10">{{ userInfo.age }}岁</text>
              <dict-Label
                class="mar_ri10"
                dictType="education"
                :value="userInfo.education"
              ></dict-Label>
              <dict-Label
                class="mar_ri10"
                dictType="affiliation"
                :value="userInfo.politicalAffiliation"
              ></dict-Label>
            </view>
            <view class="subName">{{ userInfo.phone }}</view>
          </view>
          <view class="tops-right">
            <view class="right-imghead">
              <image v-if="userInfo.avatar" :src="userInfo.avatar"></image>
              <image
                v-else-if="userInfo.sex == '0'"
                src="@/static/icon/boy.png"
              ></image>
              <image v-else src="@/static/icon/girl.png"></image>
            </view>
            <view class="right-sex">
              <image
                v-if="userInfo.sex === '0'"
                src="@/static/icon/boy1.png"
              ></image>
              <image v-else src="@/static/icon/girl1.png"></image>
            </view>
          </view>
        </view>
        <!-- 求职期望 -->
        <view class="mys-line">
          <view class="line"></view>
        </view>
        <view class="mys-info btn-feel">
          <view class="mys-h4">
            <view>求职期望</view>
            <image
              class="icon"
              src="@/static/icon/edit1.png"
              @click="navTo('/packageA/pages/jobExpect/jobExpect')"
            ></image>
          </view>
          <view class="mys-text">
            <text>期望薪资：</text>
            <text
              >{{ userInfo.salaryMin / 1000 }}k-{{
                userInfo.salaryMax / 1000
              }}k</text
            >
          </view>
          <view class="mys-text">
            <text>期望工作地：</text>
            <text>青岛市-</text>
            <dict-Label
              dictType="area"
              :value="Number(userInfo.area)"
            ></dict-Label>
          </view>
          <view class="mys-list">
            <view
              class="cards button-click"
              v-for="(title, index) in userInfo.jobTitle"
              :key="index"
            >
              {{ title }}
            </view>
          </view>
        </view>
      </view>
      <view class="card-top" style="margin-top: 24rpx">
        <view class="mys-info" style="padding: 0">
          <view class="mys-h4 btn-feel">
            <text>工作经历</text>
            <view
              class="mys-edit-icon btn-feel"
              @click="navTo('/packageA/pages/workExp/workExp')"
            >
              <image
                class="icon button-click btn-feel"
                src="@/static/icon/plus.png"
              ></image>
              <view class="txt">添加</view>
            </view>
          </view>
          <view
            class="exp-item btn-feel"
            v-for="item in userInfo.workExp"
            :key="item.id"
          >
            <view class="fl_box fl_justbet mar_top15">
              <view class="fs_16">{{ item.company }}</view>
              <image
                class="icon btn-feel"
                src="@/static/icon/edit1.png"
                @click="navTo(`/packageA/pages/workExp/workExp?id=${item.id}`)"
              ></image>
            </view>
            <view class="mys-text fl_box fl_justbet">
              <text class="color_333333 fs_14">{{ item.position }}</text>
              <text class="datetext"
                >{{ item.startTime }}--{{ item.endTime || "至今" }}</text
              >
            </view>
            <view class="mys-text">
              <text>{{ item.duty }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <template #footer>
      <view class="footer-container">
        <view class="footer-button btn-feel" @click="chooseResume"
          >上传简历</view
        >
      </view>
    </template>
  </AppLayout>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from "vue";
const { $api, navTo, navBack } = inject("globalFunction");
import { onLoad, onShow } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import useUserStore from "@/stores/useUserStore";
import useDictStore from "@/stores/useDictStore";
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { getDictData, oneDictData } = useDictStore();
import config from "@/config.js";

const showNotice = ref(true)
onLoad(() => {
  getUserResume();
});

function closeNotice() {
  showNotice.value=false
}

function chooseResume() {
  uni.chooseImage({
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    count: 1,
    success: ({ tempFilePaths, tempFiles }) => {
      uploadResume(tempFilePaths[0], true)
        .then((res) => {
          res = JSON.parse(res);
          getUserResume();
          $api.msg("上传成功");
        })
        .catch((err) => {
          $api.msg("上传失败");
        });
    },
    fail: (error) => {},
  });
}

function uploadResume(tempFilePath, loading) {
  if (loading) {
    uni.showLoading({
      title: "请稍后",
      mask: true,
    });
  }
  let Authorization = "";
  if (useUserStore().token) {
    Authorization = `${useUserStore().token}`;
  }
  const header = {};
  header["Authorization"] = encodeURIComponent(Authorization);
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: config.baseUrl + "/app/oss/uploadToObs",
      filePath: tempFilePath,
      name: "file",
      header,
      success: (uploadFileRes) => {
        if (uploadFileRes.statusCode === 200) {
          resolve(uploadFileRes.data);
        } else {
          reject();
        }
      },
      fail: (err) => {
        reject(err);
      },
      complete: () => {
        if (loading) {
          uni.hideLoading();
        }
      },
    });
  });
}
</script>

<style lang="stylus" scoped>
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60rpx;
    height: 60rpx;
    image {
        height: 100%;
        width: 100%;
    }
}
.footer-container{
      background: #FFFFFF;
      box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      padding: 40rpx 28rpx 20rpx 28rpx
    .footer-button{
        width: 100%;
        height: 90rpx;
        background: #1677FF;
        border-radius: 8rpx;
        color: #FFFFFF;
        line-height: 90rpx;
        text-align: center;
    }
}

.notice-line
  width 100%;
  height:60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding:0 30rpx
  margin-bottom: 20rpx
  .icon
    width:35rpx;
    height:35rpx;
  .text
    flex: 1;
    overflow hidden
    padding:0 25rpx
  .close
    width:25rpx;
    height:25rpx;
  
.notice-line.blue{
  background: #E8F1FF
  color: #1677ff
}
.notice-line.green{
  background: #D4FFF1
  color: #38bb8f
}

image{
    width: 100%;
    height: 100%
}
.mys-container{
    padding-bottom:20rpx;
    .card-top{
        background: #FFFFFF;
        margin: 0 28rpx;
        border-radius: 8rpx;
        padding: 24rpx
    }
    .mys-tops{
        display: flex
        justify-content: space-between
        padding: 38rpx 44rpx
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) , rgba(255, 255, 255, 1));
        border-radius: 8rpx 8rpx 0 0 ;
        .tops-left{
            .name{
                font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
                font-weight: 600;
                font-size: 36rpx;
                color: #333333;
                display: flex
                align-items: center
                justify-content: flex-start
                .edit-icon{
                    display: inline-block
                    width: 40rpx;
                    height: 40rpx
                    padding-bottom: 10rpx
                }
            }
            .subName{
                margin-top: 12rpx
                font-weight: 400;
                font-size: 26rpx;
                color: #999999;
            }

        }
        .tops-right{
            position: relative
            .right-imghead{
                width: 136rpx;
                height: 136rpx;
                border-radius: 50%;
                background: #e8e8e8
                overflow: hidden
            }
            .right-sex{
                position: absolute
                right: -10rpx
                top: -10rpx
                width: 50rpx
                height: 50rpx
            }
        }
    }
    .mys-line{
        background: #ffffff;
        padding: 0 24rpx
        .line{
           border: 2rpx dashed #eeeeee;
        }
    }
    .mys-info{
        padding: 28rpx
        background: #ffffff;
        border-radius: 0 0 8rpx 8rpx ;
        .mys-h4{
            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            font-weight: 500;
            font-size: 30rpx;
            color: #000000;
            margin-bottom: 8rpx
            display: flex;
            justify-content: space-between
            align-items: center
            .icon{
                width: 40rpx;
                height: 40rpx
              }
            .mys-edit-icon{
              display: flex;
              align-items: center;
              .txt{
                font-size: 26rpx;
                color: #444;
                font-weight: 400;
              }
              .icon{
                width: 28rpx;
                height: 28rpx
                margin-right: 5rpx;
                margin-top: 2rpx
                vertical-align: bottom;
              }
            }
        }
        .datetext{
            font-weight: 400;
            font-size: 26rpx;
            color: #999999;
        }
        .mys-text{
            font-weight: 400;
            font-size: 26rpx;
            color: #999999;
            margin-top: 16rpx
        }
        .mys-list{
            display: flex
            align-items: center
            flex-wrap: wrap;
            .cards{
                margin: 12rpx 12rpx 0 0
                padding: 12rpx 25rpx;
                width: fit-content
                display: flex
                align-items: center
                justify-content: center
                border-radius:10rpx;
                border: 2rpx solid #E8EAEE;
            }
        }
        .exp-item{
          padding-bottom: 28rpx;
          border-bottom:  2rpx dashed #EEEEEE;
          .icon{
            width 40rpx;
            height 40rpx
          }
        }
        .exp-item:nth-last-child(1){
          border-bottom: none;
        }
    }
}
</style>