yanzong_qianduan/pages/news3/vipPrice.vue

<template>
<view class="vipInfo">
	<view class="msg">
		<text>价格区间(元)</text>
		<text>会员加价率</text>
		<text>利润空间(元</text>
	</view>
	<view class="classifyContainer">
		<view class="classifyItem" v-for="(item,index) in list" :key="index">
			<view class="classTitle">
				<text>{{item.name}}</text>
				<u-icon name="arrow-right" color="#292929" size="28"></u-icon>
				
			</view>
			<view class="priceRange">
				<view class="rangeItem" v-for="(p,i) in item.children" :key="i">
					<u-input placeholder="请设置" disabled v-model="p.priceRange"></u-input>
					<u-input placeholder="请设置" disabled style="margin:0 60upx" v-model="p.rate"></u-input>
					<u-input class="profit" disabled v-model="p.profit"></u-input>
					
				</view>
			</view>
			<view class="rangeBtn">
				<view class="rangeHandle" @click="addHandle(item)">
					<view class="addFlag">+</view>
					<text>新增价格区间</text>
				</view>
				<view class="rangeHandle" @click="delHandle(item)" style="border-left:1px solid #E2E2E2;">
					<view class="delBtn">-</view>
					<text>删除价格区间</text>
				</view>
			</view>
		</view>
	</view>
	<setRange ref="setRange"></setRange>
</view>
</template>

<script>
import setRange from './components/setRange.vue'
export default{
	components:{setRange},
	data(){
		return{
			value:null,
			value1:null,
			list:[
				{
					name:'一级分类名称',
					children:[
						{
							priceRange:'1',
							rate:'1',
							profit:'1'
						}
					]
				},
				{
					name:'二级分类名称',
					children:[
						{
							priceRange:'',
							rate:'',
							profit:''
						}
					]
				},
				{
					name:'三级分类名称',
					children:[
						{
							priceRange:'',
							rate:'',
							profit:''
						}
					]
				},
			]
		}
	},
	methods:{
		addHandle(item){
			item.children.push({
				priceRange:'',
				rate:'',
				profit:''
			})
			this.$refs.setRange.afterSale = true;
		},
	
		delHandle(item){
			if(item.children.length>1){
				item.children.pop()
			}
			
			
		},
		
	}
}
</script>

<style lang="scss" scoped>
page{
	min-height:100%;
	padding-bottom:60upx;
}

.vipInfo{
	.msg{
		background: #FFE7E7;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		padding:36upx 56upx;
		display: flex;
		align-items: center;
		justify-content: space-between;	
		text{
			
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #3B3B3B;
			
		}
	}
	.classifyContainer{
		.classifyItem{
			padding:36upx 56upx;
			background-color: #fff;
			margin-bottom:14upx;
			.classTitle{
				
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #292929;
				
			}
			.priceRange{
				margin-top:40upx;
				.rangeItem{
					margin:13upx 0;
					display: flex;
				}
				
				::v-deep .u-input{
					
					// height: 64upx;
					background: #FFFFFF;
					border-radius: 2px 2px 2px 2px;
					opacity: 1;
					border: 1px solid #DADADA;
					text-align: center !important;
				
				}
				.profit{
					border:none !important;
					background: transparent !important;
					::v-deep .uni-input-placeholder{
						display: none;
					}
				}
			}
			.rangeBtn{
				display: flex;
				margin-top:30upx;
				border-top:1px solid #E6E6E6;
				.rangeHandle{
					flex:1;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top:34rpx;
					.addFlag{
						width: 30upx;
						height: 30upx;
						background: #FF6551;
						border-radius:50%;
						color:#fff;
						line-height: 26upx;
						text-align: center;
						opacity: 1;
					}
					.delBtn{
						width: 30upx;
						height: 30upx;
						line-height: 26upx;
						text-align: center;
						background: #BDBDBD;
						border-radius:50%;
						color:#fff;
						opacity: 1;
						
					}
					text{
					
						font-size: 24upx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #3B3B3B;
						margin-left:50upx;
					}
				}
			}
		}
	}
}
</style>