You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
3.8 KiB
Vue
184 lines
3.8 KiB
Vue
<template>
|
|
<view class="p-root-job-labels g_w_all g_h_all g_bg_f_5">
|
|
<view class="m-nav">
|
|
<u-navbar :is-back="false" title="添加标签"
|
|
:background="{
|
|
'background-color':'#f5f5f5'
|
|
}"
|
|
>
|
|
<view class="g_flex_row_start g_fs_16 g_fw_500 g_pl_16">
|
|
<view class="m-btn" @click="goReturn">
|
|
取消
|
|
</view>
|
|
<view class="m-btn g_ml_12" @click="goReturn">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
</view>
|
|
<view class="m-input g_flex_column_center g_pl_16 g_pr_16">
|
|
<view class="g_flex_row_start">
|
|
<view class="m-basics-label">模拟选中标签</view>
|
|
<view></view>
|
|
</view>
|
|
</view>
|
|
<view class="m-label">
|
|
<view class="tip g_flex_row_between">
|
|
<view class="lef">全部标签</view>
|
|
<view></view>
|
|
</view>
|
|
<view class="m-link g_flex_row_start"
|
|
>
|
|
<view class="m-item"
|
|
:class="item.isSelect ? 'm-active' : ''"
|
|
v-for="(item,index) in labels" :key="index"
|
|
@click="updateIndex(item,index)"
|
|
>
|
|
{{item.name}}
|
|
</view>
|
|
<view class="m-item g_flex_row_center" @click="updateIndex({},9)">
|
|
<view class="g_mr_2 g_fs_22 g_flex_column_center" style="height: 22px;overflow: hidden;margin-top: -3px;">+</view>
|
|
<view class="g_flex_column_center">新建标签</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-popup v-model="popSelect.isShow" mode="center" uZindex="9999" border-radius="12" :closeable="true" :mask-close-able="true">
|
|
<view class="g_pt_32">
|
|
<view class="g_fs_18 g_fw_bold g_mb_32 g_text_c">新建标签</view>
|
|
<view>
|
|
<input type="text" placeholder="" style="background-color: #fff;border-radius: 8px;">
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return {
|
|
popSelect:{
|
|
isShow:false
|
|
},
|
|
labels:[
|
|
{
|
|
name:'标签',
|
|
isSelect:true
|
|
},
|
|
{
|
|
name:'工厂',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'门店',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'类型',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'标表表表表签',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'工表表厂',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'门表表表店',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'类表表表表表表表表型',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'标表签',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'工表厂',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'门表表表店',
|
|
isSelect:false
|
|
},
|
|
{
|
|
name:'类型表表',
|
|
isSelect:false
|
|
},
|
|
]
|
|
}
|
|
},
|
|
methods:{
|
|
goReturn(){
|
|
uni.navigateBack();
|
|
},
|
|
updateIndex($item,$index){
|
|
let that = this;
|
|
if($index == 9){
|
|
that.popSelect.isShow = true;
|
|
}else{
|
|
// $item.isSelect = !$item.isSelect;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.p-root-job-labels{
|
|
.m-nav{
|
|
margin-left: 16px;
|
|
.m-btn{
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
&:last-child{
|
|
background-color: rgba(0,0,0,0.05);
|
|
color: rgba(0,0,0,0.15);
|
|
}
|
|
}
|
|
}
|
|
.m-input{
|
|
height: 48px;
|
|
background-color: #fff;
|
|
}
|
|
.m-label{
|
|
.tip{
|
|
color: #666;
|
|
font-size: 14px;
|
|
padding: 16px;
|
|
}
|
|
.m-link{
|
|
padding-left: 16px;
|
|
.m-item{
|
|
background-color: rgba(0,0,0,0.08);
|
|
color: rgba(0,0,0,0.5);
|
|
border-radius: 50px;
|
|
padding: 3px 6px;
|
|
margin: 0 12px 12px 0;
|
|
border: 1px solid transparent;;
|
|
&:last-child{
|
|
background-color: transparent;
|
|
border: 1px solid rgba(0,0,0,0.08);;
|
|
}
|
|
}
|
|
.m-active{
|
|
background: rgba(53,120,246, 0.1);
|
|
color: #3578f6;
|
|
}
|
|
}
|
|
}
|
|
.m-basics-label{
|
|
border-radius: 50px;
|
|
padding: 3px 6px;
|
|
background: rgba(53,120,246, 0.1);
|
|
color: #3578f6;
|
|
}
|
|
}
|
|
</style> |