590 lines
13 KiB
Vue
590 lines
13 KiB
Vue
<template>
|
||
<view class="user-detail-container">
|
||
<!-- 移动设备顶部状态栏 -->
|
||
<view class="top_bar flex w-full" v-if="isMobile">
|
||
<view class="chat-header">
|
||
<view class="header-left" @click="goBack">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</view>
|
||
<view class="header-title">用户详情</view>
|
||
<view class="header-right"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 浏览器环境顶部导航栏 -->
|
||
<view class="chat-header" v-else>
|
||
<view class="header-left" @click="goBack">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</view>
|
||
<view class="header-title">用户详情</view>
|
||
<view class="header-right"></view>
|
||
</view>
|
||
<!-- 顶部用户信息卡片 -->
|
||
<view class="user-card">
|
||
<view class="user-info">
|
||
<view class="avatar-container">
|
||
<image
|
||
class="avatar"
|
||
:src="user.avatar || '/static/imgs/default_avatar.png'"
|
||
mode="aspectFill"
|
||
@error="onAvatarError"
|
||
/>
|
||
<view class="online-status" v-if="user.isOnline"></view>
|
||
</view>
|
||
<view class="user-base-info">
|
||
<view class="nickname">{{ user.nickname }}</view>
|
||
<view class="meteid">账号：{{ user.meteid }}</view>
|
||
<view class="meta-info">
|
||
<view class="meta-item" v-if="user.department">
|
||
部门：<text>{{ user.department }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="meta-info">
|
||
<view class="meta-item" v-if="user.position">
|
||
职位：<text>{{ user.position }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能按钮区域 -->
|
||
<view class="action-section">
|
||
<view class="action-btn primary" @click="sendMessage">
|
||
<i class="fas fa-comment-dots"></i>
|
||
<text>发消息</text>
|
||
</view>
|
||
<view class="action-btn" @click="startAudioCall">
|
||
<i class="fas fa-phone-alt"></i>
|
||
<text>语音通话</text>
|
||
</view>
|
||
<view class="action-btn" @click="startVideoCall">
|
||
<i class="fas fa-video"></i>
|
||
<text>视频通话</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 资料信息卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-header">
|
||
<i class="fas fa-user-circle"></i>
|
||
<text>个人资料</text>
|
||
</view>
|
||
<view class="info-list">
|
||
<view class="info-item" v-if="user.phone" @click="copyToClipboard(user.phone, '手机号')">
|
||
<view class="info-icon phone">
|
||
<i class="fas fa-phone"></i>
|
||
</view>
|
||
<view class="info-content">
|
||
<text class="info-label">手机号码</text>
|
||
<text class="info-value">{{ user.phone }}</text>
|
||
</view>
|
||
<i class="fas fa-copy"></i>
|
||
</view>
|
||
<view class="info-item" v-if="user.wechat" @click="copyToClipboard(user.wechat, '微信号')">
|
||
<view class="info-icon wechat">
|
||
<i class="fab fa-weixin"></i>
|
||
</view>
|
||
<view class="info-content">
|
||
<text class="info-label">微信</text>
|
||
<text class="info-value">{{ user.wechat }}</text>
|
||
</view>
|
||
<i class="fas fa-copy"></i>
|
||
</view>
|
||
<view class="info-item" v-if="user.email" @click="copyToClipboard(user.email, '邮箱')">
|
||
<view class="info-icon email">
|
||
<i class="fas fa-envelope"></i>
|
||
</view>
|
||
<view class="info-content">
|
||
<text class="info-label">邮箱</text>
|
||
<text class="info-value">{{ user.email }}</text>
|
||
</view>
|
||
<i class="fas fa-copy"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 更多功能卡片 -->
|
||
<view class="more-card">
|
||
<view class="card-header">
|
||
<i class="fas fa-cog"></i>
|
||
<text>更多功能</text>
|
||
</view>
|
||
<view class="more-list">
|
||
<view class="more-item" @click="addToContacts">
|
||
<view class="more-icon">
|
||
<i class="fas fa-user-plus"></i>
|
||
</view>
|
||
<text>添加到通讯录</text>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</view>
|
||
<view class="more-item" @click="shareContact">
|
||
<view class="more-icon">
|
||
<i class="fas fa-share-alt"></i>
|
||
</view>
|
||
<text>发送名片</text>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</view>
|
||
<view class="more-item" @click="viewMoments">
|
||
<view class="more-icon">
|
||
<i class="fas fa-images"></i>
|
||
</view>
|
||
<text>查看朋友圈</text>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
user: {
|
||
avatar: '',
|
||
nickname: '张三',
|
||
meteid: 'mete_10001',
|
||
position: '产品经理',
|
||
department: '产品部',
|
||
phone: '13455668888',
|
||
wechat: 'zhangsan_weixin',
|
||
email: 'zhangsan@email.com',
|
||
isOnline: true
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
// 从全局数据获取设备信息
|
||
isMobile() {
|
||
return getApp().globalData.isMobile;
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
onAvatarError(e) {
|
||
this.user.avatar = '/static/imgs/default_avatar.png'
|
||
},
|
||
sendMessage() {
|
||
uni.navigateTo({
|
||
url: '/pages/message/chat?meteid=' + this.user.meteid
|
||
});
|
||
},
|
||
startAudioCall() {
|
||
uni.showToast({
|
||
title: '语音通话功能暂未开放',
|
||
icon: 'none'
|
||
});
|
||
},
|
||
startVideoCall() {
|
||
uni.showToast({
|
||
title: '视频通话功能暂未开放',
|
||
icon: 'none'
|
||
});
|
||
},
|
||
copyToClipboard(text, type) {
|
||
uni.setClipboardData({
|
||
data: text,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: `${type}已复制`,
|
||
icon: 'success'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
addToContacts() {
|
||
uni.showToast({
|
||
title: '已添加到通讯录',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
shareContact() {
|
||
uni.showToast({
|
||
title: '已发送名片',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
viewMoments() {
|
||
uni.showToast({
|
||
title: '朋友圈功能暂未开放',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-detail-container {
|
||
background: var(--background);
|
||
min-height: 100vh;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
/* 移动设备顶部状态栏 */
|
||
.top_bar {
|
||
background: var(--gradient-primary);
|
||
box-shadow: var(--shadow-lg);
|
||
z-index: 9999;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: calc(var(--status-bar-height) + 88rpx);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding-top: var(--status-bar-height);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 支持安全区域的设备 */
|
||
@supports (padding: max(0px)) {
|
||
.top_bar {
|
||
height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
|
||
padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
|
||
}
|
||
|
||
.top_bar + .user-card {
|
||
margin-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
|
||
}
|
||
|
||
.user-detail-container .chat-header:not(.top_bar .chat-header) {
|
||
height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
|
||
padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
|
||
}
|
||
|
||
.user-detail-container .chat-header:not(.top_bar .chat-header) + .user-card {
|
||
margin-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
|
||
}
|
||
}
|
||
|
||
/* 顶部导航栏 */
|
||
.chat-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 88rpx;
|
||
background-color: var(--surface);
|
||
border-bottom: 1rpx solid var(--border);
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
/* 浏览器环境下的固定定位 */
|
||
.user-detail-container .chat-header:not(.top_bar .chat-header) {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9999;
|
||
height: calc(var(--status-bar-height) + 88rpx);
|
||
padding-top: var(--status-bar-height);
|
||
}
|
||
|
||
/* 移动设备下的导航栏样式 */
|
||
.top_bar .chat-header {
|
||
background: transparent;
|
||
border-bottom: none;
|
||
box-shadow: none;
|
||
width: 100%;
|
||
height: 88rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.top_bar .header-title {
|
||
color: var(--white);
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.top_bar .header-left i,
|
||
.top_bar .header-right i {
|
||
color: var(--white);
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.header-left,
|
||
.header-right {
|
||
width: 80rpx;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.header-left:active,
|
||
.header-right:active {
|
||
background-color: var(--gray-lighter);
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.top_bar .header-left:active,
|
||
.top_bar .header-right:active {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: var(--title-color);
|
||
}
|
||
|
||
/* 移动设备下为内容添加顶部间距 */
|
||
.top_bar + .user-card {
|
||
margin-top: calc(var(--status-bar-height) + 88rpx);
|
||
}
|
||
|
||
/* 浏览器环境下为内容添加顶部间距 */
|
||
.user-detail-container .chat-header:not(.top_bar .chat-header) + .user-card {
|
||
margin-top: calc(var(--status-bar-height) + 88rpx);
|
||
}
|
||
|
||
/* 用户信息卡片 */
|
||
.user-card {
|
||
background: var(--surface);
|
||
border-radius: 16rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: var(--shadow-md);
|
||
overflow: hidden;
|
||
border: 1rpx solid var(--border-light);
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 40rpx 30rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.avatar-container {
|
||
position: relative;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.avatar {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 16rpx;
|
||
background: var(--gray-light);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.online-status {
|
||
position: absolute;
|
||
bottom: 8rpx;
|
||
right: 8rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background: var(--success);
|
||
border: 4rpx solid var(--white);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-base-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.nickname {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: var(--title-color);
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.meteid {
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.meta-info {
|
||
display: flex;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.meta-item i {
|
||
margin-right: 12rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
/* 功能按钮区域 */
|
||
.action-section {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
background: var(--surface);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
box-shadow: var(--shadow);
|
||
border: 1rpx solid var(--border-light);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.action-btn:active {
|
||
transform: translateY(2rpx);
|
||
box-shadow: var(--shadow-md);
|
||
background: var(--surface-hover);
|
||
}
|
||
|
||
.action-btn.primary {
|
||
background: var(--gradient-primary);
|
||
color: var(--white);
|
||
border: none;
|
||
}
|
||
|
||
.action-btn i {
|
||
font-size: 32rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.action-btn text {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 信息卡片 */
|
||
.info-card, .more-card {
|
||
background: var(--surface);
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: var(--shadow);
|
||
border: 1rpx solid var(--border-light);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx 30rpx 20rpx 30rpx;
|
||
border-bottom: 1rpx solid var(--border-light);
|
||
background: var(--gray-lighter);
|
||
}
|
||
|
||
.card-header i {
|
||
font-size: 28rpx;
|
||
color: var(--icon-color);
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.card-header text {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--title-color);
|
||
}
|
||
|
||
.info-list, .more-list {
|
||
padding: 0;
|
||
}
|
||
|
||
.info-item, .more-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid var(--border-light);
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.info-item:last-child, .more-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-item:active, .more-item:active {
|
||
background-color: var(--surface-hover);
|
||
}
|
||
|
||
.info-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.info-icon.phone {
|
||
background: var(--gradient-success);
|
||
}
|
||
|
||
.info-icon.wechat {
|
||
background: var(--gradient-success);
|
||
}
|
||
|
||
.info-icon.email {
|
||
background: var(--gradient-warning);
|
||
}
|
||
|
||
.info-icon i {
|
||
color: var(--white);
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.info-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 28rpx;
|
||
color: var(--text-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-item i.fas.fa-copy, .more-item i.fas.fa-chevron-right {
|
||
color: var(--text-muted);
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.more-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 12rpx;
|
||
background: var(--gradient-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.more-icon i {
|
||
color: var(--white);
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.more-item text {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: var(--text-color);
|
||
font-weight: 500;
|
||
}
|
||
</style>
|