tingbang/htmldev/dashboard/src/views/mine/index.vue

<template>
  <div class="min-container">
    <div class="user-info">
      <div class="avatar">
        <img :src="userDetail.user_head_url" alt="">
      </div>
      <div class="name">
        <p>{{ userDetail.user_name }}</p>
        <p>ID：{{userDetail.user_account }}</p>
      </div>
    </div>
    <div class="menu-wrap">
      <router-link :to="{path: '/order'}" tag="p">
        <img alt="" src="./image/icon_order@2x.png">
        <span>订单记录</span>
      </router-link>
      <router-link :to="{name: 'PlaceReserve'}" tag="p">
        <img alt="" src="./image/icon_place@2x.png">
        <span>订座记录</span>
      </router-link>
    </div>
    <van-button
      :disabled="booLock"
      class="btn-logout"
      type="default"
      @click="fetchUserLogout">退出登录
    </van-button>
  </div>
</template>

<script>
import { Toast, Button } from 'vant'
import { apiUserDetail, apiUserLogout } from './api/api'
import { clearStore, clearLoginInfo } from '../../utils'

export default {
  name: 'index',
  components: {
    'van-button': Button
  },
  data () {
    return {
      userDetail: {},
      booLock: false
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.userDetail = {}
      this.fetchUserDetail()
    }
    this.$route.meta.isUseCache = false
  },
  methods: {
    async fetchUserDetail () {
      try {
        const { status, data, msg } = await apiUserDetail()
        if (status) {
          this.userDetail = data
        } else {
          Toast(msg)
        }
      } catch (err) {}
    },
    async fetchUserLogout () {
      try {
        this.booLock = true
        const { status, msg } = await apiUserLogout()
        if (status) {
          clearLoginInfo()
          clearStore()
          this.$router.replace({ name: 'Login' })
        } else {
          Toast(msg)
        }
        this.booLock = false
      } catch (err) {
        this.booLock = false
      }
    }
  },
  beforeRouteLeave (to, form, next) {
    if (['OrderList', 'PlaceReserve'].findIndex(item => item === to.name) > -1) {
      form.meta.isUseCache = true
    }
    next()
  }
}
</script>

<style lang="scss" scoped>
.min-container {
  position: relative;
  left: 0;
  top: 0;
  min-height: 100vh;
  background: #fff;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 46px 20px 46px;
  background: url("./image/header.png") center top/100% auto no-repeat;

  .avatar {
    display: block;
    width: 51px;
    height: 51px;
    border-radius: 50%;
    border: 1px solid #fff;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
    }
  }

  .name {
    margin-left: 14px;

    p {
      &:nth-of-type(1) {
        font-size: 21px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 29px;
      }

      &:nth-of-type(2) {
        font-size: 14px;
        color: #FFFFFF;
        line-height: 20px;
      }
    }
  }
}

.menu-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;

  p {
    display: flex;
    align-items: center;
    width: 172px;
    height: 68px;
    border-radius: 4px;
    border: 1px solid #F2F2F2;

    &:nth-of-type(2) {
      margin-left: 11px;
    }

    img {
      width: 44px;
      height: 44px;
      margin: 0 10px;
    }

    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1F1E1E;
      line-height: 22px;
    }
  }
}

.btn-logout {
  @include horiz-center;
  bottom: 100px;
}
</style>