boss/pages/main/index/sale_vod_publish_bk.vue

<template>
  <div class="mainContainer">

    <div class="pform-head">
      <h3>发布课程</h3>
    </div>

    <div class="pform-body">
      <el-form :model="vodForm" label-width="100px">
        <el-form-item label="课程所属UID">
          <el-input v-model="vodForm.uid" placeholder="用户UID" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="课程标题">
          <el-input v-model="vodForm.title"></el-input>
        </el-form-item>
        <el-form-item label="课程大纲">
          <el-input type="textarea" v-model="vodForm.content" placeholder="请输入内容"
                    minlength="5"
                    maxlength="5000" rows="6"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="课程价格">
          <el-input v-model="vodForm.price" placeholder="单位：元" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="课程首页图" prop="img">
          <el-upload
            class="img-uploader"
            action="/api/admin/cert/uploadImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
          <img v-if="vodForm.img_icon" :src="vodForm.img_icon" class="img" />
          <i v-else class="el-icon-plus img-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="uploader">
        <UploadAuth :getUserData="getUserData" />
      </div>
      <div slot="footer">
        <el-button type="primary" style="margin-left: 100px;">确认发布</el-button>
      </div>
    </div>

  </div>
</template>

<script>

  import UploadAuth from "@/components/videoUpload/src/UploadAuth";

  export default {
    data() {
      return {
        vodForm:{
          title:'',
          content:'',
          uid:'',
          price:'',
          img_icon:''
        }
      }
    },
    components: {
      UploadAuth
    },
    computed: {

    },
    mounted() {

    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.vodForm.img_icon = res.data.img_icon
      },
      beforeAvatarUpload(file) {
        return true
      },
      async getUserData(filename, callback) {
        let res = await this.$post("/api/admin/upload/video", {filename: filename});
        if (res && res.status === 1) {
          let data = res.data;
          callback(JSON.stringify({Vod:data}));
        }
      },
    }
  };
</script>

<style>
  .pform-head{
    text-align: center;
  }
  .pform-body{
    margin: 20px 200px;
  }
  .img-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .img-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .img-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .img {
    width: 270px;
    height: 190px;
    display: block;
  }

  .upload-type-switch {
    text-align: center;
  }
  .container {
    width: 1200px;
    margin: 0 auto;
  }
  .input-control {
    margin: 5px 0;
  }
  .input-control label {
    font-size: 14px;
    color: #333;
    width: 30%;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .input-control input {
    width: 30%;
    height: 30px;
    padding: 0 5px;
  }
  .upload {
    padding: 30px 50px;
  }
  .progress {
    font-size: 14px;
  }
  .progress i {
    font-style: normal;
  }
  .upload-type {
    color: #666;
    font-size: 12px;
    padding: 10px 0;
  }
  .upload-type button {
    margin: 0 10px 0 20px;
  }
  .status {
    font-size: 14px;
    margin-left: 30px;
  }
  .info {
    font-size: 14px;
    padding-left: 30px;
  }
</style>