首页卡片开发

This commit is contained in:
冯辉
2025-10-24 16:54:52 +08:00
parent 92ee5c5311
commit 2d6370b796
22 changed files with 896 additions and 205 deletions

View File

@@ -1,16 +1,21 @@
<template>
<AppLayout title="我的" back-gorund-color="#F4F4F4">
<AppLayout back-gorund-color="#F4F4F4">
<!-- 自定义tabbar -->
<CustomTabBar :currentPage="4" />
<!-- 企业信息卡片 -->
<view class="company-info-card btn-feel" @click="goToCompanyInfo">
<view class="company-avatar">
<image class="company-avatar-img" :src="companyInfo.avatar || '/static/icon/company-default.png'"></image>
<image class="company-avatar-img" :src="companyInfo.avatar || '/static/imgs/avatar.jpg'"></image>
</view>
<view class="company-details">
<view class="company-name">{{ companyInfo.name || '科里喀什分公司' }}</view>
<view class="company-completeness">信息完整度 {{ companyInfo.completeness || '100%' }}</view>
<view class="company-name">{{ companyInfo.name || '暂无公司名称' }}</view>
<view class="company-completeness">
信息完整度 {{ companyInfo.completeness || '100%' }}
<text class="verification-status" :class="{ 'verified': companyInfo.isVerified, 'unverified': !companyInfo.isVerified }">
{{ companyInfo.isVerified ? '已实名' : '未实名' }}
</text>
</view>
</view>
<view class="company-arrow">
<uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
@@ -22,14 +27,16 @@
<view class="service-title">服务专区</view>
<view class="service-item btn-feel">
<view class="service-left">
<image class="service-icon" src="/static/icon/real-name-auth.png"></image>
<uni-icons type="contact" size="20" color="#256BFA"></uni-icons>
<text class="service-text">实名认证</text>
</view>
<view class="service-status">已通过</view>
<view class="service-status" :class="{ 'verified': companyInfo.isVerified, 'unverified': !companyInfo.isVerified }">
{{ companyInfo.isVerified ? '已通过' : '未认证' }}
</view>
</view>
<view class="service-item btn-feel">
<view class="service-left">
<image class="service-icon" src="/static/icon/notification.png"></image>
<uni-icons type="notification" size="20" color="#256BFA"></uni-icons>
<text class="service-text">通知与提醒</text>
</view>
<view class="service-status">已开启</view>
@@ -57,17 +64,19 @@
</template>
<script setup>
import { reactive, inject, ref, onMounted } from 'vue';
import { reactive, inject, ref, onMounted, onUnmounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo } = inject('globalFunction');
const popup = ref(null);
// 企业信息数据
const companyInfo = reactive({
name: '科里喀什分公司',
avatar: '/static/icon/company-avatar.png',
completeness: '100%'
name: '',
avatar: '/static/imgs/avatar.jpg',
completeness: '100%',
isVerified: false // 实名状态
});
function goToCompanyInfo() {
@@ -83,9 +92,11 @@ function close() {
}
function confirm() {
// 这里可以调用退出登录的API
console.log('退出登录');
// 跳转到登录页面或首页
// 调用退出登录
useUserStore().logOut();
// 关闭弹窗
popup.value.close();
// 跳转到首页
uni.reLaunch({
url: '/pages/index/index'
});
@@ -96,11 +107,45 @@ onShow(() => {
getCompanyInfo();
});
// 监听退出登录事件,显示微信登录弹窗
onMounted(() => {
uni.$on('showLoginModal', () => {
// 这里可以显示微信登录弹窗
// 由于这个页面没有 WxAuthLogin 组件,我们跳转到首页让首页处理
uni.reLaunch({
url: '/pages/index/index'
});
});
});
onUnmounted(() => {
uni.$off('showLoginModal');
});
// 从缓存获取公司信息
function getCompanyInfo() {
// 这里可以调用API获取企业信息
// $api.createRequest('/app/company/info').then((resData) => {
// Object.assign(companyInfo, resData.data);
// });
try {
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
console.log('缓存中的userInfo:', cachedUserInfo);
// 检查是否有company字段
if (cachedUserInfo.company) {
companyInfo.name = cachedUserInfo.company.name || '';
// 判断是否实名legalIdCard字段有值则表示已实名
companyInfo.isVerified = !!(cachedUserInfo.company.legalIdCard && cachedUserInfo.company.legalIdCard.trim());
console.log('公司名称:', companyInfo.name);
console.log('实名状态:', companyInfo.isVerified);
console.log('legalIdCard值:', cachedUserInfo.company.legalIdCard);
} else {
console.log('缓存中没有company字段');
companyInfo.name = '';
companyInfo.isVerified = false;
}
} catch (error) {
console.error('获取公司信息失败:', error);
companyInfo.name = '';
companyInfo.isVerified = false;
}
}
</script>
@@ -140,6 +185,25 @@ function getCompanyInfo() {
.company-completeness {
font-size: 28rpx;
color: #6C7282;
display: flex;
align-items: center;
gap: 16rpx;
.verification-status {
font-size: 24rpx;
padding: 4rpx 12rpx;
border-radius: 12rpx;
&.verified {
background-color: #E8F5E8;
color: #52C41A;
}
&.unverified {
background-color: #FFF2E8;
color: #FA8C16;
}
}
}
}
@@ -177,21 +241,24 @@ function getCompanyInfo() {
display: flex;
align-items: center;
.service-icon {
width: 44rpx;
height: 44rpx;
margin-right: 16rpx;
}
.service-text {
font-size: 28rpx;
color: #333333;
margin-left: 16rpx;
}
}
.service-status {
font-size: 28rpx;
color: #6E6E6E;
&.verified {
color: #52C41A;
}
&.unverified {
color: #FA8C16;
}
}
}
}