wangfukang
23 hours ago
5 changed files with 509 additions and 14 deletions
@ -0,0 +1,457 @@ |
|||
<template> |
|||
<view class="my-campus-page"> |
|||
<view class="header" :style="{ paddingTop: statusBarTop + 'px' }"> |
|||
<view class="back" @tap="back"><uni-icons type="left" size="22" color="#173b32"></uni-icons></view> |
|||
<view class="title">我的圈子</view> |
|||
<view class="tabs"> |
|||
<view |
|||
class="tab" |
|||
:class="{ active: activeTab === item.key }" |
|||
v-for="item in tabs" |
|||
:key="item.key" |
|||
@tap="switchTab(item.key)" |
|||
> |
|||
<text>{{item.name}}</text> |
|||
<view class="tab-badge" v-if="item.key === 'messages' && commentUnread > 0">{{formatBadgeCount(commentUnread)}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="search-bar"> |
|||
<uni-icons type="search" size="18" color="#8d9693"></uni-icons> |
|||
<input |
|||
v-model.trim="keyword" |
|||
class="search-input" |
|||
confirm-type="search" |
|||
:placeholder="searchPlaceholder" |
|||
@confirm="handleSearch" |
|||
/> |
|||
<view class="search-clear" v-if="keyword" @tap="clearSearch">清空</view> |
|||
<view class="search-btn" @tap="handleSearch">搜索</view> |
|||
</view> |
|||
|
|||
<view class="swipe-tip" v-if="activeTab === 'posts'"> |
|||
<uni-icons type="info" size="15" color="#24b979"></uni-icons> |
|||
<text>左滑卡片可编辑、上下架或删除</text> |
|||
</view> |
|||
<view class="swipe-tip" v-else-if="activeTab === 'messages'"> |
|||
<uni-icons type="info" size="15" color="#24b979"></uni-icons> |
|||
<text>有人评论我的发布会显示角标，点开详情后自动已读</text> |
|||
</view> |
|||
|
|||
<scroll-view scroll-y class="list" :class="{ 'list--with-tip': activeTab !== 'comments' }" @scrolltolower="loadMore"> |
|||
<u-swipe-action v-if="activeTab === 'posts'"> |
|||
<u-swipe-action-item |
|||
v-for="(item,index) in list" |
|||
:key="item.id" |
|||
:name="index" |
|||
:options="swipeOptions(item)" |
|||
@click="handleSwipeAction" |
|||
> |
|||
<view class="card" @tap="openPost(item)"> |
|||
<image class="cover" :src="coverText(item)" mode="aspectFill"></image> |
|||
<view class="main"> |
|||
<view class="name">{{item.title || '校园圈发布'}}</view> |
|||
<view class="desc">{{descText(item)}}</view> |
|||
<view class="meta"> |
|||
<text>{{typeText(item)}}</text> |
|||
<text v-if="item.categoryName">{{item.categoryName}}</text> |
|||
<text>{{item.createTime || ''}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="status" :class="{ 'status--off': isOffShelf(item) }">{{statusText(item)}}</view> |
|||
</view> |
|||
</u-swipe-action-item> |
|||
</u-swipe-action> |
|||
|
|||
<block v-else-if="activeTab === 'messages'"> |
|||
<view class="card message-card" v-for="item in list" :key="item.id" @tap="openMessagePost(item)"> |
|||
<image class="cover" :src="coverText(item)" mode="aspectFill"></image> |
|||
<view class="main"> |
|||
<view class="name-row"> |
|||
<view class="name">{{item.title || '校园圈发布'}}</view> |
|||
<view class="card-badge" v-if="unreadCount(item) > 0">{{formatBadgeCount(unreadCount(item))}}</view> |
|||
</view> |
|||
<view class="desc">{{messageDesc(item)}}</view> |
|||
<view class="meta"> |
|||
<text>{{typeText(item)}}</text> |
|||
<text>{{item.commentCount || 0}} 条评论</text> |
|||
<text>{{item.lastActiveTime || item.createTime || ''}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="status status--action">查看</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<block v-else> |
|||
<view class="card" v-for="item in list" :key="item.id" @tap="openComment(item)"> |
|||
<image class="cover" :src="commentCoverText(item)" mode="aspectFill"></image> |
|||
<view class="main"> |
|||
<view class="name">{{item.displayTitle || '校园圈发布'}}</view> |
|||
<view class="desc">{{commentDesc(item)}}</view> |
|||
<view class="meta"> |
|||
<text>我的评论</text> |
|||
<text>{{item.createTime || ''}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="status status--danger" @tap.stop="deleteCommentItem(item)">删除</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<view class="empty" v-if="!list.length && !loading">{{emptyText}}</view> |
|||
<view class="load-more">{{loading ? '加载中...' : (hasMore ? '上滑加载更多' : (list.length ? '已经到底了' : ''))}}</view> |
|||
<view class="bottom-space"></view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
pageMyCampusPosts, |
|||
pageMyCampusComments, |
|||
updateMyCampusPostStatus, |
|||
getCampusUnreadSummary, |
|||
deleteCampusComment |
|||
} from '@/common/campusApi.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
statusBarTop: 24, |
|||
activeTab: 'posts', |
|||
keyword: '', |
|||
list: [], |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
totalPages: 1, |
|||
loading: false, |
|||
loadedOnce: false, |
|||
chatUnread: 0, |
|||
commentUnread: 0, |
|||
defaultCover: '/static/images/img/songshu.png', |
|||
tabs: [ |
|||
{ key: 'posts', name: '我的发布' }, |
|||
{ key: 'messages', name: '我的消息' }, |
|||
{ key: 'comments', name: '我的评论' } |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
hasMore() { |
|||
return this.pageNum < this.totalPages |
|||
}, |
|||
searchPlaceholder() { |
|||
if (this.activeTab === 'comments') return '按评论内容搜索' |
|||
return '按标题或内容搜索' |
|||
}, |
|||
emptyText() { |
|||
if (this.activeTab === 'messages') return '暂无评论消息' |
|||
if (this.activeTab === 'comments') return '暂无我的评论' |
|||
return '暂无发布内容' |
|||
} |
|||
}, |
|||
onLoad(options = {}) { |
|||
if (options.tab && this.tabs.some(item => item.key === options.tab)) this.activeTab = options.tab |
|||
if (uni.getMenuButtonBoundingClientRect) { |
|||
this.statusBarTop = uni.getMenuButtonBoundingClientRect().top || this.statusBarTop |
|||
} |
|||
this.load() |
|||
}, |
|||
onShow() { |
|||
if (this.loadedOnce) this.reload() |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
getArea() { |
|||
const area = uni.getStorageSync('area') |
|||
if (!area) return {} |
|||
if (typeof area === 'string') { |
|||
try { return JSON.parse(area) } catch (e) { return {} } |
|||
} |
|||
return area |
|||
}, |
|||
switchTab(key) { |
|||
if (this.activeTab === key) return |
|||
this.activeTab = key |
|||
this.keyword = '' |
|||
this.reload() |
|||
}, |
|||
swipeOptions(item) { |
|||
const offShelf = this.isOffShelf(item) |
|||
return [{ |
|||
text: '编辑', |
|||
style: { |
|||
backgroundColor: '#24b979', |
|||
color: '#fff', |
|||
fontSize: '26rpx' |
|||
} |
|||
}, { |
|||
text: offShelf ? '上架' : '下架', |
|||
style: { |
|||
backgroundColor: offShelf ? '#2f8cff' : '#ff9f2d', |
|||
color: '#fff', |
|||
fontSize: '26rpx' |
|||
} |
|||
}, { |
|||
text: '删除', |
|||
style: { |
|||
backgroundColor: '#ef4c3f', |
|||
color: '#fff', |
|||
fontSize: '26rpx' |
|||
} |
|||
}] |
|||
}, |
|||
handleSwipeAction(e) { |
|||
const item = this.list[Number(e.name)] |
|||
if (!item) return |
|||
if (e.index == 0) { |
|||
this.editItem(item) |
|||
return |
|||
} |
|||
if (e.index == 1) { |
|||
this.toggleShelf(item) |
|||
return |
|||
} |
|||
this.deleteItem(item) |
|||
}, |
|||
handleSearch() { |
|||
uni.hideKeyboard() |
|||
this.reload() |
|||
}, |
|||
clearSearch() { |
|||
this.keyword = '' |
|||
this.reload() |
|||
}, |
|||
reload() { |
|||
this.pageNum = 1 |
|||
this.totalPages = 1 |
|||
this.list = [] |
|||
this.load() |
|||
}, |
|||
loadMore() { |
|||
if (this.loading || !this.hasMore) return |
|||
this.pageNum += 1 |
|||
this.load() |
|||
}, |
|||
load() { |
|||
if (this.loading) return |
|||
this.loading = true |
|||
this.loadUnreadSummary() |
|||
const area = this.getArea() |
|||
const query = { |
|||
pageNum: this.pageNum, |
|||
pageSize: this.pageSize, |
|||
regionId: area.id || '', |
|||
keyword: this.keyword, |
|||
sortType: 'latest' |
|||
} |
|||
const request = this.activeTab === 'comments' ? pageMyCampusComments(query) : pageMyCampusPosts(query) |
|||
request.then(page => { |
|||
const records = page && (page.records || page.content) ? (page.records || page.content) : [] |
|||
this.totalPages = Number(page && (page.pages || page.totalPages)) || 1 |
|||
const normalized = this.activeTab === 'messages' ? this.sortMessages(records) : records |
|||
this.list = this.pageNum === 1 ? normalized : this.list.concat(normalized) |
|||
}).finally(() => { |
|||
this.loading = false |
|||
this.loadedOnce = true |
|||
}) |
|||
}, |
|||
loadUnreadSummary() { |
|||
getCampusUnreadSummary().then(summary => { |
|||
this.chatUnread = 0 |
|||
this.commentUnread = Number(summary && summary.campusCommentUnread) || 0 |
|||
uni.$emit('campusUnreadChange', { |
|||
...summary, |
|||
campusChatUnread: 0, |
|||
myCircleUnread: this.commentUnread, |
|||
campusUnread: this.commentUnread |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
sortMessages(records) { |
|||
return (Array.isArray(records) ? records : []).slice().sort((a, b) => { |
|||
const unreadDiff = this.unreadCount(b) - this.unreadCount(a) |
|||
if (unreadDiff) return unreadDiff |
|||
return String(b.lastActiveTime || b.createTime || '').localeCompare(String(a.lastActiveTime || a.createTime || '')) |
|||
}) |
|||
}, |
|||
openPost(item) { |
|||
if (!item || !item.id) return |
|||
uni.navigateTo({ url: '/package1/post/postDetail?id=' + item.id + '&source=campus' }) |
|||
}, |
|||
openMessagePost(item) { |
|||
if (!item || !item.id) return |
|||
const count = this.unreadCount(item) |
|||
uni.navigateTo({ |
|||
url: '/package1/post/postDetail?id=' + item.id + '&source=campus', |
|||
success: () => { |
|||
if (count <= 0) return |
|||
this.$set(item, 'unreadCommentCount', 0) |
|||
this.commentUnread = Math.max(0, this.commentUnread - count) |
|||
uni.$emit('campusUnreadChange', { |
|||
campusChatUnread: 0, |
|||
campusCommentUnread: this.commentUnread, |
|||
myCircleUnread: this.commentUnread, |
|||
campusUnread: this.commentUnread |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
openComment(item) { |
|||
const postId = item && item.postId |
|||
if (!postId) return |
|||
uni.navigateTo({ url: '/package1/post/postDetail?id=' + postId + '&source=campus' }) |
|||
}, |
|||
editItem(item) { |
|||
if (!item || !item.id) return |
|||
const type = item.postType === 'partner' ? (item.partnerType || 'daily') : 'wall' |
|||
uni.navigateTo({ url: `/package1/campus/campusRelease?mode=edit&type=${type}&id=${item.id}` }) |
|||
}, |
|||
isOffShelf(item) { |
|||
return Number(item.status) === 2 || Number(item.offShelf) === 1 |
|||
}, |
|||
toggleShelf(item) { |
|||
const nextStatus = this.isOffShelf(item) ? 1 : 2 |
|||
this.updateItemStatus(item, nextStatus) |
|||
}, |
|||
deleteItem(item) { |
|||
uni.showModal({ |
|||
title: '删除确认', |
|||
content: '删除后不可恢复，确定删除这条发布吗？', |
|||
confirmText: '删除', |
|||
confirmColor: '#ef4c3f', |
|||
success: (res) => { |
|||
if (!res.confirm) return |
|||
this.updateItemStatus(item, 3) |
|||
} |
|||
}) |
|||
}, |
|||
deleteCommentItem(item) { |
|||
if (!item || !item.id) return |
|||
uni.showModal({ |
|||
title: '删除评论', |
|||
content: '确定删除这条评论吗？', |
|||
confirmText: '删除', |
|||
confirmColor: '#ef4c3f', |
|||
success: (res) => { |
|||
if (!res.confirm) return |
|||
deleteCampusComment(item.id).then(() => { |
|||
uni.showToast({ title: '已删除', icon: 'none' }) |
|||
this.reload() |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
updateItemStatus(item, status) { |
|||
return updateMyCampusPostStatus({ |
|||
postId: item.id, |
|||
status |
|||
}).then(() => { |
|||
uni.showToast({ title: status === 3 ? '已删除' : (status === 2 ? '已下架' : '已上架'), icon: 'none' }) |
|||
uni.$emit('campusPostPublished') |
|||
this.reload() |
|||
}) |
|||
}, |
|||
statusText(item) { |
|||
if (Number(item.status) === 2) return '已下架' |
|||
if (Number(item.status) === 3) return '已删除' |
|||
if (Number(item.auditStatus) === 2) return '未通过' |
|||
if (Number(item.auditStatus) === 0) return '审核中' |
|||
return '展示中' |
|||
}, |
|||
unreadCount(item) { |
|||
return Number(item && (item.unreadCommentCount || item.unreadCount)) || 0 |
|||
}, |
|||
messageDesc(item) { |
|||
const count = this.unreadCount(item) |
|||
if (count > 0) return count + ' 条新评论，点击查看并标记已读' |
|||
return '暂无新评论，点击查看评论区' |
|||
}, |
|||
typeText(item) { |
|||
if (item.postType === 'wall') return '校园圈' |
|||
const map = { game: '游戏搭子', daily: '日常搭子', sport: '运动搭子' } |
|||
return map[item.partnerType] || '校园搭子' |
|||
}, |
|||
descText(item) { |
|||
return this.plainText(item.contentText || item.content || '') |
|||
}, |
|||
commentDesc(item) { |
|||
const prefix = item.replyToUserName ? '回复 ' + item.replyToUserName + '：' : '' |
|||
return prefix + (item.content || '') |
|||
}, |
|||
coverText(item) { |
|||
return this.firstImage(item.imageList) |
|||
|| this.firstImage(item.images) |
|||
|| item.coverImage |
|||
|| this.defaultCover |
|||
}, |
|||
commentCoverText(item) { |
|||
return item.displayCover || this.defaultCover |
|||
}, |
|||
firstImage(value) { |
|||
if (!value) return '' |
|||
if (Array.isArray(value)) return value[0] || '' |
|||
try { |
|||
const parsed = JSON.parse(value) |
|||
return Array.isArray(parsed) ? (parsed[0] || '') : '' |
|||
} catch (e) { |
|||
return '' |
|||
} |
|||
}, |
|||
plainText(value) { |
|||
return String(value || '') |
|||
.replace(/<img[^>]*>/gi, '[图片]') |
|||
.replace(/<[^>]+>/g, '') |
|||
.replace(/ /g, ' ') |
|||
.replace(/</g, '<') |
|||
.replace(/>/g, '>') |
|||
.replace(/&/g, '&') |
|||
.trim() |
|||
}, |
|||
formatBadgeCount(count) { |
|||
const value = Number(count) || 0 |
|||
return value > 99 ? '99+' : value |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
page { background: #f7f9f7; } |
|||
.my-campus-page { min-height: 100vh; background: #f7f9f7; color: #17362f; } |
|||
.header { padding: 0 26rpx 18rpx; background: linear-gradient(180deg, #e5fbf3, #f7f9f7); box-sizing: border-box; } |
|||
.back { width: 68rpx; height: 68rpx; display: flex; align-items: center; } |
|||
.title { margin-top: 8rpx; font-size: 40rpx; font-weight: 900; color: #17362f; } |
|||
.tabs { margin-top: 20rpx; display: flex; align-items: center; gap: 12rpx; } |
|||
.tab { position: relative; flex-shrink: 0; min-width: 132rpx; height: 58rpx; padding: 0 20rpx; display: flex; align-items: center; justify-content: center; border-radius: 30rpx; background: #fff; color: #758782; font-size: 23rpx; box-shadow: 0 8rpx 20rpx rgba(20, 60, 48, 0.045); box-sizing: border-box; } |
|||
.tab.active { background: linear-gradient(135deg, #38c897, #19af7e); color: #fff; font-weight: 900; } |
|||
.tab-badge, .card-badge { min-width: 30rpx; height: 30rpx; padding: 0 8rpx; border-radius: 18rpx; background: #ff4d5f; color: #fff; font-size: 18rpx; font-weight: 900; line-height: 30rpx; text-align: center; box-sizing: border-box; } |
|||
.tab-badge { margin-left: 8rpx; } |
|||
.card-badge { margin-left: 8rpx; flex-shrink: 0; } |
|||
.search-bar { height: 70rpx; margin: 0 24rpx 16rpx; padding: 0 12rpx 0 22rpx; display: flex; align-items: center; border-radius: 38rpx; background: #fff; box-shadow: 0 8rpx 22rpx rgba(20, 60, 48, 0.045); box-sizing: border-box; } |
|||
.search-input { flex: 1; height: 68rpx; margin-left: 10rpx; color: #293632; font-size: 24rpx; line-height: 68rpx; } |
|||
.search-clear { padding: 0 12rpx; color: #9aa8a4; font-size: 22rpx; } |
|||
.search-btn { width: 86rpx; height: 54rpx; border-radius: 28rpx; background: linear-gradient(135deg, #38c897, #19af7e); color: #fff; font-size: 23rpx; font-weight: 800; line-height: 54rpx; text-align: center; } |
|||
.swipe-tip { height: 52rpx; margin: 0 24rpx 16rpx; padding: 0 20rpx; display: flex; align-items: center; border-radius: 26rpx; background: #eafaf3; color: #4f7368; font-size: 22rpx; box-sizing: border-box; } |
|||
.swipe-tip text { margin-left: 8rpx; } |
|||
.list { height: calc(100vh - 286rpx); } |
|||
.list--with-tip { height: calc(100vh - 354rpx); } |
|||
.card { position: relative; margin: 18rpx 24rpx 0; padding: 18rpx; display: flex; align-items: center; border-radius: 24rpx; background: #fff; box-shadow: 0 8rpx 22rpx rgba(20, 60, 48, 0.05); } |
|||
.message-card { border: 2rpx solid rgba(36, 185, 121, .10); } |
|||
.cover { width: 126rpx; height: 126rpx; border-radius: 18rpx; background: #edf3ef; flex-shrink: 0; } |
|||
.main { flex: 1; min-width: 0; margin-left: 18rpx; } |
|||
.name-row { display: flex; align-items: center; min-width: 0; } |
|||
.name { overflow: hidden; font-size: 28rpx; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } |
|||
.name-row .name { flex: 1; } |
|||
.desc { margin-top: 8rpx; overflow: hidden; color: #71817c; font-size: 23rpx; text-overflow: ellipsis; white-space: nowrap; } |
|||
.meta { margin-top: 8rpx; display: flex; gap: 14rpx; color: #a0aaa6; font-size: 20rpx; } |
|||
.meta text:first-child { color: #22a879; font-weight: 900; } |
|||
.status { margin-left: 12rpx; color: #22a879; font-size: 22rpx; font-weight: 800; white-space: nowrap; } |
|||
.status--off { color: #9aa8a4; } |
|||
.status--action { padding: 8rpx 14rpx; border-radius: 18rpx; background: #eafaf3; color: #18a878; font-size: 20rpx; } |
|||
.status--danger { padding: 8rpx 14rpx; border-radius: 18rpx; background: #fff2f2; color: #ef4c3f; font-size: 20rpx; } |
|||
.empty, .load-more { padding: 70rpx 0; color: #9aa8a4; text-align: center; font-size: 24rpx; } |
|||
.bottom-space { height: 120rpx; } |
|||
</style> |
|||
Loading…
Reference in new issue