杨泽宇 / cms_songs · Files

import 'babel-polyfill'
import * as all from "./config";
import './../css/reui.css';
var Main = {
  data() {
    return {
      form: {
        channelId: null,
        songName: null,
        singer: null,
        lyricist: null,
        songwriter: null,
        redact: null,
        mixing: null,
        lyric: null,
        phone: null,
        name: null,
        audioId: null,
        audioFile: null,
        agree: []
      },
      labels: all.formLabels,
      rules: {
        songName: [
          {
            required: true,
            trigger: "change",
            message: "请填写歌曲名字",
          },
        ],
        name: [
          { required: true, trigger: "change", message: "请填写联系人姓名" },
        ],
        agree: [
          { required: true, trigger: "change", message: "请进行作曲授权" },
        ],
        phone: [
          {
            required: true,
            trigger: "change",
            message: "请填写格式正确的手机号码",
            validator: all.validatePhone,
          },
        ],
        audioFile: [
          { required: true, trigger: "change", message: "请上传音频" },
        ],
        channelId: [
          { required: true, trigger: "change", message: "请选择作品类型" },
        ],
        audioId: [
          {
            required: true,
            trigger: "change",
            message: "请上传音频文件以获取音频ID",
          },
        ],
        singer: [
          { required: false, trigger: "change", message: "请输入歌手名字" },
        ],
        lyricist: [
          { required: false, trigger: "change", message: "请输入作词人名字" },
        ],
        songwriter: [
          { required: false, trigger: "change", message: "请输入作曲人名字" },
        ],
        lyric: [
          {
            required: false,
            trigger: "change",
            message: "请输入符合要求的歌词，至少20个字，最多不能超过2500个字",
            validator: all.validateLyric,
          },
        ],
      },

      uploadUrl: "",
      fileList: [],
      token: "",
      btnDisabled: false,
      submitDisabled: false,
      msgText:
        "只能上传一个mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a格式的音频文件,且不超过500mb。上传过程中请勿刷新页面。",
      percent: 0,
      curFile: "",
      errorMsg: "",
      banAgree: false
    };
  },
  methods: {
    // 作品类型为【词】的时候可以不上传文件
    handleChange(data) {
      if (data == 1279) {
        // 优秀作词榜
        this.rules.audioFile[0].required = false;
        this.rules.audioId[0].required = false;
        this.rules.singer[0].required = false;
        this.rules.songwriter[0].required = false;
        this.rules.lyricist[0].required = true;
        this.rules.lyric[0].required = true;
      } else if (data == 1278) {
        // 成品
        this.rules.singer[0].required = true;
        this.rules.audioFile[0].required = true;
        this.rules.audioId[0].required = true;
        this.rules.lyricist[0].required = false;
        this.rules.songwriter[0].required = false;
        this.rules.lyric[0].required = false;
      } else if (data == 1280) {
        // 作曲
        this.rules.songwriter[0].required = true;
        this.rules.audioFile[0].required = true;
        this.rules.audioId[0].required = true;
        this.rules.singer[0].required = false;
        this.rules.lyricist[0].required = false;
        this.rules.lyric[0].required = false;
      } else if (data == 1281) {
        // 其他
        this.rules.songwriter[0].required = false;
        this.rules.audioFile[0].required = true;
        this.rules.audioId[0].required = true;
        this.rules.singer[0].required = false;
        this.rules.lyricist[0].required = false;
        this.rules.lyric[0].required = false;
      }
    },
    // 文件数量超上限响应
    exceed(e, d) {
      this.$message.error("只能上传一个文件");
      this.errorMsg = "只能上传一个文件";
    },
    // 表单重置按钮响应
    reset() {
      for (let i in this.form) {
        this.form[i] = null;
      }
      this.percent = 0;
      this.btnDisabled = false;
      this.submitDisabled = false;
    },
    // 文件移除响应，暂未启用
    handleRemove(file, list) {
      if (this.percent < 100) {
        this.errorMsg = "上传中的文件不可删除";
        this.$message({
          type: "error",
          duration: 5000,
          message: "上传中的文件不可被删除",
        });
        return false;
      } else {
        this.form.audioId = null;
        this.percent = 0;
      }
    },
    // 校验Md5
    initMd5(fileObj) {
      return new Promise((resolve, reject) => {
        const fileName = fileObj.name.split(".")[0];
        const fileType = fileObj.name.split(".")[1];
        const fileSize = fileObj.size;
        const fileModifyDate = fileObj.lastModifiedDate;
        const md5Str = all
          .initVideoMd5(
            [fileType, fileSize, fileModifyDate || fileName].join("_")
          )
          .toLowerCase();
        if (md5Str) {
          resolve(md5Str);
        } else {
          reject("校验失败");
        }
      });
    },
    // 确认提交按钮响应，上传视频到七牛
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.errorMsg = ''
          this.banAgree = true
          this.submitDisabled = true;
          this.btnDisabled = true;
          if (this.form.channelId == 1279) {
            this.postCms();
          } else {
            const fileName = this.form.audioFile.raw.name.split(".");
            fileName.splice(fileName.length - 1, 1);
            this.curFile = this.form.audioFile.name;
            this.form.audioId = null;
            const that = this;
            const fileBaseObj = {
              videoName: fileName.join("."),
              md5: null,
            };
            const fileSaveObj = {
              videoId: null,

              multipleCategory:
                100005 + "/" + this.getCategoryText(this.form.channelId),
              tag: this.getChannelText(this.form.channelId),
              ts: this.getTs(),
              timestamp: this.getTimeStamp(),
              masterId: all.secretUrls.masterIdMaster,
              // masterId: all.secretUrls.masterIdDev,
            };
            const fileInitObj = {
              gfmt: this.form.audioFile.raw.name.split(".").reverse().shift(),
              fileSize: this.form.audioFile.raw.size,
              ts: this.getTs(),
              timestamp: this.getTimeStamp(),
              multipleCategory:
                100005 + "/" + this.getCategoryText(this.form.channelId),
              // masterId: all.secretUrls.masterIdDev,
              masterId: all.secretUrls.masterIdMaster,
            };
            const fileWholeObj = {
              file: this.form.audioFile.raw,
              uploadStatus: "ready",
              proCount: 0,
              fileKey: null,
              observable: null,
              subscription: null,
            };

            const observer = {
              next(res) {
                if (res.total.percent >= 99) {
                  that.percent = 99;
                } else {
                  that.percent = Math.ceil(res.total.percent);
                }
              },
              error(err) {
                console.log(err);
              },
              complete(res) {
                let apiDone = all.secretUrls.base + all.secretUrls.finish;
                let apiStringSignDone = all.signFunction(
                  apiDone,
                  that.getParamsList({
                    hash: res.hash,
                    key: res.key,
                    vid: fileSaveObj.videoId,
                    timestamp: that.getTimeStamp(),
                  })
                );
                all
                  .request({
                    url: apiDone,
                    method: "get",
                    params: all.parseQueryString(apiStringSignDone),
                  })
                  .then((res) => {
                    if (
                      res &&
                      res.data &&
                      res.data.errorCode &&
                      res.data.errorCode != 0
                    ) {
                      that.errorMsg = "系统错误，请联系管理员";
                      // that.reset();
                      this.submitDisabled = false;
                      this.btnDisabled = false;
                      this.banAgree = false
                      return false;
                    } else {
                      let apiComplete =
                        all.secretUrls.base + all.secretUrls.callback;
                      let apiStringSignComplete = all.signFunction(
                        apiComplete,
                        // that.getParamsList({
                        //   ...fileBaseObj,
                        //   ...fileSaveObj,
                        //   ...{ timestamp: that.getTimeStamp() },
                        // })
                        that.getParamsList(Object.assign(fileBaseObj, fileSaveObj, {timestamp: that.getTimeStamp()}))
                      );
                      return all.request({
                        url: apiComplete,
                        method: "get",
                        params: all.parseQueryString(apiStringSignComplete),
                      });
                    }
                  })
                  .then((data) => {
                    if (
                      data &&
                      data.data &&
                      data.data.data &&
                      data.data.data.obj
                    ) {
                      that.form.audioId = data.data.data.obj;
                      that.percent = 100;
                      that.postCms();
                    } else {
                      that.errorMsg = "系统错误，请联系管理员";
                      // that.reset()
                      this.submitDisabled = false;
                      this.btnDisabled = false;
                      this.banAgree = false
                    }
                  })
                  .catch((error) => {
                    that.errorMsg = error ? error : "系统错误，请联系管理员";
                    // that.reset();
                    this.submitDisabled = false;
                    this.btnDisabled = false;
                    this.banAgree = false
                  });
              },
            };

            Promise.all([
              all.validateVideoSize(fileInitObj.fileSize),
              all.validateVideoFormat(fileInitObj.gfmt),
              all.validateNameLength(fileBaseObj.videoName),
            ])
              .then((check) => {
                return this.getToken();
              })
              .then((d) => {
                if (d && d.data && typeof d.data == "string") {
                  this.token = d.data;
                }
                return this.initMd5(this.form.audioFile.raw);
              })
              .then((n) => {
                if (!this.token) {
                  // this.$message({
                  //   type: "error",
                  //   message: "鉴权失败",
                  //   duration: 5000,
                  // });
                  this.errorMsg = "鉴权失败";
                  // this.reset();
                  this.submitDisabled = false;
                  this.btnDisabled = false;
                  this.banAgree = false
                  return false;
                }
                fileBaseObj.md5 = n;
                let apiInit = all.secretUrls.base + all.secretUrls.init;
                let apiStringSignInit = all.signFunction(
                  apiInit,
                  // this.getParamsList({ ...fileBaseObj, ...fileInitObj })
                  this.getParamsList(Object.assign(fileBaseObj, fileInitObj))
                );
                return all.request({
                  url: all.secretUrls.base + all.secretUrls.init,
                  method: "get",
                  params: all.parseQueryString(apiStringSignInit),
                });
              })
              .then((res) => {
                if (
                  res &&
                  res.data &&
                  res.data.data &&
                  res.data.data.code == 0
                ) {
                  fileSaveObj.videoId = res.data.data.obj.vid;
                  fileWholeObj.fileKey = res.data.data.obj.originPath;
                  all.putExtra.params["x:name"] = fileWholeObj.fileKey;
                  fileWholeObj.observable = qiniu.upload(
                    this.form.audioFile.raw,
                    fileWholeObj.fileKey,
                    this.token,
                    all.putExtra,
                    all.cdnConfig
                  );
                  fileWholeObj.subscription =
                    fileWholeObj.observable.subscribe(observer);
                } else {
                  if (
                    res &&
                    res.data &&
                    res.data.errorCode &&
                    res.data.errorCode != 0
                  ) {
                    this.errorMsg = "系统错误，请联系管理员";
                    // this.reset();
                    this.submitDisabled = false;
                    this.btnDisabled = false;
                    this.banAgree = false
                  }
                }
              })
              .catch((error) => {
                this.errorMsg = error ? error : "系统错误，请联系管理员";
                // this.reset()
                this.submitDisabled = false;
                this.btnDisabled = false;
                this.banAgree = false
              });
          }
        } else {
          // this.$message.error("请检查表单内容");
          this.errorMsg = '请检查表单内容'
          this.submitDisabled = false;
          this.btnDisabled = false;
          this.banAgree = false
          return false;
        }
      });
    },
    // 对象参数转数组格式
    getParamsList(params) {
      let list = [];
      for (let i in params) {
        if (i == "hash" || i == "key" || i == "x:name") {
          list.push(`${i}=${encodeURI(params[i])}`);
        } else {
          list.push(`${i}=${params[i]}`);
        }
      }
      return list;
    },
    // 获取时间戳
    getTimeStamp() {
      return Math.round(new Date().getTime() / 1000);
    },
    // 获取时间戳加四位随机数
    getTs() {
      return (
        this.getTimeStamp().toString() +
        Math.floor(Math.random() * 10000).toString()
      );
    },
    // 通过作品类型id获取作品分类，用于上传视频的？？参数
    getCategoryText(id) {
      if (id == 1278) {
        return "533";
      }
      if (id == 1280) {
        return "534";
      }
      if (id == 1281) {
        return "532";
      }
    },
    // 通过作品类型id获取作品类型，用于上传视频的tag
    getChannelText(id) {
      if (id == 1278) {
        return "热歌榜";
      }
      if (id == 1279) {
        return "优秀作词榜";
      }
      if (id == 1280) {
        return "优秀作曲榜";
      }
      if (id == 1281) {
        return "其他";
      }
    },
    // 获取认证token
    getToken() {
      let api = all.secretUrls.base + all.secretUrls.auth;
      let apiStringSign = all.signFunction(api, [
        "ts=" + this.getTs(),
        "timestamp=" + this.getTimeStamp(),
      ]);
      return all.request({
        url: all.secretUrls.base + all.secretUrls.auth,
        method: "get",
        params: all.parseQueryString(apiStringSign),
      });
    },
    // cms接口提交videoId和表单内容
    postCms() {
      all
        .request({
          // url: "http://cmstest.cnlive.com:8768/contentApi/audioSave",
          url: "https://cms.cnlive.com/api/contentApi/audioSave",
          method: "post",
          params: {
            channelId: this.form.channelId,
            songName: this.form.songName,
            singer: this.form.singer,
            lyric: this.addBr(this.form.lyric),
            phone: this.form.phone,
            name: this.form.name,
            audioId: this.form.audioId,
            lyricist: this.form.lyricist,
            songwriter: this.form.songwriter,
            redact: this.form.redact,
            mixing: this.form.mixing,
          },
          withCredentials: true,
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            "Access-Control-Allow-Origin": "*",
            "content-type": "application/json;charset=UTF-8",
          },
        })
        .then((res) => {
          if (res.data) {
            setTimeout(() => {
              // console.log("jump success");
              window.location.replace("./success.html");
            }, 1000);
          } else {
            setTimeout(() => {
              // console.log("jump");
              window.location.replace("./failed.html");
            }, 1000);
          }
        })
        .catch((error) => {
          console.log(error);
          setTimeout(() => {
            // console.log("jump");
            window.location.replace("./failed.html");
          }, 1000);
        })
        .finally(() => {
          setTimeout(() => {
            this.btnDisabled = false;
            this.submitDisabled = false;
            this.banAgree = false            
          }, 1000);
        });
    },
    // 获取txt文件内容，暂未启用
    getTxt(e) {
      this.form.txtFile = e.raw;
      let file = e.raw;
      (reader = new FileReader()), (that = this);
      reader.onload = function (evt) {
        var data = evt.target.result;
        console.log(data);
        console.log(String.fromCharCode.apply(null, new Uint16Array(data)));
      };
      reader.readAsArrayBuffer(file);
    },
    // 选择上传文件
    getMp3(file) {
      console.log(file)
      this.form.audioFile = file;
      this.errorMsg = "";
    },
    // textarea换行转br
    addBr(str) {
      var reg = new RegExp("\r\n","g");
      var regr = new RegExp("\r","g");
      var regn = new RegExp("\n","g");
      if(str) {
        str = str.trim()
        str = str.replace(regr,"<br/>")
        str = str.replace(regn,"<br/>")
        str = str.replace(reg,"<br/>")
      } else {
        str = ''
      }
      return str
    }
  },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#mainPage')