pet_server/pages/Marketing/coupon.vue

<template>
	<view class="content">
		<view class="scroll">
			<view class="title">
				选择优惠券种类
			</view>
			<view class="card row">
				<view :class="checkIndex === 1?'type type-color':'type'" @click="checkIndex = 1">
					代金券
				</view>
				<view :class="checkIndex === 2?'type type-color':'type'" @click="checkIndex = 2">
					满减券
				</view>
				<view :class="checkIndex === 3?'type type-color':'type'" @click="checkIndex = 3">
					折扣券
				</view>
				<view :class="checkIndex === 4?'type type-color':'type'" @click="checkIndex = 4">
					新用户下单券
				</view>
			</view>
			<!-- 代金券 -->
			<view class="" v-if="checkIndex ===  1">
				<input type="digit" placeholder="请输入代金券金额" class="input-card" v-model="amount" />
				<view class="row">
					<input placeholder="请设置起始时间" :disabled="true" class="input-card half" disable @click="showStart = true"
						v-model="startTime" />
					-
					<input placeholder="请设置截止时间" :disabled="true" class="input-card half" disabled @click="showEnd = true"
						v-model="endTime" />
				</view>
				<input type="digit" placeholder="请输入优惠券数量" class="input-card" v-model="num" />
			</view>

			<!-- 满减券 -->
			<view class="" v-if="checkIndex === 2">
				<input type="digit" placeholder="请输入满多少元" class="input-card" v-model="max" />
				<input type="digit" placeholder="请输入减多少元" class="input-card" v-model="amount" />
				<view class="row">
					<input placeholder="请设置起始时间" :disabled="true" class="input-card half" disabled @click="showStart = true"
						v-model="startTime" />
					-
					<input placeholder="请设置截止时间" :disabled="true" class="input-card half" disabled @click="showEnd = true"
						v-model="endTime" />
				</view>
				<input type="digit" placeholder="请输入优惠券数量" class="input-card" v-model="num" />
			</view>

			<!-- 折扣券 -->
			<view class="" v-if="checkIndex === 3">
				<input type="digit" placeholder="请输入折扣 例:0.8" class="input-card" v-model="amount" />
				<view class="row">
					<input placeholder="请设置起始时间" :disabled="true" class="input-card half" disabled @click="showStart = true"
						v-model="startTime" />
					-
					<input placeholder="请设置截止时间" :disabled="true" class="input-card half" disabled @click="showEnd = true"
						v-model="endTime" />
				</view>
				<input type="digit" placeholder="请输入优惠券数量" class="input-card" v-model="num" />
			</view>
		</view>
		<view class="bottom-btn">
			<view class="button-dom" @click="push">
				设置优惠券
			</view>
		</view>

		<!-- 日营业额 查询日期选择 -->
		<u-picker v-model="showStart" mode="time" start-year="2020" :params="dateParams" @confirm="startConfirm">
		</u-picker>

		<!-- 日营业额 查询日期选择 -->
		<u-picker v-model="showEnd" mode="time" start-year="2020" :params="dateParams" @confirm="endConfirm"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选择的优惠券类型
				checkIndex: 1,
				// 设置开始时间
				showStart: false,
				// 设置结束时间
				showEnd: false,
				// 时间格式化
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				// 满多少金额
				max: "",
				// 开始时间
				startTime: "",
				// 结束时间
				endTime: "",
				// 金额 折扣
				amount: "",
				// 数量
				num: "",
			}
		},
		methods: {
			// 提交数据
			push() {
				let _this = this;
				if (this.startTime === "") {
					this.$u.toast('请选择开始时间')
					return false;
				}
				if (this.endTime === "") {
					this.$u.toast('请选择结束时间')
					return false;
				}
				if (this.num === "") {
					this.$u.toast('请输入优惠券数量')
					return false;
				}
				if (this.checkIndex === 1) {
					if (this.amount === "") {
						this.$u.toast('请输入代金券金额')
						return false;
					}
					this.request("/admin_coupon/set", {
						type: 1,
						max: '',
						amount: this.amount,
						start_time: this.startTime,
						end_time: this.endTime,
						num: this.num
					}, "GET").then(res => {
						console.log(res)
						if (res.code === 1) {
							_this.$u.toast('添加成功')
							// 开始时间
							_this.startTime = ""
							// 结束时间
							_this.endTime = ""
							// 金额 折扣
							_this.amount = ""
							// 数量
							_this.num = ""
						}
					})
				}
				if (this.checkIndex === 2) {
					if (this.max === "") {
						this.$u.toast('请输入条件金额')
						return false;
					}
					if (this.amount === "") {
						this.$u.toast('请输入满减的金额')
						return false;
					}
					this.request("/admin_coupon/set", {
						type: 2,
						max: this.max,
						amount: this.amount,
						start_time: this.startTime,
						end_time: this.endTime,
						num: this.num
					}, "GET").then(res => {
						console.log(res)
						if (res.code === 1) {
							_this.$u.toast('添加成功')
							// 开始时间
							_this.startTime = ""
							// 结束时间
							_this.endTime = ""
							// 金额 折扣
							_this.amount = ""
							// 数量
							_this.num = ""
							// 满
							_this.max = ""
						}
					})
				}
				if (this.checkIndex === 3) {
					if (this.amount === "") {
						this.$u.toast('请输入折扣')
						return false;
					}
					this.request("/admin_coupon/set", {
						type: 3,
						amount: this.amount,
						start_time: this.startTime,
						end_time: this.endTime,
						num: this.num
					}, "GET").then(res => {
						console.log(res)
						if (res.code === 1) {
							_this.$u.toast('添加成功')
							// 开始时间
							_this.startTime = ""
							// 结束时间
							_this.endTime = ""
							// 金额 折扣
							_this.amount = ""
							// 数量
							_this.num = ""
						}
					})
				}
				if (this.checkIndex === 4) {

				}

			},
			// 开始时间
			startConfirm(e) {
				console.log(e)
				this.startTime = e.year + "-" + e.month + "-" + e.day
			},
			// 结束时间
			endConfirm(e) {
				console.log(e)
				this.endTime = e.year + "-" + e.month + "-" + e.day
			},
		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 36rpx;
		width: 93%;
		margin: 0 auto;
		padding: 20rpx 0;
	}

	.scroll {
		height: 90vh;
		overflow-y: scroll;
	}

	.bottom-btn {
		height: 10vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.button-dom {
			background-color: #F6B301;
			color: #FFFFFF;
			border-radius: 50rpx;
			height: 80rpx;
			width: 93%;
			text-align: center;
			line-height: 80rpx;
		}
	}

	.card {
		background-color: #FFFFFF;
		width: 93%;
		margin: 0 auto;
		padding: 30rpx;
		flex-wrap: wrap;
		padding: 30rpx;
		height: 240rpx;
		border-radius: 30rpx;

		.type {
			width: 45%;
			background-color: #FFE3A0;
			padding: 20rpx;
			color: #E68500;
			margin-bottom: 20rpx;
			text-align: center;
			border-radius: 20rpx;
		}

		.type-color {
			background-color: #F6B301;
			color: #FFFFFF;
		}
	}

	.input-card {
		background-color: #fff;
		width: 93%;
		height: 80rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		text-indent: 1em;
	}

	.row {
		width: 93%;
		margin: 0 auto;
	}

	.half {
		width: 40%;
		padding: 0;
		margin: 0;
		margin-top: 30rpx;
	}
</style>