|
|
@@ -1,12 +1,29 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- 品牌头部 -->
|
|
|
- <PageBanner theme="mind-wisdom"
|
|
|
- tagline="探索内心世界,培养健康心智"
|
|
|
- quote="知己知彼,百战不殆" />
|
|
|
+ <PageBanner :theme="bannerTheme"
|
|
|
+ :tagline="bannerTagline"
|
|
|
+ :quote="bannerQuote" />
|
|
|
|
|
|
- <!-- 分类筛选 -->
|
|
|
+ <!-- 维度筛选 -->
|
|
|
<view class="filter-section">
|
|
|
+ <scroll-view scroll-x enable-flex show-scrollbar="false" class="dimension-scroll">
|
|
|
+ <view class="filter-chips">
|
|
|
+ <view
|
|
|
+ v-for="dim in dimensionList"
|
|
|
+ :key="dim.code"
|
|
|
+ :class="['filter-chip', currentDimension === dim.code ? 'active' : '']"
|
|
|
+ :style="currentDimension === dim.code ? { background: dim.color, color: '#fff' } : {}"
|
|
|
+ @click="onDimensionChange(dim.code)"
|
|
|
+ >
|
|
|
+ {{ dim.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 分类筛选 -->
|
|
|
+ <view class="filter-section" v-if="categoryList.length > 1">
|
|
|
<scroll-view scroll-x enable-flex show-scrollbar="false" class="category-scroll">
|
|
|
<view class="filter-chips">
|
|
|
<view
|
|
|
@@ -21,14 +38,14 @@
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 文章列表 -->
|
|
|
+ <!-- 知识列表 -->
|
|
|
<scroll-view scroll-y class="article-list" @scrolltolower="onLoadMore">
|
|
|
<view v-if="loading && articles.length === 0" class="loading-wrap">
|
|
|
<text class="loading-text">加载中...</text>
|
|
|
</view>
|
|
|
<view v-else-if="articles.length === 0" class="empty-wrap">
|
|
|
- <text class="empty-icon">📝</text>
|
|
|
- <text class="empty-text">暂无相关文章</text>
|
|
|
+ <text class="empty-icon">📚</text>
|
|
|
+ <text class="empty-text">暂无相关知识</text>
|
|
|
</view>
|
|
|
<view v-else class="article-grid">
|
|
|
<view
|
|
|
@@ -44,8 +61,11 @@
|
|
|
/>
|
|
|
<view class="article-body">
|
|
|
<view class="article-meta">
|
|
|
- <text class="article-category">{{ item.categoryName || '心理健康' }}</text>
|
|
|
- <text class="article-date">{{ item.publishDate || '' }}</text>
|
|
|
+ <text class="article-category">{{ item.categoryName || '知识' }}</text>
|
|
|
+ <view class="article-type-tags">
|
|
|
+ <text v-if="item.contentType" class="type-tag" :class="'type-' + item.contentType">{{ contentTypeLabel(item.contentType) }}</text>
|
|
|
+ <text v-if="item.difficultyLevel > 0" class="difficulty-tag">{{ '★'.repeat(item.difficultyLevel) }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<text class="article-title">{{ item.title }}</text>
|
|
|
<text class="article-summary">{{ item.summary || item.content }}</text>
|
|
|
@@ -62,15 +82,12 @@
|
|
|
<view v-if="noMore && articles.length > 0" class="no-more">
|
|
|
<text class="no-more-text">— 没有更多了 —</text>
|
|
|
</view>
|
|
|
- <!-- 未登录提示 -->
|
|
|
<view v-if="!isLoggedIn" class="login-hint-bar">
|
|
|
- <text class="login-hint-text">🔒 登录后解锁全部文章</text>
|
|
|
+ <text class="login-hint-text">🔒 登录后解锁全部内容</text>
|
|
|
</view>
|
|
|
- <!-- 底部占位 -->
|
|
|
<view class="bottom-spacer"></view>
|
|
|
</scroll-view>
|
|
|
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -78,10 +95,23 @@
|
|
|
import PageBanner from '../../components/PageBanner.vue'
|
|
|
import { getArticleCategories, getArticleList } from '../../utils/api.js'
|
|
|
|
|
|
+var dimensionConfig = {
|
|
|
+ all: { label: '全部', color: '#64748B', theme: 'mind-wisdom', tagline: '探索知识,滋养成长', quote: '学而时习之,不亦说乎' },
|
|
|
+ body: { label: '身', color: '#FF8C42', theme: 'health', tagline: '主动健康,从知识开始', quote: '健康是人生的第一财富' },
|
|
|
+ mind: { label: '心', color: '#FF6B9D', theme: 'mind-wisdom', tagline: '探索内心世界,培养健康心智', quote: '知己知彼,百战不殆' },
|
|
|
+ wisdom: { label: '智', color: '#6366F1', theme: 'wisdom', tagline: '聪明学习,快乐成长', quote: '学而不思则罔,思而不学则殆' },
|
|
|
+ action:{ label: '行', color: '#10B981', theme: 'action', tagline: '知行合一,方得始终', quote: '纸上得来终觉浅,绝知此事要躬行' },
|
|
|
+ wealth:{ label: '富', color: '#F59E0B', theme: 'wealth', tagline: '理财智慧,从小培养', quote: '君子爱财,取之有道' }
|
|
|
+}
|
|
|
+
|
|
|
export default {
|
|
|
components: { PageBanner },
|
|
|
data() {
|
|
|
return {
|
|
|
+ dimensionList: Object.keys(dimensionConfig).map(function(k) {
|
|
|
+ return { code: k, label: dimensionConfig[k].label, color: dimensionConfig[k].color }
|
|
|
+ }),
|
|
|
+ currentDimension: 'all',
|
|
|
categoryList: [{ id: '', name: '全部' }],
|
|
|
categoryMap: {},
|
|
|
currentCategory: '',
|
|
|
@@ -90,40 +120,64 @@ export default {
|
|
|
size: 10,
|
|
|
total: 0,
|
|
|
loading: false,
|
|
|
+ loadingMore: false,
|
|
|
noMore: false,
|
|
|
isLoggedIn: false
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ computed: {
|
|
|
+ bannerTheme: function() {
|
|
|
+ return dimensionConfig[this.currentDimension] ? dimensionConfig[this.currentDimension].theme : 'mind-wisdom'
|
|
|
+ },
|
|
|
+ bannerTagline: function() {
|
|
|
+ return dimensionConfig[this.currentDimension] ? dimensionConfig[this.currentDimension].tagline : ''
|
|
|
+ },
|
|
|
+ bannerQuote: function() {
|
|
|
+ return dimensionConfig[this.currentDimension] ? dimensionConfig[this.currentDimension].quote : ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad: function(options) {
|
|
|
this.isLoggedIn = !!uni.getStorageSync('token')
|
|
|
+ if (options && options.dimension && dimensionConfig[options.dimension]) {
|
|
|
+ this.currentDimension = options.dimension
|
|
|
+ }
|
|
|
this.loadCategories()
|
|
|
},
|
|
|
- onShow() {
|
|
|
+ onShow: function() {
|
|
|
this.isLoggedIn = !!uni.getStorageSync('token')
|
|
|
},
|
|
|
methods: {
|
|
|
+ contentTypeLabel: function(type) {
|
|
|
+ var labels = { article: '文章', knowledge: '知识点', course: '课程', tip: '贴士' }
|
|
|
+ return labels[type] || type
|
|
|
+ },
|
|
|
async loadCategories() {
|
|
|
try {
|
|
|
const res = await getArticleCategories()
|
|
|
if (res.code === 200 && res.data) {
|
|
|
const cats = Array.isArray(res.data) ? res.data : []
|
|
|
- let map = {}
|
|
|
+ var map = {}
|
|
|
cats.forEach(function(c) { map[c.id] = c.name })
|
|
|
this.categoryMap = map
|
|
|
this.categoryList = [{ id: '', name: '全部' }].concat(cats)
|
|
|
}
|
|
|
} catch (e) {
|
|
|
- // 默认分类列表
|
|
|
this.categoryList = [
|
|
|
{ id: '', name: '全部' },
|
|
|
{ id: 1, name: '心理健康' },
|
|
|
{ id: 2, name: '情绪管理' }
|
|
|
]
|
|
|
}
|
|
|
- // 分类加载完成后加载文章
|
|
|
this.loadArticles()
|
|
|
},
|
|
|
- onCategoryChange(id) {
|
|
|
+ onDimensionChange: function(code) {
|
|
|
+ this.currentDimension = code
|
|
|
+ this.page = 1
|
|
|
+ this.articles = []
|
|
|
+ this.noMore = false
|
|
|
+ this.loadArticles()
|
|
|
+ },
|
|
|
+ onCategoryChange: function(id) {
|
|
|
this.currentCategory = id
|
|
|
this.page = 1
|
|
|
this.articles = []
|
|
|
@@ -134,15 +188,18 @@ export default {
|
|
|
if (this.loading) return
|
|
|
this.loading = true
|
|
|
try {
|
|
|
- let params = { page: this.page, size: this.size }
|
|
|
+ var params = { page: this.page, size: this.size }
|
|
|
if (this.currentCategory) {
|
|
|
params.categoryId = this.currentCategory
|
|
|
}
|
|
|
+ if (this.currentDimension !== 'all') {
|
|
|
+ params.dimensionCode = this.currentDimension
|
|
|
+ }
|
|
|
const res = await getArticleList(params)
|
|
|
if (res.code === 200 && res.data) {
|
|
|
- let pageData = res.data
|
|
|
- let list = pageData.records || []
|
|
|
- let mapped = list.map(function(item) {
|
|
|
+ var pageData = res.data
|
|
|
+ var list = pageData.records || []
|
|
|
+ var mapped = list.map(function(item) {
|
|
|
return {
|
|
|
id: item.id,
|
|
|
title: item.title || '',
|
|
|
@@ -152,7 +209,9 @@ export default {
|
|
|
author: item.author || '浠艾福',
|
|
|
categoryName: item.categoryName || item.category || '',
|
|
|
publishDate: item.publishedAt ? item.publishedAt.slice(0, 10) : '',
|
|
|
- readCount: item.viewCount || 0
|
|
|
+ readCount: item.viewCount || 0,
|
|
|
+ contentType: item.contentType || '',
|
|
|
+ difficultyLevel: item.difficultyLevel || 0
|
|
|
}
|
|
|
})
|
|
|
if (this.page === 1) {
|
|
|
@@ -182,7 +241,7 @@ export default {
|
|
|
if (this.isLoggedIn) {
|
|
|
uni.navigateTo({ url: '/pages/mind/article-detail?id=' + id })
|
|
|
} else {
|
|
|
- uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/mind/articles') })
|
|
|
+ uni.navigateTo({ url: '/pages/mind-detail/articles?redirect=' + encodeURIComponent('/pages/mind-detail/articles') })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -197,15 +256,20 @@ export default {
|
|
|
background: #f5f7fa;
|
|
|
}
|
|
|
|
|
|
-/* 分类筛选 */
|
|
|
+/* 筛选条 */
|
|
|
.filter-section {
|
|
|
background: #fff;
|
|
|
padding: 16rpx 0 12rpx;
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
}
|
|
|
+.dimension-scroll,
|
|
|
.category-scroll {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+.dimension-scroll {
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+ padding-bottom: 12rpx;
|
|
|
+}
|
|
|
.filter-chips {
|
|
|
display: flex;
|
|
|
padding: 0 20rpx;
|
|
|
@@ -224,6 +288,50 @@ export default {
|
|
|
background: #5B9BD5;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+.filter-chip:first-child {
|
|
|
+ margin-left: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 文章元信息标签 */
|
|
|
+.article-meta {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+.article-type-tags {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+.type-tag {
|
|
|
+ font-size: 18rpx;
|
|
|
+ padding: 2rpx 10rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.type-tag.type-article {
|
|
|
+ background: #e8f4fd;
|
|
|
+ color: #2b7fc4;
|
|
|
+}
|
|
|
+.type-tag.type-knowledge {
|
|
|
+ background: #e8f8ee;
|
|
|
+ color: #2a9055;
|
|
|
+}
|
|
|
+.type-tag.type-course {
|
|
|
+ background: #fef3e2;
|
|
|
+ color: #c47a2b;
|
|
|
+}
|
|
|
+.type-tag.type-tip {
|
|
|
+ background: #f3e8fd;
|
|
|
+ color: #7b2bc4;
|
|
|
+}
|
|
|
+.difficulty-tag {
|
|
|
+ font-size: 18rpx;
|
|
|
+ color: #f59e0b;
|
|
|
+}
|
|
|
|
|
|
/* 文章列表 */
|
|
|
.article-list {
|