首页卡片开发
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user