设为首页收藏本站
切换到窄版

PHP技术论坛

搜索
PHP技术论坛»PHP论坛 › 微信开发 › 微信小程序 › 微信小程序即时通讯私聊UI
返回列表 发帖
查看: 483|回复: 0
打印 上一主题 下一主题

微信小程序即时通讯私聊UI

[复制链接]
admin

83

主题

88

帖子

411

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
411
跳转到指定楼层
楼主
发表于 2022-5-7 12:44:51 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
这个UI感觉不错 基本功能都已经实现

地址：https://blog.csdn.net/qq_41366114/article/details/123121930

WML代码

  1. <view>
  2.                 <view class="content" bindtouchstart="hideDrawer">
  3.                         <scroll-view class="msg-list {{popupLayerClass}}" scroll-y="true"
  4.                                 scroll-with-animation="{{scrollAnimation}}" scroll-top="{{scrollTop}}" scroll-into-view="{{scrollToView}}"
  5.                                 bindscrolltoupper="loadHistory" upper-threshold="50">
  6.                                 <!-- 加载历史数据waitingUI -->
  7.                                 <view class="loading">
  8.                                         <view class="spinner">
  9.                                                 <view class="rect1"></view>
  10.                                                 <view class="rect2"></view>
  11.                                                 <view class="rect3"></view>
  12.                                                 <view class="rect4"></view>
  13.                                                 <view class="rect5"></view>
  14.                                         </view>
  15.                                 </view>
  16.                                 <view class="row" wx:for="{{msgList}}" id="{{'msg'+item.msg.id}}"  wx:key="item">
  17.                                         <!-- 系统消息 -->
  18.                                         <block wx:if="{{item.type=='system'}}">
  19.                                                 <view class="system">
  20.                                                         <!-- 文字消息 -->
  21.                                                         <view wx:if="{{item.msg.type=='text'}}" class="text">
  22.                                                                 {{item.msg.content.text}}
  23.                                                         </view>
  24.                                                         <!-- 领取红包消息 -->
  25.                                                         <view wx:if="{{item.msg.type=='redEnvelope'}}"  class="red-envelope">
  26.                                                                 <image src="/static/chat/red-envelope-chat.png"></image>
  27.                                                                 {{item.msg.content.text}}
  28.                                                         </view>
  29.                                                 </view>
  30.                                         </block>
  31.                                         <!-- 用户消息 -->
  32.                                         <block wx:if="{{item.type=='user'}}">
  33.                                                 <!-- 自己发出的消息 -->
  34.                                                 <view class="my" wx:if="{{item.msg.userinfo.uid==myuid}}">
  35.                                                         <!-- 左-消息 -->
  36.                                                         <view class="left">
  37.                                                                 <!-- 文字消息 -->
  38.                                                                 <view wx:if="{{item.msg.type=='text'}}" class="bubble">
  39.                                                                         <rich-text nodes="{{item.msg.content.text}}"></rich-text>
  40.                                                                 </view>
  41.                                                                 <!-- 语言消息 -->
  42.                                                                 <view wx:if="{{item.msg.type=='voice'}}" class="bubble voice {{playMsgid == item.msg.id?'play':''}}" data-msg="{{item.msg}}" bindtap="playVoice">
  43.                                                                         <view class="length">{{item.msg.content.length}}</view>
  44.                                                                         <view class="icon my-voice"></view>
  45.                                                                 </view>
  46.                                                                 <!-- 图片消息 -->
  47.                                                                 <view wx:if="{{item.msg.type=='img'}}" class="bubble img" data-msg="{{item.msg}}" bindtap="showPic">
  48.                                                                         <image src="{{item.msg.content.url}}"
  49.                                                                                 style="width:{{item.msg.content.w}}px;height:{{item.msg.content.h}}px;">
  50.                                                                         </image>
  51.                                                                 </view>
  52.                                                                 <!-- 红包 -->
  53.                                                                 <view wx:if="{{item.msg.type=='redEnvelope'}}" class="bubble red-envelope" data-index="{{index}}" data-msg="{{item.msg}}"
  54.                                                                         bindtap="openRedEnvelope">
  55.                                                                         <image src="/static/chat/red-envelope.png"></image>
  56.                                                                         <view class="tis">
  57.                                                                                 <!-- 点击开红包 -->
  58.                                                                         </view>
  59.                                                                         <view class="blessing">
  60.                                                                                 {{item.msg.content.blessing}}
  61.                                                                         </view>
  62.                                                                 </view>

  64.                                                         </view>
  65.                                                         <!-- 右-头像 -->
  66.                                                         <view class="right">
  67.                                                                 <image src="{{item.msg.userinfo.face}}"></image>
  68.                                                         </view>
  69.                                                 </view>
  70.                                                 <!-- 别人发出的消息 -->
  71.                                                 <view class="other" wx:if="{{item.msg.userinfo.uid!=myuid}}">
  72.                                                         <!-- 左-头像 -->
  73.                                                         <view class="left">
  74.                                                                 <image src="{{item.msg.userinfo.face}}"></image>
  75.                                                         </view>
  76.                                                         <!-- 右-用户名称-时间-消息 -->
  77.                                                         <view class="right">
  78.                                                                 <view class="username">
  79.                                                                         <view class="name">{{item.msg.userinfo.username}}</view>
  80.                                                                         <view class="time">{{item.msg.time}}</view>
  81.                                                                 </view>
  82.                                                                 <!-- 文字消息 -->
  83.                                                                 <view wx:if="{{item.msg.type=='text'}}" class="bubble">
  84.                                                                         <rich-text nodes="{{item.msg.content.text}}"></rich-text>
  85.                                                                 </view>
  86.                                                                 <!-- 语音消息 -->
  87.                                                                 <view wx:if="{{item.msg.type=='voice'}}" data-msg="{{item.msg}}" class="bubble voice {{playMsgid == item.msg.id?'play':''}}" bindtap="playVoice">
  88.                                                                         <view class="icon other-voice"></view>
  89.                                                                         <view class="length">{{item.msg.content.length}}</view>
  90.                                                                 </view>
  91.                                                                 <!-- 图片消息 -->
  92.                                                                 <view wx:if="{{item.msg.type=='img'}}" data-msg="{{item.msg}}" class="bubble img" bindtap="showPic">
  93.                                                                         <image src="{{item.msg.content.url}}"
  94.                                                                                    style="width:{{item.msg.content.w}}px;height:{{item.msg.content.h}}px;">
  95.                                                                         </image>
  96.                                                                 </view>
  97.                                                                 <!-- 红包 -->
  98.                                                                 <view wx:if="{{item.msg.type=='redEnvelope'}}" class="bubble red-envelope" data-msg="{{item.msg}}" data-index="{{index}}"
  99.                                                                         bindtap="openRedEnvelope">
  100.                                                                         <image src="/static/chat/red-envelope.png"></image>
  101.                                                                         <view class="tis">
  102.                                                                                 <!-- 点击开红包 -->
  103.                                                                         </view>
  104.                                                                         <view class="blessing">
  105.                                                                                 {{item.msg.content.blessing}}
  106.                                                                         </view>
  107.                                                                 </view>
  108.                                                         </view>
  109.                                                 </view>
  110.                                         </block>
  111.                                 </view>
  112.                         </scroll-view>
  113.                 </view>
  114.                 <!-- 抽屉栏 -->
  115.                 <view class="popup-layer {{popupLayerClass}}"  catchtouchmove="discard">
  116.                         <!-- 表情 -->
  117.                         <swiper class="emoji-swiper {{hideEmoji?'hidden':''}}" indicator-dots="true" duration="150">
  118.                                 <swiper-item wx:for="{{emojiList}}" wx:for-item="page" wx:key="{{page}}">
  119.                                         <view wx:for="{{page}}"  wx:for-item="em" wx:key="{{em}}" data-em="{{em}}" bindtap="addEmoji">
  120.                                                 <!-- https://zhoukaiwen.com/img/icon/emojj1/1.png -->
  121.                                                 <image mode="widthFix" src="https://zhoukaiwen.com/img/icon/emojj1/{{em.url}}"></image>
  122.                                         </view>
  123.                                 </swiper-item>
  124.                         </swiper>
  125.                         <!-- 更多功能 相册-拍照-红包 -->
  126.                         <view class="more-layer {{hidden?'hideMore':''}}">
  127.                                 <view class="list">
  128.                                         <view class="box" bindtap="chooseImage">
  129.                                                 <view class="icon tupian2"></view>
  130.                                         </view>
  131.                                         <view class="box" bindtap="camera">
  132.                                                 <view class="icon paizhao"></view>
  133.                                         </view>
  134.                                         <view class="box" bindtap="handRedEnvelopes">
  135.                                                 <view class="icon hongbao"></view>
  136.                                         </view>
  137.                                 </view>
  138.                         </view>
  139.                 </view>
  140.                 <!-- 底部输入栏 -->
  141.                 <view class="input-box cu-bar tabbar {{popupLayerClass}}" catchtouchmove="discard">
  142.                         <view class="voice">
  143.                                 <view class="icon {{isVoice?'jianpan':'yuyin'}}" bindtap="switchVoice"></view>
  144.                         </view>
  145.                         <view class="textbox">
  146.                                 <view class="voice-mode {{isVoice?'':'hidden'}}{{recording?'recording':''}}"
  147.                                         bindtouchstart="voiceBegin" catchtouchmove="voiceIng" bindtouchend="voiceEnd"
  148.                                         bindtouchcancel="voiceCancel">{{voiceTis}}</view>
  149.                                 <view class="text-mode {{isVoice?'hidden':''}}">
  150.                                         <view class="box">
  151.                                                 <textarea auto-height="true" bindinput="inputtextMsg" value="{{textMsg}}" bindfocus="textareaFocus" />
  152.                                         </view>
  153.                                         <view class="em" bindtap="chooseEmoji">
  154.                                                 <view class="icon biaoqing"></view>
  155.                                         </view>
  156.                                 </view>
  157.                         </view>
  158.                         <view class="more" bindtap="showMore">
  159.                                 <view class="icon add"></view>
  160.                         </view>
  161.                         <view class="send {{isVoice?'hidden':''}}" bindtap="sendText">
  162.                                 <view class="btn">发送</view>
  163.                         </view>
  164.                 </view>
  165.                 <!-- 录音UI效果 -->
  166.                 <view class="record {{recording?'':'hidden'}}">
  167.                         <view class="ing {{willStop?'hidden':''}}">
  168.                                 <view class="icon luyin2"></view>
  169.                         </view>
  170.                         <view class="cancel {{willStop?'':'hidden'}}">
  171.                                 <view class="icon chehui"></view>
  172.                         </view>
  173.                         <view class="tis {{willStop?'change':''}}">{{recordTis}}</view>
  174.                 </view>
  175.                 <!-- 红包弹窗 -->
  176.                 <view class="windows {{windowsState}}">
  177.                         <!-- 遮罩层 -->
  178.                         <view class="mask" catch:touchmove="discard" bindtap="closeRedEnvelope"></view>
  179.                         <view class="layer" catch:touchmove="discard">
  180.                                 <view class="open-redenvelope">
  181.                                         <view class="top">
  182.                                                 <view class="close-btn">
  183.                                                         <view class="icon close" bindtap="closeRedEnvelope"></view>
  184.                                                 </view>
  185.                                                 <image src="https://zhoukaiwen.com/img/qdpz/face/face_1.jpg"></image>
  186.                                         </view>
  187.                                         <view class="from">来自{{redenvelopeData.from}}</view>
  188.                                         <view class="blessing">{{redenvelopeData.blessing}}</view>
  189.                                         <view class="money">{{redenvelopeData.money}}</view>
  190.                                         <view class="showDetails" data-rid="{{redenvelopeData.rid}}" bindtap="toDetails">
  191.                                                 查看领取详情 <view class="icon to"></view>
  192.                                         </view>
  193.                                 </view>
  194.                         </view>

  196.                 </view>
  197.         </view>
复制代码



CSS代码：


  1. .cu-bar.tabbar {
  2.   padding: 0;
  3.   /* height: calc(100rpx + env(safe-area-inset-bottom) / 2); */
  4.   padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  5. }
  6. .cu-bar {
  7.   display: flex;
  8.   position: relative;
  9.   align-items: center;
  10.   min-height: 100rpx;
  11.   justify-content: space-between;
  12. }
  13. page {
  14.   background-color: #e5e5e5;
  15. }
  16. @font-face {
  17.   font-family: "HMfont-home";
  18.   src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAn8AAsAAAAAE1wAAAmvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFDAqWYJI9ATYCJANACyIABCAFhFUHgV8bThBRlFFWNdkXBXbDsSFQq221McNWrxUbYqGhiTju98MTeXqNh/9fo90388cEMe0bwSOJRIjavZIgESqnE5J5JqQVDZH/XdNfoHSAjqKqRsA+Tf/Ruya33E/bkdHsJtycY2XWAGbM5oenzf173A3lHrEilsmMbu74Y5VmYtxpgza9DMxkWL0gfjGbGRE54AL2f2ut3h2u8Q7RaZRCjDPLIv8cfAUR30MtEUWbSReVJkk0RB4lWWkNg7WVA1sBKmIUdr0uzibQOmxA4vrWwQXkJUweKHPfdwXkA+FSik2o1aVizyTegEKdvWINwGv59bEGY9GeTJFjW95pswIrzz3LYi//0O4JEaDrY3DZjxwXgUR8V3IfIeXARaloVRXT3mK/tsi3LubcJfese8l96Xbd1l1ve2z7eJp5lv3zB7URSdJNYd3Dfm7UUxxkGu0sLFcbVEa5pP3D6/QmokQw3OGzfJp/2kBkLJYQDYuziJbFJUSweIkoWXQRNYuEGFi0BLzFOhAjS4+InKUPRGI5I2a+kg7VSWUGoXoos2BNmGIWexwFroD8IUD6C1A9lYp8F3ClwsFgcgPdNpN08v1czkEOJ4aeieaC3QyVfb9PX2kbn9/0CwTeNAm79H1Kc2x3i9C7LcEZtMSLfE6T4aM+YWOm06dZ5cm9I+xoYw+rqGlScKKlHytu9h6Dw0E5nXK7nbTZknT1jFldR9cuzNMz9Srf7FydqpYW5mRr6Dq1OC9HqzYzoiw1cjohV2tX1Ji1K9bSdVkEbaxS1xQwpmpVpUFheyyzPyGdbXKHexkByib+vtgeK1X75xKqWl+grUNIbRZDXT31tBMiPZAyF0KmniCQhSgACkh5+gIxtvTS/si+VjbAuY6SMdCzbqInzwkjk5ENzMCkNv+ghQQ0qSSAUGmAMQoBozoAIrUe6qpzM+tma1T1jDgvVzdBWcIcLT170njGQU3cCpnUTSdkHH3ltwPHpKotTIP6HH12Lvd4czCWgbJYhY1U5ddlTCICSs1is0in8tXExk7VVRuMQhIQGgOtFcolPmMkIqDVduTGEOn1jI4gFERmSUsv3rGmoKUEQLITLUyzqpFukq8T6U+omVQsT8XHxsnipPEyBAlKNmkNMlMJgOT5Tpsoo2RGP3lOTQyk5GRBgJKw2WQsarWzSa1aLF/+UBk2PkA3wEkBM/RwOLJ0ORWiVCR3YYAAFyIlAdaNqEnmh0sTqOsAq97R85Jt+HGHrNKWgDHmxOPxumKmRGzudayPtogu9D2Zx688C3D6XJSgpgF6MJbomdtyOYBgcXOGSgMAPXqy+F11pMYHlFLCkkKM0S1T+U5SN0Ynh39SxcxmTPNHrTFIuieyxYgZXSDUAPpLLT2ZciVvihOh05k+JIAjoL7HtNsVFc5Rl+1hgAAIlNqGX3GEK0llMm0nZUdmhQzymg3Q9j6yO4FQsmqtQbXmZ+z+sOynUrt3nmbeXu3MYW9f8y38128LpWAVeyLMz4cTORbEDPYKHU19Oyx0OF12GIhfEx+/RRIm2RzPeIPE2yYRM7HBWBx+GvANWXAlMYcmWriz1/Tt2bk+jq7CdOzMu5zsn3zZXwg2Gu14YCBuh3NggN0DI8BbJpCXZb2I4xh+kdAmbU0IA6HYquya81nqYSk87Xgi35ur4HnxZWEvnoLrzbOEjHmJiY2JjV6I8c4ynSEsJTKcHxuWYPRFFleV2Sbi0Dsk4XmDSToXTMnUnW/PW9J9W4UCgP+h0rTi9tiJd6qQgk2lPI/KKeybAPx+c7vZHdimbruzyCP9iZvd0VuBuIniuXirHQ8oG2IThFIUI8QOhjfNMg86GH4Bv4ixLlr4BDi2wDDwXTYYTgfnBJur1nAw2yGngw96JhQo+48cMWVE8kWwcA55ZuzwkSP/mpp9D6wFm2e1Bc8cPVraL2Ng7y6KfSNHqQfTYByYMmbT73WNmwZs6m8sBR54XCndTHwvu6v+8N+Jze9/jeGd8bpoHePtMv0/9U6e78bTtf+aly55P40cNtJ3PH3U6xQ9DkRNos+Chp2TpNwX4lZOwkTa4nOLPxpMLc8Sm0srSwD6Y1KW7ftPZ68x3DWS8d4cJbAKE6QJEfRrhAafMLV0RoCRLhKdBaJzNtzPD7dxLIgZ7Al4006exyHEYXMewjqApFokPRIu9FvLiPf96uWlpuZmRZKiH1i0OCNj1ar7zSDqYiRbCQsMrKUXZswxBkQEbCmv2RJgKK82+UcGbpk+0woVSxekQrYCzp4Hk30E3oHhAh+4fLcOPCfzOVu3cvKkHAWzNAVyjAyOQsrJix47n0OZpbTUDKdJp8CZs+BkAKfMnDkF+kJmmrcN4OSZs8CRuwZ+N76gampCxtj83XWO5X1GYc7hIypq+N32eTe6Wr/GfXW5GukBLnvJ1gEPhlmsuUHzg3Osp/vJCZ4flGsFf27fjV18spjdTfQUuVANcgldRA3hKhSUutCGgGhDaMo0tXMHwiUq3gG5entO2xmnECa3H53AjRpKFFYIK7qrHjMJ75sEC91BPlGc0TlZY9qlsdcuZaXy0D3hfz4cmLd2WzbK3Xhhdw7c2VLCxtxsFCMEo8bArEww9ruOrc5joK9g1xp85MghQ4wyuPV71+/tMVxAMmzA1lSt+WmbjFkwL/lV6az7APzZ5qvVmmy7b1bJGrTDhmRfMBYbWMZmNOu3bJdPlLL/5WOR2XZCTJpmU4mx8lv9Fg76T8NagO4vUacJ+n/Sr0b/LYb8+1z5QCb935a0m6WWYXzwh4DO2Sa9g2jEnJ6tYwTU5jp7N2RmaHkn/gjEb/fXpmpXbkpAGaAv7pnKAfdc6bg4GZx1L3QuQ8lVC3BvXbC8f2eHQEqkBuc9aO6h9849M3oPucrgAyQY/HEv7PYJJQy23Ft3/R+xczqmsHWDgrDCyzfcl1o5ehKxnUOr5Bm6NhTGR4u1rtDEvlZ8dGgklLeNCk3ZbeKaO0bkcMfoKt+6ng/DUPPI6AAlDXlE0dzwsKPadkjqKjDXGEgg4b2CK7vx65M0xSlPmNsOA58/g1xWSDDKeq/KV5AR89+zc6OGjKSKtxUqR4NtF47VuMZemcTBDQxGqzqqrXIMCnm2xkXq1QJIIkO8EpmROcOkIyevYmhUqurWBmgCe4U5WJFHiiLKqKKOJtrooo8hxphihl6g5bGv3MAXkfBvPaFbVq6ga4Uq+wWdEfo6NVTmr1oVkYoye2NvfCWLmYQx0sjozFSxszhZ4Ctjb7QtavLQDNa0L5HRZQYJYxrNLbJR4QhZvOV46Fm/lqB428nsrJSx/OwbEgYA") format("woff2");
  19. }
  20. .icon {
  21.   font-family: "HMfont-home" !important;
  22.   font-size: 56rpx;
  23.   font-style: normal;
  24.   color: #333;
  25. }
  26. .icon.biaoqing:before {
  27.   content: "\e797";
  28. }
  29. .icon.jianpan:before {
  30.   content: "\e7b2";
  31. }
  32. .icon.yuyin:before {
  33.   content: "\e805";
  34. }
  35. .icon.tupian:before {
  36.   content: "\e639";
  37. }
  38. .icon.chehui:before {
  39.   content: "\e904";
  40. }
  41. .icon.luyin:before {
  42.   content: "\e905";
  43. }
  44. .icon.luyin2:before {
  45.   content: "\e677";
  46. }
  47. .icon.other-voice:before {
  48.   content: "\e667";
  49. }
  50. .icon.my-voice:before {
  51.   content: "\e906";
  52. }
  53. .icon.hongbao:before {
  54.   content: "\e626";
  55. }
  56. .icon.tupian2:before {
  57.   content: "\e674";
  58. }
  59. .icon.paizhao:before {
  60.   content: "\e63e";
  61. }
  62. .icon.add:before {
  63.   content: "\e655";
  64. }
  65. .icon.close:before {
  66.   content: "\e607";
  67. }
  68. .icon.to:before {
  69.   content: "\e675";
  70. }
  71. .hidden {
  72.   display: none !important;
  73. }
  74. .popup-layer {
  75.   transition: all .15s linear;
  76.   width: 100%;
  77.   height: 42vw;
  78.   padding: 20rpx 2%;
  79.   background-color: #f3f3f3;
  80.   border-top: solid 1rpx #ddd;
  81.   position: fixed;
  82.   z-index: 20;
  83.   top: 100%;
  84.   box-sizing: border-box;
  85. }
  86. .popup-layer.showLayer {
  87.   -webkit-transform: translate3d(0, -43vw, 0);
  88.           transform: translate3d(0, -43vw, 0);
  89. }
  90. .popup-layer .emoji-swiper {
  91.   height: 40vw;
  92. }
  93. .popup-layer .emoji-swiper swiper-item {
  94.   display: flex;
  95.   align-content: flex-start;
  96.   flex-wrap: wrap;
  97. }
  98. .popup-layer .emoji-swiper swiper-item view {
  99.   width: 12vw;
  100.   height: 12vw;
  101.   display: flex;
  102.   justify-content: center;
  103.   align-items: center;
  104. }
  105. .popup-layer .emoji-swiper swiper-item view image {
  106.   width: 8.4vw;
  107.   height: 8.4vw;
  108. }
  109. .popup-layer .more-layer {
  110.   width: 100%;
  111.   height: 42vw;
  112. }
  113. .popup-layer .more-layer .list {
  114.   width: 100%;
  115.   display: flex;
  116.   flex-wrap: wrap;
  117. }
  118. .popup-layer .more-layer .list .box {
  119.   width: 18vw;
  120.   height: 18vw;
  121.   border-radius: 20rpx;
  122.   background-color: #fff;
  123.   display: flex;
  124.   justify-content: center;
  125.   align-items: center;
  126.   margin: 0 3vw 2vw 3vw;
  127. }
  128. .popup-layer .more-layer .list .box .icon {
  129.   font-size: 70rpx;
  130. }
  131. .input-box {
  132.   width: 100%;
  133.   min-height: 100rpx;
  134.   padding: 0 1%;
  135.   background-color: #f2f2f2;
  136.   display: flex;
  137.   position: fixed;
  138.   z-index: 20;
  139.   bottom: -2rpx;
  140.   transition: all .15s linear;
  141.   border-bottom: solid 1rpx #ddd;
  142. }
  143. .input-box.showLayer {
  144.   -webkit-transform: translate3d(0, -43vw, 0);
  145.           transform: translate3d(0, -43vw, 0);
  146. }
  147. .input-box .voice, .input-box .more {
  148.   flex-shrink: 0;
  149.   width: 90rpx;
  150.   height: 100rpx;
  151.   display: flex;
  152.   justify-content: center;
  153.   align-items: center;
  154. }
  155. .input-box .send {
  156.   flex-shrink: 0;
  157.   width: 100rpx;
  158.   height: 100rpx;
  159.   display: flex;
  160.   align-items: center;
  161. }
  162. .input-box .send .btn {
  163.   width: 90rpx;
  164.   height: 56rpx;
  165.   display: flex;
  166.   justify-content: center;
  167.   align-items: center;
  168.   background: linear-gradient(to right, #f09b37, #eb632c);
  169.   color: #fff;
  170.   border-radius: 6rpx;
  171.   font-size: 24rpx;
  172. }
  173. .input-box .textbox {
  174.   width: 100%;
  175.   min-height: 70rpx;
  176. }
  177. .input-box .textbox .voice-mode {
  178.   width: calc(100% - 2rpx);
  179.   height: 68rpx;
  180.   border-radius: 70rpx;
  181.   border: solid 1rpx #cdcdcd;
  182.   display: flex;
  183.   justify-content: center;
  184.   align-items: center;
  185.   font-size: 28rpx;
  186.   background-color: #fff;
  187.   color: #555;
  188. }
  189. .input-box .textbox .voice-mode.recording {
  190.   background-color: #e5e5e5;
  191. }
  192. .input-box .textbox .text-mode {
  193.   width: 100%;
  194.   min-height: 70rpx;
  195.   display: flex;
  196.   background-color: #fff;
  197.   border-radius: 40rpx;
  198. }
  199. .input-box .textbox .text-mode .box {
  200.   width: 100%;
  201.   padding-left: 30rpx;
  202.   min-height: 70rpx;
  203.   display: flex;
  204.   align-items: center;
  205. }
  206. .input-box .textbox .text-mode .box textarea {
  207.   width: 100%;
  208. }
  209. .input-box .textbox .text-mode .em {
  210.   flex-shrink: 0;
  211.   width: 80rpx;
  212.   padding-left: 10rpx;
  213.   height: 70rpx;
  214.   display: flex;
  215.   justify-content: center;
  216.   align-items: center;
  217. }
  218. .record {
  219.   width: 40vw;
  220.   height: 40vw;
  221.   position: fixed;
  222.   top: 55%;
  223.   left: 30%;
  224.   background-color: rgba(0, 0, 0, 0.6);
  225.   border-radius: 20rpx;
  226. }
  227. .record .ing {
  228.   width: 100%;
  229.   height: 30vw;
  230.   display: flex;
  231.   justify-content: center;
  232.   align-items: center;
  233. }
  234. @-webkit-keyframes volatility {
  235. 0% {
  236.     background-position: 0% 130%;
  237. }
  238. 20% {
  239.     background-position: 0% 150%;
  240. }
  241. 30% {
  242.     background-position: 0% 155%;
  243. }
  244. 40% {
  245.     background-position: 0% 150%;
  246. }
  247. 50% {
  248.     background-position: 0% 145%;
  249. }
  250. 70% {
  251.     background-position: 0% 150%;
  252. }
  253. 80% {
  254.     background-position: 0% 155%;
  255. }
  256. 90% {
  257.     background-position: 0% 140%;
  258. }
  259. 100% {
  260.     background-position: 0% 135%;
  261. }
  262. }
  263. @keyframes volatility {
  264. 0% {
  265.     background-position: 0% 130%;
  266. }
  267. 20% {
  268.     background-position: 0% 150%;
  269. }
  270. 30% {
  271.     background-position: 0% 155%;
  272. }
  273. 40% {
  274.     background-position: 0% 150%;
  275. }
  276. 50% {
  277.     background-position: 0% 145%;
  278. }
  279. 70% {
  280.     background-position: 0% 150%;
  281. }
  282. 80% {
  283.     background-position: 0% 155%;
  284. }
  285. 90% {
  286.     background-position: 0% 140%;
  287. }
  288. 100% {
  289.     background-position: 0% 135%;
  290. }
  291. }
  292. .record .ing .icon {
  293.   background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
  294.   background-size: 100% 200%;
  295.   -webkit-animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
  296.           animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
  297.   -webkit-background-clip: text;
  298.   -webkit-text-fill-color: transparent;
  299.   font-size: 150rpx;
  300.   color: #f09b37;
  301. }
  302. .record .cancel {
  303.   width: 100%;
  304.   height: 30vw;
  305.   display: flex;
  306.   justify-content: center;
  307.   align-items: center;
  308. }
  309. .record .cancel .icon {
  310.   color: #fff;
  311.   font-size: 150rpx;
  312. }
  313. .record .tis {
  314.   width: 100%;
  315.   height: 10vw;
  316.   display: flex;
  317.   justify-content: center;
  318.   font-size: 28rpx;
  319.   color: #fff;
  320. }
  321. .record .tis.change {
  322.   color: #f09b37;
  323. }
  324. .content {
  325.   width: 100%;
  326. }
  327. .content .msg-list {
  328.   width: 100%;
  329.   padding: 0 2%;
  330.   position: absolute;
  331.   top: 0;
  332.   bottom: 100rpx;
  333.   padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  334.   box-sizing: border-box;
  335. }
  336. .content .msg-list .loading {
  337.   display: flex;
  338.   justify-content: center;
  339. }
  340. @-webkit-keyframes stretchdelay {
  341. 0%, 40%, 100% {
  342.     -webkit-transform: scaleY(0.6);
  343.             transform: scaleY(0.6);
  344. }
  345. 20% {
  346.     -webkit-transform: scaleY(1);
  347.             transform: scaleY(1);
  348. }
  349. }
  350. @keyframes stretchdelay {
  351. 0%, 40%, 100% {
  352.     -webkit-transform: scaleY(0.6);
  353.             transform: scaleY(0.6);
  354. }
  355. 20% {
  356.     -webkit-transform: scaleY(1);
  357.             transform: scaleY(1);
  358. }
  359. }
  360. .content .msg-list .loading .spinner {
  361.   margin: 20rpx 0;
  362.   width: 60rpx;
  363.   height: 100rpx;
  364.   display: flex;
  365.   align-items: center;
  366.   justify-content: space-between;
  367. }
  368. .content .msg-list .loading .spinner view {
  369.   background-color: #f06c7a;
  370.   height: 50rpx;
  371.   width: 6rpx;
  372.   border-radius: 6rpx;
  373.   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  374.           animation: stretchdelay 1.2s infinite ease-in-out;
  375. }
  376. .content .msg-list .loading .spinner .rect2 {
  377.   -webkit-animation-delay: -1.1s;
  378.           animation-delay: -1.1s;
  379. }
  380. .content .msg-list .loading .spinner .rect3 {
  381.   -webkit-animation-delay: -1.0s;
  382.           animation-delay: -1.0s;
  383. }
  384. .content .msg-list .loading .spinner .rect4 {
  385.   -webkit-animation-delay: -0.9s;
  386.           animation-delay: -0.9s;
  387. }
  388. .content .msg-list .loading .spinner .rect5 {
  389.   -webkit-animation-delay: -0.8s;
  390.           animation-delay: -0.8s;
  391. }
  392. .content .msg-list .row {
  393.   padding: 20rpx 0;
  394. }
  395. .content .msg-list .row .system {
  396.   display: flex;
  397.   justify-content: center;
  398. }
  399. .content .msg-list .row .system view {
  400.   padding: 0 30rpx;
  401.   height: 50rpx;
  402.   display: flex;
  403.   justify-content: center;
  404.   align-items: center;
  405.   background-color: #c9c9c9;
  406.   color: #fff;
  407.   font-size: 24rpx;
  408.   border-radius: 40rpx;
  409. }
  410. .content .msg-list .row .system .red-envelope image {
  411.   margin-right: 5rpx;
  412.   width: 30rpx;
  413.   height: 30rpx;
  414. }
  415. .content .msg-list .row:first-child {
  416.   margin-top: 20rpx;
  417. }
  418. .content .msg-list .row .my .left, .content .msg-list .row .other .right {
  419.   width: 100%;
  420.   display: flex;
  421. }
  422. .content .msg-list .row .my .left .bubble, .content .msg-list .row .other .right .bubble {
  423.   max-width: 70%;
  424.   min-height: 50rpx;
  425.   border-radius: 10rpx;
  426.   padding: 15rpx 20rpx;
  427.   display: flex;
  428.   align-items: center;
  429.   font-size: 32rpx;
  430.   word-break: break-word;
  431. }
  432. .content .msg-list .row .my .left .bubble.img, .content .msg-list .row .other .right .bubble.img {
  433.   background-color: transparent;
  434.   padding: 0;
  435.   overflow: hidden;
  436. }
  437. .content .msg-list .row .my .left .bubble.img image, .content .msg-list .row .other .right .bubble.img image {
  438.   max-width: 350rpx;
  439.   max-height: 350rpx;
  440. }
  441. .content .msg-list .row .my .left .bubble.red-envelope, .content .msg-list .row .other .right .bubble.red-envelope {
  442.   background-color: transparent;
  443.   padding: 0;
  444.   overflow: hidden;
  445.   position: relative;
  446.   justify-content: center;
  447.   align-items: flex-start;
  448. }
  449. .content .msg-list .row .my .left .bubble.red-envelope image, .content .msg-list .row .other .right .bubble.red-envelope image {
  450.   width: 250rpx;
  451.   height: 313rpx;
  452. }
  453. .content .msg-list .row .my .left .bubble.red-envelope .tis, .content .msg-list .row .other .right .bubble.red-envelope .tis {
  454.   position: absolute;
  455.   top: 6%;
  456.   font-size: 26rpx;
  457.   color: #9c1712;
  458. }
  459. .content .msg-list .row .my .left .bubble.red-envelope .blessing, .content .msg-list .row .other .right .bubble.red-envelope .blessing {
  460.   position: absolute;
  461.   bottom: 14%;
  462.   color: #e9b874;
  463.   width: 80%;
  464.   text-align: center;
  465.   overflow: hidden;
  466.   display: -webkit-box;
  467.   -webkit-box-orient: vertical;
  468.   -webkit-line-clamp: 2;
  469. }
  470. .content .msg-list .row .my .left .bubble.voice .icon, .content .msg-list .row .other .right .bubble.voice .icon {
  471.   font-size: 40rpx;
  472.   display: flex;
  473.   align-items: center;
  474. }
  475. .content .msg-list .row .my .left .bubble.voice .icon:after, .content .msg-list .row .other .right .bubble.voice .icon:after {
  476.   content: " ";
  477.   width: 53rpx;
  478.   height: 53rpx;
  479.   border-radius: 100%;
  480.   position: absolute;
  481.   box-sizing: border-box;
  482. }
  483. .content .msg-list .row .my .left .bubble.voice .length, .content .msg-list .row .other .right .bubble.voice .length {
  484.   font-size: 28rpx;
  485. }
  486. .content .msg-list .row .my .right, .content .msg-list .row .other .left {
  487.   flex-shrink: 0;
  488.   width: 80rpx;
  489.   height: 80rpx;
  490. }
  491. .content .msg-list .row .my .right image, .content .msg-list .row .other .left image {
  492.   width: 80rpx;
  493.   height: 80rpx;
  494.   border-radius: 10rpx;
  495. }
  496. .content .msg-list .row .my {
  497.   width: 100%;
  498.   display: flex;
  499.   justify-content: flex-end;
  500. }
  501. .content .msg-list .row .my .left {
  502.   min-height: 80rpx;
  503.   align-items: center;
  504.   justify-content: flex-end;
  505. }
  506. .content .msg-list .row .my .left .bubble {
  507.   background-color: #f06c7a;
  508.   color: #fff;
  509. }
  510. .content .msg-list .row .my .left .bubble.voice .icon {
  511.   color: #fff;
  512. }
  513. .content .msg-list .row .my .left .bubble.voice .length {
  514.   margin-right: 20rpx;
  515. }
  516. @-webkit-keyframes my-play {
  517. 0% {
  518.     -webkit-transform: translateX(80%);
  519.             transform: translateX(80%);
  520. }
  521. 100% {
  522.     -webkit-transform: translateX(0%);
  523.             transform: translateX(0%);
  524. }
  525. }
  526. @keyframes my-play {
  527. 0% {
  528.     -webkit-transform: translateX(80%);
  529.             transform: translateX(80%);
  530. }
  531. 100% {
  532.     -webkit-transform: translateX(0%);
  533.             transform: translateX(0%);
  534. }
  535. }
  536. .content .msg-list .row .my .left .bubble.play .icon:after {
  537.   border-left: solid 10rpx rgba(240, 108, 122, 0.5);
  538.   -webkit-animation: my-play 1s linear infinite;
  539.           animation: my-play 1s linear infinite;
  540. }
  541. .content .msg-list .row .my .right {
  542.   margin-left: 15rpx;
  543. }
  544. .content .msg-list .row .other {
  545.   width: 100%;
  546.   display: flex;
  547. }
  548. .content .msg-list .row .other .left {
  549.   margin-right: 15rpx;
  550. }
  551. .content .msg-list .row .other .right {
  552.   flex-wrap: wrap;
  553. }
  554. .content .msg-list .row .other .right .username {
  555.   width: 100%;
  556.   height: 45rpx;
  557.   line-height: 30rpx;
  558.   font-size: 24rpx;
  559.   color: #999;
  560.   display: flex;
  561. }
  562. .content .msg-list .row .other .right .username .name {
  563.   margin-right: 50rpx;
  564. }
  565. .content .msg-list .row .other .right .bubble {
  566.   background-color: #fff;
  567.   color: #333;
  568. }
  569. .content .msg-list .row .other .right .bubble.voice .icon {
  570.   color: #333;
  571. }
  572. .content .msg-list .row .other .right .bubble.voice .length {
  573.   margin-left: 20rpx;
  574. }
  575. @-webkit-keyframes other-play {
  576. 0% {
  577.     -webkit-transform: translateX(-80%);
  578.             transform: translateX(-80%);
  579. }
  580. 100% {
  581.     -webkit-transform: translateX(0%);
  582.             transform: translateX(0%);
  583. }
  584. }
  585. @keyframes other-play {
  586. 0% {
  587.     -webkit-transform: translateX(-80%);
  588.             transform: translateX(-80%);
  589. }
  590. 100% {
  591.     -webkit-transform: translateX(0%);
  592.             transform: translateX(0%);
  593. }
  594. }
  595. .content .msg-list .row .other .right .bubble.play .icon:after {
  596.   border-right: solid 10rpx rgba(255, 255, 255, 0.8);
  597.   -webkit-animation: other-play 1s linear infinite;
  598.           animation: other-play 1s linear infinite;
  599. }
  600. .windows .mask {
  601.   position: fixed;
  602.   top: 100%;
  603.   width: 100%;
  604.   height: 100%;
  605.   z-index: 1000;
  606.   background-color: rgba(0, 0, 0, 0.6);
  607.   opacity: 0;
  608.   transition: opacity .2s ease-out;
  609. }
  610. .windows .layer {
  611.   position: fixed;
  612.   width: 80%;
  613.   height: 70%;
  614.   left: 10%;
  615.   z-index: 1001;
  616.   border-radius: 20rpx;
  617.   overflow: hidden;
  618.   top: 100%;
  619.   -webkit-transform: scale3d(0.5, 0.5, 1);
  620.           transform: scale3d(0.5, 0.5, 1);
  621.   transition: all .2s ease-out;
  622. }
  623. .windows.show {
  624.   display: block;
  625. }
  626. .windows.show .mask {
  627.   top: 0;
  628.   opacity: 1;
  629. }
  630. .windows.show .layer {
  631.   -webkit-transform: translate3d(0, -85vh, 0) scale3d(1, 1, 1);
  632.           transform: translate3d(0, -85vh, 0) scale3d(1, 1, 1);
  633. }
  634. .windows.hide {
  635.   display: block;
  636. }
  637. .windows.hide .mask {
  638.   top: 0;
  639.   opacity: 0;
  640. }
  641. .open-redenvelope {
  642.   width: 100%;
  643.   height: 70vh;
  644.   background-color: #cf3c35;
  645.   position: relative;
  646. }
  647. .open-redenvelope .top {
  648.   width: 100%;
  649.   background-color: #fe5454;
  650.   display: flex;
  651.   justify-content: center;
  652.   flex-wrap: wrap;
  653.   border-radius: 0 0 100% 100%;
  654.   box-shadow: inset 0 -20rpx 0 #9c1712;
  655.   margin-bottom: 65rpx;
  656. }
  657. .open-redenvelope .top .close-btn {
  658.   width: 100%;
  659.   height: 80rpx;
  660.   display: flex;
  661.   justify-content: flex-end;
  662.   margin-bottom: 30rpx;
  663. }
  664. .open-redenvelope .top .close-btn .icon {
  665.   color: #9c1712;
  666.   margin-top: 10rpx;
  667.   margin-right: 10rpx;
  668. }
  669. .open-redenvelope .top image {
  670.   width: 130rpx;
  671.   height: 130rpx;
  672.   border: solid 12rpx #cf3c35;
  673.   border-radius: 100%;
  674.   margin-bottom: -65rpx;
  675. }
  676. .open-redenvelope .from, .open-redenvelope .blessing, .open-redenvelope .money, .open-redenvelope .showDetails {
  677.   width: 100%;
  678.   padding: 5rpx 5%;
  679.   display: flex;
  680.   justify-content: center;
  681.   font-size: 32rpx;
  682.   color: #fff;
  683. }
  684. .open-redenvelope .money {
  685.   font-size: 100rpx;
  686.   color: #f8d757;
  687.   display: flex;
  688.   padding-top: 20rpx;
  689. }
  690. .open-redenvelope .showDetails {
  691.   position: absolute;
  692.   bottom: 20rpx;
  693.   align-items: center;
  694.   font-size: 28rpx;
  695.   color: #f8d757;
  696. }
  697. .open-redenvelope .showDetails .icon {
  698.   font-size: 26rpx;
  699.   color: #f8d757;
  700. }
  701. .content .showLayer {
  702.   -webkit-transform: translate3d(0, -43vw, 0);
  703.           transform: translate3d(0, -43vw, 0);
  704. }


复制代码



JS代码：


  1. // author Lin 2022/2/16
  2. let {TIM,webIm} = require('../../utils/tim-aggregate');

  4. Page({

  6.     data: {
  7.         //文字消息
  8.         textMsg: '',
  9.         //消息列表
  10.         isHistoryLoading: false,
  11.         scrollAnimation: false,
  12.         scrollTop: 0,
  13.         scrollToView: '',
  14.         msgList: [],
  15.         msgImgList: [],
  16.         myuid: 0,

  18.         //录音相关参数
  19.         //H5不能录音
  20.         RECORDER: '',
  21.         isVoice: false,
  22.         voiceTis: '按住 说话',
  23.         recordTis: "手指上滑 取消发送",
  24.         recording: false,
  25.         willStop: false,
  26.         initPoint: {
  27.             identifier: 0,
  28.             Y: 0
  29.         },
  30.         recordTimer: null,
  31.         recordLength: 0,

  33.         //播放语音相关参数
  34.         AUDIO: '',
  35.         playMsgid: null,
  36.         VoiceTimer: null,
  37.         // 抽屉参数
  38.         popupLayerClass: '',
  39.         // more参数
  40.         hideMore: true,
  41.         //表情定义
  42.         hideEmoji: true,
  43.         emojiList: [
  44.             [{
  45.                 "url": "1.png",
  46.                 alt: "[微笑]"
  47.             }, {
  48.                 "url": "2.png",
  49.                 alt: "[生气]"
  50.             }, {
  51.                 "url": "3.png",
  52.                 alt: "[坏笑]"
  53.             }, {
  54.                 "url": "4.png",
  55.                 alt: "[难受]"
  56.             }, {
  57.                 "url": "5.png",
  58.                 alt: "[困]"
  59.             }, {
  60.                 "url": "6.png",
  61.                 alt: "[偷看]"
  62.             }, {
  63.                 "url": "7.png",
  64.                 alt: "[难过]"
  65.             }, {
  66.                 "url": "8.png",
  67.                 alt: "[斜眼]"
  68.             }, {
  69.                 "url": "9.png",
  70.                 alt: "[委屈]"
  71.             }, {
  72.                 "url": "10.png",
  73.                 alt: "[害羞]"
  74.             }, {
  75.                 "url": "11.png",
  76.                 alt: "[裂开]"
  77.             }, {
  78.                 "url": "12.png",
  79.                 alt: "[偷笑]"
  80.             }, {
  81.                 "url": "13.png",
  82.                 alt: "[痛苦]"
  83.             }, {
  84.                 "url": "14.png",
  85.                 alt: "[白眼]"
  86.             }, {
  87.                 "url": "15.png",
  88.                 alt: "[丑]"
  89.             }, {
  90.                 "url": "16.png",
  91.                 alt: "[哇哇哭]"
  92.             }, {
  93.                 "url": "17.png",
  94.                 alt: "[笑嘻嘻]"
  95.             }, {
  96.                 "url": "18.png",
  97.                 alt: "[盯着你]"
  98.             }, {
  99.                 "url": "19.png",
  100.                 alt: "[啊哈]"
  101.             }, {
  102.                 "url": "20.png",
  103.                 alt: "[吃瓜]"
  104.             }, {
  105.                 "url": "21.png",
  106.                 alt: "[哦吼]"
  107.             }, {
  108.                 "url": "22.png",
  109.                 alt: "[哭死]"
  110.             }, {
  111.                 "url": "23.png",
  112.                 alt: "[打脸]"
  113.             }, {
  114.                 "url": "24.png",
  115.                 alt: "[斗鸡眼]"
  116.             }],
  117.             [{
  118.                 "url": "25.png",
  119.                 alt: "[发呆]"
  120.             }, {
  121.                 "url": "26.png",
  122.                 alt: "[憨笑]"
  123.             }, {
  124.                 "url": "27.png",
  125.                 alt: "[无语]"
  126.             }, {
  127.                 "url": "28.png",
  128.                 alt: "[鸡贼]"
  129.             }, {
  130.                 "url": "29.png",
  131.                 alt: "[大无语]"
  132.             }, {
  133.                 "url": "30.png",
  134.                 alt: "[哭吐了]"
  135.             }, {
  136.                 "url": "31.png",
  137.                 alt: "[呲牙笑]"
  138.             }, {
  139.                 "url": "32.png",
  140.                 alt: "[奸笑]"
  141.             }, {
  142.                 "url": "33.png",
  143.                 alt: "[啊啊啊]"
  144.             }, {
  145.                 "url": "34.png",
  146.                 alt: "[哈嘿]"
  147.             }, {
  148.                 "url": "35.png",
  149.                 alt: "[惊讶]"
  150.             }, {
  151.                 "url": "36.png",
  152.                 alt: "[指你]"
  153.             }, {
  154.                 "url": "37.png",
  155.                 alt: "[可爱型]"
  156.             }, {
  157.                 "url": "38.png",
  158.                 alt: "[快哭了]"
  159.             }, {
  160.                 "url": "39.png",
  161.                 alt: "[抠鼻屎]"
  162.             }, {
  163.                 "url": "40.png",
  164.                 alt: "[酷酷]"
  165.             }, {
  166.                 "url": "41.png",
  167.                 alt: "[笑汗]"
  168.             }, {
  169.                 "url": "42.png",
  170.                 alt: "[算命]"
  171.             }, {
  172.                 "url": "43.png",
  173.                 alt: "[红脸坏笑]"
  174.             }, {
  175.                 "url": "44.png",
  176.                 alt: "[委屈死了]"
  177.             }, {
  178.                 "url": "45.png",
  179.                 alt: "[爆炸]"
  180.             }, {
  181.                 "url": "46.png",
  182.                 alt: "[吐了]"
  183.             }, {
  184.                 "url": "47.png",
  185.                 alt: "[么么哒]"
  186.             }, {
  187.                 "url": "48.png",
  188.                 alt: "[吐血]"
  189.             }],
  190.             [{
  191.                 "url": "49.png",
  192.                 alt: "[面无表情]"
  193.             }, {
  194.                 "url": "50.png",
  195.                 alt: "[捂嘴吐]"
  196.             }, {
  197.                 "url": "51.png",
  198.                 alt: "[斜眼看]"
  199.             }, {
  200.                 "url": "52.png",
  201.                 alt: "[花痴]"
  202.             }, {
  203.                 "url": "53.png",
  204.                 alt: "[被打]"
  205.             }, {
  206.                 "url": "54.png",
  207.                 alt: "[瞌睡]"
  208.             }, {
  209.                 "url": "55.png",
  210.                 alt: "[冥想]"
  211.             }, {
  212.                 "url": "56.png",
  213.                 alt: "[俏皮]"
  214.             }, {
  215.                 "url": "57.png",
  216.                 alt: "[戳手委屈]"
  217.             }, {
  218.                 "url": "58.png",
  219.                 alt: "[端庄]"
  220.             }, {
  221.                 "url": "59.png",
  222.                 alt: "[emmm]"
  223.             }, {
  224.                 "url": "60.png",
  225.                 alt: "[欢呼]"
  226.             }, {
  227.                 "url": "61.png",
  228.                 alt: "[笑哭了]"
  229.             }, {
  230.                 "url": "62.png",
  231.                 alt: "[抱抱]"
  232.             }, {
  233.                 "url": "63.png",
  234.                 alt: "[闭眼笑]"
  235.             }, {
  236.                 "url": "64.png",
  237.                 alt: "[捂嘴微笑]"
  238.             }, {
  239.                 "url": "65.png",
  240.                 alt: "[笑哭2]"
  241.             }, {
  242.                 "url": "66.png",
  243.                 alt: "[笑嘻嘻]"
  244.             }, {
  245.                 "url": "67.png",
  246.                 alt: "[笑露齿]"
  247.             }, {
  248.                 "url": "68.png",
  249.                 alt: "[阴脸笑]"
  250.             }, {
  251.                 "url": "69.png",
  252.                 alt: "[问号脸]"
  253.             }, {
  254.                 "url": "70.png",
  255.                 alt: "[拜拜]"
  256.             }, {
  257.                 "url": "71.png",
  258.                 alt: "[难受2]"
  259.             }, {
  260.                 "url": "72.png",
  261.                 alt: "[傻笑2]"
  262.             }],
  263.             [{
  264.                 "url": "73.png",
  265.                 alt: "[爆炸2]"
  266.             }, {
  267.                 "url": "74.png",
  268.                 alt: "[二哈]"
  269.             }, {
  270.                 "url": "75.png",
  271.                 alt: "[二哈吐舌]"
  272.             }, {
  273.                 "url": "76.png",
  274.                 alt: "[狗狗笑哭]"
  275.             }, {
  276.                 "url": "77.png",
  277.                 alt: "[狗狗绿帽]"
  278.             }, {
  279.                 "url": "78.png",
  280.                 alt: "[狗狗张嘴]"
  281.             }, {
  282.                 "url": "79.png",
  283.                 alt: "[狗狗绿扇]"
  284.             }, {
  285.                 "url": "80.png",
  286.                 alt: "[狗狗]"
  287.             }, {
  288.                 "url": "81.png",
  289.                 alt: "[猫咪]"
  290.             }, {
  291.                 "url": "82.png",
  292.                 alt: "[牛啊]"
  293.             }, {
  294.                 "url": "83.png",
  295.                 alt: "[爱心]"
  296.             }, {
  297.                 "url": "84.png",
  298.                 alt: "[心裂开]"
  299.             }, {
  300.                 "url": "85.png",
  301.                 alt: "[玫瑰花]"
  302.             }, {
  303.                 "url": "86.png",
  304.                 alt: "[枯萎]"
  305.             }, {
  306.                 "url": "87.png",
  307.                 alt: "[棒]"
  308.             }, {
  309.                 "url": "88.png",
  310.                 alt: "[差]"
  311.             }, {
  312.                 "url": "89.png",
  313.                 alt: "[红药]"
  314.             }, {
  315.                 "url": "90.png",
  316.                 alt: "[绿药]"
  317.             }, {
  318.                 "url": "91.png",
  319.                 alt: "[抱拳]"
  320.             }, {
  321.                 "url": "92.png",
  322.                 alt: "[ok]"
  323.             }, {
  324.                 "url": "93.png",
  325.                 alt: "[pk]"
  326.             }, {
  327.                 "url": "94.png",
  328.                 alt: "[绿帽子]"
  329.             }, {
  330.                 "url": "95.png",
  331.                 alt: "[菜刀]"
  332.             }]
  333.         ],
  334.         //表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
  335.         onlineEmoji: {
  336.             "1.png": "1.png",
  337.             "2.png": "2.png",
  338.             "3.png": "3.png",
  339.             "4.png": "4.png",
  340.             "5.png": "5.png",
  341.             "6.png": "6.png",
  342.             "7.png": "7.png",
  343.             "8.png": "8.png",
  344.             "9.png": "9.png",
  345.             "10.png": "10.png",
  346.             "11.png": "11.png",
  347.             "12.png": "12.png",

  349.             "13.png": "13.png",
  350.             "14.png": "14.png",
  351.             "15.png": "15.png",
  352.             "16.png": "16.png",
  353.             "17.png": "17.png",
  354.             "18.png": "18.png",
  355.             "19.png": "19.png",
  356.             "20.png": "20.png",
  357.             "21.png": "21.png",
  358.             "22.png": "22.png",
  359.             "23.png": "23.png",
  360.             "24.png": "24.png",

  362.             "25.png": "25.png",
  363.             "26.png": "26.png",
  364.             "27.png": "27.png",
  365.             "28.png": "28.png",
  366.             "29.png": "29.png",
  367.             "30.png": "30.png",
  368.             "31.png": "31.png",
  369.             "32.png": "32.png",
  370.             "33.png": "33.png",
  371.             "34.png": "34.png",
  372.             "35.png": "35.png",
  373.             "36.png": "36.png",

  375.             "37.png": "37.png",
  376.             "38.png": "38.png",
  377.             "39.png": "39.png",
  378.             "40.png": "40.png",
  379.             "41.png": "41.png",
  380.             "42.png": "42.png",
  381.             "43.png": "43.png",
  382.             "44.png": "44.png",
  383.             "45.png": "45.png",
  384.             "46.png": "46.png",
  385.             "47.png": "47.png",
  386.             "48.png": "48.png",

  388.             "49.png": "49.png",
  389.             "50.png": "50.png",
  390.             "51.png": "51.png",
  391.             "52.png": "52.png",
  392.             "53.png": "53.png",
  393.             "54.png": "54.png",
  394.             "55.png": "55.png",
  395.             "56.png": "56.png",
  396.             "57.png": "57.png",
  397.             "58.png": "58.png",
  398.             "59.png": "59.png",
  399.             "60.png": "60.png",

  401.             "61.png": "61.png",
  402.             "62.png": "62.png",
  403.             "63.png": "63.png",
  404.             "64.png": "64.png",
  405.             "65.png": "65.png",
  406.             "66.png": "66.png",
  407.             "67.png": "67.png",
  408.             "68.png": "68.png",
  409.             "69.png": "69.png",
  410.             "70.png": "70.png",
  411.             "71.png": "71.png",
  412.             "72.png": "72.png",

  414.             "73.png": "73.png",
  415.             "74.png": "74.png",
  416.             "75.png": "75.png",
  417.             "76.png": "76.png",
  418.             "77.png": "77.png",
  419.             "78.png": "78.png",
  420.             "79.png": "79.png",
  421.             "80.png": "80.png",
  422.             "81.png": "81.png",
  423.             "82.png": "82.png",
  424.             "83.png": "83.png",
  425.             "84.png": "84.png",

  427.             "85.png": "85.png",
  428.             "86.png": "86.png",
  429.             "87.png": "87.png",
  430.             "88.png": "88.png",
  431.             "89.png": "89.png",
  432.             "90.png": "90.png",
  433.             "91.png": "91.png",
  434.             "92.png": "92.png",
  435.             "93.png": "93",
  436.             "94.png": "94.png",
  437.             "95.png": "95.png"
  438.         },
  439.         //红包相关参数
  440.         windowsState: '',
  441.         redenvelopeData: {
  442.             rid: null, //红包ID
  443.             from: null,
  444.             face: null,
  445.             blessing: null,
  446.             money: null
  447.         }
  448.     },

  450.     onLoad(options) {

  452.         this.getMsgList();

  454.         this.setData({
  455.             RECORDER:wx.getRecorderManager(),
  456.             AUDIO:wx.createInnerAudioContext()
  457.         },()=>{
  458.             //语音自然播放结束
  459.             this.data.AUDIO.onEnded((res) => {
  460.                 this.setData({
  461.                     playMsgid:null
  462.                 });
  463.             });
  464.             //录音开始事件
  465.             this.data.RECORDER.onStart((e) => {
  466.                 this.recordBegin(e);
  467.             });
  468.             //录音结束事件
  469.             this.data.RECORDER.onStop((e) => {
  470.                 this.recordEnd(e);
  471.             });
  472.         });
  473.         console.log('IM参数方法集合:',TIM,webIm)

  475.         let joinGroup = webIm.joinGroup({ groupID: '@TGS#aYDESY2HY', type:TIM.TYPES.GRP_AVCHATROOM});
  476.             joinGroup.then(function(imResponse) {
  477.                 console.log(imResponse)
  478.             switch (imResponse.data.status) {
  479.                 case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
  480.                 console.log('等待管理员同意')
  481.                 break;
  482.                 case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
  483.                 console.log('加群成功')
  484.                 console.log(imResponse.data.group); // 加入的群组资料
  485.                 break;
  486.                 case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
  487.                 console.log('已经在群中')
  488.                 break;
  489.                 default:
  490.                 break;
  491.             }
  492.             }).catch(function(imError){
  493.             console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
  494.             });

  496.             setTimeout(()=>{
  497.                 let getGroupMemberList = webIm.getGroupMemberList({ groupID: '@TGS#aYDESY2HY',count: 30, offset:0});
  498.                     getGroupMemberList.then(function(imResponse) {
  499.                     console.log('群成员列表：',imResponse.data);
  500.                 }).catch(function(imError) {
  501.                     console.warn('getGroupMemberList error:', imError); // 获取群详细资料失败的相关信息
  502.                 });
  503.             },5000)

  505.     },
  506.     onShow() {
  507.         this.scrollTop = 9999999;

  509.         //模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
  510.         wx.getStorage({
  511.             key: 'redEnvelopeData',
  512.             success: (res) => {
  513.                 console.log(res.data);
  514.                 let nowDate = new Date();
  515.                 let lastid = this.msgList[this.msgList.length - 1].msg.id;
  516.                 lastid++;
  517.                 let row = {
  518.                     type: "user",
  519.                     msg: {
  520.                         id: lastid,
  521.                         type: "redEnvelope",
  522.                         time: nowDate.getHours() + ":" + nowDate.getMinutes(),
  523.                         userinfo: {
  524.                             uid: 0,
  525.                             username: "大黑哥",
  526.                             face: "https://zhoukaiwen.com/img/kevinLogo.png"
  527.                         },
  528.                         content: {
  529.                             blessing: res.data.blessing,
  530.                             rid: Math.floor(Math.random() * 1000 + 1),
  531.                             isReceived: false
  532.                         }
  533.                     }
  534.                 };
  535.                 this.screenMsg(row);
  536.                 wx.removeStorage({
  537.                     key: 'redEnvelopeData'
  538.                 });
  539.             }
  540.         });
  541.     },
  542.     // 接受消息(筛选处理)
  543.     screenMsg(msg) {
  544.         //从长连接处转发给这个方法，进行筛选处理
  545.         if (msg.type == 'system') {
  546.             // 系统消息
  547.             switch (msg.msg.type) {
  548.                 case 'text':
  549.                     this.addSystemTextMsg(msg);
  550.                     break;
  551.                 case 'redEnvelope':
  552.                     this.addSystemRedEnvelopeMsg(msg);
  553.                     break;
  554.             }
  555.         } else if (msg.type == 'user') {
  556.             // 用户消息
  557.             switch (msg.msg.type) {
  558.                 case 'text':
  559.                     this.addTextMsg(msg);
  560.                     break;
  561.                 case 'voice':
  562.                     this.addVoiceMsg(msg);
  563.                     break;
  564.                 case 'img':
  565.                     this.addImgMsg(msg);
  566.                     break;
  567.                 case 'redEnvelope':
  568.                     this.addRedEnvelopeMsg(msg);
  569.                     break;
  570.             }
  571.             console.log('用户消息');
  572.             //非自己的消息震动
  573.             if (msg.msg.userinfo.uid != this.data.myuid) {
  574.                 console.log('振动');
  575.                 wx.vibrateLong();
  576.             }
  577.         }
  578.         this.setData({
  579.             scrollToView: 'msg' + msg.msg.id
  580.         })
  581.     },
  582.     // 消息列表
  583.     getMsgList() {
  584.         let self = this;
  585.         let msgImgList = self.data.msgImgList;
  586.         let list = [{
  587.                 type: "system",
  588.                 msg: {
  589.                     id: 0,
  590.                     type: "text",
  591.                     content: {
  592.                         text: "欢迎进入Kevin聊天室"
  593.                     }
  594.                 }
  595.             },
  596.             {
  597.                 type: "user",
  598.                 msg: {
  599.                     id: 1,
  600.                     type: "text",
  601.                     time: "12:56",
  602.                     userinfo: {
  603.                         uid: 0,
  604.                         username: "大黑哥",
  605.                         face: "https://zhoukaiwen.com/img/kevinLogo.png"
  606.                     },
  607.                     content: {
  608.                         text: "web前端开发该怎么学习？"
  609.                     }
  610.                 }
  611.             },
  612.             {
  613.                 type: "user",
  614.                 msg: {
  615.                     id: 2,
  616.                     type: "text",
  617.                     time: "12:57",
  618.                     userinfo: {
  619.                         uid: 1,
  620.                         username: "售后客服008",
  621.                         face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
  622.                     },
  623.                     content: {
  624.                         text: "按照基本路线，从html、css、js三大基础开始，然后ajax、vue进阶学习，最后学习小程序、node、react。"
  625.                     }
  626.                 }
  627.             },
  628.             {
  629.                 type: "user",
  630.                 msg: {
  631.                     id: 3,
  632.                     type: "voice",
  633.                     time: "12:59",
  634.                     userinfo: {
  635.                         uid: 1,
  636.                         username: "售后客服008",
  637.                         face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
  638.                     },
  639.                     content: {
  640.                         url: "/static/voice/1.mp3",
  641.                         length: "00:06"
  642.                     }
  643.                 }
  644.             },
  645.             {
  646.                 type: "user",
  647.                 msg: {
  648.                     id: 4,
  649.                     type: "voice",
  650.                     time: "13:05",
  651.                     userinfo: {
  652.                         uid: 0,
  653.                         username: "大黑哥",
  654.                         face: "https://zhoukaiwen.com/img/kevinLogo.png"
  655.                     },
  656.                     content: {
  657.                         url: "/static/voice/2.mp3",
  658.                         length: "00:06"
  659.                     }
  660.                 }
  661.             },
  662.             {
  663.                 type: "user",
  664.                 msg: {
  665.                     id: 5,
  666.                     type: "img",
  667.                     time: "13:05",
  668.                     userinfo: {
  669.                         uid: 0,
  670.                         username: "大黑哥",
  671.                         face: "https://zhoukaiwen.com/img/kevinLogo.png"
  672.                     },
  673.                     content: {
  674.                         url: "https://zhoukaiwen.com/img/Design/logo/psketch3.png",
  675.                         w: 200,
  676.                         h: 200
  677.                     }
  678.                 }
  679.             },
  680.             {
  681.                 type: "user",
  682.                 msg: {
  683.                     id: 6,
  684.                     type: "img",
  685.                     time: "12:59",
  686.                     userinfo: {
  687.                         uid: 1,
  688.                         username: "售后客服008",
  689.                         face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
  690.                     },
  691.                     content: {
  692.                         url: "https://zhoukaiwen.com/img/Design/pc/ybss_jt.png",
  693.                         w: 1920,
  694.                         h: 1080
  695.                     }
  696.                 }
  697.             },
  698.             {
  699.                 type: "system",
  700.                 msg: {
  701.                     id: 7,
  702.                     type: "text",
  703.                     content: {
  704.                         text: "欢迎进入Kevin聊天室"
  705.                     }
  706.                 }
  707.             },

  709.             {
  710.                 type: "system",
  711.                 msg: {
  712.                     id: 9,
  713.                     type: "redEnvelope",
  714.                     content: {
  715.                         text: "售后客服008领取了你的红包"
  716.                     }
  717.                 }
  718.             },
  719.             {
  720.                 type: "user",
  721.                 msg: {
  722.                     id: 10,
  723.                     type: "redEnvelope",
  724.                     time: "12:56",
  725.                     userinfo: {
  726.                         uid: 0,
  727.                         username: "大黑哥",
  728.                         face: "https://zhoukaiwen.com/img/kevinLogo.png"
  729.                     },
  730.                     content: {
  731.                         blessing: "恭喜发财，大吉大利，万事如意",
  732.                         rid: 0,
  733.                         isReceived: false
  734.                     }
  735.                 }
  736.             },
  737.             {
  738.                 type: "user",
  739.                 msg: {
  740.                     id: 11,
  741.                     type: "redEnvelope",
  742.                     time: "12:56",
  743.                     userinfo: {
  744.                         uid: 1,
  745.                         username: "售后客服008",
  746.                         face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
  747.                     },
  748.                     content: {
  749.                         blessing: "恭喜发财",
  750.                         rid: 1,
  751.                         isReceived: false
  752.                     }
  753.                 }
  754.             },
  755.         ]
  756.         // 获取消息中的图片,并处理显示尺寸
  757.         for (let i = 0; i < list.length; i++) {
  758.             if (list[i].type == 'user' && list[i].msg.type == "img") {
  759.                 list[i].msg.content = self.setPicSize(list[i].msg.content);

  761.                 msgImgList.push(list[i].msg.content.url);

  763.                 self.setData({
  764.                     msgImgList:msgImgList
  765.                 })
  766.             }
  767.         }
  768.         self.setData({
  769.             msgList:list,
  770.             scrollTop:9999,
  771.             scrollAnimation:true
  772.         })
  773.     },
  774.     //处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
  775.     setPicSize(content) {
  776.         // 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
  777.         let maxW = this.toPx(350); //350是定义消息图片最大宽度
  778.         let maxH = this.toPx(350); //350是定义消息图片最大高度
  779.         if (content.w > maxW || content.h > maxH) {
  780.             let scale = content.w / content.h;
  781.             content.w = scale > 1 ? maxW : maxH * scale;
  782.             content.h = scale > 1 ? maxW / scale : maxH;
  783.         }
  784.         return content;
  785.     },
  786.     // rpx转px
  787.     toPx(num){
  788.         var px = num / 750 * wx.getSystemInfoSync().windowWidth;
  789.         return px;
  790.     },
  791.     //更多功能(点击+弹出)
  792.     showMore() {
  793.         let self = this;
  794.         self.setData({
  795.             isVoice:false,
  796.             hideEmoji:true
  797.         })
  798.         if (self.data.hideMore) {
  799.             self.setData({
  800.                 hideMore:false
  801.             });
  802.             self.openDrawer();
  803.         } else {
  804.             self.hideDrawer();
  805.         }
  806.     },
  807.     // 打开抽屉
  808.     openDrawer() {
  809.         this.setData({
  810.             popupLayerClass:'showLayer'
  811.         })
  812.     },
  813.     // 隐藏抽屉
  814.     hideDrawer() {
  815.         this.setData({
  816.             popupLayerClass:''
  817.         })
  818.         setTimeout(() => {
  819.             this.setData({
  820.                 hideMore:true,
  821.                 hideEmoji:true
  822.             })
  823.         }, 150);
  824.     },
  825.     // 选择图片发送
  826.     chooseImage() {
  827.         this.getImage('album');
  828.     },
  829.     //拍照发送
  830.     camera() {
  831.         this.getImage('camera');
  832.     },
  833.     //选照片 or 拍照
  834.     getImage(type) {
  835.         let self = this;
  836.         self.hideDrawer();
  837.         wx.chooseImage({
  838.             sourceType: [type],
  839.             sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  840.             success: (res) => {
  841.                 for (let i = 0; i < res.tempFilePaths.length; i++) {
  842.                     wx.getImageInfo({
  843.                         src: res.tempFilePaths[i],
  844.                         success: (image) => {
  845.                             console.log(image.width);
  846.                             console.log(image.height);
  847.                             let msg = {
  848.                                 url: res.tempFilePaths[i],
  849.                                 w: image.width,
  850.                                 h: image.height
  851.                             };
  852.                             self.sendMsg(msg, 'img');
  853.                         }
  854.                     });
  855.                 }
  856.             }
  857.         });
  858.     },
  859.     // 选择表情
  860.     chooseEmoji() {
  861.         let self = this;
  862.         self.setData({
  863.             hideMore:true
  864.         })
  865.         if (self.data.hideEmoji) {
  866.             self.setData({
  867.                 hideEmoji:false
  868.             })
  869.             self.openDrawer();
  870.         } else {
  871.             self.hideDrawer();
  872.         }
  873.     },
  874.     //添加表情
  875.     addEmoji(e) {
  876.         let textMsg = this.data.textMsg;
  877.             textMsg += e.currentTarget.dataset.em.alt;
  878.             this.setData({
  879.                 textMsg:textMsg
  880.             });
  881.     },
  882.     //获取焦点，如果不是选表情ing,则关闭抽屉
  883.     textareaFocus() {
  884.         if (this.data.popupLayerClass == 'showLayer' && this.data.hideMore == false) {
  885.             this.hideDrawer();
  886.         }
  887.     },
  888.     // 发送文字消息
  889.     sendText() {
  890.         this.hideDrawer(); //隐藏抽屉
  891.         if (!this.data.textMsg) {
  892.             return;
  893.         }
  894.         let content = this.replaceEmoji(this.data.textMsg);
  895.         let msg = {
  896.             text: content
  897.         }
  898.         this.sendMsg(msg, 'text');
  899.         //清空输入框
  900.         this.setData({
  901.             textMsg:''
  902.         })
  903.     },
  904.     //替换表情符号为图片
  905.     replaceEmoji(str) {
  906.         let emojiList = this.data.emojiList,
  907.             onlineEmoji = this.data.onlineEmoji;

  909.         let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {

  911.             console.log("str: " + str);
  912.             console.log("index: " + index);
  913.             console.log("item: " + item);

  915.             for (let i = 0; i < this.data.emojiList.length; i++) {
  916.                 let row = emojiList[i];
  917.                 for (let j = 0; j < row.length; j++) {
  918.                     let EM = row[j];
  919.                     if (EM.alt == item) {
  920.                         //在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
  921.                         //比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
  922.                         let onlinePath = 'https://zhoukaiwen.com/img/icon/emojj1/'
  923.                         let imgstr = '<img width="32rpx" src="' + onlinePath + onlineEmoji[EM.url] +
  924.                             '">';
  925.                         console.log("imgstr: " + imgstr);
  926.                         return imgstr;
  927.                     }
  928.                 }
  929.             }
  930.         });
  931.         return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
  932.     },
  933.     //输入框双向数据绑定
  934.     inputtextMsg(e){
  935.         this.setData({
  936.             textMsg:e.detail.value
  937.         })
  938.     },
  939.     // 发送消息
  940.     sendMsg(content, type) {
  941.         //实际应用中，此处应该提交长连接，模板仅做本地处理。
  942.         var nowDate = new Date();
  943.         let self = this;
  944.         let lastid = self.data.msgList[self.data.msgList.length - 1].msg.id;
  945.         lastid++;
  946.         let msg = {
  947.             type: 'user',
  948.             msg: {
  949.                 id: lastid,
  950.                 time: nowDate.getHours() + ":" + nowDate.getMinutes(),
  951.                 type: type,
  952.                 userinfo: {
  953.                     uid: 0,
  954.                     username: "大黑哥",
  955.                     face: "https://zhoukaiwen.com/img/kevinLogo.png"
  956.                 },
  957.                 content: content
  958.             }
  959.         }
  960.         // 发送消息
  961.         self.screenMsg(msg);
  962.         // 定时器模拟对方回复,三秒
  963.         setTimeout(() => {
  964.             lastid = self.data.msgList[self.data.msgList.length - 1].msg.id;
  965.             lastid++;
  966.             msg = {
  967.                 type: 'user',
  968.                 msg: {
  969.                     id: lastid,
  970.                     time: nowDate.getHours() + ":" + nowDate.getMinutes(),
  971.                     type: type,
  972.                     userinfo: {
  973.                         uid: 1,
  974.                         username: "售后客服008",
  975.                         face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
  976.                     },
  977.                     content: content
  978.                 }
  979.             }
  980.             // 本地模拟发送消息
  981.             self.screenMsg(msg);
  982.         }, 3000)
  983.     },
  984.     // 添加文字消息到列表
  985.     addTextMsg(msg) {
  986.         let msgList = this.data.msgList;

  988.         msgList.push(msg);

  990.         this.setData({
  991.             msgList:msgList
  992.         })
  993.         },
  994.     // 添加语音消息到列表
  995.     addVoiceMsg(msg) {
  996.         let msgList = this.data.msgList;

  998.         msgList.push(msg);

  1000.         this.setData({
  1001.             msgList:msgList
  1002.         })
  1003.     },
  1004.     // 添加图片消息到列表
  1005.     addImgMsg(msg) {
  1006.         let self = this,
  1007.             msgImgList = self.data.msgImgList,
  1008.             msgList = self.data.msgList;

  1010.         msg.msg.content = self.setPicSize(msg.msg.content);

  1012.         msgImgList.push(msg.msg.content.url);
  1013.         msgList.push(msg);

  1015.         self.setData({
  1016.             msgImgList:msgImgList,
  1017.             msgList:msgList
  1018.         })
  1019.     },
  1020.     addRedEnvelopeMsg(msg) {
  1021.         let msgList = this.data.msgList;

  1023.         msgList.push(msg);

  1025.         this.setData({
  1026.             msgList:msgList
  1027.         })
  1028.     },
  1029.     // 添加系统文字消息到列表
  1030.     addSystemTextMsg(msg) {
  1031.         let msgList = this.data.msgList;

  1033.         msgList.push(msg);

  1035.         this.setData({
  1036.             msgList:msgList
  1037.         })
  1038.     },
  1039.     // 添加系统红包消息到列表
  1040.     addSystemRedEnvelopeMsg(msg) {
  1041.         let msgList = this.data.msgList;

  1043.         msgList.push(msg);

  1045.         this.setData({
  1046.             msgList:msgList
  1047.         })
  1048.     },
  1049.     // 打开红包
  1050.     openRedEnvelope(e) {
  1051.         let msg = e.currentTarget.dataset.msg,
  1052.             index = e.currentTarget.dataset.index,
  1053.             rid = msg.content.rid,
  1054.             redenvelopeData = this.data.redenvelopeData,
  1055.             msgList = this.data.msgList;
  1056.         wx.showLoading({
  1057.             title: '加载中...'
  1058.         });
  1059.         console.log("index: " + index);
  1060.         //模拟请求服务器效果
  1061.         setTimeout(() => {
  1062.             //加载数据
  1063.             if (rid == 0) {
  1064.                 redenvelopeData = {
  1065.                     rid: 0, //红包ID
  1066.                     from: "大黑哥",
  1067.                     face: "https://zhoukaiwen.com/img/qdpz/face/face.jpg",
  1068.                     blessing: "恭喜发财，大吉大利",
  1069.                     money: "已领完"
  1070.                 }
  1071.                 this.setData({
  1072.                     redenvelopeData:redenvelopeData
  1073.                  })
  1074.             } else {
  1075.                 redenvelopeData = {
  1076.                     rid: 1, //红包ID
  1077.                     from: "售后客服008",
  1078.                     face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg",
  1079.                     blessing: "恭喜发财",
  1080.                     money: "0.01"
  1081.                 }
  1082.                 this.setData({
  1083.                    redenvelopeData:redenvelopeData
  1084.                 })
  1085.                 if (!msg.content.isReceived) {
  1086.                     // {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
  1087.                     this.sendSystemMsg({
  1088.                         text: "你领取了" + (msg.userinfo.uid == this.data.myuid ? "自己" : msg.userinfo
  1089.                             .username) + "的红包"
  1090.                     }, 'redEnvelope');
  1091.                     console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
  1092.                     msgList[index].msg.content.isReceived = true;

  1094.                     this.setData({
  1095.                         msgList:msgList
  1096.                     })
  1097.                 }
  1098.             }
  1099.             wx.hideLoading();
  1100.             this.setData({
  1101.                 windowsState:'show'
  1102.             })

  1104.         }, 200)

  1106.     },
  1107.     // 关闭红包弹窗
  1108.     closeRedEnvelope() {
  1109.         this.setData({
  1110.             windowsState:'hide'
  1111.         })
  1112.         setTimeout(() => {
  1113.             this.setData({
  1114.                 windowsState:''
  1115.             })
  1116.         }, 200)
  1117.     },
  1118.     sendSystemMsg(content, type) {
  1119.         let lastid = this.data.msgList[this.data.msgList.length - 1].msg.id;
  1120.         lastid++;
  1121.         let row = {
  1122.             type: "system",
  1123.             msg: {
  1124.                 id: lastid,
  1125.                 type: type,
  1126.                 content: content
  1127.             }
  1128.         };
  1129.         this.screenMsg(row)
  1130.     },
  1131.     //领取详情
  1132.     toDetails(rid) {
  1133.         wx.navigateTo({
  1134.             url: 'details/details?rid=' + rid
  1135.         })
  1136.     },
  1137.     // 预览图片
  1138.     showPic(e) {
  1139.         wx.previewImage({
  1140.             indicator: "none",
  1141.             current: e.currentTarget.dataset.msg.content.url,
  1142.             urls: this.data.msgImgList
  1143.         });
  1144.     },
  1145.     // 播放语音
  1146.     playVoice(e) {
  1147.         let msg = e.currentTarget.dataset.msg;
  1148.         this.setData({
  1149.             playMsgid:msg.id
  1150.         },()=>{
  1151.             this.data.AUDIO.src = msg.content.url;
  1152.             this.data.AUDIO.play();
  1153.         })
  1154.     },
  1155.     // 录音开始
  1156.     voiceBegin(e) {
  1157.         if (e.touches.length > 1) {
  1158.             return;
  1159.         }
  1160.         console.log(e)
  1161.         this.setData({
  1162.             ['initPoint.Y']:e.touches[0].clientY,
  1163.             ['initPoint.identifier']:e.touches[0].identifier
  1164.         },()=>{
  1165.             this.data.RECORDER.start({
  1166.                 format: "mp3"
  1167.             }); //录音开始,
  1168.         })
  1169.     },
  1170.     //录音开始UI效果
  1171.     recordBegin(e) {
  1172.             
  1173.         this.setData({
  1174.             recording:true,
  1175.             voiceTis:'松开 结束',
  1176.             recordLength:0,
  1177.         },()=>{
  1178.         let recordLength = this.data.recordLength,
  1179.             recordTimer = null;
  1180.             recordTimer = setInterval(() => {
  1181.                 this.setData({
  1182.                     recordLength:recordLength++
  1183.                 })
  1184.             }, 1000);
  1185.             this.setData({
  1186.                 recordTimer:recordTimer
  1187.             })
  1188.         })
  1189.     },
  1190.     // 录音被打断
  1191.     voiceCancel() {
  1192.         this.setData({
  1193.             recording:false,
  1194.             voiceTis:'按住 说话',
  1195.             recordTis:'手指上滑 取消发送',
  1196.             willStop:true //不发送录音
  1197.         },()=>{
  1198.             this.data.RECORDER.stop(); //录音结束
  1199.         })
  1200.     },
  1201.     // 录音中(判断是否触发上滑取消发送)
  1202.     voiceIng(e) {
  1203.         if (!this.data.recording) {
  1204.             return;
  1205.         }
  1206.         let touche = e.touches[0];
  1207.         //上滑一个导航栏的高度触发上滑取消发送
  1208.         if (this.data.initPoint.Y - touche.clientY >= this.toPx(100)) {
  1209.             this.setData({
  1210.                 willStop:true,
  1211.                 recordTis:'松开手指 取消发送'
  1212.             })
  1213.         } else {
  1214.             this.setData({
  1215.                 willStop:true,
  1216.                 recordTis:'手指上滑 取消发送'
  1217.             })
  1218.         }
  1219.     },
  1220.     // 结束录音
  1221.     voiceEnd(e) {
  1222.         if (!this.data.recording) {
  1223.             return;
  1224.         }
  1225.         this.setData({
  1226.             recording:false,
  1227.             voiceTis:'按住 说话',
  1228.             recordTis:'手指上滑 取消发送'
  1229.         },()=>{
  1230.             this.data.RECORDER.stop(); //录音结束
  1231.         })
  1232.     },
  1233.     //录音结束(回调文件)
  1234.     recordEnd(e) {
  1235.         clearInterval(this.data.recordTimer);
  1236.         if (!this.data.willStop) {
  1237.             console.log("e: " + JSON.stringify(e));
  1238.             let msg = {
  1239.                 length: 0,
  1240.                 url: e.tempFilePath
  1241.             }
  1242.             let min = parseInt(this.data.recordLength / 60);
  1243.             let sec = this.data.recordLength % 60;
  1244.             min = min < 10 ? '0' + min : min;
  1245.             sec = sec < 10 ? '0' + sec : sec;
  1246.             msg.length = min + ':' + sec;
  1247.             this.sendMsg(msg, 'voice');
  1248.         } else {
  1249.             console.log('取消发送录音');
  1250.         }
  1251.         this.setData({
  1252.             willStop:false
  1253.         })
  1254.     },
  1255.     // 切换语音/文字输入
  1256.     switchVoice() {
  1257.         this.hideDrawer();
  1258.         this.setData({
  1259.             isVoice:this.data.isVoice ? false : true
  1260.         })
  1261.     },
  1262.     discard() {
  1263.         return;
  1264.     }
  1265. })
复制代码


回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|PHP  

GMT+8, 2024-5-4 04:28 , Processed in 0.069406 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表