LocalLivingServicesUniapp/pages/coupon/creatReduction.vue

<template>
	<view class="creat">
		<view class="top"></view>

		<cu-custom bgColor="bg-fff" :isBack="true">
			<block slot="content">{{ productId ? '编辑满减券' : '新增满减券' }}</block>
		</cu-custom>
		<view class="content">
			<view class="form">
				<view class="titl">
					领取信息
				</view>
				<view class="item">
					<view class="label">
						满减券名称
					</view>
					<view class="picker">
						<u-input v-model="form.couponName" placeholder="输入满减券名称" />
					</view>
				</view>
				<view style="margin-bottom:15rpx">
					<view class="section-title">
						满减消费
					</view>
					<view class="section-full justify-between ">
						<view style="width: 46%;">
							<text class="section-title" style="font-weight: 500;">满
								<text class="section-limit" >0元即不限制金额</text>
							</text>
							<view class="flex align-center"><u-input v-model="form.contentConditions"
									placeholder="输入金额" />元</view>
						</view>
						<view style="width: 46%;">
							<text class="section-title" style="font-weight: 500;">减</text>
							<view class="flex align-center"><u-input v-model="form.contentInfo" placeholder="输入金额" />元
							</view>
						</view>

					</view>
				</view>
				<view class="item">
					<view class="label">
						库存
					</view>
					<view class="picker">
						<u-input v-model="form.number" placeholder="输入库存" />
					</view>
				</view>
				<view class="item">
					<view class="label">
						有效时间
					</view>
					<view class="picker">
						<u-input placeholder="去设置" v-model="showDate" @click="selectDate" selectDate />
						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
					</view>
				</view>
				<view class="titl">
					领取方式
				</view>
				<view class="product-item">
					<view class="title flex">所有人可领
					</view>
					<view @click="groupChange(1)" class="flex" style="margin-left:36rpx">
						<text v-if="form.couponWay !== '1'" style="display: inline-block;"
							class="radio-container"></text>
						<image v-else style=" vertical-align: top;" class="radio-img" src="/static/coupon/xuanzhong.png"
							mode=""></image>
					</view>
				</view>
				<view class="product-item">
					<view class="title flex">本店消费可领
					</view>
					<view @click="groupChange(2)" class="flex" style="margin-left:36rpx">
						<text v-if="form.couponWay !== '2'" style="display: inline-block;"
							class="radio-container"></text>
						<image v-else style=" vertical-align: top;" class="radio-img" src="/static/coupon/xuanzhong.png"
							mode=""></image>
					</view>
				</view>
				<view class="item justify-between">
					<view class="label">
						允许重复领取
					</view>
					<view >
						<u-switch  activeColor="#449AFF "  v-model="form.repeatClaim" size="24"  ></u-switch>
					</view>
				</view>
				<view class="titl">
					使用信息
				</view>
				<view class="item justify-between">
					<view class="label">
						适用范围
					</view>
					<view>
						<picker @change="confirm1" :value="form.couponRange" :range="columns1" range-key="name">
							<view class="picker" v-if="form.couponRange" style="color: #303133">
								{{columns1.find(e => e.value == form.couponRange).name}}
							</view>
							<view v-else style="color: #999999">
								去选择
								<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
							</view>
						</picker>
					</view>
				</view>
				<view class="item justify-between" v-show="form.couponRange == '2' || form.couponRange == '3'">
					<view class="label">适用商品范围</view>
					<view @click="geActivity" style="color: #999999">
						{{ form.couponRangeInfo.length !== 0 ? '已选择' + form.couponRangeInfo.length + '个商品' : '去选择' }}
						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
					</view>
				</view>
				<!-- <view class="titl">
					使用条件
				</view>
				<view class="product-item">
					<view class="title flex">不限制 </view>
					<view @click="conditionsChange(1)" class="flex" style="margin-left:36rpx">
						<text v-if="form.conditionsUse !== '1'" style="display: inline-block;"
							class="radio-container"></text>
						<image v-else style=" vertical-align: top;" class="radio-img" src="/static/coupon/xuanzhong.png"
							mode=""></image>
					</view>
				</view>
				<view class="product-item">
					<view class="title flex">最低消费
						<input name="input" :disabled="form.conditionsUse !== '2'" v-model="form.conditions" />元
					</view>
					<view @click="conditionsChange(2)" class="flex" style="margin-left:36rpx">
						<text v-if="form.conditionsUse !== '2'" style="display: inline-block;"
							class="radio-container"></text>
						<image v-else style=" vertical-align: top;" class="radio-img" src="/static/coupon/xuanzhong.png"
							mode=""></image>
					</view>
				</view> -->
				<view class="item upload">
					<view class="label">
						满减券描述
					</view>
					<view class="textarea">
						<u-input v-model="form.couponDescription" type="textarea" placeholder="请输入描述内容"
							maxlength="500" />
					</view>
					<view class="num">
						<span v-if="form.couponDescription">{{ form.couponDescription &&
							form.couponDescription.length > 0 ?
							form.couponDescription.length : 0 }}</span>
						/500
					</view>
					<view class="tips">
						支持jpg，png格式，最多上传5张，每张图片大小不得超过5M。
					</view>
					<view class="grid col-4 grid-square flex-sub booder-top">
						<view class="bg-img" v-for="(item, index) in headPhotoImg" :key="index" @tap="ViewImage"
							:data-url="headPhotoImg[index]">
							<image :src="headPhotoImg[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view @tap="ChooseImage" v-if="headPhotoImg.length <= 4">
							<image style="width: 156rpx;height:156rpx" src="../../static/coupon/upload.png"
								mode="aspectFill"></image>

						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="btn">
			<view class="submit" @click="submit">
				{{ productId ? '确认编辑' : '确认新增' }}
			</view>
		</view>
		<rangTime title="选中有效时间" ref="rangTime" :mode="mode" @onSubmit="onEndTimeChange" />
	</view>
</template>

<script>
import rangTime from '@/components/dengrq-datetime-picker/dateSelector/index.vue'
import refund from '@/components/product/refund.vue'
import { USER_INFO } from "@/common/util/constants"

import configService from '../../common/service/config.service'
export default {
	components: {
		rangTime,
		refund
	},
	data() {
		return {
			headPhotoImg: [],
			showApplication: false,
			columns1: [{
				name: '全店通用',
				value: 1
			}, {
				name: '本店可用商品',
				value: 2
			}, {
				name: '本店不可用商品',
				value: 3
			}],
			mode: 1,
			form: {
				couponWay: null,
				// conditionsUse: null,
				couponRange: '',
				couponRangeInfo: [],
				couponPhoto: [],
				type:'1',
				contentConditions:''
			},
			showRule: '', //显示退款规则文字
			action: configService.apiUrl + '/sys/common/upload', //图片上传地址
			fileList: [],
			selectedTime: null,
			isSelectDate: false,
			showDate: '',
			productId: '',

		}
	},
	methods: {
		groupChange(e) {
			// e=='1'?this.couponWayInfo2='':this.couponWayInfo1=''
			this.form.couponWay = e == '1' ? '1' : '2'
		},
		conditionsChange(e) {
			// this.form.couponWayInfo=''
			this.form.conditionsUse = e == '1' ? '1' : '2'
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.headPhotoImg,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '提示',
				content: '确定要删除？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.headPhotoImg.splice(e.currentTarget.dataset.index, 1)
						this.form.couponPhoto.splice(e.currentTarget.dataset.index, 1)

					}
				}
			})
		},
		ChooseImage() {
			uni.chooseImage({
				// count: 4, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					if (res) {
						// this[type + 'Img'] = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
							url: configService.apiUrl + '/sys/common/upload',
							filePath: res.tempFilePaths[0],
							name: "file",
							formData: {
								'biz': 'temp',
							},
							success: (files) => {
								let data = JSON.parse(files.data);
								if (data.success) {

									if (this.headPhotoImg.length != 0) {
										this.headPhotoImg = this.headPhotoImg.concat(res.tempFilePaths)
										this.form.couponPhoto.push(configService.apiUrl + '/' + data.message)

									} else {
										this.headPhotoImg = res.tempFilePaths
										this.form.couponPhoto = [configService.apiUrl + '/' + data.message]

									}

									// this.form.headPhoto =this.form.headPhoto+'/'+ data.message
								}
							}
						})
					}

				}
			});
		},
		confirm1(e) {
			this.form.couponRange = e.detail.value + 1
			// if(e!=='0'){
			// 	this.form.couponRangeInfo =  uni.getStorageSync('allowanceSelected')
			// }
			// else{
			// 	this.form.couponRangeInfo =[]
			// }
		},
		//返回
		back() {
			uni.navigateTo({
				url: '/pages/product/index'
			})
		},
		// 处理 confirm 事件，接收子组件传递的时间段数据
		handleConfirm(time) {
			this.selectedTime = time; // 保存时间段数据
			this.isSelectDate = false
		},
		//隐藏弹窗
		closeSelectDate() {
			this.isSelectDate = false
		},
		//跳转至可用时间
		setUsable() {
			uni.navigateTo({
				url: '/pages/product/usable'
			})
		},
		selectDate() {
			// this.isSelectDate = true
			this.$refs.rangTime.open()
		},
		onEndTimeChange(val) {
			this.form.beginTime = val.startDate
			this.form.endTime = val.endDate
			this.showDate = val.startDate + '-' + val.endDate
			this.$forceUpdate(); // 强制刷新视图
		},
		geActivity() {
			uni.navigateTo({
				url: '/pages/coupon/activity?params=' + encodeURIComponent(JSON.stringify(this.form.couponRangeInfo))
			})
		},
		//提交审核
		submit() {
			
			if (!this.form.couponName) {
				uni.showToast({
					title: '请输入满减券名称',
					icon: 'none'
				});
				return
			} else if (this.form.contentConditions=='') {
				uni.showToast({
					title: '请输入满减金额',
					icon: 'none'
				});
				return
			}  else if (!this.form.contentInfo) {
				uni.showToast({
					title: '请输入金额',
					icon: 'none'
				});
				return
			}  else if (!this.form.number) {
				uni.showToast({
					title: '请输入库存',
					icon: 'none'
				});
				return
			}  else if (this.form.number == '0' || this.form.number == 0) {
				uni.showToast({
					title: '库存不能为0',
					icon: 'none'
				});
				return
			} else if (this.form.couponWay == null) {
				uni.showToast({
					title: '请选择领取方式',
					icon: 'none'
				});
				return
			} else if (!this.form.beginTime && !this.form.endTime) {
				uni.showToast({
					title: '请选择有效时间',
					icon: 'none'
				});
				return
			} else if (this.form.couponRange == '') {
				uni.showToast({
					title: '请选择适用范围',
					icon: 'none'
				});
				return
			} else if ((this.form.couponRange == '3' || this.form.couponRange == '2' )&& this.form.couponRangeInfo.length==0) {
				uni.showToast({
					title: '请选择适用商品范围',
					icon: 'none'
				});
				return
			} else {
				let data={
					repeatClaim:this.form.repeatClaim?'1':'2',
					couponRangeInfo:this.form.couponRangeInfo.length > 0 ? this.form.couponRangeInfo.join(',') : null,
					couponPhoto:this.form.couponPhoto.length > 0 ? this.form.couponPhoto.join(',') : null
				}
				if (this.productId == '') {
					this.$http.post("/merchant/localCouponInfo/add", { ...this.form,...data, merchantId: uni.getStorageSync(USER_INFO).merchantId }).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							});

							this.$store.state.shopSelectedIds=[]
							uni.navigateTo({
								url: '/pages/coupon/coupon'
							})
						}
					})
				} else {
					this.form.productId = this.productId
					this.$http.post("/merchant/localCouponInfo/edit", {...this.form,...data}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '编辑成功',
								icon: 'none'
							});
							this.$store.state.shopSelectedIds=[]
							uni.navigateTo({
								url: '/pages/coupon/coupon'
							})

						}
					})
				}

			}
		},
		//回显数据
		getForm() {
			this.$http.get("/merchant/localCouponInfo/queryById?id=" + this.productId).then(res => {
				if (res.data.success) {
					res.data.result.couponRangeInfo = res.data.result.couponRangeInfo ? res.data.result.couponRangeInfo.split(',').filter(id => id) : []
					res.data.result.couponPhoto = res.data.result.couponPhoto!== null && res.data.result.couponPhoto.length>0? res.data.result.couponPhoto.split(',').filter(id => id) : []
					res.data.result.couponWay = res.data.result.couponWay ? res.data.result.couponWay + '' : ''
					res.data.result.repeatClaim = res.data.result.repeatClaim && res.data.result.repeatClaim=='1'? true: false
					this.headPhotoImg=res.data.result.couponPhoto
					this.showDate = res.data.result.beginTime + '-' + res.data.result.endTime
					this.form = res.data.result
				}
			})
		}
	},

	onLoad(options) {
		if (options.id) {
			this.productId = options.id
		}
		// if (options && options.params) {
		// 	let params = JSON.parse(decodeURIComponent(options.params))
		// 		
		// }
	},
	onShow() {
		if((this.form.couponRange == '2' || this.form.couponRange == '3') &&this.$store.state.shopSelectedIds){
			this.form.couponRangeInfo =  this.$store.state.shopSelectedIds
		}
		else{
			this.form.couponRangeInfo =[]
		}
		if(this.productId){
			this.getForm()
		}
	}
}
</script>

<style lang="scss" scoped>
.u-radio {
	flex: 1;
	/* 让每个radio项都尽可能填充可用空间 */
}


.creat {
	width: 100vw;
	height: 100vh;
	background: #F7F8FC;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	/*#ifdef APP-PLUS*/
	.top {
		width: 100%;
		height: var(--status-bar-height);
		background-color: #fff;
	}

	/*#endif*/
	.head {
		width: 100%;
		height: 112rpx;
		padding: 32rpx 24rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		position: relative;

		.cuIcon-back {
			font-size: 40rpx;
			margin-right: 40rpx;
		}

		.case {
			font-size: 36rpx;
			font-weight: 600;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.step {
			position: absolute;
			right: 20rpx;
		}
	}

	.content {
		width: 100%;
		flex: 1;
		padding: 24rpx;
		overflow-y: auto;

		.titl {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			width: 100%;
			// height: 60rpx;
			font-weight: 600;
			margin-bottom: 22rpx;
		}

		.form {
			background-color: #fff;
			padding: 16rpx;
			border-radius: 16rpx;

			.item {
				width: 100%;
				height: 58rpx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				// align-items: center;
				padding-bottom: 16rpx;
				margin-bottom: 16rpx;

				.label {
					margin-right: 20rpx;
					font-weight: 600;
					font-size: 28rpx;
					min-width: 126rpx;

					span {
						color: red;
					}
				}

				.picker {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #999999;

					::v-deep.u-input__input {
						text-align: right;
					}
				}

				.set {
					display: flex;
					justify-content: flex-end;

					::v-deep.u-input {
						text-align: right !important;
					}
				}
			}

			.upload {
				display: block;
				height: auto;

				.tips {
					font-size: 20rpx;
					color: #999999;
					margin-bottom: 16rpx;
					margin-top: 10rpx;
				}
			}

			.textarea {
				width: 100%;
				min-height: 196rpx;
				background: #F7F8FC;
				border-radius: 4rpx;
				padding: 12rpx 16rpx;
				font-size: 26rpx;
				margin-top: 12rpx;
			}

			.num {
				width: 100%;
				text-align: right;
				font-size: 24rpx;
				color: #999999;
				margin-top: 6rpx;
			}
		}
	}

	.btn {
		width: 100%;
		height: 112rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 16rpx 24rpx;

		.submit {
			width: 100%;
			height: 76rpx;
			background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
			border-radius: 75rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.popup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: flex-end;

		z-index: 99;

		.model {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 0rpx 24rpx;
			padding-bottom: 20rpx;

			.title {
				width: 100%;
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #EEEEEE;
				position: relative;

				image {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 0px;
				}
			}

			.tree {
				display: flex;
				height: 546rpx;

				.left {
					overflow-y: auto;

					.item {
						width: 224rpx;
						height: 78rpx;
						padding: 20rpx;
						font-size: 26rpx;
					}

					.active {
						background: rgba(68, 154, 255, 0.1);
						color: #2983EC;
					}
				}

				.border {
					border-left: 1px solid #eeeeee;
					border-right: 1px solid #eeeeee;
				}
			}

			.sub {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
				border-top: 1px solid #eeeeee;
				padding-top: 16rpx;

				.submit {
					width: 672rpx;
					height: 76rpx;
					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
					border-radius: 53rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
}

::v-deep.u-upload__button {
	width: 250rpx !important;
	height: 250rpx !important;
}

.radio-style {
	margin-bottom: 15rpx;
	// border-bottom: 1px solid #EEEEEE;

	::v-deep.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
		color: #333 !important
	}

	::v-deep.uni-data-checklist .checklist-group {
		flex-direction: column;

		.checklist-box {
			flex-direction: row-reverse;
			justify-content: space-between;

			.checklist-content .checklist-text {
				margin-left: 0;
				font-weight: 600;
				font-size: 28rpx;

			}
		}
	}
}

.product-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;

	//   border-bottom: 1px solid #EEEEEE;
	input {
		width: 120rpx;
		border-bottom: 1px solid #ccc;
		margin: 0 10rpx;
		font-size: 28rpx;
		text-align: center;
	}
}

.radio-container {
	width: 34rpx;
	height: 34rpx;
	border-radius: 50%;
	border: 1px solid #B4B4B4;
}

.radio-img {
	width: 34rpx;
	height: 34rpx;
}

.section-title {
	margin-right: 20rpx;
	font-weight: 600;
	font-size: 28rpx;
	min-width: 126rpx;
}
.section-limit{
	background: #F6F6F6;
	padding: 5rpx 12rpx;
	font-size: 24rpx;
color: #666666;
margin-left: 16rpx;
}
.section-full {
	display: flex;
	margin-top: 18rpx;
	border-bottom: 1px solid #EEEEEE;

	.u-input {
		height: 64rpx;
		background: #F7F8FC;
		margin-right: 18rpx;
		font-size: 28rpx;
		margin: 18rpx 0;
		margin-right: 18rpx;
	}

	::v-deep.u-input__input {
		padding: 10rpx 20rpx;

	}
}
</style>