更新 share-msg支持移动端

components/uni-im-msg/popup-control.vue

@@ -60,16 +60,7 @@
         this.$emit('chooseMore',[this.controlData.msg])
       },
       share(e){
-        // 仅支持web pc端
-        if(!this.isWidescreen){
-            uni.showToast({
-                title:'仅支持web pc端',
-                icon:'none'
-            })
-            return
-        }
         this.$emit('share',[this.controlData.msg])
-        
       },
       initControlList(msg){
         this.controlList = [
@@ -96,12 +87,12 @@
           {
             title:'转发',
             action:()=>this.share(),
-            canDisplay:this.isWidescreen && msg._id != undefined,
+            canDisplay: msg._id != undefined,
           },
           {
             title:'多选',
             action:()=>this.chooseMore(),
-            canDisplay:this.isWidescreen && msg._id != undefined,
+            canDisplay: msg._id != undefined,
           }
         ]
         
@@ -109,7 +100,7 @@
           this.controlList.push({
             title:'进入会话',
             action:()=> this.$emit('intoTopic', msg._id),
-            canDisplay:true,
+            canDisplay: this.isWidescreen
           })
         }
         

components/uni-im-share-msg/uni-im-share-msg.vue → pages/share-msg/share-msg.vue

@@ -5,6 +5,15 @@
   @click="close"
 >
   <view class="share-msg-content" @click.stop>
+    <!-- #ifndef APP -->
+    <view class="navbar" v-if="!isWidescreen">
+      <text class="btn cancel" @click="close">返回</text>
+      <text class="title">选择会话</text>
+      
+      <text class="btn" @click="send" v-if="canSend">发送({{checkedList.length}})</text>
+      <text class="btn disabled" v-else>发送</text>
+    </view>
+    <!-- #endif -->
     <view class="conversation-list-box">
       <uni-search-bar
         id="search-bar"
@@ -22,7 +31,7 @@
         :show-unread-count="false"
       />
     </view>
-    <view class="conversation-detail-box">
+    <view class="conversation-detail-box" v-if="isWidescreen">
       <text class="title">
         转发给：
       </text>
@@ -97,6 +106,7 @@
 import uniIm from '@/uni_modules/uni-im/sdk/index.js';
 export default {
   name: 'UniImShareMsg',
+  emits: ['close'],
   props: {
     noMsgList: { // 不显示转发的消息列表
       type: Boolean,
@@ -114,13 +124,54 @@ export default {
       checkedList: [],
       isOpen: false,
       msgList: [],
-      merge: false
+      merge: false,
+      canSend: false
+    }
+  },
+  computed: {
+    ...uniIm.mapState(['isWidescreen'])
+  },
+  watch: {
+    checkedList: {
+      handler(val) {
+        this.canSend = val.length > 0;
+        // #ifdef APP
+        const titleNView = {
+          "autoBackButton": false,
+          "buttons": [{
+            "text": "取消",
+            "fontSize": 16,
+            "float": "left",
+            "onclick": this.close
+          },{
+            "text": "发送",
+            "fontSize": 16,
+            "float": "right",
+            "onclick": this.canSend ? this.send : null
+          }]
+        }
+        const rightButton = titleNView.buttons[1];
+        rightButton.width = "100px"
+        rightButton.text = `发送(${val.length})`
+        rightButton.color = this.canSend ? '#149d42' : '#CCC'
+        const currentWebview = this.$scope.$getAppWebview();
+        currentWebview.setStyle({titleNView});
+        // #endif
+      },
+      immediate: true,
+      deep: true
     }
   },
-  computed: {},
+  onLoad() {
+  	const eventChannel = this.getOpenerEventChannel();
+  	eventChannel.on('shareMsg', ([msgList,merge]) => {
+      console.log('shareMsg',msgList,merge)
+      this.open(msgList, merge);
+  	});
+  },
   methods: {
     open(msgList, merge) {
-      // console.info('msgList', msgList);
+      console.info('msgList', msgList);
       this.isOpen = true;
       this.merge = merge;
 
@@ -142,6 +193,9 @@ export default {
       this.isOpen = false;
       this.checkedList = [];
       this.inputText = '';
+      if(!this.isWidescreen){
+        uni.navigateBack();
+      }
     },
     createMsg(msg, conversation) {
 
@@ -151,6 +205,8 @@ export default {
       this.$refs['view-msg'].open(this.msgList);
     },
     async send() {
+      console.info('send', this.checkedList);
+      console.info('this.msgList', this.msgList);
       if (!this.merge && this.inputText.length != 0) {
         this.msgList.push({
           "body": this.inputText,
@@ -235,7 +291,8 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+  @import "@/uni_modules/uni-im/common/baseStyle.scss";
   /* #ifdef H5*/
   .share-msg-root,
   .share-msg-root * {
@@ -246,11 +303,13 @@ export default {
   /* #endif */
 
   .share-msg-root {
+    width: 750rpx;
+    /* #ifndef APP */
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
-    width: 750rpx;
+    /* #endif */
     /* #ifdef H5 */
     width: 100vw;
     height: 100vh;
@@ -259,103 +318,139 @@ export default {
     justify-content: center;
     align-items: center;
     background-color: rgb(0, 0, 0, 0.3);
-  }
-
-  .share-msg-content {
-    background-color: #fff;
-    width: 750px;
-    height: 70vh;
-    flex-direction: row;
-    border-radius: 15px;
-    position: relative;
-  }
-
-  .conversation-list-box {
-    width: 300px;
-    height: 100%;
-    border-right: 1px solid #eee;
-  }
-
-  .conversation-list-box ::v-deep .conversation-list .refresh-box {
-    background-color: #fff;
-  }
-
-  .conversation-detail-box {
-    flex: 1;
-  }
-
-  .conversation-detail-box .title {
-    font-size: 18px;
-    color: #333;
-    margin: 15px;
-  }
-
-  .selected-conversation-list {
-    height: 0;
-    flex: 1;
-  }
-
-  .scroll-content {
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 5px 35px 5px;
-  }
-
-  .selected-conversation-item {
-    flex-direction: row;
-    padding: 3px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 5px;
-    background-color: rgba(250, 250, 250, 1);
-    margin: 3px;
-  }
-
-  .selected-conversation-item .avatar {
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-  }
-
-  .selected-conversation-item .title {
-    font-size: 12px;
-    color: #333;
-    text-align: center;
-    margin: 0 5px;
-  }
-
-  .close-icon {
-    cursor: pointer;
-  }
-
-  .msg {}
-
-  .input-box {
-    padding: 15px 10px;
-    border: 1px solid #EEE;
-    border-width: 1px 0;
-  }
-
-  .textarea {
-    width: 100%;
-    border-radius: 5px;
-    font-size: 14px;
-    outline: none;
-  }
-
-  .action-btns {
-    flex-direction: row;
-    justify-content: flex-end;
-    padding: 10px;
-  }
-
-  .action-btns .btn {
-    margin: 0 10px;
-    width: 100px;
-  }
-
-  .action-btns .btn.cancel {
-    color: #999;
-    border-color: #999;
+    .share-msg-content {
+      .navbar {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        border-bottom: 1px solid #eee;
+        .title {
+          font-size: 14px;
+          color: #333;
+        }
+        .btn {
+          font-size: 12px;
+          color: #FFF;
+          background-color: #149d42;
+          padding: 4px 8px;
+          border-radius: 6px;
+          &.disabled {
+            background-color: #EEE;
+            color: #CCC;
+          }
+          &.cancel {
+            border: none;
+            background-color: #FFF;
+            color: #666;
+          }
+        }
+      }
+      background-color: #fff;
+      width: 750rpx;
+      height: 100%;
+      /* #ifdef H5 */
+      @media screen and (min-device-width:960px){
+        width: 750px;
+        height: 70vh;
+        border-radius: 15px;
+        flex-direction: row;
+      }
+      /* #endif */
+      position: relative;
+    }
+    
+    .conversation-list-box {
+      /* #ifdef H5 */
+      @media screen and (min-device-width:960px){
+        width: 300px;
+      }
+      /* #endif */
+      height: 100%;
+      border-right: 1px solid #eee;
+    }
+    
+    .conversation-list-box ::v-deep .conversation-list .refresh-box {
+      background-color: #fff;
+    }
+    
+    .conversation-detail-box {
+      flex: 1;
+    }
+    
+    .conversation-detail-box .title {
+      font-size: 18px;
+      color: #333;
+      margin: 15px;
+    }
+    
+    .selected-conversation-list {
+      height: 0;
+      flex: 1;
+    }
+    
+    .scroll-content {
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin: 0 5px 35px 5px;
+    }
+    
+    .selected-conversation-item {
+      flex-direction: row;
+      padding: 3px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 5px;
+      background-color: rgba(250, 250, 250, 1);
+      margin: 3px;
+    }
+    
+    .selected-conversation-item .avatar {
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+    }
+    
+    .selected-conversation-item .title {
+      font-size: 12px;
+      color: #333;
+      text-align: center;
+      margin: 0 5px;
+    }
+    
+    .close-icon {
+      cursor: pointer;
+    }
+    
+    .msg {}
+    
+    .input-box {
+      padding: 15px 10px;
+      border: 1px solid #EEE;
+      border-width: 1px 0;
+    }
+    
+    .textarea {
+      width: 100%;
+      border-radius: 5px;
+      font-size: 14px;
+      outline: none;
+    }
+    
+    .action-btns {
+      flex-direction: row;
+      justify-content: flex-end;
+      padding: 10px;
+    }
+    
+    .action-btns .btn {
+      margin: 0 10px;
+      width: 100px;
+    }
+    
+    .action-btns .btn.cancel {
+      color: #999;
+      border-color: #999;
+    }
   }
 </style>
\ No newline at end of file