uniapp仿微信聊天界面（vue3组合式版本）

石小疯  金牌会员 | 2024-10-20 01:46:52 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 891|帖子 891|积分 2673

先看效果图：



消息格式参照下方：

  1. <template>
  2.         <view class="chat-index">
  3.                 <scroll-view
  4.                         id="scrollview"
  5.                         class="scroll-style"
  6.                         :style="{height: `${windowHeight - inputHeight}rpx`}"
  7.                         scroll-y="true"
  8.                         :scroll-top="conf.scrollTop"
  9.                         @scrolltoupper="topRefresh"
  10.                         @click="touchClose"
  11.                 >
  12.                         <view id="msglistview" class="chat-body">
  13.                                 <view v-for="item,index in data.msgInfoList" :key="index">
  14.                                        
  15.                                         <!-- 消息发送时间 -->
  16.                                         <view class="time-box" v-if="item.showTime">
  17.                                                 <view class="time-style">
  18.                                                         <view>
  19.                                                                 {{ timeFormat(item.sendTime) }}
  20.                                                         </view>
  21.                                                 </view>
  22.                                         </view>
  23.                                        
  24.                                         <!-- 自己 -->
  25.                                         <view class="item self" v-if="item.scid == userInfo.scid">
  26.                                                
  27.                                                 <!-- 文本消息 -->
  28.                                                 <view class="content-text right" v-if="item.type=='text'">
  29.                                                         {{item.content}}
  30.                                                 </view>
  31.                                                
  32.                                                 <!-- 语音消息 -->
  33.                                                 <view class="content-text right" v-else-if="item.type=='voice'">
  34.                                                         <view style="display: flex;" @click="playSound(item.content)">
  35.                                                                 <text>{{ item.voiceLength }}''</text>
  36.                                                                 <image v-if="conf.playVoice" style="width: 42rpx;height: 42rpx;" src="../../static/icon/voice_play_on.png"/>
  37.                                                                 <image v-else style="width: 42rpx;height: 42rpx;" src="../../static/icon/voice_play.png"/>
  38.                                                         </view>
  39.                                                 </view>
  40.                                                
  41.                                                 <!-- 图片消息 -->
  42.                                                 <view class="content-img" v-else-if="item.type=='img'">
  43.                                                         <image class="img-style" :src="item.content"  mode="widthFix" :lazy-load="true"/>
  44.                                                 </view>
  45.                                                
  46.                                                 <!-- 视频消息 -->
  47.                                                 <view class="content-video" v-else>
  48.                                                         <video class="video-style" :src="item.content" />
  49.                                                 </view>
  50.                                                
  51.                                                 <!-- 头像 -->
  52.                                                 <image class="avatar" :src="userInfo.s_avatar" />
  53.                                         </view>
  54.                                        
  55.                                         <!-- 好友 -->
  56.                                         <view class="item Ai" v-else>
  57.                                                
  58.                                                 <!-- 头像 -->
  59.                                                 <image class="avatar" :src="userInfo.r_avatar" />
  60.                                                
  61.                                                 <!-- 文本消息 -->
  62.                                                 <view class="content-text left" v-if="item.type=='text'">
  63.                                                         {{item.content}}
  64.                                                 </view>
  65.                                                
  66.                                                 <!-- 语音消息 -->
  67.                                                 <view class="content-text left" v-else-if="item.type=='voice'">
  68.                                                         <view style="display: flex;" @click="playSound(item.content)">
  69.                                                                 <text>{{ item.voiceLength }}''</text>
  70.                                                                 <image v-if="conf.playVoice" style="width: 42rpx;height: 42rpx;" src="../../static/icon/voice_play_on.png"/>
  71.                                                                 <image v-else style="width: 42rpx;height: 42rpx;" src="../../static/icon/voice_play.png"/>
  72.                                                         </view>
  73.                                                 </view>
  74.                                                
  75.                                                 <!-- 图片消息 -->
  76.                                                 <view class="content-img" v-else-if="item.type=='img'">
  77.                                                         <image class="img-style" :src="item.content"  mode="widthFix" :lazy-load="true"/>
  78.                                                 </view>
  79.                                                
  80.                                                 <!-- 视频消息 -->
  81.                                                 <view class="content-video" v-else>
  82.                                                         <video class="video-style" :src="item.content" />
  83.                                                 </view>
  85.                                         </view>
  86.                                 </view>
  87.                         </view>
  88.                 </scroll-view>
  89.                
  90.                 <!-- 消息发送框 -->
  91.                 <view class="chat-bottom" :style="{height:`${inputHeight}rpx`}">
  92.                         <view class="input-msg-box" :style="{bottom:`${conf.keyboardHeight}rpx`}">
  93.                                
  94.                                 <!-- 输入框区域 -->
  95.                                 <view class="textarea-style">
  96.                                         <!-- 语音/文字输入 -->
  97.                                         <view class="voice-btn" @click="isVoice">
  98.                                                 <image class="icon-style"  v-if="conf.isVoice" src="../../static/icon/keyboard.png" />
  99.                                                 <image class="icon-style" v-else src="../../static/icon/voice.png" />       
  100.                                         </view>
  101.                                        
  102.                                         <!-- textarea输入框 -->
  103.                                         <view class="out_textarea_box" @click="() => conf.showMoreMenu=false">
  104.                                                 <textarea
  105.                                                         placeholder-class="textarea_placeholder"
  106.                                                         :style="{textAlign:(conf.textAreaDisabled?'center':'')}"
  107.                                                         v-model="sendMsg.text"
  108.                                                         maxlength="250"
  109.                                                         confirm-type="send"
  110.                                                         auto-height
  111.                                                         :placeholder="conf.textAreaText"
  112.                                                         :show-confirm-bar="false"
  113.                                                         :adjust-position="false"
  114.                                                         :disabled="conf.textAreaDisabled"
  115.                                                         @confirm="handleSend"
  116.                                                         @linechange="listenTextAreaHeight"
  117.                                                         @focus="scrollToBottom"
  118.                                                         @blur="scrollToBottom"
  119.                                                         @touchstart="handleTouchStart"
  120.                                                         @touchmove="handleTouchMove"
  121.                                                         @touchend="handleTouchEnd"
  122.                                                    />
  123.                                         </view>       
  124.                                                
  125.                                         <!-- 输入菜单 -->
  126.                                         <view class="more-btn">
  127.                                                 <image class="icon-style" src="../../static/icon/emoji.png" @click="handleSend"/>
  128.                                                 <image class="icon-style" style="margin-left: 20rpx;" src="../../static/icon/more.png" @click="showMoreMenuFunc"/>                               
  129.                                         </view>
  130.                        
  131.                                 </view>
  132.                                
  133.                                 <!-- 更多菜单 -->
  134.                                 <view :class="{'more-menu-box-max': conf.showMoreMenu,'more-menu-box-min': !conf.showMoreMenu}">
  135.                                         <view class="inner-menu-box">
  136.                                                 <view class="menu-box" @click="sendFile('choose','')">
  137.                                                         <view class="out-icon-area">
  138.                                                                 <image class="i-style" src="../../static/icon/photo.png" />
  139.                                                         </view>
  140.                                                         <view class="t-style">照片</view>
  141.                                                 </view>
  142.                                                 <view class="menu-box" @click="sendFile('shoot','')">
  143.                                                         <view class="out-icon-area">
  144.                                                                 <image class="i-style" src="../../static/icon/takePhoto.png" />
  145.                                                         </view>
  146.                                                         <view class="t-style">拍摄</view>
  147.                                                 </view>
  148.                                         </view>
  149.                                 </view>
  150.                                
  151.                         </view>
  152.                 </view>
  153.                
  154.                 <!-- 语音输入 -->
  155.                 <view class="voice-mask" v-show="voice.mask">
  156.                         <view class="inner-mask">
  157.                                 <view class="voice-progress-box" :style="{width:`${progressNum}`+'rpx'}">
  158.                                         <view class="third-icon"/>
  159.                                         <view class="progress-num">
  160.                                                 {{ voice.length }}s
  161.                                         </view>
  162.                                 </view>
  163.                                 <view class="cancel-btn" :class="{cancelBtn : voice.cancel}">
  164.                                         <image style="width: 60rpx;height: 60rpx;" src="../../static/icon/cancel-voice.png"></image>
  165.                                 </view>
  166.                                 <view class="show-tips">
  167.                                         上滑取消发送
  168.                                 </view>
  169.                                 <view class="bottom-area">
  170.                                         <image class="img-style" src="../../static/icon/icon-voice.png" />
  171.                                 </view>
  172.                         </view>
  173.                 </view>
  174.         </view>
  175. </template>
  177. <script setup>
  178. import { computed, getCurrentInstance, reactive, ref, onUpdated } from 'vue';
  179. import { onLoad } from '@dcloudio/uni-app';
  180. import properties from '@/properties/index.js';
  181. import timeMethod from '@/utils/timeMethod.js';
  183. const { proxy } = getCurrentInstance();
  184. const _this = proxy;
  185. const sendMsg = reactive({
  186.         text: ''
  187. })
  188. /* 接口数据 */
  189. const data = reactive({
  190.         msgInfoList: [],
  191.         pageNum: 1,
  192.         pageSize: 20,
  193.         pageNumCount: 0
  194. })
  195. /* 用户信息 */
  196. const userInfo = reactive({
  197.         scid: null,
  198.         rcid: null,
  199.         s_avatar: '',
  200.         r_avatar: ''
  201. })
  202. /* 配置项 */
  203. const conf = reactive({
  204.         keyboardHeight: 0,
  205.         bottomHeight: 150,
  206.         scrollTop: 0,
  207.         moreMenuHeight: 0,
  208.         judgeScrollToBottom: true,
  209.         showMoreMenu: false,
  210.         loading: false,
  211.         showMsgMenuBoxId: null,
  212.         showMoreMenu: false,
  213.         textAreaDisabled: false,
  214.         textAreaText: '',
  215.         isVoice: false,
  216.         showMoreMenu: false,
  217.         playVoice: false
  218. })
  219. /* 语音输入配置项 */
  220. const voice = reactive({
  221.         mask: false,
  222.         length: 0,
  223.         cancel: false,
  224.         startX: "",
  225.         startY: "",
  226.         timer: "",
  227.         recordInstance: "",
  228.         finished: false,
  229. })
  230. /* msg配置项 */               
  231. const msgConf = reactive({
  232.         timeSpace: 120,
  233.         initMsgTime: '',
  234.         msgId: 0,
  235.         latestTime: ''
  236. })       
  240. /**
  241. * 页面加载时调用
  242. */
  243. onLoad((e) => {
  244.         userInfo.scid =parseInt(uni.getStorageSync('cid'));
  245.         userInfo.rcid = parseInt(e.rcid);
  246.         voice.recordInstance = uni.getRecorderManager();
  247.         keyboardHeightChange();
  248.         listenMsg();
  249.         getAiUserInfo(parseInt(e.rcid));
  250.         getSelfUserInfo(uni.getStorageSync('cid'));
  251.         getAllMsg(parseInt(e.rcid));
  252.         readMsg(parseInt(e.rcid))
  253. })
  255. /**
  256. * 数据更新时调用
  257. */
  258. onUpdated(() => {
  259.         /* 页面更新时调用聊天消息定位到最底部 */
  260.         if (conf.judgeScrollToBottom) scrollToBottom();
  262. })
  264. /**
  265. * 计算属性
  266. */
  267. const windowHeight = computed(() => rpxTopx(uni.getSystemInfoSync().windowHeight))
  268. const inputHeight = computed(() => conf.bottomHeight + conf.keyboardHeight + conf.moreMenuHeight)
  269. const progressNum = computed(() => voice.length * 2 + 250)
  271. /**
  272. * px 转换 rpx
  273. */  
  274. const rpxTopx = (px) => {
  275.         const deviceWidth = uni.getSystemInfoSync().windowWidth;
  276.         let rpx = ( 750 / deviceWidth ) * Number(px);
  277.         return Math.floor(rpx);
  278. }
  280. /**
  281. * 监听聊天发送栏高度
  282. */
  283. const listenTextAreaHeight = () => {
  284.         setTimeout(()=>{
  285.                 let query = uni.createSelectorQuery();
  286.                 query.select('.input-msg-box').boundingClientRect();
  287.                 query.exec(res =>{
  288.                         conf.bottomHeight = rpxTopx(res[0].height);
  289.                 })
  290.         },200)
  291. }
  293. /**
  294. * 监听键盘高度
  295. */
  296. const keyboardHeightChange = () => {
  297.         uni.onKeyboardHeightChange(res => {
  298.                 conf.keyboardHeight = rpxTopx(res.height);
  299.                 if(conf.keyboardHeight <= 0) {
  300.                         conf.keyboardHeight = 0;
  301.                         conf.showMoreMenu = false;
  302.                 }
  303.         })
  304. }
  306. /**
  307. * 滑动到底部
  308. */
  309. const scrollToBottom = (e) => {
  310.         setTimeout(()=>{
  311.                 let query = uni.createSelectorQuery().in(_this);
  312.                 query.select('#scrollview').boundingClientRect();
  313.                 query.select('#msglistview').boundingClientRect();
  314.                 query.exec((res) =>{
  315.                         if(res[1].height > res[0].height){
  316.                                 conf.scrollTop = rpxTopx(res[1].height - res[0].height);
  317.                         }
  318.                 })
  319.         },200);
  320. }
  322. /**
  323. * 弹出更多菜单弹窗
  324. */
  325. const showMoreMenuFunc = () => {
  326.         conf.showMoreMenu = true;
  327.         conf.isVoice = false;
  328.         conf.textAreaText = '';
  329.         conf.moreMenuHeight = 350;
  330. }
  332. /**
  333. * websocket监听
  334. */
  335. const listenMsg = () => {
  336.         uni.onSocketMessage((res)=>{
  337.                 let resData = JSON.parse(res.data);
  338.                 data.msgInfoList.push(resData);
  339.         })
  340. }
  342. /**
  343. * 语音与输入切换
  344. */
  345. const isVoice = () => {
  346.         if (conf.isVoice) {
  347.                 conf.isVoice = false;
  348.                 conf.textAreaDisabled = false;
  349.                 conf.textAreaText = '';
  350.         } else {
  351.                 conf.isVoice = true;
  352.                 conf.textAreaDisabled = true;
  353.                 conf.textAreaText = '按住 说话';
  354.                 conf.showMoreMenu = false;
  355.                 conf.moreMenuHeight = 0;
  356.         }
  357.                
  358. }
  361. /**
  362. * 获取用户信息（自己）
  363. */
  364. const getSelfUserInfo = (cid) => _this.$http('/user/getUserInfo','GET',{'cid':cid}).then(res => {
  365.         userInfo.scid = cid;
  366.         userInfo.s_avatar = res.data.avatarUrl;
  367. })
  369. /**
  370. * 获取用户信息（好友）
  371. */
  372. const getAiUserInfo = (cid) => _this.$http('/user/getUserInfo','GET',{'cid':cid}).then(res => {
  373.         userInfo.rcid = cid;
  374.         userInfo.r_avatar = res.data.avatarUrl;
  375.         uni.setNavigationBarTitle({title:res.data.name});
  376. })
  378. /**
  379. * 上拉加载消息
  380. */
  381. const topRefresh = () => {
  382.         if (data.pageNum < data.pageNumCount) {
  383.                 data.pageNum++;
  384.                 conf.judgeScrollToBottom = false;
  385.                 conf.loading = true;
  386.                 getAllMsg(userInfo.rcid);
  387.         }
  388. }
  390. /**
  391. * 获取消息
  392. */
  393. const getAllMsg = (rcid) => {
  394.         _this.$http('/msg/getChatMsg','POST',{'scid':uni.getStorageSync('cid'),'rcid':rcid,'pageNum':data.pageNum,'pageSize':data.pageSize}).then(res => {
  395.                 data.pageNumCount = res.data.pagesNum;
  396.                 showMsgTime(res.data.list);
  397.                 msgConf.latestTime = data.msgInfoList.slice(-1)[0].sendTime;
  398.         })
  399. }
  401. /**
  402. * 已读消息
  403. */
  404. const readMsg = (rcid) => {
  405.         _this.$http('/msg/readMsg','POST',{'scid':rcid,'rcid':uni.getStorageSync('cid')})
  406. }
  408. /**
  409. * 控制消息时间是否展示
  410. */
  411. const showMsgTime = (msgData) => {
  412.         msgData.forEach(e => {
  413.                 e.showTime = false;
  414.                 data.msgInfoList.unshift(e);
  415.                 if (msgConf.msgId !== 0) {
  416.                         if (timeMethod.calculateTime(msgConf.initMsgTime,e.sendTime)/1000 > msgConf.timeSpace) {
  417.                                 data.msgInfoList.slice(0 - msgConf.msgId)[0].showTime = true;
  418.                         }
  419.                 }
  420.                 msgConf.initMsgTime = e.sendTime;
  421.                 msgConf.msgId++;
  422.         });
  423.         data.msgInfoList.slice(0 - (msgConf.msgId + 1))[0].showTime = true;
  424. }
  426. /**
  427. * 日期转换
  428. */
  429. const timeFormat = (time) => {
  430.         //时间格式化
  431.         const Time = timeMethod.getTime(time).split("T");
  432.         //当前消息日期属于周
  433.         const week = timeMethod.getDateToWeek(time);
  434.         //当前日期0时
  435.         const nti = timeMethod.setTimeZero(timeMethod.getNowTime());
  436.         //消息日期当天0时
  437.         const mnti = timeMethod.setTimeZero(timeMethod.getTime(time));
  438.         //计算日期差值
  439.         const diffDate = timeMethod.calculateTime(nti,mnti);
  440.         //本周一日期0时 （后面+1是去除当天时间）
  441.         const fwnti = timeMethod.setTimeZero(timeMethod.countDateStr(-timeMethod.getDateToWeek(timeMethod.getNowTime()).weekID + 1));
  442.         //计算周日期差值
  443.         const diffWeek = timeMethod.calculateTime(mnti,fwnti);
  444.        
  445.         if (diffDate === 0) {                                 //消息发送日期减去当天日期如果等于0则是当天时间
  446.                 return Time[1].slice(0,5);
  447.         } else if (diffDate < 172800000) { //当前日期减去消息发送日期小于2天（172800000ms）则是昨天-  一天最大差值前天凌晨00:00:00到今天晚上23:59:59
  448.                 return "昨天 " + Time[1].slice(0,5);
  449.         } else if (diffWeek >= 0) {                 //消息日期减去本周一日期大于0则是本周
  450.                 return week.weekName;
  451.         } else {                                                         //其他时间则是日期
  452.                 return Time[0].slice(5,10);
  453.         }
  454. }
  457. /**
  458. * 关闭消息操作菜单
  459. */
  460. const touchClose = () => {
  461.         conf.showBoxId = null;
  462.         conf.showMoreMenu = false;
  463.         conf.keyboardHeight = 0;
  464.         conf.moreMenuHeight = 0;
  465. }
  467. /**
  468. * 发送消息
  469. */
  470. const handleSend = () => {
  471.         conf.judgeScrollToBottom = true;
  472.         data.pageNum = 1;
  473.         /* 如果消息不为空 */
  474.         if(sendMsg.text.length !== 0){
  475.                 _this.$http("/msg/sendMsg","POST",{
  476.                         "scid":userInfo.scid,
  477.                         "rcid":userInfo.rcid,
  478.                         "type": "text",
  479.                         "content":sendMsg.text}).then(res => {
  480.                         if (res.status) {
  481.                                 if (timeMethod.calculateTime(res.data.sendTime,msgConf.latestTime)/1000 > msgConf.timeSpace) {
  482.                                         res.data.showTime = true;
  483.                                 } else {
  484.                                         res.data.showTime = false;
  485.                                 }
  486.                                 data.msgInfoList.push(res.data);
  487.                                 sendMsg.text = '';
  488.                         }
  489.                 })
  490.         }
  491. }
  493. /**
  494. * 长按开始录制语音
  495. */
  496. const handleTouchStart = (e) => {
  497.         if (conf.textAreaDisabled) {
  498.                 voice.finished = false;
  499.                 uni.getSetting({
  500.                         success(res) {
  501.                                 if (res.authSetting['scope.record'] === undefined) {
  502.                                         console.log("第一次授权")
  503.                                 } else if (!res.authSetting['scope.record']) {
  504.                                         uni.showToast({
  505.                                                 icon: "none",
  506.                                                 title: "点击右上角···进入设置开启麦克风授权！",
  507.                                                 duration: 2000
  508.                                         })
  509.                                 } else {                                               
  510.                                         voice.recordInstance.start();
  511.                                         voice.mask = true;
  512.                                         voice.isRecord = true;
  513.                                         voice.length = 1;
  514.                                         voice.startX = e.touches[0].pageX;
  515.                                         voice.startY = e.touches[0].pageY;
  516.                                         voice.timer = setInterval(() => {
  517.                                                 voice.length += 1;
  518.                                                 if(voice.length >= 60) {
  519.                                                         clearInterval(voice.timer);
  520.                                                         handleTouchEnd();
  521.                                                 }
  522.                                         },1000)       
  523.                                         //判断先结束按钮但是录制才开始时不会结束录制的条件；因为获取授权这儿存在延时；所以结束录制时可能还没开始录制
  524.                                         if (voice.finished && voice.mask) {
  525.                                                 handleTouchEnd();
  526.                                         }
  527.                                 }
  528.                         }
  529.                 })
  530.         }                       
  531. }
  533. /**
  534. * 长按滑动
  535. */
  536. const handleTouchMove = (e) => {
  537.         if (conf.textAreaDisabled) {
  538.                 if (voice.startY - e.touches[0].pageY > 80) {
  539.                         voice.cancel = true;
  540.                 }else {
  541.                         voice.cancel = false;
  542.                 }
  543.         }
  544. }
  546. /**
  547. * 语音录制结束
  548. */
  549. const handleTouchEnd = () => {
  550.         if (conf.textAreaDisabled) {
  551.                 voice.finished = true;
  552.                 voice.mask = false;
  553.                 clearInterval(voice.timer);
  554.                 voice.recordInstance.stop();
  555.                 voice.recordInstance.onStop((res) => {
  556.                         const message = {
  557.                                 voice:res.tempFilePath,
  558.                                 length:voice.length
  559.                         }
  560.                         if (!voice.cancel) {
  561.                                 if (voice.length>1) {
  562.                                         sendFile("voice",message);
  563.                                 } else {
  564.                                         uni.showToast({
  565.                                                 icon: 'none',
  566.                                                 title: "语音时间太短",
  567.                                                 duration: 1000
  568.                                         })
  569.                                 }
  570.                         }else {
  571.                                 voice.cancel = false;
  572.                         }
  573.                 })                                                                                                       
  574.         }
  575. }
  577. /**
  578. * 语音播放
  579. */
  580. const playSound = (url) => {
  581.         conf.playVoice = true;
  582.         let music = null;
  583.         music = uni.createInnerAudioContext();
  584.         music.src = url;
  585.         music.play();
  586.         music.onEnded(()=>{
  587.                 music = null;
  588.                 conf.playVoice = false;
  589.         })
  590. }
  593. /**
  594. * 发送文件
  595. */
  596. const sendFile = (type,data) => {
  597.         if (type === "choose") {
  598.                 uni.chooseMedia({
  599.                         count: 1,
  600.                         mediaType: ['image', 'video'],
  601.                         sourceType: ['album'],
  602.                         maxDuration: 30,
  603.                         success(res) {
  604.                                 let type = 'img';
  605.                                 if (res.tempFiles[0].fileType === 'image') {
  606.                                         type = 'img'
  607.                                 } else {
  608.                                         type = 'video'
  609.                                 }
  610.                                 uploadFile(res.tempFiles[0].tempFilePath,type)
  611.                         }
  612.                 })       
  613.         } else if (type === "shoot") {
  614.                 uni.chooseMedia({
  615.                         count: 1,
  616.                         mediaType: ['image', 'video'],
  617.                         sourceType: ['camera'],
  618.                         maxDuration: 30,
  619.                         success(res) {
  620.                                 let type = 'img';
  621.                                 if (res.tempFiles[0].fileType === 'image') {
  622.                                         type = 'img'
  623.                                 } else {
  624.                                         type = 'video'
  625.                                 }
  626.                                 uploadFile(res.tempFiles[0].tempFilePath,type)
  627.                         }
  628.                 })       
  629.         } else {
  630.                 uploadFile(data.voice,'voice')
  631.         }
  632. }
  634. /**
  635. * 上传文件
  636. */
  637. const uploadFile = (path,type) => {
  638.         let param = {"scid":userInfo.scid,"rcid":userInfo.rcid,"type":type};
  639.         if (type=='voice') {
  640.                 param = {"scid":userInfo.scid,"rcid":userInfo.rcid,"type":type,"voiceLength":voice.length};
  641.         }
  642.         uni.uploadFile({
  643.                 url: properties.appConf.url + "/msg/sendFileMsg",
  644.                 filePath: path,
  645.                 name: 'file',
  646.                 formData: param,
  647.                 header: {"Authorization": uni.getStorageSync('Authorization')},
  648.                 success(res) {
  649.                         let newMsg = JSON.parse(res.data)
  650.                         if (newMsg.status) {
  651.                                 if (timeMethod.calculateTime(newMsg.data.sendTime,msgConf.latestTime)/1000 > msgConf.timeSpace) {
  652.                                         newMsg.data.showTime = true;
  653.                                 } else {
  654.                                         newMsg.data.showTime = false;
  655.                                 }
  656.                                 data.msgInfoList.push(newMsg.data)
  657.                         }
  658.                 }
  659.         })
  660. }
  662. </script>
  664. <style lang="scss">
  665.        
  666. $chatContentbgc: #00ff7f;
  667. $chatBackground: #f0f0f0;
  669. center {
  670.         display: flex;
  671.         align-items: center;
  672.         justify-content: center;
  673. }
  674.        
  675. .chat-index {
  676.         height: 100vh;
  677.         background-color: $chatBackground;
  678.        
  679.         .scroll-style {
  680.                
  681.                 .chat-body {
  682.                         display: flex;
  683.                         flex-direction: column;
  684.                         padding-top: 23rpx;
  685.                        
  686.                         .time-box {
  687.                                 width: 100%;
  688.                                 height: 100rpx;
  689.                                 display: flex;
  690.                                 justify-content: center;
  691.                                 align-items: center;
  692.                                
  693.                                 .time-style {
  694.                                         font-size: 22rpx;
  695.                                         background-color: rgba(213, 213, 213, 0.3);;
  696.                                         padding: 5rpx 10rpx;
  697.                                         border-radius: 8rpx;
  698.                                         color: black;
  699.                                 }
  700.                         }
  701.                        
  702.                         .self {
  703.                                 justify-content: flex-end;
  704.                                 position: relative;
  705.                         }
  706.                        
  707.                         .Ai {
  708.                                 position: relative;
  709.                         }
  710.                        
  711.                         .item {
  712.                                 display: flex;
  713.                                 padding: 23rpx 30rpx;
  714.                                
  715.                                 .right {
  716.                                         background-color: $chatContentbgc;
  717.                                 }
  718.                                
  719.                                 .left {
  720.                                         background-color: #FFFFFF;
  721.                                 }
  722.                                
  723.                                 .right::after {
  724.                                         position: absolute;
  725.                                         display: inline-block;
  726.                                         content: '';
  727.                                         width: 0;
  728.                                         height: 0;
  729.                                         left: 100%;
  730.                                         top: 10px;
  731.                                         border: 12rpx solid transparent;
  732.                                         border-left: 12rpx solid $chatContentbgc;
  733.                                 }
  734.                                
  735.                                 .left::after {
  736.                                         position: absolute;
  737.                                         display: inline-block;
  738.                                         content: '';
  739.                                         width: 0;
  740.                                         height: 0;
  741.                                         top: 10px;
  742.                                         right: 100%;
  743.                                         border: 12rpx solid transparent;
  744.                                         border-right: 12rpx solid #FFFFFF;
  745.                                 }
  746.                                
  747.                                 .content-text {
  748.                                         position: relative;
  749.                                         max-width: 486rpx;
  750.                                         border-radius: 8rpx;
  751.                                         word-wrap: break-word;
  752.                                         padding: 24rpx 24rpx;
  753.                                         margin: 0 24rpx;
  754.                                         border-radius: 5px;
  755.                                         font-size: 32rpx;
  756.                                         font-family: PingFang SC;
  757.                                         font-weight: 500;
  758.                                         color: #333333;
  759.                                         line-height: 42rpx;       
  760.                                 }
  761.                                
  762.                                 .content-img {
  763.                                         margin: 0 24rpx;
  764.                                 }
  765.                                
  766.                                 .content-video {
  767.                                         margin: 0 24rpx;
  768.                                 }
  769.                                
  770.                                 .img-style {
  771.                                         width: 400rpx;
  772.                                         height: auto;
  773.                                         border-radius: 10rpx;
  774.                                 }
  775.                                
  776.                                 .video-style {
  777.                                         width: 400rpx;
  778.                                         height: 400rpx;
  779.                                 }
  780.                                
  781.                                 .avatar {
  782.                                         display: flex;
  783.                                         justify-content: center;
  784.                                         width: 78rpx;
  785.                                         height: 78rpx;
  786.                                         background: #fff;
  787.                                         border-radius: 50rpx;
  788.                                         overflow: hidden;
  789.                                        
  790.                                         image {
  791.                                                 align-self: center;
  792.                                         }
  793.                                 }
  794.                         }
  795.                 }
  796.         }
  797.        
  798.         .chat-bottom {
  799.                 width: 100%;
  800.                
  801.                 .input-msg-box {
  802.                         width: 100% ;
  803.                         min-height: 150rpx;
  804.                         position: fixed;
  805.                         bottom: 0;
  806.                         background: #e6e6e6;
  807.                        
  808.                         .textarea-style {
  809.                                 width: 100%;
  810.                                 padding-top: 20rpx;
  811.                                 display: flex;
  812.                                
  813.                                 .out_textarea_box {
  814.                                         width:65%;
  815.                                         min-height: 70rpx;
  816.                                         border-radius: 10rpx;
  817.                                         margin-left: 10rpx;
  818.                                         background: #f0f0f0;
  819.                                         display: flex;
  820.                                         align-items: center;
  821.                                        
  822.                                         textarea {
  823.                                                 width: 94%;
  824.                                                 padding: 0 3%;
  825.                                                 min-height: 42rpx;
  826.                                                 max-height: 200rpx;
  827.                                                 font-size: 32rpx;
  828.                                                 font-family: PingFang SC;
  829.                                                 color: #333333;
  830.                                         }
  831.                                 }
  832.                                
  833.                                 .voice-btn {
  834.                                         width: 10%;
  835.                                         @extend center;
  836.                                 }
  837.                                
  838.                                 .more-btn {
  839.                                         width: calc(25% - 25rpx);
  840.                                         margin-left: 10rpx;
  841.                                         @extend center;
  842.                                 }
  843.                                
  844.                                 .icon-style {
  845.                                         width: 50rpx;
  846.                                         height: 50rpx;
  847.                                 }
  848.                         }
  849.                        
  850.                         .more-menu-box-min {
  851.                                 width: 100%;
  852.                                 height: 0rpx;
  853.                                 display: none;
  854.                         }
  855.                        
  856.                         .more-menu-box-max {
  857.                                 height: 400rpx;
  858.                                 margin-top: 10rpx;
  859.                                 border-top: 1rpx solid #d6d6d6;
  860.                                 transition: height 1ms linear;
  861.                                 display: block;
  862.                                
  863.                                 .inner-menu-box {
  864.                                         width: calc(100% - 20rpx);
  865.                                         height: calc(360rpx - 10rpx);
  866.                                         padding: 10rpx;
  867.                                        
  868.                                         .menu-box {
  869.                                                 width: 150rpx;
  870.                                                 height: 150rpx;
  871.                                                 margin: 12rpx calc((100% - 600rpx) / 8);
  872.                                                 float: left;
  873.                                                
  874.                                                 .out-icon-area {
  875.                                                         width: 110rpx;
  876.                                                         height: 110rpx;
  877.                                                         background-color: #fff;
  878.                                                         border-radius: 20rpx;
  879.                                                         margin: 0 20rpx;
  880.                                                         @extend center;
  881.                                                        
  882.                                                         .i-style {
  883.                                                                 width: 60rpx;
  884.                                                                 height: 60rpx;
  885.                                                         }
  886.                                                 }
  887.                                                
  888.                                                 .t-style {
  889.                                                         font-size: 24rpx;
  890.                                                         font-weight: 400;
  891.                                                         text-align: center;
  892.                                                         margin-top: 10rpx;
  893.                                                         color: #717171;
  894.                                                 }
  895.                                         }
  896.                                 }
  897.                         }
  898.                        
  899.                 }
  900.         }
  901.        
  902.         .voice-mask{
  903.                 position:fixed;
  904.                 top:0;
  905.                 right:0;
  906.                 bottom:0;
  907.                 left:0;
  908.                 background-color: rgba(0,0,0,0.8);
  909.        
  910.                 .inner-mask {
  911.                         display: flex;
  912.                         flex-direction: column;
  913.                         align-items: center;
  914.                        
  915.                         .voice-progress-box {
  916.                                 min-width: 250rpx;
  917.                                 height: 150rpx;
  918.                                 margin-top: 60%;
  919.                                 border-radius: 50rpx;
  920.                                 background: #4df861;
  921.                                 position: relative;
  922.                                 @extend center;
  923.                                
  924.                                 .third-icon {
  925.                                         width: 0;
  926.                                         height: 0;
  927.                                         border: 15rpx solid transparent;
  928.                                         border-top: 15rpx solid #4df861;
  929.                                         position: absolute;
  930.                                         top: 100%;
  931.                                         left: 45%;
  932.                                        
  933.                                         .progress-num {
  934.                                                 font-size: 50rpx;
  935.                                                 font-weight: 600;
  936.                                         }
  937.                                 }
  938.                        
  939.                         }
  940.                        
  941.                         .cancel-btn {
  942.                                 width: 120rpx;
  943.                                 height: 120rpx;
  944.                                 clip-path: circle();
  945.                                 margin-top: 50%;
  946.                                 background: #080808;
  947.                                 @extend center;
  948.                         }
  949.                        
  950.                         .cancelBtn {
  951.                                 width: 150rpx;
  952.                                 height: 150rpx;
  953.                                 background-color: #ff0004;
  954.                                
  955.                         }
  956.                        
  957.                         .show-tips {
  958.                                 width: 100%;
  959.                                 margin-top: 50rpx;
  960.                                 text-align: center;
  961.                                 color: white;
  962.                                 animation: 4s opacity2 1s infinite;
  963.                                 font-size: 30rpx;
  964.                                 font-weight: 400;
  965.                                 font-family: sans-serif;
  966.                         }
  967.                        
  968.                         @keyframes opacity2{
  969.                                 0%{opacity:0}
  970.                                 50%{opacity:.8;}
  971.                                 100%{opacity:0;}
  972.                         }
  973.                        
  974.                         .bottom-area {
  975.                                 position: fixed;
  976.                                 bottom: 0rpx;
  977.                                 width: 100%;
  978.                                 height:190rpx;
  979.                                 border-top: #BABABB 8rpx solid;
  980.                                 border-radius: 300rpx 300rpx 0 0;
  981.                                 background-image: linear-gradient(#949794,#e1e3e1);
  982.                                 @extend center;
  983.                                
  984.                                 .img-style {
  985.                                         width: 50rpx;
  986.                                         height: 50rpx;
  987.                                 }
  988.                         }       
  989.                 }
  990.         }
  991. }
  992. </style>
复制代码
导入的时间工具包 timeMethod.js
  1. class TimeMethod {
  2.        
  3.         constructor() {}
  4.        
  5.         //日期格式化
  6.         addZero(data) {
  7.                 if (parseInt(data) < 10) {
  8.                         return "0" + String(data);
  9.                 }
  10.                 return data;
  11.         }       
  12.        
  13.         /**
  14.          * 获取当前日期
  15.          */
  16.         getNowTime() {
  17.                 const myDate = new Date();
  18.                 const year = myDate.getFullYear();
  19.                 const mouth = this.addZero(myDate.getMonth() + 1);
  20.                 const day = this.addZero(myDate.getDate());
  21.                 const hour = this.addZero(myDate.getHours());
  22.                 const minute = this.addZero(myDate.getMinutes());
  23.                 const second = this.addZero(myDate.getSeconds());
  24.                 return year + '-' + mouth + '-' + day + 'T' + hour+ ':' + minute+ ':' + second
  25.         }
  26.        
  27.         /**
  28.          * 根据时间返回标准字符串时间
  29.          * @param {Object} time
  30.          */
  31.         getTime(time) {
  32.                 const myDate = new Date(time);
  33.                 const year = myDate.getFullYear();
  34.                 const mouth = this.addZero(myDate.getMonth() + 1);
  35.                 const day = this.addZero(myDate.getDate());
  36.                 const hour = this.addZero(myDate.getHours());
  37.                 const minute = this.addZero(myDate.getMinutes());
  38.                 const second = this.addZero(myDate.getSeconds());
  39.                 return year + '-' + mouth + '-' + day + 'T' + hour+ ':' + minute+ ':' + second
  40.         }
  41.        
  42.         /**
  43.          * @param {Object} timestamp
  44.          * @param {Object} type
  45.          * 时间戳转时间
  46.          */
  47.         timestampToTime(timestamp,type) {
  48.                         if(String(timestamp).length===10) {
  49.                                 //时间戳为10位需*1000
  50.                                 var date = new Date(timestamp * 1000);
  51.                         }else {
  52.                                 var date = new Date(timestamp);
  53.                         }
  54.                 const Y = date.getFullYear() + '-';       
  55.                 const M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';       
  56.                 const D = date.getDate() + ' ';       
  57.                 const h = date.getHours() + ':';       
  58.                 const m = date.getMinutes() + ':';       
  59.                 const s = date.getSeconds();
  60.                         if(type==="date") {
  61.                                 return Y+M+D;
  62.                         }else {
  63.                                 return Y+M+D+h+m+s;
  64.                         }
  65.             }
  66.                
  67.                
  68.         /**
  69.          * @param {Object} time
  70.          * 时间转时间戳
  71.          */
  72.         timeToTimestamp(time) {
  73.                 //精确到秒，毫秒用000代替 ：Date.parse(date);
  74.                 return new Date(time).getTime();
  75.         }
  76.        
  77.        
  78.         /**
  79.          * @param {Object} startTime
  80.          * @param {Object} endTime
  81.          * 日期计算
  82.          */
  83.         calculateTime(startTime,endTime) {
  84.                 return new Date(startTime) - new Date(endTime)
  85.         }
  86.        
  87.         /**
  88.          * @param {Object} time
  89.          * 日期转星期
  90.          */
  91.         getDateToWeek(time) {
  92.                 let weekArrayList = [
  93.                 {"weekID":7,"weekName":"星期日"},
  94.                 {"weekID":1,"weekName":"星期一"},
  95.                 {"weekID":2,"weekName":"星期二"},
  96.                 {"weekID":3,"weekName":"星期三"},
  97.                 {"weekID":4,"weekName":"星期四"},
  98.                 {"weekID":5,"weekName":"星期五"},
  99.                 {"weekID":6,"weekName":"星期六"}];
  100.                 return weekArrayList[new Date(time).getDay()]
  101.         }
  102.        
  103.         /**
  104.          * @param {Object} date
  105.          *  yyyy-MM-dd HH:mm:ss转为   yyyy-MM-ddTHH:mm:ss
  106.          */
  107.         timeFormat(date,type) {
  108.                 if (type == "T")
  109.                         return date.replace(" ","T")
  110.                 else
  111.                         return date.replace("T"," ")
  112.         }
  113.        
  114.         /**
  115.          * @param {Object} time
  116.          * 定时器
  117.          */
  118.         timeSleep(time) {
  119.                 return new Promise((resolve) => setTimeout(resolve,time))
  120.         }
  121.        
  122.        
  123.         /**
  124.          * 根据日期加减计算日期
  125.          * @param dayCount
  126.          */
  127.         countDateStr(dayCount) {
  128.                 let dd = new Date();
  129.                 dd.setDate(dd.getDate()+ dayCount);
  130.                 let ms = dd.getTime();
  131.                 return new Date(ms).toJSON();
  132.         }
  133.        
  134.         /**
  135.          * @param {Object} time
  136.          * 日期中时间置0
  137.          */
  138.         setTimeZero(time) {
  139.                 return time.slice(0,10) + 'T00:00:00.000+00:00';
  140.         }
  142. }
  145. export default new TimeMethod();
复制代码




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

石小疯

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表