499 lines
9.3 KiB
Vue
499 lines
9.3 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="body">
|
|||
|
|
<view class="body_content">
|
|||
|
|
<view class="back"></view>
|
|||
|
|
<uni-nav-bar fixed statusBar background-color="transparent" :border="false" color="#ffffff"
|
|||
|
|
right-icon="trash" @clickRight="setUp" :showMenuButtonWidth="true">
|
|||
|
|
<!-- 左侧插槽 -->
|
|||
|
|
<template v-slot:left>
|
|||
|
|
<view class="custom_left">
|
|||
|
|
<view class="left_content">
|
|||
|
|
<image class="left_return" @click="back" src="/static/images/chat_return.png"
|
|||
|
|
mode="widthFix">
|
|||
|
|
</image>
|
|||
|
|
<view class="left_module">
|
|||
|
|
<image class="left_avatar" :src="state.avatar" mode="widthFix"></image>
|
|||
|
|
<view class="left_count" @click="tocohesion">
|
|||
|
|
<view class="left_dight faj">
|
|||
|
|
<image src="/static/images/intimacy_logo.png" mode="widthFix"></image>
|
|||
|
|
<text class="faj">{{ state.intimacy_level }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="left_title">{{ state.nickname }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</uni-nav-bar>
|
|||
|
|
<MessageList @closeAllModal="closeAllModal" />
|
|||
|
|
<input-bar ref="inputRef" />
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="btn">
|
|||
|
|
<view class="textbox fa">
|
|||
|
|
<image class="textbox_voice" src="/static/images/chat_voiceA.png" mode="widthFix"></image>
|
|||
|
|
<view class="textbox_content fa f1">
|
|||
|
|
<input class="f1" placeholder="发消息，Ta 会给你回复" placeholder-class="textbox_input" />
|
|||
|
|
<image @click="sendGift" class="textbox_add" src="/static/images/chat_gift.png" mode="widthFix">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
<image class="textbox_keyboard" src="/static/images/chat_keyboard.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_body fa sb">
|
|||
|
|
<view class="btn_content">
|
|||
|
|
<view class="btn_module">
|
|||
|
|
<image class="btn_image" src="/static/images/chat_a1.png" mode="widthFix"></image>
|
|||
|
|
<image class="btn_lock" src="/static/images/chat_lock.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_title">照片</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_content">
|
|||
|
|
<view class="btn_module">
|
|||
|
|
<image class="btn_image" src="/static/images/chat_a5.png" mode="widthFix"></image>
|
|||
|
|
<image class="btn_lock" src="/static/images/chat_lock.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_title">视频</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_content">
|
|||
|
|
<view class="btn_module">
|
|||
|
|
<image class="btn_image" src="/static/images/chat_a3.png" mode="widthFix"></image>
|
|||
|
|
<image class="btn_lock" src="/static/images/chat_lock.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_title">语音</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_content">
|
|||
|
|
<view class="btn_module">
|
|||
|
|
<image class="btn_image" src="/static/images/chat_a4.png" mode="widthFix"></image>
|
|||
|
|
<image class="btn_lock" src="/static/images/chat_lock.png" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_title">文件</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
reactive,
|
|||
|
|
onUnmounted
|
|||
|
|
} from 'vue';
|
|||
|
|
import {
|
|||
|
|
onLoad
|
|||
|
|
} from '@dcloudio/uni-app';
|
|||
|
|
import {
|
|||
|
|
FriendDelete
|
|||
|
|
} from '@/utils/api.js';
|
|||
|
|
// import notHave from '@/components/not-have.vue';
|
|||
|
|
// import topSafety from '@/components/top-safety.vue';
|
|||
|
|
import MessageList from '@/components/emChat/components/messageList';
|
|||
|
|
import InputBar from '@/components/emChat/components/inputBar';
|
|||
|
|
import { useConversationStore } from '@/stores/conversation';
|
|||
|
|
const inputRef = ref(null);
|
|||
|
|
const closeAllModal = () => inputRef.value?.closeAllModal();
|
|||
|
|
const state = reactive({
|
|||
|
|
form: {
|
|||
|
|
friend_id: ''
|
|||
|
|
},
|
|||
|
|
intimacy_level: 0,
|
|||
|
|
avatar: '',
|
|||
|
|
nickname: '',
|
|||
|
|
friendData: {}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onLoad((options) => {
|
|||
|
|
state.friendData = JSON.parse(decodeURIComponent(options.item))
|
|||
|
|
state.form.friend_id = state.friendData.id
|
|||
|
|
state.intimacy_level = state.friendData.intimacy_level
|
|||
|
|
state.avatar = state.friendData.avatar
|
|||
|
|
state.nickname = state.friendData.nickname
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const friendDelete = () => {
|
|||
|
|
FriendDelete(state.form).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
position: 'top'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
});
|
|||
|
|
}, 500);
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
position: 'top'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const back = () => {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: '/pages/friends/index'
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const tocohesion = () => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/friends/cohesion?friendData=' + encodeURIComponent(JSON.stringify(state.friendData))
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const setUp = () => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '删除聊天',
|
|||
|
|
content: '确定要删除该好友吗？此操作不可恢复。',
|
|||
|
|
confirmText: '确定删除',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
confirmColor: '#ff4444',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户确认删除');
|
|||
|
|
console.log(state.form.friend_id);
|
|||
|
|
friendDelete()
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户取消删除');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const conversationStore = useConversationStore();
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
conversationStore.setChattingUserId('');
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page {
|
|||
|
|
height: 100%;
|
|||
|
|
background: #F6F8FA;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-navbar__header-btns-left{
|
|||
|
|
width: 100% !important;
|
|||
|
|
}
|
|||
|
|
/* .uni-navbar__header-btns-right.data-v-26544265 {
|
|||
|
|
padding-right: 200rpx !important;
|
|||
|
|
} */
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.body {
|
|||
|
|
position: relative;
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 436rpx;
|
|||
|
|
background: linear-gradient(180deg, #EAD6FF 0%, rgba(255, 255, 255, 0) 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom_left {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 100%;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_content {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_return {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_module {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_avatar {
|
|||
|
|
width: 68rpx;
|
|||
|
|
height: 68rpx;
|
|||
|
|
display: block;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_count {
|
|||
|
|
position: absolute;
|
|||
|
|
right: -20rpx;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_count image {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_dight {
|
|||
|
|
position: relative;
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_dight image {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_dight text {
|
|||
|
|
position: relative;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left_title {
|
|||
|
|
margin: 0 0 0 26rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body_content {
|
|||
|
|
position: relative;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
flex: 1;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item.left {
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item.right {
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item .avatar {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item.left .avatar {
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item.right .avatar {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-content {
|
|||
|
|
max-width: 70%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-bubble {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item.left .message-bubble {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item.right .message-bubble {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade {
|
|||
|
|
position: relative;
|
|||
|
|
margin: 35rpx 0 0 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade_content {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 12rpx 0;
|
|||
|
|
width: 410rpx;
|
|||
|
|
background: linear-gradient(135deg, #BB93EB 0%, #CEA5FF 100%);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade_name {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade_iamgea {
|
|||
|
|
position: absolute;
|
|||
|
|
right: -10rpx;
|
|||
|
|
top: 10rpx;
|
|||
|
|
width: 25rpx;
|
|||
|
|
height: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade_iamgeb {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: -10rpx;
|
|||
|
|
width: 25rpx;
|
|||
|
|
height: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade_iamgec {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: -20rpx;
|
|||
|
|
width: 33rpx;
|
|||
|
|
height: 33rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear {
|
|||
|
|
position: relative;
|
|||
|
|
margin: 35rpx 0 0 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear_title {
|
|||
|
|
padding: 12rpx 0;
|
|||
|
|
width: 410rpx;
|
|||
|
|
background: #EBEBEB;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #9E9E9E;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
position: relative;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textbox {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 18rpx 30rpx 48rpx 30rpx;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textbox_voice {
|
|||
|
|
margin: 0 30rpx 0 0;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textbox_content {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 5rpx 25rpx;
|
|||
|
|
border-radius: 64rpx;
|
|||
|
|
background: #F6F6F6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textbox_content input {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textbox_input {
|
|||
|
|
color: #C4C4C4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textbox_add {
|
|||
|
|
width: 74rpx;
|
|||
|
|
height: 74rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textbox_keyboard {
|
|||
|
|
margin: 0 0 0 30rpx;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_body {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 48rpx 50rpx 56rpx 50rpx;
|
|||
|
|
border-top: 1px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_content {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_module {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_image {
|
|||
|
|
width: 88rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_lock {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_title {
|
|||
|
|
margin: 5rpx 0 0 0;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #222222;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
/* .uni-navbar__header-btns-right {
|
|||
|
|
padding-right: var(--right-padding, 0);
|
|||
|
|
} */
|
|||
|
|
</style>
|