Vue3 之 Lark预约活动

一、前情提要

1. 需求

系统中方便客户进行预约活动操作，故接入Lark快速开发

2. 安装Lark

二、配置活动

1. 创建活动

2. 复制代码

三、项目中引入 

1. 效果

2. 代码

<!-- ? 预约培训模块 -->
<template>
    <div class="appointment-train-view">
        <div class="main-view">
            <aside class="right-lark">
                <!-- Lark Scheduler Inline Embed Begin -->
                <div
                    :key="Math.random()"
                    class="scheduler-inline-widget"
                    data-url="https://zj94kt0oujr.larksuite.com/scheduler/embed/1249b5e3b8a9fa8e?hideEventDetail=true"
                    style="width: 100%; height: 606px"
                ></div>
                <!-- Lark Scheduler Inline Embed End -->
                <!-- loading -->
                <ElementIcon
                    class="is-loading"
                    iconName="Loading"
                    :iconSize="40"
                    iconColor="#86909C"
                />
                <!-- 遮挡四周box-shadow -->
                <i class="mark mark-l" />
                <i class="mark mark-t" />
                <i class="mark mark-r" />
                <i class="mark mark-b" />
            </aside>
        </div>
    </div>
</template>
<script setup>
import { onUnmounted, computed } from 'vue'

const loadLarkSchedulerScript = () => {
    const script = document.createElement('script')
    script.className = 'lark-scheduler-script'
    script.src = 'https://zj94kt0oujr.larksuite.com/scheduler/embed/scheduler-widget.js'
    script.async = true
    script.onload = () => {
        console.log('Lark Scheduler 脚本加载完成')
    }
    document.body.appendChild(script)
}
// 加载 Lark Scheduler 脚本
loadLarkSchedulerScript()

onUnmounted(() => {
    // 卸载 Lark Scheduler 脚本
    const script = document.querySelector('.lark-scheduler-script')
    document.body.removeChild(script)
})
</script>

<style lang="scss" scoped>
.appointment-train-view {
    height: 100vh;
    background-color: #f2f3f5;
    padding-top: 104px;
    .header-view {
        width: 1184px;
        margin: 0 auto 16px;
        :deep(.el-dropdown) {
            .support {
                margin-right: 0;
                position: relative;
                top: 2px;
            }
        }
    }
    .main-view {
        width: 1184px;
        height: 606px;
        margin: 0 auto;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        border-radius: 8px;
        .left-img {
            width: 334px;
            height: 100%;
            position: relative;
            img {
                width: 100%;
                height: 100%;
            }
            overflow: hidden;
        }
        .right-lark {
            flex: 1;
            position: relative;
            z-index: 2;
            .scheduler-inline-widget {
                position: relative;
                z-index: 2;
            }
            .is-loading {
                position: absolute;
                left: 50%;
                top: 45%;
                transform: translate(-50%, -50%);
                z-index: 1;
            }
            .mark {
                position: absolute;
                background-color: #fff;
                z-index: 3;
                &.mark-l,
                &.mark-r {
                    height: 100%;
                    top: 0;
                }
                &.mark-l {
                    width: 20px;
                    left: 86px;
                }
                &.mark-r {
                    width: 20px;
                    right: 86px;
                }

                &.mark-t,
                &.mark-b {
                    width: 90%;
                    height: 28px;
                }
                &.mark-t {
                    top: 0px;
                }
                &.mark-b {
                    bottom: 0px;
                }
            }
        }
    }
}
</style>