uinapp 写好的聊天基础页面，拿来就用非常方便

<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: '', //会话iduserId: 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.sidthis.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_moneybreak;}this.goodsInfo = objthis.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.pagelet 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 = thisif (that.is_top) {that.page++;that.is_update = falsethat.getChatList()}},//放大图片previewImg(imgurl) {uni.previewImage({current: imgurl,urls: [imgurl]});},goback() {//返回上一页},focus() {this.scrollToBottom()},blur() {this.scrollToBottom()},// px转换成rpxrpxTopx(px) {let deviceWidth = uni.getSystemInfoSync().windowWidthlet 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.chatMsgif (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 = thisuni.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 = datathat.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 = urlImglet 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 = falsethat.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>