caimei-authentic-www/pages/_template/ross/activity/challenge/publish.vue

<template>
  <div class="page">
    <div class="page-content">
      <el-form label-position="top" :model="formData" :rules="rules">
        <el-form-item label="发布抖音视：" prop="description">
          <el-input
            type="textarea"
            rows="6"
            v-model="formData.description"
            placeholder="添加作品描述，能让更多的人看到..."
          ></el-input>
        </el-form-item>
        <el-form-item label="视频封面：" prop="coverImage">
          <el-input v-show="false" v-model="formData.coverImage"></el-input>
          <div>
            <SimpleUploadImage
              :limit="1"
              :image-list="coverList"
              :before-upload="beforeCoverImageUpload"
              @success="uploadCoverImageSuccess"
              @remove="handleCoverImageRemove"
            ></SimpleUploadImage>
          </div>
        </el-form-item>
        <el-form-item label="视频文件：" prop="fileUrl">
          <SimpleOssUpload
            @success="onVideoUploadSuccess"
            :limit="1"
          ></SimpleOssUpload>
          <el-input v-show="false" v-model="formData.fileUrl"></el-input>
        </el-form-item>
      </el-form>
      <div class="tip">
        <div class="title">温馨提示：</div>
        <div class="content">
          视频文件大小不超过8G，时长在30分钟以内；分辨率为720p（720x1280）及以上；
          支持常用视频格式，推荐使用mp4、webm
        </div>
      </div>
      <div class="control">
        <div class="button cancel">取消</div>
        <div class="button publish">发布</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'app-ross',
  data() {
    return {
      formData: {
        coverImage: '',
        fileUrl: '',
        description: '',
      },
      rules: {
        coverImage: [
          {
            required: true,
            message: '请上传视频封面图片',
            trigger: ['change'],
          },
        ],
        fileUrl: [
          {
            required: true,
            message: '请上传视频',
            trigger: ['change'],
          },
        ],
        description: [
          {
            required: true,
            message: '请上传视频',
            trigger: ['blur'],
          },
        ],
      },
      coverList: [],
    }
  },
  methods: {
    // 发票上传
    beforeCoverImageUpload(file) {
      const flag = file.size / 1024 / 1024 < 5
      if (!flag) {
        this.$message.error('发票图片大小不能超过 5MB!')
      }
      return flag
    },
    uploadCoverImageSuccess({ response, file, fileList }) {
      this.coverList = fileList
      this.formData.coverImage = response.data
    },
    handleCoverImageRemove({ file, fileList }) {
      this.coverList = []
      this.formData.coverImage = ''
    },
    // 视频上传成功
    onVideoUploadSuccess({ file, fileList }) {
      this.formData.fileUrl = file.url
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  ::v-deep {
    .el-form-item__label {
      font-size: 16px;
    }
  }

  .page {
    background: #fff;
    padding: 40px 0;
    .page-content {
      width: 568px;
      margin: 0 auto;

      .tip {
        margin: 60px 0;
        font-size: 14px;
        line-height: 1.8;
        .title {
          color: #666666;
          margin-bottom: 8px;
        }
        .content {
          color: #999999;
        }
      }

      .control {
        .button {
          width: 295px;
          height: 50px;
          margin: 0 auto;
          border-radius: 4px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          &.cancel {
            border: 1px solid #c2c2c2;
            color: #666666;
          }
          &.publish {
            background: #f3920d;
            color: #fff;
            margin-top: 16px;
          }
        }
      }
    }
  }
}
</style>