fix style

杨泽宇
1 parent 5e3d1d66
Showing 5 changed files with 140 additions and 43 deletions
src/css/test.css
src/html/index.html
src/js/audios.js
src/js/config.js
webpack.config.js
-.page-container {
-  background-color: brown;
+.diy-reset {
+  margin: 0; 
+  padding: 0
+}
+.diy-flex {
+  display: flex; 
+  flex-wrap: wrap;
+}
+.diy-flex-50 {
+  width: 50%;
+}
+.diy-flex-100 {
+  width: 100%;
+}
+.diy-text-left {
+  text-align: left;
+}
+.diy-text-right {
+  text-align: right;
+}
+.diy-tip {
+  color: #4A90E2; 
+  font-size: 20px;
+}
+.diy-danger {
+  color: #D11244; margin-left: 10px;
+}
+.el-card__header {
+  padding: 24px 40px;
+  background-color: #f9f9f9;
+  border-bottom: none;
+}
+.el-card__body {
+  padding: 40px;
+}
+.el-form-item__label {
+  font-size: 16px;
+  color: #333333;
+}
+.el-radio__label {
+  font-size: 16px;
+  color: #333333;
+}
+.title-big {
+  font-size: 24px; 
+  font-weight: Semibold; 
+  color: #666666;
+}
+.title-small {
+  font-size: 14px; 
+  color: #999999; 
+  margin-left: 10px;
+}
+.diy-button {
+  height: 40px;
+  font-size: 16px;
+  border-radius: 6px;
+}
+.width-140 {
+  width: 140px;
+}
+.width-190 {
+  width: 190px;
+}
+.bg-blue {
+  background-color: #4A90E2;
+  border-color: #4A90E2;
+}
+.bg-red {
+  background-color: #D11244;
+  border-color: #D11244;
+}
+.bg-white {
+  background-color: transparent;
+  border-color: #B4B4B4;
 }
 \ No newline at end of file
@@ -13,19 +13,19 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.12/theme-chalk/index.css">
 </head>
  
-<body id="body" style="margin: 0; padding: 0">
+<body id="body" class="diy-reset">
   <div id="audioPage" class="page-container">
-    <el-card>
+    <el-card shadow="never">
       <template #header>
         <div class="card-header">
           <!-- <h3>歌曲征集</h3> -->
-          <span style="font-size: 24px; font-weight: Semibold; color: #666666;">歌曲征集</span>
-          <span style="font-size: 14px; color: #999999;"> / 带*号为必填项</span>
+          <span class="title-big">歌曲征集</span>
+          <span class="title-small">/ 带*号为必填项</span>
         </div>
       </template>
       <div>
-        <el-form ref="songs" :model="form" label-width="120px" :rules="rules" style="display: flex; flex-wrap: wrap;" >
-          <el-form-item label="类型" style="width: 100%" prop="channelId">
+        <el-form ref="songs" :model="form" label-width="120px" :rules="rules" class="diy-flex" label-position="right">
+          <el-form-item :label="labels.channelId" class="diy-flex-100" prop="channelId">
             <el-radio-group v-model="form.channelId" @change="handleChange">
               <el-radio :label="1278">热歌榜</el-radio>
               <el-radio :label="1279">优秀作词榜</el-radio>
@@ -33,52 +33,53 @@
               <el-radio :label="1281">其他</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="歌曲名字" style="width: 50%" prop="songName">
+          <el-form-item :label="labels.songName" class="diy-flex-50" prop="songName">
             <el-input v-model.trim="form.songName" :maxlength="100" :minlength="1" placeholder="请输入歌曲名字"></el-input>
           </el-form-item>
-          <el-form-item label="歌手" style="width: 50%" prop="singer">
+          <el-form-item :label="labels.singer" class="diy-flex-50" prop="singer">
             <el-input v-model.trim="form.singer" :maxlength="15" placeholder="请输入歌手名字"></el-input>
           </el-form-item>
-          <el-form-item label="作词" style="width: 50%" prop="lyricist">
+          <el-form-item :label="labels.lyricist" class="diy-flex-50" prop="lyricist">
             <el-input v-model.trim="form.lyricist" :maxlength="15" placeholder="请输入作词人名字"></el-input>
           </el-form-item>
-          <el-form-item label="作曲" style="width: 50%;" prop="songwriter">
+          <el-form-item :label="labels.songwriter" class="diy-flex-50" prop="songwriter">
+            <!-- <label slot="label" class="el-form-item__label" style="width: 120px;">首重</label> -->
             <el-input v-model.trim="form.songwriter" :maxlength="15" placeholder="请输入作曲人名字"></el-input>
           </el-form-item>
-          <el-form-item label="编曲" style="width: 50%" prop="redact">
+          <el-form-item :label="labels.redact" class="diy-flex-50" prop="redact">
             <el-input v-model.trim="form.redact" :maxlength="15" placeholder="请输入编曲人名字"></el-input>
           </el-form-item>
-          <el-form-item label="混音" style="width: 50%" prop="mixing">
+          <el-form-item :label="labels.mixing" class="diy-flex-50" prop="mixing">
             <el-input v-model.trim="form.mixing" :maxlength="15" placeholder="请输入混音人名字"></el-input>
           </el-form-item>
-          <el-form-item label="歌词" style="width: 100%" prop="lyric">
+          <el-form-item :label="labels.lyric" class="diy-flex-100" prop="lyric">
             <el-input v-model="form.lyric" maxlength="2500" show-word-limit type="textarea" :rows="10" placeholder="请输入歌词"></el-input>
           </el-form-item>
-          <el-form-item label="手机号码" style="width: 50%" prop="phone">
+          <el-form-item :label="labels.phone" class="diy-flex-50" prop="phone">
             <el-input v-model.trim="form.phone" :maxlength="11" placeholder="请输入手机号码"></el-input>
           </el-form-item>
-          <el-form-item label="联系人姓名" style="width: 50%" prop="name">
+          <el-form-item :label="labels.name" class="diy-flex-50" prop="name">
             <el-input v-model.trim="form.name" :maxlength="50" placeholder="请输入联系人姓名"></el-input>
           </el-form-item>
-          <el-form-item label="音频" style="width: 100%" prop="audioFile">
+          <el-form-item :label="labels.audioFile" class="diy-flex-100" prop="audioFile">
             <el-upload class="upload-demo" :action="uploadUrl" :auto-upload="false" :file-list="fileList" accept=".mp3"
               @change="getMp3" :on-exceed="exceed" :before-remove="handleRemove" :disabled="btnDisabled" :show-file-list="false">
-              <el-button size="small" type="primary" :disabled="btnDisabled">选择文件</el-button>
-              <span style="color: red; margin-left: 10px;">{{msgText}}</span>
+              <el-button size="small" type="primary" :disabled="btnDisabled" class="diy-button width-190 bg-blue">选择文件</el-button>
+              <span class="diy-danger">{{msgText}}</span>
             </el-upload>
           </el-form-item>
           <el-divider></el-divider>
-          <el-form-item style="width: 50%; text-align: left;">
-            <span style="color: #4A90E2; font-size: 20px">{{form.audioFile?.name}} </span>
-            <span style="color: #4A90E2; font-size: 20px" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
-            <span style="color: #4A90E2; font-size: 20px" v-if="percent == 100"> 上传完成</span>
+          <el-form-item class="diy-flex-50 diy-text-left">
+            <span class="diy-tip">{{form.audioFile?.name}} </span>
+            <span class="diy-tip" v-if="percent > 0 && percent < 100"> 已上传{{Math.ceil(percent)}}%，请耐心等待……</span>
+            <span class="diy-tip" v-if="percent == 100"> 上传完成</span>
           </el-form-item>
-          <el-form-item style="width: 50%; text-align: right;">
-            <el-button @click="reset" v-if="form.channelId == 1279">取消</el-button>
-            <el-button @click="reset" v-else :disabled="!form.audioFile || submitDisabled">取消</el-button>
+          <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>
+            <el-button @click="reset" class="diy-button width-140 bg-white" v-else :disabled="!form.audioFile || submitDisabled">取消</el-button>
  
-            <el-button type="danger" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
-            <el-button type="danger" @click="submit('songs')" v-else :disabled="!form.audioFile || submitDisabled">确定上传</el-button>
+            <el-button type="danger" class="diy-button width-140 bg-red" @click="submit('songs')" v-if="form.channelId == 1279">确定上传</el-button>
+            <el-button type="danger" class="diy-button width-140 bg-red" @click="submit('songs')" v-else :disabled="!form.audioFile || submitDisabled">确定上传</el-button>
           </el-form-item> 
         </el-form>
       </div>
 import * as all from "./config";
-// require('./../css/test.css')
+require('./../css/test.css')
 // Init Vue
 const Audio = {
   data() {
     return {
+      testLabel: '唱\xa0\xa0\xa0\xa0\xa0\xa0\xa0歌',
       form: {
         channelId: null,
         songName: null,
@@ -18,6 +19,7 @@ const Audio = {
         audioId: null,
         audioFile: null,
       },
+      labels: all.formLabels,
       rules: {
         songName: [
           {
@@ -145,7 +147,8 @@ const Audio = {
               tag: "test",
               ts: this.getTs(),
               timestamp: this.getTimeStamp(),
-              masterId: all.secretUrls.masterIdDev,
+              masterId: all.secretUrls.masterIdMaster,
+              // masterId: all.secretUrls.masterIdDev,
             };
             const fileInitObj = {
               gfmt: this.form.audioFile.raw.name.split(".").reverse().shift(),
@@ -153,7 +156,8 @@ const Audio = {
               ts: this.getTs(),
               timestamp: this.getTimeStamp(),
               multipleCategory: 100005,
-              masterId: all.secretUrls.masterIdDev,
+              // masterId: all.secretUrls.masterIdDev,
+              masterId: all.secretUrls.masterIdMaster,
             };
             const fileWholeObj = {
               file: this.form.audioFile.raw,
@@ -220,9 +224,9 @@ const Audio = {
                 return this.getToken();
               })
               .then((d) => {
-                if (d && d.data) {
+                if (d && d.data && typeof d.data == 'string') {
                   this.token = d.data;
-                }
+                } 
                 return this.initMd5(this.form.audioFile.raw);
               })
               .then((n) => {
@@ -338,13 +342,13 @@ const Audio = {
         .then((res) => {
           if (res.data) {
             setTimeout(() => {
-              console.log("jump");
-              // window.location.replace("./success.html");
+              // console.log("jump");
+              window.location.replace("./success.html");
             }, 1000);
           } else {
             setTimeout(() => {
-              console.log("jump");
-              // window.location.replace("./failed.html");
+              // console.log("jump");
+              window.location.replace("./failed.html");
             }, 1000);
           }
         })
@@ -12,7 +12,8 @@ const urls = {
 };
  
 const secretUrls = {
-  base: "https://api.cnlive.com/open/api2/vod_epg/videoPgc",
+  // base: "https://api.cnlive.com/open/api2/vod_epg/videoPgc",
+  base: "http://test.open.cnlive.com/openapi/api2/vod_epg/videoPgc",
   auth: "/getUploadAuth",
   init: "/uploadFileInit",
   callback: "/uploadCallback",
@@ -38,6 +39,21 @@ const putExtra = {
   mimeType: null,
 };
  
+const formLabels = {
+  channelId: '类\xa0\xa0\xa0\xa0\xa0\xa0\xa0型',
+  songName: '歌曲名字',
+  singer: '歌\xa0\xa0\xa0\xa0\xa0\xa0\xa0手',
+  lyricist: '作\xa0\xa0\xa0\xa0\xa0\xa0\xa0词',
+  songwriter: '作\xa0\xa0\xa0\xa0\xa0\xa0\xa0曲',
+  redact: '编\xa0\xa0\xa0\xa0\xa0\xa0\xa0曲',
+  mixing: '混\xa0\xa0\xa0\xa0\xa0\xa0\xa0音',
+  lyric: '歌\xa0\xa0\xa0\xa0\xa0\xa0\xa0词',
+  phone: '手机号码',
+  name: '联系人姓名',
+  audioId: '音\xa0\xa0\xa0\xa0\xa0\xa0\xa0频',
+  audioFile: '音\xa0\xa0\xa0\xa0\xa0\xa0\xa0频',
+}
+
 // Rewrite Request Method
 const request = axios.create({
   timeout: 10000,
@@ -48,12 +64,14 @@ const request = axios.create({
 const signFunction = function (api, list) {
   let sha1 = require('sha1')
   //数组合并
-  let arrApi = ["appId=" + secretUrls.appIdDev];
+  let arrApi = ["appId=" + secretUrls.appIdMaster];
+  // let arrApi = ["appId=" + secretUrls.appIdDev];
   arrApi = arrApi.concat(list); //对数组进行升序处理，并拼成一个字符串
  
   let stringSign = arrApi.sort().join("&"); //key要放在字符串最后，对字符串进行sha1加密处理，并转换为大写
  
-  let signValue = sha1(stringSign + "&key=" + secretUrls.appKeyDev).toUpperCase(); //生成最终的请求参数
+  let signValue = sha1(stringSign + "&key=" + secretUrls.appKeyMaster).toUpperCase(); //生成最终的请求参数
+  // let signValue = sha1(stringSign + "&key=" + secretUrls.appKeyDev).toUpperCase(); //生成最终的请求参数
  
   let apiStringSign = api + "?" + stringSign + "&sign=" + signValue;
  
@@ -368,4 +386,5 @@ export {
   basicConfig,
   urls,
   secretUrls,
+  formLabels
 };
@@ -10,7 +10,7 @@ module.exports = {
   entry: path.join(__dirname, "src", "/js/audios.js"), //__dirname指的是当前目录,是目录形成绝对路径
   output: {
     //输入的文件名
-    filename: "prodtestdata.js",
+    filename: "bundlenew.js",
     // filename: '[name].[hash:7].js',
     publicPath: "/",
     //输入的路径  webpack会自动打包生成
@@ -24,7 +24,7 @@ module.exports = {
       //文件中找到的路径
       template: path.join(__dirname, "src", "html/index.html"),
       //打包输出的路径
-      filename: "prodtestdata.html",
+      filename: "audio.html",
     }),
     new CleanWebpackPlugin(),
   ],