veterans_client_web/src/views/PersonalCenter/PersonalCenterIndex.vue

<!--
 * @Description: 个人中心
 * @Author: 空白格
 * @Date: 2022-08-15 10:09:03
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-23 15:27:46
 * @FilePath: \veterans_client_web\src\views\PersonalCenter\PersonalCenterIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main personal-center">
    <div class="personal-center-header">
      <div class="app-main-box personal-center-header-box">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <div class="pchb-left">
              <div class="pchb-left-avatar hexagon">
                <div
                  class="pchb-left-avatar-box hexagon-box"
                  :style="{
                    backgroundImage: `url('${
                      userInfo.avatar
                        ? userInfo.avatar
                        : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                    }')`,
                  }"
                ></div>
              </div>
              <div class="pchb-left-user">
                <div class="pchb-left-user-item">
                  <div class="plui-username">{{ userInfo.name || "-" }}</div>
                  <div class="plui-integral">
                    <div class="plui-integral-item">进步<br />积分</div>
                    <div class="plui-integral-item">
                      {{ integralTotal || 0 }}
                    </div>
                    <div class="plui-integral-item">
                      <span class="el-icon-arrow-right"></span>
                    </div>
                  </div>
                </div>
                <div class="pchb-left-user-item">
                  <div class="plui-auth">
                    <div class="plui-auth-item">退役军人</div>
                    <div class="plui-auth-item">
                      <template v-if="userInfo.auditStatus === 0"
                        >认证中</template
                      >
                      <template v-else-if="userInfo.auditStatus === 2"
                        >已认证</template
                      >
                      <template v-else>
                        <router-link to="/applyeducationauth">未认证</router-link>
                      </template>
                    </div>
                  </div>
                  <div class="plui-train">
                    <div class="plui-train-item">适应性培训</div>
                    <div class="plui-train-item">
                      <template v-if="userInfo.adaptTrainIsPass === 1"
                        >已通过</template
                      >
                      <template v-else>未通过</template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <div class="pchb-right">
              <div
                class="pchb-right-item"
                v-for="(item, index) in statisticsList"
                :key="index"
              >
                <p>{{ item.label }}</p>
                <p>{{ learnObj[item.key] || 0 }}{{ item.unit }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="app-main-box personal-center-main">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
          <div class="personal-center-main-left">
            <div
              class="pcml-item"
              v-for="(item, index) in menuList"
              :key="index"
              @click="jumpPage(item.path)"
            >
              <div class="pcml-item-icon">
                <el-image :src="item.icon"></el-image>
              </div>
              <div class="pcml-item-label">{{ item.label }}</div>
              <div class="pcml-item-right">
                <span class="el-icon-arrow-right"></span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <div class="personal-center-main-right">
            <!-- 附件管理 -->
            <div class="pcmr-top">
              <h4>附件管理</h4>
              <div class="pcmr-top-btn upload-btn">上传简历</div>
              <div class="pcmr-top-btn make-btn">制作简历</div>
            </div>
            <!-- 我的技能培训 -->
            <div class="pcmr-bottom">
              <h4>我的技能培训</h4>
              <div class="pcmr-bottom-list">
                <template v-if="skillTrainList.length">
                  <div
                    class="pcmr-bottom-list-item"
                    v-for="(item, index) in skillTrainList"
                    :key="index"
                  >
                    <div class="pbli-left">
                      <el-image
                        class="image"
                        :src="
                          item.img ||
                          require('@/assets/images/default-news.jpg')
                        "
                        fit="fill"
                      >
                        <div slot="placeholder" class="image-slot">
                          加载图片中<span class="dot">...</span>
                        </div>
                        <div slot="error" class="image-slot">
                          <el-image
                            class="image"
                            :src="require('@/assets/images/default-news.jpg')"
                            fit="fill"
                          ></el-image>
                        </div>
                      </el-image>
                    </div>
                    <div class="pbli-right">
                      <div class="pbli-right-item">{{ item.name }}</div>
                      <div class="pbli-right-item">
                        培训学校：{{ item.schoolName }}
                      </div>
                      <div class="pbli-right-item">
                        <div>难度：</div>
                        <div>
                          <el-rate
                            v-model="item.difficult"
                            disabled
                            text-color="#ff9900"
                          />
                        </div>
                      </div>
                      <div class="pbli-right-item">
                        开始时间：{{ item.applyTime }}
                      </div>
                      <div class="pbli-right-item">
                        培训周期：{{ item.cycle || 0 }}个月
                      </div>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <el-empty description="列表数据为空"></el-empty>
                </template>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getPersonInfoData,
  getPersonIntegralData,
  getPersonStaticisData,
} from "@/api/PersonalCenter";
export default {
  name: "PersonalCenterIndex",
  data() {
    return {
      userInfo: {},
      integralTotal: 0,
      statisticsList: [
        { label: "技能培训", key: "learnTime", unit: "个" },
        { label: "学习时长", key: "classCount", unit: "小时" },
        { label: "获得面试", key: "interviewTimes", unit: "次" },
      ],
      learnObj: {},
      menuList: [
        {
          icon: require("@/assets/images/personal-center-icon/jianlitongguo.svg"),
          label: "我的简历",
          path: "",
        },
        {
          icon: require("@/assets/images/personal-center-icon/toudimoren.svg"),
          label: "我的投递",
          path: "",
        },
        {
          icon: require("@/assets/images/personal-center-icon/mianshi-houxuanren.svg"),
          label: "我的面试",
          path: "",
        },
        {
          icon: require("@/assets/images/personal-center-icon/_jiuyechuangye.svg"),
          label: "我的创业计划",
          path: "",
        },
        {
          icon: require("@/assets/images/personal-center-icon/jinengx.svg"),
          label: "我的技能培训",
          path: "",
        },
        {
          icon: require("@/assets/images/personal-center-icon/pingjia.svg"),
          label: "我的评价",
          path: "",
        },
        {
          icon: require("@/assets/images/personal-center-icon/shezhi.svg"),
          label: "设置",
          path: "/setting",
        },
      ],
      skillTrainList: [],
    };
  },
  created() {
    this.getPersonInfo();
    this.getPersonIntegral();
    this.getPersonStaticis();
  },
  methods: {
    /**
     * 获取个人信息
     * @date 2022-08-15
     * @returns {any}
     */
    getPersonInfo() {
      getPersonInfoData().then((res) => {
        if (res.code === 200) {
          this.userInfo = res?.data;
        }
      });
    },
    /**
     * 获取个人积分
     * @date 2022-08-15
     * @returns {any}
     */
    getPersonIntegral() {
      getPersonIntegralData().then((res) => {
        if (res.code === 200) {
          this.integralTotal = res?.data;
        }
      });
    },
    /**
     * 获取个人统计
     * @date 2022-08-15
     * @returns {any}
     */
    getPersonStaticis() {
      getPersonStaticisData().then((res) => {
        if (res.code === 200) {
          this.learnObj = res?.data;
        }
      });
    },
    /**
     * 跳转指定页面
     * @date 2022-08-22
     * @param {any} path
     * @param {any} query
     * @returns {any}
     */
    jumpPage(path, query) {
      if (path) {
        this.$router.push(path, query);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.personal-center {
  &-header {
    width: 100%;
    background-color: #181c1e;
    &-box {
      margin: 0 auto;
      .pchb-left {
        padding-top: 30px;
        display: flex;
        align-items: center;
        &-avatar {
          padding-top: 30px;
          width: 138px;
          height: 138px;
          background-color: rgba($color: #fff, $alpha: 0.7);
          padding: 7px;
          margin-right: 20px;
        }
        &-user {
          &-item {
            display: flex;
            .plui-username {
              color: #fff;
              font-size: 40px;
              margin-right: 20px;
              line-height: 40px;
            }
            .plui-integral {
              height: 40px;
              display: flex;
              justify-content: space-between;
              align-content: center;
              border: solid 3px rgba($color: #fff, $alpha: 0.4);
              padding: 0 14px;
              background-image: linear-gradient(
                270deg,
                #ff6100 16%,
                #fe7c02 100%
              );
              border-radius: 40px;
              &-item {
                color: #fff;
                &:first-child {
                  font-size: 11px;
                  padding: 4px 0;
                }
                &:nth-child(2) {
                  font-size: 30px;
                  padding: 0 20px;
                }
                &:last-child {
                  line-height: 40px;
                }
              }
            }
            .plui-auth,
            .plui-train {
              display: flex;
              align-items: center;
              margin-top: 20px;
              &-item {
                color: rgba($color: #fff, $alpha: 0.6);
                font-size: 16px;
                &:last-child {
                  margin-left: 15px;
                  background-color: rgba($color: #fff, $alpha: 0.4);
                  padding: 5px 20px;
                  font-size: 14px;
                  border-radius: 14px;
                }
                a {
                  text-decoration: none;
                  color: rgba($color: #fff, $alpha: 0.6);
                }
              }
            }
            .plui-train {
              margin-left: 30px;
            }
          }
        }
      }
      .pchb-right {
        height: 160px;
        padding-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        &-item {
          text-align: center;
          margin-left: 60px;
          color: #fff;
          font-size: 18px;
          &:first-child {
            margin-left: 0;
          }
          p {
            font-family: PingFangSC-Regular;
          }
          p:first-child {
            margin-bottom: 10px;
            font-weight: 500;
            font-family: PingFangSC-Medium;
          }
        }
      }
    }
  }
  &-main {
    &-left {
      background-color: #fff;
      padding: 20px 20px 200px;
      .pcml-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid #d5d5d5;
        padding: 5px 0 15px;
        cursor: pointer;
        &-icon {
          width: 30px;
          height: 30px;
          margin-right: 20px;
          image {
            width: 100%;
            height: 100%;
          }
        }
        &-label {
          flex: 1;
          font-size: 20px;
          color: #333333;
        }
      }
    }
    &-right {
      .pcmr-top {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 20px;
        h4 {
          color: #1a1a1a;
          font-size: 26px;
          font-family: SourceHanSansCN;
          margin-bottom: 20px;
        }
        &-btn {
          width: 100%;
          height: 52px;
          line-height: 52px;
          text-align: center;
          font-size: 18px;
          cursor: pointer;
        }
        .upload-btn {
          background-color: #659789;
          color: #fff;
          margin-bottom: 10px;
        }
        .make-btn {
          border: solid 1px #659789;
          color: #659789;
          margin-bottom: 30px;
        }
      }
      .pcmr-bottom {
        background: #fff;
        padding: 20px 20px 100px;
        h4 {
          color: #1a1a1a;
          font-size: 26px;
          font-family: SourceHanSansCN;
          margin-bottom: 20px;
        }
        &-list {
          &-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding-bottom: 10px;
            border-bottom: 1px solid #d5d5d5;
            margin-bottom: 20px;
            .pbli-left {
              width: 110px;
              height: 104px;
              border: solid 1px #e0e0e0;
              border-radius: 5px;
              margin-right: 15px;
              .image {
                width: 98%;
                height: 100%;
              }
            }
            .pbli-right {
              &-item {
                color: #747474;
                font-size: 14px;
                display: flex;
                margin-bottom: 5px;
                &:first-child {
                  font-size: 18px;
                  color: #1a1a1a;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>