添加/编辑项目作品优化；

components/multi-uploader.vue

@@ -18,7 +18,7 @@
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt/>
     </el-dialog>
-    <div slot="tip" class="el-upload__tip">最多添加9张作品图片</div>
+    <div slot="tip" class="el-upload__tip" :class="fileList.length ? 'el-upload__tip-active' : ''">最多添加9张作品图片</div>
   </div>
 </template>
 
@@ -121,4 +121,13 @@ export default {
   position: relative;
   background: #fff;
 }
+.el-upload__tip {
+  line-height: 20px;
+  // margin-top: 10px;
+  font-size: 14px;
+  color: #999999;
+}
+.el-upload__tip-active {
+  margin-top: -1px;
+}
 </style>

components/works/edit.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <breadcrumb :locations="locations"></breadcrumb>
+    <!-- <breadcrumb :locations="locations"></breadcrumb> -->
 <!--    <editor-aside></editor-aside>-->
     <editor></editor>
   </div>

components/works/editor.vue

@@ -1,62 +1,92 @@
 <template>
   <div class="editor">
+    <!-- title -->
+    <div class="work-title">{{ this.wid ? '编辑' : '添加' }}项目作品</div>
     <!--作品名称-->
-    <div class="app__dp_f app__f_r app__alig_c">
-      <h5 class="app__f_s_0"><span class="app__fc_r">*</span>作品名称</h5>
-      <el-input type="textarea" :rows="1" resize="none" show-word-limit v-model="workName" class="app__ml_20" placeholder="50字符以内，不能包含&*\#等特殊字符"
+    <div class="work-field" style="margin-top: 30px;">
+      <div class="work-label"><span class="app__fc_r">*</span> 作品名称</div>
+      <el-input type="textarea" :rows="1" resize="none" show-word-limit v-model="workName" class="" placeholder="50字符以内，不能包含&*\#等特殊字符"
                 :maxlength="50" @blur="workNameBlur"/>
     </div>
     <!--作品描述-->
-    <div class="app__dp_f app__f_r app__mt_10" style="align-items:flex-start">
-      <h5 class="label app__mt_20 app__ws_nw app__f_s_0"><span class="app__fc_r">*</span>作品描述
-        <span class="app__ml_10" style="display: none"><a>查看参考案例</a></span></h5>
+    <div class="work-field" style="align-items:flex-start">
+      <div class="work-label"><span class="app__fc_r">*</span> 作品描述</div>
       <el-input type="textarea" :rows="5" v-model="content" placeholder="请输入60-10000字的作品内容"
-                :maxlength="10000" class="app__ml_20"/>
+                :maxlength="10000" class=""/>
     </div>
-
     <!--作品链接-->
-    <div class="app__dp_f app__f_r app__alig_c app__mt_20">
-      <h5 class="app__f_s_0">作品链接</h5>
-      <el-input show-word-limit v-model="workUrl" class="title _title" placeholder="例如：https://www.proginn.com 若无法添加作品有效链接,请添加作品截图" :maxlength="50"></el-input>
+    <div class="work-field">
+      <div class="work-label">作品链接</div>
+      <el-input v-model="workUrl" class="title _title" placeholder="例如：https://www.proginn.com 若无法添加作品有效链接,请添加作品截图"></el-input>
     </div>
-
     <!--作品封面图 -->
-    <h5 class="label app__mt_20">作品截图(至少上传2张)</h5>
-
-
-    <multi-uploader v-model="workImages"></multi-uploader>
-
-    <h5 class="app__mt_35">作品资源</h5>
-
-    <div class="app__mt_20">
-      <el-upload style="display:inline-block"
-                 action="#"
-                 ref="upload"
-                 :on-success="handleSuccess"
-                 :on-change="uploadFileChange"
-                 :on-remove="uploadFileDelete"
-                 :on-err="uploadFileError"
-                 :multiple="false"
-                 :show-file-list="false"
-                 :file-list="uploadFileList">
-        <div class=" app__f_r app__al_c">
-          <button slot="trigger" class='app__bd_a_308EFF app__fc_308EFF app__fs_13 app_br_2  app__w_120 app__h_35 app__ta_c app__lh_35'
-                  v-if="uploadFileList.length === 0">
-            点击添加
-          </button>
-          <span slot="tip" class="app__fs_13 app__fc_999 app__ml_15" v-if="uploadFileList.length === 0">文件小于1GB，请勿上传侵权内容作品</span>
-        </div>
-      </el-upload>
-      <div v-if="uploadFileList.length > 0" class="app__mw_40_p">
-        <div class="app__f_r app__al_c">
-          <p class="app__fs_15 app__txt_ellipsis">{{uploadFileList.length > 0 ? uploadFileList[0].name : ""}}</p>
-          <button class="app__fc_999 app__fs_18 app__ml_20" @click="uploadFileDelete">x</button>
+    <div class="work-field">
+      <div class="work-label" style="margin-bottom: 10px;"><span class="app__fc_r">*</span> 作品截图(至少2张)</div>
+      <multi-uploader v-model="workImages"></multi-uploader>
+    </div>
+    <!-- 作品资源 -->
+    <div class="work-field">
+      <div class="work-label" style="margin-bottom: 10px;">作品资源<span class="upload-tips">文件小于1GB，请勿上传侵权内容作品</span></div>
+      <div class="">
+        <button class="upload-btn" v-if="!wid" @click="showUploadTips">点击添加</button>
+        <el-upload
+          v-else
+          style="display:inline-block"
+          action="#"
+          ref="upload"
+          :on-success="handleSuccess"
+          :on-change="uploadFileChange"
+          :on-remove="uploadFileDelete"
+          :on-err="uploadFileError"
+          :multiple="false"
+          :show-file-list="false"
+          :file-list="uploadFileList">
+          <div class=" app__f_r app__al_c">
+            <button slot="trigger" class='upload-btn' v-if="uploadFileList.length === 0">
+              点击添加
+            </button>
+          </div>
+        </el-upload>
+        <div v-if="uploadFileList.length > 0" class="app__mw_40_p">
+          <div class="app__f_r app__al_c">
+            <p class="app__fs_15 app__txt_ellipsis">{{uploadFileList.length > 0 ? uploadFileList[0].name : ""}}</p>
+            <button class="app__fc_999 app__fs_18 app__ml_20" @click="uploadFileDelete">x</button>
+          </div>
+          <el-progress :percentage="uploadPercentage" status="success" :stroke-width="8" class="app__mt_10"/>
         </div>
-        <el-progress :percentage="uploadPercentage" status="success" :stroke-width="8" class="app__mt_10"/>
       </div>
     </div>
-
-    <footer class="app__tg_c">
+    <!-- 所属分类 & 作品类型 -->
+    <div class="work-field">
+      <div class="work-label"><span class="app__fc_r">*</span> 所属分类</div>
+      <div class="work-cate-type">
+        <el-cascader
+          class="work-cate-cascader"
+          v-model="selectedWorkCate"
+          :options="workCate"
+          :props="{ expandTrigger: 'hover' }"
+          placeholder="请选择作品分类"></el-cascader>
+        <el-radio-group v-model="workType" class="custom-radio">
+          <el-radio :label="1">免费资源</el-radio>
+          <el-radio :label="2">付费资源</el-radio>
+        </el-radio-group>
+      </div>
+    </div>
+    <!-- 资源价格 -->
+    <div class="work-field">
+      <div class="work-label"><span class="app__fc_r">*</span> 资源价格</div>
+      <div class="work-price-wrapper">
+        <el-input
+          class="work-price-input"
+          type="number"
+          placeholder="请输入资源价格"
+          :disabled="workType !== 2"
+          v-model="price"></el-input>
+        <span>元</span>
+      </div>
+    </div>
+    <!-- btn group -->
+    <footer class="">
       <el-button type="primary" @click="publish" class="btn-save" v-bind:disabled="isPublishing">保存</el-button>
       <!--      <el-button @click="cancel">取消</el-button>-->
     </footer>
@@ -66,7 +96,6 @@
 <script>
   import editor from "@/components/editor";
   import multiUploader from '@/components/multi-uploader';
-
   import axios from "axios";
   import oos from "../../mixins/oos";
 
@@ -106,17 +135,25 @@
         workImages: [],
         wid: "",
         work_up_url: "",
-        workList: []
+        workList: [],
+        // 所属分类
+        workCate: [],
+        selectedWorkCate: [],
+        // 资源类型: 1 免费，2 付费
+        workType: 1,
+        // 资源价格
+        price: 0
       };
     },
-
     mixins: [oos],
     computed: {},
     mounted() {
       this.needLogin();
+      this.getWorkCate();
       // this.needVerify();
-      this.getHejiList();
-      if (this.$route.query.wid) {
+      // this.getHejiList();
+      this.wid = this.$route.query.wid || ''
+      if (this.wid) {
         this.getWorkDetail();
         this.getWorkFile();
       }
@@ -133,10 +170,14 @@
               this.content = res.data.description || "";
               this.setWorkImages(res.data);
               this.workUrl = res.data.url || ""
+              if (res.data.cate_id_one && res.data.cate_id_two) {
+                this.selectedWorkCate = [res.data.cate_id_one, res.data.cate_id_two]
+              }
+              this.workType = Number(res.data.type) || 1
+              this.price = res.data.price || 0
             }
           });
       },
-
       getWorkFile() {
         this.$axios.$post(`/api/UserWorks/getWorkFile`, {wid: this.$route.query.wid}).then(res => {
           console.log(res);
@@ -148,7 +189,31 @@
           console.log(err)
         });
       },
-
+      /**
+       * 获取作品分类
+       */
+      getWorkCate() {
+        this.$axios.$post('/api/user_works/cate').then(res => {
+          if (res.status === 1) {
+            let workCate = res.data || []
+            this.workCate = workCate.map(item => {
+              let children = item.child.map(child => {
+                return {
+                  value: child.category_id,
+                  label: child.name
+                }
+              })
+              return {
+                value: item.category_id,
+                label: item.name,
+                children: children
+              }
+            })
+          }
+        }).catch(err => {
+          console.log('get work cate error: ', err)
+        })
+      },
       setWorkImages(data) {
         let images = data.images;
         if (images && images.length > 0) {
@@ -204,28 +269,31 @@
           description: this.content,
           url: this.workUrl,
           image_list: this.workImages.map((it) => it.url).join(","),
-          work_file: workFile
+          work_file: workFile,
+          type: this.workType,
+          cate_id_one: this.selectedWorkCate[0],
+          cate_id_two: this.selectedWorkCate[1],
+          price: this.workType === 2 ? this.price : 0
         };
 
-        if (this.$route.query.wid) {
-          data.wid = this.$route.query.wid;
+        if (this.wid) {
+          data.wid = this.wid;
           this.$axios.$post(`/api/user_works/update`, data).then(res => {
             console.log(res);
             if (res.status === -99) {
               this.goHome();
             }
             if (res.status === 1) {
-              this.$message.success("编辑成功！");
-              setTimeout(() => {
-                // this.$router.go(-1);
-                self.$router.push({
-                  path: '/sign/new',
-                  query: { from: 'works' }
-                })
-              }, 1200);
+              this.$message.success("编辑作品成功！");
+              // setTimeout(() => {
+              //   self.$router.push({
+              //     path: '/sign/new',
+              //     query: { from: 'works' }
+              //   })
+              // }, 1200);
               // window.location.href = res.data.work_url;
             } else {
-              this.$message.error("编辑提交失败，请重试");
+              this.$message.error("编辑作品失败，请重试");
             }
             this.isPublishing = false;
           });
@@ -236,14 +304,15 @@
               this.goHome();
             }
             if (res.status === 1) {
-              this.$message.success("发布成功！");
-              setTimeout(() => {
-                // this.$router.go(-1);
-                self.$router.push({
-                  path: '/sign/new',
-                  query: { from: 'works' }
-                })
-              }, 1200);
+              this.$message.success("添加作品成功！");
+              // setTimeout(() => {
+              //   self.$router.push({
+              //     path: '/sign/new',
+              //     query: { from: 'works' }
+              //   })
+              // }, 1200);
+            } else {
+              this.$message.error("添加作品失败，请重试");
             }
             this.isPublishing = false;
           });
@@ -255,27 +324,39 @@
        */
       publishValidCheck() {
         if (!this.workName) {
-          return {success: false, msg: "请输入项目名称"};
+          return {success: false, msg: "请输入作品名称"};
         }
         if (this.workName.length < 2) {
-          return {success: false, msg: "项目名称不可少于2字符"};
+          return {success: false, msg: "作品名称不可少于2字符"};
         }
-        if (this.title.length > 50) {
-          return {success: false, msg: "文章标题不可超过50字符，请删减"};
+        if (this.workName.length > 50) {
+          return {success: false, msg: "作品名称不可超过50字符，请删减"};
         }
 
         if (!this.content) {
-          return {success: false, msg: "请输入项目正文"};
+          return {success: false, msg: "请输入作品描述"};
         }
         if (this.content.length < 60) {
-          return {success: false, msg: "项目正文不可少于60字符"};
+          return {success: false, msg: "作品描述不可少于60字符"};
         }
         if (this.content.length > 10000) {
-          return {success: false, msg: "项目正文不可大于10000字符，请删减"};
+          return {success: false, msg: "作品描述不可大于10000字符，请删减"};
         }
         if (this.workImages.length < 2) {
           return {success: false, msg: "至少上传2张作品截图"};
         }
+        if (this.selectedWorkCate.length !== 2 || (!this.selectedWorkCate[0] || !this.selectedWorkCate[1])) {
+          return {success: false, msg: "请选择作品分类"};
+        }
+        if (this.workType === 2) {
+          if (this.price <= 0) {
+            return {success: false, msg: "请输入大于0的资源价格"};
+          }
+          if (String(this.price).indexOf('.') > -1 &&
+              String(this.price).length - String(this.price).indexOf('.') - 1 > 2) {
+            return {success: false, msg: "资源价格最多保留两位小数"};
+          }
+        }
 
         return {success: true, msg: ""}
       },
@@ -318,8 +399,10 @@
       },
       handleSuccess(response, file, fileList) {
       },
+      showUploadTips () {
+        this.$message.info('先保存项目作品，才能上传作品资源');
+      }
     },
-
   };
 </script>
 
@@ -327,10 +410,22 @@
   @import "../../assets/css/common.css";
   @import "../../assets/css/public.css";
 
+  .work-title {
+    width: 960px;
+    line-height: 37px;
+    padding: 5px 0 25px 0;
+    margin-left: -80px;
+    font-size: 26px;
+    font-family: PingFangSC, PingFangSC-Medium;
+    font-weight: 500;
+    text-align: center;
+    color: #1d2a3a;
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+  }
   .editor {
     position: relative;
     padding: 20px 100px;
-    /*width: 740px;*/
+    width: 1000px;
     background: #fff;
 
     .title,
@@ -353,7 +448,7 @@
 
     ._title {
       font-size: 15px !important;
-      margin: 0 0 0 20px !important;
+      margin: 0 !important;
       border-bottom: 1px solid #ddd;
     }
 
@@ -426,7 +521,6 @@
       font-style: italic !important;
     }
   }
-
   .uploadInfo {
     display: flex;
     padding-left: 30px;
@@ -525,9 +619,91 @@
       }
     }
   }
-
   .btn-save {
     width: 20vw;
     border-radius: 5px;
   }
+  .work-field {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    .work-label {
+      margin-bottom: 5px;
+      line-height: 20px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Medium;
+      font-weight: 500;
+      color: #19222e;
+    }
+    .upload-tips {
+      line-height: 20px;
+      margin-left: 10px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #999999;
+    }
+    .upload-btn {
+      width: 160px;
+      height: 40px;
+      line-height: 40px;
+      border: 1px solid #308eff;
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Medium;
+      font-weight: 500;
+      text-align: center;
+      color: #308eff;
+    }
+    .work-cate-type {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      .work-cate-cascader {
+        width: 315px;
+        margin-right: 30px;
+      }
+    }
+    .work-price-wrapper {
+      display: flex;
+      align-items: center;
+      .work-price-input {
+        width: 315px;
+      }
+      span {
+        margin-left: 8px;
+        font-size: 14px;
+        font-family: PingFangSC, PingFangSC-Medium;
+        font-weight: 500;
+        color: #19222e;
+      }
+    }
+  }
+  .custom-radio {
+    .el-radio__inner {
+      width: 20px;
+      height: 20px;
+      border: none;
+      border-radius: 0;
+      background: url("~@/assets/img/common/custom-radio.png") no-repeat !important;
+      &:after {
+        content: none;
+      }
+    }
+    .is-checked {
+      .el-radio__inner {
+        background: url("~@/assets/img/common/custom-radio-checked.png") no-repeat !important;
+      }
+    }
+  }
+</style>
+<style>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+input[type="number"]{
+  -moz-appearance: textfield !important;
+}
 </style>