shangmenanmo/additionalvue/goods/components/setPrice.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">
					<view class="priceCon">
						<text>成本价：</text>{{Number(cost_price_min)}}
					</view>
					<view class="priceCon">
						<text>秒杀价：</text><input type="text" v-model="secondPrice" class="input"
							placeholder="秒杀价格可低于成本价" />
					</view>
					<view class="priceTime">
						<view class="text">开始时间：</view>
						<view class="selectTime" :style="'color: ' + (startTime?fontColor:'')" @click="timeShow=true">
							{{startTime?startTime:'起始时间'}}
						</view>
					</view>
					<view class="priceCon">
						<text>秒杀时长：</text>
						<input type="number" style="width: 130rpx;margin-right: 15rpx;" class="input" v-model="sec_hour"
							placeholder="请输入"> /小时
					</view>
					<view class="priceCon">
						<text>秒杀限购：</text>
						<u-switch v-model="secondQuota" size='35' @change="change" activeColor='#55BD6A'
							inactiveColor='#F1F1F1'>
						</u-switch>
					</view>
					<view class="priceCon" v-if="secondQuota">
						<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-picker v-model="timeShow" mode="time" @confirm="getTime" :params="params"></u-picker>
	<!-- 	<u-calendar v-model="timeShow" mode="date"  minDate='0' @change="getTime" :pickerOptions="pickerOptions"
		range-color='#FF6257' range-bg-color='#FFBDBA' active-bg-color='#FF6257'></u-calendar> -->
</template>

<script>
	export default {
		data() {
			return {
				afterSale: false,
				timeShow: false,
				startTime: '',
				sec_hour: '',
				secondPrice: '',
				cost_price_min:'',
				secondQuota: false,
				quotaNum: '',
				fontColor: '#262626',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		methods: {
			reset() {
				this.startTime = null;
				this.sec_hour = null
				this.secondPrice = null;
				this.quotaNum = null
			},
			getTime(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
			},
			submit() {
				if (!this.secondPrice) {
					return this.$toast('请输入最低价格')
				}
				if (!this.startTime) {
					return this.$toast('请选择开始时间')
				}
				if (!this.sec_hour && this.secondQuota) {
					return this.$toast('请输入秒杀时长')
				}
				if (!this.quotaNum && this.secondQuota) {
					return this.$toast('请输入限购次数')
				}
				this.$emit('getprice', {
					startTime: this.startTime,
					sec_hour: this.sec_hour,
					secondPrice: this.secondPrice,
					quotaNum: this.secondQuota ? this.quotaNum : '',
					secondQuota: this.secondQuota ? 1 : 2
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-btn--primary {
		background-color: #FF6257 !important;
		border-color: #FF6257 !important;
	}

	.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: 140rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					line-height: 70rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.input {
					width: 350rpx;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1rpx solid #EBEBEB;
					padding: 0 20rpx;
					font-size: 28rpx;
				}
			}

			.priceTime {
				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;
					font-size: 28rpx;
					color: #262626;
					line-height: 72rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.selectTime {
					width: 358rpx;
					height: 70rpx;
					background: #F3F3F3;
					border-radius: 44rpx;
					text-align: left;
					line-height: 70rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #A1A1A1;
					font-style: normal;
					text-transform: none;
					padding-left: 30rpx;
				}

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

			}
		}

	}
</style>