tourism/uni_merchants_enter/pageA/enter/myCateringdustry/addGroupBuying.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<u--form :model="form"  ref="uForm">
				<u-form-item labelWidth='120' labelPosition='left' label="店铺名称">
					<view style='text-align:right'>{{form.shopNames}}</view>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="团购标题">
					<u-input inputAlign='right' border='none' placeholder='输入团购标题，不超过20个字' v-model="form.groupTitle" />
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="可供用餐人数">
					<view class='flex align-item-center'>
						<u-input inputAlign='right' border='none' placeholder='最少人数' v-model="form.leastPeople" />
						<view>人~</view>
						<u-input inputAlign='right' border='none' placeholder='最多人数' v-model="form.mostPeople" />
						人
					</view>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="下单后随时退单">
					<u-radio-group 
					    v-model="form.chargeableFlag"
					    placement="row">
						<u-radio activeColor="#5F7DE9" label="不接受" name='1' ></u-radio>
						<u-radio activeColor="#5F7DE9" label="接受"  name='0' ></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth='140' labelPosition='left' label="活动结束后自动退单">
					<u-radio-group 
					    v-model="form.endChargeable"
					    placement="row">
						<u-radio activeColor="#5F7DE9" label="不接受" name='1'></u-radio>
						<u-radio activeColor="#5F7DE9" label="接受" name='0'></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="可团购总数量">
					<u-input inputAlign='right' border='none' placeholder='输入团购套餐总数' v-model="form.totalQuantity" />
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="单人可团数量">
					<u-radio-group 
						v-model="form.quantityLimited"
						placement="row">
						<u-radio activeColor="#5F7DE9" label="限量" name='1'></u-radio>
						<u-radio activeColor="#5F7DE9" label="不限量" name='0'></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if='form.quantityLimited==1' labelWidth='120' labelPosition='left' label="单人团购上限">
					<u-input inputAlign='right' border='none' placeholder='输入单个用户最多可团购的数量' v-model="form.groupLimit" />
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="提前预约时间">
					<view class='flex align-item-center'>
						<u-input inputAlign='right' border='none' placeholder='提前预约时间' v-model="form.reservationTime" />小时
					</view>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="活动开始日期">
					<view style='text-align:right;' @click='selectTime(0)'>{{form.startDate?form.startDate:'活动开始日期'}}<image src="@/static/image/yjt.png" mode=""
								style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image></view>
				</u-form-item>
				
				<u-form-item labelWidth='120' labelPosition='left' label="活动结束日期">
					<view style='text-align:right;' @click='selectTime1(1)'>{{form.endDate?form.endDate:'活动结束日期'}}<image src="@/static/image/yjt.png" mode=""
													style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image></view>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='top' label="不可用日期">
					<view class='flex'>
						<view v-for='item in weekList' class='week_item' :class='item.select?"active":""' @click='selectweek(item)'>{{item.value}}</view>
					</view>
					
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="指定不可用日期">
					<view style='text-align:right;' @click='show2 = true'>{{form.unavailableDay?'已选'+form.unavailableDay.length+'天':'已选0天'}}</view>
					<!-- <view class='flex align-item-center'>
						<u-input inputAlign='right' border='none' placeholder='提前预约时间' v-model="form.unavailableDay" />小时
					</view> -->
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="餐位费">
					<view class='flex align-item-center'>
						<u-input inputAlign='right' border='none' placeholder='输入餐位费' v-model="form.spaceFee" />元/人
					</view>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="商品打包外带">
					<u-radio-group 
						v-model="form.packFlag"
						placement="row">
							<u-radio activeColor="#5F7DE9" label="不支持" name='1'></u-radio>
							<u-radio activeColor="#5F7DE9" label="支持" name='0'></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="包间消费使用">
					<u-radio-group 
						v-model="form.roomUsage"
						placement="row">
							<u-radio activeColor="#5F7DE9" label="不支持" name='1'></u-radio>
							<u-radio activeColor="#5F7DE9" label="支持" name='0'></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth='140' labelPosition='left' label="与店内其他优惠共享">
					<u-radio-group 
						v-model="form.discountSharing"
						placement="row">
							<u-radio activeColor="#5F7DE9" label="不支持" name='1'></u-radio>
							<u-radio activeColor="#5F7DE9" label="支持" name='0'></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="免费打包">
					<u-radio-group 	
						v-model="form.freePackaging"
						placement="row">
							<u-radio activeColor="#5F7DE9" label="不支持" name='1'></u-radio>
							<u-radio activeColor="#5F7DE9" label="支持" name='0'></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="发票">
					<u-radio-group 
						v-model="form.invoice"
						placement="row">
							<u-radio activeColor="#5F7DE9" label="不支持" name='1'></u-radio>
							<u-radio activeColor="#5F7DE9" label="支持" name='0'></u-radio>
					</u-radio-group>
				</u-form-item>
			</u--form>
			<view>备注：如部分菜品因时令或其他不可抗因素导致无法提供，商家可用等价菜品替换，具体事宜与顾客协商决定。</view>
			<view class="footer">
				<button @click='next' class="submit">下一步</button>
			</view>
			<u-calendar @close='show = false' @confirm="confirm" :show="show"></u-calendar>
			<u-calendar :minDate='minDate' @close='show1 = false' @confirm="confirm" :show="show1"></u-calendar>
			<u-calendar :show="show2" mode="multiple" monthNum='12' :maxDate='maxDate' @close='show2 = false' @confirm="confirm1"></u-calendar>
		</view>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				value:'',
				show:false,
				show1:false,
				show2:false,
				status:'',
				minDate:'',
				maxDate:'',
				sortDate:[],
				weekList:[
					{value:'周一',select:false},
					{value:'周二',select:false},
					{value:'周三',select:false},
					{value:'周四',select:false},
					{value:'周五',select:false},
					{value:'周六',select:false},
					{value:'周日',select:false}],
				form:{
					chargeableFlag:"0",
					endChargeable:"0",
					quantityLimited:"0",
					packFlag:"0",
					roomUsage:"0",
					discountSharing:"0",
					freePackaging:"0",
					invoice:"0",
				},
			}
		},
		onLoad(options) {
			console.log(options)
			that = this
			var date = new Date().toISOString().slice(0, 10)
			this.minDate=date
			this.form.foodId=options.foodId
			this.form.shopNames=options.shopNames
			this.getTime()
		},
		onShow(){
			
		},
		methods: {
			getTime(){
				var time = new Date();
				    time.setTime(time.getTime());
				    var s2 = time.getFullYear()+"-" + (time.getMonth()+1) + "-" + time.getDate();
				    var monthNum=6; //要减的月数(6)自己定义
				    var dateArr = s2.split('-'); //s2当前时间
				    var year = dateArr[0]; //获取当前日期的年份
				    var month = dateArr[1]; //获取当前日期的月份
				    var day = dateArr[2]; //获取当前日期的日
				    var days = new Date(year, month, 0);
				    days = days.getDate(); //获取当前日期中月的天数
				    var year2 = year;
				    var month2 = parseInt(month) + monthNum;
				    if (month2 <=0) {
				        year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
				        month2 = 12 - (Math.abs(month2) % 12);
				    }
				    var day2 = day;
				    var days2 = new Date(year2, month2, 0);
				    days2 = days2.getDate();
				    if (day2 > days2) {
				        day2 = days2;
				    }
				    if (month2 < 10) {
				        month2 = '0' + month2;
				    }
				    var t2 = year2 + '-' + month2 + '-' + day2;
					this.maxDate = t2
					console.log(t2)
			},
			selectweek(item){
				console.log(item)
				item.select = !item.select
				this.$forceUpdate()
				var arr = this.weekList.filter((item)=>{return item.select == true})
				console.log(arr)
				var arr2=[]
				for(var i=0;i<arr.length;i++){
					arr2.push(arr[i].value)
				}
				this.form.unavailableDate=arr2.toString()
			},
			confirm1(e){
				console.log(e)
				console.log(e.sort( (a, b)=> {return a.localeCompare(b)   // 按照升序排列 
				}))
				this.sortDate=e.sort( (a, b)=> {return a.localeCompare(b)})
				
				this.form.unavailableDay=this.sortDate.toString()  // 按照升序排列
				
				this.show2 = false
				
			},
			confirm(e){
				if(this.status==0){
					this.form.startDate =e[0]
					this.show = false
				}else{
					this.form.endDate =e[0]
					this.show1 = false
				}
					console.log(e)
			},
			selectTime(status){
				this.status=status
				this.show = true
			},
			selectTime1(status){
				this.status=status
				this.show1 = true
			},
			next(){
				var time = new Date();
				var date=time.getFullYear()+"-" + ((time.getMonth()+1)>=10?(time.getMonth()+1):'0'+(time.getMonth()+1)) + "-" + time.getDate()
				    var s2 =  new Date(date).getTime();
					console.log(s2,date,this.form.startDate,new Date(this.form.startDate).getTime(),1111)
				if(new Date(this.form.endDate).getTime()==s2){
					uni.showToast({
						icon: "none",
						title: '结束日期不可晚于当天！',
						duration: 3000
					});
					return
				}
				if(new Date(this.form.startDate).getTime()>new Date(this.form.endDate).getTime()){
					uni.showToast({
						icon: "none",
						title: '开始日期不可晚于结束日期！',
						duration: 3000
					});
					return
				}
				uni.setStorageSync('groupBuying',JSON.stringify(this.form))
				uni.navigateTo({
					url:'/pageA/enter/myCateringdustry/addGroupBuyingNext?foodId='+this.form.foodId
				})
			},
			// 删除图片
			deletePic(event,status) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event,status) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url,status)
					
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					console.log(that.form, this[`fileList${event.name}`])
					
				}
			},
			uploadFilePromise(res,status) {
				return new Promise((resolve, reject) => {
					uploadImage(res, 'cardImages/',
						result => {
							
							that.form.dishImage = result
							resolve(res)
						}
					)
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	/deep/.u-radio-group,/deep/.u-radio-group--row {
		flex-direction: row-reverse !important;
		.u-radio{
			margin-left:10rpx;
		}
	}
	.week_item{
		border:1px solid #999;
		padding: 5rpx 10rpx;
		margin: 10rpx;
		border-radius: 10rpx;
	}
	.week_item.active{
		background:#5F7DE9;
		border: 1px solid #5F7DE9;
		color:#fff;
	}
</style>