pbl-teacher-table/src/components/pages/aiAddCourse/aiCreateVideoDialog.vue

<template>
    <el-dialog title="AI生成视频" :visible.sync="dialogVisibleAiCreateVideo" :append-to-body="true" width="700px"
        :before-close="handleClose" class="dialog_diy">
        <div style="height: 500px;padding:15px" v-loading="loading">
            <div style="position: relative; width: 100%;height: 40px;margin-bottom: 10px;">
                <el-input class="inputC" style="height: 100%;" placeholder="搜索视频关键字" v-model="detail"
                @keyup.enter.native="aiGet()"></el-input>
                <div class="search_img" @click="aiGet" style="right: 10px">
                <img src="../../../assets/icon/search.png" alt />
                </div>
            </div>
            <div class="Box">
                <div class="video_box" v-for="(item,index) in data" :key="index">
                    <img :src="item.snippet.thumbnails.high.url" />
                    <span class="name">{{ item.snippet.title }}</span> 
                    <span class="detail">{{ item.snippet.description }}</span> 
                    <div class="btn">
                        <span @click="openUrl(item.id.videoId)">查看</span>
                        <span @click="checkUrl(item.snippet.title,item.id.videoId)">加入</span>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="aiGet" type="primary">重新生成</el-button> -->
            <!-- <el-button @click="confirm" type="primary">确 定</el-button> -->
            <el-button @click="close">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>

export default {
    components: {
    },
    props: {
        dialogVisibleAiCreateVideo: {
            type: Boolean,
            default: false
        },
        courseName: {
            type: String,
            default: ""
        },
    },
    // 根据用户给你的参考资料
    data() {
        return {
            userid: this.$route.query.userid,
            radio: 0,
            aiJson: {
                ppt: ``,
                word: '',
                video: ''
            },
            aiUrl: {
                ppt: '',
                word: '',
                video: ''
            },
            detail: "",
            loading: false,
            url: "",
            data: [],
            uJson: {}
        }
    },
    watch: {
        dialogVisibleAiCreateVideo(newValue, oldValue) {
            if (newValue) {
                // if (this.radio == 0) {
                this.detail = this.courseName
                // }
                // if (this.radio == 1) {
                //     this.detail = this.aiJson.word
                // }
                // if (this.radio == 2) {
                //     this.detail = this.aiJson.video
                // }
                // this.loading = false
                this.aiGet()
            }
        },
    },
    methods: {
        handleClose(done) {
            this.close()
            done();
        },
        close() {
            this.$emit('update:dialogVisibleAiCreateVideo', false)
        },
        openUrl(url){
            window.open('https://www.youtube.com/embed/'+url)
        },
        checkUrl(name,id) {
            let json = {
                name: "链接",
                title: name,
                url: 'https://www.youtube.com/embed/'+id,
                type: 8,
            }
            this.$emit('createAiVideo', json)
            this.$message.success('加入成功')
        },
        changeRadio() {
            if (this.radio == 0) {
                this.detail = this.aiJson.ppt
            }
            if (this.radio == 1) {
                this.detail = this.aiJson.word
            }
            if (this.radio == 2) {
                this.detail = this.aiJson.video
            }
        },
        async aiGet() {
            let _this = this
            _this.loading = true
            this.ajax
                .get(`https://www.googleapis.com/youtube/v3/search?key=AIzaSyBUvNQ5Wyua4PbStE2vp3t7MIY4htry-4M&part=snippet&q=${this.detail}&maxResults=10&type=video&order=relevance&regionCode=HK`)
                .then((response) => {
                    console.log(response);
                    _this.data = response.data.items
                    _this.loading = false

                })
                .catch((error) => {
                    _this.loading = false
                    console.log(error);
                });
        },
    },
}
</script>

<style scoped>
.dialog_diy>>>.el-dialog {
    height: auto;
    margin: 15vh auto 0 !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 124px);
    box-sizing: border-box;
    padding: 0px;
}


.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}


.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 5px 7px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    resize: none;
    font-family: "Microsoft YaHei";
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1.5px solid #cad1dc;
}

.binfo_textarea {
    border: 1.5px solid #cad1dc;
    font-size: 15px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: "Microsoft YaHei";
}

.binfo_input:focus-visible {
    border: 1.5px solid #3681fc !important;
}


.t_box {
    display: flex;
    margin-bottom: 15px;
}

.t_box>span:nth-child(1) {
    min-width: 80px;
    font-size: 16px;
    color: #000;
}

.inputC >>> .el-input__inner{
    padding: '0 35px 0 15px'
}
.search_img {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.search_img>img {
  width: 100%;
  height: 100%;
}


.Box{
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.video_box {
    width: calc(100% / 2 - 10px);
    /* overflow: hidden; */
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    cursor: pointer;
}
.video_box > img{
    height: 200px;
    object-fit: cover;
}

.video_box > .detail{
    color: #cecece;
}
.video_box > .name{
    color: #000;
    margin: 5px 0;
    height: 32px;
}

.btn{
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    margin-top: auto;
}

.btn > span:hover{
    background: #4087f1;
}

.btn > span{
    width: 100%;
    height: 100%;
    background: #3681fc;
    color: #fff;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn > span + span{
    margin-left: 10px;
}
</style>