|
|
@@ -0,0 +1,260 @@
|
|
|
+<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>
|
|
|
+ </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)
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ if (this.url) {
|
|
|
+ this.$emit('createAiPpt', this.uJson)
|
|
|
+ } else {
|
|
|
+ this.$message.error('请先生成ppt');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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}`)
|
|
|
+ .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: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.video_box > img{
|
|
|
+ height: 200px;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.video_box > .detail{
|
|
|
+ color: #cecece;
|
|
|
+}
|
|
|
+.video_box > .name{
|
|
|
+ color: #000;
|
|
|
+ margin: 5px 0;
|
|
|
+}
|
|
|
+</style>
|
