LocalLivingServicesUniapp/pages/coupon/creatcoupon.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.voucherName" placeholder="输入代金券名称" />
					</view>
				</view>
				<view class="item">
					<view class="label">
						面值
					</view>
					<view class="picker">
						<u-input v-model="form.parValue" placeholder="输入面值" />
					</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" style="display: flex;align-items: center;justify-content: end;"@click="selectDate">
						<!-- <u-input placeholder="去设置" v-model="showDate" @click="selectDate" selectDate  @focus="preventKeyboard" /> -->
						<view class="" >
							{{showDate}}
						</view>
						<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" >直接出售 
						<input  name="input" :disabled="form.voucherWay!=='1'" v-model="voucherWayInfo1" /> 元
					</view>
					<view @click="groupChange(1)" class="flex" style="margin-left:36rpx">
						<text v-if="form.voucherWay!=='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.voucherWay!=='2'" v-model="voucherWayInfo2" />元可以领取
					</view>
					<view @click="groupChange(2)" class="flex" style="margin-left:36rpx">
						<text v-if="form.voucherWay!=='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">
					<view class="flex align-center"
						style="background: #F7F8FC;padding:10rpx 20rpx;height:60rpx;width:100%">
						<u-input v-model="form.voucherWayInfo" placeholder="请输入金额" :clearable="false" type="number" />
						<text style="color: #333333;">元</text>
					</view>
				</view> -->
				<view class="titl">
					使用信息
				</view>
				<view class="item justify-between">
					<view class="label">
						适用范围
					</view>
					<view>
						<picker @change="confirm1" :value="form.voucherRange" :range="columns1" range-key="name">
							<view class="picker" v-if="form.voucherRange" style="color: #303133">
								{{columns1.find(e => e.value == form.voucherRange).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.voucherRange == '2' || form.voucherRange == '3'">
					<view class="label">适用商品范围</view>
					<view @click="geActivity" style="color: #999999">
						{{ form.voucherRangeInfo.length !== 0 ? '已选择' + form.voucherRangeInfo.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="radio-style">
					<uni-data-checkbox v-model="form.conditionsUse" :localdata="conditions"></uni-data-checkbox>
				</view>
				<view class="item" v-show="form.conditionsUse == '1'">
					<view class="flex align-center"
						style="background: #F7F8FC;padding:10rpx 20rpx;height:60rpx;width:100%">
						<u-input v-model="form.conditions" placeholder="请输入金额" :clearable="false" type="number" />
						<text style="color: #333333;">元</text>
					</view>
				</view> -->
				<view class="item upload">
					<view class="label">
						代金券描述
					</view>
					<view class="textarea">
						<u-input v-model="form.voucherDescription" type="textarea" placeholder="请输入描述内容"
							maxlength="500" />
					</view>
					<view class="num">
						<span v-if="form.voucherDescription">{{ form.voucherDescription &&
							form.voucherDescription.length > 0 ?
							form.voucherDescription.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> -->
					<u-upload ref="dUpload" :action="action" :file-list="xqImage" @on-success="detailsSuccess"
						@on-remove="detailsRemove" max-count="5" width="140rpx" height="140rpx"></u-upload>
				</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 {
			action: configService.apiUrl + '/sys/common/upload', //图片上传地址
				xqImage: [], //详情图回显
			voucherWayInfo1:'',
			voucherWayInfo2:'',
			headPhotoImg: [],
			showApplication: false,
			columns1: [{
				name: '全店通用',
				value: 1
			}, {
				name: '本店可用商品',
				value: 2
			}, {
				name: '本店不可用商品',
				value: 3
			}],
			mode: 1,
			form: {
				voucherWay: null,
				conditionsUse: null,
				voucherRange: '',
				voucherRangeInfo: [],
				voucherPhoto: []
			},
			showRule: '', //显示退款规则文字
			action: configService.apiUrl + '/sys/common/upload', //图片上传地址
			fileList: [],
			selectedTime: null,
			isSelectDate: false,
			showDate: '去设置',
			productId: '',

		}
	},
	methods: {
		//上传详情图
		detailsSuccess(res, index, lists) {
			this.xqImage = lists
		
		},
		detailsRemove(index, lists) {
			this.xqImage = lists
		},
		groupChange(e){
			// e=='1'?this.voucherWayInfo2='':this.voucherWayInfo1=''
			this.form.voucherWay=e=='1'?'1':'2'
		},
		conditionsChange(e){
			// this.form.voucherWayInfo=''
			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.voucherPhoto.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.voucherPhoto.push(configService.apiUrl + '/' + data.message)

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

									}

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

				}
			});
		},
		confirm1(e) {
			this.form.voucherRange = e.detail.value + 1
			
		},
		//返回
		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() {
			if(this.form.voucherRangeInfo.length>0){
				uni.navigateTo({
					url: '/pages/coupon/activity?params='+encodeURIComponent(JSON.stringify(this.form.voucherRangeInfo))
				})
			}
			else{
				uni.navigateTo({
					url: '/pages/coupon/activity'
				})
			}

		},
		//提交审核
		submit() {
			
			if (!this.form.voucherName) {
				uni.showToast({
					title: '请输入代金券名称',
					icon: 'none'
				});
				return
			} else if (!this.form.parValue) {
				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.beginTime || !this.form.endTime) {
				uni.showToast({
					title: '请选择有效时间',
					icon: 'none'
				});
				return
			} else if (this.form.voucherWay == null) {
				uni.showToast({
					title: '请选择发放方式',
					icon: 'none'
				});
				return
			}  else if (this.form.voucherWay=='1' && this.voucherWayInfo1 == '') {
				uni.showToast({
					title: '请输入出售金额',
					icon: 'none'
				});
				return
			} else if (this.form.voucherWay=='2' && this.voucherWayInfo2 == '') {
				uni.showToast({
					title: '请输入消费满足金额',
					icon: 'none'
				});
				return
			} else if (this.form.voucherRange == '') {
				uni.showToast({
					title: '请选择适用范围',
					icon: 'none'
				});
				return
			} else if ((this.form.voucherRange == '3' || this.form.voucherRange == '2' )&& this.form.voucherRangeInfo.length==0) {
				uni.showToast({
					title: '请选择适用商品范围',
					icon: 'none'
				});
				return
			} else if (this.form.conditionsUse == null) {
				uni.showToast({
					title: '请选择使用条件',
					icon: 'none'
				});
				return
			} else if (this.form.conditionsUse == '2' && !this.form.conditions) {
				uni.showToast({
					title: '请输入最低消费',
					icon: 'none'
				});
				return
			} else {
				let temp = []
				console.log(this.xqImage)
					
				if ( this.xqImage.length > 0) {
					this.xqImage.forEach((item => {
						// temp.push( configService.apiUrl +'/'+item.response.message)
						temp.push(item.url)
					}))
				}
				
				let data={
					voucherWayInfo:this.form.voucherWay=='1'?this.voucherWayInfo1:this.voucherWayInfo2,
					conditions : this.form.conditionsUse == '2' ? this.form.conditions : '0',
					voucherRangeInfo : this.form.voucherRangeInfo.length > 0 ? this.form.voucherRangeInfo.join(',') : null,
					// voucherPhoto : this.form.voucherPhoto.length > 0 ? this.form.voucherPhoto.join(',') : null
						voucherPhoto:temp.length > 0 ? temp.join(',') : null
				}
				if (this.productId == '') {
					this.$http.post("/merchant/localVoucherInfo/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{
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				} else {
					this.form.productId = this.productId
					this.$http.post("/merchant/localVoucherInfo/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'
							})

						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					})
				}

			}
		},
		//回显数据
		getForm() {
			this.$http.get("/merchant/localVoucherInfo/queryById?id="+this.productId ).then(res => {
				if(res.data.success){
					res.data.result.voucherRangeInfo=res.data.result.voucherRangeInfo?res.data.result.voucherRangeInfo.split(',').filter(id => id ):[]
					// res.data.result.voucherPhoto=res.data.result.voucherPhoto!==null && res.data.result.voucherPhoto.length>0?res.data.result.voucherPhoto.split(',').filter(id => id ):[]
					if(res.data.result.voucherPhoto){
						let xqtemp = []
						xqtemp = res.data.result.voucherPhoto.split(',')
						xqtemp.map(item => {
							this.xqImage.push({
								url: item
							})
						})
					}
					res.data.result.conditionsUse = res.data.result.conditions == '0' ? '1' : '2'
					res.data.result.voucherWay = res.data.result.voucherWay? res.data.result.voucherWay+'':''
					this.voucherWayInfo1=res.data.result.voucherWay=='1'?res.data.result.voucherWayInfo:''
					this.voucherWayInfo2=res.data.result.voucherWay=='2'?res.data.result.voucherWayInfo:''
					this.headPhotoImg=res.data.result.voucherPhoto
					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.voucherRange == '2' || this.form.voucherRange == '3') &&this.$store.state.shopSelectedIds){
			this.form.voucherRangeInfo =  this.$store.state.shopSelectedIds
		}
		else{
			this.form.voucherRangeInfo =[]
		}
		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;
}
</style>