YY_MP_REFACTOR/src/pages/information/components/shared/LoginRequiredState.vue

<template>
  <view class="empty-state">
    <view class="empty-icon">
      <text class="empty-icon-text">!</text>
    </view>

    <text class="empty-title">{{ title }}</text>
    <text class="empty-desc">{{ description }}</text>

    <button class="login-btn" hover-class="login-btn-hover" @tap="handleGoLogin">
      {{ buttonText }}
    </button>
  </view>
</template>

<script setup lang="ts">
interface Props {
  title?: string
  description?: string
  buttonText?: string
  loginUrl?: string
  enableRedirect?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '暂无内容',
  description: '登录后可查看学术信息和产品相册',
  buttonText: '去登录',
  loginUrl: '/pages/login/index',
  enableRedirect: true,
})

const handleGoLogin = (): void => {
  uni.navigateTo({
    url: props.loginUrl,
  })
}
</script>

<style scoped lang="scss">
.empty-state {
  min-height: calc(100vh - 88rpx);
  box-sizing: border-box;
  padding: 180rpx 48rpx 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #fff;
}

.empty-icon {
  width: 128rpx;
  height: 128rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f2f8ff;
}

.empty-icon-text {
  font-size: 72rpx;
  font-weight: 700;
  color: #40a9ff;
}

.empty-title {
  margin-top: 36rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.empty-desc {
  margin-top: 16rpx;
  font-size: 26rpx;
  line-height: 38rpx;
  color: #999;
  text-align: center;
}

.login-btn {
  width: 320rpx;
  height: 80rpx;
  margin-top: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999rpx;
  border: none;
  background: #40a9ff;
  color: #fff;
  font-size: 30rpx;
  line-height: 80rpx;
}

.login-btn::after {
  border: none;
}

.login-btn-hover {
  opacity: 0.85;
}
</style>