no message
This commit is contained in:
hajimi
@@ -0,0 +1,582 @@
|
||||
<template>
|
||||
<view class="post-card" @tap="$emit('tap')">
|
||||
<image class="post-card__avatar" :src="post.user?.avatar || '/static/images/avatar.png'" mode="aspectFill"
|
||||
@tap.stop="$emit('avatar-tap', post.user_id)" />
|
||||
<view class="post-card__body">
|
||||
<view class="post-card__main">
|
||||
<!-- 头部：昵称·时间 + 标签 -->
|
||||
<view class="post-card__header">
|
||||
<view class="post-card__user">
|
||||
<text class="post-card__nickname">{{ post.user?.nickname || '匿名用户' }}</text>
|
||||
<text class="post-card__dot">·</text>
|
||||
<text class="post-card__time">{{ formatTime(post.create_time) }}</text>
|
||||
</view>
|
||||
<view class="post-card__badges">
|
||||
<view v-if="post.is_paid" class="post-card__badge post-card__badge--paid">
|
||||
<text>{{ post.price_points }}积分</text>
|
||||
</view>
|
||||
<view v-if="post.is_hot" class="post-card__badge post-card__badge--hot">
|
||||
<text>热门</text>
|
||||
</view>
|
||||
<view v-if="post.is_top" class="post-card__badge post-card__badge--top">
|
||||
<text>置顶</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 正文内容 -->
|
||||
<view class="post-card__content">
|
||||
<text class="post-card__text"
|
||||
:class="{ 'post-card__text--locked': post.is_paid && !post.is_unlocked }">{{ post.content_short
|
||||
|| post.content }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="displayTranslatedText" class="post-card__translate">
|
||||
<text class="post-card__translate-text">{{ displayTranslatedText }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 付费解锁 -->
|
||||
<view v-if="post.is_paid && !post.is_unlocked" class="post-card__unlock" @tap.stop="$emit('unlock')">
|
||||
<text class="post-card__unlock-text">{{ post.price_points }}积分解锁全文</text>
|
||||
<view class="post-card__unlock-btn">
|
||||
<text>解锁</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片 -->
|
||||
<view v-if="
|
||||
post.images &&
|
||||
post.images.length > 0 &&
|
||||
!(post.is_paid && !post.is_unlocked)
|
||||
" class="post-card__images" :class="{ 'post-card__images--full': isLotteryPost }">
|
||||
<template v-if="isLotteryPost">
|
||||
<image v-for="(img, idx) in post.images" :key="idx" class="post-card__img post-card__img--full"
|
||||
:src="img" mode="widthFix" @tap.stop="previewImage(idx)" />
|
||||
</template>
|
||||
<template v-else-if="trumpSourceUrl">
|
||||
<view class="post-card__external-cover" @tap.stop="openSourceUrl">
|
||||
<view class="post-card__external-cover-icon">
|
||||
<text>T</text>
|
||||
</view>
|
||||
<view class="post-card__external-cover-body">
|
||||
<text class="post-card__external-cover-title">Truth Social 图片暂不可直连</text>
|
||||
<text class="post-card__external-cover-desc">点击查看原帖</text>
|
||||
</view>
|
||||
<view class="post-card__external-cover-btn">
|
||||
<text>查看原帖</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image v-for="(img, idx) in post.images.slice(0, 3)" :key="idx" class="post-card__img"
|
||||
:src="img" mode="aspectFill" @tap.stop="previewImage(idx)" />
|
||||
<view v-if="post.images.length > 3" class="post-card__img-more" @tap.stop="previewImage(3)">
|
||||
<text>+{{ post.images.length - 3 }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 话题标签 -->
|
||||
<view v-if="post.tags && post.tags.length > 0" class="post-card__tags">
|
||||
<view v-for="(t, i) in post.tags" :key="i" class="post-card__tag">
|
||||
<text>#{{ t }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<view class="post-card__actions">
|
||||
<view class="post-card__action" @tap.stop="$emit('view')">
|
||||
<text class="post-card__action-icon">👁</text>
|
||||
<text class="post-card__action-num">{{ formatCount(post.view_count) }}</text>
|
||||
</view>
|
||||
<view class="post-card__action" @tap.stop="$emit('comment')">
|
||||
<text class="post-card__action-icon">💬</text>
|
||||
<text class="post-card__action-num">{{ formatCount(post.comment_count) }}</text>
|
||||
</view>
|
||||
<view class="post-card__action" :class="{ 'post-card__action--active': post.is_liked }"
|
||||
@tap.stop="$emit('like')">
|
||||
<text class="post-card__action-icon">👍</text>
|
||||
<text class="post-card__action-num">{{ formatCount(post.like_count) }}</text>
|
||||
</view>
|
||||
<view v-if="isLiuhePost" class="post-card__action"
|
||||
:class="{ 'post-card__action--loading': post._ai_loading }" @tap.stop="handleAiAnalysis">
|
||||
<text class="post-card__action-icon">🤖</text>
|
||||
<text class="post-card__action-num">{{
|
||||
post._ai_loading ? '…' : (aiAnalyzed ? '已分析' : 'AI')
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="post-card__action" @tap.stop="handleShareTap">
|
||||
<text class="post-card__action-icon">↗</text>
|
||||
<text class="post-card__action-num">{{ post.share_count ? formatCount(post.share_count) : ''
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<share-popup v-if="showSharePopup" v-model:show="showSharePopup" page-type="post" :page-id="post.id"
|
||||
:path="`/packages_community/pages/post_detail?id=${post.id}`"
|
||||
:title="post.content?.substring(0, 50) || '来看看这篇帖子'" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { translatePost } from '@/api/community'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import SharePopup from '@/components/share-popup/share-popup.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
post: any
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['tap', 'unlock', 'view', 'comment', 'like', 'avatar-tap', 'ai-analysis'])
|
||||
|
||||
const showSharePopup = ref(false)
|
||||
const handleShareTap = () => {
|
||||
showSharePopup.value = true
|
||||
}
|
||||
|
||||
const LIUHE_TAGS = ['旧澳六合', '新澳六合']
|
||||
const translatedText = ref('')
|
||||
const cachedContent = ref(props.post.translated_content || '')
|
||||
const isLotteryPost = computed(
|
||||
() => Array.isArray(props.post?.tags) && props.post.tags.includes('彩票')
|
||||
)
|
||||
const isLiuhePost = computed(() => {
|
||||
const tags = Array.isArray(props.post?.tags) ? props.post.tags : []
|
||||
return LIUHE_TAGS.some((tag) => tags.includes(tag))
|
||||
})
|
||||
const isTrumpPost = computed(
|
||||
() => Array.isArray(props.post?.tags) && props.post.tags.includes('特朗普')
|
||||
)
|
||||
const trumpSourceUrl = computed(() => {
|
||||
if (props.post?.source_url) return props.post.source_url
|
||||
const originId = props.post?.origin_id || ''
|
||||
if (!originId.startsWith('truthsocial:')) return ''
|
||||
const postId = originId.split(':')[1]
|
||||
if (!postId) return ''
|
||||
return `https://truthsocial.com/@realDonaldTrump/${postId}`
|
||||
})
|
||||
const displayTranslatedText = computed(() => translatedText.value || cachedContent.value || props.post?.translated_content || '')
|
||||
const autoTranslateStarted = ref(false)
|
||||
const aiAnalyzed = computed(() => !!displayTranslatedText.value)
|
||||
|
||||
const openSourceUrl = () => {
|
||||
if (!trumpSourceUrl.value) return
|
||||
uni.navigateTo({
|
||||
url: `/pages/webview/webview?url=${encodeURIComponent(trumpSourceUrl.value)}`
|
||||
})
|
||||
}
|
||||
|
||||
const previewImage = (index: number) => {
|
||||
const images = props.post?.images || []
|
||||
if (!images.length) return
|
||||
uni.previewImage({
|
||||
urls: images,
|
||||
current: images[index] || images[0],
|
||||
})
|
||||
}
|
||||
|
||||
const requestTranslate = async () => {
|
||||
try {
|
||||
const res = await translatePost({ post_id: props.post.id })
|
||||
if (res?.translated_content) {
|
||||
cachedContent.value = res.translated_content
|
||||
translatedText.value = res.translated_content
|
||||
return
|
||||
}
|
||||
} catch (e: any) {
|
||||
}
|
||||
}
|
||||
|
||||
const handleAiAnalysis = () => {
|
||||
if (props.post._ai_loading) return
|
||||
if (!getToken()) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
emit('ai-analysis', props.post)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.post?.translated_content,
|
||||
(value) => {
|
||||
if (value) {
|
||||
cachedContent.value = value
|
||||
translatedText.value = value
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.post?.id,
|
||||
async () => {
|
||||
autoTranslateStarted.value = false
|
||||
cachedContent.value = props.post?.translated_content || ''
|
||||
translatedText.value = props.post?.translated_content || ''
|
||||
if (!isTrumpPost.value || cachedContent.value || autoTranslateStarted.value || !props.post?.content) return
|
||||
autoTranslateStarted.value = true
|
||||
if (getToken()) {
|
||||
await requestTranslate()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const formatTime = (ts: any) => {
|
||||
if (!ts) return ''
|
||||
let timestamp: number
|
||||
if (typeof ts === 'string') {
|
||||
timestamp = new Date(ts.replace(/-/g, '/')).getTime() / 1000
|
||||
} else {
|
||||
timestamp = ts
|
||||
}
|
||||
if (isNaN(timestamp)) return ''
|
||||
const now = Date.now() / 1000
|
||||
const diff = now - timestamp
|
||||
if (diff < 60) return '刚刚'
|
||||
if (diff < 3600) return Math.floor(diff / 60) + '分钟前'
|
||||
if (diff < 86400) return Math.floor(diff / 3600) + '小时前'
|
||||
if (diff < 2592000) return Math.floor(diff / 86400) + '天前'
|
||||
const d = new Date(timestamp * 1000)
|
||||
return `${d.getMonth() + 1}-${d.getDate()}`
|
||||
}
|
||||
|
||||
const formatCount = (count: any) => {
|
||||
if (!count) return '0'
|
||||
const n = Number(count)
|
||||
if (n >= 10000) return (n / 10000).toFixed(1) + 'w'
|
||||
if (n >= 1000) return (n / 1000).toFixed(1) + 'k'
|
||||
return String(n)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.post-card {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 28rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin: 0 24rpx 16rpx;
|
||||
|
||||
&__avatar {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__nickname {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__dot {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin: 0 8rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.2;
|
||||
|
||||
&--paid {
|
||||
background: #e5edff;
|
||||
|
||||
text {
|
||||
color: #185dff;
|
||||
}
|
||||
}
|
||||
|
||||
&--hot {
|
||||
background: #ffe5e5;
|
||||
|
||||
text {
|
||||
color: #ee3835;
|
||||
}
|
||||
}
|
||||
|
||||
&--top {
|
||||
background: #e5edff;
|
||||
|
||||
text {
|
||||
color: #185dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 26rpx;
|
||||
color: #000;
|
||||
word-break: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
|
||||
&--locked {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__unlock {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 120rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #e5edff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
&__unlock-text {
|
||||
font-size: 28rpx;
|
||||
color: #185dff;
|
||||
}
|
||||
|
||||
&__unlock-btn {
|
||||
height: 56rpx;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #185dff;
|
||||
border-radius: 12rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__images {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
position: relative;
|
||||
|
||||
&--full {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
flex: 1;
|
||||
height: 210rpx;
|
||||
border-radius: 12rpx;
|
||||
min-width: 0;
|
||||
|
||||
&--full {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__img-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 33.33%;
|
||||
height: 210rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__external-cover {
|
||||
width: 100%;
|
||||
min-height: 210rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__external-cover-icon {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__external-cover-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
&__external-cover-title {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__external-cover-desc {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
&__external-cover-btn {
|
||||
height: 60rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #185dff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__translate {
|
||||
margin-top: 10rpx;
|
||||
padding-left: 4rpx;
|
||||
|
||||
&-text {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
color: #3f4a5a;
|
||||
line-height: 1.75;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 6rpx;
|
||||
background: #e5edff;
|
||||
|
||||
text {
|
||||
font-size: 22rpx;
|
||||
color: #185dff;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
&__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
|
||||
&--active {
|
||||
|
||||
.post-card__action-icon,
|
||||
.post-card__action-num {
|
||||
color: #185dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__action-icon {
|
||||
font-size: 28rpx;
|
||||
color: #262626;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__action-num {
|
||||
font-size: 24rpx;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,513 @@
|
||||
<template>
|
||||
<view class="community-page">
|
||||
<view class="community-header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="community-header__bar">
|
||||
<image v-if="websiteLogo" class="community-header__logo" :src="websiteLogo" mode="aspectFill" />
|
||||
<view class="community-header__search" @tap="goSearch">
|
||||
<text class="community-header__search-icon">🔍</text>
|
||||
<text class="community-header__search-text">搜索世博头条</text>
|
||||
</view>
|
||||
<view class="community-header__publish" @tap="goPublish">
|
||||
<text class="community-header__publish-icon">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="community-tags">
|
||||
<scroll-view scroll-x class="community-tags__scroll">
|
||||
<view class="community-tags__item" :class="{ 'community-tags__item--active': activeTag === 0 }"
|
||||
@tap="switchTag(0)">
|
||||
<text>全部</text>
|
||||
</view>
|
||||
<view v-if="isLogin" class="community-tags__item"
|
||||
:class="{ 'community-tags__item--active': activeTag === -1 }" @tap="switchTag(-1)">
|
||||
<text>关注</text>
|
||||
</view>
|
||||
<view v-for="tag in tagList" :key="tag.id" class="community-tags__item"
|
||||
:class="{ 'community-tags__item--active': activeTag === tag.id }" @tap="switchTag(tag.id)">
|
||||
<text>{{ tag.name }}</text>
|
||||
<text v-if="tag.is_hot" class="community-tags__hot">热</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="community-list" @scrolltolower="loadMore">
|
||||
<view v-if="loading && postList.length === 0" class="community-loading">
|
||||
<u-loading mode="circle" />
|
||||
</view>
|
||||
|
||||
<post-card v-for="post in postList" :key="post.id" :post="post" @tap="goDetail(post.id)"
|
||||
@unlock="handleUnlock(post)" @avatar-tap="goUserProfile" @like="handleLike(post)"
|
||||
@share="handleShare(post)" @ai-analysis="handleAiAnalysis" />
|
||||
|
||||
<view v-if="!loading && postList.length === 0" class="community-empty">
|
||||
<u-empty text="暂无帖子" mode="data" />
|
||||
</view>
|
||||
|
||||
<view v-if="loadingMore" class="community-loadmore">
|
||||
<u-loading mode="circle" size="32" />
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-if="finished && postList.length > 0" class="community-loadmore">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="community-fab" @tap="goPublish">
|
||||
<u-icon name="edit-pen" size="44" color="#fff" />
|
||||
</view>
|
||||
|
||||
<share-popup v-if="showSharePopup" v-model:show="showSharePopup" page-type="post" :page-id="sharePostId"
|
||||
:title="sharePostTitle || '帖子'" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { getCommunityPosts, getTagLists, purchasePost, toggleLike } from '@/api/community'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import PostCard from '@/packages_community/components/post-card.vue'
|
||||
import SharePopup from '@/components/share-popup/share-popup.vue'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const userStore = useUserStore()
|
||||
const COMMUNITY_ACTIVE_TAG_KEY = 'community_active_tag'
|
||||
|
||||
const isLogin = computed(() => userStore.isLogin)
|
||||
|
||||
const websiteLogo = computed(() => {
|
||||
const logo = appStore.config?.website?.shop_logo
|
||||
if (!logo) return ''
|
||||
if (logo.startsWith('http')) return logo
|
||||
return (appStore.config?.domain || '') + logo
|
||||
})
|
||||
|
||||
const goSearch = () => {
|
||||
uni.navigateTo({ url: '/pages/search/search' })
|
||||
}
|
||||
|
||||
const statusBarHeight = ref(0)
|
||||
const activeTag = ref(0)
|
||||
const tagList = ref<any[]>([])
|
||||
const postList = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const finished = ref(false)
|
||||
const page = ref(1)
|
||||
const pageSize = 15
|
||||
const needRefresh = ref(false)
|
||||
const fetchRequestId = ref(0)
|
||||
|
||||
const getSavedActiveTag = () => {
|
||||
const tagId = Number(uni.getStorageSync(COMMUNITY_ACTIVE_TAG_KEY))
|
||||
if (!Number.isFinite(tagId)) return 0
|
||||
if (tagId === -1 && !getToken()) return 0
|
||||
return tagId
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
// #ifdef APP-PLUS || MP
|
||||
statusBarHeight.value = sysInfo.statusBarHeight || 44
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
statusBarHeight.value = 0
|
||||
// #endif
|
||||
activeTag.value = getSavedActiveTag()
|
||||
fetchTags()
|
||||
fetchPosts(true)
|
||||
needRefresh.value = false
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (needRefresh.value) {
|
||||
needRefresh.value = false
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
fetchPosts(true)
|
||||
}
|
||||
})
|
||||
|
||||
const fetchTags = async () => {
|
||||
try {
|
||||
const res = await getTagLists()
|
||||
tagList.value = res || []
|
||||
} catch (e) {
|
||||
console.warn('fetchTags error', e)
|
||||
}
|
||||
}
|
||||
|
||||
const shouldHidePost = (post: any) => {
|
||||
const tags = Array.isArray(post?.tags) ? post.tags : []
|
||||
const images = Array.isArray(post?.images) ? post.images : []
|
||||
const content = typeof post?.content === 'string' ? post.content.trim() : ''
|
||||
const contentShort = typeof post?.content_short === 'string' ? post.content_short.trim() : ''
|
||||
return tags.includes('特朗普') && images.length > 0 && !content && !contentShort
|
||||
}
|
||||
|
||||
const isAbortError = (error: any) => {
|
||||
const message = String(error?.errMsg || error?.message || error || '')
|
||||
return message.includes('abort')
|
||||
}
|
||||
|
||||
const fetchPosts = async (reset = false) => {
|
||||
if (reset) {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
}
|
||||
if (finished.value) return
|
||||
const requestId = ++fetchRequestId.value
|
||||
|
||||
if (page.value === 1) {
|
||||
loading.value = true
|
||||
} else {
|
||||
loadingMore.value = true
|
||||
}
|
||||
|
||||
try {
|
||||
const params: Record<string, any> = {
|
||||
page_no: page.value,
|
||||
page_size: pageSize
|
||||
}
|
||||
if (activeTag.value === -1) {
|
||||
params.follow = 1
|
||||
} else if (activeTag.value > 0) {
|
||||
params.tag_id = activeTag.value
|
||||
}
|
||||
const res = await getCommunityPosts(params)
|
||||
const rawList = res?.lists || []
|
||||
const list = rawList.filter((item: any) => !shouldHidePost(item))
|
||||
if (requestId !== fetchRequestId.value) return
|
||||
|
||||
if (reset || page.value === 1) {
|
||||
postList.value = list
|
||||
} else {
|
||||
postList.value.push(...list)
|
||||
}
|
||||
|
||||
if (rawList.length < pageSize) {
|
||||
finished.value = true
|
||||
}
|
||||
page.value++
|
||||
} catch (e) {
|
||||
if (requestId === fetchRequestId.value && !isAbortError(e)) {
|
||||
uni.showToast({ title: '加载失败，请重试', icon: 'none' })
|
||||
}
|
||||
} finally {
|
||||
if (requestId === fetchRequestId.value) {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
if (finished.value || loadingMore.value) return
|
||||
fetchPosts()
|
||||
}
|
||||
|
||||
const switchTag = (id: number) => {
|
||||
if (activeTag.value === id) return
|
||||
activeTag.value = id
|
||||
uni.setStorageSync(COMMUNITY_ACTIVE_TAG_KEY, id)
|
||||
postList.value = []
|
||||
fetchPosts(true)
|
||||
}
|
||||
|
||||
const goDetail = (id: number) => {
|
||||
uni.navigateTo({ url: `/packages_community/pages/post_detail?id=${id}` })
|
||||
}
|
||||
|
||||
const goUserProfile = (userId: number) => {
|
||||
if (!userId) return
|
||||
uni.navigateTo({ url: `/packages_community/pages/user_profile?user_id=${userId}` })
|
||||
}
|
||||
|
||||
const goPublish = () => {
|
||||
if (!getToken()) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '发布内容需要登录，是否前往登录？',
|
||||
confirmText: '去登录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
needRefresh.value = true
|
||||
uni.navigateTo({ url: '/packages_community/pages/publish' })
|
||||
}
|
||||
|
||||
const checkLogin = () => {
|
||||
if (!getToken()) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '该操作需要登录，是否前往登录？',
|
||||
confirmText: '去登录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
}
|
||||
}
|
||||
})
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const handleUnlock = async (post: any) => {
|
||||
if (!getToken()) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '解锁内容需要登录，是否前往登录？',
|
||||
confirmText: '去登录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await purchasePost({ post_id: post.id, confirm: 0 })
|
||||
if (res?.content) {
|
||||
post.is_unlocked = 1
|
||||
post.content = res.content
|
||||
post.content_short = res.content
|
||||
return
|
||||
}
|
||||
if (res?.needs_payment) {
|
||||
uni.showModal({
|
||||
title: '解锁内容',
|
||||
content: `确认花费 ${res.cost || post.price_points} 积分解锁此内容？`,
|
||||
confirmText: '确认解锁',
|
||||
confirmColor: '#185dff',
|
||||
success: async (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
try {
|
||||
const payRes = await purchasePost({ post_id: post.id, confirm: 1 })
|
||||
post.is_unlocked = 1
|
||||
if (payRes?.content) {
|
||||
post.content = payRes.content
|
||||
post.content_short = payRes.content
|
||||
}
|
||||
needRefresh.value = true
|
||||
uni.showToast({ title: '解锁成功', icon: 'success' })
|
||||
} catch (_e) {
|
||||
// 请求层已自动提示错误信息
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (_e) {
|
||||
// 请求层已自动提示错误信息
|
||||
}
|
||||
}
|
||||
|
||||
const handleLike = async (post: any) => {
|
||||
if (!checkLogin()) return
|
||||
try {
|
||||
const res = await toggleLike({ target_id: post.id, target_type: 1 })
|
||||
const nextLiked = !!res?.is_liked
|
||||
const currentCount = Number(post.like_count || 0)
|
||||
post.is_liked = nextLiked
|
||||
post.like_count = Math.max(0, currentCount + (nextLiked ? 1 : -1))
|
||||
} catch (_e) {
|
||||
// 请求层已自动提示错误信息
|
||||
}
|
||||
}
|
||||
|
||||
// 分享弹窗
|
||||
const showSharePopup = ref(false)
|
||||
const sharePostId = ref(0)
|
||||
const sharePostTitle = ref('')
|
||||
|
||||
const handleShare = (post: any) => {
|
||||
sharePostId.value = post.id
|
||||
sharePostTitle.value = post.content?.substring(0, 50) || ''
|
||||
showSharePopup.value = true
|
||||
}
|
||||
|
||||
const handleAiAnalysis = (post: any) => {
|
||||
const tags = Array.isArray(post?.tags) ? post.tags : []
|
||||
if (!tags.includes('旧澳六合') && !tags.includes('新澳六合')) {
|
||||
return
|
||||
}
|
||||
const title = encodeURIComponent(String(post?.content || '帖子AI分析').split('\n')[0].trim().slice(0, 28) || '帖子AI分析')
|
||||
uni.navigateTo({ url: `/pages/ai_analysis/ai_analysis?type=post&id=${post.id}&title=${title}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.community-page {
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.community-header {
|
||||
background: #fff;
|
||||
padding: 0 24rpx 16rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex: 1;
|
||||
height: 76rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #f4f5f7;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
&__search-icon {
|
||||
font-size: 28rpx;
|
||||
color: #808080;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__search-text {
|
||||
font-size: 28rpx;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
&__publish {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #E5EDFF;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__publish-icon {
|
||||
font-size: 40rpx;
|
||||
color: #185dff;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.community-tags {
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
&__scroll {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 16rpx 24rpx 12rpx;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-right: 12rpx;
|
||||
vertical-align: top;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
background: #f4f5f7;
|
||||
|
||||
&--active {
|
||||
background: #e5edff;
|
||||
color: #185dff;
|
||||
}
|
||||
}
|
||||
|
||||
&__hot {
|
||||
font-size: 20rpx;
|
||||
color: #ee3835;
|
||||
background: #ffe5e5;
|
||||
padding: 2rpx 6rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-left: 2rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__item--active &__hot {
|
||||
color: #ee3835;
|
||||
background: #ffe5e5;
|
||||
}
|
||||
}
|
||||
|
||||
.community-list {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.community-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 60rpx 24rpx;
|
||||
}
|
||||
|
||||
.community-empty {
|
||||
padding: 120rpx 24rpx;
|
||||
}
|
||||
|
||||
.community-loadmore {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
padding: 24rpx 0 48rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.community-fab {
|
||||
position: fixed;
|
||||
right: 32rpx;
|
||||
bottom: 180rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #185dff, #ff6b5a);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(229, 77, 66, 0.4);
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<view class="publish-page">
|
||||
<view class="publish-header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="publish-header__left" @tap="handleCancel">取消</view>
|
||||
<view class="publish-header__title">发帖</view>
|
||||
<view class="publish-header__right">
|
||||
<view class="publish-btn" :class="{ 'publish-btn--disabled': !canPublish || publishing }"
|
||||
@tap="handlePublish">
|
||||
<text>{{ publishing ? '发布中' : '发布' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="publish-scroll" :style="{ height: scrollHeight + 'px' }">
|
||||
<view class="publish-body">
|
||||
<textarea v-model="form.content" class="publish-textarea" placeholder="分享你的体育见解..." :maxlength="2000"
|
||||
auto-height />
|
||||
|
||||
<view class="publish-images">
|
||||
<view v-for="(img, idx) in form.images.slice(0, form.images.length >= 9 ? 8 : form.images.length)"
|
||||
:key="idx" class="publish-images__item">
|
||||
<image :src="img" mode="aspectFill" class="publish-images__img" />
|
||||
<view class="publish-images__del" @tap="removeImage(idx)">
|
||||
<u-icon name="close" size="24" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.images.length >= 9" class="publish-images__more" @tap="chooseImage">
|
||||
<image :src="form.images[8]" mode="aspectFill" class="publish-images__img" />
|
||||
<view class="publish-images__more-mask">
|
||||
<text class="publish-images__more-text">+{{ form.images.length - 8 }}</text>
|
||||
<text class="publish-images__more-hint">点击继续添加</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.images.length < 9" class="publish-images__add" @tap="chooseImage">
|
||||
<u-icon name="plus" size="52" color="#ccc" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="publish-paid">
|
||||
<view class="publish-paid__row">
|
||||
<text class="publish-paid__label">收费阅读</text>
|
||||
<switch :checked="isPaid" @change="isPaid = $event.detail.value" color="#185dff" />
|
||||
</view>
|
||||
<view v-if="isPaid" class="publish-paid__price">
|
||||
<text class="publish-paid__label">积分价格</text>
|
||||
<input v-model="pricePoints" type="number" class="publish-paid__input" placeholder="输入积分(1~9999)" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="publish-tags">
|
||||
<view class="publish-tags__label">
|
||||
<text>选择标签</text>
|
||||
</view>
|
||||
<view class="publish-tags__list">
|
||||
<view v-for="tag in tagList" :key="tag.id" class="publish-tags__item"
|
||||
:class="{ 'publish-tags__item--active': selectedTags.includes(tag.id) }"
|
||||
@tap="toggleTag(tag.id)">
|
||||
<text>#{{ tag.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, computed, onMounted } from 'vue'
|
||||
import { publishPost, getTagLists } from '@/api/community'
|
||||
import { uploadImage } from '@/api/app'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
const statusBarHeight = ref(0)
|
||||
const scrollHeight = ref(500)
|
||||
const publishing = ref(false)
|
||||
const tagList = ref<any[]>([])
|
||||
const selectedTags = ref<number[]>([])
|
||||
|
||||
const isPaid = ref(false)
|
||||
const pricePoints = ref('')
|
||||
|
||||
const form = reactive({
|
||||
content: '',
|
||||
images: [] as string[]
|
||||
})
|
||||
|
||||
const canPublish = computed(() => {
|
||||
return form.content.trim().length > 0 || form.images.length > 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
// #ifdef APP-PLUS || MP
|
||||
statusBarHeight.value = sysInfo.statusBarHeight || 44
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
statusBarHeight.value = 20
|
||||
// #endif
|
||||
scrollHeight.value = sysInfo.windowHeight - statusBarHeight.value - 88
|
||||
fetchTags()
|
||||
})
|
||||
|
||||
const fetchTags = async () => {
|
||||
try {
|
||||
const res = await getTagLists()
|
||||
tagList.value = res || []
|
||||
} catch (e) { }
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.switchTab({ url: '/pages/empty/empty' })
|
||||
}
|
||||
}
|
||||
|
||||
const handlePublish = async () => {
|
||||
if (!getToken()) {
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
if (!canPublish.value || publishing.value) return
|
||||
publishing.value = true
|
||||
try {
|
||||
if (isPaid.value) {
|
||||
const pts = parseInt(pricePoints.value)
|
||||
if (!pts || pts < 1 || pts > 9999) {
|
||||
uni.showToast({ title: '积分价格范围1~9999', icon: 'none' })
|
||||
publishing.value = false
|
||||
return
|
||||
}
|
||||
}
|
||||
// 上传本地图片到服务器
|
||||
const uploadedImages: string[] = []
|
||||
for (const img of form.images) {
|
||||
if (img.startsWith('http')) {
|
||||
uploadedImages.push(img)
|
||||
} else {
|
||||
const token = getToken()
|
||||
const res: any = await uploadImage(img, token || '')
|
||||
if (res?.uri) {
|
||||
uploadedImages.push(res.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
await publishPost({
|
||||
content: form.content,
|
||||
images: uploadedImages,
|
||||
tag_ids: selectedTags.value,
|
||||
post_type: 0,
|
||||
is_paid: isPaid.value ? 1 : 0,
|
||||
price_points: isPaid.value ? parseInt(pricePoints.value) : 0
|
||||
})
|
||||
uni.showToast({ title: '发布成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.switchTab({ url: '/pages/empty/empty' })
|
||||
}
|
||||
}, 1200)
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '发布失败', icon: 'none' })
|
||||
} finally {
|
||||
publishing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const chooseImage = () => {
|
||||
const remaining = 18 - form.images.length
|
||||
if (remaining <= 0) return
|
||||
uni.chooseImage({
|
||||
count: remaining,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
form.images.push(...res.tempFilePaths)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const removeImage = (idx: number) => {
|
||||
form.images.splice(idx, 1)
|
||||
}
|
||||
|
||||
const toggleTag = (id: number) => {
|
||||
const idx = selectedTags.value.indexOf(id)
|
||||
if (idx >= 0) {
|
||||
selectedTags.value.splice(idx, 1)
|
||||
} else {
|
||||
if (selectedTags.value.length >= 3) {
|
||||
uni.showToast({ title: '最多选择3个标签', icon: 'none' })
|
||||
return
|
||||
}
|
||||
selectedTags.value.push(id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.publish-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.publish-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&__left {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__right {
|
||||
width: 120rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.publish-btn {
|
||||
width: 120rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #185dff;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.publish-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.publish-body {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.publish-textarea {
|
||||
width: 100%;
|
||||
min-height: 300rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.7;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.publish-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-top: 24rpx;
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
&__del {
|
||||
position: absolute;
|
||||
top: -12rpx;
|
||||
right: -12rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__add {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border: 2rpx dashed #ddd;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__more {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__more-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
&__more-text {
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&__more-hint {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.publish-paid {
|
||||
padding: 24rpx 30rpx;
|
||||
border-top: 16rpx solid #f5f5f5;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 300rpx;
|
||||
height: 64rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.publish-tags {
|
||||
padding: 24rpx 30rpx;
|
||||
border-top: 16rpx solid #f5f5f5;
|
||||
|
||||
&__label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 10rpx 24rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&--active {
|
||||
background: #e5edff;
|
||||
color: #185dff;
|
||||
border-color: #185dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,672 @@
|
||||
<template>
|
||||
<view class="user-profile">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="profile-header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="profile-nav">
|
||||
<view class="profile-nav__back" @tap="goBack">
|
||||
<u-icon name="arrow-left" color="#fff" size="40" />
|
||||
</view>
|
||||
<view class="profile-nav__actions">
|
||||
<view class="profile-nav__icon" @tap="handleShare">
|
||||
<u-icon name="share" color="#fff" size="36" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 用户信息 -->
|
||||
<view v-if="userInfo" class="profile-info">
|
||||
<view class="profile-info__row">
|
||||
<image class="profile-info__avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill" />
|
||||
<view class="profile-info__detail">
|
||||
<text class="profile-info__name">{{ userInfo.nickname || '匿名用户' }}</text>
|
||||
<text class="profile-info__id">ID:{{ userInfo.sn || userInfo.id }}</text>
|
||||
</view>
|
||||
<view v-if="!userInfo.is_self" class="profile-info__actions">
|
||||
<view class="profile-info__follow-btn"
|
||||
:class="{ 'profile-info__follow-btn--active': userInfo.is_followed }" @tap="handleFollow">
|
||||
<text>{{ userInfo.is_followed || userInfo.is_friend ? '已好友' : '加好友' }}</text>
|
||||
</view>
|
||||
<view v-if="userInfo.is_followed || userInfo.is_friend" class="profile-info__chat-btn"
|
||||
@tap="handlePrivateChat">
|
||||
<text>私聊</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="profile-info__desc">已加入世博头条{{ userInfo.join_days }}天，获得{{ userInfo.like_count || 0
|
||||
}}个赞</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab栏 -->
|
||||
<view class="profile-tabs">
|
||||
<view v-for="tab in tabs" :key="tab.key" class="profile-tabs__item"
|
||||
:class="{ 'profile-tabs__item--active': activeTab === tab.key }" @tap="switchTab(tab.key)">
|
||||
<text class="profile-tabs__label">{{ tab.label }}</text>
|
||||
<text class="profile-tabs__count">{{ tab.count }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容列表 -->
|
||||
<scroll-view scroll-y class="profile-content" @scrolltolower="loadMore">
|
||||
<view v-if="activeTab === 'posts'">
|
||||
<view v-for="item in postList" :key="item.id" class="article-card" @tap="goPostDetail(item.id)">
|
||||
<view class="article-card__body">
|
||||
<view class="article-card__text">
|
||||
<text class="article-card__title">{{ item.content_short || item.content }}</text>
|
||||
<view class="article-card__meta">
|
||||
<text>{{ item.user?.nickname || '匿名' }}</text>
|
||||
<text>{{ (item.comment_count || 0) }}评论</text>
|
||||
<text>{{ formatTime(item.create_time) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="getTrumpSourceUrl(item)" class="article-card__thumb article-card__thumb--external"
|
||||
@tap.stop="openSourceUrl(getTrumpSourceUrl(item))">
|
||||
<text class="article-card__thumb-badge">T</text>
|
||||
<text class="article-card__thumb-text">查看原帖</text>
|
||||
</view>
|
||||
<image v-else-if="item.images && item.images.length > 0" class="article-card__thumb"
|
||||
:src="item.images[0]" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="article-card__divider" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="activeTab === 'comments'" class="profile-empty">
|
||||
<text>评论列表开发中...</text>
|
||||
</view>
|
||||
|
||||
<view v-if="activeTab === 'following'" class="user-list">
|
||||
<view v-for="item in followList" :key="item.id" class="user-list__item" @tap="goUserProfile(item.id)">
|
||||
<image class="user-list__avatar" :src="item.avatar || defaultAvatar" mode="aspectFill" />
|
||||
<text class="user-list__name">{{ item.nickname || '匿名' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="activeTab === 'fans'" class="user-list">
|
||||
<view v-for="item in fansList" :key="item.id" class="user-list__item" @tap="goUserProfile(item.id)">
|
||||
<image class="user-list__avatar" :src="item.avatar || defaultAvatar" mode="aspectFill" />
|
||||
<view class="user-list__info">
|
||||
<text class="user-list__name">{{ item.nickname || '匿名' }}</text>
|
||||
<text v-if="item.is_mutual" class="user-list__mutual">互相关注</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="profile-loading">
|
||||
<u-loading mode="circle" />
|
||||
</view>
|
||||
<view v-if="!loading && finished && currentList.length > 0" class="profile-finished">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
<view v-if="!loading && currentList.length === 0" class="profile-empty">
|
||||
<text>暂无内容</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getUserProfile, getCommunityPosts, toggleFollow } from '@/api/community'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import request from '@/utils/request'
|
||||
import { openChat } from '@/api/chat'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const defaultAvatar = computed(() => {
|
||||
const logo = appStore.config?.website?.shop_logo
|
||||
if (!logo) return '/static/images/avatar.png'
|
||||
if (logo.startsWith('http')) return logo
|
||||
return (appStore.config?.domain || '') + logo
|
||||
})
|
||||
|
||||
const statusBarHeight = ref(0)
|
||||
const userId = ref(0)
|
||||
const userInfo = ref<any>(null)
|
||||
const activeTab = ref('posts')
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
const page = ref(1)
|
||||
|
||||
const postList = ref<any[]>([])
|
||||
const followList = ref<any[]>([])
|
||||
const fansList = ref<any[]>([])
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ key: 'posts', label: '发布', count: userInfo.value?.post_count || 0 },
|
||||
{ key: 'comments', label: '评论', count: userInfo.value?.comment_count || 0 },
|
||||
{ key: 'following', label: '关注', count: userInfo.value?.follow_count || 0 },
|
||||
{ key: 'fans', label: '粉丝', count: userInfo.value?.fans_count || 0 }
|
||||
])
|
||||
|
||||
const currentList = computed(() => {
|
||||
if (activeTab.value === 'posts') return postList.value
|
||||
if (activeTab.value === 'following') return followList.value
|
||||
if (activeTab.value === 'fans') return fansList.value
|
||||
return []
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
// #ifdef APP-PLUS || MP
|
||||
statusBarHeight.value = sysInfo.statusBarHeight || 44
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
statusBarHeight.value = 0
|
||||
// #endif
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
const id = Number(options?.user_id || 0)
|
||||
if (id > 0) {
|
||||
userId.value = id
|
||||
fetchProfile(id)
|
||||
fetchPosts(true)
|
||||
} else {
|
||||
uni.showToast({ title: '参数错误', icon: 'none' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
}
|
||||
})
|
||||
|
||||
const fetchProfile = async (id: number) => {
|
||||
try {
|
||||
const res = await getUserProfile({ user_id: id })
|
||||
userInfo.value = res
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
const shouldHidePost = (post: any) => {
|
||||
const tags = Array.isArray(post?.tags) ? post.tags : []
|
||||
const images = Array.isArray(post?.images) ? post.images : []
|
||||
const content = typeof post?.content === 'string' ? post.content.trim() : ''
|
||||
const contentShort = typeof post?.content_short === 'string' ? post.content_short.trim() : ''
|
||||
return tags.includes('特朗普') && images.length > 0 && !content && !contentShort
|
||||
}
|
||||
|
||||
const fetchPosts = async (reset = false) => {
|
||||
if (reset) {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
postList.value = []
|
||||
}
|
||||
if (finished.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCommunityPosts({
|
||||
user_id: userId.value,
|
||||
page_no: page.value,
|
||||
page_size: 15
|
||||
})
|
||||
const rawList = res?.lists || []
|
||||
const list = rawList.filter((item: any) => !shouldHidePost(item))
|
||||
if (reset) {
|
||||
postList.value = list
|
||||
} else {
|
||||
postList.value.push(...list)
|
||||
}
|
||||
if (rawList.length < 15) {
|
||||
finished.value = true
|
||||
} else {
|
||||
page.value++
|
||||
}
|
||||
} catch (e) { /* */ } finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchFollowList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await request.get({
|
||||
url: '/community/followList',
|
||||
data: { user_id: userId.value, page_no: 1, page_size: 100 }
|
||||
})
|
||||
followList.value = data?.lists || []
|
||||
} catch (e) { /* */ } finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchFansList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await request.get({
|
||||
url: '/community/fansList',
|
||||
data: { user_id: userId.value, page_no: 1, page_size: 100 }
|
||||
})
|
||||
fansList.value = data?.lists || []
|
||||
} catch (e) { /* */ } finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const switchTab = (key: string) => {
|
||||
if (activeTab.value === key) return
|
||||
activeTab.value = key
|
||||
if (key === 'posts' && postList.value.length === 0) {
|
||||
fetchPosts(true)
|
||||
} else if (key === 'following' && followList.value.length === 0) {
|
||||
fetchFollowList()
|
||||
} else if (key === 'fans' && fansList.value.length === 0) {
|
||||
fetchFansList()
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
if (activeTab.value === 'posts') {
|
||||
fetchPosts()
|
||||
}
|
||||
}
|
||||
|
||||
const checkLogin = () => {
|
||||
if (!getToken()) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '该操作需要登录，是否前往登录？',
|
||||
confirmText: '去登录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({ url: '/pages/login/login' })
|
||||
}
|
||||
}
|
||||
})
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const handleFollow = async () => {
|
||||
if (!checkLogin()) return
|
||||
if (!userInfo.value) return
|
||||
try {
|
||||
const res = await toggleFollow({ follow_user_id: userId.value })
|
||||
const followed = !!res?.is_followed
|
||||
userInfo.value.is_followed = followed
|
||||
userInfo.value.is_friend = followed
|
||||
const relation = userInfo.value.relationship || {}
|
||||
relation.is_followed_by_me = followed
|
||||
relation.is_mutual = followed && !!relation.is_following_me
|
||||
relation.relationship_text = relation.is_mutual ? '互相关注' : '不是好友'
|
||||
userInfo.value.relationship = relation
|
||||
if (followed) {
|
||||
userInfo.value.fans_count = (userInfo.value.fans_count || 0) + 1
|
||||
uni.showToast({ title: '已加好友', icon: 'success' })
|
||||
} else {
|
||||
userInfo.value.fans_count = Math.max(0, (userInfo.value.fans_count || 0) - 1)
|
||||
uni.showToast({ title: '已取消好友', icon: 'none' })
|
||||
}
|
||||
} catch (e) { /* */ }
|
||||
}
|
||||
|
||||
const handlePrivateChat = async () => {
|
||||
if (!checkLogin()) return
|
||||
if (!userId.value) return
|
||||
try {
|
||||
const chatSession = await openChat({ target_user_id: userId.value })
|
||||
if (chatSession?.id) {
|
||||
uni.navigateTo({ url: `/pages/private_chat/room?session_id=${chatSession.id}` })
|
||||
}
|
||||
} catch (e) {
|
||||
// 请求层会提示后端返回信息
|
||||
}
|
||||
}
|
||||
|
||||
const handleShare = () => {
|
||||
uni.showToast({ title: '分享功能开发中', icon: 'none' })
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const goPostDetail = (id: number) => {
|
||||
uni.navigateTo({ url: `/packages_community/pages/post_detail?id=${id}` })
|
||||
}
|
||||
|
||||
const goUserProfile = (id: number) => {
|
||||
if (id === userId.value) return
|
||||
uni.navigateTo({ url: `/packages_community/pages/user_profile?user_id=${id}` })
|
||||
}
|
||||
|
||||
const getTrumpSourceUrl = (item: any) => {
|
||||
if (!Array.isArray(item?.tags) || !item.tags.includes('特朗普')) return ''
|
||||
if (item.source_url) return item.source_url
|
||||
const originId = item.origin_id || ''
|
||||
if (!originId.startsWith('truthsocial:')) return ''
|
||||
const postId = originId.split(':')[1]
|
||||
if (!postId) return ''
|
||||
return `https://truthsocial.com/@realDonaldTrump/${postId}`
|
||||
}
|
||||
|
||||
const openSourceUrl = (url: string) => {
|
||||
if (!url) return
|
||||
uni.navigateTo({
|
||||
url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
|
||||
})
|
||||
}
|
||||
|
||||
const formatTime = (time: string) => {
|
||||
if (!time) return ''
|
||||
const d = new Date(time.replace(/-/g, '/'))
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
const h = String(d.getHours()).padStart(2, '0')
|
||||
const min = String(d.getMinutes()).padStart(2, '0')
|
||||
return `${m}-${day} ${h}:${min}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-profile {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
background: linear-gradient(135deg, #0053d8 0%, #185dff 100%);
|
||||
padding-bottom: 36rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
|
||||
&__back {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
padding: 0 32rpx;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 28rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__detail {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__id {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 4rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex-shrink: 0;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
&__follow-btn,
|
||||
&__chat-btn {
|
||||
padding: 8rpx 28rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
||||
white-space: nowrap;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__follow-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
&--active {
|
||||
background: rgba(229, 237, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&__chat-btn {
|
||||
background: #fff;
|
||||
border-color: #fff;
|
||||
|
||||
text {
|
||||
color: #185dff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 24rpx;
|
||||
padding-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
flex-shrink: 0;
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 24rpx 0 20rpx;
|
||||
position: relative;
|
||||
|
||||
&--active {
|
||||
.profile-tabs__label {
|
||||
color: #0053d8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.profile-tabs__count {
|
||||
color: #0053d8;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60rpx;
|
||||
height: 4rpx;
|
||||
background: #0053d8;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&__count {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.article-card {
|
||||
padding: 24rpx 32rpx 0;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
width: 226rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 24rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--external {
|
||||
background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__thumb-badge {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__thumb-text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 1rpx;
|
||||
background: #e6e6e6;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
padding: 0 32rpx;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
&__mutual {
|
||||
font-size: 22rpx;
|
||||
color: #0053d8;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-loading,
|
||||
.profile-finished,
|
||||
.profile-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user