ali_ai_learn_web/src/pages/PersonalCenter.vue

<template>
  <div class="personal">
    <Breadcrumb />
    <div class="personal-head">
      <div class="personal-head-left">
        <el-avatar :size="100" :src="appStore.avatarDefault" />
        <div class="personal-user-info">
          <div class="personal-username">
            <div class="">{{ userInfo.nickName }}</div>
            <img src="/src/assets/imgs/my/vip@2x.png" alt="">
          </div>
          <div class="personal-user-phone mt4">{{ $t('personalCenter.phoneNumber') }}：{{ userInfo.userPhone }}</div>
          <div class="gap10 mt4">
            <el-button type="primary" size="large" plain>技能标签</el-button>
          </div>
          <div class="personal-user-list">
            <div class="personal-user-li">
              <span>0</span>
              <span>{{ $t('common.mibi') }}</span>
            </div>
            <div class="personal-user-line"></div>
            <div class="personal-user-li">
              <span>0</span>
              <span>{{ $t('common.baomibi') }}</span>
            </div>
            <div class="personal-user-line"></div>
            <div class="personal-user-li">
              <span>0</span>
              <span>{{ $t('personalCenter.follow') }}</span>
            </div>
          </div>
        </div>

      </div>
      <div class="personal-head-right">
        <div class="personal-head-right-li">
          <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
          <div class="">{{ $t('personalCenter.editProfile') }}</div>
        </div>
        <div @click="router.push({path:'/member'})" class="personal-head-right-li">
          <img src="/src/assets/imgs/my/huiyuan@2x.png" alt="">
          <div class="">{{ $t('personalCenter.openMembership') }}</div>
        </div>
        <div @click="signIn" class="personal-head-right-li gradient">
          <img src="/src/assets/imgs/my/qiandao@2x.png" alt="">
          <div class="">{{ $t('personalCenter.checkIn') }}</div>
        </div>
      </div>
    </div>
    <div class="personal-main">
      <div class="personal-left">
        <div class="personal-left-list">
          <div @click="toPath(item, index)" :class="{ active: index == navIndex }" class="personal-left-li"
            v-for="(item, index) in navList" :key="index">
            <img v-if="index == navIndex" :src="item.iconActive" alt="">
            <img v-else :src="item.icon" alt="">
            <div class="">{{ $t(item.name) }}</div>
          </div>
        </div>
      </div>
      <div class="personal-right">
        <div class="personal-right-main">
          <router-view />
        </div>

      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useAppStore } from '@/pinia/appStore'

import { ref, onMounted,computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'

import { getUserInfo } from '@/api/auth.js'
import { checkIn } from '@/api/my.js'

const appStore = useAppStore();
const route = useRoute()
const router = useRouter()
const navList = ref([
  {
    name: 'personalCenter.myWallet',
    path: '/personal-center/wallet',
    icon: '/src/assets/imgs/my/icon1@2x.png',
    iconActive: '/src/assets/imgs/my/icon1a@2x.png'
  },
  {
    name: 'personalCenter.membershipInfo',
    path: '/personal-center/member-details',
    icon: '/src/assets/imgs/my/icon2@2x.png',
    iconActive: '/src/assets/imgs/my/icon2a@2x.png'
  },
  {
    name: 'personalCenter.myCollection',
    path: '/personal-center/collection',
    icon: '/src/assets/imgs/my/icon3@2x.png',
    iconActive: '/src/assets/imgs/my/icon3a@2x.png'
  },
  {
    name: 'personalCenter.myDemand',
    path: '/personal-center/demand',
    icon: '/src/assets/imgs/my/icon4@2x.png',
    iconActive: '/src/assets/imgs/my/icon4a@2x.png'
  },
  {
    name: 'personalCenter.myOrders',
    path: '/personal-center/orders',
    icon: '/src/assets/imgs/my/icon5@2x.png',
    iconActive: '/src/assets/imgs/my/icon5a@2x.png'
  },
  {
    name: 'personalCenter.myInvoice',
    path: '/personal-center/invoice',
    icon: '/src/assets/imgs/my/icon6@2x.png',
    iconActive: '/src/assets/imgs/my/icon6a@2x.png'
  },
  {
    name: 'personalCenter.myWorkflow',
    path: '/personal-center/workflow',
    icon: '/src/assets/imgs/my/icon7@2x.png',
    iconActive: '/src/assets/imgs/my/icon7a@2x.png'
  }
])
const navIndex = computed(()=>{
  switch (route.name) {
    case 'Wallet':
      return 0
      break;
    case 'MemberDetails':
      return 1
      break;
    case 'Wallet':
      return 0
      break;
    case 'Collection':
      return 2
      break;
    case 'Demand':
      return 3
      break;
    case 'Orders':
      return 4
      break;
     case 'Invoice':
      return 5
      break;
    case 'Workflow':
      return 6
      break;
    default:
      break;
  }
  return null;
})

const userInfo = ref({})//用户信息

const toPath = (item: any, index: number) => {
  if (item.path) {
    router.push(item.path);
  }
};
// 签到
const signIn = async () => {
  let res = await checkIn({ actionType: 1 });
  console.log(res);
}
// 获取用户信息
const getInfo = async () => {
  let res = await getUserInfo();
  userInfo.value = res.user;
  console.log(res.user);
}
onMounted(() => {
  getInfo()
})
</script>
<style lang="scss" scoped>
div {
  -webkit-user-select: none;
  /* Safari, Chrome */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* 标准语法 */
}

.personal-head {
  border-radius: 16px;
  padding: 24px 16px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .personal-head-left {
    display: flex;

    .personal-user-info {
      margin-left: 16px;

      .personal-username {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        color: #333333;

        img {
          width: 51px;
          height: 21px;
          margin-left: 8px;
        }
      }

      .personal-user-list {
        display: flex;
        margin-top: 16px;
        align-items: center;

        .personal-user-li {
          span {
            color: #333333;
            font-size: 14px;

            &:first-child {
              font-size: 28px;
              font-weight: bold;
              margin-right: 10px;
            }
          }
        }

        .personal-user-line {
          margin: 0 16px;
          height: 20px;
          width: 2px;
          background: #EBEEF5;
        }
      }
    }
  }

  .personal-head-right {
    display: flex;
    align-items: center;

    .personal-head-right-li {
      display: flex;
      padding: 9px 16px;
      align-items: center;
      margin-left: 8px;
      // height: 32px;
      background: #EAF0FF;
      border-radius: 4px;
      cursor: pointer;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        background: linear-gradient(270deg, #0055FE 0%, #C832FA 100%);

        div {
          color: #FFFFFF;
        }
      }

      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }

      div {
        color: #2D71FF;
        font-size: 14px;
      }

      &:hover {
        opacity: 0.7;
      }
    }
  }
}

.personal-main {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;

  .personal-left {
    width: 300px;

    .personal-left-list {
      background: #FFFFFF;
      border-radius: 16px;
      padding: 8px;

      .personal-left-li {
        height: 56px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        font-size: 16px;
        color: #333333;
        cursor: pointer;
        border-radius: 8px;

        img {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }

        &:hover {
          background: #F5F7FF;
        }
      }

      .active {
        position: relative;
        background: #EAF0FF;

        &::after {
          top: 50%;
          transform: translateY(-50%);
          content: '';
          position: absolute;
          right: 8px;
          width: 4px;
          height: 24px;
          background: #2D71FF;
          border-radius: 2px;
        }

        div {
          color: #2D71FF;
        }
      }
    }
  }

  .personal-right {
    flex: 1;

    margin-left: 16px;

    .personal-right-main {
      padding: 0 16px;
      border-radius: 16px;
      background: #FFFFFF;
    }
  }
}
</style>