|
|
@@ -1,5 +1,48 @@
|
|
|
<template>
|
|
|
<view class="chat-page">
|
|
|
+ <!-- 更多选项弹窗 -->
|
|
|
+ <view v-if="showMoreOptionsModal" class="modal-mask" @click="closeMoreOptions">
|
|
|
+ <view class="modal-content" @click.stop>
|
|
|
+ <view class="modal-header">
|
|
|
+ <text class="modal-title">{{ targetUserName }}</text>
|
|
|
+ <text class="modal-subtitle">好友操作</text>
|
|
|
+ </view>
|
|
|
+ <view class="modal-body">
|
|
|
+ <!-- <view class="modal-item" @click="goToUserProfile">
|
|
|
+ <text class="item-icon">👤</text>
|
|
|
+ <text class="item-text">查看资料</text>
|
|
|
+ </view> -->
|
|
|
+ <view class="modal-item" @click="blockFriend" :class="{ danger: true }">
|
|
|
+ <text class="item-icon">🚫</text>
|
|
|
+ <text class="item-text">拉黑好友</text>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="modal-item" @click="reportUser" :class="{ danger: true }">
|
|
|
+ <text class="item-icon">🚨</text>
|
|
|
+ <text class="item-text">举报用户</text>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="modal-footer">
|
|
|
+ <button class="modal-close-btn" @click="closeMoreOptions">取消</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 拉黑确认弹窗 -->
|
|
|
+ <view v-if="showBlockConfirmModal" class="modal-mask" @click="closeBlockConfirm">
|
|
|
+ <view class="confirm-modal" @click.stop>
|
|
|
+ <view class="confirm-title">确认拉黑</view>
|
|
|
+ <view class="confirm-content">
|
|
|
+ <text>拉黑后将无法接收该用户的消息，是否确定？</text>
|
|
|
+ </view>
|
|
|
+ <view class="confirm-buttons">
|
|
|
+ <button class="confirm-btn cancel" @click="closeBlockConfirm">取消</button>
|
|
|
+ <button class="confirm-btn confirm" @click="confirmBlockFriend">确认</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<!-- 顶部导航 -->
|
|
|
<view class="chat-header">
|
|
|
<view class="header-left" @click="goBack">
|
|
|
@@ -11,7 +54,7 @@
|
|
|
{{ isTargetOnline ? '在线' : '离线' }}
|
|
|
</text>
|
|
|
</view>
|
|
|
- <view class="header-right">
|
|
|
+ <view class="header-right" @click="showMoreOptions">
|
|
|
<text class="icon-more">⋯</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -230,8 +273,11 @@ export default {
|
|
|
nextReqMessageID: '',
|
|
|
isTargetOnline: false,
|
|
|
|
|
|
- emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳']
|
|
|
- };
|
|
|
+ emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳'],
|
|
|
+ showMoreOptionsModal: false, // 控制更多选项弹窗显示
|
|
|
+ showBlockConfirmModal: false // 控制拉黑确认弹窗显示
|
|
|
+
|
|
|
+ };
|
|
|
},
|
|
|
|
|
|
async onLoad(options) {
|
|
|
@@ -287,6 +333,7 @@ export default {
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
+
|
|
|
|
|
|
// 保存用户ID（TIM需要字符串格式）
|
|
|
this.userId = String(rawUserId);
|
|
|
@@ -354,7 +401,23 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ more(userid) {
|
|
|
+ console.log('点击了更多按钮，开始跳转...', userid);
|
|
|
+ // 如果目标页面是普通页面，用navigateTo（保留当前页面）；如果是tabbar页面，用switchTab
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/message/more?userid=${userid}`,
|
|
|
+ success: () => {
|
|
|
+ console.log('跳转成功');
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('跳转失败:', err);
|
|
|
+ uni.showToast({
|
|
|
+ title: '页面不存在或路径错误',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
/**
|
|
|
* 导入用户到腾讯云IM
|
|
|
*/
|
|
|
@@ -1046,12 +1109,211 @@ export default {
|
|
|
title: '语音播放功能开发中',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
+ showMoreOptions() {
|
|
|
+ this.showMoreOptionsModal = true;
|
|
|
+ },
|
|
|
+ closeMoreOptions() {
|
|
|
+ this.showMoreOptionsModal = false;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查看用户资料（跳转到原有more页面）
|
|
|
+ */
|
|
|
+ goToUserProfile() {
|
|
|
+ this.closeMoreOptions();
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/message/more?userid=${this.targetUserId}`,
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('跳转失败:', err);
|
|
|
+ uni.showToast({
|
|
|
+ title: '页面不存在',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 显示拉黑确认弹窗
|
|
|
+ */
|
|
|
+ blockFriend() {
|
|
|
+ this.closeMoreOptions();
|
|
|
+ this.showBlockConfirmModal = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 关闭拉黑确认弹窗
|
|
|
+ */
|
|
|
+ closeBlockConfirm() {
|
|
|
+ this.showBlockConfirmModal = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 确认拉黑好友
|
|
|
+ */
|
|
|
+ async confirmBlockFriend() {
|
|
|
+ try {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '处理中...'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 调用后端拉黑接口（根据实际接口调整）
|
|
|
+ const [err, res] = await uni.request({
|
|
|
+ url: 'http://localhost:8083/api/chatfriend/block',
|
|
|
+ method: 'POST',
|
|
|
+ data: {
|
|
|
+ userId: this.userId,
|
|
|
+ targetUserId: this.targetUserId,
|
|
|
+ targetUserName: this.targetUserName,
|
|
|
+ targetUserAvatar: this.targetUserAvatar
|
|
|
+
|
|
|
+ },
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ // 'Authorization': 'Bearer ' + uni.getStorageSync('token')
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ if (err) throw new Error('网络请求失败');
|
|
|
+
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ uni.showToast({ title: '拉黑成功', icon: 'success' });
|
|
|
+ this.closeBlockConfirm();
|
|
|
+ // 拉黑成功后返回上一页
|
|
|
+ setTimeout(() => this.goBack(), 1500);
|
|
|
+ } else {
|
|
|
+ throw new Error(res.data?.message || '拉黑失败');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('拉黑失败:', error);
|
|
|
+ uni.showToast({ title: error.message || '拉黑失败', icon: 'none' });
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+ /* 弹窗遮罩 */
|
|
|
+ .modal-mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 10000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 更多选项弹窗内容 */
|
|
|
+ .modal-content {
|
|
|
+ width: 70%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-header {
|
|
|
+ padding: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-subtitle {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ display: block;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-body {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 25rpx 40rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-item.danger {
|
|
|
+ color: #fa5151;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-footer {
|
|
|
+ padding: 20rpx;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-close-btn {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border: none;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 确认弹窗样式 */
|
|
|
+ .confirm-modal {
|
|
|
+ width: 60%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-content {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-buttons {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-btn {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: none;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-btn.cancel {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-btn.confirm {
|
|
|
+ background-color: #fa5151;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
.chat-page {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
