首页卡片开发

pages/index/components/index-one.vue

@@ -5,11 +5,39 @@
         <image class="mp-background" src="/static/icon/background2.png" mode="aspectFill"></image>
         <!-- #endif -->
         
+        <!-- 企业账号显示卡片 -->
+        <view class="enterprise-card btn-feel" v-if="shouldShowCompanyCard" @click="goToCompanyInfo">
+            <view class="card-content">
+                <!-- 企业图标 -->
+                <view class="company-icon">
+                    <image 
+                        v-if="companyInfo.avatar" 
+                        :src="companyInfo.avatar" 
+                        class="logo-image"
+                        mode="aspectFit"
+                    />
+                    <view v-else class="default-logo">
+                        <uni-icons type="home-filled" size="32" color="#256BFA"></uni-icons>
+                    </view>
+                </view>
+                
+                <!-- 企业信息 -->
+                <view class="company-info">
+                    <view class="company-name">{{ companyInfo.name || '企业名称' }}</view>
+                    <view class="company-details">
+                        <text class="industry">{{ companyInfo.industry || '互联网' }}</text>
+                        <text class="separator">·</text>
+                        <text class="size">{{ companyInfo.scale || '100-999人' }}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
         <view 
             class="nav-hidden hidden-animation" 
             :class="{ 'hidden-height': shouldHideTop }"
         >
-            <view class="container-search">
+            <view class="container-search" v-if="shouldShowJobSeekerContent">
                 <view class="search-input button-click" @click="navTo('/pages/search/search')">
                     <uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
                     <text class="inpute">职位名称、薪资要求等</text>
@@ -93,7 +121,7 @@
         </view>
         
         <!-- 企业用户内容 -->
-        <view class="company-content" v-if="shouldShowCompanyContent">
+        <!-- <view class="company-content" v-if="shouldShowCompanyContent">
             <view class="company-header">
                 <text class="company-title">企业服务</text>
                 <text class="company-subtitle">为您提供专业的企业招聘服务</text>
@@ -125,7 +153,7 @@
                     <view class="company-title">人才库</view>
                 </view>
             </view>
-        </view>
+        </view> -->
         
         <!-- 吸顶筛选区域占位 -->
         <view class="filter-placeholder" v-if="shouldStickyFilter && shouldShowJobSeekerContent"></view>
@@ -378,20 +406,71 @@ const shouldShowJobSeekerContent = computed(() => {
     if (!hasLogin.value) {
         return true;
     }
-    // 登录后根据用户类型判断
-    const userType = userInfo.value?.isCompanyUser;
+    
+    // 优先从store获取，如果为空则从缓存获取
+    const storeIsCompanyUser = userInfo.value?.isCompanyUser;
+    const cachedUserInfo = uni.getStorageSync('userInfo') || {};
+    const cachedIsCompanyUser = cachedUserInfo.isCompanyUser;
+    
+    // 获取用户类型：优先使用store中的isCompanyUser，如果store中没有，使用缓存中的isCompanyUser
+    // 缓存中的值可能是字符串，需要转换为数值类型
+    const userType = storeIsCompanyUser !== undefined ? Number(storeIsCompanyUser) : Number(cachedIsCompanyUser);
+    
     // 企业用户(isCompanyUser=0)不显示求职者内容，其他用户类型显示
     return userType !== 0;
 });
 
+// 企业信息数据
+const companyInfo = reactive({
+    name: '',
+    avatar: '',
+    industry: '',
+    size: '',
+    isVerified: false
+});
+
+// 计算是否显示企业卡片
+const shouldShowCompanyCard = computed(() => {
+    // 未登录时不显示
+    if (!hasLogin.value) {
+        return false;
+    }
+    
+    // 优先从store获取，如果为空则从缓存获取
+    const storeIsCompanyUser = userInfo.value?.isCompanyUser;
+    const cachedUserInfo = uni.getStorageSync('userInfo') || {};
+    const cachedIsCompanyUser = cachedUserInfo.isCompanyUser;
+    
+    // 获取用户类型：优先使用store中的isCompanyUser，如果store中没有，使用缓存中的isCompanyUser
+    // 缓存中的值可能是字符串，需要转换为数值类型
+    const userType = storeIsCompanyUser !== undefined ? Number(storeIsCompanyUser) : Number(cachedIsCompanyUser);
+    
+    // 只有企业用户(isCompanyUser=0)才显示企业卡片
+    if (userType !== 0) {
+        return false;
+    }
+    
+    // 检查企业信息是否已完善
+    return companyInfo.name && companyInfo.name.trim() !== '';
+});
+
 // 计算是否显示企业用户内容
 const shouldShowCompanyContent = computed(() => {
     // 未登录时不显示企业内容
     if (!hasLogin.value) {
         return false;
     }
+    
+    // 优先从store获取，如果为空则从缓存获取
+    const storeIsCompanyUser = userInfo.value?.isCompanyUser;
+    const cachedUserInfo = uni.getStorageSync('userInfo') || {};
+    const cachedIsCompanyUser = cachedUserInfo.isCompanyUser;
+    
+    // 获取用户类型：优先使用store中的isCompanyUser，如果store中没有，使用缓存中的isCompanyUser
+    // 缓存中的值可能是字符串，需要转换为数值类型
+    const userType = storeIsCompanyUser !== undefined ? Number(storeIsCompanyUser) : Number(cachedIsCompanyUser);
+    
     // 只有企业用户(isCompanyUser=0)才显示企业内容
-    const userType = userInfo.value?.isCompanyUser;
     return userType === 0;
 });
 
@@ -404,6 +483,7 @@ import { useScrollDirection } from '@/hook/useScrollDirection';
 import { useColumnCount } from '@/hook/useColumnCount';
 import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
 import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
+// 企业卡片组件已内联到模板中
 // 滚动状态管理
 const shouldHideTop = ref(false);
 const shouldStickyFilter = ref(false);
@@ -489,9 +569,66 @@ const { columnCount, columnSpace } = useColumnCount(() => {
     });
 });
 
+// 获取企业信息
+const getCompanyInfo = () => {
+    try {
+        const cachedUserInfo = uni.getStorageSync('userInfo') || {};
+        console.log('缓存中的userInfo:', cachedUserInfo);
+        
+        // 检查是否有company字段
+        if (cachedUserInfo.company) {
+            const company = cachedUserInfo.company;
+            
+            // 基本信息
+            companyInfo.name = company.name || '';
+            companyInfo.avatar = company.avatar || '';
+            companyInfo.industry = company.industryType || '互联网';
+            companyInfo.size = company.companySize || '100-999人';
+            
+            // 判断是否实名：legalIdCard字段有值则表示已实名
+            companyInfo.isVerified = !!(company.legalIdCard && company.legalIdCard.trim());
+            
+            console.log('企业信息:', {
+                name: companyInfo.name,
+                industry: companyInfo.industry,
+                size: companyInfo.size,
+                isVerified: companyInfo.isVerified
+            });
+        } else {
+            console.log('缓存中没有company字段');
+            // 保持默认值
+        }
+    } catch (error) {
+        console.error('获取企业信息失败:', error);
+        // 保持默认值
+    }
+};
+
+// 跳转到企业信息详情页面
+const goToCompanyInfo = () => {
+    navTo('/pages/mine/company-info');
+};
+
 // 组件初始化时加载数据
 onMounted(() => {
     getJobRecommend('refresh');
+    
+    // 获取企业信息
+    getCompanyInfo();
+    
+    // 监听退出登录事件，显示微信登录弹窗
+    uni.$on('showLoginModal', () => {
+        wxAuthLoginRef.value?.open();
+    });
+});
+
+onUnmounted(() => {
+    uni.$off('showLoginModal');
+});
+
+onShow(() => {
+    // 获取最新的企业信息
+    getCompanyInfo();
 });
 
 // 登录检查函数
@@ -1548,4 +1685,133 @@ defineExpose({ loadData });
 .isBut{
     filter: grayscale(100%);
 }
+
+// 企业账号显示卡片样式
+.enterprise-card
+    margin: 20rpx 28rpx
+    padding: 28rpx
+    background: rgba(255, 255, 255, 0.9)
+    backdrop-filter: blur(20rpx)
+    -webkit-backdrop-filter: blur(20rpx)
+    border-radius: 24rpx
+    border: 1rpx solid rgba(255, 255, 255, 0.4)
+    box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08), 0 2rpx 8rpx rgba(0, 0, 0, 0.04)
+    position: relative
+    overflow: hidden
+    cursor: pointer
+    transition: all 0.3s ease
+    
+    &:active
+        transform: scale(0.98)
+        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12), 0 1rpx 4rpx rgba(0, 0, 0, 0.08)
+    
+    // 玻璃态效果 - 更强烈的渐变
+    &::before
+        content: ''
+        position: absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        background: linear-gradient(135deg, 
+            rgba(255, 255, 255, 0.2) 0%, 
+            rgba(255, 255, 255, 0.1) 50%, 
+            rgba(255, 255, 255, 0.05) 100%)
+        border-radius: 24rpx
+        pointer-events: none
+        z-index: 0
+    
+    // 添加微妙的边框高光
+    &::after
+        content: ''
+        position: absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        border-radius: 24rpx
+        padding: 1rpx
+        background: linear-gradient(135deg, 
+            rgba(255, 255, 255, 0.6) 0%, 
+            rgba(255, 255, 255, 0.2) 100%)
+        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
+        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
+        mask-composite: xor
+        -webkit-mask-composite: xor
+        pointer-events: none
+        z-index: 1
+    
+    .card-content
+        display: flex
+        align-items: center
+        position: relative
+        z-index: 2
+        
+        .company-icon
+            width: 88rpx
+            height: 88rpx
+            border-radius: 18rpx
+            background: linear-gradient(135deg, #256BFA 0%, #4A90E2 100%)
+            display: flex
+            align-items: center
+            justify-content: center
+            margin-right: 28rpx
+            flex-shrink: 0
+            box-shadow: 0 6rpx 16rpx rgba(37, 107, 250, 0.25)
+            position: relative
+            
+            // 添加图标内部高光
+            &::before
+                content: ''
+                position: absolute
+                top: 4rpx
+                left: 4rpx
+                right: 4rpx
+                height: 20rpx
+                background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%)
+                border-radius: 18rpx 18rpx 0 0
+                pointer-events: none
+            
+            .default-logo
+                display: flex
+                align-items: center
+                justify-content: center
+                color: #ffffff
+                
+        .company-info
+            flex: 1
+            min-width: 0
+            z-index: 2
+            position: relative
+            
+            .company-name
+                font-size: 34rpx
+                font-weight: 600
+                color: #000000
+                line-height: 1.3
+                margin-bottom: 10rpx
+                overflow: hidden
+                text-overflow: ellipsis
+                white-space: nowrap
+                font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif
+                
+            .company-details
+                display: flex
+                align-items: center
+                font-size: 26rpx
+                color: #666666
+                line-height: 1.2
+                
+                .industry
+                    color: #666666
+                    font-weight: 400
+                    
+                .separator
+                    margin: 0 10rpx
+                    color: #CCCCCC
+                    font-weight: 300
+                    
+                .size
+                    color: #666666
+                    font-weight: 400
 </style>