更新 toolbar 从 chat 页面中抽离出来

pages/chat/chat.vue

@@ -46,39 +46,7 @@
         </template>
       </uni-im-chat-input>
       
-      <view v-if="chooseMoreMsg" class="toolbar">
-        <view class="item" @click="shareMsg(checkedMsgList)">
-          <view class="icons-box">
-            <uni-icons size="35" type="redo"></uni-icons>
-          </view>
-          <text class="title">逐条转发</text>
-        </view>
-        <view class="item" @click="shareMsg(checkedMsgList,true)">
-          <view class="icons-box">
-            <uni-icons size="35" type="paperplane"></uni-icons>
-          </view>
-          <text class="title">合并转发</text>
-        </view>
-        <view class="item" @click="toolBarNext">
-          <view class="icons-box">
-            <uni-icons size="35" type="folder-add"></uni-icons>
-          </view>
-          <text class="title">收藏</text>
-        </view>
-        <view class="item" @click="toolBarNext">
-          <view class="icons-box">
-            <uni-icons size="35" type="download"></uni-icons>
-          </view>
-          <text class="title">保存至电脑</text>
-        </view>
-        <view class="item" @click="toolBarNext">
-          <view class="icons-box">
-            <uni-icons size="35" type="trash"></uni-icons>
-          </view>
-          <text class="title">删除</text>
-        </view>
-        <uni-icons @click="chooseMoreMsg = false" color="#999" size="35" type="closeempty"></uni-icons>
-      </view>
+      <toolbar v-model="chooseMoreMsg" @shareMsg="shareMsg(checkedMsgList,$event)"></toolbar>
     </view>
 
     <msg-popup-control ref="msg-popup-control" @answer="setAnswerMsg" @intoTopic="intoTopic" @share="shareMsg" @chooseMore="chooseMoreMsg = true;checkedMsgList = $event"></msg-popup-control>
@@ -86,10 +54,7 @@
     
     <uni-im-member-list ref="member-list" :conversationId="conversation.id"></uni-im-member-list>
 
-    <!-- #ifdef H5 -->
-    <uni-im-share-msg id="uni-im-share-msg" ref="share-msg"></uni-im-share-msg>
-    <!-- #endif -->
-    
+    <uni-im-share-msg v-if="isWidescreen" id="uni-im-share-msg" ref="share-msg"></uni-im-share-msg>
     
     <view style="position: fixed;top: 200px;left: 0;background-color: #FFFFFF;z-index: 9999;">
       <!-- keyboardMaxHeight:{{keyboardMaxHeight}}
@@ -106,7 +71,10 @@
 <script>
   import uniIm from '@/uni_modules/uni-im/sdk/index.js';
   import msgPopupControl from '@/uni_modules/uni-im/components/uni-im-msg/popup-control.vue';
+  import uniImShareMsg from '@/uni_modules/uni-im/pages/share-msg/share-msg.vue';
+  import toolbar from './toolbar.vue';
   import {markRaw} from "vue";
+  
 
 /**
  * chat 组件，渲染一个完整的会话，包括头部、消息列表、输入区。
@@ -118,6 +86,8 @@
   export default {
     components: {
       msgPopupControl,
+      uniImShareMsg,
+      toolbar
     },
     data() {
       return {
@@ -858,15 +828,17 @@
         this.$refs['msg-popup-control'].show({isSelf,msg,msgContentDomInfo})
       },
       shareMsg(msgList,merge = false) {
-        this.$refs['share-msg'].open(msgList,merge)
-        this.chooseMoreMsg = false
-      },
-      toolBarNext(){
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none',
-          duration: 2000
-        });
+        console.error('msgList',msgList)
+        if (this.isWidescreen) {
+          this.$refs['share-msg'].open(msgList,merge)
+        } else {
+          uni.navigateTo({
+            url: '/uni_modules/uni-im/pages/share-msg/share-msg',
+            success: res => {
+              res.eventChannel.emit('shareMsg', [msgList,merge])
+            }
+          })
+        }
         this.chooseMoreMsg = false
       },
       tapUnreadCount() {
@@ -1006,35 +978,5 @@ page {
     margin-top: 3px;
   }
   /* #endif */
-  
-  .toolbar{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #ededed;
-    border-top: solid 1px #ededed;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: center;
-    z-index: 9;
-  }
-  .toolbar .item {
-    align-items: center;
-  }
-  /* #ifdef H5 */
-  .toolbar ::v-deep .uni-icons {
-    cursor: pointer;
-  }
-  /* #endif */
-  .toolbar .icons-box {
-    background-color: #fff;
-    justify-content: center;
-    width: 60px;
-    height: 60px;
-    border-radius: 100px;
-    margin-bottom: 10px;
-  }
 }
 </style>
\ No newline at end of file

pages/chat/toolbar.vue

+<template>
+  <view v-if="modelValue" class="toolbar">
+    <view class="item" @click="shareMsg(false)">
+      <view class="icons-box">
+        <uni-icons size="20" type="redo"></uni-icons>
+      </view>
+      <text class="title">逐条转发</text>
+    </view>
+    <view class="item" @click="shareMsg(true)">
+      <view class="icons-box">
+        <uni-icons size="20" type="paperplane"></uni-icons>
+      </view>
+      <text class="title">合并转发</text>
+    </view>
+    <view class="item" @click="toolBarNext">
+      <view class="icons-box">
+        <uni-icons size="20" type="folder-add"></uni-icons>
+      </view>
+      <text class="title">收藏</text>
+    </view>
+    <view class="item" @click="toolBarNext">
+      <view class="icons-box">
+        <uni-icons size="20" type="download"></uni-icons>
+      </view>
+      <text class="title">下载保存</text>
+    </view>
+    <view class="item" @click="toolBarNext">
+      <view class="icons-box">
+        <uni-icons size="20" type="trash"></uni-icons>
+      </view>
+      <text class="title">删除</text>
+    </view>
+    <uni-icons class="close-icon" @click="close" color="#999" size="35" type="closeempty"></uni-icons>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'UniImToolBar',
+    emits: ['shareMsg', 'toolBarNext', 'update:modelValue'],
+    props: {
+      checkedMsgList: {
+        type: Array,
+        default: () => []
+      },
+      modelValue: {
+        type: Boolean,
+        default: false,
+      }
+    },
+    data() {
+      return {
+      }
+    },
+    methods: {
+      shareMsg(merge) {
+        this.$emit('shareMsg', merge)
+      },
+      close() {
+        this.$emit('update:modelValue', false)
+      },
+      toolBarNext(){
+        uni.showToast({
+          title: '暂不支持',
+          icon: 'none',
+          duration: 2000
+        });
+        this.chooseMoreMsg = false
+      },
+    }
+  }
+</script>
+
+<style lang="scss">
+  .toolbar {
+    background-color: #FFF;
+    /* #ifdef H5 */
+    @media screen and (min-device-width:960px){
+      background-color: #ededed;
+    }
+    /* #endif */
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-top: solid 1px #ededed;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    z-index: 9;
+    .item {
+      align-items: center;
+      /* #ifdef H5 */
+      cursor: pointer;
+      /* #endif */
+      .icons-box {
+        background-color: #fff;
+        justify-content: center;
+        align-items: center;
+        border-radius: 100px;
+        width: 30px;
+        height: 30px;
+        /* #ifdef H5 */
+        @media screen and (min-device-width:960px){
+          width: 60px;
+          height: 60px;
+          margin-bottom: 10px;
+          .uni-icons {
+            font-size: 35px !important;
+          }
+        }
+        /* #endif */
+      }
+      .title {
+        font-size: 8px;
+        /* #ifdef H5 */
+        @media screen and (min-device-width:960px){
+          font-size: 14px;
+        }
+        /* #endif */
+      }
+    }
+  }
+</style>
\ No newline at end of file