fanfan
11 months ago
parent
deecab36a6
commit
66ff4c6d5a
@ -1,134 +1,163 @@ |
||||
<template> |
||||
<view> |
||||
<u-popup v-model="afterSale" width="80%" border-radius="10" :closeable="true" mode="center"> |
||||
<view class="afterSales"> |
||||
<view class="filterTitle"> |
||||
请设置价格区间 |
||||
</view> |
||||
<view class="priceContainer"> |
||||
<u-input placeholder="最低" v-model="min"></u-input> |
||||
<text style="margin:0 30upx;">-</text> |
||||
<u-input placeholder="最高" v-model="max"></u-input> |
||||
</view> |
||||
<view class="btnGroup"> |
||||
<view class="reset"> |
||||
重置 |
||||
<view> |
||||
<u-popup v-model="afterSale" width="80%" border-radius="10" @close="close" :closeable="true" mode="center"> |
||||
<view class="afterSales"> |
||||
<view class="filterTitle"> |
||||
请设置价格区间 |
||||
</view> |
||||
<view class="submit" style="margin-left:24upx;"> |
||||
确定 |
||||
<view class="priceContainer"> |
||||
<u-input placeholder="最低" @input="startPrice" v-model="min"></u-input> |
||||
<text style="margin:0 30upx;">-</text> |
||||
<u-input placeholder="最高" v-model="max"></u-input> |
||||
</view> |
||||
</view> |
||||
<view class="setRule"> |
||||
<view class="ruleTitle"> |
||||
设置规则： |
||||
<view class="btnGroup"> |
||||
<view class="reset" @click="reset"> |
||||
重置 |
||||
</view> |
||||
<view class="submit" @click="submit" style="margin-left:24upx;"> |
||||
确定 |
||||
</view> |
||||
</view> |
||||
<view class="ruleText"> |
||||
A.当加价率生效后，会员价高于市场价，会员价统一自动按以下标准执行： （市场价-成本价）x_____% +成本价=会员价 _____%为此时的加价率。 利润低于_____元的商品不展示在商城里。 |
||||
<view class="setRule"> |
||||
<view class="ruleTitle"> |
||||
设置规则： |
||||
</view> |
||||
<view class="ruleText"> |
||||
A.当加价率生效后，会员价高于市场价，会员价统一自动按以下标准执行： （市场价-成本价）x_____% +成本价=会员价 _____%为此时的加价率。 |
||||
利润低于_____元的商品不展示在商城里。 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</u-popup> |
||||
</view> |
||||
</u-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
afterSale:false, |
||||
min:null, |
||||
max:null, |
||||
export default { |
||||
data() { |
||||
return { |
||||
afterSale: false, |
||||
min: null, |
||||
max: null, |
||||
} |
||||
}, |
||||
methods: { |
||||
reset() { |
||||
this.min = null; |
||||
this.max = null |
||||
}, |
||||
close() { |
||||
this.min = null; |
||||
this.max = null |
||||
}, |
||||
startPrice(e) { |
||||
console.log(e) |
||||
this.min = e |
||||
}, |
||||
onRate(e){ |
||||
console.log(e) |
||||
}, |
||||
submit() { |
||||
this.$emit('getprice', { |
||||
min: this.min, |
||||
max: this.max |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
methods:{ |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.afterSales { |
||||
padding: 32upx; |
||||
|
||||
.afterSales{ |
||||
padding:32upx; |
||||
.filterTitle{ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #303030; |
||||
text-align: center; |
||||
} |
||||
.priceContainer{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding-top:56upx; |
||||
margin-top:34upx; |
||||
border-top:1px solid #EAEAEA; |
||||
::v-deep .u-input{ |
||||
height: 70upx; |
||||
background: #F3F3F3; |
||||
border-radius: 22px 22px 22px 22px; |
||||
opacity: 1; |
||||
text-align: center; |
||||
} |
||||
::v-deep .u-input__input{ |
||||
text-align: center; |
||||
} |
||||
} |
||||
.btnGroup{ |
||||
margin:60upx 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.reset{ |
||||
width:216upx; |
||||
height: 70upx; |
||||
background: #E9E9E9; |
||||
border-radius: 22px 22px 22px 22px; |
||||
opacity: 1; |
||||
|
||||
font-size: 28upx; |
||||
.filterTitle { |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #585858; |
||||
line-height: 70upx; |
||||
color: #303030; |
||||
text-align: center; |
||||
} |
||||
.submit{ |
||||
width:216upx; |
||||
height: 70upx; |
||||
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%); |
||||
border-radius: 50px 50px 50px 50px; |
||||
opacity: 1; |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height: 70upx; |
||||
text-align: center; |
||||
|
||||
|
||||
.priceContainer { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding-top: 56upx; |
||||
margin-top: 34upx; |
||||
border-top: 1px solid #EAEAEA; |
||||
|
||||
::v-deep .u-input { |
||||
height: 70upx; |
||||
background: #F3F3F3; |
||||
border-radius: 22px 22px 22px 22px; |
||||
opacity: 1; |
||||
text-align: center; |
||||
} |
||||
|
||||
::v-deep .u-input__input { |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
.setRule{ |
||||
.ruleTitle{ |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #303030; |
||||
|
||||
|
||||
.btnGroup { |
||||
margin: 60upx 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.reset { |
||||
width: 216upx; |
||||
height: 70upx; |
||||
background: #E9E9E9; |
||||
border-radius: 22px 22px 22px 22px; |
||||
opacity: 1; |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #585858; |
||||
line-height: 70upx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.submit { |
||||
width: 216upx; |
||||
height: 70upx; |
||||
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%); |
||||
border-radius: 50px 50px 50px 50px; |
||||
opacity: 1; |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height: 70upx; |
||||
text-align: center; |
||||
|
||||
} |
||||
} |
||||
.ruleText{ |
||||
margin-top:24upx; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #8B8B8B; |
||||
line-height: 32px; |
||||
|
||||
|
||||
.setRule { |
||||
.ruleTitle { |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #303030; |
||||
|
||||
} |
||||
|
||||
.ruleText { |
||||
margin-top: 24upx; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #8B8B8B; |
||||
line-height: 32px; |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,209 +1,293 @@ |
||||
<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 class="vipInfo"> |
||||
<view class="msg"> |
||||
<text>价格区间(元)</text> |
||||
<text>会员加价率%</text> |
||||
<text>利润空间(元）</text> |
||||
</view> |
||||
<view class="classifyContainer"> |
||||
<view class="classifyItem" v-for="(item,index_1) in list" :key="index"> |
||||
<view class="classTitle"> |
||||
<text>{{item.name}}</text> |
||||
<u-icon name="arrow-right" color="#292929" size="28"></u-icon> |
||||
</view> |
||||
</view> |
||||
<view class="rangeBtn"> |
||||
<view class="rangeHandle" @click="addHandle(item)"> |
||||
<view class="addFlag">+</view> |
||||
<text>新增价格区间</text> |
||||
<view class="priceRange"> |
||||
<view class="rangeItem" v-for="(val,index_2) in item.children" :key="i"> |
||||
<view class="rangeInput" @click="setUp(index_1,index_2)"> |
||||
<text v-if="val.startPrice>=0 && val.endPrice>0 "> |
||||
<text>0</text> - <text>100</text> |
||||
</text> |
||||
<text v-else style="color: #8F8F8F;">请设置</text> |
||||
</view> |
||||
<view class="rangeInput fix"> |
||||
<input type="text" style="border: none;" @input="onRate($event,index_1,index_2)" |
||||
placeholder="请设置" v-model="val.rate" /> |
||||
<text style="margin-right: 15rpx;">%</text> |
||||
</view> |
||||
<view class="profit"> |
||||
<text>{{val.startProfit}}</text> - <text>{{val.endProfit}}</text>元 |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class="rangeHandle" @click="delHandle(item)" style="border-left:1px solid #E2E2E2;"> |
||||
<view class="delBtn">-</view> |
||||
<text>删除价格区间</text> |
||||
<view class="rangeBtn"> |
||||
<view class="rangeHandle" @click="addHandle(index_1)"> |
||||
<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" @getprice="getprice"></setRange> |
||||
</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; |
||||
import setRange from './components/setRange.vue' |
||||
export default { |
||||
components: { |
||||
setRange |
||||
}, |
||||
|
||||
delHandle(item){ |
||||
if(item.children.length>1){ |
||||
item.children.pop() |
||||
data() { |
||||
return { |
||||
index_1: '', |
||||
index_2: '', |
||||
list: [{ |
||||
name: '一级分类名称', |
||||
children: [{ |
||||
startPrice: null, |
||||
endPrice: null, |
||||
rate: null, |
||||
startProfit: null, |
||||
endProfit: null |
||||
}] |
||||
}, |
||||
{ |
||||
name: '二级分类名称', |
||||
children: [{ |
||||
startPrice: null, |
||||
endPrice: null, |
||||
rate: null, |
||||
startProfit: null, |
||||
endProfit: null |
||||
}] |
||||
}, |
||||
{ |
||||
name: '三级分类名称', |
||||
children: [{ |
||||
startPrice: null, |
||||
endPrice: null, |
||||
rate: null, |
||||
startProfit: null, |
||||
endProfit: null |
||||
}] |
||||
}, |
||||
] |
||||
} |
||||
|
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
onRate(e, index_1, index_2) { |
||||
let rate = Number(e.detail.value) |
||||
this.list[this.index_1].children[this.index_2].startProfit = Number((this.list[this.index_1].children[this |
||||
.index_2] |
||||
.startPrice * (rate / 100)).toFixed(2)) |
||||
this.list[this.index_1].children[this.index_2].endProfit = Number((this.list[this.index_1].children[this |
||||
.index_2] |
||||
.endPrice * (rate / 100)).toFixed(2)) |
||||
this.list[this.index_1].children[this.index_2].rate = rate |
||||
console.log(this.list) |
||||
}, |
||||
getprice(res) { |
||||
this.list[this.index_1].children[this.index_2].startPrice = Number(res.min) |
||||
this.list[this.index_1].children[this.index_2].endPrice = Number(res.max) |
||||
this.$forceUpdate(this.list) |
||||
|
||||
}, |
||||
addHandle(index_1) { |
||||
this.list[index_1].children.push({ |
||||
startPrice: null, |
||||
endPrice: null, |
||||
rate: null, |
||||
startProfit: null, |
||||
endProfit: null |
||||
}) |
||||
this.index_2 = this.list[index_1].children; |
||||
this.$refs.setRange.afterSale = true; |
||||
}, |
||||
setUp(index_1, index_2) { |
||||
this.index_1 = index_1; |
||||
this.index_2 = index_2; |
||||
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; |
||||
|
||||
} |
||||
page { |
||||
min-height: 100%; |
||||
padding-bottom: 60upx; |
||||
} |
||||
.classifyContainer{ |
||||
.classifyItem{ |
||||
padding:36upx 56upx; |
||||
background-color: #fff; |
||||
margin-bottom:14upx; |
||||
.classTitle{ |
||||
|
||||
|
||||
::v-deep .uni-input-wrapper { |
||||
width: 160rpx !important; |
||||
text-align: center !important; |
||||
height: 70rpx !important; |
||||
} |
||||
|
||||
::v-deep uni-input { |
||||
height: 70rpx !important; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
.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: 500; |
||||
color: #292929; |
||||
|
||||
font-weight: 400; |
||||
color: #3B3B3B; |
||||
|
||||
} |
||||
.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; |
||||
|
||||
} |
||||
|
||||
.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; |
||||
|
||||
} |
||||
.profit{ |
||||
border:none !important; |
||||
background: transparent !important; |
||||
::v-deep .uni-input-placeholder{ |
||||
display: none; |
||||
|
||||
.priceRange { |
||||
margin-top: 40upx; |
||||
|
||||
.rangeItem { |
||||
margin: 13upx 0; |
||||
display: flex; |
||||
} |
||||
} |
||||
} |
||||
.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; |
||||
|
||||
.fix { |
||||
display: flex; |
||||
} |
||||
.delBtn{ |
||||
width: 30upx; |
||||
height: 30upx; |
||||
line-height: 26upx; |
||||
|
||||
.rangeInput { |
||||
width: 180rpx; |
||||
height: 70rpx; |
||||
border-radius: 4rpx; |
||||
border: 2rpx solid #DADADA; |
||||
text-align: center; |
||||
background: #BDBDBD; |
||||
border-radius:50%; |
||||
color:#fff; |
||||
line-height: 74rpx; |
||||
margin-right: 50rpx; |
||||
|
||||
text { |
||||
; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
font-size: 28rpx; |
||||
color: #3B3B3B; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
|
||||
::v-deep .u-input { |
||||
|
||||
// height: 64upx; |
||||
background: #FFFFFF; |
||||
border-radius: 2px 2px 2px 2px; |
||||
opacity: 1; |
||||
|
||||
border: 1px solid #DADADA; |
||||
text-align: center !important; |
||||
|
||||
} |
||||
text{ |
||||
|
||||
font-size: 24upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #3B3B3B; |
||||
margin-left:50upx; |
||||
|
||||
.profit { |
||||
border: none !important; |
||||
background: transparent !important; |
||||
line-height: 70rpx; |
||||
|
||||
::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> |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue