Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
cf0edb7d 1 parent a94d86ad

feat(积分): 新增积分攻略列表页面及相关功能 

添加积分攻略列表页面，包含以下功能：
- 积分攻略分类展示和筛选
- 搜索功能
- 攻略详情弹窗展示
- 从积分详情页跳转到列表页
- 添加NutToast组件支持
Expand all
Inline Side-by-side
Showing 6 changed files with 390 additions and 2 deletions
......@@ -17,6 +17,7 @@ declare module 'vue' {
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutPicker: typeof import('@nutui/nutui-taro')['Picker']
NutPopup: typeof import('@nutui/nutui-taro')['Popup']
NutToast: typeof import('@nutui/nutui-taro')['Toast']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PointsCollector: typeof import('./src/components/PointsCollector.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
......
......@@ -28,6 +28,7 @@ export default {
'pages/EditFamily/index',
'pages/AlbumList/index',
'pages/ActivitiesCover/index',
'pages/PointsList/index',
],
window: {
backgroundTextStyle: 'light',
......
......@@ -14,9 +14,9 @@
<view class="bg-white rounded-t-3xl px-4 pt-5">
<view class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">积分攻略</h3>
<view class="text-blue-500 text-sm flex items-center">
<view @tap="handleViewAll" class="text-blue-500 text-sm flex items-center">
查看全部
<Right size="16" />
<!-- <Right size="16" /> -->
</view>
</view>
<!-- Strategy cards -->
......@@ -90,6 +90,7 @@
<script setup>
import { ref, computed } from 'vue';
import Taro from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
import BottomNav from '../../components/BottomNav.vue';
import { Right, My } from '@nutui/icons-vue-taro';
......@@ -140,4 +141,10 @@ const filteredPoints = computed(() => {
}
return pointsHistory.value.filter(p => p.type === activeTab.value);
});
const handleViewAll = () => {
Taro.navigateTo({
url: '/pages/PointsList/index'
})
}
</script>
......
export default {
navigationBarTitleText: '积分攻略',
navigationBarBackgroundColor: '#ffffff',
navigationBarTextStyle: 'black',
backgroundColor: '#f5f5f5',
enablePullDownRefresh: false
}
\ No newline at end of file
.points-list-page {
width: 100%;
min-height: 100vh;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
}
// 搜索区域
.search-section {
padding: 32rpx;
background-color: white;
border-bottom: 1rpx solid #f0f0f0;
}
.search-box {
position: relative;
background-color: #f8f9fa;
border-radius: 48rpx;
padding: 0 32rpx;
height: 80rpx;
display: flex;
align-items: center;
}
.search-input {
flex: 1;
height: 100%;
font-size: 28rpx;
color: #333;
background: transparent;
border: none;
outline: none;
&::placeholder {
color: #999;
}
}
// 分类区域
.category-section {
padding: 32rpx;
background-color: white;
border-bottom: 1rpx solid #f0f0f0;
}
.category-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 24rpx;
}
.category-grid {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.category-item {
padding: 16rpx 32rpx;
background-color: #f8f9fa;
border-radius: 32rpx;
border: 2rpx solid transparent;
transition: all 0.3s ease;
&.active {
background-color: #e6f7ff;
border-color: #1890ff;
.category-name {
color: #1890ff;
font-weight: bold;
}
}
}
.category-name {
font-size: 26rpx;
color: #666;
transition: color 0.3s ease;
}
// 列表区域
.points-list-section {
flex: 1;
background-color: white;
}
.points-list {
width: 100%;
}
.points-items {
padding: 0 32rpx;
}
.points-item {
display: flex;
align-items: center;
padding: 32rpx 0;
border-bottom: 1rpx solid #f0f0f0;
transition: background-color 0.3s ease;
&:active {
background-color: #f8f9fa;
}
&:last-child {
border-bottom: none;
}
}
.points-item-left {
flex: 1;
margin-right: 24rpx;
}
.points-content {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.points-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.points-desc {
font-size: 26rpx;
color: #666;
line-height: 1.5;
}
.points-reward {
display: flex;
align-items: center;
}
.reward-text {
font-size: 24rpx;
color: #52c41a;
background-color: #f6ffed;
padding: 8rpx 16rpx;
border-radius: 16rpx;
border: 1rpx solid #b7eb8f;
}
.points-item-right {
display: flex;
align-items: center;
}
.arrow-text {
font-size: 32rpx;
color: #ccc;
}
// 空状态
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 32rpx;
}
.empty-text {
font-size: 28rpx;
color: #999;
margin-top: 24rpx;
}
// 详情弹窗
.detail-popup {
width: 100%;
height: 100%;
background-color: white;
display: flex;
flex-direction: column;
}
.detail-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
border-bottom: 1rpx solid #f0f0f0;
background-color: white;
position: sticky;
top: 0;
z-index: 10;
}
.detail-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
flex: 1;
margin-right: 24rpx;
}
.close-btn1 {
padding: 16rpx 24rpx;
background-color: #f0f0f0;
border-radius: 24rpx;
transition: background-color 0.3s ease;
&:active {
background-color: #e0e0e0;
}
}
.close-text {
font-size: 26rpx;
color: #666;
}
.detail-content {
flex: 1;
}
.detail-body {
padding: 32rpx;
}
.detail-section {
margin-bottom: 48rpx;
&:last-child {
margin-bottom: 0;
}
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 24rpx;
position: relative;
&::before {
content: '';
position: absolute;
left: -16rpx;
top: 50%;
transform: translateY(-50%);
width: 6rpx;
height: 24rpx;
background-color: #1890ff;
border-radius: 3rpx;
}
}
.section-content {
font-size: 28rpx;
line-height: 1.6;
color: #666;
}
.solution-content {
display: flex;
flex-direction: column;
gap: 24rpx;
}
.solution-step {
display: flex;
align-items: flex-start;
gap: 16rpx;
}
.step-number {
width: 48rpx;
height: 48rpx;
background-color: #1890ff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: bold;
flex-shrink: 0;
}
.step-content {
flex: 1;
font-size: 28rpx;
line-height: 1.5;
color: #666;
padding-top: 8rpx;
}
// 积分奖励区域
.reward-section {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.reward-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx;
background-color: #f8f9fa;
border-radius: 12rpx;
border-left: 6rpx solid #52c41a;
}
.reward-label {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
.reward-value {
font-size: 32rpx;
color: #52c41a;
font-weight: bold;
&.bonus {
color: #fa8c16;
}
}
// 注意事项
.notes-content {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.note-item {
padding: 16rpx 20rpx;
background-color: #fff7e6;
border-radius: 8rpx;
border-left: 4rpx solid #ffd591;
}
.note-text {
font-size: 26rpx;
line-height: 1.5;
color: #d46b08;
}
// 响应式适配
@media (max-width: 750rpx) {
.category-grid {
gap: 12rpx;
}
.category-item {
padding: 12rpx 24rpx;
}
.category-name {
font-size: 24rpx;
}
.points-title {
font-size: 30rpx;
}
.points-desc {
font-size: 24rpx;
}
}
\ No newline at end of file
This diff is collapsed. Click to expand it.