OPC-Hub/training
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序：人才列表真实头像 + OPC/求职者徽章芯片

Browse Source 
- 头像：人才档案 avatar 字段加载真实头像（圆形裁剪），
  加载失败/无头像时回退渐变首字母，不白屏
- OPC 徽章：昵称右侧小巧胶囊徽章（品牌渐变 + 前导光点 + 微光投影），
  求职者用中性浅灰徽章，替代原纯文本标识
This commit is contained in:
Pine
2026-09-08 23:43:51 +08:00
parent e1d99d6cc3
commit d01af629f2
2 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/src/pages/hall/index.jsx
+17 -3
View File
@@ -1,4 +1,4 @@
import { View, Text, Button, ScrollView } from '@tarojs/components';
import { View, Text, Button, ScrollView, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState, useEffect, useCallback } from 'react';
import { hallOverview, hallTasks, hallTalents, hallJobs, hallServices } from '@/utils/hall';
@@ -150,6 +150,8 @@ function TasksPane({ mode, onMode }) {
function TalentsPane({ ttype, onTtype }) {
const [items, setItems] = useState(null);
const [err, setErr] = useState('');
// 头像加载失败的头像集合：回退首字母
const [broken, setBroken] = useState({});
useEffect(() => {
hallTalents({ type: ttype }).then((d) => setItems(d.items || [])).catch((e) => setErr(e.message));
}, [ttype]);
@@ -162,9 +164,21 @@ function TalentsPane({ ttype, onTtype }) {
{(items || []).map((t) => (
<View key={t.userId} className="hl-card" onClick={() => Taro.navigateTo({ url: `/pages-extra/hall-talent-detail/index?id=${t.userId}` })}>
<View className="hl-talent">
<View className="hl-avatar"><Text>{(t.displayName || '·').slice(0, 1)}</Text></View>
<View className="hl-avatar">
{t.avatar && !broken[t.userId] ? (
<Image className="hl-avatar-img" src={t.avatar} mode="aspectFill"
onError={() => setBroken((b) => ({ ...b, [t.userId]: true }))} />
) : (
<Text className="hl-avatar-letter">{(t.displayName || '·').slice(0, 1)}</Text>
)}
</View>
<View style={{ flex: 1, minWidth: 0 }}>
<Text className="hl-name" style={{ marginTop: 0 }}>{t.displayName} · {t.talentType === 'seeker' ? '求职者' : 'OPC'}</Text>
<View className="hl-tname">
<Text className="hl-name" style={{ marginTop: 0 }}>{t.displayName}</Text>
<Text className={`hl-badge${t.talentType === 'seeker' ? ' hl-badge--seeker' : ' hl-badge--opc'}`}>
{t.talentType === 'seeker' ? '求职者' : 'OPC'}
</Text>
</View>
<Text className="hl-desc">{t.headline}</Text>
<View className="hl-tags" style={{ marginTop: 10 }}>
{(t.fields || []).map((x) => <Text className="hl-tag" key={x}>{x}</Text>)}
miniprogram/src/styles/hall.scss
+15 -1
View File
@@ -78,7 +78,21 @@
/* 人才 */
.hl-talent { display: flex; gap: 20rpx; align-items: center; }
.hl-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: linear-gradient(135deg, #4d7cfe, #7a5ff0);
color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; flex: none; }
color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; flex: none; overflow: hidden; }
.hl-avatar-img { width: 88rpx; height: 88rpx; border-radius: 50%; background: #eef1f8; }
.hl-avatar-letter { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* 昵称行：姓名 + 身份徽章芯片 */
.hl-tname { display: flex; align-items: center; }
.hl-badge { display: inline-flex; align-items: center; height: 32rpx; padding: 0 14rpx; margin-left: 12rpx;
border-radius: 999rpx; font-size: 20rpx; font-weight: 600; line-height: 1; flex: none; }
/* OPC 徽章：品牌渐变 + 前导光点 */
.hl-badge--opc { background: linear-gradient(135deg, #6b8cff 0%, #9b6bff 100%); color: #fff;
box-shadow: 0 4rpx 14rpx rgba(107, 140, 255, .35); }
.hl-badge--opc::before { content: ''; width: 8rpx; height: 8rpx; border-radius: 50%; margin-right: 8rpx;
background: rgba(255, 255, 255, .9); box-shadow: 0 0 6rpx rgba(255, 255, 255, .8); }
/* 求职者徽章：中性浅灰 */
.hl-badge--seeker { background: #f0f2f7; color: #8a93a6; border: 1rpx solid #e3e7ef; }
/* 帖子 */
.hl-post { background: #fff; border-radius: 24rpx; padding: 26rpx 28rpx; margin: 0 0 20rpx;