Commit cb135abb by yanju

Merge branch 'yoona' into 'master'

select optimize

See merge request pigbigbig/beyond-clouds-front!26
parents 53a203aa 1f0d0018
...@@ -8,28 +8,33 @@ ...@@ -8,28 +8,33 @@
@focus="handleShow" @focus="handleShow"
@blur="isShow=false" @blur="isShow=false"
@keyup.enter="handleSearch" @keyup.enter="handleSearch"
v-model="value" v-model="value.tag"
> >
<span>{{list.length ? list.length : 0}}</span> <span>{{list.length ? list.length : 0}}</span>
<transition name="fade"> <transition name="fade">
<div class="label-list__wrap" v-if="isShow || isShow2" @mouseleave="isShow2=false"> <div class="label-list__wrap" v-if="isShow || isShow2" @mouseleave="isShow2=false">
<div class="label-list"> <div class="label-list">
<select-content <select-content
v-if="isSearch"
v-for="(item, index) in labelList" v-for="(item, index) in labelList"
:item="item" :item="item.tag"
:tagId="item.tagId"
:key="`${item}${index}`" :key="`${item}${index}`"
@select="handleChange" @select="handleChange"
></select-content> ></select-content>
<p v-if="!isSearch" style="line-height: 100px; text-align: center;">
暂无搜索结果
</p>
</div> </div>
</div> </div>
</transition> </transition>
</div> </div>
<button @click="handlePush">添加({{result.size}}</button> <button @click="handlePush">添加({{result.length}}</button>
</div> </div>
<div class="select-container__label-list"> <div class="select-container__label-list">
<label-wrap <label-wrap
v-for="(item, index) in Array.from(result)" v-for="(item, index) in result"
:info="item" :info="item.tag"
:index="index" :index="index"
:key="`${index}${item}`" :key="`${index}${item}`"
@deletelabel="handleDelete" @deletelabel="handleDelete"
...@@ -38,7 +43,7 @@ ...@@ -38,7 +43,7 @@
</div> </div>
<div class="select-container" v-if="selectType === '2'" style="width: 196px"> <div class="select-container" v-if="selectType === '2'" style="width: 196px">
<div class="input-box" @click="handleShow"> <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"> <div class="icon-box">
<yun-icon name="down_arrow" size="10px" color="#999"></yun-icon> <yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
</div> </div>
...@@ -58,6 +63,8 @@ ...@@ -58,6 +63,8 @@
<script> <script>
import SelectContent from "./selectContent.vue"; import SelectContent from "./selectContent.vue";
import LabelWrap from "./labelWrap"; import LabelWrap from "./labelWrap";
import config from "../../../action/config";
export default { export default {
name: 'selectCard', name: 'selectCard',
components: {SelectContent, LabelWrap}, components: {SelectContent, LabelWrap},
...@@ -70,10 +77,17 @@ export default { ...@@ -70,10 +77,17 @@ export default {
return{ return{
isShow: false, isShow: false,
isShow2: false, isShow2: false,
list: ['web', 'java', 'python'], list: [{
tagId: '123',
tag: 'web'
}],
searchList: [], searchList: [],
result: new Set(), result: [],
value: '' value: {
tagId: '',
tag: ''
},
isSearch: true
} }
}, },
computed: { computed: {
...@@ -86,53 +100,87 @@ export default { ...@@ -86,53 +100,87 @@ export default {
}, },
}, },
watch: { watch: {
value: function (val) { // value: {
this.searchList = []; // deep: true,
this.list.forEach((item, index) => { // handler: function (val) {
if (item.indexOf(val) >= 0) { // this.searchList = [];
this.searchList.push(item) // this.list.forEach((item, index) => {
} // if (item.indexOf(val) >= 0) {
}); // this.searchList.push(item)
} // }
// });
// }
// },
}, },
methods: { methods: {
// 点击选中标签后 添加标签 // 点击选中标签后 添加标签
handleChange(e){ handleChange(tag, tagId){
this.value = e; Object.assign(this.value, {tagId, tag})
}, },
// 删除选中的标签 // 删除选中的标签
handleDelete(index){ handleDelete(index){
this.result.splice(index, 1); this.result.splice(index, 1);
}, },
// 回车后,将搜索到的第一个标签选中 // 回车后,将搜索到的第一个标签选中
handleSearch(){ async handleSearch(){
if (this.searchList.length) { if (this.value !== '') {
this.result.add(this.searchList[0]); let tagSearch = await this.$axios.$get(config.api.get.Tag.search, {
this.value = ''; params: {
this.isShow = false; keywords: this.value,
this.isShow2 = false; page: 1,
setTimeout(()=>{ size: 12
this.isShow = true; }
this.isShow2 = true; });
}, 500) 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(){ 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.isShow = false;
this.value = ''; this.value = '';
this.$emit('handleTag', this.result);
}, },
handleChange2(e){ handleChange2(e){
this.value = e; this.value = e;
this.isShow =false; this.isShow =false;
this.isShow2 = false; this.isShow2 = false;
this.$emit('handleClass', this.value);
}, },
handleShow(){ handleShow(){
this.isShow = true; this.isShow = true;
this.isShow2 = true; this.isShow2 = true;
} }
} },
} }
</script> </script>
......
...@@ -8,12 +8,13 @@ ...@@ -8,12 +8,13 @@
export default { export default {
name: "selectContent", name: "selectContent",
props: { props: {
item: String item: String,
tagId: String
}, },
methods: { methods: {
handleClick(){ handleClick(){
console.log(this.item); console.log(this.item);
this.$emit('select', this.item); this.$emit('select', this.item, this.tagId);
} }
} }
} }
......
...@@ -28,7 +28,11 @@ ...@@ -28,7 +28,11 @@
<div class="header-content"> <div class="header-content">
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <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> </div>
<input type="text" placeholder="原文链接" style="width: 461px;" > <input type="text" placeholder="原文链接" style="width: 461px;" >
</div> </div>
...@@ -57,9 +61,13 @@ ...@@ -57,9 +61,13 @@
<div class="blog-release__select__wrap"> <div class="blog-release__select__wrap">
<div class="select-content"> <div class="select-content">
<span>*</span> <span>*</span>
<select-card selectType="1"></select-card> <select-card selectType="1" @handleTag="handleTagList"></select-card>
</div> </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>
<div class="choose-container"> <div class="choose-container">
<div class="input-box__wrap"> <div class="input-box__wrap">
...@@ -158,11 +166,27 @@ export default { ...@@ -158,11 +166,27 @@ export default {
reprint: '', reprint: '',
imgSrc: '', imgSrc: '',
lastSaveTime: new Date(), lastSaveTime: new Date(),
blogClass: '',
questionClass: '',
classList: ['web', 'java', 'javascript'] classList: ['web', 'java', 'javascript']
} }
}, },
methods: { methods: {
// 获得下拉框得内容
handleBlogClass(value) {
this.blogClass = value;
console.log(value);
},
handleQuestionClass(value) {
this.class = value;
console.log(value);
},
// 获得得标签数组
handleTagList(tagList) {
console.log(tagList);
},
postblog(){ postblog(){
this.handleTag();
this.$axios.$post(config.api.post.Blog.release,{ this.$axios.$post(config.api.post.Blog.release,{
allowComment: true, allowComment: true,
allowForward: true, allowForward: true,
......
...@@ -28,15 +28,27 @@ ...@@ -28,15 +28,27 @@
<div class="header-content"> <div class="header-content">
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <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>
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <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>
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <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> </div>
<div class="header-content"> <div class="header-content">
...@@ -46,19 +58,31 @@ ...@@ -46,19 +58,31 @@
</div> </div>
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <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> </div>
<div class="header-content"> <div class="header-content">
<input type="text" placeholder="项目文档链接" style="width: 461px;margin-left: 22px;"> <input type="text" placeholder="项目文档链接" style="width: 461px;margin-left: 22px;">
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <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> </div>
<div class="header-content"> <div class="header-content">
<input type="text" placeholder="项目官网链接" style="width: 461px;margin-left: 22px;"> <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>
<div class="header-content"> <div class="header-content">
<span>*</span> <span>*</span>
...@@ -90,7 +114,7 @@ ...@@ -90,7 +114,7 @@
<div class="footer__right"> <div class="footer__right">
<p>已自动存为草稿</p> <p>已自动存为草稿</p>
<button class="preview" @click="readScreen">预览</button> <button class="preview" @click="readScreen">预览</button>
<button class="submit">提交</button> <button class="submit" @click="postProject">提交</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -102,6 +126,7 @@ ...@@ -102,6 +126,7 @@
<script> <script>
import CardContainer from "../../../components/pc/cardContainer"; import CardContainer from "../../../components/pc/cardContainer";
import SelectCard from "../../../components/pc/select/selectCard"; import SelectCard from "../../../components/pc/select/selectCard";
import config from '../../../action/config';
export default { export default {
components: {SelectCard, CardContainer}, components: {SelectCard, CardContainer},
...@@ -140,10 +165,23 @@ export default { ...@@ -140,10 +165,23 @@ export default {
value: '', value: '',
imgSrc: '', imgSrc: '',
lastSaveTime: new Date(), lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript'] classList: ['web', 'java', 'javascript'],
agreement: '',
language: '',
system: '',
agreement2: '',
projectClass: '',
childClass: ''
} }
}, },
methods: { 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) { imgAdd(pos, file) {
//添加图片,pos为位置 //添加图片,pos为位置
// 第一步.将图片上传到服务器. // 第一步.将图片上传到服务器.
...@@ -183,6 +221,42 @@ export default { ...@@ -183,6 +221,42 @@ export default {
}, },
readScreen(boolean, str){ // 预览 readScreen(boolean, str){ // 预览
this.zIndex = 8000 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: '项目发布失败'
})
}
} }
} }
} }
......
...@@ -56,12 +56,12 @@ export default { ...@@ -56,12 +56,12 @@ export default {
return false return false
} }
authResponse = await this.$axios.$post(config.api.post.Authentication.accountAuth, { authResponse = await this.$axios.$post(config.api.post.Authentication.accountAuth, {
mobile: account, account: account,
password: password password: password
}); });
} else if (!way && account !== '' && verification !== '') { } else if (!way && account !== '' && verification !== '') {
authResponse = await this.$axios.$post(config.api.post.Authentication.smsAuth, { authResponse = await this.$axios.$post(config.api.post.Authentication.smsAuth, {
mobile: account, account: account,
verifyCode: verification verifyCode: verification
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment