yiliangyiyun-app/pages/grain_pulse/perfect.vue

<template>
	<view class="center">
		<u-form>
			<view class="modular">
				<u-form-item label="公司名称" label-width="30%" class="title Regular">
					<u-input v-model="deptList.name" input-align="right" class="write Regular" placeholder="请输入公司名称" />
				</u-form-item>
			</view>
			<view class="modular">
					<view class="title Regular">企业概况</view>
					<textarea value="" placeholder="请输入企业概况，如经营项目、产品类型、企业规模等，不超过300个字" class="areaText Regular" v-model="deptList.a"/>
					<view class="title Regular">添加标签（标签应突出企业特色，最多6个）</view>
					<view class="flex">
						
					
					<view class="forLists" v-for="(item,index) in label" :Key="index">
						<u-tag :text="item" mode="dark" class="forList Medium" shape="circle" :show="show" :closeable="closeable" color="#22C572" @close="closeForList(index)"/>
					  
					</view>
					  <u-tag text="+" mode="plain" shape="circle" :show="show1"  color="#2E2E2D" bg-color="#FFFFFF" border-color="#F9F9FA"  class="add" @click="add"></u-tag>
					  </view>
					  <view class="addinput flex" v-if="inputShow">
					  	 <u-input v-model="value" type="type" border focus v-if="inputShow"  style="border-radius: 50rpx;line-height: 70rpx;font-size: 10px;" placeholder="请输入标签内容，不超过6个字" />
						 <u-button :type="types" class="inputOk" shape="circle" @click="addinput">确定</u-button>
					  </view>
					 
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deptList: {},
				label:["世界一流"],
				closeable:true,
				show:true,
				show1:true,
				types:"",
				inputShow:false,
				value:"",
			}
		},
		methods:{
			add(){
				if(this.label.length >= 6){
					this.inputShow = false
				}else{
					this.inputShow = true
				}
				
			},
			addinput(){
				this.label.push(this.value)
				this.value = ""
				this.inputShow = false
			},
			closeForList(index){
				this.label.splice(index,1)
				// this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 10rpx 20rpx;
	}

	.title {
		margin-left: 20rpx;
		color: #71747C;
		line-height: 70rpx;
	}

	.write {
		margin-right: 20px;
		color: #71747C;
	}

	.modular {
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 20px;
	}

	.areaText {
		width: 90%;
		padding: 30rpx;
		border: 2rpx solid #F9F9FA;
		background-color: #F9F9FA;
		margin: 10rpx auto 20rpx;
		border-radius: 20rpx;
		color: #AFB3BF;
		font-size: 28rpx;
	}
	.add{
		padding: 15rpx 30rpx;
		width: 120rpx;
		height: 65rpx;
		text-align: center;
		margin-left: 24rpx;
		font-size: 30rpx;
		font-weight: 600;
	}
	.forLists{
		margin-bottom: 10rpx;
	}
	.forList{
		background-color: #F4FAF8;
		padding: 20rpx 30rpx;
		color: #22C572;
		margin-left: 24rpx;
	    text-align:center ;
	}
	.addinput{
		width: 70%;
		margin: 20rpx auto;
		border-radius:50rpx;
	}
	.inputOk{
		width: 100rpx;
		border-radius: 40rpx;
		background-color: #E9EAE9;
		color: #FFFFFF;
		border: none;
	}
</style>