yanzong_qianduan/pages/news3/components/setRange.vue

<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>