ContestPortal/src/views/userInfo/index.vue

<template>
  <div class="top-bg">
    <h1 class="title">个人中心</h1>
    <div class="desc">{{ userInfo.realname }}欢迎回来~</div>
    <div class="icon">
      <SvgIcon name="荣誉资质" width="300" height="300" />
    </div>
  </div>
  <div class="container-1420">
    <el-card>
      <div class="user-info-main">
        <div class="left">
          <div class="personage-info">
            <div class="head">
              <div class="title">个人信息</div>
              <div class="icon">
                <el-button type="primary" link @click="editUserInfo">
                  编辑
                </el-button>
              </div>
            </div>
            <div class="info-box">
              <div class="text">
                <!-- <img style="width: 75px; height:75px ;" src="../../assets/images/item.png" alt="" srcset=""> -->
                <el-image
                  style="width: 100px; height: 100px"
                  :src="setImageUrl(useUserStore.userInfo.avatar)"
                  :preview-src-list="[
                    setImageUrl(useUserStore.userInfo.avatar),
                  ]"
                />
              </div>
            </div>

            <div class="info-box">
              <div class="label">姓名</div>
              <div class="text">{{ useUserStore.userInfo.realname }}</div>
            </div>

            <div class="info-box">
              <div class="label">姓别</div>
              <div class="text">
                {{ useUserStore.userInfo.sex === 1 ? '男' : '女' }}
              </div>
            </div>
            <div class="info-box">
              <div class="label">生日</div>
              <div class="text">{{ useUserStore.userInfo.birthday }}</div>
            </div>
            <div class="info-box">
              <div class="label">学号</div>
              <div class="text">{{ useUserStore.userInfo.workNo }}</div>
            </div>

            <div class="info-box">
              <div class="label">手机号</div>
              <div class="text">{{ useUserStore.userInfo.phone }}</div>
            </div>

            <!-- <div class="info-box">
              <div class="label">院系</div>
              <div class="text">国际教育学院</div>
            </div> -->

            <div class="info-box">
              <div class="label">邮箱</div>
              <div class="text">{{ useUserStore.userInfo.email }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div
            class="personalAbilityEvaluationCollectList gradient"
            @click="Router.push('/personalAbilityEvaluationCollectList')"
          >
            个人积分管理
          </div>
          <div
            class="personalAbilityEvaluationCollectList gradient"
            @click="Router.push('/personalEvaluateList')"
          >
            个人能力评价
          </div>
          <div
            class="personalAbilityEvaluationCollectList gradient"
            @click="Router.push('/personalReport')"
          >
            个人能力报告
          </div>
        </div>
      </div>
    </el-card>
    <awardeList />
  </div>
  <el-dialog
    v-model="dialogVisible"
    v-if="dialogVisible"
    title="编辑"
    width="35%"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="80" style="padding-right: 30px">
      <el-form-item label="头像">
        <el-upload
          v-model:file-list="fileList"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <!-- <el-form-item label="部门">
        <el-cascader
          :props="props"
          style="width: 100%"
          v-model="form.facultiesId"
        />
      </el-form-item> -->
      <el-form-item label="生日">
        <el-date-picker
          v-model="form.birthday"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio :value="1" size="large">男</el-radio>
          <el-radio :value="0" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone" type="number" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import userStore from '@/store/module/user'
import { getFaculties, uploadFile, editUserInfoApi } from '@/api/race'
import awardeList from './components/awardeList.vue'
const useUserStore = userStore()
const userInfo = ref<any>({})
console.log(useUserStore.userInfo, 'useUserStore')
userInfo.value = useUserStore.userInfo
const Router = useRouter()
const dialogVisible = ref(false)
// 修改用户信息
const editUserInfo = () => {
  form.name = useUserStore.userInfo.realname
  form.birthday = useUserStore.userInfo.birthday
  form.sex = useUserStore.userInfo.sex
  form.email = useUserStore.userInfo.email
  // form.facultiesId = useUserStore.userInfo.facultiesId
  form.phone = useUserStore.userInfo.phone
  dialogVisible.value = true
  nextTick(() => {
    fileList.value = [
      {
        url: setImageUrl(useUserStore.userInfo.avatar),
      },
    ]
  })
}
const handleClose = () => {
  dialogVisible.value = false
}
const form = reactive({
  name: '',
  birthday: '',
  sex: '',
  email: '',
  facultiesId: '',
  phone: '',
})

// 上传文件
const fileList = ref<any>([])
const avatar = ref<any>('')
const uploadFileEvent = async () => {
  const fromData = new FormData()
  fromData.append('file', fileList.value[0].raw)
  const res: any = await uploadFile(fromData)
  avatar.value = res.message
  console.log(res, 'res')
}
// 确认修改
const submit = async () => {
  if (fileList.value[0].hasOwnProperty('raw')) {
    await uploadFileEvent()
  }
  const data: any = {
    id: userInfo.value.id,
    realname: form.name,
    birthday: form.birthday,
    sex: form.sex,
    email: form.email,
    facultiesId: form.facultiesId,
    phone: form.phone,
    avatar: avatar.value,
  }
  for (const key in data) {
    if (data[key] === '') {
      delete data[key]
    }
  }
  await editUserInfoApi(data)
  useUserStore.getUserInfo()
  userInfo.value = useUserStore.userInfo

  dialogVisible.value = false
}
onMounted(() => {})
// 获取院系列表

const FacultiesList = ref<any>([])

const getFacultiesList = async (data: any) => {
  const res: any = await getFaculties(data)
  console.log(res, 'res')
  FacultiesList.value = res.result
}
// 配置部门级联选择器
const props = {
  lazy: true,
  checkStrictly: true,
  emitPath: false,
  async lazyLoad(node: any, resolve: any) {
    await getFacultiesList({
      primaryKey: 'key',
      pid: node.value,
    })
    const nodes = FacultiesList.value.map((item: any) => ({
      value: item.id,
      label: item.title,
    }))
    resolve(nodes)
  },
}
watch(
  () => fileList.value,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
    if (newVal.length === 1) {
      ;(document.querySelector('.el-upload') as HTMLElement).style.display =
        'none'
    } else {
      setTimeout(() => {
        ;(document.querySelector('.el-upload') as HTMLElement).style.display =
          'flex'
      }, 0)
    }
  },
)
const setImageUrl = (url: string) => {
  return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url
}
</script>
<style lang="scss" scoped>
.top-bg {
  position: relative;
  width: 100%;
  height: 290px;
  background-color: #fff;
  background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%);
  margin-top: 80px;
  padding: 20px 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .title {
    font-size: 32px;
    font-weight: 700;
  }
  .desc {
    margin-top: 20px;
    font-size: 16px;
  }
  .icon {
    position: absolute;
    right: 300px;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  margin: 25px 0;
  height: 300px;

  .com {
    width: 697px;
    height: 300px;
    border-radius: 6px 6px 6px 6px;
    padding-top: 22px;
    padding-left: 32px;

    .title {
      height: 28px;
      font-family:
        Microsoft YaHei UI,
        Microsoft YaHei UI;
      font-weight: bold;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      line-height: 28px;
      margin-bottom: 18px;
    }

    //  margin-right: 22px;

    .content {
      display: flex;
      gap: 22px;

      .card-annual {
        padding: 28px 0 0 28px;
        width: 340px;
        height: 182px;
        background: linear-gradient(90deg, #21aca5 0%, #42d9ac99 100%);
        border-radius: 8px;
        overflow: hidden;

        .annual {
          height: 19px;
          font-family: Inter, Inter;
          font-weight: bold;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.8);
          line-height: 19px;
        }

        .title-box {
          margin-top: 13px;
          display: flex;
          align-items: center;
          gap: 28px;

          .text {
            width: 202px;
            font-family: Inter, Inter;
            font-weight: normal;
            font-size: 32px;
            color: #ffffff;
            line-height: 39px;
          }
        }
      }

      .right {
        .info-box {
          .name {
            height: 20px;
            font-family:
              Microsoft YaHei UI,
              Microsoft YaHei UI;
            font-weight: 400;
            font-size: 14px;
            color: #acacac;
            line-height: 20px;
            margin-bottom: 8px;
          }

          .title {
            height: 20px;
            font-family:
              Microsoft YaHei UI,
              Microsoft YaHei UI;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            line-height: 20px;
            margin-bottom: 12px;
          }

          .date-box {
            margin-bottom: 12px;
            display: flex;
            align-items: center;

            .label {
              height: 20px;
              font-family:
                Microsoft YaHei UI,
                Microsoft YaHei UI;
              font-weight: 400;
              font-size: 14px;
              color: #acacac;
              line-height: 20px;
            }

            .date {
              font-family:
                Microsoft YaHei UI,
                Microsoft YaHei UI;
              font-weight: bold;
              font-size: 18px;
              color: #333333;
            }
          }
        }
      }
    }

    .track {
      .card-annual {
        background: url(../../assets/images/item.png) no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;

        p {
          font-family:
            Microsoft YaHei UI,
            Microsoft YaHei UI;
          font-weight: bold;
          font-size: 40px;
          color: #76dae5;
        }
      }
    }
  }
}
.user-info-main {
  width: 100%;
  height: 300px;
  display: flex;
  .left {
    flex: 1;
    .personage-info {
      margin: 30px 0 0 32px;
      // width: 780px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      row-gap: 32px;

      .head {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          height: 28px;
          font-family:
            Microsoft YaHei UI,
            Microsoft YaHei UI;
          font-weight: bold;
          font-size: 20px;
          color: rgba(0, 0, 0, 0.9);
          line-height: 28px;
        }

        .icon {
          padding: 5px;
          cursor: pointer;
        }
      }

      .info-box {
        &.remark {
          width: 377.333px;
        }

        width: 176px;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .label {
          height: 22px;
          font-family:
            Microsoft YaHei UI,
            Microsoft YaHei UI;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
          line-height: 22px;
        }

        .text {
          // height: 22px;
          font-family:
            Microsoft YaHei UI,
            Microsoft YaHei UI;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.9);
          line-height: 22px;
        }
      }
    }
  }
  .right {
    width: 300px;
    padding: 25px;
    //  background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .personalAbilityEvaluationCollectList {
      width: 180px;
      // background-color: pink;
      height: 38px;
      text-align: center;
      line-height: 38px;
      font-size: 16px;
      border-radius: 10px;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s;
    }
    .personalAbilityEvaluationCollectList:hover {
      transform: scale(1.1);
    }
  }
}
</style>