tourism/uni_applet/pageA/enter/myCateringdustry/shopSetting/foodInfomation.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<view v-for='item in foodInfomations'>
				<view style="font-weight: 700;margin-bottom: 20rpx;">{{item.classify}}</view>
				<view style='margin:10rpx;' class='flex justify-space-between align-item-center' v-for='(item1,index) in item.data'>
					<view class='flex align-item-center'>
						<u-checkbox-group
						    placement="column"
						    @change="checkboxChange($event,item1)">
						    <u-checkbox
						    :customStyle="{marginBottom: '8px'}"
						    :key="index"
							:name='item1.dishName'
							:checked='item1.checked'
							>
						    </u-checkbox>
						</u-checkbox-group>
						<image v-if='!item1.edit' style='width:200rpx;height:200rpx;margin-right:20rpx;' :src="item1.dishImage" mode="aspectFill"></image>
						<u-upload v-else height='100' width='100' :fileList="item1[`fileList${item1.id}`]" @afterRead="afterRead($event,item1,item)" @delete="deletePic($event,item1,item)" :name="item1.id" multiple
							:maxCount="1">
						</u-upload>
						 <view>
							 <view v-if='!item1.edit'>{{item1.dishName}}</view>
							 <u--input v-else inputAlign='left' v-model="item1.dishName" placeholder="输入菜品名称" border="none"></u--input>
							 <view v-if='!item1.edit'>{{item1.dishPrice}}</view>
							 <u--input v-else inputAlign='left' v-model="item1.dishPrice" placeholder="输入菜品单价" border="none"></u--input>
						 </view>
					 </view>
					<view>
						<view v-if='!item1.edit' @click='edit(item1)' class='button1 button'>编辑</view>
						<view v-if='item1.edit' @click='submit(item1)' class='button1 button'>确定</view>
						{{item1.edit}}
						<view v-if='item1.edit' @click='item1.edit = false' class='default_button'>取消</view>
						<view v-if='!item1.edit' class='default_button'>置顶</view>
					</view>
				 </view>
			</view>
		</view>
		<view style='padding:10px;' class='footer flex justify-space-between align-item-center'>
			<u-checkbox-group
			    placement="column"
			    @change="checkboxAllChange">
			    <u-checkbox
			    :customStyle="{marginBottom: '8px'}"
				name='全选'
				label='全选'
				:checked="checkAll"
				>
			    </u-checkbox>
			</u-checkbox-group>
			<view class='flex align-item-center bottom'>
				<view @click='del' style='margin-right:10rpx;' class='del btn'>删除</view>
				<view @click='add' class='btn add'>添加</view>
			</view>
		</view>
		<u-modal :show="isSubmit" content='确定删除菜品?' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
			@cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
	</view>
</template>

<script>
	var that
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				foodInfomations:[],
				currect:{},
				checkList:[],
				checkAll:false,
				dataList:[],
				isSubmit:false,
				
			}
		},
		onLoad() {
			that = this
			if(uni.getStorageSync('myCateringdustry')){
				this.currect=JSON.parse(uni.getStorageSync('myCateringdustry'))
				this.getList()
			}
		},
		onShow(){
			
		},
		methods: {
			// 删除图片
			deletePic(event,item1,item) {
				console.log(item1,item)
				item1[`fileList${item1.id}`].splice(event.index, 1)
				this.$forceUpdate()
				// that.indoorImageArray.splice(event.index, 1)
				// that.currectData.indoorImage =that.indoorImageArray.toString()
			},
			// 新增图片
			async afterRead(event,item1,item) {
				console.log(item1,item)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = item1[`fileList${item1.id}`].length
				lists.map((item2) => {
					item1[`fileList${item1.id}`].push({
						...item2,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url,item1)
					
					let item = item1[`fileList${item1.id}`][fileListLen]
					item1[`fileList${item1.id}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					this.$forceUpdate()
				}
			},
			uploadFilePromise(res,item) {
				return new Promise((resolve, reject) => {
					uploadImage(res, 'cardImages/',
						result => {
							item.dishImage = result
							resolve(res)
						}
					)
				})
			},
			submit(item){
				this.$request.baseRequest('admin.tourism.foodDishesInfo', 'update', {
					foodDishesInfo:JSON.stringify(item)
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
				}).then(res => {
					uni.showToast({
						icon: "success",
						title: '编辑菜品成功',
						duration: 2000
					});
					this.getList()
				})
			},
			del(){
			
				uni.showModal({
						title: '提示',
						content: '确定删除菜品?',
						success (res) {
						    if (res.confirm) {
								that.$u.debounce(that.confirmSubmit, 500)
						    } else if (res.cancel) {
						      console.log('用户点击取消')
						    }
						  }
					})
			},
			confirmSubmit(){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				for(var i = 0;i<this.checkList.length;i++){
					this.$request.baseRequest('admin.tourism.foodDishesInfo', 'delete', {
						id:this.checkList[i].id
					}, failres => {
						uni.showToast({
							icon: "none",
							title: failres.errmsg,
							duration: 3000
						});
						uni.hideLoading()
					}).then(res => {
						this.isSubmit = false
						
						if(this.checkList.length==1||i==this.checkList.length-1){
							uni.hideLoading()
							uni.showToast({
								icon: "success",
								title: '删除菜品成功',
								duration: 2000
							});
							this.getList()
						}
					})
				}
			},
			checkboxAllChange(e){
				console.log(e)
				this.checkAll = !this.checkAll;
				for(var i = 0; i < this.foodInfomations.length; i++){
					for(var q = 0; q < this.foodInfomations[i].data.length; q++){
						this.foodInfomations[i].data[q].checked = this.checkAll
					}
				}
				console.log(this.foodInfomations)
				this.$forceUpdate()
				
			},
			edit(item){
				console.log(item)
				item.edit = true
				this.$forceUpdate()
			},
			checkboxChange(e,item1){
				console.log(e,item1)
				var checkData = this.checkList.filter((item)=>{return item.id==item1.id})
				item1.checked = !item1.checked
				if(e[0]){
					if(checkData.length==0){
						this.checkList.push(item1)
					}else{
						var checkindex = this.checkList.findIndex((item)=>{return item.id==item1.id})
						this.checkList[checkindex]=item1
					}
				}else{
					var checkindex = this.checkList.findIndex((item)=>{return item.id==item1.id})
					this.checkList.splice(checkindex,1)
				}
			},
			add(){
				uni.navigateTo({
					url:'/pageA/enter/myCateringdustry/addfood?foodId='+this.currect.id+'&shopNames='+this.currect.shopNames
				})
			},
			deWeightFour(arr) {
				var obj = {};
			    arr = arr.reduce(function(a, b) {
			        obj[b.classify] ? '' : obj[b.classify] = true && a.push({classify:b.classify,data:[]});
			        return a;
			    }, [])
			    return arr;
			},
			getList(){
				this.$request.baseRequest('admin.tourism.foodDishesInfo', 'list', {
					foodId:this.currect.id,
					page:1,
					limit:9999
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
				}).then(res => {
					var arr = res.data.items
					var newArr = this.deWeightFour(arr);
					for(var i=0;i<arr.length;i++){
						this.dataList=res.data.items
						var currectList=newArr.filter((item)=>{return item.classify==arr[i].classify})
						arr[i].checked = false
						arr[i].edit = false
						arr[i][`fileList${arr[i].id}`]=[{url:arr[i].dishImage}]
						currectList[0].data.push(arr[i])
					}
					this.foodInfomations = newArr
					console.log(this.foodInfomations)
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	.button1{
		margin-bottom:20rpx;
		width: 100rpx;
	}
	.bottom{
		padding: 20rpx;
		.btn{
			padding: 10rpx 30rpx;
			border-radius: 20rpx;
		}
		.del{
			background: #F50808;
			color: #fff;
		}
		.add{
			background:#5F7DE9;
			color: #fff;
		}
	}
</style>