<template>
	<view id="release">
		<u-form :model="form" ref="uForm">
				<u-form-item label="标题" label-position="right">
					<u-input v-model="form.name" placeholder="请输入标题" />
				</u-form-item>
				<view class="titles">图片</view>
					<u-upload :action="action" del-color="#ececec" upload-text="选择图片" del-bg-color="#fff" :file-list="fileList" ></u-upload>
				<!-- 标签 -->
				<view>
					<view class="titles">标签</view>
					<view class="form-view" @click="show_add()">+ 新建标签</view>
					<view class="form-view" v-for="(item,index) in fileListes" :key="index">{{item}}</view>
				</view>
				<!-- 简介 -->
				<view class="titles">正文</view>
				<textarea placeholder="请输入内容..."></textarea>
				<!-- 提交 -->
				<u-button class="custom-style" shape="circle" size="default">发表</u-button>
			</u-form>
			<!-- 添加标签的按钮 -->
			<u-popup v-model="show" mode="center" border-radius="14" :closeable="true">
				<view class="text">
					创建属于你的标签吧
				</view>
				<view class="u-inputes">
					<u-input v-model="form.name" />
				</view>
				<u-button class="custom-style-button" shape="circle" size="default">确定</u-button>
			</u-popup>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					form: {
						name: '',
						intro: '',
						sex: ''
					},
					// 演示地址，请勿直接使用
					action: 'http://www.example.com/upload',
					fileList: [],
					fileListes:["美妆","博主穿搭","美妆","美妆","美妆","美妆","美妆","博主穿搭"],
					show: false
				}
			},
			methods:{
				show_add(){
					console.log(this.show)
					this.show = !this.show
				}
			},
			components: {  
			        uniBadge  
			    }  
		}
</script>

<style lang="scss" scoped>
#release{
	width: 690rpx;
	margin: 0 auto;
	.form-view{
		background:rgba(255,120,15,1);
		border-radius:6rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		display: inline-block;
		margin-bottom: 28rpx;
		color: #fff;
	}
	.titles{
		font-size:30rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		margin: 30rpx 0;
	}
	textarea{
		font-size: 26rpx;
	}
	.custom-style{
		background:rgba(255,120,15,1)!important;
		color: #fff!important;
		font-size: 36rpx;
	}
	.custom-style-button{
		background:rgba(255,120,15,1)!important;
		color: #fff!important;
		font-size: 28rpx;
		width: 200rpx;
		margin-bottom: 23rpx;
		line-height: 60rpx;
		height: 60rpx;
	}
}
.u-mode-center-box{
	padding: 120rpx;
	.text{
		font-size: 30rpx;
		margin-top: 74rpx;
		text-align: center;
		font-weight: 500;
		color: #333;
	}
}
.u-inputes{
	margin: 30rpx 0;
	border: 1px #ececec solid;
	padding-left: 14rpx;
	width: 420rpx;
}
</style>
