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" ref="form">
        <el-form-item label="发布抖音视频：" prop="description">
          <el-input
            type="textarea"
            rows="10"
            v-model="formData.description"
            placeholder="添加作品描述，能让更多的人看到..."
            maxlength="300"
            show-word-limit
          ></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"
              tip="建议尺寸 286 * 198px"
              @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" @click="onBack">取消</div>
        <div class="button publish" @click="onPublish">发布</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  layout: 'app-ross',
  data() {
    return {
      formData: {
        coverImage: '',
        fileUrl: '',
        description: '',
        ossName: '',
      },
      rules: {
        coverImage: [
          {
            required: true,
            message: '请上传视频封面图片',
            trigger: ['change'],
          },
        ],
        fileUrl: [
          {
            required: true,
            message: '请上传视频',
            trigger: ['change'],
          },
        ],
        description: [
          {
            required: true,
            message: '请上传视频',
            trigger: ['blur'],
          },
        ],
      },
      coverList: [],
    }
  },
  computed: {
    ...mapGetters(['routePrefix', 'userInfo', 'authUserId']),
  },
  methods: {
    // 发布视频
    async onPublish() {
      try {
        await this.$refs.form.validate()
        this.publishVideoSave()
      } catch (error) {
        console.log(error)
      }
    },

    // 保存视频
    async publishVideoSave() {
      try {
        const { authId, mobile } = this.userInfo
        await this.$http.api.publishVideoSave({
          authId,
          authUserId: this.authUserId,
          userName: mobile,
          title: this.formData.description,
          ossName: this.formData.ossName,
          cover: this.formData.coverImage,
          ossUrl: this.formData.fileUrl,
        })
        this.$router.replace(`${this.routePrefix}/activity/challenge/message`)
      } catch (error) {
        console.log(error)
      }
    },

    // 视频封面上传
    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() {
      this.coverList = []
      this.formData.coverImage = ''
    },

    // 视频上传成功
    onVideoUploadSuccess({ file, fileList }) {
      this.formData.fileUrl = file.url
      this.formData.ossName = file.uuid
    },

    // 返回
    onBack() {
      this.$router.back()
    },
  },
}
</script>

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

  ::v-deep {
    .el-input.is-active .el-input__inner,
    .el-input__inner:focus,
    .el-textarea__inner:focus,
    .el-upload--picture-card:hover,
    .el-upload:focus {
      border-color: #f3920d;
    }
  }

  .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;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  ::v-deep {
    .el-form-item__label {
      font-size: 3.4vw;
      line-height: 4.6vw;
    }
  }

  .page {
    background: #fff;
    padding: 8vw 0;
    .page-content {
      width: 85.6vw;
      margin: 0 auto;

      .tip {
        margin: 20vw 0 12vw;
        font-size: 3vw;
        line-height: 1.8;
        .title {
          color: #666666;
          margin-bottom: 8px;
        }
        .content {
          color: #999999;
        }
      }

      .control {
        .button {
          width: 85.6vw;
          height: 12vw;
          margin: 0 auto;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 3.6vw;
          &.cancel {
            border: 0.1vw solid #c2c2c2;
            color: #666666;
          }
          &.publish {
            background: #f3920d;
            color: #fff;
            margin-top: 3.2vw;
          }
        }
      }
    }
  }
}
</style>