mrr.sj.front/pages/shop/groupBuying/addGroupBuying.vue

<template>
	<view class="add-group-buying">
		<custom-navbar :title="title" backgroundColor="#FFFFFF"></custom-navbar>
		<view class="tip" v-if="tip && formData.id">
			<image src="/static/images/shop/pintuan/warn.png" class="tip-icon">
			</image>
			
			<text>{{ tip }}</text>
		</view>
		<view class="add-service" :class="{tipTop: tip}" >

			<!-- 拼团名称 -->
			<view class="form-item-up">
				<text class="form-label">拼团名称</text>
				<view class="form-input-box">
					<input type="text" v-model="formData.title" placeholder="请输入名称" placeholder-class="placeholder"
						class="form-input" :disabled="disabled" />
				</view>
			</view>
			<!-- 活动时间-->
			<view class="form-item-up flex-wrap__warp">
				<text class="form-label" style="margin-bottom: 24rpx">活动时间</text>
				<view class="form-input-card">
					<selectActiveTime v-model="tiemValue" :disabled="disabled"></selectActiveTime>
				</view>
			</view>
			<!-- 几人团 -->
			<view class="form-item-up">
				<text class="form-label">几人团</text>
				<view class="form-input-box box-width-190">
					<input v-model="formData.person_num" placeholder="请输入人数" placeholder-class="placeholder"
						class="form-input" :disabled="disabled" type="number" />
				</view>
				<text class="redTip">*人数越少，成团难度越低</text>
			</view>
			<!-- 总开团数 -->
			<view class="form-item-up">
				<text class="form-label">总开团数</text>
				<view class="form-input-box box-width-190">
					<input  v-model="formData.team_num" placeholder="请输入数量" placeholder-class="placeholder"
						class="form-input" :disabled="disabled" type="number" />
				</view>
				<text class="redTip">*拼团活动的总数量</text>
			</view>
			<!-- 活动商品 -->
			<view class="form-item-up" @click="selectServe" v-if="!disabled">
				<text class="form-label">活动商品</text>
				<view class="form-input-select">
					<text> {{ serveDetail.title?serveDetail.title:'选择服务' }}</text>
					<image src="/static/images/arrow_right.png" class="form-input-select__img" mode="aspectFit"></image>
				</view>
			</view>
			<view class="form-item-up" v-if="serveDetail.id">
				<serveCard :info="serveDetail" :showRadio="false"></serveCard>
			</view>
			<!-- 活动价 -->
			<view class="form-item-up" v-if="serveDetail.id">
				<text class="form-label">活动价</text>
				<view class="form-input-box box-width-190">
					<input v-model="formData.price" placeholder="请输入价格" placeholder-class="placeholder"
						class="form-input" :disabled="disabled" type="digit" />
				</view>
			</view>
			<!-- 限购规则 -->
			<view class="form-item-up">
				<text class="form-label">限购规则</text>
				<view class="form-radio-box">
					<uv-radio-group v-model="formData.quota_type" placement="row" :labelColor="`#333333`"
						:labelSize="`28rpx`" :disabled="disabled">
						<uv-radio :name="1" activeColor="#FF4767" label="限购">

							<template #icon>

								<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
									v-show="formData.quota_type==1">
								</image>

							</template>
						</uv-radio>
						<uv-radio :name="2" activeColor="#FF4767" label="不限购" @change="formData.person_quota = null">
							<template #icon>

								<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
									v-show="formData.quota_type==2">
								</image>

							</template>
						</uv-radio>
					</uv-radio-group>
				</view>
			</view>
			<!-- 每人限购 -->
			<view class="form-item-up">
				<text class="form-label">每人限购</text>
				<view class="form-input-box box-width-190">
					<input :disabled="
              disabled || (formData.quota_type == 2 && formData.person_quota == null) 
            "  v-model="formData.person_quota" placeholder="请输入数量" placeholder-class="placeholder"
						class="form-input" type="number" />
				</view>
			</view>
			<!-- 活动时效 -->
			<view class="form-item-up" style="flex-wrap: wrap">
				<text class="form-label">活动时效</text>
				<view class="form-radio-box2">
					<uv-radio-group v-model="formData.time_quota" placement="row" :labelColor="`#333333`"
						:labelSize="`28rpx`" :disabled="disabled">
						<uv-radio :name="12" activeColor="#FF4767" label="12小时">
							<template #icon>

								<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
									v-show="formData.time_quota==12">
								</image>

							</template>
						</uv-radio>
						<uv-radio :name="24" activeColor="#FF4767" label="24小时">
							<template #icon>

								<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
									v-show="formData.time_quota==24">
								</image>

							</template>
						</uv-radio>
						<uv-radio :name="48" activeColor="#FF4767" label="48小时">
							<template #icon>

								<image src="/static/images/shop/pintuan/yes.png" class="radioYes"
									v-show="formData.time_quota==48">
								</image>

							</template>
						</uv-radio>
					</uv-radio-group>
				</view>
				<view class="blackTip">新人开团后！在设置时间内邀请剩余好友参团完成成团。若超过设置时间未达成，订单将自动取消。</view>
			</view>
		</view>

		<view class="select-serve-footer" v-if="!disabled">
			<view class="select-serve-footer__btn" @click="submit">提交 </view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import serveCard from "./components/serveCard.vue";
	import timeDatePicker from "components/time-picker/time-date-picker.vue";
	import selectActiveTime from "components/select-active-time/select-active-time.vue";
	export default {
		data() {
			return {
				tip: null, //驳回原因
				title: "添加活动",
				formData: {
					start_time: null,
					end_time: null,
				},
				isSubmit: false,
				tiemValue: [],
				serveDetail: {},
				disabled: false,
			};
		},
		components: {
			timeDatePicker,
			selectActiveTime,
			serveCard,
		},
		onLoad(e) {
			if (e.dateItem) {
				let dateItem = JSON.parse(decodeURIComponent(e.dateItem));
				if (dateItem.back_text?.length != 0) {
					this.tip = dateItem.back_text
				}
				let {
					title,
					start_time,
					end_time,
					person_num,
					team_num,
					server_id,
					price,
					quota_type,
					person_quota,
					time_quota,
					id,
				} = dateItem;
				this.formData = {
					title,
					start_time,
					end_time,
					person_num,
					team_num,
					server_id,
					price,
					quota_type,
					person_quota,
					time_quota,
					id,
				};
			}
			this.tiemValue = [this.formData.start_time, this.formData.end_time];
			if (this.formData.server_id) {
				request
					.post("/user/serverdetail", {
						id: this.formData.server_id
					})
					.then((res) => {
						if (res.state == 1) {
							this.serveDetail = res.data;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
			}
			if (e.disabled) {
				this.disabled = true
			}
			if (e.title) {
				this.title = e.title
			}
		},
		methods: {
			//获取当前时间
			getFormattedTime() {
				const date = new Date();

				// 获取年份
				const year = date.getFullYear();

				// 获取月份，注意月份从0开始，需要加1，并且确保是两位数
				const month = String(date.getMonth() + 1).padStart(2, '0');

				// 获取日期，确保是两位数
				const day = String(date.getDate()).padStart(2, '0');

				// 获取小时，确保是两位数
				const hours = String(date.getHours()).padStart(2, '0');

				// 获取分钟，确保是两位数
				const minutes = String(date.getMinutes()).padStart(2, '0');

				// 获取秒数，确保是两位数
				const seconds = String(date.getSeconds()).padStart(2, '0');

				// 拼接成需要的格式
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			openPicker() {
				console.log(22222);
				this.$refs.timePopup.openTimePopup();
			},
			confirmTime(e) {
				console.log(e);
			},
			selectServe() {
				uni.navigateTo({
					url: "/pages/shop/groupBuying/selectServe",
				});
			},
			submit() {
				let formData = this.formData;
				if (!formData.title) {
					uni.showToast({
						title: "请输入拼团名称",
						icon: "none",
					});
					return;
				}
				formData.start_time = this.tiemValue[0];
				formData.end_time = this.tiemValue[1];
				if (!formData.start_time) {
					uni.showToast({
						title: "请选择开始时间",
						icon: "none",
					});
					return;
				}
				if (!formData.end_time) {
					uni.showToast({
						title: "请选择结束时间",
						icon: "none",
					});
					return;
				}
				if (!formData.person_num) {
					uni.showToast({
						title: "请输入开团人数",
						icon: "none",
					});
					return;
				}
				if (2 > formData.person_num) {
					uni.showToast({
						title: "开团人数不能少于2人",
						icon: "none",
					});
					return;
				}
				if (10 < formData.person_num) {
					uni.showToast({
						title: "开团人数不能超过10人",
						icon: "none",
					});
					return;
				}
				if (!formData.team_num) {
					uni.showToast({
						title: "请输入总开团数",
						icon: "none",
					});
					return;
				}
				if (!formData.server_id) {
					uni.showToast({
						title: "请选择活动商品",
						icon: "none",
					});
					return;
				}
				if (!formData.price) {
					uni.showToast({
						title: "请输入活动价",
						icon: "none",
					});
					return;
				}
				if (!formData.quota_type) {
					uni.showToast({
						title: "请选择限购规则",
						icon: "none",
					});
					return;
				}
				if (!formData.person_quota && formData.quota_type == 1) {
					uni.showToast({
						title: "请输入每人限购",
						icon: "none",
					});
					return;
				}
				if(formData.quota_type == 1 && formData.person_quota<=0 ){
					uni.showToast({
						title: "每人限购必须大于1",
						icon: "none",
					});
					return;
				}
				if (!formData.time_quota) {
					uni.showToast({
						title: "请选择活动时效",
						icon: "none",
					});
					return;
				}
				if (formData.quota_type == 2) {
					formData.person_quota = 0;
				}
				if (this.isSubmit) return;
				this.isSubmit = true;
				let url = "/sj/teamBuy/add";
				if (formData.id) {
					url = "/sj/teamBuy/edit";
				}
				request
					.post(url, formData)
					.then((res) => {
						console.log(res);
						if (res.code == 200) {
							const pages = getCurrentPages();
							const prevPage = pages[pages.length - 2]; // 上一个页面
							uni.showToast({
								title: formData.id ? "修改成功" : "添加成功",
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
									success: () => {
										prevPage.$vm.switchTab(4, 1);
									},
								});
							}, 1500);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					})
					.catch((err) => {
						uni.showToast({
							title: "网络异常，请稍后再试",
							icon: "none",
						});
					})
					.finally(() => {
						this.isSubmit = false;
					});
			},
		},
	};
</script>

<style scoped lang="less">
	.radioYes {
		width: 24rpx;
		height: 16rpx;
	}

	.redTip {
		font-weight: 400;
		font-size: 24rpx;
		color: #FF4767;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
	}

	.blackTip {
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		margin-top: 32rpx;
	}

	.add-group-buying {
		padding-bottom: 160rpx;

		.tip {
			padding: 20rpx 30rpx;
			background: #FEEFEC;
			font-weight: 400;
			font-size: 30rpx;
			color: #F31D2F;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;

			text-align: center;

			.tip-icon {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
				transform: translateY(6rpx);
			}
		}
	}

	.add-service {
		padding: 30rpx;

		.form-item-up {
			background-color: #fff;
			padding: 12px;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			column-gap: 20rpx;

			.form-label {
				white-space: nowrap;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.form-input-card {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				column-gap: 22rpx;
			}

			.form-input-box {
				border-radius: 10rpx;
				border: 1rpx solid #e5e5e5;
				width: 100%;
				height: 72rpx;

				.form-input {
					height: 72rpx;
					font-size: 28rpx;
					color: #333333;
					margin-left: 20rpx;
				}

				.uni-input-placeholder {
					font-weight: 400;
					font-size: 28rpx;
					color: #cacccc;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.box-width-190 {
				width: 190rpx;
			}

			.form-radio-box {
				margin-left: 106rpx;

				.uv-radio-group--row {
					gap: 88rpx;
				}
			}

			.form-radio-box2 {
				margin-left: 32rpx;
				flex: 1;

				.uv-radio-group--row {
					justify-content: space-between;
				}
			}

			.form-input-select {
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: right;
				font-style: normal;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				flex: 1;

				&__img {
					margin-left: 11rpx;
					width: 12rpx;
					height: 24rpx;
				}
			}
		}
	}

	.flex-wrap__warp {
		flex-wrap: wrap;
	}

	.select-serve-footer {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx 30rpx;

		&__btn {
			width: 690rpx;
			height: 78rpx;
			background: #FF4767;
			border-radius: 798rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 39rpx;
			text-align: center;
			font-style: normal;
		}
	}
	.tipTop{
		padding-top: 8rpx;
	}
</style>