Claw 项目完整结构提交
This commit is contained in:
zqm
117
Claw/client/wechat_app/components/user-avatar/user-avatar.js
Normal file
117
Claw/client/wechat_app/components/user-avatar/user-avatar.js
Normal file
@@ -0,0 +1,117 @@
|
||||
// 用户头像组件逻辑
|
||||
const { DEFAULT_AVATAR } = require('../../utils/constant.js')
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
// 头像图片地址
|
||||
src: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
// 默认头像
|
||||
defaultAvatar: {
|
||||
type: String,
|
||||
value: DEFAULT_AVATAR
|
||||
},
|
||||
// 尺寸：small, medium, large, xlarge
|
||||
size: {
|
||||
type: String,
|
||||
value: 'medium'
|
||||
},
|
||||
// 形状：circle, rounded, square
|
||||
shape: {
|
||||
type: String,
|
||||
value: 'circle'
|
||||
},
|
||||
// 图片裁剪模式
|
||||
mode: {
|
||||
type: String,
|
||||
value: 'aspectFill'
|
||||
},
|
||||
// 是否懒加载
|
||||
lazyLoad: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
// 是否显示在线状态
|
||||
showStatus: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
// 在线状态：online, offline, busy, away
|
||||
status: {
|
||||
type: String,
|
||||
value: 'offline'
|
||||
},
|
||||
// 徽章数量
|
||||
badge: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
// 是否显示加载状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
// 自定义样式
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
imageLoaded: false,
|
||||
imageError: false
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 图片加载成功
|
||||
onImageLoad() {
|
||||
this.setData({
|
||||
imageLoaded: true,
|
||||
imageError: false
|
||||
})
|
||||
this.triggerEvent('load')
|
||||
},
|
||||
|
||||
// 图片加载失败
|
||||
onImageError(e) {
|
||||
console.error('头像加载失败:', e)
|
||||
this.setData({
|
||||
imageLoaded: false,
|
||||
imageError: true
|
||||
})
|
||||
this.triggerEvent('error', e)
|
||||
},
|
||||
|
||||
// 点击头像
|
||||
onAvatarTap() {
|
||||
this.triggerEvent('tap', {
|
||||
src: this.properties.src,
|
||||
status: this.properties.status,
|
||||
badge: this.properties.badge
|
||||
})
|
||||
},
|
||||
|
||||
// 长按头像
|
||||
onAvatarLongPress() {
|
||||
this.triggerEvent('longpress', {
|
||||
src: this.properties.src,
|
||||
status: this.properties.status,
|
||||
badge: this.properties.badge
|
||||
})
|
||||
},
|
||||
|
||||
// 获取头像状态文本
|
||||
getStatusText() {
|
||||
const statusMap = {
|
||||
online: '在线',
|
||||
offline: '离线',
|
||||
busy: '忙碌',
|
||||
away: '离开'
|
||||
}
|
||||
return statusMap[this.properties.status] || '未知'
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
<!-- 用户头像组件 -->
|
||||
<view class="user-avatar {{size}} {{shape}}" style="{{customStyle}}">
|
||||
<image
|
||||
class="avatar-image"
|
||||
src="{{src || defaultAvatar}}"
|
||||
mode="{{mode}}"
|
||||
lazy-load="{{lazyLoad}}"
|
||||
bindload="onImageLoad"
|
||||
binderror="onImageError"
|
||||
></image>
|
||||
|
||||
<!-- 在线状态指示器 -->
|
||||
<view class="status-indicator {{status}}" wx:if="{{showStatus}}"></view>
|
||||
|
||||
<!-- 徽章/未读消息数 -->
|
||||
<view class="badge" wx:if="{{badge > 0}}">
|
||||
<text class="badge-text">{{badge > 99 ? '99+' : badge}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-overlay" wx:if="{{loading}}">
|
||||
<view class="loading-spinner"></view>
|
||||
</view>
|
||||
</view>
|
||||
143
Claw/client/wechat_app/components/user-avatar/user-avatar.wxss
Normal file
143
Claw/client/wechat_app/components/user-avatar/user-avatar.wxss
Normal file
@@ -0,0 +1,143 @@
|
||||
/* 用户头像组件样式 */
|
||||
.user-avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 尺寸样式 */
|
||||
.user-avatar.small {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.user-avatar.medium {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.user-avatar.large {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.user-avatar.xlarge {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
/* 形状样式 */
|
||||
.user-avatar.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-avatar.rounded {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.user-avatar.square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* 头像图片 */
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 在线状态指示器 */
|
||||
.status-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.status-indicator.online {
|
||||
background-color: #07c160;
|
||||
}
|
||||
|
||||
.status-indicator.offline {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.status-indicator.busy {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.status-indicator.away {
|
||||
background-color: #10aeff;
|
||||
}
|
||||
|
||||
/* 徽章 */
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
background-color: #dd524d;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
padding: 0 8rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 加载遮罩 */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 4rpx solid #f3f3f3;
|
||||
border-top: 4rpx solid #07c160;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 默认头像样式 */
|
||||
.user-avatar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, #07c160 0%, #06a050 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.user-avatar.error::before {
|
||||
background: linear-gradient(135deg, #dd524d 0%, #c82333 100%);
|
||||
}
|
||||
Reference in New Issue
Block a user