admin/plugins/video-share/views/componemts/videoCard.blade.php

<template id="videoCard">
  <el-dialog title=" " :visible.sync="dialogVisible" width="600px" :before-close="handleClose" :show-close="false">
    <div class="top-title">更换视频</div>
    <div class="detail-pane">
      <div class="detail-top">
        <span class="video-source">视频源：</span>
        <el-radio-group v-model="radio_type">
          <el-radio :label="1">上传</el-radio>
          <el-radio :label="2">视频地址</el-radio>
        </el-radio-group>
      </div>
      <div class="img-box">
        <div v-if="radio_type == 1">
          <div class="upload-box upload-boxed" v-if="!form.video_file" @click="upload('3')">
            <i class="el-icon-plus" style="font-size:32px"></i>
            <div class="upload-boxed-text">点击重新上传视频</div>
          </div>
          <div class="upload-boxed" v-if="form.video_file">
            <video :src="form.video_file" alt="" controls="controls" class="upload-sty"></video>
            <div class="upload-boxed-text" @click="upload('3')">点击重新上传视频</div>
          </div>
        </div>
        <div class="video-upload-sty" v-if="radio_type == 2">
          <textarea class="video-upload-textarea" cols="40" rows="7" v-model="form.video_url" placeholder="以https://开头, .MP4结尾的视频地址"></textarea>
        </div>
        <div>
          <div class="upload-box upload-boxed" v-if="!form.img_url" @click="upload('1')">
            <i class="el-icon-plus" style="font-size:32px"></i>
            <div class="upload-boxed-text">点击重新上传封面</div>
          </div>
          <div class="upload-boxed" v-if="form.img_url" @click="upload('1')">
            <img :src="form.img_url" alt="" class="upload-sty">
            <div class="upload-boxed-text">点击重新上传封面</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-pane">
      <span class="save-sty" @click="save">保存</span>
      <span class="cancal-sty" @click="handleClose">取消</span>
    </div>
    <upload-multimedia-img :upload-show="showSelectMaterialPopup" :type="type" sel-num="one" select="open" @replace="showSelectMaterialPopup = !showSelectMaterialPopup" @sure="selectedMaterial"></upload-multimedia-img>
  </el-dialog>
</template>
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
<script>
  Vue.component('videoCard', {
    template: '#videoCard',
    delimiters: ['[[', ']]'],
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      video_row: {
        type: null,
        default: {}
      }
    },
    data() {
      return {
        radio_type: 1,
        form: {
          video_file: "",
          img_url: "",
          video_url:""
        },
        showSelectMaterialPopup: false,
        type: '',
      }
    },
    mounted() {
      this.form.img_url = this.video_row.cover;
      this.form.video_file = this.video_row.video_src;
    },
    methods: {
      handleClose() {
        this.$emit("update:dialogVisible", false);
        this.form.video_file = "";
        this.form.img_url = "";
        this.form.video_url = "";
      },
      // 获取图片信息
      selectedMaterial(name, image, imageUrl) {
        if (this.type == '1') {
          this.form.img_url = imageUrl[0].url;
        } else if (this.type == '3') {
          this.form.video_file = imageUrl[0].url;
        }
      },
      // 上传图片
      upload(type) {
        this.type = type;
        this.showSelectMaterialPopup = true;
      },
      // 保存
      save() {
        let form = null;
        if(this.radio_type == 1) {
          form = {
            id: this.video_row.id,
            video_file: this.form.video_file,
            cover_file: this.form.img_url,
            video_url: ""
          }
        }else if(this.radio_type == 2) {
          form = {
            id: this.video_row.id,
            video_url: this.form.video_url,
            cover_file: this.form.img_url,
            video_file: ""
          }
        }
        this.$http.post('{!! yzWebFullUrl("plugin.video-share.admin.video-goods.upload-audio") !!}', {...form,type:this.radio_type}).then(({data}) =>{
          if(data.result) {
            this.$message.success(data.msg);
            this.$emit("update:dialogVisible", false);
            this.$parent.search();
          }else {
            this.$message.error(data.msg);
          }
        }, (response) => {
          console.log(response);
        });
      }
    }
  })
</script>
<style>
  .v-modal {
    z-index: 1000 !important;
  }

  .el-dialog__header {
    padding: 0 !important;
  }

  .top-title {
    font-weight: 600;
  }

  .detail-pane {
    margin: 25px;
  }

  .detail-pane .detail-top {}

  .detail-pane .detail-top .video-source {
    font-weight: 600;
    margin-right: 10px;
  }

  .bottom-pane {
    display: flex;
    justify-content: center;
    margin: 30px 0;
  }

  .bottom-pane .save-sty {
    background: #59b89d;
    color: white;
    font-size: 12px;
    width: 70px;
    height: 28px;
    /* text-align: center; */
    line-height: 1;
    border-radius: 5px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 20px;
    cursor: pointer;
  }

  .bottom-pane .cancal-sty {
    background: #a4adb3;
    color: white;
    font-size: 12px;
    width: 70px;
    height: 28px;
    line-height: 1;
    border-radius: 5px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 20px;
    cursor: pointer;
  }

  .img-box {
    display: flex;
    justify-content: space-between;
    margin: 20px 10px;
  }

  .video-upload-textarea {
    resize: none;
    border-color: #c5c5c5;
    border-radius: 5px;
  }

  .upload-sty {
    width: 150px;
    height: 118px;
    border-radius: 5px;
    cursor: pointer;
    object-fit: fill;
  }

  .upload-boxed-text {
    cursor: pointer;
  }
</style>