分享完毕

1

src/components/live-broadcast/groupChat.module.less

@@ -0,0 +1,66 @@
+.shareWrap {
+    background-color: #f9f9f9;
+    padding: 15px;
+}
+
+.chioseBox {
+    :global {
+        .el-checkbox__inner {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+
+            &::after {
+                height: 8px;
+                left: 6px;
+                position: absolute;
+                top: 3px;
+                width: 4px;
+            }
+        }
+    }
+}
+
+.cell {
+    height: 63px;
+    background: #ffffff;
+    padding: 10px 18px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: 10px;
+}
+
+.dotle {
+    width: 42px;
+    height: 43px;
+    background: var(--el-color-primary);
+    border-radius: 4px;
+    line-height: 42px;
+    text-align: center;
+    color: #fff;
+    margin-left: 17px;
+    font-size: 14px;
+}
+
+.teamInfo {
+    font-size: 14px;
+    margin-left: 8px;
+
+    .title {
+        font-weight: 500;
+        color: #1a1a1a;
+        line-height: 22px;
+    }
+
+    .subInfo {
+        color: #666666;
+        line-height: 22px;
+    }
+}
+
+.tableWrap {
+    max-height: 500px;
+    overflow-y: scroll;
+}

src/components/live-broadcast/groupChat.tsx

@@ -0,0 +1,88 @@
+import { defineComponent, ref } from 'vue'
+import { ElButton, ElFormItem, ElForm, ElRadio, ElMessage, ElCheckboxGroup, ElCheckbox, ElInput } from 'element-plus'
+import { state } from '/src/state'
+import request from "/src/helpers/request";
+import { removeMedia } from './helpers'
+import styles from './groupChat.module.less'
+
+
+export default defineComponent({
+    name: 'LiveBroadcastGroupChat',
+    data() {
+        return {
+            searchForm: {
+                search: "",
+            },
+            checkList: [],
+            tableList: [],
+        }
+    },
+    async mounted() {
+        this.getList()
+    },
+
+    beforeUnmount() {
+
+    },
+    methods: {
+        onReSet() {
+            this.searchForm.search = "";
+            this.checkList = [];
+            this.search();
+        },
+        search() {
+            this.getList();
+        },
+        async getList() {
+            try {
+                const res: any = await request('/api-web/imGroup/queryGroupList', {
+                    params: {
+                        ...this.searchForm
+                    }
+                })
+                this.tableList = res.data;
+            } catch (e) {
+                console.log(e)
+            }
+
+        },
+        resectCheck(id: number) {
+            if (this.checkList.indexOf(id) == -1) {
+                this.checkList.push(id);
+            } else {
+                this.checkList.splice(this.checkList.indexOf(id), 1);
+            }
+        },
+    },
+    render() {
+        return (
+            <div >
+                <ElForm model={this.searchForm} ref="form" inline={true} class={styles.form}>
+                    <ElFormItem>
+                        <ElInput clearable placeholder="群聊名称/乐团编号" modelValue={this.searchForm.search} onInput={val => this.searchForm.search = val}></ElInput>
+                    </ElFormItem>
+                    <ElFormItem>
+                        <ElButton type="primary" onClick={this.search}>搜索</ElButton>
+                        <ElButton type="danger" onClick={this.onReSet}>重置</ElButton>
+                    </ElFormItem>
+                </ElForm>
+                <div class={styles.tableWrap}>
+                    <ElCheckboxGroup modelValue={this.checkList}>
+                        {this.tableList.map((item: any) => {
+                            return <div class={styles.cell} onClick={() => this.resectCheck(item.id)}>
+                                <ElCheckbox class={styles.chioseBox} label={item.id} onChange={() => this.resectCheck(item.id)}><br
+                                /></ElCheckbox>
+                                <div class={styles.dotle}>{item.type == "MUSIC" ? "乐团" : "VIP"}</div>
+                                <div class={styles.teamInfo}>
+                                    <p class={styles.title}>{ item.name }</p>
+                                    <p class={styles.subInfo}>{ item.memo }（共{item.memberNum }人）</p>
+                                </div>
+                            </div>
+                        })}
+
+                    </ElCheckboxGroup>
+                </div>
+            </div>
+        )
+    }
+})

src/components/live-broadcast/share.tsx

@@ -1,19 +1,20 @@
-import { defineComponent } from 'vue'
-import { ElButton, ElFormItem, ElForm, ElRadio,ElMessage } from 'element-plus'
+import { defineComponent, DefineComponent, ref, Ref } from 'vue'
+import { ElButton, ElFormItem, ElForm, ElRadio, ElMessage } from 'element-plus'
 import runtime, * as RuntimeUtils from './runtime'
 import styles from './share.module.less'
 import request from "/src/helpers/request";
 import { vaildStudentUrl } from "/src/helpers/validate";
 import { toPng } from "html-to-image";
 import copy from "copy-to-clipboard";
-// import groupChat from './'
+import GroupChat from './groupChat'
 import Preview from './preview'
+const GroupChatRef: Ref<DefineComponent<{}, {}, any> | null> = ref(null)
 export default defineComponent({
     name: 'LiveBroadcastShare',
-    props:{
-        onClose:{
+    props: {
+        onClose: {
             type: Function,
-            default: () => {}
+            default: () => { }
         }
     },
     data() {
@@ -23,7 +24,7 @@ export default defineComponent({
                 roomTitle: '',
                 liveStartTime: '',
                 liveRemark: '',
-                roomUid:''
+                roomUid: ''
             },
             url: ''
         }
@@ -57,24 +58,49 @@ export default defineComponent({
         },
         shareImage() {
             var node = document.getElementById("preview");
-            toPng(node)
-              .then((dataUrl) => {
-                var img = new Image();
-                img.src = dataUrl;
-                // 在这里下载
-                let link = document.createElement("a");
-                let fname = this.detail.roomTitle || "分享图片文件.png"; //下载文件的名字
-                link.href = dataUrl;
-                link.setAttribute("download", fname);
-                document.body.appendChild(link);
-                link.click();
-                 this.$emit('close')
-              })
-              .catch(function (error) {
-                console.error("oops, something went wrong!", error);
-              });
+            if (node) {
+                toPng(node)
+                    .then((dataUrl) => {
+                        var img = new Image();
+                        img.src = dataUrl;
+                        // 在这里下载
+                        let link = document.createElement("a");
+                        let fname = this.detail.roomTitle || "分享图片文件.png"; //下载文件的名字
+                        link.href = dataUrl;
+                        link.setAttribute("download", fname);
+                        document.body.appendChild(link);
+                        link.click();
+                        this.onClose()
+                    })
+                    .catch(function (error) {
+                        console.error("oops, something went wrong!", error);
+                    });
+            }
+
+        },
+        async shareChat() {
+
+            let checkList = GroupChatRef.value?.checkList || [];
+            if (!(checkList.length > 0)) {
+                ElMessage.error("请至少选择一个群聊");
+                return;
+            }
+            try {
+                let obj = {
+                    groupIds: checkList.join(","),
+                    roomUid: this.detail.roomUid,
+                }
+                const res = await request.get('/api-web/imLiveBroadcastRoom/shareGroup', {
+                    params: {
+                       ...obj
+                    }
+                });
+                ElMessage.success('分享成功')
+                this.onClose()
+            } catch (e) {
+                console.log(e);
+            }
         },
-        shareChat() { },
         changeRafdio(value: string) {
             this.form.shareType = value;
         }
@@ -104,14 +130,14 @@ export default defineComponent({
                 </div >
                 {this.form.shareType === '2' ? <div class={styles.codeWrap} >
                     <div class={styles.shareWrap}>
-                        <Preview form={this.detail} url={ this.url}/>
+                        <Preview form={this.detail} url={this.url} />
                     </div>
                     <div class={styles.shareBtn} onClick={this.shareImage}>复制分享内容</div>
                 </div> : null
                 }
                 {this.form.shareType == '3' ? <div class={styles.shareWrap}>
                     <div class={styles.groupWrap} >
-                        {/* <GroupChat /> */}
+                        <GroupChat ref={GroupChatRef} />
                     </div>
                     <div class={styles.shareBtn} onClick={this.shareChat}>发送分享信息</div>
                 </div> : null