feat(积分): 新增积分攻略列表页面及相关功能
添加积分攻略列表页面,包含以下功能: - 积分攻略分类展示和筛选 - 搜索功能 - 攻略详情弹窗展示 - 从积分详情页跳转到列表页 - 添加NutToast组件支持
Showing
6 changed files
with
390 additions
and
2 deletions
| ... | @@ -17,6 +17,7 @@ declare module 'vue' { | ... | @@ -17,6 +17,7 @@ declare module 'vue' { |
| 17 | NutInput: typeof import('@nutui/nutui-taro')['Input'] | 17 | NutInput: typeof import('@nutui/nutui-taro')['Input'] |
| 18 | NutPicker: typeof import('@nutui/nutui-taro')['Picker'] | 18 | NutPicker: typeof import('@nutui/nutui-taro')['Picker'] |
| 19 | NutPopup: typeof import('@nutui/nutui-taro')['Popup'] | 19 | NutPopup: typeof import('@nutui/nutui-taro')['Popup'] |
| 20 | + NutToast: typeof import('@nutui/nutui-taro')['Toast'] | ||
| 20 | Picker: typeof import('./src/components/time-picker-data/picker.vue')['default'] | 21 | Picker: typeof import('./src/components/time-picker-data/picker.vue')['default'] |
| 21 | PointsCollector: typeof import('./src/components/PointsCollector.vue')['default'] | 22 | PointsCollector: typeof import('./src/components/PointsCollector.vue')['default'] |
| 22 | PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default'] | 23 | PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default'] | ... | ... |
| ... | @@ -28,6 +28,7 @@ export default { | ... | @@ -28,6 +28,7 @@ export default { |
| 28 | 'pages/EditFamily/index', | 28 | 'pages/EditFamily/index', |
| 29 | 'pages/AlbumList/index', | 29 | 'pages/AlbumList/index', |
| 30 | 'pages/ActivitiesCover/index', | 30 | 'pages/ActivitiesCover/index', |
| 31 | + 'pages/PointsList/index', | ||
| 31 | ], | 32 | ], |
| 32 | window: { | 33 | window: { |
| 33 | backgroundTextStyle: 'light', | 34 | backgroundTextStyle: 'light', | ... | ... |
| ... | @@ -14,9 +14,9 @@ | ... | @@ -14,9 +14,9 @@ |
| 14 | <view class="bg-white rounded-t-3xl px-4 pt-5"> | 14 | <view class="bg-white rounded-t-3xl px-4 pt-5"> |
| 15 | <view class="flex justify-between items-center mb-4"> | 15 | <view class="flex justify-between items-center mb-4"> |
| 16 | <h3 class="text-lg font-medium">积分攻略</h3> | 16 | <h3 class="text-lg font-medium">积分攻略</h3> |
| 17 | - <view class="text-blue-500 text-sm flex items-center"> | 17 | + <view @tap="handleViewAll" class="text-blue-500 text-sm flex items-center"> |
| 18 | 查看全部 | 18 | 查看全部 |
| 19 | - <Right size="16" /> | 19 | + <!-- <Right size="16" /> --> |
| 20 | </view> | 20 | </view> |
| 21 | </view> | 21 | </view> |
| 22 | <!-- Strategy cards --> | 22 | <!-- Strategy cards --> |
| ... | @@ -90,6 +90,7 @@ | ... | @@ -90,6 +90,7 @@ |
| 90 | 90 | ||
| 91 | <script setup> | 91 | <script setup> |
| 92 | import { ref, computed } from 'vue'; | 92 | import { ref, computed } from 'vue'; |
| 93 | +import Taro from '@tarojs/taro'; | ||
| 93 | import AppHeader from '../../components/AppHeader.vue'; | 94 | import AppHeader from '../../components/AppHeader.vue'; |
| 94 | import BottomNav from '../../components/BottomNav.vue'; | 95 | import BottomNav from '../../components/BottomNav.vue'; |
| 95 | import { Right, My } from '@nutui/icons-vue-taro'; | 96 | import { Right, My } from '@nutui/icons-vue-taro'; |
| ... | @@ -140,4 +141,10 @@ const filteredPoints = computed(() => { | ... | @@ -140,4 +141,10 @@ const filteredPoints = computed(() => { |
| 140 | } | 141 | } |
| 141 | return pointsHistory.value.filter(p => p.type === activeTab.value); | 142 | return pointsHistory.value.filter(p => p.type === activeTab.value); |
| 142 | }); | 143 | }); |
| 144 | + | ||
| 145 | +const handleViewAll = () => { | ||
| 146 | + Taro.navigateTo({ | ||
| 147 | + url: '/pages/PointsList/index' | ||
| 148 | + }) | ||
| 149 | +} | ||
| 143 | </script> | 150 | </script> | ... | ... |
src/pages/PointsList/index.config.js
0 → 100644
src/pages/PointsList/index.less
0 → 100644
| 1 | +.points-list-page { | ||
| 2 | + width: 100%; | ||
| 3 | + min-height: 100vh; | ||
| 4 | + background-color: #f5f5f5; | ||
| 5 | + display: flex; | ||
| 6 | + flex-direction: column; | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +// 搜索区域 | ||
| 10 | +.search-section { | ||
| 11 | + padding: 32rpx; | ||
| 12 | + background-color: white; | ||
| 13 | + border-bottom: 1rpx solid #f0f0f0; | ||
| 14 | +} | ||
| 15 | + | ||
| 16 | +.search-box { | ||
| 17 | + position: relative; | ||
| 18 | + background-color: #f8f9fa; | ||
| 19 | + border-radius: 48rpx; | ||
| 20 | + padding: 0 32rpx; | ||
| 21 | + height: 80rpx; | ||
| 22 | + display: flex; | ||
| 23 | + align-items: center; | ||
| 24 | +} | ||
| 25 | + | ||
| 26 | +.search-input { | ||
| 27 | + flex: 1; | ||
| 28 | + height: 100%; | ||
| 29 | + font-size: 28rpx; | ||
| 30 | + color: #333; | ||
| 31 | + background: transparent; | ||
| 32 | + border: none; | ||
| 33 | + outline: none; | ||
| 34 | + | ||
| 35 | + &::placeholder { | ||
| 36 | + color: #999; | ||
| 37 | + } | ||
| 38 | +} | ||
| 39 | + | ||
| 40 | +// 分类区域 | ||
| 41 | +.category-section { | ||
| 42 | + padding: 32rpx; | ||
| 43 | + background-color: white; | ||
| 44 | + border-bottom: 1rpx solid #f0f0f0; | ||
| 45 | +} | ||
| 46 | + | ||
| 47 | +.category-title { | ||
| 48 | + font-size: 32rpx; | ||
| 49 | + font-weight: bold; | ||
| 50 | + color: #333; | ||
| 51 | + margin-bottom: 24rpx; | ||
| 52 | +} | ||
| 53 | + | ||
| 54 | +.category-grid { | ||
| 55 | + display: flex; | ||
| 56 | + flex-wrap: wrap; | ||
| 57 | + gap: 16rpx; | ||
| 58 | +} | ||
| 59 | + | ||
| 60 | +.category-item { | ||
| 61 | + padding: 16rpx 32rpx; | ||
| 62 | + background-color: #f8f9fa; | ||
| 63 | + border-radius: 32rpx; | ||
| 64 | + border: 2rpx solid transparent; | ||
| 65 | + transition: all 0.3s ease; | ||
| 66 | + | ||
| 67 | + &.active { | ||
| 68 | + background-color: #e6f7ff; | ||
| 69 | + border-color: #1890ff; | ||
| 70 | + | ||
| 71 | + .category-name { | ||
| 72 | + color: #1890ff; | ||
| 73 | + font-weight: bold; | ||
| 74 | + } | ||
| 75 | + } | ||
| 76 | +} | ||
| 77 | + | ||
| 78 | +.category-name { | ||
| 79 | + font-size: 26rpx; | ||
| 80 | + color: #666; | ||
| 81 | + transition: color 0.3s ease; | ||
| 82 | +} | ||
| 83 | + | ||
| 84 | +// 列表区域 | ||
| 85 | +.points-list-section { | ||
| 86 | + flex: 1; | ||
| 87 | + background-color: white; | ||
| 88 | +} | ||
| 89 | + | ||
| 90 | +.points-list { | ||
| 91 | + width: 100%; | ||
| 92 | +} | ||
| 93 | + | ||
| 94 | +.points-items { | ||
| 95 | + padding: 0 32rpx; | ||
| 96 | +} | ||
| 97 | + | ||
| 98 | +.points-item { | ||
| 99 | + display: flex; | ||
| 100 | + align-items: center; | ||
| 101 | + padding: 32rpx 0; | ||
| 102 | + border-bottom: 1rpx solid #f0f0f0; | ||
| 103 | + transition: background-color 0.3s ease; | ||
| 104 | + | ||
| 105 | + &:active { | ||
| 106 | + background-color: #f8f9fa; | ||
| 107 | + } | ||
| 108 | + | ||
| 109 | + &:last-child { | ||
| 110 | + border-bottom: none; | ||
| 111 | + } | ||
| 112 | +} | ||
| 113 | + | ||
| 114 | +.points-item-left { | ||
| 115 | + flex: 1; | ||
| 116 | + margin-right: 24rpx; | ||
| 117 | +} | ||
| 118 | + | ||
| 119 | +.points-content { | ||
| 120 | + display: flex; | ||
| 121 | + flex-direction: column; | ||
| 122 | + gap: 12rpx; | ||
| 123 | +} | ||
| 124 | + | ||
| 125 | +.points-title { | ||
| 126 | + font-size: 32rpx; | ||
| 127 | + font-weight: bold; | ||
| 128 | + color: #333; | ||
| 129 | + line-height: 1.4; | ||
| 130 | +} | ||
| 131 | + | ||
| 132 | +.points-desc { | ||
| 133 | + font-size: 26rpx; | ||
| 134 | + color: #666; | ||
| 135 | + line-height: 1.5; | ||
| 136 | +} | ||
| 137 | + | ||
| 138 | +.points-reward { | ||
| 139 | + display: flex; | ||
| 140 | + align-items: center; | ||
| 141 | +} | ||
| 142 | + | ||
| 143 | +.reward-text { | ||
| 144 | + font-size: 24rpx; | ||
| 145 | + color: #52c41a; | ||
| 146 | + background-color: #f6ffed; | ||
| 147 | + padding: 8rpx 16rpx; | ||
| 148 | + border-radius: 16rpx; | ||
| 149 | + border: 1rpx solid #b7eb8f; | ||
| 150 | +} | ||
| 151 | + | ||
| 152 | +.points-item-right { | ||
| 153 | + display: flex; | ||
| 154 | + align-items: center; | ||
| 155 | +} | ||
| 156 | + | ||
| 157 | +.arrow-text { | ||
| 158 | + font-size: 32rpx; | ||
| 159 | + color: #ccc; | ||
| 160 | +} | ||
| 161 | + | ||
| 162 | +// 空状态 | ||
| 163 | +.empty-state { | ||
| 164 | + display: flex; | ||
| 165 | + flex-direction: column; | ||
| 166 | + align-items: center; | ||
| 167 | + justify-content: center; | ||
| 168 | + padding: 120rpx 32rpx; | ||
| 169 | +} | ||
| 170 | + | ||
| 171 | +.empty-text { | ||
| 172 | + font-size: 28rpx; | ||
| 173 | + color: #999; | ||
| 174 | + margin-top: 24rpx; | ||
| 175 | +} | ||
| 176 | + | ||
| 177 | +// 详情弹窗 | ||
| 178 | +.detail-popup { | ||
| 179 | + width: 100%; | ||
| 180 | + height: 100%; | ||
| 181 | + background-color: white; | ||
| 182 | + display: flex; | ||
| 183 | + flex-direction: column; | ||
| 184 | +} | ||
| 185 | + | ||
| 186 | +.detail-header { | ||
| 187 | + display: flex; | ||
| 188 | + align-items: center; | ||
| 189 | + justify-content: space-between; | ||
| 190 | + padding: 32rpx; | ||
| 191 | + border-bottom: 1rpx solid #f0f0f0; | ||
| 192 | + background-color: white; | ||
| 193 | + position: sticky; | ||
| 194 | + top: 0; | ||
| 195 | + z-index: 10; | ||
| 196 | +} | ||
| 197 | + | ||
| 198 | +.detail-title { | ||
| 199 | + font-size: 36rpx; | ||
| 200 | + font-weight: bold; | ||
| 201 | + color: #333; | ||
| 202 | + flex: 1; | ||
| 203 | + margin-right: 24rpx; | ||
| 204 | +} | ||
| 205 | + | ||
| 206 | +.close-btn1 { | ||
| 207 | + padding: 16rpx 24rpx; | ||
| 208 | + background-color: #f0f0f0; | ||
| 209 | + border-radius: 24rpx; | ||
| 210 | + transition: background-color 0.3s ease; | ||
| 211 | + | ||
| 212 | + &:active { | ||
| 213 | + background-color: #e0e0e0; | ||
| 214 | + } | ||
| 215 | +} | ||
| 216 | + | ||
| 217 | +.close-text { | ||
| 218 | + font-size: 26rpx; | ||
| 219 | + color: #666; | ||
| 220 | +} | ||
| 221 | + | ||
| 222 | +.detail-content { | ||
| 223 | + flex: 1; | ||
| 224 | +} | ||
| 225 | + | ||
| 226 | +.detail-body { | ||
| 227 | + padding: 32rpx; | ||
| 228 | +} | ||
| 229 | + | ||
| 230 | +.detail-section { | ||
| 231 | + margin-bottom: 48rpx; | ||
| 232 | + | ||
| 233 | + &:last-child { | ||
| 234 | + margin-bottom: 0; | ||
| 235 | + } | ||
| 236 | +} | ||
| 237 | + | ||
| 238 | +.section-title { | ||
| 239 | + font-size: 32rpx; | ||
| 240 | + font-weight: bold; | ||
| 241 | + color: #333; | ||
| 242 | + margin-bottom: 24rpx; | ||
| 243 | + position: relative; | ||
| 244 | + | ||
| 245 | + &::before { | ||
| 246 | + content: ''; | ||
| 247 | + position: absolute; | ||
| 248 | + left: -16rpx; | ||
| 249 | + top: 50%; | ||
| 250 | + transform: translateY(-50%); | ||
| 251 | + width: 6rpx; | ||
| 252 | + height: 24rpx; | ||
| 253 | + background-color: #1890ff; | ||
| 254 | + border-radius: 3rpx; | ||
| 255 | + } | ||
| 256 | +} | ||
| 257 | + | ||
| 258 | +.section-content { | ||
| 259 | + font-size: 28rpx; | ||
| 260 | + line-height: 1.6; | ||
| 261 | + color: #666; | ||
| 262 | +} | ||
| 263 | + | ||
| 264 | +.solution-content { | ||
| 265 | + display: flex; | ||
| 266 | + flex-direction: column; | ||
| 267 | + gap: 24rpx; | ||
| 268 | +} | ||
| 269 | + | ||
| 270 | +.solution-step { | ||
| 271 | + display: flex; | ||
| 272 | + align-items: flex-start; | ||
| 273 | + gap: 16rpx; | ||
| 274 | +} | ||
| 275 | + | ||
| 276 | +.step-number { | ||
| 277 | + width: 48rpx; | ||
| 278 | + height: 48rpx; | ||
| 279 | + background-color: #1890ff; | ||
| 280 | + color: white; | ||
| 281 | + border-radius: 50%; | ||
| 282 | + display: flex; | ||
| 283 | + align-items: center; | ||
| 284 | + justify-content: center; | ||
| 285 | + font-size: 24rpx; | ||
| 286 | + font-weight: bold; | ||
| 287 | + flex-shrink: 0; | ||
| 288 | +} | ||
| 289 | + | ||
| 290 | +.step-content { | ||
| 291 | + flex: 1; | ||
| 292 | + font-size: 28rpx; | ||
| 293 | + line-height: 1.5; | ||
| 294 | + color: #666; | ||
| 295 | + padding-top: 8rpx; | ||
| 296 | +} | ||
| 297 | + | ||
| 298 | +// 积分奖励区域 | ||
| 299 | +.reward-section { | ||
| 300 | + display: flex; | ||
| 301 | + flex-direction: column; | ||
| 302 | + gap: 16rpx; | ||
| 303 | +} | ||
| 304 | + | ||
| 305 | +.reward-item { | ||
| 306 | + display: flex; | ||
| 307 | + align-items: center; | ||
| 308 | + justify-content: space-between; | ||
| 309 | + padding: 24rpx; | ||
| 310 | + background-color: #f8f9fa; | ||
| 311 | + border-radius: 12rpx; | ||
| 312 | + border-left: 6rpx solid #52c41a; | ||
| 313 | +} | ||
| 314 | + | ||
| 315 | +.reward-label { | ||
| 316 | + font-size: 28rpx; | ||
| 317 | + color: #333; | ||
| 318 | + font-weight: 500; | ||
| 319 | +} | ||
| 320 | + | ||
| 321 | +.reward-value { | ||
| 322 | + font-size: 32rpx; | ||
| 323 | + color: #52c41a; | ||
| 324 | + font-weight: bold; | ||
| 325 | + | ||
| 326 | + &.bonus { | ||
| 327 | + color: #fa8c16; | ||
| 328 | + } | ||
| 329 | +} | ||
| 330 | + | ||
| 331 | +// 注意事项 | ||
| 332 | +.notes-content { | ||
| 333 | + display: flex; | ||
| 334 | + flex-direction: column; | ||
| 335 | + gap: 16rpx; | ||
| 336 | +} | ||
| 337 | + | ||
| 338 | +.note-item { | ||
| 339 | + padding: 16rpx 20rpx; | ||
| 340 | + background-color: #fff7e6; | ||
| 341 | + border-radius: 8rpx; | ||
| 342 | + border-left: 4rpx solid #ffd591; | ||
| 343 | +} | ||
| 344 | + | ||
| 345 | +.note-text { | ||
| 346 | + font-size: 26rpx; | ||
| 347 | + line-height: 1.5; | ||
| 348 | + color: #d46b08; | ||
| 349 | +} | ||
| 350 | + | ||
| 351 | +// 响应式适配 | ||
| 352 | +@media (max-width: 750rpx) { | ||
| 353 | + .category-grid { | ||
| 354 | + gap: 12rpx; | ||
| 355 | + } | ||
| 356 | + | ||
| 357 | + .category-item { | ||
| 358 | + padding: 12rpx 24rpx; | ||
| 359 | + } | ||
| 360 | + | ||
| 361 | + .category-name { | ||
| 362 | + font-size: 24rpx; | ||
| 363 | + } | ||
| 364 | + | ||
| 365 | + .points-title { | ||
| 366 | + font-size: 30rpx; | ||
| 367 | + } | ||
| 368 | + | ||
| 369 | + .points-desc { | ||
| 370 | + font-size: 24rpx; | ||
| 371 | + } | ||
| 372 | +} | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/pages/PointsList/index.vue
0 → 100644
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment