veterans_client_web/src/views/PersonalCenter/PersonalCenterIndex.vue

<!--
 * @Description: 个人中心
 * @Author: 空白格
 * @Date: 2022-08-15 10:09:03
 * @LastEditors: 空白格
 * @LastEditTime: 2022-11-16 18:04:06
 * @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" @click="avatarClick">
                <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"
                    @click="jumpPage('/personalcenter/progresspoints')"
                  >
                    <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 link"
                      @click="jumpPage('/adaptivetraining')"
                    >
                      <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>
                  <span v-if="item.key === 'learnTime'">{{
                    learnObj[item.key]
                      ? (Number(learnObj[item.key]) / 3600).toFixed(2)
                      : 0
                  }}</span>
                  <span v-else>{{ learnObj[item.key] || 0 }}</span
                  >{{ 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="24" :lg="24" :xl="24">
          <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 class="logout-btn" @click="logout">退出登录</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>
    <!-- 上传头像弹框 -->
    <el-dialog
      :title="dialogObj.title"
      :visible.sync="dialogObj.open"
      width="400px"
      :before-close="handleClose"
    >
      <div class="dialog">
        <el-upload
          :action="uploadObj.action"
          :headers="uploadObj.headers"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :on-remove="fileRemove"
          :limit="1"
        >
          <div class="dialog-avatar hexagon">
            <div
              class="dialog-avatar-box hexagon-box"
              :style="{
                backgroundImage: `url('${
                  dialogObj.avatarUrl ||
                  'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                }')`,
              }"
            ></div>
          </div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          :disabled="
            dialogObj.avatarUrl === userInfo.avatar || !dialogObj.avatarUrl
          "
          :loading="dialogObj.loading"
          @click="submitUpdate"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPersonInfoData,
  getPersonIntegralData,
  getPersonStaticisData,
  updateUserInfo,
} from "@/api/PersonalCenter";
export default {
  name: "PersonalCenterIndex",
  data() {
    return {
      userInfo: {},
      integralTotal: 0,
      statisticsList: [
        { label: "技能培训", key: "classCount", unit: "个" },
        { label: "学习时长", key: "learnTime", unit: "小时" },
        { label: "获得面试", key: "interviewTimes", unit: "次" },
      ],
      learnObj: {},
      menuList: [
        {
          icon: require("@/assets/images/personal-center-icon/jianlitongguo.svg"),
          label: "我的简历",
          path: "/personalcenter/resume",
        },
        {
          icon: require("@/assets/images/personal-center-icon/toudimoren.svg"),
          label: "我的投递",
          path: "/personalcenter/deliver",
        },
        {
          icon: require("@/assets/images/personal-center-icon/mianshi-houxuanren.svg"),
          label: "我的面试",
          path: "/personalcenter/interview",
        },
        // {
        //   icon: require("@/assets/images/personal-center-icon/_jiuyechuangye.svg"),
        //   label: "我的创业计划",
        //   path: "",
        // },
        {
          icon: require("@/assets/images/personal-center-icon/jinengx.svg"),
          label: "我的技能培训",
          path: "/personalcenter/skilltraining",
        },
        {
          icon: require("@/assets/images/personal-center-icon/pingjia.svg"),
          label: "我的评价",
          path: "/personalcenter/evaluate",
        },
        // {
        //   icon: require("@/assets/images/personal-center-icon/shezhi.svg"),
        //   label: "设置",
        //   path: "/personalcenter/setting",
        // },
      ],
      skillTrainList: [],
      dialogObj: {
        open: false,
        title: "个人资料修改",
        loading: false,
        avatarUrl: "",
      },
      uploadObj: {
        action: process.env.VUE_APP_BASE_API + "/file/upload/single/minio",
        headers: {
          Authorization: `Bearer ${this.$store.state.user.token}`,
        },
      },
    };
  },
  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);
      }
    },
    /**
     * 退出登录
     * @date 2022-08-25
     * @returns {any}
     */
    logout() {
      this.$confirm("您确认要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("Logout", {}).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "退出登录成功!",
              });
              this.$router.push("/login");
            } else {
              this.$message({
                type: "error",
                message: res.msg || "退出登录失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出登录!",
          });
        });
    },
    /**
     * 头像点击
     * @date 2022-08-30
     * @returns {any}
     */
    avatarClick() {
      this.dialogObj.avatarUrl = this.userInfo.avatar;
      this.dialogObj.open = true;
    },
    /**
     * 关闭修改资料弹框
     * @date 2022-08-30
     * @returns {any}
     */
    handleClose() {
      this.dialogObj.avatarUrl = "";
      this.dialogObj.open = false;
    },
    /**
     * 上传成功
     * @date 2022-08-30
     * @param {any} res
     * @returns {any}
     */
    uploadSuccess(res) {
      if (res.code === 200) {
        this.dialogObj.avatarUrl = res.data.url;
      }
    },
    /**
     * 上传失败
     * @date 2022-08-30
     * @param {any} err
     * @returns {any}
     */
    uploadError(err) {
      this.$message.error(err.msg || "上传失败!");
    },
    /**
     * 文件移除触发
     * @date 2022-08-30
     * @param {any} file
     * @returns {any}
     */
    fileRemove(file) {
      this.dialogObj.avatarUrl = "";
    },
    /**
     * 提交头像修改
     * @date 2022-08-30
     * @returns {any}
     */
    submitUpdate() {
      if (
        this.dialogObj.avatarUrl &&
        this.dialogObj.avatarUrl !== this.userInfo.avatar
      ) {
        this.dialogObj.loading = true;
        updateUserInfo({ avatar: this.dialogObj.avatarUrl })
          .then((res) => {
            if (res.code === 200) {
              this.dialogObj.avatarUrl = "";
              this.$message.success("修改个人信息成功!");
              this.getPersonInfo();
              this.dialogObj.open = false;
            } else {
              this.$message.error("修改个人信息失败!");
            }
            this.dialogObj.loading = false;
          })
          .catch(() => {
            this.dialogObj.loading = false;
          });
      }
    },
  },
};
</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;
          cursor: pointer;
        }
        &-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;
              cursor: pointer;
              &-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);
                }
              }
              .link {
                cursor: pointer;
              }
            }
            .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;
            span {
              color: #fe7b02;
              font-size: 36px;
            }
          }
          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: 18px;
          color: #333333;
        }
      }
      .logout-btn {
        margin: 54px auto 24px;
        width: 240px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border: 1px solid #ff0000;
        color: #f00;
        border-radius: 7px;
        cursor: pointer;
        letter-spacing: 1.34px;
      }
    }
    &-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;
                }
              }
            }
          }
        }
      }
    }
  }
}
.dialog {
  display: flex;
  justify-content: center;
  &-avatar {
    padding-top: 30px;
    width: 138px;
    height: 138px;
    background-color: rgba($color: #000, $alpha: 0.5);
    padding: 7px;
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>