dy-admin-live/src/components/live-broadcast/share.tsx

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";
// @ts-ignore
import Clipboard from "clipboard";
import GroupChat from './groupChat'
import Preview from './preview'
import { state } from '/src/state'
const GroupChatRef: Ref<DefineComponent<{}, {}, any> | null> = ref(null)
const shareText: Ref<HTMLDivElement | null> = ref(null)
export default defineComponent({
    name: 'LiveBroadcastShare',
    props: {
        onClose: {
            type: Function,
            default: () => { }
        }
    },
    data() {
        return {
            form: { shareType: '1' },
            detail: {
                roomTitle: '',
                liveStartTime: '',
                liveRemark: '',
                roomUid: '',
                speakerName: ''
            },
            url: ''
        }
    },
    async mounted() {
        this.detail = { ...state.user }
        this.url = vaildStudentUrl() + `/#/liveClassTransfer?roomUid=${this.detail.roomUid}`;
    },
    methods: {
        copyText() {
            let text = `乐团老师邀请您参与直播课！\n${this.detail.roomTitle || ""
                }\主讲人:${this.detail.speakerName}\n直播时间:${this.detail.liveStartTime || ""}\n直播内容:${this.detail.liveRemark || ""
                }\n直播地址:${this.url}\n`;
            if (text) {
                const el = document.createElement('button')
                var clipboard = new Clipboard(el, {
                    text: function () {
                        return text;
                    },
                });
                clipboard.on("success", () => {
                    ElMessage.success("复制成功");
                    this.onClose()
                    // 释放内存
                    clipboard.destroy();
                });
                clipboard.on("error", () => {
                    // 不支持复制
                    console.log("该浏览器不支持自动复制");
                    // 释放内存
                    clipboard.destroy();
                });
                el.click()
            }
        },
        shareImage() {
            var node = document.getElementById("preview");
            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);
            }
        },
        changeRafdio(value: string) {
            this.form.shareType = value;
        }
    },
    render() {
        return (
            <div >
                <ElForm model={this.form} ref="form" class={styles.form}>
                    <ElFormItem label="分享方式" >
                        <ElRadio modelValue={this.form.shareType} onChange={() => { this.changeRafdio("1") }} label="1">链接分享</ElRadio>
                        <ElRadio modelValue={this.form.shareType} onChange={() => { this.changeRafdio("2") }} label="2" >二维码分享</ElRadio>
                        <ElRadio modelValue={this.form.shareType} onChange={() => { this.changeRafdio("3") }} label="3">群聊分享</ElRadio>
                    </ElFormItem>
                </ElForm>
                <div>
                    {this.form.shareType === '1' ? <div class="linkWrap">

                        <div class={styles.shareWrap}>
                            <h2>乐团老师邀请您参与直播课！</h2>
                            <h4>{this.detail.roomTitle}</h4>
                            <p>主讲人：{this.detail.speakerName}</p>
                            <p>开播时间：{this.detail.liveStartTime}</p>
                            <p>直播内容：{this.detail.liveRemark}</p>
                            <p>直播地址：{this.url}</p>
                        </div>
                        <div class={[styles.shareBtn, 'shareText']} onClick={this.copyText} ref='shareText' data-clipboard-action="copy">复制分享内容</div>
                    </div> : null}
                </div >
                {this.form.shareType === '2' ? <div class={styles.codeWrap} >
                    <div class={styles.shareWrap}>
                        <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 ref={GroupChatRef} />
                    </div>
                    <div class={styles.shareBtn} onClick={this.shareChat}>发送分享信息</div>
                </div> : null
                }
            </div>
        )
    }
})