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

import { defineComponent } from 'vue'
import { ElButton, ElFormItem, ElForm, ElRadio } from 'element-plus'
import runtime, * as RuntimeUtils from './runtime'
import styles from './preview.module.less'
import QRCode from 'qrcode';
import icon1 from './images/icon1.png'
import icon2 from './images/icon2.png'
import icon3 from './images/icon3.png'
import icon4 from './images/icon4.png'
import icon5 from './images/icon5.png'
import logo from './images/logo.png'
import start from './images/start.png'

export default defineComponent({
    name: 'LiveBroadcastSharePreview',
    props: ['form','url'],
    data() {
        return {
            detail: {
                roomTitle: '',
                liveStartTime: '',
                liveRemark: '',
            },
        }
    },
    mounted() {
        let canvas = document.getElementById('canvas');
        let text = this.url;
        QRCode.toCanvas(canvas, text, {width:79,margin:1},function (error) {
            if (error){
                console.error(error);
            } 
            console.log('QRCode success!')
        })
    },
    methods: {
        copyText() {

        },
        shareImage() {

        }
    },
    render() {
        return (
            <div id="preview">
                {this.form.preTemplate === '1' ?
                    <div class={styles.first}>
                        <h2>{this.form.roomTitle}</h2>
                        <p class={styles.teacher}> 主讲人：{this.form.speakerName}</p>
                        <img src={icon1} class={styles.icon} alt="" />
                        <div class={styles.preCore}>
                            <img src={start} class={styles.start} alt="" />
                            <p class={styles.title}>开播时间</p>
                            <p class={styles.time}>{this.form.liveStartTime}</p>
                            <p class={styles.title}>直播内容</p>
                            <div class={styles.content}>
                                <img class={styles.pre} src={icon5} alt="" />
                                <img class={styles.end} src={icon4} alt="" />
                                {this.form.liveRemark}
                            </div>
                        </div>
                        <div class={styles.bottom}>
                            <img class={styles.logo} src={logo} alt="" />
                            <div class={styles.code}>
                                <div>
                                    <canvas id='canvas' height="80" width="80" style="width: 80px; margin:0"></canvas>
                                </div>
                            </div>
                        </div >
                    </div> : null}
                {this.form.preTemplate === '2' ?
                    <div class={styles.second} >
                        <h2>{this.form.roomTitle}</h2>
                        <p class={styles.teacher}>主讲人：{this.form.speakerName}</p>
                        <img src={icon3} class={styles.icon} alt="" />
                        <div class={styles.preCore}>
                            <img src={start} class={styles.start} alt="" />
                            <p class={styles.title}>开播时间</p>
                            <p class={styles.time}>{this.form.liveStartTime}</p>
                            <p class={styles.title}>直播内容</p>
                            <div class={styles.content}>
                                <img class={styles.pre} src={icon5} alt="" />
                                <img class={styles.end} src={icon4} alt="" />
                                {this.form.liveRemark}
                            </div>
                        </div>
                        <div class={styles.bottom}>
                            <img class={styles.logo} src={logo} alt="" />
                            <div class={styles.code}>
                                <div>
                                    <canvas id='canvas' height="80" width="80" style="width: 80px; margin:0"></canvas>
                                </div>
                            </div>
                        </div>
                    </div> : null
                }
                {this.form.preTemplate === '3' ?
                    <div class={styles.third} >
                        <h2>{this.form.roomTitle}</h2>
                        <p class={styles.teacher}>主讲人：{this.form.speakerName}</p>
                        <img src={icon2} class={styles.icon} alt="" />
                        <div class={styles.preCore}>
                            <img src={start} class={styles.start} alt="" />
                            <p class={styles.title}>开播时间</p>
                            <p class={styles.time}>{this.form.liveStartTime}</p>
                            <p class={styles.title}>直播内容</p>
                            <div class={styles.content}>
                                <img class={styles.pre} src={icon5} alt="" />
                                <img class={styles.end} src={icon4} alt="" />
                                {this.form.liveRemark}
                            </div>
                        </div>
                        <div class={styles.bottom}>
                            <img class={styles.logo} src={logo} alt="" />
                            <div class={styles.code}>
                                <div>
                                    <canvas id='canvas' height="80" width="80" style="width: 80px; margin:0"></canvas>
                                </div>
                            </div>
                        </div>
                    </div> : null
                }
            </div >
        )
    },
})