<template>
	<view class="b-Shopping-Cart">
		<!-- 肯德基 -->
		<template v-if="BrandInfor['brand_id'] == 1">
			<!-- 购物车 -->
			<view class="shoppingcart">
				<view class="left">
					<view class="left-img">
						<image class="img" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''"
							:src="qnyurl('gouwuceicon.png')" mode="aspectFill">
						</image>
						<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
						</u-badge>
					</view>
					<view class="price">
						<text class="yang">￥</text>
						<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
					</view>
				</view>
				<view class="right" @tap="create" :class="[Shoplength > 0?'right2':'']">
					{{Shoplength > 0?'选好了':'未选择商品'}}
				</view>
			</view>
			<!-- 购物车弹框 -->
			<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
				@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
				<view class="popupcontent">
					<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
						<template v-for="(item,index) in MealList">
							<view class="popupcontent-item" :key='index'>
								<!-- 商品 -->
								<view class="name">
									{{item['product_name']}}
								</view>
								<!-- 价格 -->
								<view class="money">
									<view class="price">
										<text class="yang">￥</text>
										<text
											class="amount">{{RetainDecimalPoint(item['pay_price'] * item['num'])}}</text>
									</view>
								</view>
								<!-- 数量 -->
								<view class="quantity">
									<image class="img" :src="qnyurl('jian.png')" mode="" @tap="reducecommodity(item)">
									</image>
									<view class="num">
										{{item['num']}}
									</view>
									<image class="img" :src="qnyurl('jia.png')" mode="" @tap="Addcommodity(item)">
									</image>
								</view>
							</view>
						</template>
					</scroll-view>
				</view>
			</u-popup>
		</template>

		<!-- 瑞幸购物车 -->
		<template v-if="BrandInfor['brand_id'] == 13">
			<!-- 购物车 -->
			<view class="shoppingcart-rx">
				<view class="shoppingcart-rx-left" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''">
					<view class="shoppingcart-rx-left-img">
						<image class="img" :src="qnyurl('shopping.png','rx')" mode="aspectFill">
						</image>
						<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
						</u-badge>
					</view>
					<view class="shoppingcart-rx-left-price">
						<text class="yang">￥</text>
						<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
					</view>
				</view>
				<view class="shoppingcart-rx-right" @tap="create" :class="[Shoplength > 0?'right2':'']">
					{{Shoplength > 0?'结算':'未选择商品'}}
				</view>
			</view>
			<!-- 购物车弹框 -->
			<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
				@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
				<view class="popupcontent-rx">
					<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
						<view class="popupcontent-rx-top">
							<view class="text">
								已选商品
							</view>
							<view class="popupcontent-rx-top-empty" @tap="EMPTY(GetShopInfor['restaurant_id'])">
								<image class="img" :src="qnyurl('qingkong.png','rx')" mode=""></image>
								<text>清空购物车</text>
							</view>
						</view>
						<template v-for="(item,index) in MealList">
							<view class="popupcontent-rx-item" :key='index'>
								<view class="popupcontent-rx-item-commodity">
									<view class="popupcontent-rx-item-commodity-img">
										<image class="img" :src="item['product_img']" mode=""></image>
									</view>
									<view class="popupcontent-rx-item-commodity-infor">
										<!-- 商品 -->
										<view class="popupcontent-rx-item-commodity-infor-name">
											{{item['product_name']}}
										</view>
										<view class="popupcontent-rx-item-commodity-infor-sku">
											{{item['sku'].join('/')}}
										</view>
										<!-- 价格 -->
										<view class="popupcontent-rx-item-commodity-infor-money">
											<view class="popupcontent-rx-item-commodity-infor-money-price">
												<text
													class="popupcontent-rx-item-commodity-infor-money-yang">￥</text>
												<text
													class="popupcontent-rx-item-commodity-infor-money-amount">{{RetainDecimalPoint(item['pay_price'] * item['num'])}}</text>
											</view>
										</view>
									</view>
								</view>

								<!-- 数量 -->
								<view class="quantity">
									<image class="img" :src="qnyurl('reduce.png','rx')" mode=""
										@tap="reducecommodity(item)">
									</image>
									<view class="num">
										{{item['num']}}
									</view>
									<image class="img" :src="qnyurl('add.png','rx')" mode="" @tap="Addcommodity(item)">
									</image>
								</view>
							</view>
						</template>
					</scroll-view>
				</view>
			</u-popup>
		</template>
		
		<!-- 星巴克 -->
		<template v-if="BrandInfor['brand_id'] == 10">
			<!-- 购物车 -->
			<view class="shoppingcart-xbk">
				<view class="shoppingcart-xbk-left" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''">
					<view class="shoppingcart-xbk-left-img">
						<image class="img" :src="qnyurl('shopping.png','xbk')" mode="heightFix">
						</image>
						<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
						</u-badge>
					</view>
					<view class="shoppingcart-xbk-left-price">
						<text class="yang">￥</text>
						<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
					</view>
				</view>
				<view class="shoppingcart-xbk-right" @tap="create" :class="[Shoplength > 0?'right2':'']">
					{{Shoplength > 0?'结算':'未选择商品'}}
				</view>
			</view>
			<!-- 购物车弹框 -->
			<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
				@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
				<view class="popupcontent-xbk">
					<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
						<view class="popupcontent-xbk-top">
							<view class="text">
								已选商品
							</view>
							<view class="popupcontent-xbk-top-empty" @tap="EMPTY(GetShopInfor['restaurant_id'])">
								<image class="img" :src="qnyurl('qingkong.png','xbk')" mode=""></image>
								<text>清空购物车</text>
							</view>
						</view>
						<template v-for="(item,index) in MealList">
							<view class="popupcontent-xbk-item" :key='index'>
								<view class="popupcontent-xbk-item-commodity">
									<view class="popupcontent-xbk-item-commodity-img">
										<image class="img" :src="item['product_img']" mode=""></image>
									</view>
									<view class="popupcontent-xbk-item-commodity-infor">
										<!-- 商品 -->
										<view class="popupcontent-xbk-item-commodity-infor-name">
											{{item['product_name']}}
										</view>
										<view class="popupcontent-xbk-item-commodity-infor-sku">
											{{item['sku'].join('/')}}
										</view>
										<!-- 价格 -->
										<view class="popupcontent-xbk-item-commodity-infor-money">
											<view class="popupcontent-xbk-item-commodity-infor-money-price">
												<text
													class="popupcontent-xbk-item-commodity-infor-money-yang">￥</text>
												<text
													class="popupcontent-xbk-item-commodity-infor-money-amount">{{RetainDecimalPoint((item['pay'] * item['num']))}}</text>
											</view>
										</view>
									</view>
								</view>
		
								<!-- 数量 -->
								<view class="quantity">
									<image class="img" :src="qnyurl('reduce.png','xbk')" mode=""
										@tap="reducecommodity(item)">
									</image>
									<view class="num">
										{{item['num']}}
									</view>
									<image class="img" :src="qnyurl('add.png','xbk')" mode="" @tap="Addcommodity(item)">
									</image>
								</view>
							</view>
						</template>
					</scroll-view>
				</view>
			</u-popup>
		</template>
	
		<!-- 麦当劳 -->
		<template v-if="BrandInfor['brand_id'] == 5">
			<!-- 购物车 -->
			<view class="shoppingcart-mdl">
				<view class="shoppingcart-mdl-left" @tap="Shoplength > 0?shoppingshow = !shoppingshow:''">
					<view class="shoppingcart-mdl-left-img">
						<image class="img" :src="qnyurl('gouwuceicon.png','mdl')" mode="heightFix">
						</image>
						<u-badge type="error" v-if="Shoplength > 0" absolute :value="Shoplength" :offset="[0,5]">
						</u-badge>
					</view>
					<view class="shoppingcart-mdl-left-price">
						<text class="yang">￥</text>
						<text class="amount">{{RetainDecimalPoint(totalPrice)}}</text>
					</view>
				</view>
				<view class="shoppingcart-mdl-right theme-Union-Class-5-1" @tap="create" :class="[Shoplength > 0?'right2':'']">
					{{Shoplength > 0?'结算':'未选择商品'}}
				</view>
			</view>
			<!-- 购物车弹框 -->
			<u-popup :round="15" :overlayStyle="{bottom:'100rpx'}" bottom="100rpx" closeOnClickOverlay
				@close="shoppingshow = false" :show="shoppingshow" mode="bottom">
				<view class="popupcontent-mdl">
					<scroll-view :scroll-top="0" scroll-y style="height: 642rpx;">
						<view class="popupcontent-mdl-top">
							<view class="text">
								已选商品
							</view>
							<view class="popupcontent-mdl-top-empty" @tap="EMPTY(GetShopInfor['restaurant_id'])">
								<image class="img" :src="qnyurl('qingkong.png','xbk')" mode=""></image>
								<text>清空购物车</text>
							</view>
						</view>
						<template v-for="(item,index) in MealList">
							<view class="popupcontent-mdl-item" :key='index'>
								<view style="display: flex;justify-content:space-between;margin-bottom: 15rpx;">
									<view class="popupcontent-mdl-item-commodity">
										<view class="popupcontent-mdl-item-commodity-img">
											<image class="img" :src="item['product_img']" mode=""></image>
										</view>
										<view class="popupcontent-mdl-item-commodity-infor">
											<!-- 商品 -->
											<view class="popupcontent-mdl-item-commodity-infor-name">
												{{item['product_name']}}
											</view>
											<!-- 价格 -->
											<view class="popupcontent-mdl-item-commodity-infor-money">
												<view class="popupcontent-mdl-item-commodity-infor-money-price">
													<text
														class="popupcontent-mdl-item-commodity-infor-money-yang">￥</text>
													<text
														class="popupcontent-mdl-item-commodity-infor-money-amount">{{RetainDecimalPoint((item['pay_price'] * item['num']))}}</text>
												</view>
											</view>
										</view>
									</view>
									<!-- 数量 -->
									<view class="quantity">
										<view :class="`Reduce-Button theme-Union-Class-${BrandInfor['brand_id']}-2`" @tap.stop="reducecommodity(item)">
											<view>-</view>
										</view>
										<view class="num">
											{{item['num']}}
										</view>
										<view
										 :class="`Add-Button theme-Union-Class-${BrandInfor['brand_id']}-1`"
										 @tap.stop="Addcommodity(item)">
											<view>+</view>
										</view>
									</view>
								</view>
								<view class="popupcontent-mdl-item-commodity-infor-sku">
									{{item['sku']}}
								</view>
							</view>
						</template>
					</scroll-view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	// vuex
	// import {
	// 	mapGetters,
	// 	mapMutations,
	// 	mapActions
	// } from 'vuex';
	// 混入
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	export default {
		mixins: [mixin,restaurantmixins],
		name: "b-Shopping-Cart",
		props:{
			tabbar:{
				type:Array,
				default:()=>[],
			}
		},
		data() {
			return {
				// 购物车
				MealList: [],
				// 购物车合计
				totalPrice: 0,
				// 购物车弹框显示变量
				shoppingshow: false,
			};
		},
		computed: {
			// ...mapGetters({
			// 	// 获取品牌Id
			// 	BrandInfor: 'shopping/BrandInfor',
			// 	// 获取餐厅信息
			// 	GetShopInfor: 'shopping/GetShopInfor',
			// 	// 获取购物车
			// 	GetCartList: 'shopping/GetCartList',
			// }),
			//当前商店购物信息
			// shopCart() {
			// 	try {
			// 		return {
			// 			...this['GetCartList']
			// 		};
			// 	} catch (e) {
			// 		return {}
			// 	}
			// },

			// 获取购物车长度
			Shoplength() {
				if (this['MealList']['length'] <= 0) {
					this['shoppingshow'] = false;
				}
				return this['MealList']['length'];
			}
		},
		watch: {
			GetCartList: {
				deep: true,
				immediate: true,
				handler(val) {
					console.log(val, 'GetCartList');
					this.initCategoryNum();
				}
			}
		},
	
		methods: {
			/**
			 * @本地数据与当前餐厅数格式化
			 * */ 
			initCategoryNum() {
				console.log(this['tabbar'],'-----------');
				// 因为该方法是每次商品数据变更都会重新加载,所以不用考虑是否会重复添加问题
				if (this['tabbar']['length'] <= 0) return;
				console.log(this.GetCartList,'进入initCategoryNum');
				console.time()
				// 先将菜单数据整合成一个数组
				let shoparr = [];
				let newArr = [];
				let Price = 0;
				this['tabbar'].map(item => {
					shoparr.push(...item['foods'])
				});
				// 将所有商品的id取出
				let commodityids = shoparr.map(item => item['product_id']);
				// 循环购物车
				console.log(Object.keys(this['GetCartList']),'*********');
				let list = Object.keys(this['GetCartList']);
				console.log(list,'进入initCategoryNum');
				for (let i = 0; i < list['length']; i++) {
					console.log('*********');
					// 将item转为数字
					let id = +Object.keys(this['GetCartList'])[i];
					// // 在commodityids中查找item
					let index = commodityids.indexOf(id);
					let item = {};
					if (index != -1) {
						item = {
							// ...this['GetCartList'][id],
							...shoparr[index],
							num: this['GetCartList'][id]['num'],
							sku: this['GetCartList'][id]['sku'],
							sku_code: this['GetCartList'][id]['sku_code'],
							restaurant_id: this['GetShopInfor']['restaurant_id'],
							// 加入购物车时会根据商品原价与算选规格价格计算得到规格价格加上原价的实际价格
							pay: this['GetCartList'][id]['pay'] || 0
						};
						
						newArr.push(item);
						if(this['BrandInfor']['brand_id'] == 10){
							Price += ((+item['pay']) * item['num']);
						}else{
							Price += ((+item['pay_price']) * item['num']);
						}
						// 此处逻辑是将同商品下的不同规格数据取出来
						if (this['GetCartList'][id]['Differentskulist'] && this['GetCartList'][id]['Differentskulist'][
								'length'
							] > 0) {
							for (let i = 0; i < this['GetCartList'][id]['Differentskulist']['length']; i++) {
								let _item = this['GetCartList'][id]['Differentskulist'][i];
								console.log(_item);
								_item = {
									...shoparr[index],
									num: _item['num'],
									sku: _item['sku'],
									sku_code: _item['sku_code'],
									// 加入购物车时会根据商品原价与算选规格价格计算得到规格价格加上原价的实际价格
									pay:_item['pay']
								};
								this['GetCartList'][id]['Differentskulist'][i] = _item;
							};
							newArr.push(...this['GetCartList'][id]['Differentskulist']);
							if(this['BrandInfor']['brand_id'] == 10){
								Price += this['GetCartList'][id]['Differentskulist'].map(e => e['pay'] * e['num'])
									.reduce((a, b) => a + b);
							}else{
								Price += this['GetCartList'][id]['Differentskulist'].map(e => e['pay_price'] * e['num'])
									.reduce((a, b) => a + b);
							}
						}

					} else {
						// 后期处理存在购物车但是店铺已下架商品
					}
				};
				console.log(newArr,'newArrnewArrnewArrnewArr');
				this['MealList'] = newArr;
				this['totalPrice'] = Price;
				console.timeEnd()
				console.log('结束initCategoryNum');
			},


			/**
			 * @添加数量/增加商品
			 * */
			Addcommodity(item) {
				console.log(item);
				console.log(this,'*-*-*')
				this.ADD_CART({
					commodity: item
				})
			},

			/**
			 * @减少/删除商品
			 * */
			reducecommodity(item) {
				this.REDUCE_CART(item)
			},

			/**
			 * @创建订单页面
			 * */
			create() {
				if (this['Shoplength'] <= 0) return;
				this['$parent']['loading'] = true;
				let self = this;
				self.SETREPLACE(self['MealList']);
				switch (this['BrandInfor']['brand_id']) {
					case 1:
						uni.navigateTo({
							url: `/pages/restaurant/order/orders-settlement/orders-settlement`,
							success: () => {
								this['$parent']['loading'] = false;
							}
						});
						break;
					case 5:
						uni.navigateTo({
							url: `/pages/restaurant/order/orders-settlement/orders-settlement`,
							success: () => {
								this['$parent']['loading'] = false;
							}
						});
						break;
					case 13:
						uni.navigateTo({
							url: `/pages/restaurant/order/orders-settlement/rx-orders-settlement`,
							success: () => {
								this['$parent']['loading'] = false;
							}
						});
						break;
					case 10:
						uni.navigateTo({
							url: `/pages/restaurant/order/orders-settlement/xbk_orders_settlement`,
							success: () => {
								this['$parent']['loading'] = false;
							}
						});
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	// 肯德基
	.shoppingcart {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 20075;
		background-color: #333333;
		.left {
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;
			padding-left: 50rpx;

			&-img {
				position: relative;

				.img {
					width: 65rpx;
					height: 65rpx;
					margin-right: 25rpx;
				}
			}


			.price {
				color: #ffffff;
				display: flex;
				align-items: baseline;

				.yang {
					font-size: 26rpx;
				}

				.amount {
					font-size: 50rpx;
				}
			}
		}

		// 未选择商品样式
		.right {
			width: 235rpx;
			height: 100rpx;
			background: #DFDFDF;
			color: #333333;
			text-align: center;
			line-height: 100rpx;
		}

		// 已选择商品样式
		.right2 {
			background: #C63836 !important;
			color: #ffffff !important;
		}
	}

	.popupcontent {
		width: 100%;
		// padding-bottom: calc();
		height: 642rpx;
		background-color: #ffffff;

		&-item {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			box-sizing: border-box;

			.name {
				font-size: $FONTSIZE26;
				max-width: 336rpx;
				min-width: 336rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;

			}

			.money {
				color: $THEMECOLOR1;
				max-width: 115rpx;
				min-width: 115rpx;
				text-align: center;

				.yang {
					font-size: $FONTSIZE22;
				}

				.price {
					font-size: $FONTSIZE30;
				}
			}

			.quantity {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $FONTSIZE36;

				.num {
					max-width: 100rpx;
					min-width: 100rpx;
					text-align: center;
				}

				.img {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

	}

	// 瑞幸
	.shoppingcart-rx {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 20075;
		background-color: #ffffff;
		align-items: center;
		padding: 0 32rpx;

		&-left {
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;

			&-img {
				position: relative;

				.img {
					width: 65rpx;
					height: 65rpx;
					margin-right: 25rpx;
				}
			}


			&-price {
				color: #000000;
				display: flex;
				align-items: baseline;

				.yang {
					font-size: 26rpx;
				}

				.amount {
					font-size: 50rpx;
				}
			}
		}

		&-right {
			width: 225rpx;
			height: 77rpx;
			background: #0122A4;
			box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
			border-radius: 48rpx;
			text-align: center;
			color: #ffffff;
			line-height: 77rpx;
		}
	}

	.popupcontent-rx {
		width: 100%;
		// padding-bottom: calc();
		height: 642rpx;
		background-color: #ffffff;

		.popupcontent-rx-top {
			width: 100%;
			height: 87rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;

			.text {
				color: #666666;
			}

			&-empty {
				color: #666666;
				display: flex;
				align-items: center;
				padding: 15rpx 0 15rpx 15rpx;

				.img {
					width: 29rpx;
					height: 31rpx;
					margin-right: 15rpx;
				}
			}
		}

		&-item {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			box-sizing: border-box;

			&-commodity {
				display: flex;

				&-img {
					width: 120rpx;
					height: 120rpx;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				&-infor {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 22rpx;

					&-name {
						font-size: $FONTSIZE30;
						max-width: 336rpx;
						min-width: 336rpx;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					&-sku {
						color: #999999;
						font-size: $FONTSIZE22;
					}

					&-money {
						color: $THEMECOLOR1;
						max-width: 115rpx;
						min-width: 115rpx;
						text-align: center;
						color: #FF780F;

						&-yang {
							font-size: $FONTSIZE22;
						}

						&-price {
							display: flex;
							align-items: center;
							font-size: $FONTSIZE30;
						}
					}
				}



			}

			.quantity {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $FONTSIZE36;

				.num {
					max-width: 100rpx;
					min-width: 100rpx;
					text-align: center;
				}

				.img {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}

	// 星巴克
	.shoppingcart-xbk {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 20075;
		background-color: #ffffff;
		align-items: center;
		padding: 0 32rpx;
	
		&-left {
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;
	
			&-img {
				position: relative;
	
				.img {
					width: 65rpx;
					height: 65rpx;
					margin-right: 25rpx;
				}
			}
	
	
			&-price {
				color: #000000;
				display: flex;
				align-items: baseline;
	
				.yang {
					font-size: 26rpx;
				}
	
				.amount {
					font-size: 50rpx;
				}
			}
		}
	
		&-right {
			width: 225rpx;
			height: 77rpx;
			background: #00AF66;
			box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
			border-radius: 48rpx;
			text-align: center;
			color: #ffffff;
			line-height: 77rpx;
		}
	}
	
	.popupcontent-xbk {
		width: 100%;
		// padding-bottom: calc();
		height: 642rpx;
		background-color: #ffffff;
	
		.popupcontent-xbk-top {
			width: 100%;
			height: 87rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
	
			.text {
				color: #666666;
			}
	
			&-empty {
				color: #666666;
				display: flex;
				align-items: center;
				padding: 15rpx 0 15rpx 15rpx;
	
				.img {
					width: 29rpx;
					height: 31rpx;
					margin-right: 15rpx;
				}
			}
		}
	
		&-item {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			box-sizing: border-box;
	
			&-commodity {
				display: flex;
	
				&-img {
					width: 120rpx;
					height: 120rpx;
	
					.img {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
	
				&-infor {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 22rpx;
	
					&-name {
						font-size: $FONTSIZE30;
						max-width: 336rpx;
						min-width: 336rpx;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
	
					&-sku {
						color: #999999;
						font-size: $FONTSIZE22;
					}
	
					&-money {
						color: $THEMECOLOR1;
						max-width: 115rpx;
						min-width: 115rpx;
						text-align: center;
						color: #FF780F;
	
						&-yang {
							font-size: $FONTSIZE22;
						}
	
						&-price {
							display: flex;
							align-items: center;
							font-size: $FONTSIZE30;
						}
					}
				}
	
	
	
			}
	
			.quantity {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $FONTSIZE36;
	
				.num {
					max-width: 100rpx;
					min-width: 100rpx;
					text-align: center;
				}
	
				.img {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}

	// 肯德基
	.shoppingcart-mdl {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 20075;
		background-color: #ffffff;
		align-items: center;
		padding: 0 32rpx;
	
		&-left {
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;
	
			&-img {
				position: relative;
	
				.img {
					width: 65rpx;
					height: 65rpx;
					margin-right: 25rpx;
				}
			}
	
	
			&-price {
				color: #000000;
				display: flex;
				align-items: baseline;
	
				.yang {
					font-size: 26rpx;
				}
	
				.amount {
					font-size: 50rpx;
				}
			}
		}
	
		&-right {
			width: 225rpx;
			height: 77rpx;
			background: #00AF66;
			box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
			border-radius: 48rpx;
			text-align: center;
			color: #ffffff;
			line-height: 77rpx;
		}
	}
	
	.popupcontent-mdl {
		width: 100%;
		// padding-bottom: calc();
		height: 642rpx;
		background-color: #ffffff;
	
		.popupcontent-mdl-top {
			width: 100%;
			height: 87rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
	
			.text {
				color: #666666;
			}
	
			&-empty {
				color: #666666;
				display: flex;
				align-items: center;
				padding: 15rpx 0 15rpx 15rpx;
	
				.img {
					width: 29rpx;
					height: 31rpx;
					margin-right: 15rpx;
				}
			}
		}
	
		&-item {
			width: 100%;
			margin-bottom: 20rpx;
			padding: 32rpx;
			box-sizing: border-box;
	
			&-commodity {
				display: flex;
	
				&-img {
					width: 120rpx;
					height: 120rpx;
	
					.img {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
	
				&-infor {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 22rpx;
	
					&-name {
						font-size: $FONTSIZE30;
						max-width: 336rpx;
						min-width: 336rpx;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
	
					&-sku {
						color: #999999;
						font-size: $FONTSIZE22;
					}
	
					&-money {
						color: $THEMECOLOR1;
						max-width: 115rpx;
						min-width: 115rpx;
						text-align: center;
						color: #FF780F;
	
						&-yang {
							font-size: $FONTSIZE22;
						}
	
						&-price {
							display: flex;
							align-items: center;
							font-size: $FONTSIZE30;
						}
					}
				}
	
	
	
			}
	
			.quantity {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $FONTSIZE36;
	
				.num {
					max-width: 100rpx;
					min-width: 100rpx;
					text-align: center;
				}
	
				.img {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}
</style>
