feat(信息通知页): UI更新
This commit is contained in:
hzj
parent
7e5bdcb009
commit
109cf3459f
@ -9,32 +9,20 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="message-list">
|
||||
<div
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
class="message-item"
|
||||
>
|
||||
<div v-for="message in messages" :key="message.id" class="message-item">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar">
|
||||
<img v-if="message.avatar" :src="message.avatar" :alt="message.name" />
|
||||
<span v-else>{{ message.name?.charAt(0) || 'U' }}</span>
|
||||
<div v-else>{{ message.name?.charAt(0) || 'U' }}</div>
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<h4>{{ message.name || 'Unknown User' }}</h4>
|
||||
<p>ID: {{ message.account || message.userId }}</p>
|
||||
<p v-if="message.countryName" class="country-info">
|
||||
{{ message.countryName }} ({{ message.countryCode }})
|
||||
</p>
|
||||
<p class="apply-time">{{ formatUTCTime(message.createTime) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<button class="agree-btn" @click="handleAgree(message)">
|
||||
Agree
|
||||
</button>
|
||||
<button class="refuse-btn" @click="handleRefuse(message)">
|
||||
Refuse
|
||||
</button>
|
||||
<button class="agree-btn" @click="handleAgree(message)">Agree</button>
|
||||
<button class="refuse-btn" @click="handleRefuse(message)">Refuse</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,9 +41,9 @@ import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import { getApplyRecord } from '../api/teamBill.js'
|
||||
import { processUserApply } from '../api/wallet.js'
|
||||
import {getTeamId} from "@/utils/userStore.js";
|
||||
import {showError, showSuccess, showWarning} from "@/utils/toast.js";
|
||||
import { formatUTCTime } from '@/utils/utcFormat.js';
|
||||
import { getTeamId } from '@/utils/userStore.js'
|
||||
import { showError, showSuccess, showWarning } from '@/utils/toast.js'
|
||||
import { formatUTCTime } from '@/utils/utcFormat.js'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
@ -67,8 +55,8 @@ const mockMessages = [
|
||||
id: '1234567890',
|
||||
name: 'User1',
|
||||
avatar: '',
|
||||
type: 'team_join_request'
|
||||
}
|
||||
type: 'team_join_request',
|
||||
},
|
||||
]
|
||||
|
||||
// 获取消息列表
|
||||
@ -79,7 +67,7 @@ const fetchMessages = async () => {
|
||||
|
||||
if (response.status && response.body) {
|
||||
// 根据新的接口结构映射数据
|
||||
messages.value = response.body.map(item => ({
|
||||
messages.value = response.body.map((item) => ({
|
||||
id: item.id,
|
||||
reason: item.reason,
|
||||
teamId: item.teamId,
|
||||
@ -93,7 +81,7 @@ const fetchMessages = async () => {
|
||||
userSex: item.createUserProfile.userSex,
|
||||
age: item.createUserProfile.age,
|
||||
countryName: item.createUserProfile.countryName,
|
||||
countryCode: item.createUserProfile.countryCode
|
||||
countryCode: item.createUserProfile.countryCode,
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
@ -108,13 +96,13 @@ const handleAgree = async (message) => {
|
||||
try {
|
||||
const response = await processUserApply({
|
||||
id: message.id,
|
||||
status: 'AGREE'
|
||||
status: 'AGREE',
|
||||
})
|
||||
|
||||
if (response.status) {
|
||||
showSuccess(`Approved ${message.name}'s application`)
|
||||
// 从列表中移除
|
||||
const index = messages.value.findIndex(m => m.id === message.id)
|
||||
const index = messages.value.findIndex((m) => m.id === message.id)
|
||||
if (index > -1) {
|
||||
messages.value.splice(index, 1)
|
||||
}
|
||||
@ -132,13 +120,13 @@ const handleRefuse = async (message) => {
|
||||
try {
|
||||
const response = await processUserApply({
|
||||
id: message.id,
|
||||
status: 'REJECT'
|
||||
status: 'REJECT',
|
||||
})
|
||||
|
||||
if (response.status) {
|
||||
showWarning(`Rejected ${message.name}'s application`)
|
||||
// 从列表中移除
|
||||
const index = messages.value.findIndex(m => m.id === message.id)
|
||||
const index = messages.value.findIndex((m) => m.id === message.id)
|
||||
if (index > -1) {
|
||||
messages.value.splice(index, 1)
|
||||
}
|
||||
@ -157,6 +145,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-family: 'SF Pro Text';
|
||||
}
|
||||
|
||||
.message {
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
@ -181,15 +174,19 @@ onMounted(() => {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #8B5CF6;
|
||||
border-top: 3px solid #8b5cf6;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 消息列表 */
|
||||
@ -201,9 +198,9 @@ onMounted(() => {
|
||||
|
||||
.message-item {
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -219,7 +216,7 @@ onMounted(() => {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: #8B5CF6;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -237,21 +234,20 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.user-details h4 {
|
||||
margin: 0 0 4px 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-details p {
|
||||
margin: 0 0 2px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.country-info {
|
||||
font-size: 12px !important;
|
||||
color: #8B5CF6 !important;
|
||||
color: #8b5cf6 !important;
|
||||
}
|
||||
|
||||
.apply-time {
|
||||
@ -264,32 +260,28 @@ onMounted(() => {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agree-btn, .refuse-btn {
|
||||
padding: 8px 16px;
|
||||
.agree-btn,
|
||||
.refuse-btn {
|
||||
padding: 4px 16px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.agree-btn {
|
||||
background-color: #C084FC;
|
||||
background: linear-gradient(
|
||||
152deg,
|
||||
rgba(198, 112, 255, 0.6) 7.01%,
|
||||
rgba(119, 38, 255, 0.6) 92.99%
|
||||
);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.agree-btn:active {
|
||||
background-color: #A855F7;
|
||||
}
|
||||
|
||||
.refuse-btn {
|
||||
background-color: #E5E7EB;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.refuse-btn:active {
|
||||
background-color: #D1D5DB;
|
||||
background-color: transparent;
|
||||
border: 1px solid #bb92ff;
|
||||
color: #bb92ff;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user