bocai_supplyChain_uni/root/merchantManagement/child/jobLabels.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>