瀏覽代碼

✨ feat(homepage): 集成真实银龄岗位和人才数据

- 替换银龄岗位模拟数据,使用真实数据并添加详情页导航功能
- 替换银龄人才模拟数据,使用真实数据并实现数据转换和排序
- 为银龄岗位卡片添加图片显示,支持自定义图片或默认图片
- 优化银龄岗位区域显示逻辑,数据为空时不显示该模块
- 改进银龄岗位和人才数据的排序和切片处理,确保只显示最新3条数据
yourname 7 月之前
父節點
當前提交
13d4cac1f6
共有 1 個文件被更改,包括 99 次插入148 次删除
  1. 99 148
      src/client/mobile/pages/NewHomePage.tsx

+ 99 - 148
src/client/mobile/pages/NewHomePage.tsx

@@ -217,38 +217,15 @@ const NewHomePage: React.FC = () => {
     .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
     .slice(0, 3);
   
-  // 银龄岗数据(使用推荐的岗位中最新发布的3条)
-  const silverPositions = transformJobs(homeData.recommendedJobs || [])
+  // 使用真实的银龄岗数据
+  const silverPositions = transformSilverPositions(homeData.silverPositions || [])
     .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
     .slice(0, 3);
   
-  // 模拟银龄库数据
-  const silverTalents = [
-    {
-      id: 1,
-      name: '李老先生',
-      specialty: '书法大师',
-      city: '北京',
-      createdAt: '2024-07-15',
-      avatar: '/images/elderly-avatar1.jpg'
-    },
-    {
-      id: 2,
-      name: '王奶奶',
-      specialty: '园艺专家',
-      city: '上海',
-      createdAt: '2024-07-14',
-      avatar: '/images/elderly-avatar2.jpg'
-    },
-    {
-      id: 3,
-      name: '张师傅',
-      specialty: '中医养生',
-      city: '杭州',
-      createdAt: '2024-07-13',
-      avatar: '/images/elderly-avatar3.jpg'
-    }
-  ];
+  // 使用真实的银龄人才数据
+  const silverTalents = transformSilverTalents(homeData.silverTalents || [])
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+    .slice(0, 3);
 
   const timeBankActivities = transformTimeBank(homeData.timeBankActivities || []);
 
@@ -717,134 +694,108 @@ const NewHomePage: React.FC = () => {
         </div> */}
 
         
-        <div className="mt-6 px-4">
-          <div className="flex justify-between items-center mb-4">
-            <h2
-              className={`${FONT_STYLES.sectionTitle}`}
-              style={{ color: COLORS.text.primary }}
-            >
-              银龄岗位
-            </h2>
-            <button
-              onClick={() => navigate('/silver-jobs')}
-              className={`${FONT_STYLES.caption} px-4 py-2 rounded-full border transition-all duration-300 hover:shadow-md flex items-center space-x-1`}
-              style={{
-                color: COLORS.text.primary,
-                borderColor: COLORS.ink.medium,
-                backgroundColor: 'transparent'
-              }}
-            >
-              <span>更多岗位</span>
-              <span>→</span>
-            </button>
-          </div>
-          
-          <div className="space-y-3">
-            {[
-              {
-                id: 1,
-                title: '社区养老服务专员',
-                organization: '北京市朝阳区老龄办',
-                budget: '8-12万/年',
-                deadline: '2024-08-15',
-                location: '北京朝阳',
-                category: '养老服务'
-              },
-              {
-                id: 2,
-                title: '老年大学书法教师',
-                organization: '杭州市西湖区老年大学',
-                budget: '6-8万/年',
-                deadline: '2024-08-10',
-                location: '杭州西湖',
-                category: '文化教育'
-              },
-              {
-                id: 3,
-                title: '银龄健康顾问',
-                organization: '上海市静安区卫健委',
-                budget: '10-15万/年',
-                deadline: '2024-08-20',
-                location: '上海静安',
-                category: '健康管理'
-              }
-            ].sort((a,b) => new Date(b.deadline).getTime() - new Date(a.deadline).getTime()).slice(0, 3).map((bid) => (
-              <div
-                key={bid.id}
-                className="flex items-center justify-between p-4 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer backdrop-blur-sm"
+        {silverPositions.length > 0 && (
+          <div className="mt-6 px-4">
+            <div className="flex justify-between items-center mb-4">
+              <h2
+                className={`${FONT_STYLES.sectionTitle}`}
+                style={{ color: COLORS.text.primary }}
+              >
+                银龄岗位
+              </h2>
+              <button
+                onClick={() => navigate('/silver-jobs')}
+                className={`${FONT_STYLES.caption} px-4 py-2 rounded-full border transition-all duration-300 hover:shadow-md flex items-center space-x-1`}
                 style={{
-                  backgroundColor: 'rgba(255,255,255,0.8)',
-                  border: `1px solid ${COLORS.ink.medium}`
+                  color: COLORS.text.primary,
+                  borderColor: COLORS.ink.medium,
+                  backgroundColor: 'transparent'
                 }}
-                onClick={() => navigate(`/silver-jobs`)}
               >
-                <div className="flex items-center flex-1">
-                  <div
-                    className="w-14 h-14 rounded-full flex items-center justify-center mr-4 shadow-sm"
-                    style={{ backgroundColor: COLORS.accent.red, color: 'white' }}
-                  >
-            
-                  </div>
-                  <div className="flex-1">
-                    <h4
-                      className={`font-medium ${FONT_STYLES.body}`}
-                      style={{ color: COLORS.text.primary }}
-                    >
-                      {bid.title}
-                    </h4>
-                    <p
-                      className={`${FONT_STYLES.caption}`}
-                      style={{ color: COLORS.text.secondary }}
-                    >
-                      {bid.organization}
-                    </p>
-                    <div className="flex items-center mt-1 space-x-2">
-                      <span
-                        className={`${FONT_STYLES.small} px-2 py-1 rounded-full flex items-center`}
-                        style={{
-                          backgroundColor: COLORS.accent.green,
-                          color: 'white'
-                        }}
+                <span>更多岗位</span>
+                <span>→</span>
+              </button>
+            </div>
+            
+            <div className="space-y-3">
+              {silverPositions.map((position) => (
+                <div
+                  key={position.id}
+                  className="flex items-center justify-between p-4 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer backdrop-blur-sm"
+                  style={{
+                    backgroundColor: 'rgba(255,255,255,0.8)',
+                    border: `1px solid ${COLORS.ink.medium}`
+                  }}
+                  onClick={() => navigate(`/silver-jobs/${position.id}`)}
+                >
+                  <div className="flex items-center flex-1">
+                    <img
+                      src={position.image || unsplash.getJobImage(position.id)}
+                      alt={position.title}
+                      className="w-14 h-14 rounded-full object-cover mr-4 border-2 shadow-sm"
+                      style={{ borderColor: COLORS.ink.medium }}
+                    />
+                    <div className="flex-1">
+                      <h4
+                        className={`font-medium ${FONT_STYLES.body}`}
+                        style={{ color: COLORS.text.primary }}
                       >
-                        {bid.budget}
-                      </span>
-                      <span
-                        className={`${FONT_STYLES.small} px-2 py-1 rounded-full flex items-center`}
-                        style={{
-                          backgroundColor: COLORS.accent.blue,
-                          color: 'white'
-                        }}
+                        {position.title}
+                      </h4>
+                      <p
+                        className={`${FONT_STYLES.caption}`}
+                        style={{ color: COLORS.text.secondary }}
                       >
-                        <MapPinIcon className="w-3 h-3 mr-1" />
-                        {bid.location}
-                      </span>
+                        {position.organization}
+                      </p>
+                      <div className="flex items-center mt-1 space-x-2">
+                        <span
+                          className={`${FONT_STYLES.small} px-2 py-1 rounded-full flex items-center`}
+                          style={{
+                            backgroundColor: COLORS.accent.green,
+                            color: 'white'
+                          }}
+                        >
+                          {position.budget}
+                        </span>
+                        <span
+                          className={`${FONT_STYLES.small} px-2 py-1 rounded-full flex items-center`}
+                          style={{
+                            backgroundColor: COLORS.accent.blue,
+                            color: 'white'
+                          }}
+                        >
+                          <MapPinIcon className="w-3 h-3 mr-1" />
+                          {position.location}
+                        </span>
+                      </div>
                     </div>
                   </div>
+                  <div className="text-right flex flex-col items-end">
+                    <span
+                      className={`text-xs px-2 py-1 rounded-full mb-1`}
+                      style={{
+                        color: COLORS.text.light,
+                        backgroundColor: COLORS.ink.light
+                      }}
+                    >
+                      截止: {new Date(position.deadline).toLocaleDateString()}
+                    </span>
+                    <span
+                      className={`text-xs px-2 py-1 rounded-full`}
+                      style={{
+                        backgroundColor: COLORS.accent.green,
+                        color: 'white'
+                      }}
+                    >
+                      {position.category}
+                    </span>
+                  </div>
                 </div>
-                <div className="text-right flex flex-col items-end">
-                  <span
-                    className={`text-xs px-2 py-1 rounded-full mb-1`}
-                    style={{
-                      color: COLORS.text.light,
-                      backgroundColor: COLORS.ink.light
-                    }}
-                  >
-                    截止: {new Date(bid.deadline).toLocaleDateString()}
-                  </span>
-                  <span
-                    className={`text-xs px-2 py-1 rounded-full`}
-                    style={{
-                      backgroundColor: COLORS.accent.green,
-                      color: 'white'
-                    }}
-                  >
-                    {bid.category}
-                  </span>
-                </div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
-        </div>
+        )}
 
         {/* 时间银行活动 */}
         {timeBankActivities.length > 0 && (