chore: 重写初始提交(清空历史,整理后全量提交)
This commit is contained in:
ywxapp
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view class="avatar-container">
|
||||
<image class="avatar" :src="user.avatar" mode="aspectFill"></image>
|
||||
<view v-if="user.online" class="online-badge"></view>
|
||||
<text v-if="user.vip" class="vip-badge">VIP</text>
|
||||
<text v-if="badge !== null && badge > 0" class="message-badge">
|
||||
{{ badge !== null && badge > 99 ? '99+' : badge }}
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ISender } from '@/types/chatType.uts'
|
||||
type TUser = {
|
||||
id : number
|
||||
nickname : string
|
||||
avatar : string
|
||||
online : boolean
|
||||
vip : boolean
|
||||
}
|
||||
const props = defineProps({
|
||||
badge: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
user: {
|
||||
type: Object as PropType<ISender>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const { badge, user } = props
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.online-badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #4CD964;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #fff;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 4rpx 10rpx;
|
||||
background: linear-gradient(to right, #FFD700, #FFA500);
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
border-radius: 0 0 20rpx 0;
|
||||
}
|
||||
|
||||
.message-badge {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
min-width: 36rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
background-color: #FF3B30;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 18rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="card-panel">
|
||||
<view class="card-panel-header">
|
||||
<image :src="itemData?.avatar ?? '/static/logo.png'" class="dynamic-card-avatar" alt="用户头像" />
|
||||
<view class="dynamic-card-user-info">
|
||||
<text class="dynamic-card-username">{{ itemData.nickname }}</text>
|
||||
<text class="dynamic-post-time">{{ formatTime(itemData.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-panel-body">
|
||||
<text :class="['dynamic-text-content', { collapsed: itemData.expanded==true }]">
|
||||
{{ itemData.content }}
|
||||
</text>
|
||||
<text v-if="itemData.content.length > 100" class="expand-btn" @click="toggleExpand(itemData)">
|
||||
{{ itemData.expanded ==true ? '收起' : '展开全文' }}
|
||||
</text>
|
||||
<!-- 媒体内容 -->
|
||||
<view v-if="itemData.media !=null && itemData.media.length>0" class="media-container">
|
||||
<view v-for="(media, index) in itemData.media" :key="index" class="media-item">
|
||||
<image :src="media.url" class="media-item-image" />
|
||||
<view v-if="media.type === 'video'" class="video-indicator">
|
||||
<uni-icons type="videocam" size="32"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 位置标签 -->
|
||||
<view v-if="itemData.location !=null" class="location-tag">
|
||||
<uni-icons type="location" size="18"></uni-icons> <text
|
||||
class="location-tag-text">{{ itemData.location }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-panel-footer" style="justify-content: space-between;">
|
||||
<view class="action-btn like-btn" :class="{ active: itemData.likede }" @click="toggleLike(itemData)">
|
||||
<uni-icons :type="itemData.likede ? 'heart-filled' : 'heart'" size="22"
|
||||
:color="itemData.likede ? '#f74c31' : ''"></uni-icons>
|
||||
<text class="action-text">{{ itemData.like }}</text>
|
||||
</view>
|
||||
<view class="action-btn comment-btn">
|
||||
<uni-icons type="chatbubble" size="22"></uni-icons>
|
||||
<text class="action-text">{{ itemData.comment }}</text>
|
||||
</view>
|
||||
<view class="action-btn share-btn">
|
||||
<uni-icons type="redo" size="22"></uni-icons>
|
||||
<text class="action-text">{{ itemData.share }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { type IMoment } from '@/types/moment.uts'
|
||||
|
||||
const props = defineProps<{
|
||||
moment : IMoment
|
||||
}>()
|
||||
|
||||
const itemData = computed(() : IMoment => {
|
||||
return props.moment
|
||||
})
|
||||
|
||||
onPageShow(() => {
|
||||
console.log('page-props-composition onPageShow')
|
||||
console.log(itemData)
|
||||
})
|
||||
// 切换展开/收起
|
||||
const toggleExpand = (item : IMoment) => {
|
||||
item.expanded = item.expanded != null && !item.expanded;
|
||||
};
|
||||
|
||||
// 切换点赞状态
|
||||
const toggleLike = (item : IMoment) => {
|
||||
item.likede = !item.likede;
|
||||
item.like += item.likede ? 1 : -1;
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timestamp : number) => {
|
||||
const now = Date.now();
|
||||
const diff = now - timestamp;
|
||||
const minute = 60 * 1000;
|
||||
const hour = 60 * minute;
|
||||
const day = 24 * hour;
|
||||
|
||||
if (diff < hour) {
|
||||
return `${Math.floor(diff / minute)}分钟前`;
|
||||
} else if (diff < day) {
|
||||
return `${Math.floor(diff / hour)}小时前`;
|
||||
} else if (diff < 2 * day) {
|
||||
return '昨天';
|
||||
} else {
|
||||
const date = new Date(timestamp);
|
||||
return `${date.getMonth() + 1}月${date.getDate()}日`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.dynamic-card-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.dynamic-card-user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dynamic-card-username {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dynamic-post-time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dynamic-card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dynamic-text-content {
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* .text-content.collapsed {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
} */
|
||||
|
||||
.expand-btn {
|
||||
color: #576b95;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.media-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-item {
|
||||
margin: 5rpx;
|
||||
position: relative;
|
||||
flex-basis: 210rpx;
|
||||
height: 230rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.media-item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.video-indicator {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.location-tag {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
background: #f0f8ff;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.location-tag-text {
|
||||
font-size: 13px;
|
||||
color: #576b95;
|
||||
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 15rpx 25rpx;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row nowrap;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="top-line">
|
||||
<text class="nickname">{{ senderNickname }}</text>
|
||||
<text class="time">{{ formatTime(messageTime) }}</text>
|
||||
</view>
|
||||
<view class="bottom-line">
|
||||
<text class="message" :class="{ 'unread': hasUnread }">
|
||||
{{ messageContent }}
|
||||
</text>
|
||||
<text v-if="hasUnread" class="unread-count">
|
||||
{{ displayUnreadCount }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { IMessage, ISender } from '@/types/chatType.uts'
|
||||
|
||||
const props = defineProps<{
|
||||
message : IMessage
|
||||
}>()
|
||||
|
||||
// 计算属性提取，避免模板中过多可选链
|
||||
const senderNickname = computed(() => props.message?.sender?.nickname ?? '')
|
||||
const messageContent = computed(() => props.message?.content ?? '')
|
||||
const messageTime = computed(() => props.message?.timestamp ?? 0)
|
||||
const unreadCount = computed(() => props.message?.unreadCount ?? 0)
|
||||
const hasUnread = computed(() => unreadCount.value > 0)
|
||||
const displayUnreadCount = computed(() => {
|
||||
const count = unreadCount.value
|
||||
return count > 99 ? '99+' : count.toString()
|
||||
})
|
||||
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timestamp : number) : string => {
|
||||
const date = new Date(timestamp)
|
||||
const now = new Date()
|
||||
const diffHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60))
|
||||
|
||||
if (diffHours < 24) {
|
||||
// 当天消息显示时间
|
||||
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||
} else if (diffHours < 48) {
|
||||
// 昨天
|
||||
return '昨天'
|
||||
} else if (diffHours < 168) {
|
||||
// 一周内
|
||||
const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
return days[date.getDay()]
|
||||
} else {
|
||||
// 更早
|
||||
return `${date.getMonth() + 1}月${date.getDate()}日`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.top-line {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
max-width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
max-width: 500rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.message.unread {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.unread-count {
|
||||
min-width: 36rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
background-color: #FF3B30;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 18rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user