assessment-front/pages/index/report.vue

<template>
  <view class="page__view">

    <view class="header"></view>

    <template v-if="isLogin">
      <view class="list">
        <view class="list-item" v-for="item in list" :key="item.id">
          <reportCard :data="item"></reportCard>
        </view>
      </view>
    </template>
    <!-- 用户登陆 -->
    <template v-else>
      <view class="login">
        <button class="btn" @click="$utils.toLogin">立即登录</button>
        <view class="tips">暂未登录 请先登录</view>
      </view>
    </template>

    <tabber select="report" />

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

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

  export default {
		mixins: [mixinsList],
    components: {
      tabber,
      reportCard,
    },
    data() {
      return {
        mixinsListApi: '',
      }
    },
		onLoad() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
			}
		},
    computed: {
			isLogin() {
				return this.userInfo && this.userInfo.id
			},
    },
    onShow() {
      this.mixinsListApi = uni.getStorageSync('token') ? 'queryReportList' : ''
      this.getData()
    },
    methods: {
    },
  }
</script>

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

  .header {
    width: 100%;
    height: calc(var(--status-bar-height) + 120rpx);
    background: linear-gradient(164deg, #014FA2, #4C8FD6);
  }

  .list {
    width: 100%;
    padding: 29rpx;
    box-sizing: border-box;
    background: #F5F5F5;

    &-item {
      & + & {
        margin-top: 23rpx;
      }
    }
  }
  
	.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>