|
|
<template>
|
|
|
<view class="report-container">
|
|
|
<!-- ========== 被投诉人信息 ========== -->
|
|
|
<view class="target-info">
|
|
|
<view class="target-avatar">
|
|
|
<image :src="targetAvatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
|
|
<view v-if="isGroup" class="group-badge">群</view>
|
|
|
</view>
|
|
|
<view class="target-detail">
|
|
|
<text class="target-type">{{ targetName }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- ========== 聊天记录展示（只读） ========== -->
|
|
|
<view class="selected-messages">
|
|
|
<view class="selected-header">
|
|
|
<text class="selected-title">投诉的聊天记录</text>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="allMessages.length === 0" class="empty-selected">
|
|
|
暂无聊天记录可投诉
|
|
|
</view>
|
|
|
<view v-else class="message-list">
|
|
|
<view v-for="msg in allMessages" :key="msg.id" class="message-item">
|
|
|
<view class="msg-content-wrapper">
|
|
|
<view class="msg-header">
|
|
|
<image :src="getSenderAvatar(msg)" mode="aspectFill"></image>
|
|
|
<text class="sender-name">{{ getSenderName(msg) }}</text>
|
|
|
<text class="msg-time">{{ formatTime(msg.sendTime) }}</text>
|
|
|
</view>
|
|
|
<view class="msg-body">
|
|
|
<text>{{ getFullMessageContent(msg) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- ========== 投诉原因 ========== -->
|
|
|
<view class="reason-section">
|
|
|
<view class="section-title">投诉原因 <text class="required">*</text></view>
|
|
|
<radio-group @change="onReasonChange">
|
|
|
<label class="reason-item" v-for="item in reasonList" :key="item.value">
|
|
|
<radio :value="String(item.value)" :checked="selectedReason === item.value" color="#00a89b" />
|
|
|
<text class="reason-text">{{ item.label }}</text>
|
|
|
</label>
|
|
|
</radio-group>
|
|
|
</view>
|
|
|
|
|
|
<!-- ========== 补充描述 ========== -->
|
|
|
<view class="desc-section">
|
|
|
<view class="section-title">补充描述 <text class="optional">（选填）</text></view>
|
|
|
<textarea
|
|
|
class="desc-input"
|
|
|
v-model="description"
|
|
|
placeholder="请详细描述您遇到的问题，以便我们更快处理..."
|
|
|
maxlength="200"
|
|
|
auto-height
|
|
|
/>
|
|
|
<view class="char-count">{{ description.length }}/200</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- ========== 提交按钮 ========== -->
|
|
|
<view class="btn-wrapper">
|
|
|
<button class="submit-btn" @click="submitReport" >
|
|
|
提交投诉
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// ===== 页面参数 =====
|
|
|
sendType: '1',
|
|
|
senderId: '',
|
|
|
|
|
|
// ===== 被投诉人 =====
|
|
|
targetName: '',
|
|
|
targetAvatar: '',
|
|
|
isGroup: false,
|
|
|
|
|
|
// ===== 群成员（仅用于展示发送者昵称/头像） =====
|
|
|
groupMembers: [],
|
|
|
|
|
|
// ===== 聊天记录 =====
|
|
|
allMessages: [],
|
|
|
|
|
|
// ===== 投诉原因 =====
|
|
|
reasonList: [
|
|
|
{ label: '色情低俗', value: 1 },
|
|
|
{ label: '暴力恐怖', value: 2 },
|
|
|
{ label: '政治敏感', value: 3 },
|
|
|
{ label: '骚扰谩骂', value: 4 },
|
|
|
{ label: '虚假诈骗', value: 5 },
|
|
|
{ label: '违规宣传', value: 6 },
|
|
|
{ label: '其他', value: 7 }
|
|
|
],
|
|
|
selectedReason: null,
|
|
|
description: '',
|
|
|
|
|
|
// ===== 当前用户 =====
|
|
|
currentUser: {}
|
|
|
};
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
},
|
|
|
|
|
|
onLoad(options) {
|
|
|
this.sendType = options.sendType || '1';
|
|
|
this.senderId = options.senderId || '';
|
|
|
this.isGroup = this.sendType === '2';
|
|
|
this.currentUser = uni.getStorageSync('user') || {};
|
|
|
|
|
|
// ===== 从聊天页跳转（fromChat=true）：读取完整聊天记录缓存 =====
|
|
|
if (options.fromChat === 'true') {
|
|
|
this.initFromChatCache();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// ===== 无传递数据：走原逻辑 =====
|
|
|
if (!this.senderId) {
|
|
|
uni.showToast({ title: '参数错误', icon: 'none' });
|
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.initPage();
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
// ==================== 初始化 ====================
|
|
|
async initPage() {
|
|
|
uni.showLoading({ title: '加载中...' });
|
|
|
try {
|
|
|
if (this.isGroup) {
|
|
|
await this.loadGroupInfo();
|
|
|
} else {
|
|
|
await this.loadUserInfo();
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.error('加载失败', e);
|
|
|
uni.showToast({ title: '加载失败，请重试', icon: 'none' });
|
|
|
} finally {
|
|
|
uni.hideLoading();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// ==================== 从聊天页读取缓存数据（fromChat 场景） ====================
|
|
|
initFromChatCache() {
|
|
|
const cachedRecords = uni.getStorageSync('report_selected_messages') || [];
|
|
|
const cachedSenderId = uni.getStorageSync('report_sender_id');
|
|
|
const cachedSendType = uni.getStorageSync('report_send_type');
|
|
|
const cachedSenderName = uni.getStorageSync('report_sender_name');
|
|
|
const cachedSenderAvatar = uni.getStorageSync('report_sender_avatar');
|
|
|
|
|
|
// 缓存异常（无完整记录）时退回原逻辑
|
|
|
if (!cachedRecords || cachedRecords.length === 0) {
|
|
|
uni.showToast({ title: '未获取到聊天记录', icon: 'none' });
|
|
|
if (this.senderId) {
|
|
|
this.initPage();
|
|
|
} else {
|
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 完整聊天记录作为展示数据源
|
|
|
this.allMessages = cachedRecords;
|
|
|
|
|
|
// 被投诉人信息
|
|
|
this.senderId = cachedSenderId || this.senderId;
|
|
|
if (cachedSendType) {
|
|
|
this.sendType = String(cachedSendType);
|
|
|
this.isGroup = this.sendType === '2';
|
|
|
}
|
|
|
this.targetName = cachedSenderName || this.targetName;
|
|
|
this.targetAvatar = cachedSenderAvatar || this.targetAvatar;
|
|
|
|
|
|
// 群聊：加载群成员，用于展示发送者昵称/头像
|
|
|
if (this.isGroup && this.senderId) {
|
|
|
this.loadGroupMembersOnly();
|
|
|
}
|
|
|
|
|
|
// 使用完清除缓存，避免下次进入残留
|
|
|
this.clearReportCache();
|
|
|
},
|
|
|
|
|
|
// 仅加载群成员（fromChat 场景使用）
|
|
|
async loadGroupMembersOnly() {
|
|
|
try {
|
|
|
const memberRes = await uni.$http.get(`/api/group/members/${this.senderId}`);
|
|
|
this.groupMembers = memberRes.data.data || [];
|
|
|
} catch (e) {
|
|
|
console.error('加载群成员失败', e);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 清除聊天页写入的缓存
|
|
|
clearReportCache() {
|
|
|
uni.removeStorageSync('report_selected_messages');
|
|
|
uni.removeStorageSync('report_selected_records');
|
|
|
uni.removeStorageSync('report_sender_id');
|
|
|
uni.removeStorageSync('report_send_type');
|
|
|
uni.removeStorageSync('report_sender_name');
|
|
|
uni.removeStorageSync('report_sender_avatar');
|
|
|
},
|
|
|
|
|
|
// ==================== 加载数据 ====================
|
|
|
async loadGroupInfo() {
|
|
|
const res = await uni.$http.get(`/api/group/find/${this.senderId}`);
|
|
|
const group = res.data.data;
|
|
|
this.targetName = group.groupName;
|
|
|
this.targetAvatar = group.headImage || '';
|
|
|
|
|
|
const memberRes = await uni.$http.get(`/api/group/members/${this.senderId}`);
|
|
|
this.groupMembers = memberRes.data.data || [];
|
|
|
},
|
|
|
|
|
|
async loadUserInfo() {
|
|
|
const res = await uni.$http.get(`/api/friend/find/${this.senderId}`);
|
|
|
const user = res.data.data;
|
|
|
this.targetName = user.nickName || user.showNickName || '未知用户';
|
|
|
this.targetAvatar = user.headImage || '';
|
|
|
},
|
|
|
|
|
|
// ==================== 获取发送者信息 ====================
|
|
|
getSenderAvatar(msg) {
|
|
|
if (msg.selfSend) {
|
|
|
return this.currentUser.avatar || '';
|
|
|
}
|
|
|
if (this.isGroup && msg.sendId) {
|
|
|
const member = this.groupMembers.find(m => m.userId === msg.sendId);
|
|
|
return member ? member.headImage : '';
|
|
|
}
|
|
|
return this.targetAvatar;
|
|
|
},
|
|
|
|
|
|
getSenderName(msg) {
|
|
|
if (msg.selfSend) {
|
|
|
return this.currentUser.nickName || '我';
|
|
|
}
|
|
|
if (this.isGroup && msg.sendId) {
|
|
|
const member = this.groupMembers.find(m => m.userId === msg.sendId);
|
|
|
return member ? (member.showNickName || member.nickName) : '未知';
|
|
|
}
|
|
|
return this.targetName;
|
|
|
},
|
|
|
|
|
|
// ==================== 获取消息完整内容 ====================
|
|
|
getFullMessageContent(msg) {
|
|
|
try {
|
|
|
const type = msg.type;
|
|
|
// 文本消息 - 显示完整原文
|
|
|
if (type === "0" || type === 'TEXT') {
|
|
|
return msg.content || '';
|
|
|
}
|
|
|
// 图片消息
|
|
|
if (type === "1" || type === 'IMAGE') {
|
|
|
return '📷 [图片]';
|
|
|
}
|
|
|
// 语音消息
|
|
|
if (type === "2" || type === 'AUDIO') {
|
|
|
return '🎤 [语音]';
|
|
|
}
|
|
|
// 视频消息
|
|
|
if (type === "3" || type === 'VIDEO') {
|
|
|
return '🎬 [视频]';
|
|
|
}
|
|
|
// 文件消息
|
|
|
if (type === "4" || type === 'FILE') {
|
|
|
try {
|
|
|
const data = JSON.parse(msg.content);
|
|
|
return `📄 [文件] ${data.name || ''}`;
|
|
|
} catch (e) {
|
|
|
return '📄 [文件]';
|
|
|
}
|
|
|
}
|
|
|
// 其他类型
|
|
|
return '[其他消息]';
|
|
|
} catch (e) {
|
|
|
return '[消息]';
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// ==================== 格式化时间 ====================
|
|
|
formatTime(timestamp) {
|
|
|
if (!timestamp) return '';
|
|
|
const date = new Date(timestamp);
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
return `${month}/${day} ${hours}:${minutes}`;
|
|
|
},
|
|
|
|
|
|
// ==================== 投诉原因 ====================
|
|
|
onReasonChange(e) {
|
|
|
this.selectedReason = Number(e.detail.value);
|
|
|
},
|
|
|
|
|
|
// ==================== 提交投诉 ====================
|
|
|
async submitReport() {
|
|
|
let tip = '';
|
|
|
if (!this.selectedReason) {
|
|
|
tip = '请选择投诉原因';
|
|
|
uni.showToast({ title: tip || '请完善投诉信息', icon: 'none' });
|
|
|
return;
|
|
|
}
|
|
|
if (this.allMessages.length === 0) {
|
|
|
tip = '请至少选择一条聊天记录';
|
|
|
uni.showToast({ title: tip || '请完善投诉信息', icon: 'none' });
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
|
|
|
uni.showLoading({ title: '提交中...' });
|
|
|
try {
|
|
|
// 展示的全部聊天记录即本次投诉的完整记录
|
|
|
const messageIds = this.allMessages.map(m => m.id);
|
|
|
|
|
|
const res = await uni.$http.post('/api/report/submit', {
|
|
|
targetUserId: this.senderId,
|
|
|
targetType: this.isGroup ? 2 : 1,
|
|
|
targetGroupId: this.isGroup ? this.senderId : null,
|
|
|
messageIds,
|
|
|
messageDetails: this.allMessages, // 完整聊天记录（含 content/type/sendId/sendTime 等）
|
|
|
reason: this.selectedReason,
|
|
|
description: this.description.trim()
|
|
|
});
|
|
|
if (res.data.success ) {
|
|
|
uni.hideLoading();
|
|
|
uni.showToast({ title: '投诉已提交，我们会尽快处理', icon: 'success' });
|
|
|
setTimeout(() => uni.navigateBack(), 1500);
|
|
|
} else {
|
|
|
uni.hideLoading();
|
|
|
uni.showToast({ title: res.data.msg || '提交失败', icon: 'none' });
|
|
|
}
|
|
|
} catch (e) {
|
|
|
uni.hideLoading();
|
|
|
uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
|
|
|
console.error('举报提交失败', e);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.report-container {
|
|
|
min-height: 100vh;
|
|
|
background-color: #f5f7fa;
|
|
|
padding: 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* ========== 被投诉人信息 ========== */
|
|
|
.target-info {
|
|
|
background: #ffffff;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 30rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 24rpx;
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
|
|
|
|
|
.target-avatar {
|
|
|
position: relative;
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 50%;
|
|
|
background: #eee;
|
|
|
}
|
|
|
.group-badge {
|
|
|
position: absolute;
|
|
|
bottom: -4rpx;
|
|
|
right: -4rpx;
|
|
|
background: $im-color-primary;
|
|
|
color: #fff;
|
|
|
font-size: 20rpx;
|
|
|
padding: 2rpx 12rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
.target-detail {
|
|
|
flex: 1;
|
|
|
margin-left: 24rpx;
|
|
|
.target-type {
|
|
|
font-size: 34rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ========== 聊天记录展示 ========== */
|
|
|
.selected-messages {
|
|
|
background: #ffffff;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 24rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
|
|
|
|
|
.selected-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
.selected-title {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.empty-selected {
|
|
|
margin-top: 16rpx;
|
|
|
padding: 30rpx 0;
|
|
|
text-align: center;
|
|
|
color: #ccc;
|
|
|
font-size: 26rpx;
|
|
|
border: 2rpx dashed #eee;
|
|
|
border-radius: 12rpx;
|
|
|
}
|
|
|
|
|
|
.message-list {
|
|
|
margin-top: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ========== 聊天记录条目（只读展示） ========== */
|
|
|
.message-item {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
padding: 16rpx 10rpx;
|
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
.msg-content-wrapper {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
.msg-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12rpx;
|
|
|
image {
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
border-radius: 50%;
|
|
|
background: #eee;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
.sender-name {
|
|
|
font-size: 24rpx;
|
|
|
color: #333;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.msg-time {
|
|
|
font-size: 20rpx;
|
|
|
color: #bbb;
|
|
|
margin-left: auto;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
}
|
|
|
.msg-body {
|
|
|
font-size: 28rpx;
|
|
|
color: #555;
|
|
|
margin-top: 4rpx;
|
|
|
word-break: break-all;
|
|
|
line-height: 1.6;
|
|
|
white-space: pre-wrap;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ========== 投诉原因 & 描述 ========== */
|
|
|
.reason-section, .desc-section {
|
|
|
background: #ffffff;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 24rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 16rpx;
|
|
|
.required {
|
|
|
color: #e64340;
|
|
|
}
|
|
|
.optional {
|
|
|
font-weight: 400;
|
|
|
color: #999;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.reason-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 14rpx 0;
|
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
radio {
|
|
|
transform: scale(0.8);
|
|
|
margin-right: 16rpx;
|
|
|
}
|
|
|
.reason-text {
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.desc-input {
|
|
|
width: 100%;
|
|
|
min-height: 140rpx;
|
|
|
padding: 16rpx;
|
|
|
background: #f8fafc;
|
|
|
border-radius: 12rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
border: none;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.char-count {
|
|
|
text-align: right;
|
|
|
font-size: 24rpx;
|
|
|
color: #bbb;
|
|
|
margin-top: 8rpx;
|
|
|
}
|
|
|
|
|
|
/* ========== 提交按钮 ========== */
|
|
|
.btn-wrapper {
|
|
|
padding: 20rpx 0 40rpx;
|
|
|
.submit-btn {
|
|
|
width: 100%;
|
|
|
height: 88rpx;
|
|
|
line-height: 88rpx;
|
|
|
background: $im-color-primary;
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
border-radius: 44rpx;
|
|
|
border: none;
|
|
|
box-shadow: 0 4rpx 12rpx $im-color-primary;
|
|
|
&:disabled {
|
|
|
background: #ccc;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
