Ci2Order.vue/App/pages/component/extraItem/extraItem.vue

<template>
	<view class="extra-item">
		<z-slide-card class="extra-item_card" :title="title" :visible.sync="isvisible" @beforeClose="beforeClose"
		 rightBtnText="确定" @rightClick="submit">
			<z-tabs v-if="!isWedding" class="shadow-2" :tabs="['额外项目','点餐项目']" v-model="stateTab" @change="changeTabs" bgcolor="white"
			 textselectedcolor="#333333"></z-tabs>
			<!-- 婚庆套餐只有额外项目 -->
			<view :class="isWedding?'extra-item-content_2':'extra-item-content'" class="flex-n " v-if="stateTab==0">
				<scroll-view class="extra-item_left" scroll-y>
					<view class="extra-item_left_item" :class="extraIndex==index?'extra-item_left_item_choose':''" @click="extraIndex=index"
					 v-for="(item,index) in itemsExTree" :key="item.itemTypeCode">{{item.itemTypeName}}</view>
					<view class="item_zw_1"></view>
				</scroll-view>
				<scroll-view class="extra-item_right" scroll-y v-if="itemsExTree&&itemsExTree.length&&itemsExTree[extraIndex]&&itemsExTree[extraIndex].itemsExs.length">
					<view class="add_item" style="border-bottom: 1px solid #f1f1f1;" v-for="(item,index) in itemsExTree[extraIndex].itemsExs" :key="index">
						<view class="flex-n fac fjb" style="width: 400rpx;">
							<view class="add_item_name line-1">{{item.itemName}}</view>
							<view class="add_item_price nowarp">单价:{{item.itemPrice}}</view>
						</view>
						<view class="flex-n fje">
							<z-number class="mt-20" v-model="item.itemCount" @change="addChange(0)"></z-number>
						</view>
					</view>
					<view class="item_zw_2"></view>
				</scroll-view>
			</view>
			<view class="package-content flex-n " v-else>
				<scroll-view class="extra-item_left" scroll-y>
					<view class="extra-item_left_item" :class="packageIndex==index?'extra-item_left_item_choose':''" @click="packageIndex=index"
					 v-for="(item,index) in itemsFoodTree" :key="index">{{item.foodTypeName}}</view>
					<view class="item_zw_1"></view>
				</scroll-view>
				<scroll-view class="extra-item_right" scroll-y>
					<view class="add_item" style="border-bottom: 1px solid #f1f1f1;" v-if="itemsFoodTree&&itemsFoodTree.length&&itemsFoodTree[packageIndex]&&itemsFoodTree[packageIndex].itemsFoods.length"
					 v-for="(item,index) in itemsFoodTree[packageIndex].itemsFoods" :key="index">
						<view class="flex-n fac fjb" style="width: 400rpx;">
							<view class="add_item_name line-1">{{item.foodName}}</view>
							<view class="add_item_price nowarp" style="margin-right: 0px!important;">单价:{{item.foodPrice}}</view>
						</view>
						<view class="flex-n fje">
							<z-number class="mt-20" v-model="item.foodCount" @change="addChange(0)"></z-number>
						</view>
						<!-- <z-number class="mt-10"  v-model="item.foodCount" @change="addChange(0)"></z-number> -->
					</view>
					<view class="item_zw_2"></view>
				</scroll-view>
			</view>
			<view class="shop_cart flex-n fac fjb shadow-2">
				<view class="shop_cart_btn iconfont icongouwuche4" @click="lookDetail"></view>
				<!-- <view class="shop_cart_text flex-1" style="margin-left: 174rpx;">
					应收价格：10000000
				</view> -->
				<view style="margin-left: 174rpx;"></view>
				<view class="shop_cart_text flex-n fac mr-30" v-if="!hideReal">
					实收金额：
					<z-input class="shop_cart_input" type="number" v-model="realMoney"></z-input>
				</view>
			</view>
			<!-- 划出菜单 -->
			<view class="mask" v-if="showAddList" @click.self="lookDetail">
				<view class="cart_menu_list shadow-2" :class="[{'cart_menu_list_show':showAddList,'cart_menu_list_hide':hideAddList}]">
					<view class="cart_menu_list_top">
						<view class="cart_menu_list_total">应收价格：{{totalprice}}</view>
					</view>
					<view class="line"></view>
					<!-- <view class="cart_menu_list_empty mt-20">购物车是空的</view> -->
					<scroll-view scroll-y class="cart_menu_list_content">
						<view class="cart_menu_list_label plr-40 flex-n fac fje">
							<view class="text mr-20">额外项目</view>
							<view class="cart_menu_list_edit iconfont iconbianji" @click="addItem"></view>
						</view>
						<view class="plr-40 pt-20">
							<view class="flex-n fac fjb add_item2" v-for="(item,index) in selectedItemsExTree" :key="index">
								<template v-if="!item.isManual&&item">
									<view class="flex-n fac fjb" style="width: 460rpx;">
								
										<view class="add_item_name line-1" :style="{'color':item.isChange=='1'?'#cf9236!important':''}">{{item.itemName}}</view>
										<view class="add_item_price nowarp flex-n fac">￥<z-input class="add-input ml-10" type="number" v-model="item.itemPrice"></z-input>
										</view>
									</view>
									<z-number v-model="item.itemCount" @change="addChange(1)"></z-number>
								</template>
								<template v-else>
									<view class="flex-n fac fjb" style="width: 460rpx;">
										<view class="add_item_name line-1">
											<z-input placeholder="点击填写" class="add-input-name" v-model="item.itemName"></z-input>
										</view>

										<view class="add_item_price nowarp flex-n fac" v-if="item">￥<z-input type="number" class="add-input ml-10"
											 v-model="item.itemPrice"></z-input>
										</view>
									</view>
									<z-number v-model="item.itemCount" @change="addChange(1)"></z-number>
									<view class="add_item_del  iconfont iconshanchu-copy-copy" @click="selectedItemsExTree.splice(index,1)"></view>
								</template>
							</view>
						</view>
						<view class="cart_menu_list_label plr-40 flex-n fac fje mt-20">
							<view class="text mr-20">点餐项目</view>
							<view class="cart_menu_list_edit iconfont iconbianji" @click="addPackage"></view>
						</view>
						<view class=" plr-40 pt-20">
							<view class="flex-n fac fjb add_item2" v-for="(item,index) in selectedItemsFoodTree" :key="index">
								<template v-if="!item.isManual">
									<view class="flex-n fac fjb" style="width: 460rpx;">
									
										<view class="add_item_name line-1" :style="{'color':item.isChange=='1'?'#cf9236!important':''}">{{item.foodName}}</view>
										<view class="add_item_price nowarp flex-n fac">￥<z-input type="number" class="add-input ml-10" v-model="item.foodPrice"></z-input>
										</view>
									</view>
									<z-number v-model="item.foodCount" @change="addChange(1)"></z-number>
								</template>
								<template v-else>
									<view class="flex-n fac fjb" style="width: 460rpx;">
										<view class="add_item_name line-1">
											<z-input placeholder="点击填写" class="add-input-name" v-model="item.foodName"></z-input>
										</view>
										<view class="add_item_price nowarp flex-n fac">￥<z-input type="number" class="add-input ml-10" v-model="item.foodPrice"></z-input>
										</view>
									</view>
									<z-number v-model="item.foodCount" @change="addChange(1)"></z-number>
									<view class="add_item_del  iconfont iconshanchu-copy-copy" @click="selectedItemsFoodTree.splice(index,1)"></view>
								</template>
							</view>

						</view>
						<view style="height: 80rpx;"></view>
					</scroll-view>

				</view>

			</view>
		</z-slide-card>
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		props: {
			visible: Boolean,
			title: String,
			type: {
				type: String,
				default: ''
			},
			value: String | Array | Object,
			packageId: String,
			isWedding: Boolean,
			hideReal: Boolean
		},
		model: {
			prop: 'value',
		},
		data() {
			return {
				isvisible: false,
				stateTab: 0,
				extraIndex: 0,
				packageIndex: 0,
				num: 0,

				showAddList: false,
				hideAddList: false,

				itemsExTree: [],
				itemsFoodTree: [],

				oldItemsExTree: [],
				oldItemsFoodTree: [],

				selectedItemsExTree: [],
				selectedItemsFoodTree: [],

				realMoney: 0, //实收金额
			}
		},
		onBackPress() {
		  if(this.visible) {  
		    this.visible = false;  
		    return true;  
		  }  
		},
		watch: {
			value(newval, oldval) {
				console.log('zz',newval);
				if (newval) {
					console.log(newval)
					if (this.isWedding) {
						this.oldItemsExTree = this.value;
						this.selectedItemsExTree = this.value;
					} else {
						this.oldItemsExTree = this.value.itemsExTree;
						this.oldItemsFoodTree = this.value.itemsFoodTree;
						this.selectedItemsExTree = this.value.itemsExTree;
						this.selectedItemsFoodTree = this.value.itemsFoodTree;
					}
				}
			},
			visible(newval) {
				this.isvisible = newval;
				if (newval) {
					if (this.isWedding) {
						this.getitemsExTree();
					} else {
						this.getitemsExTree();
						this.getitemsFoodTree();
					}

				}
			},
			totalprice(newval, oldval) {
				if (newval) {
					this.realMoney = newval;
				}
			}
		},
		computed: {
			totalprice() {
				var money = 0,
					itemsFoodTree = this.selectedItemsFoodTree,
					itemsExTree = this.selectedItemsExTree;
				for (var i in itemsExTree) {
					money += itemsExTree[i].itemPrice * itemsExTree[i].itemCount;
				}
				for (var i in itemsFoodTree) {
					money += itemsFoodTree[i].foodPrice * itemsFoodTree[i].foodCount;
				}
				return money.toFixed(2);
			}
		},
		methods: {
			//获取额外项目树
			getitemsExTree() {
				console.log(this.value)
				var itemsExs = this.value.itemsExs || [];
				this.$axios.post('app/itemsEx/itemsExTreeByStoreId', {
					"storeId": uni.getStorageSync('storeId')
				}).then(res => {
					console.log('额外项目树', res)
					var itemsExTree = res.data.itemsExTree;
					for (var i in itemsExTree) {
						for (var j in itemsExTree[i].itemsExs) {
							itemsExTree[i].itemsExs[j].itemCount = 0;
							itemsExTree[i].itemsExs[j].isManual = 0;
							if (this.title == '修改套餐')
								itemsExTree[i].itemsExs[j].isChange = '1';
							else
								itemsExTree[i].itemsExs[j].isChange == '0';
						}
					}
					for (var i in this.selectedItemsExTree) {
						for (var j in itemsExTree) {
							for (var k in itemsExTree[j].itemsExs) {
								if (this.selectedItemsExTree[i].id == itemsExTree[j].itemsExs[k].id) {
									itemsExTree[j].itemsExs[k].isChange = this.selectedItemsExTree[i].isChange;
									break;
								}
							}
						}
					}
					this.itemsExTree = itemsExTree;
					this.addChange(1);
				}).catch(err => {
					console.log(err.msg);
				})
			},
			getitemsFoodTree() {
				var itemsFoods = this.value.itemsFoods || [];
				this.$axios.post('app/itemsFood/itemsFoodTreeByStoreId', {
					"storeId": uni.getStorageSync('storeId')
				}).then(res => {
					console.log('套餐项目树', res)
					var itemsFoodTree = res.data.itemsFoodTree;

					for (var i in itemsFoodTree) {
						for (var j in itemsFoodTree[i].itemsFoods) {
							itemsFoodTree[i].itemsFoods[j].foodCount = 0;
							itemsFoodTree[i].itemsFoods[j].isManual = 0;
							if (this.title == '修改套餐'){
								
								itemsFoodTree[i].itemsFoods[j].isChange = '1';
							}
								
							else
								itemsFoodTree[i].itemsFoods[j].isChange = '0';
						}
					}
					
					for (var i in this.selectedItemsFoodTree) {
						for (var j in itemsFoodTree) {
							for (var k in itemsFoodTree[j].itemsFoods) {
								if (this.selectedItemsFoodTree[i].id == itemsFoodTree[j].itemsFoods[k].id) {
									itemsFoodTree[j].itemsFoods[k].isChange = this.selectedItemsFoodTree[i].isChange;
									break;
								}
							}
						}
					}
					this.itemsFoodTree = itemsFoodTree;
					this.addChange(1);
				}).catch(err => {
					console.log(err.msg);
				})
			},
			changeTabs(data) {
				console.log(data)
			},
			lookDetail() {
				if (this.showAddList) {
					this.hideAddList = true;
					setTimeout(() => {
						this.showAddList = false;
					}, 300)
				} else {
					this.hideAddList = false;
					this.showAddList = true;

				}
			},
			addChange(state) {
				if (state == 0) { //普通列表改变
					if (this.isWedding) {
						this.compareLSvEW();

					} else {
						this.compareLSvEW();
						this.compareLSvTC();
					}
				} else { //购物车列表改变
					if (this.isWedding) {
						this.compareEWvLS();

					} else {
						this.compareEWvLS();
						this.compareTCvLS();
					}
				}
			},
			compareLSvEW() {
				let itemsExTree = this.itemsExTree,
					selectedItemsExTree = [],
					oldselectedItemsExTree = this.selectedItemsExTree.filter((item) => item.isManual == 1); //过滤自定义添加
				for (var i = 0, len = itemsExTree.length; i < len; i++) {
					for (var j = 0; j < itemsExTree[i].itemsExs.length; j++) {
						if (itemsExTree[i].itemsExs[j].itemCount > 0) {
							//深拷贝
							selectedItemsExTree.push(JSON.parse(JSON.stringify(itemsExTree[i].itemsExs[j])));
						}
					}
				}
				this.selectedItemsExTree = selectedItemsExTree.concat(oldselectedItemsExTree).filter((item) => item.itemCount > 0);
			},
			compareEWvLS() {
				let itemsExTree = this.itemsExTree;
				for (var i = 0, len = itemsExTree.length; i < len; i++) {
					for (var j = 0; j < itemsExTree[i].itemsExs.length; j++) {
						for (var k = 0; k < this.selectedItemsExTree.length; k++) {
							if (itemsExTree[i].itemsExs[j].id == this.selectedItemsExTree[k].id) {

								itemsExTree[i].itemsExs[j].itemCount = this.selectedItemsExTree[k].itemCount;
								break;
							}
						}

					}
				}
				this.selectedItemsExTree = this.selectedItemsExTree.filter((item) => item.itemCount > 0);
				this.itemsExTree = itemsExTree;
			},
			compareLSvTC() {

				let itemsFoodTree = this.itemsFoodTree,
					selectedItemsFoodTree = [],
					oldselectedItemsFoodTree = this.selectedItemsFoodTree.filter((item) => item.isManual == 1); //过滤自定义添加
				for (var i = 0, len = itemsFoodTree.length; i < len; i++) {
					for (var j = 0; j < itemsFoodTree[i].itemsFoods.length; j++) {
						if (itemsFoodTree[i].itemsFoods[j].foodCount > 0) {
							//深拷贝
							selectedItemsFoodTree.push(JSON.parse(JSON.stringify(itemsFoodTree[i].itemsFoods[j])));
						}
					}
				}
				this.selectedItemsFoodTree = selectedItemsFoodTree.concat(oldselectedItemsFoodTree).filter((item) => item.foodCount >
					0);
			},
			compareTCvLS() {
				let itemsFoodTree = this.itemsFoodTree;
				for (var i = 0, len = itemsFoodTree.length; i < len; i++) {
					for (var j = 0; j < itemsFoodTree[i].itemsFoods.length; j++) {
						for (var k = 0; k < this.selectedItemsFoodTree.length; k++) {
							if (itemsFoodTree[i].itemsFoods[j].id == this.selectedItemsFoodTree[k].id) {
								itemsFoodTree[i].itemsFoods[j].foodCount = this.selectedItemsFoodTree[k].foodCount;
								break;
							}
						}

					}
				}
				this.selectedItemsFoodTree = this.selectedItemsFoodTree.filter((item) => item.foodCount > 0)
				this.itemsFoodTree = itemsFoodTree;
				console.log(this.itemsFoodTree)
			},
			//增加项目
			addItem() {
				this.selectedItemsExTree.push({
					isManual: 1,
					itemName: '',
					itemPrice: '',
					itemCount: 1
				});
				this.addChange(1);
			},
			addPackage() {
				this.selectedItemsFoodTree.push({
					isManual: 1,
					foodName: '',
					foodPrice: '',
					foodCount: 1
				})
				this.addChange(1);
			},
			beforeClose() {
				if (this.isWedding) {
					this.$emit('input', this.oldItemsExTree)
				} else {
					this.$emit('input', {
						itemsExTree: this.oldItemsExTree,
						itemsFoodTree: this.oldItemsFoodTree
					});
				}
				this.$emit('update:visible', false)
			},
			submit() {

				//婚庆只有额外项目没有套餐
				if (this.isWedding) {
					this.$emit('input', this.selectedItemsExTree)
				} else {
					this.$emit('input', {
						itemsExTree: this.selectedItemsExTree,
						itemsFoodTree: this.selectedItemsFoodTree
					});
				}
				this.$emit('getTotal', {
					'totalprice': this.totalprice,
					'realMoney': this.realMoney
				});
				this.$emit('update:visible', false);
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		width: 100%;
		height: 100%;
		z-index: 530;
	}

	.shop_cart {
		width: 100%;
		height: 110rpx;
		background: white;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 555;

		.shop_cart_btn {
			position: absolute;
			width: 94rpx;
			height: 94rpx;
			bottom: 40rpx;
			font-size: 94rpx;
			border-radius: 50%;
			box-shadow: 10rpx 10rpx 20rpx #8fc0ff;
			left: 46rpx;
			color: #007AFF;
			z-index: 600;
		}

		.shop_cart_text {
			color: #333333;
			font-size: 28rpx;
			white-space: nowrap;

			.shop_cart_input {
				width: 185rpx;
				padding: 10rpx;
				border: 1px solid #0075FF;
				border-radius: 4rpx;
			}
		}
	}

	.extra-item-content{
			height: calc(100vh - 196rpx);
	}
	
	.package-content {
		height: calc(100vh - 196rpx);
	}

	.extra-item-content_2 {
		height: calc(100vh - 84rpx);
	}

	.extra-item_card {
		position: relative;

	}

	.extra-item_left {
		height: 100%;
		width: 200rpx;
		background: #FAFAFA;

		.extra-item_left_item {
			width: 200rpx;
			color: #888888;
			font-size: 28rpx;
			padding: 30rpx 0;
			text-align: center;
		}

		.extra-item_left_item_choose {
			background: white;
			color: #333333;
		}
	}

	.item_zw_1 {
		height: 139rpx;
	}

	.item_zw_2 {
		height: 100rpx;
	}

	.extra-item_right {
		height: 100%;
		width: calc(100% - 200rpx);
	}

	.add_item2 {
		padding: 7rpx 0rpx !important;
		position: relative;

		.add_item_del {
			position: absolute;
			width: 24rpx;
			font-size: 24rpx;
			height: 28rpx;
			right: -20rpx;
			color: red;
		}
	}

	.add_item,
	.add_item2 {
		padding: 35rpx 20rpx;
		line-height: 30rpx;
		position: relative;

		.add-input-name {
			width: 180rpx;
			padding: 5rpx 0;
			border: 1px solid #0075FF;
			border-radius: 4rpx;
		}

		.add_item_name {
			color: #333333;
			font-size: 28rpx !important;
			margin-right: 20rpx;
		}

		.add_item_price {
			color: #777777;
			font-size: 28rpx !important;
			margin-right: 40rpx;

			.add-input {
				width: 100rpx;
				padding: 5rpx 0;
				border: 1px solid #0075FF;
				border-radius: 4rpx;
				text-align: center;
			}
		}

	}

	@keyframes show {
		0% {
			bottom: -500rpx;
		}

		100% {
			bottom: 90rpx;
		}
	}

	@keyframes hide {
		0% {
			bottom: 90rpx;
		}

		100% {
			bottom: -500rpx;
		}
	}

	.cart_menu_list_show {
		animation: show .5s;
		animation-fill-mode: forwards;
	}

	.cart_menu_list_hide {
		animation: hide .5s;
		animation-fill-mode: forwards;
	}

	.cart_menu_list {
		width: 100%;
		background: white;
		border-radius: 8rpx 8rpx 0px 0px;
		position: absolute;
		bottom: 90rpx;
		left: 0;
		z-index: 540;

		.cart_menu_list_content {
			max-height: 330rpx;
			min-height: 200rpx;

			.cart_menu_list_label {
				font-size: 32rpx;
				line-height: 80rpx;
				border: 1px solid #eee;

				.cart_menu_list_edit {
					font-size: 34rpx;
					color: #2481EE;
				}
			}
		}

		.cart_menu_list_top {
			line-height: 87rpx;
			padding: 0 30rpx;

			.cart_menu_list_total {
				color: #333333;
				font-size: 28rpx;
			}

			.cart_menu_list_edit {
				font-size: 34rpx;
				color: #2481EE;
			}
		}

		.cart_menu_list_empty {
			color: #333333;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>