优化

miniprogram_npm/fast-deep-equal/index.js

@@ -4,7 +4,7 @@ var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexport
 var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; };
 var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
 var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
-__DEFINE__(1731653753937, function(require, module, exports) {
+__DEFINE__(1732151585866, function(require, module, exports) {
 
 
 // do not edit .js files directly - edit src/index.jst
@@ -53,7 +53,7 @@ module.exports = function equal(a, b) {
 };
 
 }, function(modId) {var map = {}; return __REQUIRE__(map[modId], modId); })
-return __REQUIRE__(1731653753937);
+return __REQUIRE__(1732151585866);
 })()
 //miniprogram-npm-outsideDeps=[]
 //# sourceMappingURL=index.js.map

miniprogram_npm/rfdc/index.js

@@ -4,7 +4,7 @@ var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexport
 var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; };
 var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
 var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
-__DEFINE__(1731653753938, function(require, module, exports) {
+__DEFINE__(1732151585867, function(require, module, exports) {
 
 module.exports = rfdc
 
@@ -205,7 +205,7 @@ function rfdcCircles (opts) {
 }
 
 }, function(modId) {var map = {}; return __REQUIRE__(map[modId], modId); })
-return __REQUIRE__(1731653753938);
+return __REQUIRE__(1732151585867);
 })()
 //miniprogram-npm-outsideDeps=[]
 //# sourceMappingURL=index.js.map

miniprogram_npm/tinycolor2/index.js

@@ -4,7 +4,7 @@ var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexport
 var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; };
 var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
 var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
-__DEFINE__(1731653753939, function(require, module, exports) {
+__DEFINE__(1732151585868, function(require, module, exports) {
 // This file is autogenerated. It's used to publish CJS to npm.
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1195,7 +1195,7 @@ __DEFINE__(1731653753939, function(require, module, exports) {
 }));
 
 }, function(modId) {var map = {}; return __REQUIRE__(map[modId], modId); })
-return __REQUIRE__(1731653753939);
+return __REQUIRE__(1732151585868);
 })()
 //miniprogram-npm-outsideDeps=[]
 //# sourceMappingURL=index.js.map

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "dayjs": "^1.11.13",
         "miniprogram-computed": "^5.1.0",
         "signalr-for-wx": "^1.1.6",
         "tdesign-miniprogram": "^1.7.1"

package.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "dayjs": "^1.11.13",
     "miniprogram-computed": "^5.1.0",
     "signalr-for-wx": "^1.1.6",
     "tdesign-miniprogram": "^1.7.1"

pages/form/index.ts

@@ -6,7 +6,7 @@ import { agora } from '../../utils/agora'
 Page({
   data: {
     meetingForm: {
-      roomNum: '27413452',
+      roomNum: '34351300',
       roomName: '杨杨',
     },
     isRecord: false,

pages/meeting/index.scss

@@ -4,7 +4,7 @@
     display: flex;
     align-items: center;
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     left: 6rpx;
     background-color: rgba(0, 0, 0, 0.4);
     border-radius: 4rpx;
@@ -56,7 +56,7 @@
       width: 100%;
       height: 100%;
       background-color: black;
-      z-index: 2;
+      z-index: 4;
 
       &-image {
         position: absolute;
@@ -71,6 +71,7 @@
     &-video {
       flex-grow: 1;
       position: relative;
+      background-color: black;
 
       &-avatar {
         position: absolute;
@@ -82,6 +83,16 @@
         width: 100%;
         height: 100%;
         background-color: black;
+        z-index: 2;
+      }
+
+      &-fullscreen {
+        position: absolute;
+        right: 2%;
+        top: 2%;
+        color: white;
+        z-index: 2;
+        background-color: rgba(0, 0, 0, 0.4);
       }
 
       &-canvas {
@@ -100,7 +111,6 @@
     }
 
     &-smallvideo {
-      width: 20%;
       overflow-y: auto;
 
       &-box {
@@ -117,10 +127,17 @@
           box-sizing: border-box;
 
           &-avatar {
+            border: 1px solid #7B96FF;
             position: absolute;
-            left: 50%;
+            left: 4rpx;
-            top: 50%;
+            top: 2rpx;
-            transform: translate(-50%, -50%) scale(0.4);
+            width: calc(100% - 8rpx);
+            height: calc(100% - 4rpx);
+            z-index: 2;
+            background-color: black;
+            display: flex;
+            align-items: center;
+            justify-content: center;
           }
 
           &-canvas {
@@ -175,16 +192,16 @@
         flex-direction: column;
         align-items: center;
         padding: 4rpx 0;
-        width: 70rpx;
+        width: 60rpx;
         box-sizing: border-box;
 
         &-image {
-          width: 32rpx;
+          width: 22rpx;
-          height: 32rpx;
+          height: 22rpx;
         }
 
         &-text {
-          font-size: 12rpx;
+          font-size: 10rpx;
           color: white;
         }
       }
@@ -202,15 +219,26 @@
   width: 30vw;
   height: 100vh;
   background-color: #16191E;
-  padding: 10rpx;
+  padding: 10rpx 0;
   box-sizing: border-box;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+
+  &-title {
+    color: white;
+    text-align: center;
+    font-size: 16rpx;
+    flex-shrink: 0;
+    border-bottom: 1px rgb(59, 59, 59) solid;
+    padding-bottom: 10rpx;
+  }
 
   &-view {
+    overflow-y: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 4rpx 0;
+    padding: 4rpx 10rpx;
 
     &-avatar {
       display: flex;
@@ -246,19 +274,43 @@
   width: 40vw;
   height: 100vh;
   background-color: #16191E;
-  padding: 10rpx;
+  padding: 10rpx 0;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 
+  &-title {
+    color: white;
+    text-align: center;
+    border-bottom: 1px rgb(59, 59, 59) solid;
+    padding-bottom: 10rpx;
+    font-size: 16rpx;
+  }
+
   &-list {
     flex-grow: 1;
     overflow-y: auto;
+    padding: 0 10rpx;
 
     &-view {
       color: white;
       font-size: 14rpx;
-      margin-bottom: 4rpx;
+      margin-bottom: 6rpx;
+    }
+  }
+
+  &-button {
+    padding: 0 10rpx;
+    display: flex;
+    flex-wrap: wrap;
+
+    &-view {
+      margin: 0 0 4rpx 4rpx;
+      color: white;
+      font-size: 12rpx;
+      background-color: #5575F2;
+      padding: 4rpx 8rpx;
+      border-radius: 4rpx;
     }
   }
 
@@ -266,7 +318,8 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    margin-top: 10rpx;
+    padding: 10rpx 10rpx 0;
+    border-top: 1px rgb(59, 59, 59) solid;
 
     &-text {
       flex-grow: 1;

pages/meeting/index.ts

@@ -3,6 +3,7 @@ import { agora } from '../../utils/agora'
 import { onInvoke, onSignalr } from '../../utils/singlr'
 import { role, getStorage } from '../../utils/utils'
 import { Message } from 'tdesign-miniprogram';
+import dayjs from 'dayjs';
 const computedBehavior = require('miniprogram-computed').behavior;
 Page({
   behaviors: [computedBehavior],
@@ -14,6 +15,7 @@ Page({
         active: true,
         icon: '/assets/icon1.png',
         iconActive: '/assets/icon1-active.png',
+        show: false,
       },
       {
         title: '静音',
@@ -21,6 +23,7 @@ Page({
         active: false,
         icon: '/assets/icon2.png',
         iconActive: '/assets/icon2-active.png',
+        show: true,
       },
       {
         title: '关闭视频',
@@ -28,6 +31,7 @@ Page({
         active: false,
         icon: '/assets/icon3.png',
         iconActive: '/assets/icon3-active.png',
+        show: true,
       },
       {
         title: '翻转',
@@ -35,6 +39,7 @@ Page({
         active: true,
         icon: '/assets/icon4.png',
         iconActive: '/assets/icon4.png',
+        show: false,
       },
       {
         title: '聊天',
@@ -42,6 +47,7 @@ Page({
         active: true,
         icon: '/assets/icon5.png',
         iconActive: '/assets/icon5.png',
+        show: true,
       },
       {
         title: '成员',
@@ -49,6 +55,7 @@ Page({
         active: true,
         icon: '/assets/icon6.png',
         iconActive: '/assets/icon6.png',
+        show: true,
       },
       {
         title: '申请发言',
@@ -56,6 +63,7 @@ Page({
         active: true,
         icon: '/assets/icon7.png',
         iconActive: '/assets/icon7-active.png',
+        show: true,
       },
     ],
     channelId: '',
@@ -68,13 +76,20 @@ Page({
     userNumer: 0,
     noViewChatList: 0,
     applySpeakDialog: false,
+    leaveDialog: false,
     userPopupVisible: false,
     chatPopupVisible: false,
-    devicePosition: true,
+    isFullscreen: false,
     muted: false,
     currentRequestSpeakType: '',
     user: '',
-    messageStr: ''
+    messageStr: '',
+    commonlyChatList: [
+      '能听到我说话吗？',
+      '听得到',
+      '听不到',
+      '我要发言',
+    ]
   },
   watch: {
     'roomUserList.**': function (roomUserList) {
@@ -83,6 +98,13 @@ Page({
         userNumer: roomUserList.filter((item: any) => item.isRoom).length,
       })
     },
+    'footerList.**': function (footerList) {
+      const footerListTemplate = [...footerList];
+      footerListTemplate[3].show = !footerListTemplate[6].active
+      this.setData({
+        footerList: footerListTemplate
+      })
+    },
     'isClicked': function (isClicked) {
       if (isClicked) {
         let timer = setTimeout(() => {
@@ -99,6 +121,8 @@ Page({
       channelId: option.roomNum,
       user: await getStorage('user')
     })
+  },
+  async onReady() {
     await this.joinChannel()
     await this.getRoomUser()
     await this.getShowUser()
@@ -117,6 +141,7 @@ Page({
               noViewChatList: this.data.noViewChatList += 1
             })
           }
+          item.timestamp = dayjs(item.timestamp).format('HH:mm:ss')
           this.setData({
             chatList: [...this.data.chatList, item]
           })
@@ -128,12 +153,12 @@ Page({
         // 全员离开房间
         case 'AllLeave':
           this.message('管理员已结束会议!').success()
-          this.back()
+          wx.navigateBack()
           break;
         // 移出会议
         case 'ForceExitRoom':
           this.message('管理员已将你移出会议!').success()
-          this.back()
+          wx.navigateBack()
           break;
         // 更新视图模式
         case 'RefreshView':
@@ -498,9 +523,6 @@ Page({
       case '翻转':
         await this.getUserRoomInfo().then(async (res) => {
           if (res) {
-            this.setData({
-              devicePosition: !this.data.devicePosition
-            })
             wx.createLivePusherContext().switchCamera()
           } else {
             this.message('暂无权限').error();
@@ -552,13 +574,13 @@ Page({
       this.message('操作成功').success()
     }
   },
-  closeDialog(e) {
+  async closeDialog(e) {
     const { type } = e.currentTarget.dataset;
     switch (e.type) {
       case "confirm":
         switch (type) {
           case "applySpeakDialog":
-            GetApplySpeak(this.data.channelId).then(res => {
+            await GetApplySpeak(this.data.channelId).then(res => {
               if (res.code === 200) {
                 this.setData({
                   isClicked: true,
@@ -568,6 +590,9 @@ Page({
               }
             })
             break;
+          case "leaveDialog":
+            wx.navigateBack()
+            break;
         }
         break;
       case "cancel":
@@ -639,8 +664,10 @@ Page({
       }
     });
   },
-  back() {
+  async back() {
-    wx.navigateBack()
+    this.setData({
+      leaveDialog: true
+    })
   },
   onVisibleChange() {
     this.setData({
@@ -653,18 +680,28 @@ Page({
       messageStr: e.detail.value
     })
   },
-  async sendMeg() {
+  async sendMeg(e) {
+    if (this.data.messageStr || e.target.dataset.item) {
       await onInvoke('sendChannelMsg', {
         roomNum: this.data.channelId,
-      msg: this.data.messageStr
+        msg: e.target.dataset.item || this.data.messageStr
       })
       this.setData({
         chatList: [...this.data.chatList, {
           userName: this.data.user.userName,
-        message: this.data.messageStr,
+          message: e.target.dataset.item || this.data.messageStr,
+          timestamp: dayjs(+new Date()).format('HH:mm:ss'),
           me: true
         }],
         messageStr: ''
       })
+    } else {
+      this.message('请输入文字！').error()
+    }
+  },
+  changeFullscreen() {
+    this.setData({
+      isFullscreen: !this.data.isFullscreen
+    })
   }
 })

pages/meeting/index.wxml

@@ -1,18 +1,22 @@
 <!--pages/meeting/index.wxml-->
 <view class="meeting">
-  <header-tab title='会议' backGround='rgb(35,36,38)' iconSize='24' color="white" titleStyle='padding:12rpx 0;' isStatusBarHeight="{{false}}"></header-tab>
+  <header-tab title='会议' backGround='rgb(35,36,38)' iconSize='24' color="white" titleStyle='padding:12rpx 0;' isStatusBarHeight="{{false}}" isBack='{{false}}'></header-tab>
   <view class="meeting-content">
     <view class="meeting-content-noAdmin" wx:if="{{isAdmin === 0}}">
       <image class="meeting-content-noAdmin-image" src="/assets/icon8.png" />
     </view>
     <view class="meeting-content-video">
-      <view class="meeting-content-video-avatar">
+      <view class="meeting-content-video-avatar" wx:if="{{!currentUser.enableCamera && !currentUser.shareSrc}}">
         <t-avatar size="small">{{currentUser.avatarName}}</t-avatar>
       </view>
+      <view class="meeting-content-video-fullscreen" bind:tap="changeFullscreen">
+        <t-icon name="fullscreen-exit" size="24rpx" data-name="fullscreen-exit" wx:if="{{isFullscreen}}" />
+        <t-icon name="fullscreen-2" size="24rpx" data-name="fullscreen-2" wx:else />
+      </view>
       <view class="meeting-content-video-canvas" wx:if="{{currentUser.shareSrc}}">
         <live-player id="player" src="{{currentUser.shareSrc}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" muted="{{muted}}" />
       </view>
-      <view class="meeting-content-video-canvas" wx:elif="{{currentUser.enableCamera && currentUser.src}}">
+      <view class="meeting-content-video-canvas" wx:elif="{{currentUser.src}}">
         <live-player id="player" src="{{currentUser.src}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" muted="{{muted}}" />
       </view>
       <view class="meeting-content-video-user">
@@ -23,14 +27,16 @@
         <text class="meeting-content-video-user-text">{{currentUser.userName}}</text>
       </view>
     </view>
-    <view class="meeting-content-smallvideo">
+    <view class="meeting-content-smallvideo" style="width: {{isFullscreen ? '0' :'20%'}}">
-      <view class="meeting-content-smallvideo-box" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" bind:tap="clickChangeVideo" wx:if="{{item.isRoom && item.isAdmin}}">
+      <view class="meeting-content-smallvideo-box" id="video-{{item.uid}}" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" bind:tap="clickChangeVideo" wx:if="{{item.isRoom && item.isAdmin}}">
         <view class="meeting-content-smallvideo-box-view {{item.uid == currentUid || item.screenShareId == currentUid ? 'active' : ''}}">
-          <view class="meeting-content-smallvideo-box-view-avatar">
+          <view class="meeting-content-smallvideo-box-view-avatar {{item.uid == currentUid || item.screenShareId == currentUid ? 'active' : ''}}" wx:if="{{!item.enableCamera}}">
+            <view style="transform:scale(0.4);">
               <t-avatar size="small">{{item.avatarName}}</t-avatar>
             </view>
-          <view class="meeting-content-smallvideo-box-view-canvas" wx:if="{{item.enableCamera && item.src}}">
+          </view>
-            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" bindstatechange="recorderStateChange" background-mute enable-mic enable-camera max-bitrate="500" min-bitrate="200" autopush device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" />
+          <view class="meeting-content-smallvideo-box-view-canvas" wx:if="{{item.src}}">
+            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" bindstatechange="recorderStateChange" background-mute enable-mic enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" />
             <live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" muted="{{muted}}" wx:else />
           </view>
           <view class="meeting-content-smallvideo-box-view-user">
@@ -47,12 +53,12 @@
       </view>
     </view>
   </view>
-  <view class="meeting-footer">
+  <view class="meeting-footer" wx:if="{{!isFullscreen}}">
     <view class="meeting-footer-left">
-      <view class="meeting-footer-left-view" wx:for="{{footerList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bind:tap="changeFooterList" data-index='{{index}}'>
+      <view class="meeting-footer-left-view" wx:for="{{footerList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bind:tap="changeFooterList" data-index='{{index}}' wx:if="{{item.show}}">
         <image class="meeting-footer-left-view-image" src="{{item.active ? item.icon : item.iconActive}}" />
         <text class="meeting-footer-left-view-text" wx:if="{{item.title === '成员'}}">{{item.title}}({{userNumer}}) </text>
-        <text class="meeting-footer-left-view-text" wx:elif="{{item.title === '翻转'}}">{{item.title}}({{devicePosition ? '前置' : '后置'}}) </text>
+        <text class="meeting-footer-left-view-text" wx:elif="{{item.title === '翻转'}}">{{item.title}}</text>
         <text class="meeting-footer-left-view-text" wx:elif="{{item.title === '聊天'}}">{{item.title}}{{noViewChatList ? '('+noViewChatList+')' : '' }}
         </text>
         <text class="meeting-footer-left-view-text" wx:else>{{item.active ? item.title : item.titleActive}}</text>
@@ -65,31 +71,45 @@
 </view>
 <t-message id="t-message" />
 <t-dialog visible="{{applySpeakDialog}}" content="该操作需向管理员申请发言权限" confirm-btn="{{ { content: '确定', variant: 'base', theme: 'primary' } }}" cancel-btn="取消" data-type="applySpeakDialog" bind:confirm="closeDialog" bind:cancel="closeDialog" style="transform: scale(0.5) translate3d(-50%, -50%, 0);" close-btn="{{false}}" />
+<t-dialog visible="{{leaveDialog}}" content="确定离开房间吗？" confirm-btn="{{ { content: '确定', variant: 'base', theme: 'primary' } }}" cancel-btn="取消" data-type="leaveDialog" bind:confirm="closeDialog" bind:cancel="closeDialog" style="transform: scale(0.5) translate3d(-50%, -50%, 0);" close-btn="{{false}}" />
 <t-popup visible="{{userPopupVisible}}" bind:visible-change="onVisibleChange" placement="right" prevent-scroll-through='{{false}}'>
   <view class="user-popup">
+    <view class="user-popup-title">
+      聊天
+    </view>
     <view class="user-popup-view" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" wx:if="{{item.isRoom}}">
       <view class="user-popup-view-avatar">
         <t-avatar size="36rpx">{{item.avatarName}}</t-avatar>
         <text class="user-popup-view-avatar-text">{{item.userName}}</text>
       </view>
       <view class="user-popup-view-image">
-        <image src="/assets/{{currentUser.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="user-popup-view-image-icon" />
+        <image src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="user-popup-view-image-icon" />
-        <image src="/assets/{{currentUser.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-image-icon" />
+        <image src="/assets/{{item.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-image-icon" />
       </view>
     </view>
   </view>
 </t-popup>
 <t-popup visible="{{chatPopupVisible}}" bind:visible-change="onVisibleChange" placement="right" prevent-scroll-through='{{false}}'>
   <view class="chat-popup">
+    <view class="chat-popup-title">
+      聊天
+    </view>
     <view class="chat-popup-list" id="chatView">
       <view class="chat-popup-list-view" wx:for="{{chatList}}" data-item="{{item}}" wx:key="index" style="text-align: {{item.me ? 'right' : 'left'}}">
-        <text class="chat-popup-list-view-text">{{item.me ? item.message : item.userName}}</text>
+        <text style="color: #666;font-size: 10rpx;margin-right: 4rpx;" wx:if="{{item.me}}">({{item.timestamp}})</text>
-        <text class="chat-popup-list-view-text">：</text>
+        <text>{{item.me ? item.message : item.userName}}</text>
-        <text class="chat-popup-list-view-text">{{item.me ? item.userName : item.message}}</text>
+        <text>：</text>
+        <text>{{item.me ? item.userName : item.message}}</text>
+        <text style="color: #666;font-size: 10rpx;margin-left: 4rpx;" wx:if="{{!item.me}}">({{item.timestamp}})</text>
+      </view>
+    </view>
+    <view class="chat-popup-button">
+      <view wx:for="{{commonlyChatList}}" data-item="{{item}}" wx:key="index" class="chat-popup-button-view" bind:tap="sendMeg">
+        {{item}}
       </view>
     </view>
     <view class="chat-popup-input">
-      <input type="text" placeholder="请输入文字" class="chat-popup-input-text" value="{{messageStr}}" bind:change="changeMessageStr" />
+      <input type="text" placeholder="请输入文字" class="chat-popup-input-text" value="{{messageStr}}" bind:input="changeMessageStr" />
       <view class="chat-popup-input-submit" bind:tap="sendMeg">发送</view>
     </view>
   </view>

project.private.config.json

@@ -4,5 +4,6 @@
     "setting": {
         "compileHotReLoad": true,
         "urlCheck": true
-    }
+    },
+    "libVersion": "3.6.5"
 }

utils/agora.ts

@@ -17,6 +17,7 @@ export const agora = {
   // 销毁
   destroy: async () => {
     if (client) {
+      await client.leave()
       await client.destroy()
       client = '';
     }
@@ -46,6 +47,7 @@ export const agora = {
       agora.setRole(false)
     })
   },
+  // 监听
   clientEvent: ({ streamAdded, streamRemoved }) => {
     client.on("stream-added", async e => {
       await agora.subscribe(e.uid, (url: string, uid: number | string) => {
@@ -56,14 +58,17 @@ export const agora = {
       streamRemoved(e.uid)
     });
   },
+  // 订阅远端音视频流
   subscribe: async (uid: number | string, callBack: Function) => {
     const { url, rotation } = await client.subscribe(uid)
     callBack(url, uid)
   },
+  // 停止发送本地音视频流
   muteLocal: async (target: string) => {
-    client.muteLocal(target)
+    await client.muteLocal(target)
   },
+  // 恢复发送本地音视频流
   unmuteLocal: async (target: string) => {
-    client.unmuteLocal(target)
+    await client.unmuteLocal(target)
   },
 }