mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-06-09 19:47:39 +08:00
Revert "feat: add reusable multi-tabs component"
This reverts commit e8a162d859.
This commit is contained in:
Tim
@@ -1,82 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="multi-tabs">
|
|
||||||
<div class="multi-tabs-header" :class="headerClass">
|
|
||||||
<div
|
|
||||||
v-for="tab in tabs"
|
|
||||||
:key="tab.name"
|
|
||||||
:class="[itemClass, { selected: current === tab.name }]"
|
|
||||||
@click="select(tab.name)"
|
|
||||||
>
|
|
||||||
<div :class="labelClass">
|
|
||||||
<i v-if="tab.icon" :class="tab.icon"></i>
|
|
||||||
{{ tab.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<slot name="header-extra" />
|
|
||||||
</div>
|
|
||||||
<div class="multi-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
|
|
||||||
<slot :selected="current" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed, ref } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
tabs: { type: Array, required: true },
|
|
||||||
modelValue: { type: String, required: true },
|
|
||||||
headerClass: { type: String, default: '' },
|
|
||||||
itemClass: { type: String, default: '' },
|
|
||||||
labelClass: { type: String, default: '' },
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const current = computed({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val) => emit('update:modelValue', val),
|
|
||||||
})
|
|
||||||
|
|
||||||
const select = (name) => {
|
|
||||||
current.value = name
|
|
||||||
}
|
|
||||||
|
|
||||||
const startX = ref(0)
|
|
||||||
const startY = ref(0)
|
|
||||||
|
|
||||||
const onTouchStart = (e) => {
|
|
||||||
const t = e.touches[0]
|
|
||||||
startX.value = t.clientX
|
|
||||||
startY.value = t.clientY
|
|
||||||
}
|
|
||||||
|
|
||||||
const onTouchEnd = (e) => {
|
|
||||||
const t = e.changedTouches[0]
|
|
||||||
const dx = t.clientX - startX.value
|
|
||||||
const dy = t.clientY - startY.value
|
|
||||||
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
|
|
||||||
const idx = props.tabs.findIndex((t) => t.name === current.value)
|
|
||||||
if (dx < 0 && idx < props.tabs.length - 1) {
|
|
||||||
current.value = props.tabs[idx + 1].name
|
|
||||||
} else if (dx > 0 && idx > 0) {
|
|
||||||
current.value = props.tabs[idx - 1].name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.multi-tabs-header {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
overflow-x: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
.multi-tabs-header::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.multi-tabs-content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,29 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="about-page">
|
<div class="about-page">
|
||||||
<MultiTabs
|
<div class="about-tabs">
|
||||||
:tabs="tabs"
|
<div
|
||||||
v-model="selectedTab"
|
v-for="tab in tabs"
|
||||||
header-class="about-tabs"
|
:key="tab.name"
|
||||||
item-class="about-tabs-item"
|
:class="['about-tabs-item', { selected: selectedTab === tab.name }]"
|
||||||
label-class="about-tabs-item-label"
|
@click="selectTab(tab.name)"
|
||||||
>
|
>
|
||||||
<template #default>
|
<div class="about-tabs-item-label">{{ tab.label }}</div>
|
||||||
<div class="about-loading" v-if="isFetching">
|
</div>
|
||||||
<l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
|
</div>
|
||||||
</div>
|
<div class="about-loading" v-if="isFetching">
|
||||||
<div
|
<l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
|
||||||
v-else
|
</div>
|
||||||
class="about-content"
|
<div
|
||||||
v-html="renderMarkdown(content)"
|
v-else
|
||||||
@click="handleContentClick"
|
class="about-content"
|
||||||
></div>
|
v-html="renderMarkdown(content)"
|
||||||
</template>
|
@click="handleContentClick"
|
||||||
</MultiTabs>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { onMounted, ref, watch } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
|
import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -71,21 +71,21 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(selectedTab, (name) => {
|
const selectTab = (name) => {
|
||||||
|
selectedTab.value = name
|
||||||
const tab = tabs.find((t) => t.name === name)
|
const tab = tabs.find((t) => t.name === name)
|
||||||
if (tab) loadContent(tab.file)
|
if (tab) loadContent(tab.file)
|
||||||
})
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const first = tabs[0]
|
loadContent(tabs[0].file)
|
||||||
if (first) loadContent(first.file)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleContentClick = (e) => {
|
const handleContentClick = (e) => {
|
||||||
handleMarkdownClick(e)
|
handleMarkdownClick(e)
|
||||||
}
|
}
|
||||||
|
|
||||||
return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
|
return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -7,118 +7,116 @@
|
|||||||
<div v-if="!isFloatMode" class="float-control">
|
<div v-if="!isFloatMode" class="float-control">
|
||||||
<i class="fas fa-compress" @click="minimize" title="最小化"></i>
|
<i class="fas fa-compress" @click="minimize" title="最小化"></i>
|
||||||
</div>
|
</div>
|
||||||
<MultiTabs :tabs="tabs" v-model="activeTab" header-class="tabs" item-class="tab">
|
<div class="tabs">
|
||||||
<template #default="{ selected }">
|
<div :class="['tab', { active: activeTab === 'messages' }]" @click="switchToMessage">
|
||||||
<div v-if="selected === 'messages'">
|
站内信
|
||||||
<div v-if="loading" class="loading-message">
|
</div>
|
||||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
<div :class="['tab', { active: activeTab === 'channels' }]" @click="switchToChannels">
|
||||||
|
频道
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="activeTab === 'messages'">
|
||||||
|
<div v-if="loading" class="loading-message">
|
||||||
|
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="error" class="error-container">
|
||||||
|
<div class="error-text">{{ error }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="!loading && !isFloatMode" class="search-container">
|
||||||
|
<SearchPersonDropdown />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="!loading && conversations.length === 0" class="empty-container">
|
||||||
|
<BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!loading"
|
||||||
|
v-for="convo in conversations"
|
||||||
|
:key="convo.id"
|
||||||
|
class="conversation-item"
|
||||||
|
@click="goToConversation(convo.id)"
|
||||||
|
>
|
||||||
|
<div class="conversation-avatar">
|
||||||
|
<BaseImage
|
||||||
|
:src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
|
||||||
|
:alt="getOtherParticipant(convo)?.username || '用户'"
|
||||||
|
class="avatar-img"
|
||||||
|
@error="handleAvatarError"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="conversation-content">
|
||||||
|
<div class="conversation-header">
|
||||||
|
<div class="participant-name">
|
||||||
|
{{ getOtherParticipant(convo)?.username || '未知用户' }}
|
||||||
|
</div>
|
||||||
|
<div class="message-time">
|
||||||
|
{{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="error" class="error-container">
|
<div class="last-message-row">
|
||||||
<div class="error-text">{{ error }}</div>
|
<div class="last-message">
|
||||||
|
{{
|
||||||
|
convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div v-if="convo.unreadCount > 0" class="unread-count-badge">
|
||||||
|
{{ convo.unreadCount }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="!loading && !isFloatMode" class="search-container">
|
<div v-else>
|
||||||
<SearchPersonDropdown />
|
<div v-if="loadingChannels" class="loading-message">
|
||||||
</div>
|
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||||
|
</div>
|
||||||
<div v-if="!loading && conversations.length === 0" class="empty-container">
|
<div v-else>
|
||||||
<BasePlaceholder
|
<div v-if="channels.length === 0" class="empty-container">
|
||||||
v-if="conversations.length === 0"
|
<BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
|
||||||
text="暂无会话"
|
</div>
|
||||||
icon="fas fa-inbox"
|
<div
|
||||||
|
v-for="ch in channels"
|
||||||
|
:key="ch.id"
|
||||||
|
class="conversation-item"
|
||||||
|
@click="goToChannel(ch.id)"
|
||||||
|
>
|
||||||
|
<div class="conversation-avatar">
|
||||||
|
<BaseImage
|
||||||
|
:src="ch.avatar || '/default-avatar.svg'"
|
||||||
|
:alt="ch.name"
|
||||||
|
class="avatar-img"
|
||||||
|
@error="handleAvatarError"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="conversation-content">
|
||||||
<div
|
<div class="conversation-header">
|
||||||
v-if="!loading"
|
<div class="participant-name">
|
||||||
v-for="convo in conversations"
|
{{ ch.name }}
|
||||||
:key="convo.id"
|
<span v-if="ch.unreadCount > 0" class="unread-dot"></span>
|
||||||
class="conversation-item"
|
</div>
|
||||||
@click="goToConversation(convo.id)"
|
<div class="message-time">
|
||||||
>
|
{{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
|
||||||
<div class="conversation-avatar">
|
</div>
|
||||||
<BaseImage
|
|
||||||
:src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
|
|
||||||
:alt="getOtherParticipant(convo)?.username || '用户'"
|
|
||||||
class="avatar-img"
|
|
||||||
@error="handleAvatarError"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="last-message-row">
|
||||||
<div class="conversation-content">
|
<div class="last-message">
|
||||||
<div class="conversation-header">
|
{{
|
||||||
<div class="participant-name">
|
ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
|
||||||
{{ getOtherParticipant(convo)?.username || '未知用户' }}
|
}}
|
||||||
</div>
|
|
||||||
<div class="message-time">
|
|
||||||
{{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="last-message-row">
|
|
||||||
<div class="last-message">
|
|
||||||
{{
|
|
||||||
convo.lastMessage
|
|
||||||
? stripMarkdownLength(convo.lastMessage.content, 100)
|
|
||||||
: '暂无消息'
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div v-if="convo.unreadCount > 0" class="unread-count-badge">
|
|
||||||
{{ convo.unreadCount }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="member-count">成员 {{ ch.memberCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
</div>
|
||||||
<div v-if="loadingChannels" class="loading-message">
|
</div>
|
||||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div v-if="channels.length === 0" class="empty-container">
|
|
||||||
<BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="ch in channels"
|
|
||||||
:key="ch.id"
|
|
||||||
class="conversation-item"
|
|
||||||
@click="goToChannel(ch.id)"
|
|
||||||
>
|
|
||||||
<div class="conversation-avatar">
|
|
||||||
<BaseImage
|
|
||||||
:src="ch.avatar || '/default-avatar.svg'"
|
|
||||||
:alt="ch.name"
|
|
||||||
class="avatar-img"
|
|
||||||
@error="handleAvatarError"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="conversation-content">
|
|
||||||
<div class="conversation-header">
|
|
||||||
<div class="participant-name">
|
|
||||||
{{ ch.name }}
|
|
||||||
<span v-if="ch.unreadCount > 0" class="unread-dot"></span>
|
|
||||||
</div>
|
|
||||||
<div class="message-time">
|
|
||||||
{{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="last-message-row">
|
|
||||||
<div class="last-message">
|
|
||||||
{{
|
|
||||||
ch.lastMessage
|
|
||||||
? stripMarkdownLength(ch.lastMessage.content, 100)
|
|
||||||
: ch.description
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div class="member-count">成员 {{ ch.memberCount }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</MultiTabs>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -149,10 +147,6 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
|
|||||||
useChannelsUnreadCount()
|
useChannelsUnreadCount()
|
||||||
let subscription = null
|
let subscription = null
|
||||||
|
|
||||||
const tabs = [
|
|
||||||
{ name: 'messages', label: '站内信' },
|
|
||||||
{ name: 'channels', label: '频道' },
|
|
||||||
]
|
|
||||||
const activeTab = ref('channels')
|
const activeTab = ref('channels')
|
||||||
const channels = ref([])
|
const channels = ref([])
|
||||||
const loadingChannels = ref(false)
|
const loadingChannels = ref(false)
|
||||||
@@ -222,13 +216,15 @@ async function fetchChannels() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(activeTab, (val) => {
|
function switchToMessage() {
|
||||||
if (val === 'messages') {
|
activeTab.value = 'messages'
|
||||||
fetchConversations()
|
fetchConversations()
|
||||||
} else {
|
}
|
||||||
fetchChannels()
|
|
||||||
}
|
function switchToChannels() {
|
||||||
})
|
activeTab.value = 'channels'
|
||||||
|
fetchChannels()
|
||||||
|
}
|
||||||
|
|
||||||
async function goToChannel(id) {
|
async function goToChannel(id) {
|
||||||
const token = getToken()
|
const token = getToken()
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,166 +1,177 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="point-mall-page">
|
<div class="point-mall-page">
|
||||||
<MultiTabs
|
<div class="point-tabs">
|
||||||
:tabs="tabs"
|
<div
|
||||||
v-model="selectedTab"
|
:class="['point-tab-item', { selected: selectedTab === 'mall' }]"
|
||||||
header-class="point-tabs"
|
@click="selectedTab = 'mall'"
|
||||||
item-class="point-tab-item"
|
>
|
||||||
>
|
积分兑换
|
||||||
<template #default="{ selected }">
|
</div>
|
||||||
<template v-if="selected === 'mall'">
|
<div
|
||||||
<div class="point-mall-page-content">
|
:class="['point-tab-item', { selected: selectedTab === 'history' }]"
|
||||||
<section class="rules">
|
@click="selectedTab = 'history'"
|
||||||
<div class="section-title">🎉 积分规则</div>
|
>
|
||||||
<div class="section-content">
|
积分历史
|
||||||
<div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
|
</div>
|
||||||
{{ rule }}
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<template v-if="selectedTab === 'mall'">
|
||||||
</section>
|
<div class="point-mall-page-content">
|
||||||
<div class="loading-points-container" v-if="isLoading">
|
<section class="rules">
|
||||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
<div class="section-title">🎉 积分规则</div>
|
||||||
</div>
|
<div class="section-content">
|
||||||
<div class="point-info">
|
<div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
|
||||||
<p v-if="authState.loggedIn && point !== null">
|
|
||||||
<span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
|
|
||||||
class="point-value"
|
|
||||||
>{{ point }}</span
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<section class="goods">
|
|
||||||
<div class="goods-item" v-for="(good, idx) in goods" :key="idx">
|
|
||||||
<BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
|
|
||||||
<div class="goods-item-name">{{ good.name }}</div>
|
|
||||||
<div class="goods-item-cost">
|
|
||||||
<i class="fas fa-coins"></i>
|
|
||||||
{{ good.cost }} 积分
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="goods-item-button"
|
|
||||||
:class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
|
|
||||||
@click="openRedeem(good)"
|
|
||||||
>
|
|
||||||
兑换
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<RedeemPopup
|
|
||||||
:visible="dialogVisible"
|
|
||||||
v-model="contact"
|
|
||||||
:loading="loading"
|
|
||||||
@close="closeRedeem"
|
|
||||||
@submit="submitRedeem"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</section>
|
||||||
<template v-else>
|
|
||||||
<div class="loading-points-container" v-if="historyLoading">
|
<div class="loading-points-container" v-if="isLoading">
|
||||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="point-info">
|
||||||
|
<p v-if="authState.loggedIn && point !== null">
|
||||||
|
<span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
|
||||||
|
class="point-value"
|
||||||
|
>{{ point }}</span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="goods">
|
||||||
|
<div class="goods-item" v-for="(good, idx) in goods" :key="idx">
|
||||||
|
<BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
|
||||||
|
<div class="goods-item-name">{{ good.name }}</div>
|
||||||
|
<div class="goods-item-cost">
|
||||||
|
<i class="fas fa-coins"></i>
|
||||||
|
{{ good.cost }} 积分
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="goods-item-button"
|
||||||
|
:class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
|
||||||
|
@click="openRedeem(good)"
|
||||||
|
>
|
||||||
|
兑换
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<BasePlaceholder
|
</section>
|
||||||
v-else-if="histories.length === 0"
|
<RedeemPopup
|
||||||
text="暂无积分记录"
|
:visible="dialogVisible"
|
||||||
icon="fas fa-inbox"
|
v-model="contact"
|
||||||
/>
|
:loading="loading"
|
||||||
<div class="timeline-container" v-else>
|
@close="closeRedeem"
|
||||||
<BaseTimeline :items="histories">
|
@submit="submitRedeem"
|
||||||
<template #item="{ item }">
|
/>
|
||||||
<div class="history-content">
|
</div>
|
||||||
<template v-if="item.type === 'POST'">
|
</template>
|
||||||
发送帖子
|
|
||||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
<template v-else>
|
||||||
item.postTitle
|
<div class="loading-points-container" v-if="historyLoading">
|
||||||
}}</NuxtLink>
|
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||||
，获得{{ item.amount }}积分
|
</div>
|
||||||
</template>
|
<BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="fas fa-inbox" />
|
||||||
<template v-else-if="item.type === 'COMMENT'">
|
<div class="timeline-container" v-else>
|
||||||
在文章
|
<BaseTimeline :items="histories">
|
||||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
<template #item="{ item }">
|
||||||
item.postTitle
|
<div class="history-content">
|
||||||
}}</NuxtLink>
|
<template v-if="item.type === 'POST'">
|
||||||
中
|
发送帖子
|
||||||
<template v-if="!item.fromUserId">
|
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||||
发送评论
|
item.postTitle
|
||||||
<NuxtLink
|
}}</NuxtLink>
|
||||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
，获得{{ item.amount }}积分
|
||||||
class="timeline-link"
|
|
||||||
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
|
||||||
>
|
|
||||||
，获得{{ item.amount }}积分
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
被评论
|
|
||||||
<NuxtLink
|
|
||||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
|
||||||
class="timeline-link"
|
|
||||||
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
|
||||||
>
|
|
||||||
，获得{{ item.amount }}积分
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
|
|
||||||
帖子
|
|
||||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
|
||||||
item.postTitle
|
|
||||||
}}</NuxtLink>
|
|
||||||
被
|
|
||||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
|
||||||
item.fromUserName
|
|
||||||
}}</NuxtLink>
|
|
||||||
按赞，获得{{ item.amount }}积分
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'COMMENT_LIKED' && item.fromUserId">
|
|
||||||
评论
|
|
||||||
<NuxtLink
|
|
||||||
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
|
||||||
class="timeline-link"
|
|
||||||
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
|
||||||
>
|
|
||||||
被
|
|
||||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
|
||||||
item.fromUserName
|
|
||||||
}}</NuxtLink>
|
|
||||||
按赞，获得{{ item.amount }}积分
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'INVITE' && item.fromUserId">
|
|
||||||
邀请了好友
|
|
||||||
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
|
||||||
item.fromUserName
|
|
||||||
}}</NuxtLink>
|
|
||||||
加入社区 🎉，获得 {{ item.amount }} 积分
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'FEATURE'">
|
|
||||||
文章
|
|
||||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
|
||||||
item.postTitle
|
|
||||||
}}</NuxtLink>
|
|
||||||
被收录为精选，获得 {{ item.amount }} 积分
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'REDEEM'">
|
|
||||||
兑换商品，消耗 {{ -item.amount }} 积分
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'LOTTERY_JOIN'">
|
|
||||||
参与抽奖帖
|
|
||||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
|
||||||
item.postTitle
|
|
||||||
}}</NuxtLink>
|
|
||||||
，消耗 {{ -item.amount }} 积分
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.type === 'LOTTERY_REWARD'">
|
|
||||||
你的抽奖帖
|
|
||||||
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
|
||||||
item.postTitle
|
|
||||||
}}</NuxtLink>
|
|
||||||
被抽中，消耗 {{ -item.amount }} 积分
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</BaseTimeline>
|
<template v-else-if="item.type === 'COMMENT'">
|
||||||
</div>
|
在文章
|
||||||
</template>
|
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||||
</template>
|
item.postTitle
|
||||||
</MultiTabs>
|
}}</NuxtLink>
|
||||||
|
中
|
||||||
|
<template v-if="!item.fromUserId">
|
||||||
|
发送评论
|
||||||
|
<NuxtLink
|
||||||
|
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||||
|
class="timeline-link"
|
||||||
|
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
||||||
|
>
|
||||||
|
，获得{{ item.amount }}积分
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
被评论
|
||||||
|
<NuxtLink
|
||||||
|
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||||
|
class="timeline-link"
|
||||||
|
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
||||||
|
>
|
||||||
|
，获得{{ item.amount }}积分
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
|
||||||
|
帖子
|
||||||
|
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||||
|
item.postTitle
|
||||||
|
}}</NuxtLink>
|
||||||
|
被
|
||||||
|
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||||
|
item.fromUserName
|
||||||
|
}}</NuxtLink>
|
||||||
|
按赞，获得{{ item.amount }}积分
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'COMMENT_LIKED' && item.fromUserId">
|
||||||
|
评论
|
||||||
|
<NuxtLink
|
||||||
|
:to="`/posts/${item.postId}#comment-${item.commentId}`"
|
||||||
|
class="timeline-link"
|
||||||
|
>{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
|
||||||
|
>
|
||||||
|
被
|
||||||
|
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||||
|
item.fromUserName
|
||||||
|
}}</NuxtLink>
|
||||||
|
按赞，获得{{ item.amount }}积分
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'INVITE' && item.fromUserId">
|
||||||
|
邀请了好友
|
||||||
|
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||||
|
item.fromUserName
|
||||||
|
}}</NuxtLink>
|
||||||
|
加入社区 🎉，获得 {{ item.amount }} 积分
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'FEATURE'">
|
||||||
|
文章
|
||||||
|
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||||
|
item.postTitle
|
||||||
|
}}</NuxtLink>
|
||||||
|
被收录为精选，获得 {{ item.amount }} 积分
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'REDEEM'">
|
||||||
|
兑换商品，消耗 {{ -item.amount }} 积分
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'LOTTERY_JOIN'">
|
||||||
|
参与抽奖帖
|
||||||
|
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||||
|
item.postTitle
|
||||||
|
}}</NuxtLink>
|
||||||
|
，消耗 {{ -item.amount }} 积分
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'LOTTERY_REWARD'">
|
||||||
|
你的抽奖帖
|
||||||
|
<NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
|
||||||
|
item.postTitle
|
||||||
|
}}</NuxtLink>
|
||||||
|
被
|
||||||
|
<NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
|
||||||
|
item.fromUserName
|
||||||
|
}}</NuxtLink>
|
||||||
|
参与，获得 {{ item.amount }} 积分
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
|
||||||
|
<i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
|
||||||
|
</div>
|
||||||
|
<div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
|
||||||
|
</template>
|
||||||
|
</BaseTimeline>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -177,11 +188,6 @@ import TimeManager from '~/utils/time'
|
|||||||
const config = useRuntimeConfig()
|
const config = useRuntimeConfig()
|
||||||
const API_BASE_URL = config.public.apiBaseUrl
|
const API_BASE_URL = config.public.apiBaseUrl
|
||||||
|
|
||||||
const tabs = [
|
|
||||||
{ name: 'mall', label: '积分兑换' },
|
|
||||||
{ name: 'history', label: '积分历史' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const selectedTab = ref('mall')
|
const selectedTab = ref('mall')
|
||||||
const point = ref(null)
|
const point = ref(null)
|
||||||
const isLoading = ref(false)
|
const isLoading = ref(false)
|
||||||
|
|||||||
Reference in New Issue
Block a user