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

<template>
	<view class='content'>
		<view>
			<view class='flex'>
				<view v-for='(item,index) in classifyList' class='classify_item' :class='item.select?"active":""'  @click='switchClassify(item)'>{{item.classifyName}}</view>
			</view>
			<view class='button' @click='addClassify'>自定义分类</view>
		</view>
		<view class="wrap">
			<view style='padding: 10rpx 0 40rpx 0;' v-for='item in categorizationOfDishes'>
				<view style='margin-bottom:20rpx;' class='flex justify-space-between align-item-center'>
					<view class='flex align-item-center'>
						<view>{{item.classifyName}}</view>
						<view class='iconfont_no' @click='switchStatus(item)' :class='item.status?"icon_merchants_entershouqi":"icon_merchants_enterzhankai"'></view>
					</view>
					<view class='button' @click='addList(item)'>新增</view>
					
					
				</view>
				<view v-if='item.status'>
					<view class='flex align-item-center' v-for='(item1,index1) in item.list'>
						<view>
							<view  style='margin: 10rpx 20rpx;' class='flex  justify-space-between align-item-center'>
								<view>菜品名称</view>
								<u-input inputAlign='right' border='none' placeholder='输入菜品名称，不超过10个字' v-model="item1.dishName" />
							</view>
							
							<view class='flex'>
								<view class='flex align-item-center'>
									<u-input @input='compute'  inputAlign='right' border='none' placeholder='输入单价' v-model="item1.dishPrice" />
									（元/份）
								</view>
								<view class="flex align-item-center">
									<u-input @input='compute' inputAlign='right' border='none' placeholder='输入单价' v-model="item1.number" />
									（份）
								</view>
							</view>
						</view>
						<view>
							<view @click='del(item,index1)' class="iconfont_no icon_merchants_enterjianshao"></view>
						</view>
					</view>
				</view>
				
			</view>
			<view class='flex align-item-center justify-space-between'>
				原价合计（元）<view>{{form.originalPrice}}</view>
			</view>
			<view class='flex align-item-center'>
				团购价（元）<u-input @input='groupPriceInput' inputAlign='right' border='none' placeholder='输入团购价格' v-model="form.groupPrice" />
			</view>
			<view class='flex align-item-center justify-space-between'>
				折扣<view class='flex align-item-center'><view>{{form.discount?form.discount:'自动计算折扣'}}</view><view>折</view></view>
			</view>
			<view>
				<view>上传图片</view>
				<view>
					<u-upload :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic" name="1" multiple
						:maxCount="9">
					</u-upload>
				</view>
			</view>
		</view>
		<u-modal :show="isSubmit" content='确认添加团购信息？' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
			@cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
		<u-modal :show="show1" content='确认取消该分类？'  @confirm="$u.debounce(classifycancelSubmit, 500)" showCancelButton
			@cancel="show1=false" @close="show1=false" closeOnClickOverlay>
		</u-modal>
		<u-modal :show="show" title='添加分类'  @confirm="$u.debounce(classifySubmit, 500)" showCancelButton
			@cancel="show=false" @close="show=false" closeOnClickOverlay>
			<view class="slot-content">
				<view>
					<u--input inputAlign='center' v-model="classifyName" placeholder="输入分类名称" border="none"></u--input>
				</view>
			</view>
		</u-modal>
		<view class="footer">
			<button @click='submit' class="submit">提交</button>
		</view>
	</view>
</template>

<script>
	var that = this
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				form:{},
				show:false,
				show1:false,
				classifyList:[],
				categorizationOfDishes:[],
				currectClassify:{},
				dishImageArray:[],
				fileList1:[],
				isSubmit:false
			}
		},
		onLoad(options) {
			that = this
			this.form.foodId=options.foodId
			this.form.shopNames=options.shopNames
			this.$request.baseRequest('admin.tourism.dishClassifyInfo', 'list', {
				foodId:this.form.foodId,
				page:1,
				limit:9999
			}, failres => {
				uni.showToast({
					icon: "none",
					title: failres.errmsg,
					duration: 3000
				});
			}).then(res => {
				for(var i=0;i<res.data.items.length;i++){
					res.data.items[i].select=false
				}
				this.classifyList = res.data.items
			})
			this.form=JSON.parse(uni.getStorageSync('groupBuying'))
		},
		onShow(){
			
		},
		methods: {
			switchStatus(item){
				item.status= !item.status
				this.$forceUpdate()
				console.log(item,1111111)
			},
			submit(){
				for(var i=0;i<this.categorizationOfDishes.length;i++){
					for(var q=0;q<this.categorizationOfDishes[i].list.length;q++){
						if(!this.categorizationOfDishes[i].list[q].dishName){
							uni.showToast({
								icon: "none",
								title: '请输入菜品名称！',
								duration: 3000
							});
							return
						}
						if(!this.categorizationOfDishes[i].list[q].dishPrice){
							uni.showToast({
								icon: "none",
								title: '请输入菜品单价！',
								duration: 3000
							});
							return
						}
						if(!this.categorizationOfDishes[i].list[q].number){
							uni.showToast({
								icon: "none",
								title: '请输入菜品份数！',
								duration: 3000
							});
							return
						}
					}
				}
				this.isSubmit = true
			},
			confirmSubmit() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.form.foodGroupDetailInfoList=[]
				for(var i=0;i<this.categorizationOfDishes.length;i++){
					this.form.foodGroupDetailInfoList=this.form.foodGroupDetailInfoList.concat(this.categorizationOfDishes[i].list)
				}
				console.log(this.form)
				this.$request.baseRequest('admin.tourism.foodGroupInfo', 'add', {
					foodGroupInfo: JSON.stringify(this.form)
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
			
					uni.hideLoading()
				}).then(res => {
					uni.hideLoading()
					this.isSubmit = false
					uni.showToast({
						icon: "success",
						title: '提交成功',
						duration: 2000
					});
					this.categorizationOfDishes = []
					this.dishImageArray=[]
					uni.navigateBack({delta: 2})
				})
			},
			groupPriceInput(){
				if(this.form.originalPrice){
					this.form.discount = Number(this.form.groupPrice/this.form.originalPrice).toFixed(2)
				}
			},
			compute(){
				var prices=0
				for(var i=0;i<this.categorizationOfDishes.length;i++){
					for(var q=0;q<this.categorizationOfDishes[i].list.length;q++){
						if(this.categorizationOfDishes[i].list[q].dishPrice&&this.categorizationOfDishes[i].list[q].number){
							var price=this.categorizationOfDishes[i].list[q].dishPrice*this.categorizationOfDishes[i].list[q].number
							prices+=price
						}
					}
				}
				if(prices){
					this.form.originalPrice=prices.toFixed(2)
				}else{
					this.form.originalPrice=0
				}
				if(this.form.groupPrice){
					this.form.discount = Number(this.form.groupPrice/this.form.originalPrice).toFixed(2)
				}
				console.log(prices)
			},
			del(item,index){
				console.log(11111)
				for(var i=0;i<this.categorizationOfDishes.length;i++){
					if(this.categorizationOfDishes[i].classifyName==item.classifyName){
						this.categorizationOfDishes[i].list.splice(index,1)
					}
				}
				this.compute()
			},
			classifycancelSubmit(){
				var index = this.categorizationOfDishes.findIndex((item)=>{return item.classifyName == this.currectClassify.classifyName})
				this.categorizationOfDishes,splice(index,1)
			},
			addList(item){
				item.list.push({classify:item.classifyName,dishName:'',dishPrice:'',number:''})
			},
			addClassify(){
				this.show = true
			},
			classifySubmit() {
				console.log(this.form)
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('admin.tourism.dishClassifyInfo', 'add', {
					dishClassifyInfo: JSON.stringify({foodId:this.form.foodId,classifyName:this.classifyName})
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					this.show = false
					uni.showToast({
						icon: "success",
						title: '添加分类成功',
						duration: 2000
					});
				})
			},
			switchClassify(item){
				if(item.select){
					var arr = this.categorizationOfDishes.filter((items)=>{return items.classifyName==item.classifyName})
					if(arr.length>0&&arr.list.length>0){
						this.currectClassify = item
						this.show1 = true
					}else{
						item.select=!item.select
					}
					// if()
				}else{
					item.select=!item.select
					this.categorizationOfDishes.push({
						classifyName:item.classifyName,
						status:false,
						list:[{classify:item.classifyName,dishName:'',dishPrice:'',number:'',}]})
				}
				
			},
			// 删除图片
			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.dishImageArray.push(result)
							that.form.dishImage =that.dishImageArray.toString()
							resolve(res)
						}
					)
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	.classify_item{
		border:1px solid #999;
		padding: 5rpx 10rpx;
		margin: 10rpx;
		border-radius: 10rpx;
	}
	.classify_item.active{
		background:#5F7DE9;
		border: 1px solid #5F7DE9;
		color:#fff;
	}
	.icon_merchants_enterjianshao{
		font-size:48rpx;
	}
</style>