fanfan
9 months ago
parent
b588cc0b71
commit
31bfc9a177
@ -0,0 +1,234 @@ |
||||
<template> |
||||
<view> |
||||
<u-popup v-model="afterSale" width="80%" border-radius="10" @close="onClose" :closeable="true" mode="center"> |
||||
<view class="afterSales"> |
||||
<view class="filterTitle"> |
||||
请设置秒杀价 |
||||
</view> |
||||
<view class="priceContainer"> |
||||
<view class="priceCon"> |
||||
<text>秒杀价：</text><input type="text" v-model="secondPrice" class="input" value="" placeholder="秒杀价格可低于成本价" /> |
||||
</view> |
||||
<view class="priceTime"> |
||||
<view class="text">秒杀区间：</view> |
||||
<view class="priceDate"> |
||||
<view class="selectTime" @click="timeShow=true"> |
||||
{{startTime?startTime:'起始时间'}} |
||||
</view> |
||||
<text>-</text> |
||||
<view class="selectTime" @click="timeShow=true"> |
||||
{{endTime?endTime:'终止时间'}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="priceCon" style="justify-content: space-between;"> |
||||
<text>秒杀限购：</text> |
||||
<u-switch v-model="secondQuota" @change="change" activeColor='#55BD6A' inactiveColor='#F1F1F1'> |
||||
</u-switch> |
||||
</view> |
||||
<view class="priceCon"> |
||||
<text>每人限购：</text> |
||||
<input type="number" style="width: 130rpx;margin-right: 15rpx;" class="input" v-model="quotaNum" placeholder="请输入" />次 |
||||
</view> |
||||
</view> |
||||
<view class="btnGroup"> |
||||
<view class="reset" @click="reset"> |
||||
重置 |
||||
</view> |
||||
<view class="submit" @click="submit" style="margin-left:24upx;"> |
||||
确定 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</u-popup> |
||||
</view> |
||||
<u-calendar v-model="timeShow" mode="range" @change="getTime" range-color='#FF6257' range-bg-color='#FFBDBA' |
||||
active-bg-color='#FF6257'></u-calendar> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
afterSale: false, |
||||
timeShow: false, |
||||
startTime: '', |
||||
endTime: '', |
||||
secondPrice:'', |
||||
secondQuota: '1', |
||||
quotaNum:'' |
||||
} |
||||
}, |
||||
methods: { |
||||
reset() { |
||||
this.startTime = null; |
||||
this.endTime = null |
||||
this.secondPrice = null; |
||||
this.quotaNum = null |
||||
}, |
||||
getTime(e) { |
||||
this.startTime = e.startDate; |
||||
this.endTime = e.endDate; |
||||
}, |
||||
submit() { |
||||
if (!this.secondPrice) { |
||||
return this.$toast('请输入最低价格') |
||||
} |
||||
if (!this.startTime) { |
||||
return this.$toast('请选择开始时间') |
||||
} |
||||
if (!this.endTime) { |
||||
return this.$toast('请选择结束时间') |
||||
} |
||||
if (!this.quotaNum) { |
||||
return this.$toast('请输入限购次数') |
||||
} |
||||
this.$emit('getprice', { |
||||
startTime: this.startTime, |
||||
endTime: this.endTime, |
||||
secondPrice: this.secondPrice, |
||||
quotaNum: this.quotaNum, |
||||
secondQuota: this.secondQuota |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.afterSales { |
||||
padding: 32upx; |
||||
|
||||
.filterTitle { |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 700; |
||||
color: #303030; |
||||
text-align: center; |
||||
} |
||||
|
||||
.priceContainer { |
||||
overflow: hidden; |
||||
padding-top: 40upx; |
||||
margin-top: 30upx; |
||||
border-top: 1rpx solid #EAEAEA; |
||||
|
||||
.priceCon { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
color: #262626; |
||||
margin-bottom: 20rpx; |
||||
text { |
||||
width: 150rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
line-height: 72rpx; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
|
||||
.input { |
||||
width: 350rpx; |
||||
height: 72rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 4rpx; |
||||
border: 1rpx solid #EBEBEB; |
||||
padding: 0 20rpx; |
||||
font-size: 28rpx; |
||||
} |
||||
} |
||||
|
||||
.priceTime { |
||||
margin-bottom: 20rpx; |
||||
.text { |
||||
width: 150rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
font-size: 28rpx; |
||||
color: #262626; |
||||
line-height: 72rpx; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
|
||||
.priceDate { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.selectTime { |
||||
width: 238rpx; |
||||
height: 70rpx; |
||||
background: #F3F3F3; |
||||
border-radius: 44rpx; |
||||
text-align: center; |
||||
line-height: 70rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 28rpx; |
||||
color: #A1A1A1; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
|
||||
text { |
||||
margin: 0 15rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// ::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: 40upx 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; |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue