select optimize

components/pc/select/selectCard.vue

@@ -8,28 +8,33 @@
             @focus="handleShow"
             @blur="isShow=false"
             @keyup.enter="handleSearch"
-            v-model="value"
+            v-model="value.tag"
           >
           <span>{{list.length ? list.length : 0}}</span>
           <transition name="fade">
             <div class="label-list__wrap" v-if="isShow || isShow2" @mouseleave="isShow2=false">
               <div class="label-list">
                 <select-content
+                  v-if="isSearch"
                   v-for="(item, index) in labelList"
-                  :item="item"
+                  :item="item.tag"
+                  :tagId="item.tagId"
                   :key="`${item}${index}`"
                   @select="handleChange"
                 ></select-content>
+                <p v-if="!isSearch" style="line-height: 100px; text-align: center;">
+                  暂无搜索结果
+                </p>
               </div>
             </div>
           </transition>
         </div>
-        <button @click="handlePush">添加（{{result.size}}）</button>
+        <button @click="handlePush">添加（{{result.length}}）</button>
       </div>
       <div class="select-container__label-list">
         <label-wrap
-          v-for="(item, index) in Array.from(result)"
-          :info="item"
+          v-for="(item, index) in result"
+          :info="item.tag"
           :index="index"
           :key="`${index}${item}`"
           @deletelabel="handleDelete"
@@ -38,7 +43,7 @@
     </div>
     <div class="select-container" v-if="selectType === '2'" style="width: 196px">
       <div class="input-box" @click="handleShow">
-        <input type="text" v-model="value" disabled="true" :placeholder="placeholder">
+        <input type="text" v-model="value.tag" disabled="true" :placeholder="placeholder">
         <div class="icon-box">
           <yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
         </div>
@@ -58,6 +63,8 @@
 <script>
 import SelectContent from "./selectContent.vue";
 import LabelWrap from "./labelWrap";
+import config from "../../../action/config";
+
 export default {
   name: 'selectCard',
   components: {SelectContent, LabelWrap},
@@ -70,10 +77,17 @@ export default {
     return{
       isShow: false,
       isShow2: false,
-      list: ['web', 'java', 'python'],
+      list: [{
+        tagId: '123',
+        tag: 'web'
+      }],
       searchList: [],
-      result: new Set(),
-      value: ''
+      result: [],
+      value: {
+        tagId: '',
+        tag: ''
+      },
+      isSearch: true
     }
   },
   computed: {
@@ -86,53 +100,87 @@ export default {
     },
   },
   watch: {
-    value: function (val) {
-      this.searchList = [];
-      this.list.forEach((item, index) => {
-        if (item.indexOf(val) >= 0) {
-          this.searchList.push(item)
-        }
-      });
-    }
+    // value: {
+    //   deep: true,
+    //   handler: function (val) {
+    //     this.searchList = [];
+    //     this.list.forEach((item, index) => {
+    //       if (item.indexOf(val) >= 0) {
+    //         this.searchList.push(item)
+    //       }
+    //     });
+    //   }
+    // },
   },
   methods: {
     // 点击选中标签后 添加标签
-    handleChange(e){
-      this.value = e;
+    handleChange(tag, tagId){
+      Object.assign(this.value, {tagId, tag})
     },
     // 删除选中的标签
     handleDelete(index){
       this.result.splice(index, 1);
     },
     // 回车后，将搜索到的第一个标签选中
-    handleSearch(){
-      if (this.searchList.length) {
-        this.result.add(this.searchList[0]);
-        this.value = '';
-        this.isShow = false;
-        this.isShow2 = false;
-        setTimeout(()=>{
-          this.isShow = true;
-          this.isShow2 = true;
-        }, 500)
+    async handleSearch(){
+      if (this.value !== '') {
+        let tagSearch = await this.$axios.$get(config.api.get.Tag.search, {
+          params: {
+            keywords: this.value,
+            page: 1,
+            size: 12
+          }
+        });
+        console.log(tagSearch);
+        this.isSearch = true;
+        this.searchList = [];
+        if (tagSearch.data.dataList.length !== 0) {
+          tagSearch.data.dataList.forEach(item => {
+            let tagId = item.tagId;
+            let tag = item.tagName;
+            this.searchList.push({tagId, tag})
+          });
+        } else {
+          this.isSearch = false;
+        }
       }
+      // if (this.searchList.length) {
+      //   this.result.add(this.searchList[0]);
+      //   this.value = '';
+      //   this.isShow = false;
+      //   this.isShow2 = false;
+      //   setTimeout(()=>{
+      //     this.isShow = true;
+      //     this.isShow2 = true;
+      //   }, 500)
+      // }
     },
     // 点击确定
     handlePush(){
-      this.result.add(this.value);
+      this.result.push(this.value);
+      let map = new Map();
+      for (let item of this.result) {
+        console.log(item);
+        if (!map.has(item.tag)) {
+          map.set(item.tag, item)
+        }
+      }
+      this.result = [...map.values()];
       this.isShow = false;
       this.value = '';
+      this.$emit('handleTag', this.result);
     },
     handleChange2(e){
       this.value = e;
       this.isShow =false;
       this.isShow2 = false;
+      this.$emit('handleClass', this.value);
     },
     handleShow(){
       this.isShow = true;
       this.isShow2 = true;
     }
-  }
+  },
 }
 </script>
 

components/pc/select/selectContent.vue

@@ -8,12 +8,13 @@
 export default {
   name: "selectContent",
   props: {
-    item: String
+    item: String,
+    tagId: String
   },
   methods: {
     handleClick(){
       console.log(this.item);
-      this.$emit('select', this.item);
+      this.$emit('select', this.item, this.tagId);
     }
   }
 }

pages/blog/release/index.vue

@@ -28,7 +28,11 @@
             <div class="header-content">
               <div class="select__wrap">
                 <span>*</span>
-                <select-card selectType="2" :class-list="classList" placeholder="请选择文章分类"></select-card>
+                <select-card
+                  selectType="2"
+                  :class-list="classList"
+                  @handleClass="handleBlogClass"
+                  placeholder="请选择文章分类"></select-card>
               </div>
               <input type="text" placeholder="原文链接" style="width: 461px;" >
             </div>
@@ -57,9 +61,13 @@
           <div class="blog-release__select__wrap">
             <div class="select-content">
               <span>*</span>
-              <select-card selectType="1"></select-card>
+              <select-card selectType="1" @handleTag="handleTagList"></select-card>
             </div>
-            <select-card selectType="2" :class-list="classList" placeholder="请选择问题分类"></select-card>
+            <select-card
+              selectType="2"
+              :class-list="classList"
+              @handleClass="handleQuestionClass"
+              placeholder="请选择问题分类"></select-card>
           </div>
           <div class="choose-container">
             <div class="input-box__wrap">
@@ -158,11 +166,27 @@ export default {
       reprint: '',
       imgSrc: '',
       lastSaveTime: new Date(),
+      blogClass: '',
+      questionClass: '',
       classList: ['web', 'java', 'javascript']
     }
   },
   methods: {
+    // 获得下拉框得内容
+    handleBlogClass(value) {
+      this.blogClass = value;
+      console.log(value);
+    },
+    handleQuestionClass(value) {
+      this.class = value;
+      console.log(value);
+    },
+    // 获得得标签数组
+    handleTagList(tagList) {
+      console.log(tagList);
+    },
     postblog(){
+      this.handleTag();
       this.$axios.$post(config.api.post.Blog.release,{
         allowComment: true,
         allowForward: true,

pages/project/release/index.vue

@@ -28,15 +28,27 @@
             <div class="header-content">
               <div class="select__wrap">
                 <span>*</span>
-                <select-card selectType="2" :class-list="classList" placeholder="请选择授权协议"></select-card>
+                <select-card
+                  selectType="2"
+                  :class-list="classList"
+                  @handleClass="handleAgreement"
+                  placeholder="请选择授权协议"></select-card>
               </div>
               <div class="select__wrap">
                 <span>*</span>
-                <select-card selectType="2" :class-list="classList" placeholder="请选择开发语言"></select-card>
+                <select-card
+                  selectType="2"
+                  :class-list="classList"
+                  @handleClass="handleLanguage"
+                  placeholder="请选择开发语言"></select-card>
               </div>
               <div class="select__wrap">
                 <span>*</span>
-                <select-card selectType="2" :class-list="classList" placeholder="请选择操作系统"></select-card>
+                <select-card
+                  selectType="2"
+                  :class-list="classList"
+                  @handleClass="handleSystem"
+                  placeholder="请选择操作系统"></select-card>
               </div>
             </div>
             <div class="header-content">
@@ -46,19 +58,31 @@
               </div>
               <div class="select__wrap">
                 <span>*</span>
-                <select-card selectType="2" :class-list="classList" placeholder="请选择授权协议"></select-card>
+                <select-card
+                  selectType="2"
+                  :class-list="classList"
+                  @handleClass="handleAgreement2"
+                  placeholder="请选择授权协议"></select-card>
               </div>
             </div>
             <div class="header-content">
               <input type="text" placeholder="项目文档链接" style="width: 461px;margin-left: 22px;">
               <div class="select__wrap">
                 <span>*</span>
-                <select-card selectType="2" :class-list="classList" placeholder="请选择项目类型"></select-card>
+                <select-card
+                  selectType="2"
+                  :class-list="classList"
+                  @handleClass="handleProjectClass"
+                  placeholder="请选择项目类型"></select-card>
               </div>
             </div>
             <div class="header-content">
               <input type="text" placeholder="项目官网链接" style="width: 461px;margin-left: 22px;">
-              <select-card selectType="2" :class-list="classList" placeholder="请选择项目子类型"></select-card>
+              <select-card
+                selectType="2"
+                :class-list="classList"
+                @handleClass="handleChildClass"
+                placeholder="请选择项目子类型"></select-card>
             </div>
             <div class="header-content">
               <span>*</span>
@@ -90,7 +114,7 @@
             <div class="footer__right">
               <p>已自动存为草稿</p>
               <button class="preview" @click="readScreen">预览</button>
-              <button class="submit">提交</button>
+              <button class="submit" @click="postProject">提交</button>
             </div>
           </div>
         </div>
@@ -102,6 +126,7 @@
 <script>
 import CardContainer from "../../../components/pc/cardContainer";
 import SelectCard from "../../../components/pc/select/selectCard";
+import config from '../../../action/config';
 
 export default {
   components: {SelectCard, CardContainer},
@@ -140,10 +165,23 @@ export default {
       value: '',
       imgSrc: '',
       lastSaveTime: new Date(),
-      classList: ['web', 'java', 'javascript']
+      classList: ['web', 'java', 'javascript'],
+      agreement: '',
+      language: '',
+      system: '',
+      agreement2: '',
+      projectClass: '',
+      childClass: ''
     }
   },
   methods: {
+    // 获取选项框得 值
+    handleAgreement(val) { this.agreement = val },
+    handleLanguage(val) { this.language = val },
+    handleSystem(val) { this.system = val },
+    handleAgreement2(val) { this.agreement2 = val },
+    handleProjectClass(val) { this.projectClass = val },
+    handleChildClass(val) { this.childClass = val },
     imgAdd(pos, file) {
       //添加图片，pos为位置
       // 第一步.将图片上传到服务器.
@@ -183,6 +221,42 @@ export default {
     },
     readScreen(boolean, str){ // 预览
       this.zIndex = 8000
+    },
+    // 发布项目
+    async postProject() {
+      let projectRes;
+      try {
+        projectRes = await this.$axios.$post(config.api.post.Project.release, {
+          "author": "string",
+          "categoryId": 1,
+          "cover": "string",
+          "devLang": "string",
+          "docLink": "string",
+          "homeLink": "string",
+          "license": "string",
+          "projectDescription": "string",
+          "projectDetail": "string",
+          "projectName": "string",
+          "projectType": "string",
+          "runtimePlatform": "string",
+          "sourceLink": "string"
+        })
+      } catch (err) {
+        console.log(err);
+      }
+
+      if (projectRes.code === 0) {
+        Object.assign(this.$data, this.$options.data());
+        this.$message({
+          type: 'success',
+          message: '项目发布成功'
+        })
+      } else {
+        this.$message({
+          type: 'error',
+          message: '项目发布失败'
+        })
+      }
     }
   }
 }

pages/users/login.vue

@@ -56,12 +56,12 @@ export default {
           return false
         }
         authResponse = await this.$axios.$post(config.api.post.Authentication.accountAuth, {
-          mobile: account,
+          account: account,
           password: password
         });
       } else if (!way && account !== '' && verification !== '') {
         authResponse = await this.$axios.$post(config.api.post.Authentication.smsAuth, {
-          mobile: account,
+          account: account,
           verifyCode: verification
         });
       }