<template>
	<div class="cartStyle" v-if="!isloading" :style="{ height: contentHeight }">
		<view style="
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 15rpx;
      ">
			<Text class="grid-text" v-if='IsEducation!=1'>商品库存有限，请尽快下单哦</Text>
			<Text class="grid-text" v-if='IsEducation==1'>共{{list[0].GoodsList.length?list[0].GoodsList.length:'0'}}个课程</Text>
			<Text @click="edit" v-if="editType == false && list[0].GoodsList.length>0" class="grid-text_r">编辑</Text>
			<Text @click="edit" v-if="editType == true" class="grid-text_r">完成</Text>
		</view>
		<view style="width: 100%; height: 30rpx; background: #f7f7f7; margin: 20rpx 0;"></view>
		<u-empty v-if="emptyshow == true" text="购物车还是空的哦" mode="car"></u-empty>

		<view v-if="list.length > 0" style="height: calc(100vh - 60px-30px-35px-20px);width: calc(100vw);overflow: hidden;padding-top: 10px;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" :style="{ height: '100%' }">
				<template v-if="list.length > 0 && emptyshow==false">
					<view class="cartList" :style="{ 'margin-bottom': listbottom }" v-for="(c, i) in list" :key="i">
						<view @click.stop="abc()" style=" padding: 0 12px 12px 12px; border-bottom: 1rpx solid #f5f5f5; width: 100%;">
							<u-checkbox-group @change="mch_SelectAll(c.checked, i)">
								<u-checkbox v-model="c.checked" shape="circle" :active-color="mc">{{ c.MallName }}
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view :class=" u.TenantId!=27?'cartList_item':'cartList_item2'" v-for="(item, index) in c.GoodsList" :key="index"
						 @click="btnclick(item,index,i)">
							<view @click.stop="abc()" style="width: 40px;text-align: center;" v-if="(item.GoodsStatus == 1 && item.InventoryNum!=0 && IsEducation!=1) || (editType == true&& IsEducation!=1)">
								<u-checkbox-group @change="clickcheckbox(item.checked, item.Price, index, i)">
									<u-checkbox v-model="item.checked" shape="circle" :active-color="mc"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view @click.stop="abc()" style="width: 40px;text-align: center;" v-if="(item.GoodsStatus == 1 && IsEducation==1) || (editType == true && IsEducation==1)">
								<u-checkbox-group @change="clickcheckbox(item.checked, item.Price, index, i)">
									<u-checkbox v-model="item.checked" shape="circle" :active-color="mc"></u-checkbox>
								</u-checkbox-group>
							</view>

							<view class="invalid" :style="{ background: mc }" v-if="item.GoodsStatus != 1 && editType == false">
								<Text style="color: #fff; width: 22px;font-size: 20rpx;">失效</Text>
							</view>
							<view class="invalid" :style="{ background: mc }" v-if="item.InventoryNum == 0 && editType == false && IsEducation!=1">
								<Text style="color: #fff; width: 22px;font-size: 20rpx;">售馨</Text>
							</view>
							<!-- 布局修改 -->
							<view class="cent-box">
								<image :src="item.CoverImage" v-if='IsEducation!=1' mode="aspectFill" style="width: 150rpx;height: 150rpx;margin-left: 30rpx;border-radius: 5px;"
								 @click.native.stop="clickHandler(item.GoodsId)" />
								<image :src="item.CoverImage" v-if='IsEducation==1' mode="aspectFill" style="width: 116px;height: 64px;margin-left: 30rpx;border-radius: 5px;box-shadow:0 4px 10px 1px #D2D2D2;"
								 @click.native.stop="clickHandler2(item.GoodsId)" />
								<view :class="u.TenantId!=27?'item-r':'item-r2' " :style="{'width':IsEducation!=1?'440rpx':item_r,'height':IsEducation!=1&&u.TenantId!=27?'150rpx':u.TenantId==27?'auto':'65px', }">
									<view :class="IsEducation!=1?'item-r-n':'item-r-n2'">
										<view v-if="item.MarketingLogo.iswords && item.MarketingLogo.iswords==1&& item.MarketingLogo.words!=''" class="Logo"
										 :style="{color: item.MarketingLogo.wordsColor,background:item.MarketingLogo.wordsBack ,}">
											{{item.MarketingLogo.words}}
										</view>

										<image v-if="item.MarketingLogo.iswords&&item.MarketingLogo.iswords==2&& item.MarketingLogo.ico!=''" mode="heightFix"
										 :src="item.MarketingLogo.ico" style=" height: 12px;margin-right: 5px" />
										{{ item.GoodsName}}
									</view>
									<view style="width: 440rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" v-if="IsEducation!=1">
										<Text v-for="(attr, inde2x) in item.SpecificationList" :key="inde2x" style="color: #a0a09d;font-size: 20rpx;margin-right: 5rpx;">
											{{ attr}}
										</Text>
									</view>
									<view style="max-width: 440rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 2px;"
									 @click.native.stop="goUrl(item.FreeShippingUrl)" v-if="item.FreeShippingName !=null&&IsEducation!=1 && (item.FreeShippingFullMoneyPinkage>0 || item.FreeShippingFullNumPinkage>0)">
										<view style="color: #FF4048;background: #fdf6ec;padding: 0 5px;display: inline-block;">
											<Text style="font-size: 20rpx;margin-right: 5rpx;">
												{{item.FreeShippingName !=null ?item.FreeShippingName+':':''}}
												<text v-if="item.FreeShippingFullMoneyPinkage==0 && item.FreeShippingFullNumPinkage>0">{{item.FreeShippingFullNumPinkage}}件包邮</text>
												<text v-if="item.FreeShippingFullMoneyPinkage>0 && item.FreeShippingFullNumPinkage==0">满{{item.FreeShippingFullMoneyPinkage}}元包邮</text>
											</Text>
										</view>
									</view>
									<!-- 新增上课时间 -->
									<Text v-if='u.TenantId==27&&item.EduData.ClassTime' style="color: #a0a09d;font-size: 20rpx;margin-right: 5rpx;">
										上课时间:{{item.EduData.ClassTime}}
									</Text>
									<!-- 课程数量 -->
									<Text v-if='u.TenantId==27&&item.EduData.ClassNum' style="color: #a0a09d;font-size: 20rpx;margin-right: 5rpx;">
										课程数量:{{item.EduData.ClassNum}}次
									</Text>

									<view @click.stop="abc()" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
										<Text style="font-size: 30rpx;" :style="{ color: pricecolor }">
											￥<Text style="40rpx">{{ item.Price }}</Text>
										</Text>

										<u-number-box v-if='IsEducation!=1&&u.TenantId!=27' v-model="item.Number" :min="1" :max="item.InventoryNum"
										 @change="valChange(i, index, item.Number, item.Price, $event)">
										</u-number-box>
									</view>
									<!-- 新增绑定物品 -->
									<view v-if='u.TenantId==27' v-for="(attr2, inde4x) in item.GoodsRelevanceList" :key="inde4x">
										<Text v-if='attr2.RelevanceName' style="color: #a0a09d;font-size: 20rpx;margin-right: 5rpx;">
											已选物品:{{attr2.RelevanceName}}
										</Text>
										<view v-if='attr2.RelevancePrice' style="font-size: 30rpx;" :style="{ color: pricecolor }">
											￥<Text style="40rpx">{{attr2.RelevancePrice}}</Text>
										</view>
									</view>
									<!-- 新增绑定物品 -->
									<Text v-if="item.GoodsStatus != 1 && editType == false&&IsEducation!=1" style="font-size: 20rpx;color:#a0a09d ;">失效原因：商品下架或者库存不足</Text>
									<Text v-if="item.GoodsStatus != 1 && editType == false&&IsEducation==1" style="font-size: 20rpx;color:#a0a09d ;">失效原因：课程下架</Text>
								</view>
							</view>
							<!-- 布局修改 -->
						</view>
					</view>

				</template>
			</scroll-view>
		</view>
		<view class="box_bottom" :style="{'margin-bottom':bottommargin}">
			<div style="margin-left: 30rpx;">
				<u-checkbox-group @change="SelectAll">
					<u-checkbox v-model="allchecked" shape="circle" :active-color="mc">全选</u-checkbox>
				</u-checkbox-group>
				<Text style="font-size: 30rpx;" :style="{ color: pricecolor }" v-if="editType == false">￥{{ TotalPrice }}</Text>
			</div>
			<div class="bottom_btn" v-if="!editType">
				<u-button size="80" :ripple="true" shape="circle" @click="settlement" :custom-style="{
						backgroundColor: mc,
						height: '80rpx',
						color: '#FFF',
						fontSize: '14px'
					}">
					去结算({{ checkCount }})
				</u-button>
			</div>
			<u-button v-if="editType" size="80" :ripple="true" shape="circle" @click="delete_btn" :custom-style="{
					backgroundColor: mc,
					height: '80rpx',
					color: '#FFF',
					fontSize: '14px',
					marginRight: '12px'
				}">
				删除
			</u-button>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<tabbars></tabbars>
	</div>
</template>
<script>
	import tabbars from '@/components/tabbar/index';
	import auth from "@/components/auth/index.vue";
	export default {
		data() {
			return {
				isloading: false,
				pageTitle: '购物车',
				navHeight: 0,
				contentHeight: 0,
				cstyle: {},
				emptyshow: false,
				allchecked: false,
				TotalPrice: 0, //总价格
				bottommargin: 0,
				listbottom: 0,
				editType: false,
				list: [],
				cart_id_list: [],
				mc: '',
				pricecolor: '',
				secondary: '',
				checkCount: 0,
				msg: {
					pageIndex: 1,
					pageSize: 50,
					Name: ''
				},
				u: {},
				showAuth: false,
				IsEducation: 0, //1是0否是网课模式
				item_r: 0, //课程模式下的宽度
			};
		},
		created() {},
		components: {
			tabbars,
			auth
		},
		onLoad() {
			this.navHeight = this.$navHeight - 2;
			this.mc = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.pricecolor = this.$uiConfig.pricecolor;
			this.cstyle = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').cat_style : [];
			this.IsEducation = uni.getStorageSync('basedata') ?
				(uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall
					.setting.mallStyle.IsEducation : 0) :
				0;
			let windowWidth = this.$utils.SystemInfo().windowWidth;
			this.item_r = (windowWidth - 5 - 40 - 116 - 15 - 10) + 'px'
			if (this.cstyle.cat_style == '4') {}
		},
		onShow() {
			this.u = uni.getStorageSync('mall_UserInfo');
			if (!this.u) {
				this.u = {
					nickName: '未登录',
					avatarUrl: ''
				};
				this.showAuth = true;
			} else {
				this.init();
				this.TotalPrice = 0;
				this.checkCount = 0;
			}
		},
		mounted() {
			let currentPages = getCurrentPages();
			let c = this.$uiConfig.is_bang ? 80 : 52;
			this.bottommargin = c - 2 + 'px';
			this.listbottom = c + 44 + 'px';
			this.contentHeight = this.$utils.calcContentHeight(c - 42) + 'px';
			let u = '/' + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
			pages.forEach(x => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync('mall_UserInfo');
				this.showAuth = false;
				this.init()
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			goHome() {
				uni.redirectTo({
					url: '/pages/index/main'
				});
			},
			init() {
				uni.showNavigationBarLoading();
				this.isloading = true;
				if (this.IsEducation == 1) {
					this.msg.GoodsClassify = 2
				}
				this.request2({
						url: '/api/AppletOrder/GetGoodsShoppingCartPageList',
						data: this.msg
					},
					res => {
						this.loading = false;
						if (res.resultCode == 1) {
							uni.hideNavigationBarLoading();
							this.isloading = false;
							if (res.data.pageData.length > 0) {
								let list = res.data.pageData;
								let empty = true
								list.forEach(x => {
									x.checked = false;
									x.GoodsList.forEach(j => {
										j.MarketingLogo = JSON.parse(j.MarketingLogo)
										j.checked = false;
										j.id = j.Id;
									});
									if (x.GoodsList.length > 0) {
										empty = false
									}
								});
								this.emptyshow = empty
								this.list = list;

							} else {
								this.list = [];
							}
						}
						uni.hideNavigationBarLoading();
					}
				);
			},
			btnclick(item, index, i) { //点击最外层做的事
				if ((item.GoodsStatus == 1 && item.InventoryNum != 0 && this.IsEducation != 1) || (this.editType ==
						true && this.IsEducation != 1)) {
					this.list[i].GoodsList[index].checked = !this.list[i].GoodsList[index].checked
					this.clickcheckbox(item.checked, item.Price, index, i)
				} else if ((item.GoodsStatus == 1 && this.IsEducation == 1) || (this.editType == true && this
						.IsEducation == 1)) {
					this.list[i].GoodsList[index].checked = !this.list[i].GoodsList[index].checked
					this.clickcheckbox(item.checked, item.Price, index, i)
				}
			},
			//单项点击
			clickcheckbox(checked, price, index, i) {
				if (checked == true) {
					this.checkCount += 1;
					let goods_list_all = true; //判断该商场是否全选
					this.list[i].GoodsList.forEach(x => {
						if (this.editType == true) {
							if (x.checked == false) {
								goods_list_all = false;
							}
						} else {
							if (x.checked == false) {
								goods_list_all = false;
							}
						}
					});
					if (goods_list_all == true) {
						this.list[i].checked = true;
					}
					let list_all = true; //判断所有商场是否全选
					this.list.forEach(x => {
						if (x.checked == false) {
							list_all = false;
						}
					});
					if (list_all == true) {
						this.allchecked = true;
					}
					if (this.editType == true) {
						let obj = {
							mch_id: 0,
							id: this.list[i].GoodsList[index].id
						};
						this.cart_id_list.push(obj);
					}
				} else {
					this.checkCount -= 1;
					this.allchecked = false;
					let goods_list_all = true; //判断该商场是否全选
					this.list[i].GoodsList.forEach(x => {
						if (x.checked == false) {
							goods_list_all = false;
						}
					});
					if (goods_list_all == false) {
						this.list[i].checked = false;
					}
					if (this.editType == true) {
						this.cart_id_list.forEach((x, j) => {
							if (x.id == this.list[i].GoodsList[index].id) {
								this.cart_id_list.splice(j, 1);
							}
						});
					}
				}
				this.calcSumPrice();
			},
			mch_SelectAll(checked, i) {
				if (checked == true) {
					let add_cartlist = [];
					let new_statusnum = 0;
					this.list[i].GoodsList.forEach(x => {
						if (x.GoodsStatus == 1 && x.InventoryNum > 0) {
							if (x.checked == false) {
								x.checked = true;
								new_statusnum++;
							}
						}
						//编辑时候的商城全选
						if (this.editType == true) {
							if (this.cart_id_list.length > 0) {
								this.cart_id_list.forEach(z => {
									if (x.id != z.id) {
										let obj = {
											mch_id: 0,
											id: x.id
										};
										add_cartlist.push(obj);
									}
								});
							} else {
								let obj = {
									mch_id: 0,
									id: x.id
								};
								add_cartlist.push(obj);
							}
						}
					});
					this.cart_id_list = this.cart_id_list.concat(add_cartlist);
					let list_all = true; //判断所有商场是否全选
					this.list.forEach(x => {
						if (x.checked == false) {
							list_all = false;
						}
					});
					if (list_all == true) {
						this.allchecked = true;
					}
					this.checkCount += new_statusnum;
				} else {
					let new_statusnum = 0;
					this.list[i].GoodsList.forEach(x => {
						if (x.GoodsStatus == 1) {
							if (x.checked == true) {
								new_statusnum++;
								x.checked = false;
							}
						}
						//编辑时候的商城全选
						this.cart_id_list.forEach((z, m) => {
							if (x.id == z.id) {
								this.cart_id_list.splice(m, 1);
							}
						});
					});
					this.allchecked = false;
					this.checkCount -= new_statusnum;
				}
				this.calcSumPrice();
			},
			SelectAll() {
				if (this.allchecked == true) {
					this.checkCount = 0;
					this.TotalPrice = 0;
					this.cart_id_list = [];
					this.list.forEach(x => {
						x.checked = true;
						x.GoodsList.forEach(j => {
							if (j.GoodsStatus == 1 && j.InventoryNum > 0) {
								j.checked = true;
								this.checkCount++;
							}
							//编辑的时候
							if (this.editType == true) {
								this.cart_id_list.push({
									mch_id: 0,
									id: j.id
								});
							}
						});
					});
				} else {
					this.checkCount = 0;
					this.TotalPrice = 0;
					this.cart_id_list = [];
					this.list.forEach(x => {
						x.checked = false;
						x.GoodsList.forEach(j => {
							j.checked = false;
						});
					});
				}
				this.calcSumPrice();
			},
			valChange(i, index, Number, p, e) {
				let value = parseFloat(e.value);
				let price = parseFloat(p);
				if (Number > value) {
					this.list[i].GoodsList[index].Number = value;
					if (this.list[i].GoodsList[index].checked == true) {}
				} else if (value > Number) {
					this.list[i].GoodsList[index].Number = value;
					if (this.list[i].GoodsList[index].checked == true) {}
				}
				this.calcSumPrice();
			},
			//计算总价格
			calcSumPrice() {
				let tempPrice = 0;
				this.TotalPrice = 0;
				this.list.forEach(x => {
					x.GoodsList.forEach(j => {
						if (j.checked) {
							tempPrice += parseFloat(j.Price * j.Number);
							//是否有捆绑商品
							if (j.GoodsRelevanceList && j.GoodsRelevanceList.length > 0) {
								j.GoodsRelevanceList.forEach(qitem => {
									tempPrice += parseFloat(qitem.RelevancePrice);
								})
							}
						}
					});
				});
				this.TotalPrice = parseFloat(tempPrice.toFixed(2));
			},
			edit() {
				this.editType = !this.editType;
				this.allchecked = false;
				this.TotalPrice = 0;
				this.checkCount = 0;
				this.cart_id_list = [];
				let list = this.list;
				list.forEach(x => {
					x.checked = false;
					x.GoodsList.forEach(j => {
						j.checked = false;
					});
				});
			},
			delete_btn() {
				if (this.cart_id_list.length > 0) {
					uni.showNavigationBarLoading();
					let arr = [];
					this.cart_id_list.forEach(item => {
						arr.push(item.id);
					})
					this.request2({
							url: '/api/AppletOrder/DelGoodsShoppingCartInfo',
							data: {
								ShoppingCartIdList: arr
							}
						},
						res => {
							if (res.resultCode == 1) {
								this.init();
								this.TotalPrice = 0;
								this.editType = false;
								this.allchecked = false;
								this.checkCount = 0;
							}
							uni.hideNavigationBarLoading();
						}
					);
				} else {
					uni.showToast({
						title: '请选择需要删除的商品',
						position: 'bottom',
						icon: 'none',
						duration: 2000
					});
				}
			},
			settlement() {
				let ShoppingCartIdList = [];
				if (this.checkCount > 0) {
					let forms = {};
					this.list.forEach(y => {
						let good = {
							DetailList: [],
							Use_Integral: 0,
							User_Coupon_Id: 0,
							DeliveryMethod: 0,
							AddressId: 0,
						};
						y.GoodsList.forEach(x => {
							if (x.checked) {
								ShoppingCartIdList.push(x.Id)
								let g = {
									GoodsId: x.GoodsId,
									Number: x.Number,
									SpecificationSort: x.SpecificationSort,
								};
								good.DetailList.push(g);
							}
						});
						forms = good;
					});
					if (this.IsEducation != 1) {
						if(this.u.TenantId!=27) {
							uni.navigateTo({
								url: '/pages/order-submit/order-submit?formData=' + encodeURIComponent(JSON.stringify(
									forms)) + '&IsFormShoppingCart=1&ShoppingCartIdList=' + JSON.stringify(
									ShoppingCartIdList)
							});
						} else {
							uni.navigateTo({
								url: '/pages/order-submit/order-submit2?formData=' + encodeURIComponent(JSON.stringify(
									forms)) + '&IsFormShoppingCart=1&ShoppingCartIdList=' + JSON.stringify(
									ShoppingCartIdList)
							});
						}
						
					} else if (this.IsEducation == 1) {
						uni.navigateTo({
							url: '/pages/school/course-submit?DetailList=' + encodeURIComponent(JSON.stringify(
									forms.DetailList)) + '&IsFormShoppingCart=1&ShoppingCartIdList=' + JSON
								.stringify(ShoppingCartIdList)
						});
					}
				} else {
					uni.showToast({
						title: '请选择购买商品',
						position: 'bottom',
						icon: 'none',
						duration: 2000
					});
				}
			},
			clickHandler(id) {
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + id
				});
			},
			clickHandler2(id) { //购物车跳到课程详情
				uni.navigateTo({
					url: "/pages/school/courseInfo?GoodsId=" + id
				});
			},
			goUrl(url) {
				uni.navigateTo({
					url: url
				});
			},
			abc() { //阻止change的事件冒泡

			},
		}
	};
</script>

<style>
	.the-binding {
		width: 100%;
		margin-left: 210rpx;
	}

	.cent-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.cartStyle {
		height: 100%;
		position: relative;
		font-family: 'oswald';
	}

	.cartStyle .u-checkbox__label {
		margin-left: 12px;
	}

	.cartStyle .grid-text {
		font-size: 24rpx;
		margin-top: 4rpx;
		color: #939393;
	}

	.cartStyle .grid-text_r {
		margin-top: 4rpx;
		margin-right: 10rpx;
	}

	.cartStyle .cartList {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: hidden;
	}

	.cartStyle .cartList .cartList_item {
		width: 100%;
		padding: 30rpx 30rpx 30rpx 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.cartList_item2 {
		width: 100%;
		padding: 30rpx 30rpx 30rpx 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.cartList .cartList_item .item_input {
		width: 200rpx;
		height: 60rpx;
		background: #f7f7f7;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.cartList .item_input .item_input_l,
	.item_input_r {
		width: 50rpx;
		height: 60rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cartStyle .item_input .item_input_c {
		text-align: center;
		width: 50rpx;
		height: 60rpx;
		font-size: 20rpx;
	}

	.cartStyle .box_bottom {
		width: 100%;
		height: 50px;
		position: fixed;
		background: #fff;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f5f5f5;
		z-index: 999;
	}

	.cartStyle .bottom_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 250rpx;
		height: 50px;
	}

	.cartStyle .Deletestyle {
		margin-right: 40rpx;
	}

	.cartStyle .invalid {
		text-align: center;
		width: 40px;
		height: 20px;
		line-height: 18px;
		border-radius: 10px;
	}

	.cartStyle .Logo {
		padding: 1px 5px;
		display: inline-block;
		font-size: 22rpx;
		margin-right: 5rpx;
		border-radius: 4px;
	}

	.cartStyle .item-r {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 440rpx;
		height: 150rpx;
		margin-left: 20rpx;
	}

	.cartStyle .item-r-n {
		font-size: 26rpx;
		width: 440rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.item-r2 {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: 440rpx;
		height: 150rpx;
		margin-left: 20rpx;
	}

	.cartStyle .item-r-n2 {
		font-size: 26rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
