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> |