refactor: 将本地图片资源替换为CDN链接并优化页面样式
重构多个页面的图片资源引用,将本地图片替换为CDN链接 优化ActivitiesCover页面布局和样式,简化海报展示逻辑 更新MyFamily页面数据获取逻辑,使用真实API数据 删除不再使用的本地图片资源文件
Showing
11 changed files
with
139 additions
and
302 deletions
| 1 | -<svg width="400" height="200" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| 2 | - <!-- 背景渐变 --> | ||
| 3 | - <defs> | ||
| 4 | - <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | ||
| 5 | - <stop offset="0%" style="stop-color:#E3F2FD;stop-opacity:1" /> | ||
| 6 | - <stop offset="100%" style="stop-color:#BBDEFB;stop-opacity:1" /> | ||
| 7 | - </linearGradient> | ||
| 8 | - </defs> | ||
| 9 | - | ||
| 10 | - <!-- 背景 --> | ||
| 11 | - <rect width="400" height="200" fill="url(#bg-gradient)"/> | ||
| 12 | - | ||
| 13 | - <!-- 房子图标 --> | ||
| 14 | - <g transform="translate(150, 60)"> | ||
| 15 | - <!-- 房子主体 --> | ||
| 16 | - <rect x="20" y="40" width="60" height="50" fill="#FFF3E0" stroke="#FF9800" stroke-width="2" rx="4"/> | ||
| 17 | - | ||
| 18 | - <!-- 屋顶 --> | ||
| 19 | - <polygon points="10,45 50,15 90,45" fill="#FF5722" stroke="#D84315" stroke-width="2"/> | ||
| 20 | - | ||
| 21 | - <!-- 门 --> | ||
| 22 | - <rect x="35" y="65" width="15" height="25" fill="#8D6E63" rx="2"/> | ||
| 23 | - <circle cx="46" cy="77" r="1.5" fill="#FFF"/> | ||
| 24 | - | ||
| 25 | - <!-- 窗户 --> | ||
| 26 | - <rect x="25" y="50" width="12" height="10" fill="#81D4FA" stroke="#0277BD" stroke-width="1" rx="1"/> | ||
| 27 | - <rect x="63" y="50" width="12" height="10" fill="#81D4FA" stroke="#0277BD" stroke-width="1" rx="1"/> | ||
| 28 | - | ||
| 29 | - <!-- 窗户十字 --> | ||
| 30 | - <line x1="31" y1="50" x2="31" y2="60" stroke="#0277BD" stroke-width="0.5"/> | ||
| 31 | - <line x1="25" y1="55" x2="37" y2="55" stroke="#0277BD" stroke-width="0.5"/> | ||
| 32 | - <line x1="69" y1="50" x2="69" y2="60" stroke="#0277BD" stroke-width="0.5"/> | ||
| 33 | - <line x1="63" y1="55" x2="75" y2="55" stroke="#0277BD" stroke-width="0.5"/> | ||
| 34 | - </g> | ||
| 35 | - | ||
| 36 | - <!-- 文字 --> | ||
| 37 | - <text x="200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666" font-weight="500">温馨家庭</text> | ||
| 38 | - <text x="200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#999">点击上传家庭封面图</text> | ||
| 39 | -</svg> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
19.4 KB
src/assets/images/welcome.png
0 → 100644
2.01 MB
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-08-27 17:44:10 | 2 | * @Date: 2025-08-27 17:44:10 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-08-29 11:35:46 | 4 | + * @LastEditTime: 2025-09-02 21:37:13 |
| 5 | * @FilePath: /lls_program/src/components/BottomNav.vue | 5 | * @FilePath: /lls_program/src/components/BottomNav.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -23,14 +23,15 @@ | ... | @@ -23,14 +23,15 @@ |
| 23 | <script setup> | 23 | <script setup> |
| 24 | import { computed, shallowRef } from 'vue'; | 24 | import { computed, shallowRef } from 'vue'; |
| 25 | import Taro from '@tarojs/taro'; | 25 | import Taro from '@tarojs/taro'; |
| 26 | -import homeIcon from '@/assets/images/icon/home.svg'; | 26 | +// |
| 27 | -import homeIconActive from '@/assets/images/icon/home_active.svg'; | 27 | +const homeIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/home.svg'; |
| 28 | -import rewardsIcon from '@/assets/images/icon/rewards.svg'; | 28 | +const homeIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/home_active.svg'; |
| 29 | -import rewardsIconActive from '@/assets/images/icon/rewards_active.svg'; | 29 | +const rewardsIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/rewards.svg'; |
| 30 | -import activitiesIcon from '@/assets/images/icon/activities.svg'; | 30 | +const rewardsIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/rewards_active.svg'; |
| 31 | -import activitiesIconActive from '@/assets/images/icon/activities_active.svg'; | 31 | +const activitiesIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/activities.svg'; |
| 32 | -import meIcon from '@/assets/images/icon/me.svg'; | 32 | +const activitiesIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/activities_active.svg'; |
| 33 | -import meIconActive from '@/assets/images/icon/me_active.svg'; | 33 | +const meIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/me.svg'; |
| 34 | +const meIconActive = 'https://cdn.ipadbiz.cn/lls_prog/icon/me_active.svg'; | ||
| 34 | 35 | ||
| 35 | const navItems = shallowRef([ | 36 | const navItems = shallowRef([ |
| 36 | { path: '/pages/Dashboard/index', icon: homeIcon, activeIcon: homeIconActive, label: '首页' }, | 37 | { path: '/pages/Dashboard/index', icon: homeIcon, activeIcon: homeIconActive, label: '首页' }, | ... | ... |
| 1 | .activities-cover-container { | 1 | .activities-cover-container { |
| 2 | - width: 100%; | ||
| 3 | - min-height: 100vh; | ||
| 4 | - background-color: #f5f5f5; | ||
| 5 | - display: flex; | ||
| 6 | - flex-direction: column; | ||
| 7 | -} | ||
| 8 | - | ||
| 9 | -// 海报区域 | ||
| 10 | -.poster-section { | ||
| 11 | position: relative; | 2 | position: relative; |
| 12 | width: 100%; | 3 | width: 100%; |
| 13 | - height: 500rpx; | 4 | + height: 100vh; |
| 14 | overflow: hidden; | 5 | overflow: hidden; |
| 15 | } | 6 | } |
| 16 | 7 | ||
| 17 | -.poster-image { | 8 | +// 背景图片 |
| 9 | +.background-image { | ||
| 10 | + position: absolute; | ||
| 11 | + top: 0; | ||
| 12 | + left: 0; | ||
| 18 | width: 100%; | 13 | width: 100%; |
| 19 | height: 100%; | 14 | height: 100%; |
| 20 | - object-fit: cover; | 15 | + object-fit: contain; |
| 16 | + object-position: top center; | ||
| 17 | + z-index: 1; | ||
| 21 | } | 18 | } |
| 22 | 19 | ||
| 23 | -.poster-overlay { | 20 | +// 为容器添加背景色,避免下方空白 |
| 21 | +.activities-cover-container::before { | ||
| 22 | + content: ''; | ||
| 24 | position: absolute; | 23 | position: absolute; |
| 25 | - bottom: 0; | 24 | + top: 0; |
| 26 | left: 0; | 25 | left: 0; |
| 27 | - right: 0; | 26 | + width: 100%; |
| 28 | - background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); | 27 | + height: 100%; |
| 29 | - padding: 60rpx 40rpx 40rpx; | 28 | + background: linear-gradient(180deg, #f0f8ff 0%, #e6f3ff 50%, #ddeeff 100%); |
| 30 | - color: white; | 29 | + z-index: 0; |
| 31 | -} | ||
| 32 | - | ||
| 33 | -.activity-title { | ||
| 34 | - font-size: 48rpx; | ||
| 35 | - font-weight: bold; | ||
| 36 | - margin-bottom: 16rpx; | ||
| 37 | - text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5); | ||
| 38 | -} | ||
| 39 | - | ||
| 40 | -.activity-subtitle { | ||
| 41 | - font-size: 28rpx; | ||
| 42 | - margin-bottom: 12rpx; | ||
| 43 | - opacity: 0.9; | ||
| 44 | -} | ||
| 45 | - | ||
| 46 | -.activity-date { | ||
| 47 | - font-size: 24rpx; | ||
| 48 | - opacity: 0.8; | ||
| 49 | - display: flex; | ||
| 50 | - align-items: center; | ||
| 51 | - | ||
| 52 | - &::before { | ||
| 53 | - content: '📅'; | ||
| 54 | - margin-right: 8rpx; | ||
| 55 | - } | ||
| 56 | } | 30 | } |
| 57 | 31 | ||
| 58 | // 分享按钮 | 32 | // 分享按钮 |
| ... | @@ -62,114 +36,32 @@ | ... | @@ -62,114 +36,32 @@ |
| 62 | right: 40rpx; | 36 | right: 40rpx; |
| 63 | width: 80rpx; | 37 | width: 80rpx; |
| 64 | height: 80rpx; | 38 | height: 80rpx; |
| 65 | - background-color: rgba(0, 0, 0, 0.5); | 39 | + background-color: rgba(0, 0, 0, 0.6); |
| 66 | border-radius: 50%; | 40 | border-radius: 50%; |
| 67 | display: flex; | 41 | display: flex; |
| 68 | align-items: center; | 42 | align-items: center; |
| 69 | justify-content: center; | 43 | justify-content: center; |
| 70 | color: white; | 44 | color: white; |
| 71 | - font-size: 32rpx; | 45 | + font-size: 28rpx; |
| 72 | z-index: 10; | 46 | z-index: 10; |
| 47 | + backdrop-filter: blur(10rpx); | ||
| 73 | 48 | ||
| 74 | &:active { | 49 | &:active { |
| 75 | - background-color: rgba(0, 0, 0, 0.7); | 50 | + background-color: rgba(0, 0, 0, 0.8); |
| 76 | } | 51 | } |
| 77 | } | 52 | } |
| 78 | 53 | ||
| 79 | -// 详情区域 | ||
| 80 | -.details-section { | ||
| 81 | - flex: 1; | ||
| 82 | - padding: 40rpx; | ||
| 83 | - background-color: white; | ||
| 84 | -} | ||
| 85 | - | ||
| 86 | -.section-title { | ||
| 87 | - font-size: 32rpx; | ||
| 88 | - font-weight: bold; | ||
| 89 | - color: #333; | ||
| 90 | - margin: 40rpx 0 24rpx 0; | ||
| 91 | - position: relative; | ||
| 92 | - | ||
| 93 | - &:first-child { | ||
| 94 | - margin-top: 0; | ||
| 95 | - } | ||
| 96 | - | ||
| 97 | - &::before { | ||
| 98 | - content: ''; | ||
| 99 | - position: absolute; | ||
| 100 | - left: -16rpx; | ||
| 101 | - top: 50%; | ||
| 102 | - transform: translateY(-50%); | ||
| 103 | - width: 6rpx; | ||
| 104 | - height: 24rpx; | ||
| 105 | - background-color: #1890ff; | ||
| 106 | - border-radius: 3rpx; | ||
| 107 | - } | ||
| 108 | -} | ||
| 109 | - | ||
| 110 | -.activity-description { | ||
| 111 | - font-size: 28rpx; | ||
| 112 | - line-height: 1.6; | ||
| 113 | - color: #666; | ||
| 114 | - margin-bottom: 20rpx; | ||
| 115 | -} | ||
| 116 | - | ||
| 117 | -.rules-list { | ||
| 118 | - margin-bottom: 20rpx; | ||
| 119 | -} | ||
| 120 | - | ||
| 121 | -.rule-item { | ||
| 122 | - font-size: 26rpx; | ||
| 123 | - line-height: 1.5; | ||
| 124 | - color: #666; | ||
| 125 | - margin-bottom: 16rpx; | ||
| 126 | - padding-left: 20rpx; | ||
| 127 | - position: relative; | ||
| 128 | - | ||
| 129 | - &::before { | ||
| 130 | - content: ''; | ||
| 131 | - position: absolute; | ||
| 132 | - left: 0; | ||
| 133 | - top: 20rpx; | ||
| 134 | - width: 8rpx; | ||
| 135 | - height: 8rpx; | ||
| 136 | - background-color: #1890ff; | ||
| 137 | - border-radius: 50%; | ||
| 138 | - } | ||
| 139 | -} | ||
| 140 | - | ||
| 141 | -.rewards-list { | ||
| 142 | - display: flex; | ||
| 143 | - flex-direction: column; | ||
| 144 | - gap: 16rpx; | ||
| 145 | -} | ||
| 146 | - | ||
| 147 | -.reward-item { | ||
| 148 | - display: flex; | ||
| 149 | - align-items: center; | ||
| 150 | - padding: 20rpx; | ||
| 151 | - background-color: #f8f9fa; | ||
| 152 | - border-radius: 12rpx; | ||
| 153 | - border-left: 6rpx solid #52c41a; | ||
| 154 | -} | ||
| 155 | - | ||
| 156 | -.reward-icon { | ||
| 157 | - font-size: 32rpx; | ||
| 158 | - margin-right: 16rpx; | ||
| 159 | -} | ||
| 160 | - | ||
| 161 | -.reward-text { | ||
| 162 | - font-size: 26rpx; | ||
| 163 | - color: #333; | ||
| 164 | - flex: 1; | ||
| 165 | -} | ||
| 166 | - | ||
| 167 | // 底部区域 | 54 | // 底部区域 |
| 168 | .bottom-section { | 55 | .bottom-section { |
| 56 | + position: absolute; | ||
| 57 | + bottom: 0; | ||
| 58 | + left: 0; | ||
| 59 | + right: 0; | ||
| 169 | padding: 40rpx; | 60 | padding: 40rpx; |
| 170 | padding-bottom: 180rpx; // 为底部导航留出空间 | 61 | padding-bottom: 180rpx; // 为底部导航留出空间 |
| 171 | - background-color: white; | 62 | + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); |
| 172 | - border-top: 1rpx solid #f0f0f0; | 63 | + backdrop-filter: blur(20rpx); |
| 64 | + z-index: 5; | ||
| 173 | } | 65 | } |
| 174 | 66 | ||
| 175 | .location-tip { | 67 | .location-tip { |
| ... | @@ -177,10 +69,11 @@ | ... | @@ -177,10 +69,11 @@ |
| 177 | align-items: center; | 69 | align-items: center; |
| 178 | justify-content: center; | 70 | justify-content: center; |
| 179 | padding: 24rpx; | 71 | padding: 24rpx; |
| 180 | - background-color: #fff7e6; | 72 | + background-color: rgba(255, 247, 230, 0.9); |
| 181 | - border: 1rpx solid #ffd591; | 73 | + border: 1rpx solid rgba(255, 213, 145, 0.8); |
| 182 | border-radius: 12rpx; | 74 | border-radius: 12rpx; |
| 183 | margin-bottom: 32rpx; | 75 | margin-bottom: 32rpx; |
| 76 | + backdrop-filter: blur(10rpx); | ||
| 184 | } | 77 | } |
| 185 | 78 | ||
| 186 | .tip-icon { | 79 | .tip-icon { |
| ... | @@ -191,6 +84,7 @@ | ... | @@ -191,6 +84,7 @@ |
| 191 | .tip-text { | 84 | .tip-text { |
| 192 | font-size: 26rpx; | 85 | font-size: 26rpx; |
| 193 | color: #d46b08; | 86 | color: #d46b08; |
| 87 | + font-weight: 500; | ||
| 194 | } | 88 | } |
| 195 | 89 | ||
| 196 | .join-button { | 90 | .join-button { |
| ... | @@ -198,7 +92,14 @@ | ... | @@ -198,7 +92,14 @@ |
| 198 | height: 88rpx; | 92 | height: 88rpx; |
| 199 | border-radius: 44rpx; | 93 | border-radius: 44rpx; |
| 200 | font-size: 32rpx; | 94 | font-size: 32rpx; |
| 201 | - font-weight: bold; | 95 | + font-weight: 600; |
| 96 | + box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.4); | ||
| 97 | + backdrop-filter: blur(10rpx); | ||
| 98 | + | ||
| 99 | + &:active { | ||
| 100 | + transform: translateY(2rpx); | ||
| 101 | + box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3); | ||
| 102 | + } | ||
| 202 | 103 | ||
| 203 | &.nut-button--primary { | 104 | &.nut-button--primary { |
| 204 | background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); | 105 | background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); |
| ... | @@ -314,9 +215,3 @@ | ... | @@ -314,9 +215,3 @@ |
| 314 | border: none; | 215 | border: none; |
| 315 | } | 216 | } |
| 316 | } | 217 | } |
| 317 | - | ||
| 318 | -.join-button { | ||
| 319 | - &.nut-button--loading { | ||
| 320 | - opacity: 0.7; | ||
| 321 | - } | ||
| 322 | -} | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-02 15:27:05 | 4 | + * @LastEditTime: 2025-09-02 21:39:49 |
| 5 | * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue | 5 | * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue |
| 6 | * @Description: 活动海报页面 - 展示活动信息并处理定位授权 | 6 | * @Description: 活动海报页面 - 展示活动信息并处理定位授权 |
| 7 | --> | 7 | --> |
| 8 | <template> | 8 | <template> |
| 9 | <view class="activities-cover-container"> | 9 | <view class="activities-cover-container"> |
| 10 | - <!-- 活动海报区域 --> | 10 | + <!-- 背景图片 --> |
| 11 | - <view class="poster-section"> | 11 | + <image |
| 12 | - <image | 12 | + :src="defaultPoster" |
| 13 | - :src="activityData.posterUrl" | 13 | + class="background-image" |
| 14 | - class="poster-image" | 14 | + mode="scaleToFill" |
| 15 | - mode="aspectFill" | 15 | + /> |
| 16 | - /> | ||
| 17 | - | ||
| 18 | - <!-- 活动信息覆盖层 --> | ||
| 19 | - <view class="poster-overlay"> | ||
| 20 | - <view class="activity-title">{{ activityData.title }}</view> | ||
| 21 | - <view class="activity-subtitle">{{ activityData.subtitle }}</view> | ||
| 22 | - <view class="activity-date">{{ activityData.dateRange }}</view> | ||
| 23 | - </view> | ||
| 24 | - | ||
| 25 | - <!-- 分享按钮 --> | ||
| 26 | - <view @tap="shareActivity" class="share-button"> | ||
| 27 | - <!-- <nut-icon name="share" color="white" size="20" /> --> | ||
| 28 | - <text>分享</text> | ||
| 29 | - </view> | ||
| 30 | - </view> | ||
| 31 | - | ||
| 32 | - <!-- 活动详情区域 --> | ||
| 33 | - <view class="details-section"> | ||
| 34 | - <view class="section-title">活动详情</view> | ||
| 35 | - <view class="activity-description">{{ activityData.description }}</view> | ||
| 36 | - | ||
| 37 | - <view class="section-title">参与规则</view> | ||
| 38 | - <view class="rules-list"> | ||
| 39 | - <view | ||
| 40 | - v-for="(rule, index) in activityData.rules" | ||
| 41 | - :key="index" | ||
| 42 | - class="rule-item" | ||
| 43 | - > | ||
| 44 | - {{ index + 1 }}. {{ rule }} | ||
| 45 | - </view> | ||
| 46 | - </view> | ||
| 47 | 16 | ||
| 48 | - <view class="section-title">活动奖励</view> | 17 | + <!-- 分享按钮 --> |
| 49 | - <view class="rewards-list"> | 18 | + <view @tap="shareActivity" class="share-button"> |
| 50 | - <view | 19 | + <text>分享</text> |
| 51 | - v-for="(reward, index) in activityData.rewards" | ||
| 52 | - :key="index" | ||
| 53 | - class="reward-item" | ||
| 54 | - > | ||
| 55 | - <view class="reward-icon">🏆</view> | ||
| 56 | - <view class="reward-text">{{ reward }}</view> | ||
| 57 | - </view> | ||
| 58 | - </view> | ||
| 59 | </view> | 20 | </view> |
| 60 | 21 | ||
| 61 | <!-- 底部按钮区域 --> | 22 | <!-- 底部按钮区域 --> |
| ... | @@ -129,7 +90,11 @@ import Taro from '@tarojs/taro' | ... | @@ -129,7 +90,11 @@ import Taro from '@tarojs/taro' |
| 129 | import "./index.less" | 90 | import "./index.less" |
| 130 | import BottomNav from '../../components/BottomNav.vue' | 91 | import BottomNav from '../../components/BottomNav.vue' |
| 131 | import PosterBuilder from '../../components/PosterBuilder/index.vue' | 92 | import PosterBuilder from '../../components/PosterBuilder/index.vue' |
| 93 | +// 接口信息 | ||
| 94 | +import { getMyFamiliesAPI } from '@/api/family' | ||
| 132 | 95 | ||
| 96 | +// 默认海报图 | ||
| 97 | +const defaultPoster = 'https://cdn.ipadbiz.cn/lls_prog/images/welcome.png'; | ||
| 133 | /** | 98 | /** |
| 134 | * 活动海报页面组件 | 99 | * 活动海报页面组件 |
| 135 | * 功能:展示活动信息、处理定位授权、跳转到活动页面 | 100 | * 功能:展示活动信息、处理定位授权、跳转到活动页面 |
| ... | @@ -630,9 +595,15 @@ const savePoster = () => { | ... | @@ -630,9 +595,15 @@ const savePoster = () => { |
| 630 | } | 595 | } |
| 631 | 596 | ||
| 632 | // 页面挂载时检查定位授权状态 | 597 | // 页面挂载时检查定位授权状态 |
| 633 | -onMounted(() => { | 598 | +onMounted(async () => { |
| 634 | - // TODO: 是否加入家庭 | 599 | + // 获取用户是否加入家庭 |
| 635 | - hasJoinedFamily.value = Math.random > 0.5 ? true : false; | 600 | + const { code, data } = await getMyFamiliesAPI() |
| 601 | + if (code) { | ||
| 602 | + // 如果加入家庭 | ||
| 603 | + if (data.length) { | ||
| 604 | + hasJoinedFamily.value = true | ||
| 605 | + } | ||
| 606 | + } | ||
| 636 | // 检查定位授权弹窗 | 607 | // 检查定位授权弹窗 |
| 637 | checkLocationAuth() | 608 | checkLocationAuth() |
| 638 | }) | 609 | }) | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-08-27 17:44:53 | 2 | * @Date: 2025-08-27 17:44:53 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-02 17:52:24 | 4 | + * @LastEditTime: 2025-09-02 21:40:15 |
| 5 | * @FilePath: /lls_program/src/pages/CreateFamily/index.vue | 5 | * @FilePath: /lls_program/src/pages/CreateFamily/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -174,10 +174,10 @@ import { ref, nextTick, computed } from 'vue'; | ... | @@ -174,10 +174,10 @@ import { ref, nextTick, computed } from 'vue'; |
| 174 | import Taro from '@tarojs/taro'; | 174 | import Taro from '@tarojs/taro'; |
| 175 | import { Tips, Photograph, Right } from '@nutui/icons-vue-taro'; | 175 | import { Tips, Photograph, Right } from '@nutui/icons-vue-taro'; |
| 176 | import BASE_URL from '@/utils/config'; | 176 | import BASE_URL from '@/utils/config'; |
| 177 | -import defaultFamilyCoverSvg from '@/assets/images/default-family-cover.png'; | ||
| 178 | // 接口信息 | 177 | // 接口信息 |
| 179 | import { createFamilyAPI } from '@/api/family'; | 178 | import { createFamilyAPI } from '@/api/family'; |
| 180 | 179 | ||
| 180 | +const defaultFamilyCoverSvg = 'https://cdn.ipadbiz.cn/lls_prog/images/default-family-cover.png'; | ||
| 181 | const familyName = ref(''); | 181 | const familyName = ref(''); |
| 182 | const familyIntro = ref(''); | 182 | const familyIntro = ref(''); |
| 183 | const selectedDistrict = ref(null); | 183 | const selectedDistrict = ref(null); | ... | ... |
| ... | @@ -202,7 +202,7 @@ import PointsCollector from '@/components/PointsCollector.vue' | ... | @@ -202,7 +202,7 @@ import PointsCollector from '@/components/PointsCollector.vue' |
| 202 | import WeRunAuth from '@/components/WeRunAuth.vue' | 202 | import WeRunAuth from '@/components/WeRunAuth.vue' |
| 203 | import { useMediaPreview } from '@/composables/useMediaPreview'; | 203 | import { useMediaPreview } from '@/composables/useMediaPreview'; |
| 204 | // 默认家庭封面图 | 204 | // 默认家庭封面图 |
| 205 | -import defaultFamilyCover from '@/assets/images/default-family-cover.png'; | 205 | +const defaultFamilyCover = 'https://cdn.ipadbiz.cn/lls_prog/images/default-family-cover.png'; |
| 206 | // 默认头像 | 206 | // 默认头像 |
| 207 | const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg' | 207 | const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg' |
| 208 | // 接口信息 | 208 | // 接口信息 |
| ... | @@ -393,7 +393,7 @@ useDidShow(async () => { | ... | @@ -393,7 +393,7 @@ useDidShow(async () => { |
| 393 | return; // 直接返回,不执行后续逻辑 | 393 | return; // 直接返回,不执行后续逻辑 |
| 394 | } | 394 | } |
| 395 | } | 395 | } |
| 396 | - | 396 | + |
| 397 | // 只有在用户已加入家庭的情况下才初始化页面数据 | 397 | // 只有在用户已加入家庭的情况下才初始化页面数据 |
| 398 | initPageData(); | 398 | initPageData(); |
| 399 | 399 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-08-27 17:44:53 | 2 | * @Date: 2025-08-27 17:44:53 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-02 20:00:30 | 4 | + * @LastEditTime: 2025-09-02 21:41:17 |
| 5 | * @FilePath: /lls_program/src/pages/EditFamily/index.vue | 5 | * @FilePath: /lls_program/src/pages/EditFamily/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -173,7 +173,8 @@ import Taro from '@tarojs/taro'; | ... | @@ -173,7 +173,8 @@ import Taro from '@tarojs/taro'; |
| 173 | import { Edit, Tips, Photograph, Right } from '@nutui/icons-vue-taro'; | 173 | import { Edit, Tips, Photograph, Right } from '@nutui/icons-vue-taro'; |
| 174 | // import AppHeader from '../../components/AppHeader.vue'; | 174 | // import AppHeader from '../../components/AppHeader.vue'; |
| 175 | import BASE_URL from '@/utils/config'; | 175 | import BASE_URL from '@/utils/config'; |
| 176 | -import defaultFamilyCoverSvg from '@/assets/images/default-family-cover.png'; | 176 | +// |
| 177 | +const defaultFamilyCoverSvg = 'https://cdn.ipadbiz.cn/lls_prog/images/default-family-cover.png'; | ||
| 177 | 178 | ||
| 178 | const familyName = ref(''); | 179 | const familyName = ref(''); |
| 179 | const familyIntro = ref(''); | 180 | const familyIntro = ref(''); | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-02 14:42:39 | 4 | + * @LastEditTime: 2025-09-02 21:45:14 |
| 5 | * @FilePath: /lls_program/src/pages/MyFamily/index.vue | 5 | * @FilePath: /lls_program/src/pages/MyFamily/index.vue |
| 6 | * @Description: 我的家庭页面 - 展示用户加入的家庭列表 | 6 | * @Description: 我的家庭页面 - 展示用户加入的家庭列表 |
| 7 | --> | 7 | --> |
| ... | @@ -18,7 +18,7 @@ | ... | @@ -18,7 +18,7 @@ |
| 18 | <view class="relative"> | 18 | <view class="relative"> |
| 19 | <!-- 当前家庭标记 --> | 19 | <!-- 当前家庭标记 --> |
| 20 | <view | 20 | <view |
| 21 | - v-if="family.isCurrent" | 21 | + v-if="family.is_in" |
| 22 | class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-sm z-10" | 22 | class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-sm z-10" |
| 23 | > | 23 | > |
| 24 | 当前家庭 | 24 | 当前家庭 |
| ... | @@ -26,7 +26,7 @@ | ... | @@ -26,7 +26,7 @@ |
| 26 | 26 | ||
| 27 | <!-- 封面图 --> | 27 | <!-- 封面图 --> |
| 28 | <image | 28 | <image |
| 29 | - :src="family.coverImage" | 29 | + :src="family.avatar_url || defaultFamilyCoverSvg" |
| 30 | class="w-full h-44 object-cover" | 30 | class="w-full h-44 object-cover" |
| 31 | mode="aspectFill" | 31 | mode="aspectFill" |
| 32 | /> | 32 | /> |
| ... | @@ -46,7 +46,7 @@ | ... | @@ -46,7 +46,7 @@ |
| 46 | <!-- 成员头像叠加效果 --> | 46 | <!-- 成员头像叠加效果 --> |
| 47 | <view class="avatar-overlap"> | 47 | <view class="avatar-overlap"> |
| 48 | <image | 48 | <image |
| 49 | - v-for="(member, index) in family.members.slice(0, 4)" | 49 | + v-for="(member, index) in family?.members?.slice(0, 4) || []" |
| 50 | :key="member.id" | 50 | :key="member.id" |
| 51 | :src="member.avatar" | 51 | :src="member.avatar" |
| 52 | class="avatar-item w-8 h-8 rounded-full border-2 border-white object-cover" | 52 | class="avatar-item w-8 h-8 rounded-full border-2 border-white object-cover" |
| ... | @@ -54,16 +54,16 @@ | ... | @@ -54,16 +54,16 @@ |
| 54 | /> | 54 | /> |
| 55 | <!-- 更多成员数量显示 --> | 55 | <!-- 更多成员数量显示 --> |
| 56 | <view | 56 | <view |
| 57 | - v-if="family.members.length > 4" | 57 | + v-if="family?.members?.length > 4" |
| 58 | class="w-8 h-8 rounded-full bg-gray-300 border-2 border-white flex items-center justify-center text-xs text-gray-600" | 58 | class="w-8 h-8 rounded-full bg-gray-300 border-2 border-white flex items-center justify-center text-xs text-gray-600" |
| 59 | :style="{ zIndex: 6 }" | 59 | :style="{ zIndex: 6 }" |
| 60 | > | 60 | > |
| 61 | - +{{ family.members.length - 4 }} | 61 | + +{{ family?.members?.length - 4 }} |
| 62 | </view> | 62 | </view> |
| 63 | </view> | 63 | </view> |
| 64 | <!-- 总成员数 --> | 64 | <!-- 总成员数 --> |
| 65 | <view class="ml-3 text-sm text-gray-600"> | 65 | <view class="ml-3 text-sm text-gray-600"> |
| 66 | - {{ family.members.length }} 位家庭成员 | 66 | + {{ family?.members?.length || 0 }} 位家庭成员 |
| 67 | </view> | 67 | </view> |
| 68 | </view> | 68 | </view> |
| 69 | </view> | 69 | </view> |
| ... | @@ -71,7 +71,7 @@ | ... | @@ -71,7 +71,7 @@ |
| 71 | <!-- 操作按钮 --> | 71 | <!-- 操作按钮 --> |
| 72 | <view class="flex gap-3 justify-end"> | 72 | <view class="flex gap-3 justify-end"> |
| 73 | <view | 73 | <view |
| 74 | - v-if="!family.isCurrent" | 74 | + v-if="!family.is_in" |
| 75 | @tap="switchToFamily(family.id)" | 75 | @tap="switchToFamily(family.id)" |
| 76 | class="px-4 py-2 bg-blue-500 text-white text-sm rounded-lg" | 76 | class="px-4 py-2 bg-blue-500 text-white text-sm rounded-lg" |
| 77 | > | 77 | > |
| ... | @@ -93,7 +93,6 @@ | ... | @@ -93,7 +93,6 @@ |
| 93 | <Home size="48" /> | 93 | <Home size="48" /> |
| 94 | </view> | 94 | </view> |
| 95 | <view class="text-gray-500 mb-2">您还没有加入任何家庭</view> | 95 | <view class="text-gray-500 mb-2">您还没有加入任何家庭</view> |
| 96 | - <view class="text-gray-400 text-sm">点击下方按钮加入家庭,开始健康之旅</view> | ||
| 97 | </view> | 96 | </view> |
| 98 | </view> | 97 | </view> |
| 99 | 98 | ||
| ... | @@ -116,6 +115,10 @@ import { ref, onMounted, computed } from 'vue'; | ... | @@ -116,6 +115,10 @@ import { ref, onMounted, computed } from 'vue'; |
| 116 | import Taro, { useDidShow } from '@tarojs/taro'; | 115 | import Taro, { useDidShow } from '@tarojs/taro'; |
| 117 | import { Home } from '@nutui/icons-vue-taro'; | 116 | import { Home } from '@nutui/icons-vue-taro'; |
| 118 | import './index.less'; | 117 | import './index.less'; |
| 118 | +import { getMyFamiliesAPI } from '@/api/family'; | ||
| 119 | +// | ||
| 120 | +const defaultFamilyCoverSvg = 'https://cdn.ipadbiz.cn/lls_prog/images/default-family-cover.png'; | ||
| 121 | +// 获取接口数据 | ||
| 119 | 122 | ||
| 120 | // 响应式数据 | 123 | // 响应式数据 |
| 121 | const familyList = ref([]); | 124 | const familyList = ref([]); |
| ... | @@ -123,44 +126,49 @@ const familyList = ref([]); | ... | @@ -123,44 +126,49 @@ const familyList = ref([]); |
| 123 | /** | 126 | /** |
| 124 | * 初始化页面数据 | 127 | * 初始化页面数据 |
| 125 | */ | 128 | */ |
| 126 | -const initPageData = () => { | 129 | +const initPageData = async () => { |
| 130 | + const { code, data } = await getMyFamiliesAPI(); | ||
| 131 | + if (code) { | ||
| 132 | + familyList.value = data; | ||
| 133 | + console.warn(data); | ||
| 134 | + } | ||
| 127 | // 模拟家庭数据 | 135 | // 模拟家庭数据 |
| 128 | - familyList.value = [ | 136 | + // familyList.value = [ |
| 129 | - { | 137 | + // { |
| 130 | - id: 1, | 138 | + // id: 1, |
| 131 | - name: '幸福之家', | 139 | + // name: '幸福之家', |
| 132 | - ownerName: '张明明', | 140 | + // ownerName: '张明明', |
| 133 | - coverImage: 'https://images.unsplash.com/photo-1511895426328-dc8714191300?w=400&h=200&fit=crop', | 141 | + // avatar_url: 'https://images.unsplash.com/photo-1511895426328-dc8714191300?w=400&h=200&fit=crop', |
| 134 | - isCurrent: true, | 142 | + // is_in: true, |
| 135 | - members: [ | 143 | + // members: [ |
| 136 | - { id: 1, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face' }, | 144 | + // { id: 1, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face' }, |
| 137 | - { id: 2, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face' }, | 145 | + // { id: 2, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face' }, |
| 138 | - { id: 3, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face' } | 146 | + // { id: 3, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face' } |
| 139 | - ] | 147 | + // ] |
| 140 | - }, | 148 | + // }, |
| 141 | - { | 149 | + // { |
| 142 | - id: 2, | 150 | + // id: 2, |
| 143 | - name: '欢乐之家', | 151 | + // name: '欢乐之家', |
| 144 | - ownerName: '李志强', | 152 | + // ownerName: '李志强', |
| 145 | - coverImage: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?w=400&h=200&fit=crop', | 153 | + // avatar_url: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?w=400&h=200&fit=crop', |
| 146 | - isCurrent: false, | 154 | + // is_in: false, |
| 147 | - members: [ | 155 | + // members: [ |
| 148 | - { id: 4, avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face' }, | 156 | + // { id: 4, avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face' }, |
| 149 | - { id: 5, avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face' } | 157 | + // { id: 5, avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face' } |
| 150 | - ] | 158 | + // ] |
| 151 | - }, | 159 | + // }, |
| 152 | - { | 160 | + // { |
| 153 | - id: 3, | 161 | + // id: 3, |
| 154 | - name: '快乐之家', | 162 | + // name: '快乐之家', |
| 155 | - ownerName: '王芳', | 163 | + // ownerName: '王芳', |
| 156 | - coverImage: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?w=400&h=200&fit=crop', | 164 | + // avatar_url: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?w=400&h=200&fit=crop', |
| 157 | - isCurrent: false, | 165 | + // is_in: false, |
| 158 | - members: [ | 166 | + // members: [ |
| 159 | - { id: 6, avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face' }, | 167 | + // { id: 6, avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face' }, |
| 160 | - { id: 7, avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face' } | 168 | + // { id: 7, avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face' } |
| 161 | - ] | 169 | + // ] |
| 162 | - }, | 170 | + // }, |
| 163 | - ]; | 171 | + // ]; |
| 164 | }; | 172 | }; |
| 165 | 173 | ||
| 166 | // 如果家庭列表存在时, 才显示加入新家庭的按钮 | 174 | // 如果家庭列表存在时, 才显示加入新家庭的按钮 |
| ... | @@ -184,7 +192,7 @@ const switchToFamily = (familyId) => { | ... | @@ -184,7 +192,7 @@ const switchToFamily = (familyId) => { |
| 184 | // 切换家庭逻辑 - 先清除所有当前标记,再设置新的当前家庭 | 192 | // 切换家庭逻辑 - 先清除所有当前标记,再设置新的当前家庭 |
| 185 | familyList.value = familyList.value.map(f => ({ | 193 | familyList.value = familyList.value.map(f => ({ |
| 186 | ...f, | 194 | ...f, |
| 187 | - isCurrent: f.id === familyId | 195 | + is_in: f.id === familyId |
| 188 | })); | 196 | })); |
| 189 | 197 | ||
| 190 | console.log('切换家庭后的列表:', familyList.value); | 198 | console.log('切换家庭后的列表:', familyList.value); |
| ... | @@ -214,7 +222,7 @@ const exitFamily = (familyId) => { | ... | @@ -214,7 +222,7 @@ const exitFamily = (familyId) => { |
| 214 | // 退出家庭逻辑 | 222 | // 退出家庭逻辑 |
| 215 | const exitingFamily = familyList.value.find(f => f.id === familyId); | 223 | const exitingFamily = familyList.value.find(f => f.id === familyId); |
| 216 | 224 | ||
| 217 | - if (exitingFamily?.isCurrent) { | 225 | + if (exitingFamily?.is_in) { |
| 218 | // 如果退出的是当前家庭,需要返回我的页面 | 226 | // 如果退出的是当前家庭,需要返回我的页面 |
| 219 | familyList.value = familyList.value.filter(f => f.id !== familyId); | 227 | familyList.value = familyList.value.filter(f => f.id !== familyId); |
| 220 | 228 | ||
| ... | @@ -250,8 +258,6 @@ const joinNewFamily = () => { | ... | @@ -250,8 +258,6 @@ const joinNewFamily = () => { |
| 250 | }); | 258 | }); |
| 251 | }; | 259 | }; |
| 252 | 260 | ||
| 253 | - | ||
| 254 | - | ||
| 255 | // 页面加载时初始化数据 | 261 | // 页面加载时初始化数据 |
| 256 | useDidShow(() => { | 262 | useDidShow(() => { |
| 257 | initPageData(); | 263 | initPageData(); | ... | ... |
| ... | @@ -146,7 +146,9 @@ import { ref, onMounted } from 'vue'; | ... | @@ -146,7 +146,9 @@ import { ref, onMounted } from 'vue'; |
| 146 | import Taro from '@tarojs/taro'; | 146 | import Taro from '@tarojs/taro'; |
| 147 | import { Left, Photograph, Close } from '@nutui/icons-vue-taro'; | 147 | import { Left, Photograph, Close } from '@nutui/icons-vue-taro'; |
| 148 | import BASE_URL from '@/utils/config'; | 148 | import BASE_URL from '@/utils/config'; |
| 149 | -import playIcon from '@/assets/images/icon/play.svg'; | 149 | + |
| 150 | +// | ||
| 151 | +const playIcon = 'https://cdn.ipadbiz.cn/lls_prog/icon/play.svg'; | ||
| 150 | 152 | ||
| 151 | // 响应式数据 | 153 | // 响应式数据 |
| 152 | const uploadedFile = ref(null); | 154 | const uploadedFile = ref(null); | ... | ... |
-
Please register or login to post a comment