<template>
<view class="chat">
<!-- <u-navbar :title="name" :placeholder='true' @leftClick="goback">
</u-navbar> -->
<!-- 顶部标题 -->
<view class="topTabbar">
<!-- 返回图标 -->
<u-icon class="icon" name="arrow-left" size="20px" color="#000" @click="goback()"></u-icon>
<!-- 标题 -->
<view class="text">匿名</view>
</view>
<view @tap="toDetail()" v-if='goodsInfo' class="goods_info">
<view class="goods_title">
<img class="goods_img" alt="" :src='goodsInfo.images'>
<view>
<view>{{goodsInfo.title}}</view>
<view class="price">￥{{goodsInfo.price}}</view>
<view style="font-size: 15px">
{{goodsInfo.freight_money}}
</view>
</view>
</view>
<view @tap.stop="toPublishFish(goodsInfo.id)" class="buy">立即购买</view>
</view>
<scroll-view :style="{height: `${windowHeight-inputHeight - j_weight}rpx`}" id="scrollview" scroll-y="true"
:scroll-top="scrollTop" @scrolltoupper="onScroll" class="scroll-view">
<!-- 聊天主体 -->
<view id="msglistview" class="chat-body">
<!-- 聊天记录 -->
<view v-for="(item,index) in chatList" :key="index">
<!-- 右侧消息 -->
<view v-if='item.send_user_id==userId'>
<view class="chat_time" v-if='item.isShowTime'>{{item.createtime}}</view>
<view class="item self">
<!-- 文字内容 -->
<view v-if='item.msg_type==1' class="content right">
{{item.content}}
</view>
<view v-if='item.msg_type==2' class="chat_img">
<img class="chat_img_1" @click="previewImg(item.content)" :src="item.content">
</view>
<!-- 头像 -->
<view>
<image class="avatar" :src="item.send_avatar">
</image>
<view class="chat_time">{{item.is_read_text}}</view>
</view>
</view>
</view>
<!-- 左侧消息 -->
<view v-else>
<view class="chat_time" v-if='item.isShowTime' >{{item.createtime}}</view>
<view class="item Ai">
<!-- 头像 -->
<view>
<image class="avatar" :src="item.send_avatar">
</image>
<!-- <view class="chat_time">{{item.createtime}}</view> -->
</view>
<!-- 文字内容 -->
<view v-if='item.msg_type==1' class="content left">
{{item.content}}
</view>
<view v-if='item.msg_type==2' class="chat_img">
<img class="chat_img_1" @click="previewImg(item.content)" :src="item.content">
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 底部消息发送栏 -->
<!-- 用来占位，防止聊天消息被发送框遮挡 -->
<view class="chat-bottom" :style="{height: `${inputHeight}rpx`}">
<view class="send-msg" :style="{bottom:`${keyboardHeight - 60}rpx`}">
<view class="uni-textarea">
<textarea v-model="chatMsg" maxlength="300" confirm-type="send" @confirm="handleSend"
placeholder="快来咨询吧~" :show-confirm-bar="false" :adjust-position="false" auto-height></textarea>
</view>
<button @click="handleSend" class="send-btn">发送</button>
<view class="send-btn" style="background: #fff;">
<u-icon @click="editShow=true" size="30" name="plus-circle"></u-icon>
</view>
</view>
</view>
<!-- //扩展应用功能位置 -->
<view v-if="editShow" style="position: fixed;bottom: 0;width: 100%;padding-left: 3%;display: flex;background: #fff;padding-top: 8px;
justify-content: space-between;align-items: center;padding-bottom: 18px;">
<view style="padding: 12px;display: flex;" class="tabs-wrap">
<view class="tabs-item" style="text-align: center" @click="sendFile('choose','')">
<view style="display: flex;justify-content: center;background: #efefef; padding: 15px;
border-radius: 20px;">
<u-icon size="36" name="photo-fill"></u-icon>
</view>
<view style="font-size: 14px;">图片</view>
</view>
<view class="tabs-item" style="text-align: center;margin-left: 10px;" @click="sendFile('shoot','')">
<view style="display: flex;justify-content: center;background: #efefef; padding: 15px;
border-radius: 20px;">
<u-icon size="36" name="photo-fill"></u-icon>
</view>
<view style="font-size: 14px;">拍摄</view>
</view>
</view>
<view @click="editShow=false" style="position: absolute;top: 12px;right: 16px">
<u-icon name="close-circle" size="30"></u-icon>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
editShow: false,
//键盘高度
keyboardHeight: 0,
//底部消息发送高度
bottomHeight: 0,
//滚动距离
scrollTop: 0,
chatList: [],
sessionId: '', //会话id
userId: uni.getStorageSync('userinfo').id,
goodsInfo: '',
page: 1,
meet_user_id: 0,
msg_type: 1,
//发送的消息
chatMsg: "",
name: '匿名用户',
is_top: true, //是否可以再次请求分页数据
is_update: true, //是否做刷新固定底部
j_weight: 300,
}
},
updated() {
//页面更新时调用聊天消息定位到最底部
if (this.is_update) {
this.scrollToBottom();
}
},
computed: {
windowHeight() {
return this.rpxTopx(uni.getSystemInfoSync().windowHeight)
},
// 键盘弹起来的高度+发送框高度
inputHeight() {
return this.bottomHeight + this.keyboardHeight
}
},
onLoad(options) {
uni.onKeyboardHeightChange(res => {
this.keyboardHeight = this.rpxTopx(res.height)
if (this.keyboardHeight < 0) this.keyboardHeight = 0;
})
if (options.sid) {
this.sessionId = options.sid
this.getChatList()
}
//从商品页进来
if (options.info) {
this.j_weight = 460;
var objStr = decodeURIComponent(options.info);
var obj = JSON.parse(objStr);
switch (obj.freight_status) {
case 2:
obj.freight_money = '包邮'
break;
case 3:
obj.freight_money = '自提'
break;
default:
obj.freight_money = '运费 ' + obj.freight_money
break;
}
this.goodsInfo = obj
this.getAddChat()
}
this.OnGetMessage()
this.scrollToBottom();
},
onUnload() {
// uni.offKeyboardHeightChange()
// 移除监听事件
uni.$off('getChatList');
uni.$off('getChatSend');
uni.$off('getAddChat');
},
methods: {
//查看商品详情
toDetail() {
//跳商品详情
},
//点击购买
toPublishFish(id) {
//点击购买
},
//建立聊天室
getAddChat() {
let that = this;
var data = {
"send_user_id": that.userId,//当前登录人id
"user_id": that.meet_user_id,//接收人id
"msg_type": 1,
"content": "",
"method": "add_chat"
}
//创建聊天室
that.$ws.send(JSON.stringify(data));
},
//拉取聊天室最新列表
getChatList() {
let that = this;
let page = that.page
let data = {
"user_id": that.userId,//当前登录人id
'chat_id': that.sessionId,//聊天室id
'page': that.page,
"method": "chat_list",
}
//请求消息列表
that.$ws.send(JSON.stringify(data));
},
//触顶加载聊天消息
onScroll(e) {
var that = this
if (that.is_top) {
that.page++;
that.is_update = false
that.getChatList()
}
},
//放大图片
previewImg(imgurl) {
uni.previewImage({
current: imgurl,
urls: [imgurl]
});
},
goback() {
//返回上一页
},
focus() {
this.scrollToBottom()
},
blur() {
this.scrollToBottom()
},
// px转换成rpx
rpxTopx(px) {
let deviceWidth = uni.getSystemInfoSync().windowWidth
let rpx = (750 / deviceWidth) * Number(px)
return Math.floor(rpx)
},
// 监视聊天发送栏高度
sendHeight() {
setTimeout(() => {
let query = uni.createSelectorQuery();
query.select('.send-msg').boundingClientRect()
query.exec(res => {
this.bottomHeight = this.rpxTopx(res[0].height)
})
}, 10)
},
// 滚动至聊天底部
scrollToBottom(e) {
setTimeout(() => {
let query = uni.createSelectorQuery().in(this);
query.select('#scrollview').boundingClientRect();
query.select('#msglistview').boundingClientRect();
query.exec((res) => {
if (res[1].height > res[0].height) {
this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
}
})
}, 15)
},
// 发送消息
handleSend() {
let that = this;
that.is_update = true
//如果消息不为空
if (!this.chatMsg || !/^\s+$/.test(this.chatMsg)) {
//聊天内容
var chatMsg = that.chatMsg
if (chatMsg.trim() == '') {
return uni.showToast({
title: '请输入聊天内容',
icon: 'error'
})
}
let data = {
'send_user_id': that.userId,
'user_id': that.meet_user_id,
'chat_id': that.sessionId,
'msg_type': that.msg_type,
'content': chatMsg,
"method": "send",
}
//发送聊天内容
that.$ws.send(JSON.stringify(data));
that.chatMsg = '';
that.scrollToBottom()
} else {
uni.showToast({
title: '不能发送空白消息哦'
})
}
},
//监听接收消息
OnGetMessage() {
var that = this
uni.showLoading()
uni.$on('getChatList', data => {
if (that.page == 1) {
that.chatList = data
} else {
if (data.length > 0) {
data.forEach(function(item, index) {
that.chatList.unshift(item);
});
} else {
that.is_top = false
}
}
uni.hideLoading()
})
uni.$on('getChatSend', data => {
that.chatList.push(data)
uni.hideLoading()
})
uni.$on('getAddChat', data => {
that.sessionId = data
that.getChatList()
uni.hideLoading()
})
},
//发送文件
sendFile(type, data) {
var that = this;
if (type == "choose") {
uni.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album'],
maxDuration: 30,
success(res) {
let type = 'img';
if (res.tempFiles[0].fileType == 'image') {
type = 'img'
} else {
type = 'video'
}
that.uploadFile(res.tempFiles[0].tempFilePath, type)
}
})
} else if (type == "shoot") {
uni.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['camera'],
maxDuration: 30,
success(res) {
let type = 'img';
if (res.tempFiles[0].fileType == 'image') {
type = 'img'
} else {
type = 'video'
}
that.uploadFile(res.tempFiles[0].tempFilePath, type)
}
})
}
},
uploadFile(path, type) {
var that = this;
uni.uploadFile({
url: ‘’图片上传地址’ // 仅为示例，非真实的接口地址
filePath: path,
name: 'file',
formData: {},
header: {
token: uni.getStorageSync('token')
},
success: (res) => {
let data = JSON.parse(res.data);
that.handleSendImg(data.data.url)
}
});
},
// 发送图片消息
handleSendImg(urlImg) {
let that = this;
that.is_update = true
//聊天内容
var chatMsg = urlImg
let data = {
'send_user_id': that.userId,
'user_id': that.meet_user_id,
'chat_id': that.sessionId,
'msg_type': 2,
'content': chatMsg,
"method": "send",
}
//发送聊天内容
that.$ws.send(JSON.stringify(data));
that.editShow = false
that.scrollToBottom()
},
},
}
</script>
<style lang="scss" scoped>
$chatContentbgc: #C2DCFF;
$sendBtnbgc: #4F7DF5;
view,
button,
text,
input,
textarea {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 聊天消息 */
.chat {
.topTabbar {
width: 100%;
height: 90rpx;
line-height: 90rpx;
display: flex;
margin-top: 80rpx;
justify-content: space-between;
.icon {
margin-left: 20rpx;
}
.text {
margin: auto;
font-size: 16px;
font-weight: 700;
}
.button {
width: 10%;
margin: auto 20rpx auto 0rpx;
}
}
.scroll-view {
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
// background-color: orange;
background-color: #F6F6F6;
.chat-body {
display: flex;
flex-direction: column;
padding-top: 23rpx;
// background-color:skyblue;
.self {
justify-content: flex-end;
}
.item {
display: flex;
padding: 23rpx 30rpx;
// background-color: greenyellow;
.right {
background-color: $chatContentbgc;
}
.left {
background-color: #FFFFFF;
}
// 聊天消息的三角形
.right::after {
position: absolute;
display: inline-block;
content: '';
width: 0;
height: 0;
left: 100%;
top: 10px;
border: 12rpx solid transparent;
border-left: 12rpx solid $chatContentbgc;
}
.left::after {
position: absolute;
display: inline-block;
content: '';
width: 0;
height: 0;
top: 10px;
right: 100%;
border: 12rpx solid transparent;
border-right: 12rpx solid #FFFFFF;
}
.content {
position: relative;
max-width: 486rpx;
border-radius: 8rpx;
word-wrap: break-word;
padding: 24rpx 24rpx;
margin: 0 24rpx;
border-radius: 5px;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
.avatar {
display: flex;
justify-content: center;
width: 78rpx;
height: 78rpx;
background: $sendBtnbgc;
border-radius: 50rpx;
overflow: hidden;
image {
align-self: center;
}
}
}
}
}
/* 底部聊天发送栏 */
.chat-bottom {
width: 100%;
height: 100rpx;
background: #F4F5F7;
transition: all 0.1s ease;
.send-msg {
display: flex;
align-items: flex-end;
padding: 16rpx 30rpx;
width: 100%;
min-height: 177rpx;
position: fixed;
bottom: 0;
background: #fff;
transition: all 0.1s ease;
}
.uni-textarea {
padding-bottom: 70rpx;
textarea {
width: 450rpx;
min-height: 75rpx;
max-height: 500rpx;
background: #f1f1f1;
border-radius: 40rpx;
font-size: 32rpx;
font-family: PingFang SC;
color: #333333;
line-height: 74rpx;
padding: 5rpx 8rpx;
text-indent: 30rpx;
}
}
.send-btn {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 76rpx;
margin-left: 25rpx;
width: 120rpx;
height: 75rpx;
background: #ed5a65;
border-radius: 15rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 28rpx;
}
}
}
.chat_time {
font-size: 20rpx;
text-align: center;
color: darkgray;
}
.chat_img {
display: flex;
align-items: center;
margin: 8px 16px 8px 8px;
max-width: 150px;
}
.chat_img_1 {
border-radius: 12px;
max-height: 150px;
}
//商品弹窗
.goods_info {
background: #ffffff;
border-bottom: 1px solid #efefef;
padding: 10px;
align-items: flex-end;
display: flex;
justify-content: space-between
}
.buy {
background: #ff592a;
border-radius: 15px;
padding: 6px 12px;
color: #fff;
font-size: 14px;
height: 30px;
}
.price {
color: red;
font-weight: 600;
font-size: 14px
}
.goods_title {
display: flex;
align-items: center;
}
.goods_img {
width: 55px;
height: 55px;
border-radius: 8px;
margin-right: 8px;
}
</style>
03-01
6339
6339
05-12
1900
1900
08-10
09-11
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
