You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
11 KiB
431 lines
11 KiB
<!--聊天记录-列表-->
|
|
<template>
|
|
<view class="main_box">
|
|
|
|
<view class="main_section">
|
|
<scroll-view
|
|
class="section_1"
|
|
scroll-y="true"
|
|
:scroll-top="scrollTop"
|
|
:lower-threshold="lowerThreshold"
|
|
style="height: 80vh;"
|
|
>
|
|
<view class="ul">
|
|
<view class="item_box" v-for="(v,k) in tableList" :key="k" :id="'item_' + v.id">
|
|
<view class="time_section" v-if="v.created_at">{{v.created_at}}</view>
|
|
|
|
<view class="li" v-if="v.direction == `left`">
|
|
<view class="item left_item">
|
|
<view class="text_box">{{v.content}}</view>
|
|
</view>
|
|
<view class="item"></view>
|
|
</view>
|
|
|
|
<view class="li" v-if="v.direction == `right`">
|
|
<view class="item"></view>
|
|
<view class="item right_item">
|
|
<view class="text_box">{{v.content}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="input_section">
|
|
<view class="left_box">
|
|
<input class="input" v-model="formData.content" type="text" placeholder="请输入">
|
|
</view>
|
|
<view class="right_box">
|
|
<image @click="submitForm()" class="send_img" src="@/static/images/common/fa_song.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js';
|
|
import memberApi from '@/api/member.js';
|
|
import commonApi from '@/api/common.js';
|
|
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
|
|
import AQTabber from "@/components/AQ/AQTabber"
|
|
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
AQUplodeImgMulti,
|
|
},
|
|
data() {
|
|
return {
|
|
loading:false,//加载状态
|
|
lowerThreshold: 100,//距离底部多远触发
|
|
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
|
|
|
|
//筛选条件
|
|
filteredData:{
|
|
page:1,//当前页码
|
|
limit:10,//每页返回数据条数
|
|
total:10,//数据总条数
|
|
friend_id: '',//chat_friends表id
|
|
},
|
|
tableList:[],//聊天数据列表
|
|
|
|
from_id:'',//发送者ID
|
|
to_id:'',//接收者ID
|
|
from_type:'',//发送者类型|personnel=员工,customer=学生(客户)
|
|
|
|
//请求参数
|
|
chatFriendsInfoParams:{
|
|
personnel_id:'',
|
|
customer_resources_id:'',
|
|
},
|
|
chatFriendsInfo:{},//好友关系详情
|
|
|
|
//聊天表单信息
|
|
formData: {
|
|
from_type:'',//发送者类型|personnel=员工,customer=学生(客户)
|
|
from_id:'',//发送者ID
|
|
to_id:'',//接收者ID
|
|
friend_id:'',//关联chat_friends表id
|
|
message_type: 'text',//消息类型|text=文本,img=图片
|
|
content: '',//文本内容（JSON 格式扩展字段）,文本类型=纯文字,图片类型=绝对路径
|
|
},
|
|
|
|
isFirstLoad: true, // 标记是否为首次加载
|
|
scrollTop:'',
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.from_id = options.from_id//发送者的id
|
|
this.to_id = options.to_id//接收者的id
|
|
},
|
|
onShow(){
|
|
this.init()
|
|
},
|
|
//下拉刷新
|
|
async onPullDownRefresh() {
|
|
//加载更多(下一页)
|
|
await this.loadMoreData()
|
|
},
|
|
methods: {
|
|
|
|
//初始化
|
|
async init(){
|
|
//获取用户类型
|
|
let userType = uni.getStorageSync('userType')
|
|
//1=教练,2=销售,3=学员
|
|
if (['1', '2'].includes(String(userType))) {
|
|
//
|
|
this.from_type = 'personnel'//员工
|
|
this.chatFriendsInfoParams.personnel_id = this.from_id//员工资源的id
|
|
this.chatFriendsInfoParams.customer_resources_id = this.to_id//学生资源的id
|
|
|
|
this.formData.from_type = 'personnel'//员工
|
|
this.formData.from_id = this.from_id//发送者的id(员工)
|
|
this.formData.to_id = this.to_id//接收者的id(学生)
|
|
|
|
} else {
|
|
//
|
|
this.from_type = 'customer'//学生
|
|
this.chatFriendsInfoParams.personnel_id = this.to_id//员工资源的id
|
|
this.chatFriendsInfoParams.customer_resources_id = this.from_id//学生资源的id
|
|
|
|
this.formData.from_type = 'customer'//学生
|
|
this.formData.from_id = this.to_id//发送者的id(学生)
|
|
this.formData.to_id = this.from_id//接收者的id(员工)
|
|
}
|
|
//获取好友关系详情
|
|
await this.getChatFriendsInfo()
|
|
//获取聊天记录列表
|
|
await this.getList();
|
|
|
|
// 首次加载后滚动到底部
|
|
if (this.filteredData.page == 2) {
|
|
this.scrollToBottom()
|
|
}
|
|
},
|
|
|
|
//获取好友关系详情
|
|
async getChatFriendsInfo(){
|
|
let params = {
|
|
personnel_id: this.chatFriendsInfoParams.personnel_id,//员工资源ID
|
|
customer_resources_id: this.chatFriendsInfoParams.customer_resources_id,//学生资源ID
|
|
}
|
|
let res = await apiRoute.xs_chatGetChatFriendsInfo(params)
|
|
if (res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
this.chatFriendsInfo = res.data
|
|
|
|
this.filteredData.friend_id = res.data.id
|
|
|
|
this.formData.friend_id = res.data.id
|
|
},
|
|
|
|
//加载更多(下一页)
|
|
loadMoreData() {
|
|
//判断是否加载
|
|
if (!this.isReachedBottom) {
|
|
this.isReachedBottom = true;//设置为不可请求状态
|
|
this.getList();
|
|
}
|
|
},
|
|
//重置为第一页
|
|
async resetFilteredData() {
|
|
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
|
|
|
|
this.filteredData.page = 1//当前页码
|
|
this.filteredData.limit = 10//每页返回数据条数
|
|
this.filteredData.total = 10//数据总条数
|
|
},
|
|
|
|
//获取聊天记录列表
|
|
async getList(){
|
|
this.loading = true
|
|
|
|
let data = {...this.filteredData}
|
|
|
|
// 判断是否还有数据可加载
|
|
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) {
|
|
this.loading = false;
|
|
uni.showToast({
|
|
title: '暂无更多',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if(data.page == 1){
|
|
this.tableList = []
|
|
}
|
|
|
|
let res = await apiRoute.xs_chatGetChatMessagesList(data)//获取消息列表
|
|
this.loading = false
|
|
this.isReachedBottom = false;
|
|
if (res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
|
|
|
|
let list = res.data.data
|
|
|
|
list.forEach((v, k) => {
|
|
|
|
if (this.from_type == 'personnel') {
|
|
//当前是员工登陆聊天页面时
|
|
if (v.from_type == 'personnel') {
|
|
v.direction = 'right'//是员工发的消息
|
|
} else {
|
|
v.direction = 'left'//是学生发的消息
|
|
}
|
|
} else if (this.from_type == 'customer') {
|
|
//当前是学生登陆聊天页面时
|
|
if (v.from_type == 'customer') {
|
|
v.direction = 'right'//是员工发的消息
|
|
} else {
|
|
v.direction = 'left'//是学生发的消息
|
|
}
|
|
}
|
|
})
|
|
|
|
list.reverse()
|
|
this.tableList.unshift(...list); // 将新数据插入到数组头部
|
|
|
|
console.log('列表',res.data.total)
|
|
this.filteredData.total = res.data.total
|
|
this.filteredData.page++
|
|
},
|
|
|
|
|
|
//######AQ上传文件组件相关######
|
|
// 上传文件回调
|
|
AQUploadSuccess(res) {
|
|
console.log('接收AQ上传回调xxx1', res)
|
|
// 使用 split 方法分割字符串
|
|
let _inputValue = []
|
|
if (res.filePathArr.length) {
|
|
_inputValue = res.filePathArr
|
|
}
|
|
this.formData[res.inputName] = _inputValue
|
|
// console.log('接收AQ上传回调xxx1',res)
|
|
// console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
|
|
},
|
|
|
|
//发送站内信
|
|
async submitForm() {
|
|
let data = {...this.formData}
|
|
if (!data.content) {
|
|
//反馈内容为必填项
|
|
uni.showToast({
|
|
title: '请输入内容',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
let res = await apiRoute.xs_chatSendChatMessages(data)
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
let content = this.formData.content
|
|
this.formData.content = ''//清空输入框
|
|
let msgData = {
|
|
"id": '',
|
|
"hair_staff_id": this.filteredData.hair_staff_id,
|
|
"closed_staff_id": '',
|
|
"content": content,
|
|
"status": 1,
|
|
"type": 2,
|
|
"create_time": "",
|
|
"redirect": null,
|
|
"title": null,
|
|
"direction": "right",
|
|
"show_time": ""
|
|
}
|
|
//将发送的消息放在最下方
|
|
this.tableList = this.tableList.concat(msgData);
|
|
}
|
|
},
|
|
|
|
//页面滚动到底部
|
|
scrollToBottom() {
|
|
alert(1)
|
|
this.$nextTick(() => {
|
|
this.scrollTop = 999999 // 足够大的值确保滚动到底部
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main_box {
|
|
background: #292929;
|
|
}
|
|
|
|
//自定义导航栏
|
|
.navbar_section {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #29d3b4;
|
|
|
|
.title {
|
|
padding: 20rpx 0;
|
|
font-size: 30rpx;
|
|
color: #315d55;
|
|
}
|
|
}
|
|
|
|
.main_section {
|
|
min-height: 100vh;
|
|
background: #292929 100%;
|
|
padding: 0 0rpx;
|
|
padding-top: 32rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
|
|
.section {
|
|
background-color: #434544;
|
|
padding: 40rpx 40rpx;
|
|
}
|
|
|
|
.section_1{
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
padding: 0 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40rpx;
|
|
.ul{
|
|
.time_section{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #989898;
|
|
}
|
|
.li{
|
|
margin: 40rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.item{
|
|
max-width: 70%;
|
|
padding: 32rpx;
|
|
border-radius: 32rpx;
|
|
word-wrap: break-word; /* 允许长单词或 URL 换行 */
|
|
word-break: break-all; /* 强制所有字符换行 */
|
|
.text_box{}
|
|
}
|
|
.left_item{
|
|
background-color: #f4f6f9;
|
|
color: #343434;
|
|
}
|
|
.right_item{
|
|
background-color: #1684fc;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
//输入框板块
|
|
.input_section{
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
|
|
padding: 50rpx 50rpx;
|
|
display: flex;
|
|
justify-content:space-between;
|
|
align-items: center;
|
|
.left_box{
|
|
width: 70%;
|
|
.input{
|
|
background-color: #f4f6f9;
|
|
height: 88rpx;
|
|
padding: 28rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 32rpx;
|
|
|
|
width: 532rpx;
|
|
color: #292929;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.right_box{
|
|
border-radius: 50%;
|
|
background-color: #a2cefe;
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.send_img{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.describe {
|
|
color: #999999;
|
|
padding-left: 30rpx;
|
|
}
|
|
</style>
|