475 lines
11 KiB
Vue
475 lines
11 KiB
Vue
<template>
|
||
<view class="chat-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="/static/imgs/default_avatar.png"
|
||
mode="aspectFill"
|
||
@error="onAvatarError"
|
||
/>
|
||
</view>
|
||
<view class="user-base-info">
|
||
<view class="nickname">{{ user.nickname }}</view>
|
||
<view class="meteid">账号：{{ user.meteid }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能操作卡片 -->
|
||
<view class="action-card">
|
||
<view class="card-header">
|
||
<i class="fas fa-search"></i>
|
||
<text>聊天功能</text>
|
||
</view>
|
||
<view class="action-list">
|
||
<view class="action-item" @click="goToSearchRecord">
|
||
<view class="action-icon">
|
||
<i class="fas fa-search"></i>
|
||
</view>
|
||
<text>查找聊天记录</text>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 聊天设置卡片 -->
|
||
<view class="setting-card">
|
||
<view class="card-header">
|
||
<i class="fas fa-cog"></i>
|
||
<text>聊天设置</text>
|
||
</view>
|
||
<view class="setting-list">
|
||
<view class="setting-item">
|
||
<view class="setting-icon">
|
||
<i class="fas fa-bell-slash"></i>
|
||
</view>
|
||
<text>消息免打扰</text>
|
||
<switch :checked="disturb" @change="switchDisturb" />
|
||
</view>
|
||
<view class="setting-item">
|
||
<view class="setting-icon">
|
||
<i class="fas fa-thumbtack"></i>
|
||
</view>
|
||
<text>置顶聊天</text>
|
||
<switch :checked="pinned" @change="switchPinned" />
|
||
</view>
|
||
<view class="setting-item" @click="chooseChatBg">
|
||
<view class="setting-icon">
|
||
<i class="fas fa-image"></i>
|
||
</view>
|
||
<text>设置当前聊天背景</text>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 危险操作卡片 -->
|
||
<view class="danger-card">
|
||
<view class="card-header">
|
||
<i class="fas fa-exclamation-triangle"></i>
|
||
<text>危险操作</text>
|
||
</view>
|
||
<view class="danger-list">
|
||
<view class="danger-item" @click="clearRecord">
|
||
<view class="danger-icon">
|
||
<i class="fas fa-trash"></i>
|
||
</view>
|
||
<text>清空聊天记录</text>
|
||
<i class="fas fa-chevron-right"></i>
|
||
</view>
|
||
<view class="danger-item" @click="complain">
|
||
<view class="danger-icon">
|
||
<i class="fas fa-flag"></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_123456",
|
||
},
|
||
disturb: false,
|
||
pinned: false,
|
||
};
|
||
},
|
||
computed: {
|
||
// 从全局数据获取设备信息
|
||
isMobile() {
|
||
return getApp().globalData.isMobile;
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
onAvatarError() {
|
||
// 头像加载失败时的处理
|
||
console.log('头像加载失败');
|
||
},
|
||
goToSearchRecord() {
|
||
uni.navigateTo({
|
||
url: "/pages/message/chatsearch?userid=" + this.user.meteid,
|
||
});
|
||
},
|
||
switchDisturb(e) {
|
||
this.disturb = e.detail.value;
|
||
uni.showToast({
|
||
title: this.disturb ? "已开启免打扰" : "已关闭免打扰",
|
||
icon: "none",
|
||
});
|
||
},
|
||
switchPinned(e) {
|
||
this.pinned = e.detail.value;
|
||
uni.showToast({
|
||
title: this.pinned ? "已置顶聊天" : "已取消置顶",
|
||
icon: "none",
|
||
});
|
||
},
|
||
remindOnce() {
|
||
uni.showToast({
|
||
title: "已为你开启消息提醒一次",
|
||
icon: "none",
|
||
});
|
||
},
|
||
chooseChatBg() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
const bgPath = res.tempFilePaths[0];
|
||
uni.setStorageSync("chat_bg_" + this.user.meteid, bgPath);
|
||
uni.showToast({ title: "聊天背景已设置", icon: "none" });
|
||
},
|
||
});
|
||
},
|
||
clearRecord() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定要清空与该用户的聊天记录吗？",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 这里可以调用API或清空本地数据
|
||
uni.showToast({ title: "聊天记录已清空", icon: "none" });
|
||
}
|
||
},
|
||
});
|
||
},
|
||
complain() {
|
||
uni.showModal({
|
||
title: "投诉",
|
||
content: "如发现对方有违规行为，请进行投诉，我们将协助核实处理。",
|
||
confirmText: "投诉",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showToast({
|
||
title: "已投诉，平台将进行核查",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.chat-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));
|
||
}
|
||
|
||
.chat-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));
|
||
}
|
||
|
||
.chat-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);
|
||
}
|
||
|
||
/* 浏览器环境下的固定定位 */
|
||
.chat-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);
|
||
}
|
||
|
||
/* 浏览器环境下为内容添加顶部间距 */
|
||
.chat-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);
|
||
border: 1rpx solid var(--border-light);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 40rpx 30rpx;
|
||
}
|
||
|
||
.avatar-container {
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 16rpx;
|
||
background: var(--gray);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
/* 卡片通用样式 */
|
||
.action-card, .setting-card, .danger-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);
|
||
}
|
||
|
||
/* 操作列表 */
|
||
.action-list, .setting-list, .danger-list {
|
||
padding: 0;
|
||
}
|
||
|
||
.action-item, .setting-item, .danger-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid var(--border-light);
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.action-item:last-child, .setting-item:last-child, .danger-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.action-item:active, .setting-item:active, .danger-item:active {
|
||
background-color: var(--surface-hover);
|
||
}
|
||
|
||
/* 图标样式 */
|
||
.action-icon, .setting-icon, .danger-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.action-icon {
|
||
background: var(--gradient-primary);
|
||
}
|
||
|
||
.setting-icon {
|
||
background: var(--gradient-primary);
|
||
}
|
||
|
||
.danger-icon {
|
||
background: var(--gradient-error);
|
||
}
|
||
|
||
.action-icon i, .setting-icon i, .danger-icon i {
|
||
color: var(--white);
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* 文字样式 */
|
||
.action-item text, .setting-item text, .danger-item text {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: var(--text-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.danger-item text {
|
||
color: var(--error);
|
||
}
|
||
|
||
.action-item i.fas.fa-chevron-right, .setting-item i.fas.fa-chevron-right, .danger-item i.fas.fa-chevron-right {
|
||
color: var(--text-muted);
|
||
font-size: 24rpx;
|
||
}
|
||
</style>
|
||
|