error msg, textarea add br, upload tips

杨泽宇
1 parent 0a0780aa
Showing 5 changed files with 124 additions and 48 deletions
src/css/test.css
src/html/index.html
src/js/audios.js
src/js/config.js
webpack.config.js
@@ -22,6 +22,10 @@
   color: #4A90E2; 
   font-size: 20px;
 }
+.diy-error {
+  color: #D11244;
+  font-size: 20px;
+}
 .diy-danger {
   color: #D11244; margin-left: 10px;
 }
@@ -73,24 +73,37 @@
               :before-remove="handleRemove" :disabled="btnDisabled" :show-file-list="false">
               <el-button size="small" type="primary" :disabled="btnDisabled" class="diy-button width-190 bg-blue">选择文件
               </el-button>
+                <el-tooltip placement="top">
+                  <template #content>
+                    <p>1）可上传的音频格式：mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a。</p>
+                    <p>2）音频上传过程中，请勿离开此页面或者刷新此页面，否则会导致音频上传任务失败！</p>
+                    <p>3）音频文件大小上限：500M，数量上限：1。</p>
+                  </template>
+                  <el-button type="text" size="mini" class="title-small">上传须知</el-button>
+                </el-tooltip>
             </el-upload>
             <!-- <span class="diy-danger">{{msgText}}</span> -->
           </el-form-item>
-          <el-form-item class="diy-flex-50" label="上传须知">
+          <!-- <el-form-item class="diy-flex-50" label="上传须知"> -->
             <!-- <el-button class="diy-button width-140 bg-white">查看</el-button> -->
-            <el-tooltip placement="top">
+            <!-- <el-tooltip placement="top">
               <template #content>
-                <p>1）可上传的音频格式：mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a</p>
+                <p>1）可上传的音频格式：mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a。</p>
                 <p>2）音频上传过程中，请勿离开此页面或者刷新此页面，否则会导致音频上传任务失败！</p>
                 <p>3）音频文件大小上限：500M，数量上限：1。</p>
               </template>
-              <el-button class="diy-button width-140 bg-white">查看</el-button>
-          </el-form-item>
+              <el-button class="diy-button width-140 bg-white">查看</el-button> -->
+          <!-- </el-form-item> -->
           <el-divider></el-divider>
           <el-form-item class="diy-flex-50 diy-text-left">
-            <div class="diy-tip">{{form.audioFile?.name}} </div>
-            <div class="diy-tip" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%，请耐心等待……</div>
-            <div class="diy-tip" v-if="percent == 100"> 上传完成</div>
+            <div>
+              <div class="diy-tip">{{form.audioFile?.name}} </div>
+              <div class="diy-tip" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%，请耐心等待……</div>
+              <div class="diy-tip" v-if="percent == 100"> 上传完成</div>
+            </div>
+            <div v-if="errorMsg">
+              <div class="diy-error">{{errorMsg}}</div>
+            </div>
           </el-form-item>
           <el-form-item class="diy-flex-50 diy-text-right">
             <el-button @click="reset" class="diy-button width-140 bg-white" v-if="form.channelId == 1279">取消</el-button>
@@ -82,6 +82,7 @@ const Audio = {
         "只能上传一个mp3/flac/wav/ogg/mpg/wma/aac/acc/m4a格式的音频文件,且不超过500mb。上传过程中请勿刷新页面。",
       percent: 0,
       curFile: "",
+      errorMsg: "",
     };
   },
   methods: {
@@ -124,6 +125,7 @@ const Audio = {
     // 文件数量超上限响应
     exceed(e, d) {
       this.$message.error("只能上传一个文件");
+      this.errorMsg = "只能上传一个文件";
     },
     // 表单重置按钮响应
     reset() {
@@ -137,6 +139,7 @@ const Audio = {
     // 文件移除响应，暂未启用
     handleRemove(file, list) {
       if (this.percent < 100) {
+        this.errorMsg = "上传中的文件不可删除";
         this.$message({
           type: "error",
           duration: 5000,
@@ -244,26 +247,57 @@ const Audio = {
                     params: all.parseQueryString(apiStringSignDone),
                   })
                   .then((res) => {
-                    let apiComplete =
-                      all.secretUrls.base + all.secretUrls.callback;
-                    let apiStringSignComplete = all.signFunction(
-                      apiComplete,
-                      that.getParamsList({
-                        ...fileBaseObj,
-                        ...fileSaveObj,
-                        ...{ timestamp: that.getTimeStamp() },
-                      })
-                    );
-                    return all.request({
-                      url: apiComplete,
-                      method: "get",
-                      params: all.parseQueryString(apiStringSignComplete),
-                    });
+                    if (
+                      res &&
+                      res.data &&
+                      res.data.errorCode &&
+                      res.data.errorCode != 0
+                    ) {
+                      that.errorMsg = "系统错误，请联系管理员";
+                      // that.reset();
+                      this.submitDisabled = false;
+                      this.btnDisabled = false;
+                      return false;
+                    } else {
+                      let apiComplete =
+                        all.secretUrls.base + all.secretUrls.callback;
+                      let apiStringSignComplete = all.signFunction(
+                        apiComplete,
+                        that.getParamsList({
+                          ...fileBaseObj,
+                          ...fileSaveObj,
+                          ...{ timestamp: that.getTimeStamp() },
+                        })
+                      );
+                      return all.request({
+                        url: apiComplete,
+                        method: "get",
+                        params: all.parseQueryString(apiStringSignComplete),
+                      });
+                    }
                   })
                   .then((data) => {
-                    that.form.audioId = data.data.data.obj;
-                    that.percent = 100;
-                    that.postCms();
+                    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;
+                    }
+                  })
+                  .catch((error) => {
+                    that.errorMsg = error ? error : "系统错误，请联系管理员";
+                    // that.reset();
+                    this.submitDisabled = false;
+                    this.btnDisabled = false;
                   });
               },
             };
@@ -284,11 +318,15 @@ const Audio = {
               })
               .then((n) => {
                 if (!this.token) {
-                  this.$message({
-                    type: "error",
-                    message: "鉴权失败",
-                    duration: 5000,
-                  });
+                  // this.$message({
+                  //   type: "error",
+                  //   message: "鉴权失败",
+                  //   duration: 5000,
+                  // });
+                  this.errorMsg = "鉴权失败";
+                  // this.reset();
+                  this.submitDisabled = false;
+                  this.btnDisabled = false;
                   return false;
                 }
                 fileBaseObj.md5 = n;
@@ -323,24 +361,29 @@ const Audio = {
                   fileWholeObj.subscription =
                     fileWholeObj.observable.subscribe(observer);
                 } else {
-                  this.reset();
-                  this.$message({
-                    type: "error",
-                    duration: 0,
-                    message: "未知错误，请联系管理员。",
-                  });
+                  if (
+                    res &&
+                    res.data &&
+                    res.data.errorCode &&
+                    res.data.errorCode != 0
+                  ) {
+                    this.errorMsg = "系统错误，请联系管理员";
+                    // this.reset();
+                    this.submitDisabled = false;
+                    this.btnDisabled = false;
+                  }
                 }
               })
               .catch((error) => {
-                this.$message({
-                  type: "error",
-                  message: error,
-                  duration: 0,
-                });
+                this.errorMsg = error ? error : "系统错误，请联系管理员";
+                // this.reset()
+                this.submitDisabled = false;
+                this.btnDisabled = false;
               });
           }
         } else {
-          this.$message.error("请检查表单内容");
+          // this.$message.error("请检查表单内容");
+          this.errorMsg = '请检查表单内容'
           this.submitDisabled = false;
           this.btnDisabled = false;
           return false;
@@ -412,7 +455,7 @@ const Audio = {
     },
     // cms接口提交videoId和表单内容
     postCms() {
-      this.form.lyric = this.form.lyric ? this.form.lyric.trim() : "";
+      this.form.lyric = this.addBr(this.form.lyric)
       all
         .request({
           // url: "http://cmstest.cnlive.com:8768/contentApi/audioSave",
@@ -429,7 +472,7 @@ const Audio = {
         .then((res) => {
           if (res.data) {
             setTimeout(() => {
-              // console.log("jump");
+              // console.log("jump success");
               window.location.replace("./success.html");
             }, 1000);
           } else {
@@ -466,7 +509,23 @@ const Audio = {
     // 选择上传文件
     getMp3(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
+    }
   },
 };
@@ -108,7 +108,7 @@ const validateVideoSize = function (curSize) {
 const validateNameLength = function (name) {
   return new Promise((resolve, reject) => {
     if (name.length < 1 || name.length > 100) {
-      reject("文件名称最小长度为2，上限长度为100！");
+      reject("文件名称最小长度为1，上限长度为100！");
     } else {
       resolve("名字可以");
     }
@@ -11,7 +11,7 @@ module.exports = {
   entry: path.join(__dirname, "src", "/js/audios.js"), //__dirname指的是当前目录,是目录形成绝对路径
   output: {
     //输入的文件名
-    filename: "cloak.js",
+    filename: "br.js",
     // filename: '[name].[hash:7].js',
     publicPath: "/",
     //输入的路径  webpack会自动打包生成
@@ -25,7 +25,7 @@ module.exports = {
       //文件中找到的路径
       template: path.join(__dirname, "src", "html/index.html"),
       //打包输出的路径
-      filename: "cloak.html",
+      filename: "br.html",
     }),
     new CleanWebpackPlugin(),
     new JavaScriptObfuscator(