gupiao-web/src/components/LoginGuide.vue

<template>
  <view class="login-guide" v-if="!isLoggedIn">
    <view class="guide-content">
      <image class="guide-icon" src="/static/images/login-icon.png" mode="aspectFit"></image>
      <text class="guide-title">{{ title || '登录后查看更多内容' }}</text>
      <text class="guide-desc">{{ desc || '登录后可以使用完整功能' }}</text>
      <button class="guide-btn" @click="goToLogin">立即登录</button>
    </view>
  </view>
</template>

<script>
import { isLoggedIn } from '@/utils/auth.js'

export default {
  props: {
    title: {
      type: String,
      default: '登录后查看更多内容'
    },
    desc: {
      type: String,
      default: '登录后可以使用完整功能'
    }
  },
  
  data() {
    return {
      isLoggedIn: false
    }
  },
  
  onShow() {
    this.checkLoginStatus()
  },
  
  methods: {
    checkLoginStatus() {
      this.isLoggedIn = isLoggedIn()
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
}
</script>

<style scoped>
.login-guide {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6fb;
}

.guide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 40rpx;
}

.guide-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
  opacity: 0.6;
}

.guide-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
}

.guide-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 60rpx;
}

.guide-btn {
  width: 400rpx;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>