assessment-front/pages/index/center.vue

<template>
	<view class="page__view">
		
		<view class="bg"></view>

    <view class="main">

      <view class="flex user">
        <!-- 用户信息 -->
        <template v-if="isLogin">
          <view class="user-avatar">
            <image class="user-avatar-img" :src="userInfo.headImage" mode="scaleToFill"></image>
          </view>
          <view class="user-info">
            <view class="user-info-name">{{ userInfo.nickName }}</view>
            <view class="user-info-desc">{{ `ID:${userInfo.id}` }}</view>
          </view>
        </template>
        <template v-else>
          <view class="user-avatar">
            <image class="user-avatar-img" src="@/static/image/avatar-default.png" mode="scaleToFill"></image>
          </view>
          <view class="user-info">
            <view class="user-info-tips">暂未登录 请先登录</view>
          </view>
        </template>
      </view>

      <!-- 用户菜单 -->
      <template v-if="isLogin">
        <view class="card">
          <view class="card-header">常用功能</view>
          <view class="card-content menu">
            <view class="flex flex-column menu-item" v-for="item in list" :key="item.id" @click="onClick(item)">
              <image class="icon" :src="item.icon" mode="widthFix"></image>
              <view>{{ item.label }}</view>
            </view>
          </view>
        </view>
      </template>
      <!-- 用户登陆 -->
      <template v-else>
        <view class="login">
          <button class="btn" @click="$utils.toLogin">立即登录</button>
          <view class="tips">暂未登录 请先登录</view>
        </view>
      </template>

    </view>

    <tabber select="center" />

  </view>
</template>

<script>
	import { mapState } from 'vuex'

	import tabber from '@/components/base/tabbar.vue'

  export default {
		components: {
      tabber,
		},
    data() {
      return {
        list: [
					{ id: '001', label: '我的答题', icon: '/static/image/icon-center-test.png', path: '/pages_order/test/list' },
					{ id: '002', label: '咨询客服', icon: '/static/image/icon-center-service.png', path: '/pages_order/service/index' },
					{ id: '003', label: '意见反馈', icon: '/static/image/icon-center-feedback.png', path: '/pages_order/feedback/index' },
					{ id: '004', label: '个人信息', icon: '/static/image/icon-center-userinfo.png', path: '/pages_order/auth/infoModify' },
					{ id: '008', label: '退出登录', icon: '/static/image/icon-center-logout.png', key: 'logout' },
        ],
      }
    },
		computed: {
			...mapState(['userInfo', 'configList']),
			isLogin() {
				return this.userInfo && this.userInfo.id
			}
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
			}
		},
    methods: {
			onClick(target) {
				const { key, path } = target

				switch(key) {
					case 'logout':
						this.$store.commit('logout')
						break
					default:
						path && this.$utils.navigateTo(path)
						break
				}
			},
    },
  }
</script>

<style scoped lang="scss">
  .page__view {
    background: #F5F5F5;
  }

  .bg {
    width: 100%;
    height: 501rpx;
    background: linear-gradient(160deg, #014FA2 36%, #4C8FD6);
  }

  .main {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 216rpx 13rpx 26rpx 13rpx;
    box-sizing: border-box;
  }

	.user {
    padding: 0 33rpx;
		column-gap: 22rpx;

		&-avatar {
			flex: none;
			width: 118rpx;
			height: 118rpx;
			border-radius: 50%;
			overflow: hidden;

			&-img {
				width: 100%;
				height: 100%;
			}
		}

		&-info {
			flex: 1;
      color: #FFFFFF;

			&-name {
				font-size: 30rpx;
			}

			&-desc {
				margin-top: 12rpx;
        font-size: 28rpx;
			}

			&-tips {
				font-size: 30rpx;
			}
		}
	}

  .card {
    margin-top: 83rpx;
    width: 100%;
    min-height: 652rpx;
    padding: 32rpx 30rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 16rpx;

    &-header {
      font-size: 32rpx;
      font-weight: 600;
      color: #000000;
    }

    &-content {
      margin-top: 73rpx;
    }
  }

  .menu {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 73rpx;
    row-gap: 93rpx;
    
    &-item {
      min-width: 0;
      row-gap: 10rpx;
      font-size: 28rpx;
      white-space: nowrap;
      color: #000000;

      .icon {
        width: 50rpx;
        height: auto;
      }
    }
  }
	

	.login {
		margin-top: 307rpx;
    width: 100%;
		padding: 0 128rpx;
    box-sizing: border-box;

		.btn {
			padding: 16rpx 0;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			line-height: 1.4;
			color: #FFFFFF;
      background: #014FA2;
			border-radius: 41rpx;
		}

		.tips {
			margin-top: 16rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			line-height: 1.4;
			color: #A3A3A3;
		}
	}
</style>