442 lines
10 KiB
Vue
442 lines
10 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- #ifdef H5 -->
|
||
<view class="header-wrap">
|
||
<view class="header">
|
||
<view class="item" @click="back()">
|
||
<uni-icons type="left" color="#111" size="22"></uni-icons>
|
||
</view>
|
||
<view class="title">
|
||
<text class="t">咨询</text>
|
||
</view>
|
||
<view class="item"></view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="message-wrap" id="message-wrap">
|
||
<view class="more" v-if="list.length >= 10">
|
||
<text class="t" v-if="!finish">下拉加载更多历史消息</text>
|
||
<text class="t" v-else>没有更多消息了~</text>
|
||
</view>
|
||
<view class="more" v-if="status">
|
||
<text class="t">{{ contactInfo }}</text>
|
||
</view>
|
||
<view class="item" :class="[`item${item.user_type}`]" v-for="item in list" :key="item.id">
|
||
<image class="avatar" src="/static/icon_contact_avatar.svg" mode="aspectFill" v-if="item.user_type == 2"></image>
|
||
<view class="msg-wrap">
|
||
<view class="msg" v-if="item.type == 1">
|
||
<text class="t">{{ item.content }}</text>
|
||
</view>
|
||
<image class="img" :src="item.content" mode="heightFix" @click="previewImageHandle([item.content])" v-else></image>
|
||
<view class="time-wrap">
|
||
<text class="t">{{ item.add_time | formatTime }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="focus-wrap" v-if="iosFocus"></view>
|
||
<view class="footer-wrap" :class="{ focus: iosFocus }">
|
||
<view class="footer">
|
||
<view class="item" @click="selectImg">
|
||
<uni-icons type="image-filled" size="30" color="#666"></uni-icons>
|
||
</view>
|
||
<view class="input-wrap">
|
||
<input :focus="focus" adjust-position class="input" type="text" placeholder="输入消息..." v-model.trim="messageValue" @confirm="sendMessageHandle" @focus="inputFocus" @blur="inputBlur" />
|
||
</view>
|
||
<view class="item" style="transform: rotate(280deg)" @click="sendMessageHandle">
|
||
<uni-icons type="paperplane-filled" size="30" color="#5C6BC0"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const app = getApp();
|
||
import dayjs from 'dayjs';
|
||
import socket from '@/utils/socket';
|
||
import { uploadImage, previewImage } from '@/utils/uploadFile.js';
|
||
|
||
export default {
|
||
mixins: [socket.createSocketMixin()],
|
||
data() {
|
||
return {
|
||
iosFocus: false,
|
||
focus: false,
|
||
messageValue: '',
|
||
userInfo: '',
|
||
status: 0,
|
||
contactInfo: '',
|
||
finish: false,
|
||
page: 1,
|
||
list: [],
|
||
platform: '',
|
||
};
|
||
},
|
||
filters: {
|
||
formatTime(timeStr) {
|
||
const now = dayjs(); // 当前时间
|
||
const targetTime = dayjs(timeStr); // 目标时间
|
||
|
||
// 获取日期部分（忽略时分秒）
|
||
const nowDate = now.startOf('day');
|
||
const targetDate = targetTime.startOf('day');
|
||
|
||
// 计算日期差（按天计算）
|
||
const diffDays = nowDate.diff(targetDate, 'day');
|
||
|
||
// 星期几的中文映射
|
||
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
const targetWeekDay = weekDays[targetTime.day()];
|
||
|
||
// 获取当前周的第一天（周日）
|
||
const firstDayOfWeek = now.startOf('week');
|
||
|
||
// 根据天数差判断格式化规则
|
||
if (diffDays === 0) {
|
||
// 今天
|
||
return targetTime.format('HH:mm');
|
||
} else if (diffDays === 1) {
|
||
// 昨天
|
||
return '昨天 ' + targetTime.format('HH:mm');
|
||
} else if (targetDate.isSame(firstDayOfWeek, 'week')) {
|
||
// 本周内（但不是今天和昨天）
|
||
return targetWeekDay + ' ' + targetTime.format('HH:mm');
|
||
} else {
|
||
// 更早之前
|
||
return targetTime.format('YYYY年M月D日 HH:mm');
|
||
}
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.userInfo = uni.getStorageSync('cache_shop_user_info_key');
|
||
|
||
if (this.userInfo.id) {
|
||
// 自动管理生命周期的消息监听
|
||
this.socketOnMessage((data) => {
|
||
this.messageListener(data);
|
||
});
|
||
socket.sendMessage({
|
||
operate_type: 'chat_list',
|
||
type: 'user_msg',
|
||
user_id: this.userInfo.id,
|
||
});
|
||
}
|
||
|
||
// 获取系统信息
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
this.platform = systemInfo.platform;
|
||
},
|
||
onPullDownRefresh() {
|
||
this.page++;
|
||
this.getHistoryMessage();
|
||
},
|
||
methods: {
|
||
// 发消息
|
||
sendMessageHandle() {
|
||
if (this.messageValue) {
|
||
this.sendMessageSocket(this.messageValue);
|
||
this.messageValue = '';
|
||
|
||
setTimeout(() => {
|
||
this.focus = true;
|
||
}, 10);
|
||
}
|
||
},
|
||
// 发送消息 1文本 2图文
|
||
sendMessageSocket(content = '', type = 1) {
|
||
socket.sendMessage({
|
||
operate_type: 'send_msg',
|
||
type: 'user_msg',
|
||
user_id: this.userInfo.id,
|
||
content: content,
|
||
content_type: type,
|
||
});
|
||
},
|
||
// 监听消息
|
||
messageListener(data) {
|
||
// console.log('监听消息===', data);
|
||
if (data.operate_type == 'chat_list' && this.page == 1) {
|
||
this.list = data.data.chat_list.reverse();
|
||
this.status = 1;
|
||
this.contactInfo = data.service;
|
||
|
||
this.$nextTick(() => {
|
||
this.scrollToBottom();
|
||
});
|
||
}
|
||
if (data.operate_type == 'chat_list' && this.page != 1) {
|
||
if (data.data.chat_list.length) {
|
||
this.list.unshift(...data.data.chat_list.reverse());
|
||
|
||
uni.showToast({
|
||
title: '获取成功',
|
||
icon: 'none',
|
||
});
|
||
} else {
|
||
this.finish = true;
|
||
}
|
||
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh();
|
||
}, 300);
|
||
|
||
// this.$nextTick(() => {
|
||
// uni.pageScrollTo({
|
||
// scrollTop: 0, // 滚动到页面顶部
|
||
// duration: 100, // 滚动动画时长（毫秒）
|
||
// });
|
||
// });
|
||
}
|
||
if (data.operate_type == 'service_msg') {
|
||
this.list.push(data.data);
|
||
|
||
this.$nextTick(() => {
|
||
this.scrollToBottom();
|
||
});
|
||
}
|
||
|
||
if (data.operate_type == 'user_msg') {
|
||
this.list.push(data.data[0]);
|
||
|
||
this.$nextTick(() => {
|
||
this.scrollToBottom();
|
||
});
|
||
}
|
||
|
||
if (data.operate_type == 'error') {
|
||
uni.showModal({
|
||
title: '注意',
|
||
content: data.msg,
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateBack();
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
// 获取历史消息
|
||
getHistoryMessage() {
|
||
socket.sendMessage({
|
||
operate_type: 'chat_list',
|
||
type: 'user_msg',
|
||
user_id: this.userInfo.id,
|
||
page: this.page,
|
||
});
|
||
},
|
||
// 上传图片
|
||
async selectImg() {
|
||
try {
|
||
const [url] = await uploadImage(1, true);
|
||
console.log('selectImg===', url);
|
||
this.sendMessageSocket(url, 2);
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
// 预览图片
|
||
previewImageHandle(urls) {
|
||
previewImage(urls);
|
||
},
|
||
// 返回上一页
|
||
back() {
|
||
uni.navigateBack();
|
||
},
|
||
inputBlur() {
|
||
this.focus = false;
|
||
this.iosFocus = false;
|
||
},
|
||
inputFocus() {
|
||
if (this.platform == 'ios') {
|
||
this.iosFocus = true;
|
||
}
|
||
|
||
this.scrollToBottom();
|
||
},
|
||
// 滚动到页面底部
|
||
scrollToBottom() {
|
||
// 创建节点查询器
|
||
const query = uni.createSelectorQuery();
|
||
|
||
// 获取底部元素的位置（相对于页面顶部的距离）
|
||
query.select('#message-wrap').boundingClientRect();
|
||
query.exec((res) => {
|
||
console.log('scrollToBottom===', res);
|
||
if (res && res[0]) {
|
||
const bottomHeight = res[0].height; // 元素顶部距离页面顶部的距离
|
||
|
||
// 滚动到指定位置（注意：不同平台参数可能不同）
|
||
uni.pageScrollTo({
|
||
scrollTop: bottomHeight + 1000, // 滚动距离（单位：px）
|
||
duration: 100, // 滚动动画时长（可选）
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
--header-height: 44px;
|
||
--footer-height: 60px;
|
||
$height: 40px;
|
||
/* #ifdef H5 */
|
||
padding: calc(var(--header-height) + var(--status-bar-height)) 0 calc(var(--footer-height) + env(safe-area-inset-bottom)) 0;
|
||
/* #endif */
|
||
/* #ifdef MP-ALIPAY */
|
||
padding: 28upx 0 calc(var(--footer-height) + env(safe-area-inset-bottom)) 0;
|
||
/* #endif */
|
||
position: relative;
|
||
|
||
.header-wrap {
|
||
width: 100%;
|
||
padding-top: var(--status-bar-height);
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
background-color: #fff;
|
||
.header {
|
||
height: var(--header-height);
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item {
|
||
width: var(--header-height);
|
||
height: var(--header-height);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.title {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.t {
|
||
font-size: 32upx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.message-wrap {
|
||
padding: 28upx;
|
||
.more {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-bottom: 28upx;
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #999;
|
||
}
|
||
}
|
||
.item {
|
||
display: flex;
|
||
gap: 20upx;
|
||
padding-bottom: 36upx;
|
||
&.item1 {
|
||
flex-direction: row-reverse;
|
||
.msg-wrap {
|
||
.msg {
|
||
background-color: #8e99f3;
|
||
.t {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.item2 {
|
||
.msg-wrap {
|
||
.time-wrap {
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
}
|
||
.avatar {
|
||
$size: 80upx;
|
||
width: $size;
|
||
height: $size;
|
||
margin-top: 7upx;
|
||
flex-shrink: 0;
|
||
}
|
||
.msg-wrap {
|
||
.msg {
|
||
padding: 28upx;
|
||
border-radius: 28upx;
|
||
background-color: #fff;
|
||
.t {
|
||
display: block;
|
||
max-width: 450upx;
|
||
font-size: 28upx;
|
||
color: #333;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
.img {
|
||
display: block;
|
||
max-width: 500upx;
|
||
max-height: 200upx;
|
||
border-radius: 12upx;
|
||
background-color: #fefefe;
|
||
}
|
||
.time-wrap {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-top: 12upx;
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.focus-wrap {
|
||
height: calc(var(--footer-height) + env(safe-area-inset-bottom));
|
||
}
|
||
.footer-wrap {
|
||
width: 100%;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 99;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
background-color: #fcfcfc;
|
||
transform: translateY(0);
|
||
&.focus {
|
||
transform: translateY(-100%);
|
||
}
|
||
.footer {
|
||
height: var(--footer-height);
|
||
display: flex;
|
||
align-items: center;
|
||
.item {
|
||
width: $height + 20px;
|
||
height: $height;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.input-wrap {
|
||
flex: 1;
|
||
.input {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: $height;
|
||
border-radius: $height;
|
||
background-color: #efefef;
|
||
padding-left: 20px;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|