<template>
|
<!-- 添加标签 -->
|
<view>
|
<search-bar @confirm="search" placeholder="搜索标签名称" class="ml-10 mr-10"></search-bar>
|
<view class="content">
|
<view class="title">
|
<text>常用标签</text>
|
</view>
|
<view class="list" v-for="(item,index) in list" @click="lableChange(item)">
|
<text class="iconfont"
|
:class="item.isCheck?'icontubiao-duoxuandianji':'iconcheckbox-full'"
|
:style="{color: item.color}"></text>
|
<view class="ml-10 name">{{item.label}}</view>
|
</view>
|
<view class="title">
|
<text>我的标签</text>
|
</view>
|
|
<uni-swipe-action>
|
<uni-swipe-action-item :right-options="options" @click="bindClick($event, item.id)" v-for="(item,index) in myList">
|
<view class="list" @click="lableChange(item)">
|
<text class="iconfont"
|
:class="item.isCheck?'icontubiao-duoxuandianji':'iconcheckbox-full'"
|
:style="{color: item.color}"></text>
|
<view class="ml-10 name">{{item.label}}</view>
|
</view>
|
</uni-swipe-action-item>
|
</uni-swipe-action>
|
</view>
|
<button class="sticky-footer blue-btn" @click="confirm">确认</button>
|
</view>
|
</template>
|
|
<script>
|
import searchBar from '../../components/searchBar/index.vue';
|
import {uniSwipeAction} from '../../components/uni-swipe-action/uni-swipe-action.vue'
|
import {uniSwipeActionItem} from '../../components/uni-swipe-action-item/uni-swipe-action-item.vue'
|
export default {
|
components:{
|
searchBar
|
},
|
data(){
|
return{
|
queryKey: '',
|
list:[],
|
myList:[],
|
selectId: '',
|
options:[{
|
text: '删除',
|
style: {
|
backgroundColor: '#dd524d'
|
}
|
}
|
]
|
}
|
},
|
onShow() {
|
this.loadList()
|
},
|
onLoad(options) {
|
if(options.selectId){
|
this.selectId = options.selectId
|
}
|
},
|
onNavigationBarButtonTap(e){
|
if(e.index==0){
|
uni.navigateTo({
|
url:"./createLabel"
|
})
|
}
|
},
|
methods:{
|
loadList(){
|
let selectedArr = this.selectId?this.selectId.split(','):[];
|
this.$httpUtils.request('/api/label/findLabelList', {
|
label: this.queryKey
|
}, 'POST').then((res) => {
|
if(res.status == 200){
|
this.list = res.mapInfo.allLabel.map((item) => {
|
if(this.selectId && selectedArr.includes(item.id.toString())){
|
return Object.assign(item, {isCheck: true})
|
}
|
return Object.assign(item, {isCheck: false})
|
});
|
this.myList = res.mapInfo.myLabel.map((item) => {
|
if(this.selectId && selectedArr.includes(item.id.toString())){
|
return Object.assign(item, {isCheck: true})
|
}
|
return Object.assign(item, {isCheck: false})
|
});
|
}
|
})
|
},
|
search(val){
|
this.queryKey = val;
|
this.loadList();
|
},
|
lableChange(item){
|
item.isCheck = !item.isCheck;
|
},
|
confirm(){
|
let result = this.list.concat(this.myList);
|
let selectItems = result.filter((item) => {
|
return item.isCheck
|
});
|
let pages = getCurrentPages();
|
let prevPage = pages[ pages.length - 2 ];
|
if(selectItems.length){
|
prevPage.$vm.setLabel && prevPage.$vm.setLabel(selectItems);
|
}
|
uni.navigateBack()
|
},
|
bindClick(e, id){
|
uni.showModal({
|
title: '提示',
|
content: '确定删除该标签吗？',
|
success: (res) => {
|
if (res.confirm) {
|
this.$httpUtils.request('/api/label/delById/'+id).then((res) => {
|
if(res.status == 200){
|
this.loadList()
|
}
|
this.$toast.info(res.info);
|
})
|
}
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.content{
|
margin-bottom: 60px;
|
}
|
.title{
|
background: #F2F2F2;
|
padding: 10px;
|
font-size: 15px;
|
}
|
.list{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
}
|
.list .iconfont{
|
font-size: 18px;
|
}
|
.list .name{
|
width: 100%;
|
padding: 10px 5px;
|
border-bottom: 1px solid #EDEAF4;
|
font-size: 14px;
|
}
|
.sticky-footer{
|
bottom: 10px;
|
}
|
</style>
|
