修改个人中心,文件展示样式

pages/members/me/expenses.vue

@@ -33,7 +33,11 @@
     <el-table :data="tableData" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="50"></el-table-column>
       <el-table-column prop="format" label="格式转换" ></el-table-column>
-      <el-table-column prop="fileName" label="目标文件" ></el-table-column>
+      <el-table-column prop="fileName" label="目标文件">
+        <template slot-scope="scope">
+          <span v-html="scope.row.fileName"></span>
+        </template>
+      </el-table-column>
       <el-table-column prop="size" label="文件大小" ></el-table-column>
       <el-table-column prop="price" label="消耗券数" ></el-table-column>
       <el-table-column prop="status" label="状态" width="120px">
@@ -45,7 +49,7 @@
                   {{'转换时间: ' +scope.row.createdAt}}
                   <br/>
                   <div v-if="scope.row.failReason">
-                    {{'失败原因: ' +scope.row.failReason}}
+                    失败原因: 未知错误，如重试失败请进官方客服QQ群：188917181获得即时帮助。
                   </div>
                 </div>
                 <span v-html="scope.row.status" class="cursor-default"></span>
@@ -123,11 +127,11 @@ export default {
       this.$axios.get(`/missionFile/page?page=${page}`).then((res) => {
         if(res.code === 200) {
           this.tableData = res.result.list
-          // console.log(this.tableData)
           this.totalNum = res.result.total
           for (let i = 0; i < this.tableData.length; i++) {
             this.tableData[i].size = this.getfilesize(this.tableData[i].size)
             this.tableData[i].status = this.getFileStatus(this.tableData[i].status)
+            this.tableData[i].fileName = this.getFileFileName(this.tableData[i].fileName,this.tableData[i].statusName)
             this.$set(this.tableData[i], 'format', this.getFormat(this.tableData[i].inputType, this.tableData[i].outputType))
           }
         }
@@ -163,11 +167,19 @@ export default {
         case 2:
           return '<span style="color: #0dd299">转档成功</span>'
         case 3:
-          return '<span style="color: #9599b1">转档失败</span>'
+          return '<span style="color: gray">转档失败</span>'
         case 4:
           return '<span style="color: #0dd299">转档成功</span>'
       }
     },
+    //文件转换失败,文件置灰
+    getFileFileName(fileName,statusName){
+      if(statusName === "failed"){
+        return `<span style="color: #9599b1">${fileName}</span>`
+      } else {
+        return fileName
+      }
+    },
     // 格式转换
     getFormat (input, output) {
       return input.toUpperCase() + '-->' + output.toUpperCase()