Преглед изворни кода

feat(index): 更新首页功能模块与健康资讯展示

- 修改默认用户名显示为"未登录"
- 调整功能模块标题与描述内容
- 新增健康资讯卡片模块展示健康相关内容
- 移除重复新闻条目并优化列表渲染逻辑
- 删除冗余的权限检查跳转逻辑
- 调整页面样式细节包括间距、边距等
- 引入新的图标资源用于图片占位符显示
- 优化功能项样式类名并更新颜色配置
- 增加底部安全区域适配防止内容被遮挡
mcbaiyun пре 1 месец
родитељ
комит
5a50b4f052
2 измењених фајлова са 155 додато и 30 уклоњено
  1. 154 30
      src/pages/public/index/index.vue
  2. 1 0
      src/static/icons/remixicon/image-line.svg

+ 154 - 30
src/pages/public/index/index.vue

@@ -10,7 +10,7 @@
             </view>
           </view>
           <view class="user-details">
-            <text class="username">{{ user.nickname || '慢病患者' }}</text>
+            <text class="username">{{ user.nickname || '未登录' }}</text>
             <text class="user-age" v-if="user.age">年龄: {{ user.age }}</text>
             <text class="user-id" v-if="user.openid">ID: {{ user.openid }}</text>
           </view>
@@ -19,42 +19,63 @@
 
       <view class="function-container">
         <view class="function-row">
-          <view class="function-item health-data">
+          <view class="function-item green">
             <view class="item-content">
               <view class="title-row">
                 <view class="item-line"></view>
-                <text class="item-title">健康数据</text>
+                <text class="item-title">我的医生</text>
               </view>
-              <text class="item-desc">查看您的健康数据</text>
+              <text class="item-desc">一键预约复诊</text>
             </view>
           </view>
-          <view class="function-item reminder">
+          <view class="function-item blue">
             <view class="item-content">
               <view class="title-row">
                 <view class="item-line"></view>
-                <text class="item-title">提醒管理</text>
+                <text class="item-title">疑问解答</text>
               </view>
-              <text class="item-desc">管理健康提醒</text>
+              <text class="item-desc">解答您的健康疑问</text>
             </view>
           </view>
+
         </view>
         <view class="function-row">
-          <view class="function-item doctor">
+          <view class="function-item orange">
             <view class="item-content">
               <view class="title-row">
                 <view class="item-line"></view>
-                <text class="item-title">我的医生</text>
+                <text class="item-title">提醒管理</text>
               </view>
-              <text class="item-desc">联系您的医生</text>
+              <text class="item-desc">管理您的健康提醒</text>
             </view>
           </view>
-          <view class="function-item profile">
+          <view class="function-item purple">
             <view class="item-content">
               <view class="title-row">
                 <view class="item-line"></view>
                 <text class="item-title">个人中心</text>
               </view>
-              <text class="item-desc">管理个人信息</text>
+              <text class="item-desc">管理您的个人健康档案</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="health-news-card">
+        <view class="card-header">
+          <text class="card-title">健康资讯</text>
+        </view>
+        <view class="card-content">
+          <view class="news-item" v-for="(news, index) in newsList" :key="index">
+            <view v-if="news.image" class="news-image-container">
+              <image class="news-image" :src="news.image" mode="aspectFill" />
+            </view>
+            <view v-else class="news-placeholder">
+              <image class="placeholder-icon" src="/static/icons/remixicon/image-line.svg" />
+            </view>
+            <view class="news-text">
+              <text class="news-title">{{ news.title }}</text>
+              <text class="news-desc">{{ news.desc }}</text>
             </view>
           </view>
         </view>
@@ -90,6 +111,30 @@ const avatarSrc = computed(() => {
   return defaultAvatarUrl
 })
 
+const newsList = ref([
+  {
+    title: '健康饮食指南',
+    desc: '了解均衡饮食的重要性,掌握健康饮食的基本原则。',
+    image: '/static/carousel/BHFIIABBCDJII-5kCEkD6zh9.png'
+  },
+  {
+    title: '运动与健康',
+    desc: '定期运动对身体的好处,以及如何制定适合自己的运动计划。'
+  },
+  {
+    title: '心理健康维护',
+    desc: '保持良好的心理状态,应对日常生活中的压力和挑战。'
+  },
+  {
+    title: '运动与健康',
+    desc: '定期运动对身体的好处,以及如何制定适合自己的运动计划。'
+  },
+  {
+    title: '心理健康维护',
+    desc: '保持良好的心理状态,应对日常生活中的压力和挑战。'
+  }
+])
+
 const loadUser = () => {
   try {
     const u = uni.getStorageSync('user_info')
@@ -118,13 +163,6 @@ const fetchUserInfo = async () => {
     uni.hideLoading()
     console.log('User info response:', response)
     const resp = response.data as any
-    if (response.statusCode === 401) {
-      uni.removeStorageSync('token')
-      uni.removeStorageSync('role')
-      user.value = {}
-      uni.reLaunch({ url: '/pages/public/login/index' })
-      return
-    }
     if (resp && resp.code === 200 && resp.data) {
       user.value = resp.data
       uni.setStorageSync('user_info', resp.data)
@@ -140,9 +178,7 @@ const fetchUserInfo = async () => {
 
 onShow(() => {
   const token = uni.getStorageSync('token')
-  if (!token) {
-    uni.reLaunch({ url: '/pages/public/login/index' })
-  } else {
+  if (token) {
     fetchUserInfo()
   }
 })
@@ -155,13 +191,13 @@ function handleScan(res: any) {
   } else {
     uni.showToast({ title: '未识别到有效内容', icon: 'none' })
   }
-}
-</script>
+}</script>
 
 <style>
 .page-container {
   min-height: 100vh;
   padding-top: calc(var(--status-bar-height) + 44px);
+  padding-bottom: 100rpx;
   box-sizing: border-box;
   justify-content: center;
   align-items: center;
@@ -175,7 +211,7 @@ function handleScan(res: any) {
 .user-info {
   /* background-color: #fff; */
   padding: 40rpx;
-  margin-top: 10rpx;
+  margin-top: 0rpx;
 }
 
 .avatar-section {
@@ -274,25 +310,25 @@ function handleScan(res: any) {
 }
 
 .item-line {
-  width: 6rpx;
+  width: 8rpx;
   height: 48rpx;
   margin-right: 15rpx;
   border-radius: 10rpx;
 }
 
-.health-data .item-line {
+.green .item-line {
   background-color: #2ed573;
 }
 
-.reminder .item-line {
+.blue .item-line {
   background-color: #3742fa;
 }
 
-.doctor .item-line {
+.orange .item-line {
   background-color: #ffa502;
 }
 
-.profile .item-line {
+.purple .item-line {
   background-color: #9c88ff;
 }
 
@@ -306,4 +342,92 @@ function handleScan(res: any) {
   font-size: 28rpx;
   color: #666;
 }
+
+.health-news-card {
+  background-color: #fff;
+  border-radius: 20rpx;
+  margin: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 20rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.card-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.card-content {
+  padding: 20rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.news-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.news-item:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.news-image-container {
+  width: 180rpx;
+  height: 130rpx;
+  border-radius: 10rpx;
+  margin-right: 20rpx;
+  overflow: hidden;
+}
+
+.news-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.news-placeholder {
+  width: 180rpx;
+  height: 130rpx;
+  background-color: #f0f0f0;
+  border-radius: 10rpx;
+  margin-right: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder-icon {
+  width: 40rpx;
+  height: 40rpx;
+  opacity: 0.5;
+}
+
+.news-text {
+  flex: 1;
+}
+
+.news-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+.news-desc {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.4;
+}
 </style>

+ 1 - 0
src/static/icons/remixicon/image-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="rgba(116,116,116,1)"><path d="M2.9918 21C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918ZM20 15V5H4V19L14 9L20 15ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>