建设项目安监备案网站,Divi WordPress企业建站主题,建站公司学习,顺义做网站的公司比这之前优化了以下功能
上线通知
群聊里适时显示在线人数
约请好友 通过好友通过socket 相应端自动变化
PC端可以拉取摄象头拍照
PC端可以录音发送
拉起摄象头发送录象 templateview classscroll-view scroll-ytrue classtemplateview classscroll-view scroll-ytrue classscroll-box:style{ height: ${windowObj.windowHeight - windowObj.statusBarHeight - 94}px }:scroll-topscrollHeight scrolltoupperloadMoresview classgroup-box在线{{userList.length}}人text classgroup-member v-for(item, index) in userList :keyindex{{item}} /text/viewview classscroll-viewview classnews-box v-for(item, index) in list :keyindexview classmessage-type v-if[left, join, kick].includes(item.type){{ item.content }} {{(formatDate(Date()))}}/viewimage classavatar :class[item.isMe ? is-me : avatar-right] :srcitem.avatarmodeaspectFill v-if![kick, join, left].includes(item.type) tapkickopen(item)/imageview classmessage-box :class{ is-me: item.isMe }v-if![kick, join, left].includes(item.type)text classmessage v-ifitem.type textimage src../../static/withdraw.pngstylewidth: 40rpx; height: 40rpx;position:relative;right:16rpx;bottom:1rpx;modeaspectFill v-ifitem.isMe canwithdraw(item) item.withdraw 0tapwithdraw(item)/imagetext :selectabletrue tapcopyBtnClick(item.content) {{formatMessage(item.content || )}}/text/texttext classmessage_img v-if[image, video, audio].includes(item.type)template v-ifitem.type imageimage classmessage-image :srcitem.content modeaspectFillclickpreviewImage(item.content) //templatetemplate v-ifitem.type videovideo v-ifitem.content :srcitem.content controls/video/templatetemplate v-ifitem.type audioaudio v-ifitem.content :srcitem.content controls /audio/templateimage src../../static/withdraw.png stylewidth: 50rpx; height: 50rpx modeaspectFillv-ifitem.isMe canwithdraw(item) item.withdraw 0 clickwithdraw(item)/image/text/view/view/view/scroll-viewview classbase-btn :class{ base-btn-popup-open: isPopupOpen || isPopupAudioOpen }view classbase-con unify-flexview tapmoreimage src../../static/chat/more.png stylewidth: 50rpx; height: 50rpx/image/viewinput classinput-text typetext :valueinputValue placeholder说些什么吧 inputgetInputconfirmtapTo(2) /view clicktapTo(2)image src../../static/chat/chat.png stylewidth: 50rpx; height: 50rpx/image/view/view/viewuni-popup refpopup typebottom :style{ height: 200rpx } changeonPopupChangeview classpopup-content:style{ width: 100%, backgroundColor: #fff, height: 200rpx, overflowY: scroll }view classpopup-itemsview classpopup-item v-iftype group tapadduserTogroupimage src../../static/chat/add.png stylewidth: 50rpx; height: 50rpx/imagetext添加/text/viewview classpopup-item clickchooseFileimage src../../static/chat/pic.png stylewidth: 50rpx; height: 50rpx/imagetext图片/text/viewview classpopup-item tapaudioimage src../../static/chat/audio.png stylewidth: 50rpx; height: 50rpx/imagetext音频/text/viewview classpopup-item tapopenCameraimage src../../static/chat/video.png stylewidth: 50rpx; height: 50rpx/imagetext视频/text/viewview classpopup-item tapgroupdetailimage src../../static/chat/detail.png stylewidth: 50rpx; height: 50rpx/imagetext详情/text/viewview classpopup-item v-iftype group tapquitgroupimage src../../static/chat/exit-group.png stylewidth: 50rpx; height: 50rpx/imagetext退群/text/view/view/view/uni-popupuni-popup refpopupAudio typebottom :style{ height: 200rpx } changeonPopupAudioChangeview classpopup-content:style{ width: 100%, backgroundColor: #fff, height: 200rpx, overflowY: scroll }view classpopup-item clickstartRecordingimage src../../static/chat/beginaudio.png stylewidth: 50rpx; height: 50rpx/imagetext录音/text/viewview classpopup-item clickstopRecordingimage src../../static/chat/send.png stylewidth: 50rpx; height: 50rpx/imagetext发送录音/text/view!-- view classpopup-item tapplayRecordingimage src../../static/chat/play.png stylewidth: 50rpx; height: 50rpx/imagetext播放/text/view --!-- view classpopup-item tapupsongimage src../../static/chat/send.png stylewidth: 50rpx; height: 50rpx/imagetext发送/text/view --view classpopup-item tapexitchatimage src../../static/chat/exit.png stylewidth: 50rpx; height: 50rpx/imagetext退出/text/view/view/uni-popupuni-popup refpopupkick typebottom :style{ height: 200rpx } changeonPopupAudioChangeview classpopup-content:style{ width: 100%, backgroundColor: #fff, height: 200rpx, overflowY: scroll }view classpopup-item clickkick(kick)image src../../static/chat/kickp.png stylewidth: 50rpx; height: 50rpx/imagetext踢人/text/viewview classpopup-item clickkick(black)image src../../static/chat/black.png stylewidth: 50rpx; height: 50rpx/imagetext拉黑/text/viewview classpopup-item tapdetailimage src../../static/chat/detail.png stylewidth: 50rpx; height: 50rpx/imagetext详情/text/view/view/uni-popup/view
/template
scriptimport io from socket.io-client;import config from /config/config.js;import {mapState,mapActions} from vuex;import {v4 as uuidv4} from uuid;import {getCurrentDateTime} from /common/dateFormatter.jsimport { handleClipboard } from /common/clipboardone.js;export default {data() {return {name: ,inputValue: ,list: [],image: ,scrollHeight: 0,userList: ,type: ,socket: null,messages: [],groupName: ,tid: ,toid: 0,receiver_type: ,isPopupOpen: false,isPopupAudioOpen: false,selectedFilePath: ,group_owner_id: 0, //群主idfid: ,to_id: 0,recordingPath: , // 用于存储录音文件的路径isRecording: false,mediaRecorder: null,audioChunks: []};},computed: {...mapState([user]),windowObj() {let obj;uni.getSystemInfo({success: (res) {obj res;}});return obj;}},watch: {isPopupOpen(newValue) {if (!newValue) {this.$refs.popup.close();}},isPopupAudioOpen(newValue) {if (!newValue) {this.$refs.popupAudio.close();}}},async onLoad(q) {let _ this;try {if (q q.id ! undefined) {this.groupName q.id;this.tid q.tid;this.to_id q.to_idthis.receiver_type q.type;this.type this.receiver_typeuni.setNavigationBarTitle({title: q.type group ? [群聊] q.to_name: [私聊] q.to_name});if (q.type group) {//将q.id的前面g_去掉let newid q.id.replace(g_, )//获到了当前群的群主idlet re await _.getGroupOwner(newid)this.group_owner_id re.data.data.owner_id}let re await _.checkFriend(q.id);if (re true) {_.joinGroup(this.groupName);} else {uni.navigateTo({url: /pages/index/friends});}} else {uni.navigateTo({url: /pages/index/friends});}} catch (e) {uni.navigateTo({url: /pages/index/friends});}},onUnload() {this.socket.close();},onShow() {this.fetchUser();},mounted() {this.initChatLog();this.socket io(config.apiBaseUrl);this.socket.on(connect, () {console.log(Socket connected:, this.socket.id);});this.socket.on(disconnect, () {console.log(Socket disconnected);});let heartbeatInterval;let reconnectAttempts 0;const maxReconnectAttempts 10;const startHeartbeat () {heartbeatInterval setInterval(() {if (this.socket.connected) {this.socket.emit(heartbeat);console.log(heartbeat)} else {reconnectSocket();}}, 120000); // 1分钟};const reconnectSocket () {if (reconnectAttempts maxReconnectAttempts) {this.socket.connect();reconnectAttempts;} else {clearInterval(heartbeatInterval);uni.showModal({title: 连接失败,content: 无法连接到服务器是否手动重新连接,confirmText: 重新连接,cancelText: 取消,success: (res) {if (res.confirm) {reconnectAttempts 0;this.socket.connect();startHeartbeat();}}});}};startHeartbeat();this.socket.on(reconnect, () {console.log(Socket重新连接成功);reconnectAttempts 0;});this.socket.on(message, (msg) {if (msg.type broadcast) {return;}if (msg.type widthdraw) {//查出 msg.sn 将此记录信息改为撤回//console.log(msg);this.list.forEach((item, index) {if (item.sn msg.content) {this.list[index].content [消息已撤回];this.list[index].type text;this.list[index].withdraw 1;this.widthdrawRow(item.sn)}});return;}let msgs {sn: msg.sn,name: msg.user_name,avatar: msg.avatar,isMe: msg.fid this.user.id ? true : false,content: msg.content,type: msg.type,sn: msg.sn,createat: Math.floor(Date.now() / 1000),time: Date.now(),withdraw: 0,toid: msg.fid};this.list.push(msgs);this.setScrollTop();});// 监听 userList 事件this.socket.on(userList, (users) {this.userList users; // 更新 userList 变量console.log(- 当前群用户 -)console.log(this.userList)});},methods: {...mapActions([fetchUser, logout, fetchGroups]),formatDate() {return getCurrentDateTime();},kickopen(item) {this.name item.namethis.toid item.toidif (!item.isMe) {this.$refs.popupkick.open()}},getGroupOwner(id) {//接口 group 提交id 获取到群的信息const token uni.getStorageSync(token);return new Promise((resolve, reject) {uni.request({url: ${config.apiBaseUrl}/group,method: GET,header: {Authorization: Bearer ${token}},data: {id: id},success: (res) {resolve(res)},fail: (err) {reject(err)}});})},async widthdrawRow(sn) {const token uni.getStorageSync(token);if (!token) return;try {const [error, response] await uni.request({url: ${config.apiBaseUrl}/withdraw,method: GET,header: {Authorization: Bearer ${token}},data: {sn: sn}});if (error) {throw new Error(Request failed with error: ${error});}if (response.data.code 0) {return true;} else {return false;}} catch (error) {return false;}},adduserTogroup() {this.isPopupOpenfalseuni.navigateTo({url: /pages/index/addfriend?groupId this.tid});},kick(type) {//将用户踢出去if (this.group_owner_id ! this.fid) {//这样才能踢 if (type kick) {this.kickUser(this.name)} else {//拉黑this.kickUser(this.name, black)//再拉黑}} else {uni.showToast({title: 不能对自己操作})}},detail() {uni.navigateTo({url: /pages/index/about?id this.to_id});},groupdetail() {let groupid this.groupName.replace(g_, )if (this.type group) {uni.navigateTo({url: /pages/index/groupdetail?id groupid});} else {uni.navigateTo({url: /pages/index/about?id this.to_id});}},async quitgroup() {console.log(this.group_owner_id)console.log(this.user.id)if (this.group_owner_id this.user.id) {//主人不能退群uni.showToast({title: 主人不能退群})return}let groupid this.groupName.replace(g_, )//调用接口退出 接口名为leavgroup const token uni.getStorageSync(token);if (!token) return;try {const [error, response] await uni.request({url: ${config.apiBaseUrl}/leavgroup,method: GET,header: {Authorization: Bearer ${token}},data: {groupid}});if (error) {throw new Error(Request failed with error: ${error});}console.log(response)if (response.data.code 0) {uni.navigateTo({url: /pages/index/friends})return true;} else {return false;}} catch (error) {return false;}},onPopupChange() {if (this.isPopupOpen true) {this.isPopupOpen false;}},playVoice(url) {// 创建音频对象const audio new Audio(url);// 播放音频audio.play().then(() {console.log(音频开始播放);}).catch((error) {console.error(音频播放失败:, error);});// 监听音频播放结束事件audio.onended () {console.log(音频播放结束);};},onPopupAudioChange() {if (this.isPopupOpen true) {this.isPopupOpen false;}this.recordingPath ;},audio() {this.$refs.popup.close();this.$refs.popupAudio.open();this.isPopupOpen true;},exitchat() {this.$refs.popupAudio.close();},async startRecording() {try {if(this.isRecording){uni.showToast({title: 正在录音中,icon: none,duration: 2000});return;}const stream await navigator.mediaDevices.getUserMedia({ audio: true });this.mediaRecorder new MediaRecorder(stream);//console.log(this.mediaRecorder);this.mediaRecorder.ondataavailable (event) {this.audioChunks.push(event.data);};this.mediaRecorder.onstop async () {const audioBlob new Blob(this.audioChunks, { type: audio/wav });const url URL.createObjectURL(audioBlob);this.selectedFilePath url;// 创建一个提示框const confirmResult await new Promise((resolve) {uni.showModal({title: 录音完成,content: 是否上传录音,confirmText: 上传,cancelText: 取消,success: (res) {resolve(true);}});});// 如果用户选择取消则不继续处理if (!confirmResult) {this.audioChunks [];this.isRecording false;return;}else{this.uploadAvatar(audio);}this.isPopupOpenfalse;this.isRecordingfalse;// 清理本地声音stream.getTracks().forEach(track track.stop());URL.revokeObjectURL(url);};this.mediaRecorder.start();this.isRecording true;} catch (error) {console.error(获取麦克风权限失败, error);}},async stopRecording() {//console.log(停止录音)if (this.mediaRecorder) {this.mediaRecorder.stop();this.isRecording false;this.popupAudiofalse;}else{uni.showToast({title: 没有录音,icon: none});}},uploadAudio(audioBlob) {const formData new FormData();formData.append(audio, audioBlob, recorded_audio.wav);console.log(URL.createObjectURL(audioBlob))const token uni.getStorageSync(token);uni.uploadFile({url: ${config.apiBaseUrl}/upload,filePath: URL.createObjectURL(audioBlob),name: avatar,header: {Authorization: Bearer ${token}},// formData: formData,success: (uploadFileRes) {const response JSON.parse(uploadFileRes.data);if (response.code 0) {const avatarUrl response.data;this.sendMessage(avatarUrl, audio);}},fail: (err) {//console.error(上传失败, err);console.error(Failed to upload avatar:, error);uni.showToast({title: 上传失败,icon: none});}});},playRecording() {if (this.recordingPath) {const innerAudioContext uni.createInnerAudioContext();innerAudioContext.src this.recordingPath;innerAudioContext.onPlay(() {console.log(开始播放录音);});innerAudioContext.onError((res) {console.error(播放录音失败:, res);});innerAudioContext.play();} else {uni.showToast({title: 没有可播放的录音,icon: none});}},upsong() {const token uni.getStorageSync(token);uni.uploadFile({url: ${config.apiBaseUrl}/upload,filePath: this.selectedFilePath,name: avatar,header: {Authorization: Bearer ${token}},success: async (uploadFileRes) {const response JSON.parse(uploadFileRes.data);if (response.code 0) {const avatarUrl response.data;this.sendMessage(avatarUrl, type);}},fail: (error) {console.error(Failed to upload avatar:, error);uni.showToast({title: 上传失败,icon: none});}}); },more() {this.$refs.popup.open();this.isPopupOpen true;},openCamera() {if (navigator.mediaDevices navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) {// 创建视频元素const video document.createElement(video);video.srcObject stream;video.autoplay true;// 创建容器const container document.createElement(div);container.style.position fixed;container.style.top 0;container.style.left 0;container.style.width 100%;container.style.height 100%;container.style.backgroundColor rgba(0,0,0,0.8);container.style.zIndex 9999;container.appendChild(video);document.body.appendChild(container);// 创建录制器const mediaRecorder new MediaRecorder(stream);let chunks [];mediaRecorder.ondataavailable (e) {chunks.push(e.data);};mediaRecorder.onstop () {const blob new Blob(chunks, { type: video/webm });chunks [];const videoUrl URL.createObjectURL(blob);this.selectedFilePath videoUrl;this.uploadAvatar(video);};// 开始录制mediaRecorder.start();// 添加上传按钮const uploadButton document.createElement(button);uploadButton.textContent 停止录制并上传;uploadButton.style.position absolute;uploadButton.style.bottom 10px;uploadButton.style.left 50%;uploadButton.style.transform translateX(-50%);uploadButton.onclick () {mediaRecorder.stop();stream.getTracks().forEach(track track.stop());document.body.removeChild(container);};container.appendChild(uploadButton);}).catch((error) {console.error(无法访问摄像头:, error);uni.showToast({title: 无法访问摄像头,icon: none});});} else {uni.showToast({title: 您的设备不支持摄像头,icon: none});}// if (navigator.mediaDevices navigator.mediaDevices.getUserMedia) {// navigator.mediaDevices.getUserMedia({ video: true })// .then((stream) {// // 创建一个 video 元素来显示摄像头画面// const video document.createElement(video);// video.srcObject stream;// video.autoplay true;// // 创建一个容器来放置 video 元素// const container document.createElement(div);// container.style.position fixed;// container.style.top 0;// container.style.left 0;// container.style.width 100%;// container.style.height 100%;// container.style.backgroundColor rgba(0,0,0,0.8);// container.style.zIndex 9999;// container.appendChild(video);// document.body.appendChild(container);// // 创建一个 canvas 元素用于捕获视频帧// const canvas document.createElement(canvas);// // 添加一个按钮来关闭摄像头并上传图片// const closeButton document.createElement(button);// closeButton.textContent 拍照并上传;// closeButton.style.position absolute;// closeButton.style.bottom 10px;// closeButton.style.left 50%;// closeButton.style.transform translateX(-50%);// closeButton.onclick () {// // 捕获当前视频帧// canvas.width video.videoWidth;// canvas.height video.videoHeight;// canvas.getContext(2d).drawImage(video, 0, 0, canvas.width, canvas.height);// // 将 canvas 转换为 Blob// canvas.toBlob((blob) {// // 停止所有视频轨道// stream.getTracks().forEach(track track.stop());// // 移除容器// document.body.removeChild(container);// // 创建一个临时的 URL// const imageUrl URL.createObjectURL(blob);// // 将Blob转换为File对象并设置.mp4后缀// //const file new File([blob], captured_video.mp4, { type: video/mp4 });// // 创建新的临时URL// // 设置 selectedFilePath 并调用 uploadAvatar// this.selectedFilePath imageUrl;// this.uploadAvatar(video);// // 清理临时 URL// URL.revokeObjectURL(imageUrl);// }, image/jpeg);// };// container.appendChild(closeButton);// })// .catch((error) {// console.error(无法访问摄像头:, error);// uni.showToast({// title: 无法访问摄像头,// icon: none,// duration: 2000// });// });// } else {// uni.showToast({// title: 您的设备不支持摄像头访问,// icon: none,// duration: 2000// });// }},withdraw(item) {let _ this;const currentTime Date.now();const messageTime parseInt(item.time);const oneMinute config.minute; // 60 * 1000 millisecondsif (currentTime (messageTime oneMinute)) {uni.showModal({title: 提示,content: 确认删除该条信息吗,success: function(res) {if (res.confirm) {// 执行确认后的操作if (_.canwithdraw(item)) {const messageData {sn: uuidv4(),group_name: _.groupName,avatar: _.user.avatar_url,content: item.sn,user_name: _.user.username,type: widthdraw,fid: _.user.id,tid: _.tid,created_at: _.getCurrentTimeToMinute(),receiver_type: _.receiver_type};_.socket.emit(sendMessage, messageData);} else {uni.showToast({title: 超过一分钟不能撤回,icon: none});}} else {// 执行取消后的操作}}});}},canwithdraw(item) {const currentTime Date.now();const messageTime parseInt(item.time);const oneMinute config.minute; // 60 * 1000 millisecondsif (currentTime (messageTime oneMinute)) {return false;} else {return true;}},getCurrentTimeToMinute() {const now new Date();// 使用 Intl.DateTimeFormat 格式化日期和时间const dateFormatter new Intl.DateTimeFormat(default, {year: numeric,month: 2-digit,day: 2-digit,hour: 2-digit,minute: 2-digit,hour12: false});// 格式化日期时间并返回return dateFormatter.format(now).replace(,, );},async checkFriend(id) {const token uni.getStorageSync(token);if (!token) return;let data {id};try {const [error, response] await uni.request({url: ${config.apiBaseUrl}/checkFriend,method: GET,header: {Authorization: Bearer ${token}},data: {Id: id}});if (error) {throw new Error(Request failed with error: ${error});}if (response.data.code 0) {return true;} else {return false;}} catch (error) {return false;}},joinGroup() {this.socket.emit(joinGroup, {groupName: this.groupName,userName: this.user.username,userId: this.user.id});},tapTo(state) {let message this.inputValue;if (message ) {uni.showToast({title: 请输入聊天内容,icon: error});return;}this.sendMessage(message);},getInput(e) {this.inputValue e.detail.value;},initChatLog() {console.log(-initChatLog-)let _ this;this.list [];//接口 group 提交id 获取到群的信息const token uni.getStorageSync(token);return new Promise((resolve, reject) {uni.request({url: ${config.apiBaseUrl}/getMessages,method: GET,header: {Authorization: Bearer ${token}},data: {receiver_type: _.receiver_type,tid: _.to_id // 修复Bug, 原来这里写的是 _.tid},success: (res) {resolve(res)console.log(-getMessages-)console.log(res.data.data.messages)this.list res.data.data.messagesthis.list.forEach((item, index) {this.list[index].isMe item.fid this.user.id ? true :false;this.list[index].toid item.fid});},fail: (err) {reject(err)}});})},async sendMessage(message, type text) {this.$refs.popup.close();const messageData {sn: uuidv4(),group_name: this.groupName,avatar: this.user.avatar_url,content: message,user_name: this.user.username,type: type,fid: this.user.id,tid: this.to_id, // 原来this.tid写错了 created_at: this.getCurrentTimeToMinute(),receiver_type: this.receiver_type};this.socket.emit(sendMessage, messageData);this.inputValue ;if (type image || type audio || type video || type text) {const token uni.getStorageSync(token);try {const [error, response] await uni.request({url: ${config.apiBaseUrl}/addmessage,method: POST,header: {Authorization: Bearer ${token}},data: messageData});if (error) {throw new Error(Request failed with error: ${error});}} catch (error) {}}this.$nextTick(() {this.setScrollTop();});},async kickUser(name, type kick) {console.log(groupname, this.groupName)console.log(name, name)console.log(type, type)if (type kick) {this.socket.emit(kickUser, {groupName: this.type group ? this.groupName : this.groupName.replace(g_, ),userName: name});} else {this.socket.emit(kickUser, {groupName: this.type group ? this.groupName : this.groupName.replace(g_, ),userName: name});//拉黑let group_id this.groupName.replace(g_, )if (this.type ! group) {group_id 0}//调用black接口进行拉黑拦黑完成让界面跳到friendsconst token uni.getStorageSync(token);try {const [error, response] await uni.request({url: ${config.apiBaseUrl}/black,method: POST,header: {Authorization: Bearer ${token}},data: {name,group_id}});if (error) {throw new Error(Request failed with error: ${error});}if (response.data.data.code 0) {if (this.type user) {uni.navigateTo({url: /pages/index/friends})}}} catch (error) {}}},setScrollTop() {this.$nextTick(() {let query uni.createSelectorQuery().in(this);query.select(.scroll-view).boundingClientRect((rect) {if (rect) {this.scrollHeight rect.height;}}).exec();});},chooseFile() {// 检查是否为PC端const isPC /Windows|Mac|Linux/.test(navigator.userAgent);if (isPC) {// PC端调用摄像头拍照if (navigator.mediaDevices navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({ video: true }).then((stream) {// 创建视频元素const video document.createElement(video);video.srcObject stream;video.autoplay true;// 创建容器const container document.createElement(div);container.style.position fixed;container.style.top 0;container.style.left 0;container.style.width 100%;container.style.height 100%;container.style.backgroundColor rgba(0,0,0,0.8);container.style.zIndex 9999;container.appendChild(video);document.body.appendChild(container);// 添加拍照按钮const captureButton document.createElement(button);captureButton.textContent 拍照;captureButton.style.position absolute;captureButton.style.bottom 10px;captureButton.style.left 30%;captureButton.style.transform translateX(-50%);captureButton.onclick () {// 创建canvas并捕获当前视频帧const canvas document.createElement(canvas);canvas.width video.videoWidth;canvas.height video.videoHeight;canvas.getContext(2d).drawImage(video, 0, 0, canvas.width, canvas.height);// 将canvas转换为Blobcanvas.toBlob((blob) {// 停止所有视频轨道stream.getTracks().forEach(track track.stop());// 移除容器document.body.removeChild(container);// 创建临时URL并上传const imageUrl URL.createObjectURL(blob);this.selectedFilePath imageUrl;this.uploadAvatar(image);// 清理临时URLURL.revokeObjectURL(imageUrl);}, image/jpeg);};container.appendChild(captureButton);// 添加取消按钮const cancelButton document.createElement(button);cancelButton.textContent 取消;cancelButton.style.position absolute;cancelButton.style.bottom 10px;cancelButton.style.left 70%;cancelButton.style.transform translateX(-50%);cancelButton.onclick () {// 停止所有视频轨道stream.getTracks().forEach(track track.stop());// 移除容器document.body.removeChild(container);// 继续执行选择文件的逻辑this.showFileChooseOptions();};container.appendChild(cancelButton);}).catch((error) {console.error(无法访问摄像头:, error);uni.showToast({title: 无法访问摄像头,icon: none});// 如果无法访问摄像头继续执行选择文件的逻辑this.showFileChooseOptions();});} else {uni.showToast({title: 您的设备不支持摄像头,icon: none});// 如果设备不支持摄像头继续执行选择文件的逻辑this.showFileChooseOptions();}} else {// 非PC端直接执行选择文件的逻辑this.showFileChooseOptions();}},showFileChooseOptions(){uni.showActionSheet({itemList: [拍照, 从相册选择],success: (res) {if (res.tapIndex 0) {this.takePhoto();} else if (res.tapIndex 1) {this.selectImage();}},fail: (error) {console.error(Failed to show action sheet:, error);uni.showToast({title: 操作失败,icon: none});}});},takePhoto() {uni.chooseImage({count: 1,sourceType: [camera],success: async (res) {this.selectedFilePath res.tempFilePaths[0];await this.uploadAvatar(image);},fail: (error) {console.error(Failed to take photo:, error);uni.showToast({title: 拍照失败,icon: none});}});},selectImage() {uni.chooseImage({count: 1,sourceType: [album],success: async (res) {this.selectedFilePath res.tempFilePaths[0];await this.uploadAvatar(image);},fail: (error) {console.error(Failed to select image:, error);uni.showToast({title: 选择图片失败,icon: none});}});},previewImage(url) {uni.previewImage({urls: [url] // 需要预览的图片http链接列表});},async uploadAvatar(type) {if (!this.selectedFilePath) {uni.showToast({title: 请选择文件,icon: none});return;}const token uni.getStorageSync(token);uni.uploadFile({url: ${config.apiBaseUrl}/upload,filePath: this.selectedFilePath,name: avatar,header: {Authorization: Bearer ${token}},success: async (uploadFileRes) {const response JSON.parse(uploadFileRes.data);if (response.code 0) {const avatarUrl response.data;this.sendMessage(avatarUrl, type);}},fail: (error) {console.error(Failed to upload avatar:, error);uni.showToast({title: 上传失败,icon: none});}});},copyBtnClick(data) {handleClipboard( // 这是 实现向剪切板 写入内容的代码 data 就是传入的要写入剪切板的内容// 写入剪切板data, event,() {uni.showToast({title: 已复制到剪切板,});},() {uni.showToast({title: 复制失败,});});},formatMessage(content) {// Detect URLs and format them as linksconst urlRegex /(https?:\/\/[^\s])/g;content content.replace(urlRegex, a href$1 target_blank stylecolor:blue;$1/a);return content.replace(/\n/g, br);},detectCode(content) {// Basic check to see if the content is likely code (this can be improved)const codeKeywords [function, const, let, var, if, else, {, }, , ];return codeKeywords.some(keyword content.includes(keyword)) || /[]/.test(content);},escapeHtml(content) {// Escape HTML to prevent it from being rendered as actual HTMLreturn content.replace(//g, amp;).replace(//g, lt;).replace(//g, gt;);}}};
/script
style langscss scopedimport url(static/iconfont.css);.base-btn {position: fixed;width: 100%;height: 50px;bottom: var(--window-bottom);left: 0;justify-content: space-between;background-color: #ffffff;transition: bottom 0.3s;}.base-btn-popup-open {bottom: 200rpx;/* 调整为 popup 高度 */}.base-con {margin-top: 7.5px;display: flex;height: inherit;align-items: center;justify-content: space-between;}.send-image {width: 35px;line-height: 35px;background-color: #ffb967;border-radius: 50%;text-align: center;color: #ffffff;font-size: 30rpx;}.input-text {width: 58%;height: 35px;background-color: #f2f2f2;border-radius: 8px;padding: 0 15px;}.send-input {width: 64px;line-height: 35px;text-align: center;background-color: #ffb967;border-radius: 8px;color: #ffffff;}.scroll-view,.base-con {margin: 0 15px;}.avatar {width: 32px;height: 32px;border-radius: 50%;float: left;margin-top: 20px;}.avatar-right {margin-right: 10px;}.message-box {max-width: 76%;display: inline-block;word-wrap: break-word;/* 控制消息框换行 */}.message {font-size: 30rpx;background-color: #e6e6e6;padding: 10px;float: left;border-radius: 8px;overflow: hidden;word-break: break-all;white-space: pre-wrap;margin-top: 10px;width: 100%;}.message_img {font-size: 0rpx;background-color: lightgray;padding: 10px;float: left;border-radius: 8px;overflow: hidden;word-break: break-all;white-space: pre-wrap;margin-top: 5px;}.message-image {width: 80px;height: 130px;padding: 15px 0;border-radius: 8px;overflow: hidden;}.news-box::after {content: ;display: block;clear: both;}.news-box:last-child .message {margin-bottom: 20px;}.is-me {float: right;margin-left: 10px;}.message-type {text-align: center;color: #aaa;/* 字体颜色变淡 */font-size: 20rpx;/* 字体小一号 */margin-top: 10px;}.group-box {color: #727172;/* 字体颜色变淡 */font-size: 26rpx;/* 字体小一号 */margin: 6px 0 0 6px;}.group-member {margin-right: 4px;}.popup-content {display: flex;justify-content: center;/* 居中对齐内容 */align-items: center;/* 垂直居中对齐 */}.popup-items {display: flex;width: 100%;flex-wrap: wrap;/* 允许换行 */justify-content: space-around;/* 平均分配空间 */padding: 10rpx;/* 可选的内边距 */}.popup-item {flex: 1 1 10%;/* 每个图片占据 20% 的宽度支持换行 */display: flex;flex-direction: column;/* 垂直布局 */justify-content: center;align-items: center;margin: 5rpx;/* 图片间距 */}.popup-image {width: 80%;/* 图片宽度占父容器的 80% */height: auto;/* 高度自动以保持宽高比 */object-fit: cover;/* 确保图片在框中完全填充 */}.username {font-size: 20rpx;color: #666;margin-top: 5px;text-align: center;}
/style
