|
|
|
@ -6,56 +6,106 @@ |
|
|
|
<scroll-view |
|
|
|
class="section_1" |
|
|
|
scroll-y="true" |
|
|
|
:scroll-top="scrollTop" |
|
|
|
:lower-threshold="lowerThreshold" |
|
|
|
style="height: 80vh;" |
|
|
|
style="height: 78vh;" |
|
|
|
> |
|
|
|
<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 class="item left_item" :style="{ backgroundColor: v.message_type === 'text' ? '#f4f6f9' : '' }"> |
|
|
|
<!--文本内容--> |
|
|
|
<view class="text_box" v-if="v.message_type == 'text'">{{v.content}}</view> |
|
|
|
<!-- 图片内容 --> |
|
|
|
<view class="img_box" v-if="v.message_type == 'img'" @click="previewImage(v.content)"> |
|
|
|
<image class="chat_img" :src="v.content" mode="aspectFill"></image> |
|
|
|
</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 class="item right_item" :style="{ backgroundColor: v.message_type === 'text' ? '#1684fc' : '' }"> |
|
|
|
<view class="text_box" v-if="v.message_type == 'text'">{{v.content}}</view> |
|
|
|
<!-- 图片内容 --> |
|
|
|
<view class="img_box" v-if="v.message_type == 'img'" @click="previewImage(v.content)"> |
|
|
|
<image class="chat_img" :src="v.content" mode="aspectFill"></image> |
|
|
|
</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 class="img_box"> |
|
|
|
<image @click="submitTextForm()" class="send_img" src="@/static/images/common/fa_song.png"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!--更多选择--> |
|
|
|
<view class="img_box"> |
|
|
|
<image @click="openMore()" class="send_img" src="@/static/images/common/jia_hao.png"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!--更多选择--> |
|
|
|
<fui-bottom-popup :show="moreShow" @close="closeMore"> |
|
|
|
<view class="more_section"> |
|
|
|
<view class="fui-scroll__wrap"> |
|
|
|
<scroll-view scroll-y class="fui-scroll__view"> |
|
|
|
<view class="ul"> |
|
|
|
<view class="li" @click=""> |
|
|
|
<AQUplodeImage |
|
|
|
:uploadUrl=uploadUrl |
|
|
|
:extraData="{ input_name: 'img_uplode', formData:{} }" |
|
|
|
@uplodeImageRes="uplodeImageRes" |
|
|
|
> |
|
|
|
<view class="icon_box"> |
|
|
|
<fui-icon name="picture-fill" :size="80"></fui-icon> |
|
|
|
</view> |
|
|
|
<view class="title">相册</view> |
|
|
|
</AQUplodeImage> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</fui-bottom-popup> |
|
|
|
|
|
|
|
</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 { |
|
|
|
Api_url |
|
|
|
} from "@/common/config.js"; |
|
|
|
import AQUplodeImage from '@/components/AQ/AQUplodeImage';//单图上传组件 |
|
|
|
import AQTabber from "@/components/AQ/AQTabber" |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
AQTabber, |
|
|
|
AQUplodeImgMulti, |
|
|
|
AQUplodeImage, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
uploadUrl: `${Api_url}/uploadImage`, |
|
|
|
|
|
|
|
|
|
|
|
scrollTop:'',//滚动条位置,用于加载第一页后滚动到底部 |
|
|
|
loading:false,//加载状态 |
|
|
|
lowerThreshold: 100,//距离底部多远触发 |
|
|
|
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|
|
|
@ -90,7 +140,8 @@ export default { |
|
|
|
content: '',//文本内容（JSON 格式扩展字段）,文本类型=纯文字,图片类型=绝对路径 |
|
|
|
}, |
|
|
|
|
|
|
|
lastItemId: null, |
|
|
|
//更多选项相关 |
|
|
|
moreShow:false, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
@ -137,16 +188,10 @@ export default { |
|
|
|
//获取聊天记录列表 |
|
|
|
await this.getList(); |
|
|
|
|
|
|
|
// 更新最后一个 item 的 ID |
|
|
|
this.lastItemId = 'item_' + (this.tableList.length - 1); |
|
|
|
|
|
|
|
// 滚动到底部 |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.scrollView.scrollTo({ top: this.scrollViewHeight }); |
|
|
|
}); |
|
|
|
|
|
|
|
// 或者直接使用 scroll-into-view |
|
|
|
this.scrollIntoView = this.lastItemId; |
|
|
|
// 首次加载后滚动到底部 |
|
|
|
if (this.filteredData.page == 2) { |
|
|
|
this.scrollToBottom() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//获取好友关系详情 |
|
|
|
@ -265,6 +310,12 @@ export default { |
|
|
|
// console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr) |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//发送文本信息 |
|
|
|
submitTextForm(){ |
|
|
|
this.formData.message_type = 'text' |
|
|
|
this.submitForm() |
|
|
|
}, |
|
|
|
//发送站内信 |
|
|
|
async submitForm() { |
|
|
|
let data = {...this.formData} |
|
|
|
@ -285,24 +336,60 @@ export default { |
|
|
|
} 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": "" |
|
|
|
id:'', |
|
|
|
from_type:data.from_type,//发送者类型|personnel=员工,customer=学生(客户) |
|
|
|
from_id:data.from_id,//发送者ID |
|
|
|
to_id:data.to_id,//接收者ID |
|
|
|
friend_id:data.friend_id,//关联chat_friends表id |
|
|
|
message_type: data.message_type,//消息类型|text=文本,img=图片 |
|
|
|
content: data.content,//文本内容（JSON 格式扩展字段）,文本类型=纯文字,图片类型=绝对路径 |
|
|
|
direction:'right' |
|
|
|
} |
|
|
|
//将发送的消息放在最下方 |
|
|
|
this.tableList = this.tableList.concat(msgData); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//页面滚动到底部 |
|
|
|
scrollToBottom() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.scrollTop = 999999 // 足够大的值确保滚动到底部 |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//打开更多选择弹窗 |
|
|
|
openMore(){ |
|
|
|
this.moreShow = true |
|
|
|
}, |
|
|
|
//关闭更多选择弹窗 |
|
|
|
closeMore(){ |
|
|
|
this.moreShow = false |
|
|
|
}, |
|
|
|
|
|
|
|
//但文件上传回调 |
|
|
|
uplodeImageRes(resData,extraData){ |
|
|
|
console.log('上传成功回调',resData,extraData) |
|
|
|
//判断是不是上传相册图片 |
|
|
|
if(extraData.input_name == 'img_uplode'){ |
|
|
|
this.closeMore()//关闭更多选择弹窗 |
|
|
|
this.formData.content = resData.url |
|
|
|
this.formData.message_type = 'img' |
|
|
|
this.submitForm() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//图片预览 |
|
|
|
previewImage(url){ |
|
|
|
uni.previewImage({ |
|
|
|
current: url, // 当前图片地址 |
|
|
|
urls: [url] // 所有图片列表（可以是多个） |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -330,8 +417,8 @@ export default { |
|
|
|
min-height: 100vh; |
|
|
|
background: #292929 100%; |
|
|
|
padding: 0 0rpx; |
|
|
|
padding-top: 32rpx; |
|
|
|
padding-bottom: 150rpx; |
|
|
|
padding-top: 120rpx; |
|
|
|
padding-bottom: 120rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -366,13 +453,20 @@ export default { |
|
|
|
word-wrap: break-word; /* 允许长单词或 URL 换行 */ |
|
|
|
word-break: break-all; /* 强制所有字符换行 */ |
|
|
|
.text_box{} |
|
|
|
.img_box { |
|
|
|
.chat_img { |
|
|
|
width: 200rpx; |
|
|
|
height: 200rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.left_item{ |
|
|
|
background-color: #f4f6f9; |
|
|
|
//background-color: #f4f6f9; |
|
|
|
color: #343434; |
|
|
|
} |
|
|
|
.right_item{ |
|
|
|
background-color: #1684fc; |
|
|
|
//background-color: #1684fc; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -387,12 +481,13 @@ export default { |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
padding: 50rpx 50rpx; |
|
|
|
padding: 30rpx; |
|
|
|
padding-bottom: 50rpx; |
|
|
|
display: flex; |
|
|
|
justify-content:space-between; |
|
|
|
align-items: center; |
|
|
|
gap: 20rpx; |
|
|
|
.left_box{ |
|
|
|
width: 70%; |
|
|
|
.input{ |
|
|
|
background-color: #f4f6f9; |
|
|
|
height: 88rpx; |
|
|
|
@ -400,22 +495,28 @@ export default { |
|
|
|
font-size: 28rpx; |
|
|
|
border-radius: 32rpx; |
|
|
|
|
|
|
|
width: 532rpx; |
|
|
|
width: 480rpx; |
|
|
|
color: #292929; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.right_box{ |
|
|
|
border-radius: 50%; |
|
|
|
background-color: #a2cefe; |
|
|
|
width: 88rpx; |
|
|
|
height: 88rpx; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
.send_img{ |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
.img_box{ |
|
|
|
width: 88rpx; |
|
|
|
height: 88rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: #a2cefe; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
.send_img{ |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -425,4 +526,44 @@ export default { |
|
|
|
color: #999999; |
|
|
|
padding-left: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 更多选项相关 自定义内容区样式需自行控制 */ |
|
|
|
.more_section{ |
|
|
|
.fui-scroll__wrap { |
|
|
|
padding-top: 30rpx; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.fui-title { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: bold; |
|
|
|
text-align: center; |
|
|
|
padding-bottom: 24rpx; |
|
|
|
} |
|
|
|
.fui-icon__close { |
|
|
|
position: absolute; |
|
|
|
top: 24rpx; |
|
|
|
left: 24rpx; |
|
|
|
} |
|
|
|
.fui-scroll__view { |
|
|
|
width: 100%; |
|
|
|
height: 350rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.ul{ |
|
|
|
padding: 10rpx 40rpx; |
|
|
|
display: flex; |
|
|
|
.li{ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
.icon_box{ |
|
|
|
} |
|
|
|
.title{ |
|
|
|
font-size: 28rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
