<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"> <u-input placeholder="最低价格" @input="startPrice" style="padding: 0 30rpx;background-color: #E9E9E9;text-align: center;width: 200rpx;border-radius: 46rpx;" v-model="min"></u-input> <text style="margin:30rpx;">-</text> <u-input placeholder="最高价格" @input="endPrice" style="padding: 0 30rpx;background-color: #E9E9E9;text-align: center;width: 200rpx;border-radius: 46rpx;" v-model="max"></u-input> </view> <view class="btnGroup"> <view class="reset" @click="reset"> 重置 </view> <view class="submit" @click="submit" style="margin-left:24upx;"> 确定 </view> </view> <view class="setRule"> <view class="ruleTitle"> 设置规则: </view> <view class="ruleText"> A.当加价率生效后,会员价高于市场价,会员价统一自动按以下标准执行: (市场价-成本价)x_____% +成本价=会员价 _____%为此时的加价率。 利润低于_____元的商品不展示在商城里。 </view> </view> </view> </u-popup> </view> </template> <script> export default { data() { return { afterSale: false, min: null, max: null, } }, methods: { reset() { this.min = null; this.max = null }, onClose() { this.min = null; this.max = null }, submit() { if (!this.min) { return this.$toast('请输入最低价格') } if (!this.max) { return this.$toast('请输入最高价格') } if (0 >= this.min) { this.min = null return this.$toast('最低价格必须大于0') } if (0 >= this.max) { this.max = null return this.$toast('最高价格必须大于0') } if (this.min > this.max) { this.max = null return this.$toast('最高价格不能低于最低价格') } this.$emit('getprice', { min: this.min, max: this.max }) } } } </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 { display: flex; align-items: center; justify-content: center; padding-top: 40upx; 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; background-color: #F3F3F3 !important } ::v-deep .u-input__input { text-align: center; } } .btnGroup { margin: 40rpx; display: flex; justify-content: space-between; 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; } } .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>