|
@@ -1,5 +1,28 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="ac-container">
|
|
<view class="ac-container">
|
|
|
|
|
+ <!-- 自定义导航栏 -->
|
|
|
|
|
+ <view class="kc-nav">
|
|
|
|
|
+ <view class="kc-nav-left" @click="onBack">
|
|
|
|
|
+ <text class="kc-back-icon">←</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="kc-nav-search" @click="focusSearch">
|
|
|
|
|
+ <text class="kc-search-icon">🔍</text>
|
|
|
|
|
+ <input
|
|
|
|
|
+ v-if="searchFocused || searchKeyword"
|
|
|
|
|
+ class="kc-search-input"
|
|
|
|
|
+ v-model="searchKeyword"
|
|
|
|
|
+ placeholder="搜索文章..."
|
|
|
|
|
+ confirm-type="search"
|
|
|
|
|
+ @confirm="onSearch"
|
|
|
|
|
+ @blur="onSearchBlur"
|
|
|
|
|
+ />
|
|
|
|
|
+ <text v-else class="kc-search-placeholder">搜索文章...</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="kc-nav-right" @click="goEdit">
|
|
|
|
|
+ <text class="kc-add-btn">+</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
<!-- Tab 导航 -->
|
|
<!-- Tab 导航 -->
|
|
|
<view class="ac-tabs">
|
|
<view class="ac-tabs">
|
|
|
<scroll-view scroll-x enable-flex show-scrollbar="false" class="tab-scroll">
|
|
<scroll-view scroll-x enable-flex show-scrollbar="false" class="tab-scroll">
|
|
@@ -98,10 +121,10 @@ export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
tabList: [
|
|
tabList: [
|
|
|
- { code: '', name: '全部推荐', color: '#F97316' },
|
|
|
|
|
|
|
+ { code: '', name: '全部', color: '#F97316' },
|
|
|
{ code: 'body', name: '身', color: '#FF8C42' },
|
|
{ code: 'body', name: '身', color: '#FF8C42' },
|
|
|
- { code: 'mind', name: '智', color: '#6366F1' },
|
|
|
|
|
- { code: 'wisdom', name: '心', color: '#FF6B9D' },
|
|
|
|
|
|
|
+ { code: 'mind', name: '心', color: '#FF6B9D' },
|
|
|
|
|
+ { code: 'wisdom', name: '智', color: '#6366F1' },
|
|
|
{ code: 'action', name: '行', color: '#10B981' },
|
|
{ code: 'action', name: '行', color: '#10B981' },
|
|
|
{ code: 'wealth', name: '富', color: '#F59E0B' }
|
|
{ code: 'wealth', name: '富', color: '#F59E0B' }
|
|
|
],
|
|
],
|
|
@@ -112,17 +135,31 @@ export default {
|
|
|
total: 0,
|
|
total: 0,
|
|
|
loading: false,
|
|
loading: false,
|
|
|
loadingMore: false,
|
|
loadingMore: false,
|
|
|
- noMore: false
|
|
|
|
|
|
|
+ noMore: false,
|
|
|
|
|
+ searchKeyword: '',
|
|
|
|
|
+ searchFocused: false,
|
|
|
|
|
+ isLoggedIn: false
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- onLoad() {
|
|
|
|
|
|
|
+ onLoad(options) {
|
|
|
|
|
+ // 支持从外部传入 dimension 参数,默认选中对应 tab
|
|
|
|
|
+ if (options && options.dimension) {
|
|
|
|
|
+ this.currentTab = options.dimension
|
|
|
|
|
+ }
|
|
|
|
|
+ this.isLoggedIn = !!uni.getStorageSync('token')
|
|
|
this.loadArticles()
|
|
this.loadArticles()
|
|
|
},
|
|
},
|
|
|
|
|
+ onShow() {
|
|
|
|
|
+ this.isLoggedIn = !!uni.getStorageSync('token')
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
async loadArticles(isLoadMore) {
|
|
async loadArticles(isLoadMore) {
|
|
|
if (!isLoadMore) {
|
|
if (!isLoadMore) {
|
|
|
if (this.loading) return
|
|
if (this.loading) return
|
|
|
this.loading = true
|
|
this.loading = true
|
|
|
|
|
+ this.page = 1
|
|
|
|
|
+ this.articles = []
|
|
|
|
|
+ this.noMore = false
|
|
|
} else {
|
|
} else {
|
|
|
if (this.loadingMore || this.noMore) return
|
|
if (this.loadingMore || this.noMore) return
|
|
|
this.loadingMore = true
|
|
this.loadingMore = true
|
|
@@ -132,6 +169,9 @@ export default {
|
|
|
if (this.currentTab) {
|
|
if (this.currentTab) {
|
|
|
params.dimensionCode = this.currentTab
|
|
params.dimensionCode = this.currentTab
|
|
|
}
|
|
}
|
|
|
|
|
+ if (this.searchKeyword && this.searchKeyword.trim()) {
|
|
|
|
|
+ params.keyword = this.searchKeyword.trim()
|
|
|
|
|
+ }
|
|
|
var res = await getArticleList(params)
|
|
var res = await getArticleList(params)
|
|
|
if (res.code === 200 && res.data) {
|
|
if (res.code === 200 && res.data) {
|
|
|
var list = res.data.records || []
|
|
var list = res.data.records || []
|
|
@@ -153,6 +193,8 @@ export default {
|
|
|
onTabChange(code) {
|
|
onTabChange(code) {
|
|
|
if (this.currentTab === code) return
|
|
if (this.currentTab === code) return
|
|
|
this.currentTab = code
|
|
this.currentTab = code
|
|
|
|
|
+ this.searchKeyword = ''
|
|
|
|
|
+ this.searchFocused = false
|
|
|
this.page = 1
|
|
this.page = 1
|
|
|
this.articles = []
|
|
this.articles = []
|
|
|
this.noMore = false
|
|
this.noMore = false
|
|
@@ -167,7 +209,12 @@ export default {
|
|
|
uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
|
|
uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
|
|
|
},
|
|
},
|
|
|
goEdit() {
|
|
goEdit() {
|
|
|
- uni.navigateTo({ url: '/pages/article-center/article-edit' })
|
|
|
|
|
|
|
+ var isLoggedIn = !!uni.getStorageSync('token')
|
|
|
|
|
+ if (isLoggedIn) {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/article-center/article-edit' })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/article-center/index') })
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
formatDate(dateStr) {
|
|
formatDate(dateStr) {
|
|
|
if (!dateStr) return ''
|
|
if (!dateStr) return ''
|
|
@@ -177,13 +224,30 @@ export default {
|
|
|
if (!str) return []
|
|
if (!str) return []
|
|
|
var dimMap = {
|
|
var dimMap = {
|
|
|
body: { code: 'body', color: '#FF8C42', name: '身' },
|
|
body: { code: 'body', color: '#FF8C42', name: '身' },
|
|
|
- mind: { code: 'mind', color: '#6366F1', name: '智' },
|
|
|
|
|
- wisdom: { code: 'wisdom', color: '#FF6B9D', name: '心' },
|
|
|
|
|
|
|
+ mind: { code: 'mind', color: '#FF6B9D', name: '心' },
|
|
|
|
|
+ wisdom: { code: 'wisdom', color: '#6366F1', name: '智' },
|
|
|
action: { code: 'action', color: '#10B981', name: '行' },
|
|
action: { code: 'action', color: '#10B981', name: '行' },
|
|
|
wealth: { code: 'wealth', color: '#F59E0B', name: '富' }
|
|
wealth: { code: 'wealth', color: '#F59E0B', name: '富' }
|
|
|
}
|
|
}
|
|
|
var codes = str.split(',').map(function(s) { return s.trim().toLowerCase() })
|
|
var codes = str.split(',').map(function(s) { return s.trim().toLowerCase() })
|
|
|
return codes.filter(function(c) { return dimMap[c] }).map(function(c) { return dimMap[c] })
|
|
return codes.filter(function(c) { return dimMap[c] }).map(function(c) { return dimMap[c] })
|
|
|
|
|
+ },
|
|
|
|
|
+ focusSearch() {
|
|
|
|
|
+ this.searchFocused = true
|
|
|
|
|
+ },
|
|
|
|
|
+ onSearch() {
|
|
|
|
|
+ this.page = 1
|
|
|
|
|
+ this.articles = []
|
|
|
|
|
+ this.noMore = false
|
|
|
|
|
+ this.loadArticles()
|
|
|
|
|
+ },
|
|
|
|
|
+ onSearchBlur() {
|
|
|
|
|
+ if (!this.searchKeyword) {
|
|
|
|
|
+ this.searchFocused = false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onBack() {
|
|
|
|
|
+ uni.navigateBack()
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -195,6 +259,72 @@ export default {
|
|
|
background: #f5f7fa;
|
|
background: #f5f7fa;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+/* 自定义导航栏 */
|
|
|
|
|
+.kc-nav {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 80rpx 20rpx 16rpx;
|
|
|
|
|
+ background: linear-gradient(135deg, #F97316, #EA580C);
|
|
|
|
|
+ position: sticky;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ z-index: 100;
|
|
|
|
|
+}
|
|
|
|
|
+.kc-nav-left {
|
|
|
|
|
+ width: 50rpx;
|
|
|
|
|
+ height: 50rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.kc-back-icon {
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+}
|
|
|
|
|
+.kc-nav-search {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ background: rgba(255,255,255,0.25);
|
|
|
|
|
+ border-radius: 32rpx;
|
|
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
|
|
+ margin: 0 16rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.kc-search-icon {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.kc-search-placeholder {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: rgba(255,255,255,0.7);
|
|
|
|
|
+}
|
|
|
|
|
+.kc-search-input {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+}
|
|
|
|
|
+.kc-search-input::placeholder {
|
|
|
|
|
+ color: rgba(255,255,255,0.7);
|
|
|
|
|
+}
|
|
|
|
|
+.kc-nav-right {
|
|
|
|
|
+ width: 50rpx;
|
|
|
|
|
+ height: 50rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.kc-add-btn {
|
|
|
|
|
+ font-size: 48rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-weight: 300;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.ac-tabs {
|
|
.ac-tabs {
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
padding: 16rpx 0 12rpx;
|
|
padding: 16rpx 0 12rpx;
|
|
@@ -220,7 +350,7 @@ export default {
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
}
|
|
}
|
|
|
.ac-list {
|
|
.ac-list {
|
|
|
- height: calc(100vh - 100rpx);
|
|
|
|
|
|
|
+ height: calc(100vh - 230rpx);
|
|
|
}
|
|
}
|
|
|
/* 骨架屏 */
|
|
/* 骨架屏 */
|
|
|
.ac-skeleton { padding: 20rpx 24rpx; }
|
|
.ac-skeleton { padding: 20rpx 24rpx; }
|