You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
3.9 KiB
209 lines
3.9 KiB
<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> |