caimei-applets-caimei/pages/seller/cart/cart.vue

<template>
	<view class="container cart clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view class="foot-check-delbtn" v-if="!isshowDelbtn && goodsList.length > 0" :style="{ top: CustomBar + 'px' }">
			<view class="foot-text"
				>共<text>{{ kindCount }}</text
				>件商品</view
			>
			<view class="delBtn" @tap.stop="showDelManager">删除</view>
		</view>
		<view class="container-cart-main tui-skeleton" :style="{ paddingTop: isshowDelbtn ? '0rpx' : '80rpx' }">
			<view v-if="!isEmpty" class="container-cart">
				<scroll-view class="cart-content" scroll-y @scrolltolower="toLower">
					<view class="goods-list">
						<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
							<view class="shoptitle">
								<!--选择商店的全部商品 :disabled="isNnder"-->
								<view class="checkbox-box" @click.stop="handleCheckShop(item)">
									<view
										class="checkbox iconfont"
										:class="[item.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
									></view>
								</view>
								<view v-if="item.promotions" class="floor-item-act">
									<view class="floor-tags" @click.stop="clickPopupShow(item, 2)">{{
										item.promotions.name
									}}</view>
								</view>
								<view class="text">{{ item.shopName }}</view>
							</view>
							<view class="productlist">
								<view class="goods-pros" v-for="(pros, idx) in item.cartList" :key="idx">
									<view class="goods-pros-t">
										<!--选择商品-->
										<view class="checkbox-box" @click.stop="handlsCkecdPros(item, pros, idx)">
											<view
												class="checkbox iconfont"
												:class="[pros.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
											></view>
										</view>
										<view class="pros-img" @click.stop="navToListPage(pros.productId)">
											<image :src="pros.image ? pros.image : ''" alt="" />
											<view class="pros-type" v-if="pros.productType == 2">医疗器械</view>
										</view>
										<view class="pros-product">
											<view class="producttitle" @click.stop="navToListPage(pros.productId)">
												{{ pros.name }}
											</view>
											<view class="productspec">规格:{{ pros.unit ? pros.unit : '' }}</view>
											<view
												class="productspec"
												v-if="pros.productCode != '' && pros.productCode != null"
											>
												<view bgcolor="#666666">商品编码:{{ pros.productCode }}</view>
											</view>
											<template v-if="pros.number > pros.stock || pros.stock === 0">
												<view class="cart-sku-temp" @click.stop="handleShouUnitPopup(pros)">
													<view class="cart-sku-text">重新选择商品规格</view>
													<view class="cart-sku-btn">重选</view>
												</view>
											</template>
											<template v-else>
												<view class="productprice">
													<!--使用过滤器对总价改变-->
													<view
														class="price"
														:class="
															PromotionsFormat(pros.promotions) ||
															(pros.svipProductFlag == 1 && vipFlag == 1)
																? 'disabled'
																: ''
														"
													>
														<text>￥</text>
														{{
															(PromotionsFormat(pros.promotions) ||
															pros.svipProductFlag == 1
																? pros.originalPrice
																: pros.price) | NumFormat
														}}
													</view>
													<view class="count" :class="[isshowDelbtn ? 'none' : 'show']">
														<text class="count-tips" v-if="pros.number < pros.min"
															>起订量:{{ pros.min }}</text
														>
														<text class="count-tips step" v-if="pros.isStep"
															>购买量必须为起订量的整数倍</text
														>
														<view class="number-box">
															<view
																class="iconfont icon-jianhao"
																@click="changeCountSub(item, pros)"
															></view>
															<input
																class="btn-input"
																type="number"
																maxlength="6"
																v-model="pros.number"
																@blur="changeNnmber($event, item, pros)"
															/>
															<view
																class="iconfont icon-jiahao"
																@click="changeCountAdd(item, pros)"
															></view>
														</view>
													</view>
												</view>
												<view class="floor-item-act">
													<template v-if="pros.actStatus == 1 && pros.promotions">
														<view
															v-if="PromotionsFormat(pros.promotions)"
															class="floor-tags"
															@click.stop="clickPopupShow(pros, 1)"
														>
															{{ pros.promotions.name }}
															<text
																v-if="
																	pros.promotions != null && pros.promotions.type != 3
																"
															>
																:￥{{
																	pros.promotions == null
																		? '0.00'
																		: pros.promotions.touchPrice | NumFormat
																}}
															</text>
														</view>
														<view
															v-else-if="pros.promotions.type != 3"
															class="floor-tags"
															@click.stop="clickPopupShow(pros, 2)"
														>
															{{ pros.promotions.name }}
														</view>
													</template>
													<template v-if="pros.actStatus == null && pros.ladderFlag == 1">
														<view class="floor-tags" @click.stop="clickPopupShow(pros, 2)"
															>阶梯价格</view
														>
													</template>
													<template v-if="pros.svipProductFlag == 1">
														<view class="svip-tags">
															<view class="tags" :class="{ none: vipFlag != 1 }"
																>SVIP</view
															>
															<view class="price" v-if="isShowVipFlag(pros)">{{
																pros.svipPriceTag
															}}</view>
														</view>
													</template>
												</view>
											</template>
										</view>
									</view>
								</view>
							</view>
							<view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none' : 'show']">
								<view class="sum-none" v-if="item.reducedPrice > 0">
									<text class="money-sign">￥</text>
									<text class="money">{{ item.totalOriginalPrice | NumFormat }}</text>
									<text class="money-reduced"
										>减<text>￥{{ item.reducedPrice | NumFormat }}</text></text
									>
								</view>
								<view class="sum"
									>合计:<text class="money"
										><text class="money-sign">￥</text>{{ item.totalPrice | NumFormat }}</text
									></view
								>
							</view>
						</view>
					</view>
					<view class="failure-list" v-if="failureList.length > 0">
						<view class="failure-title">
							<view class="title-txt"
								>失效商品<text>{{ failureList.length }}件</text></view
							>
							<view class="title-btn" @click.stop="handleDeletefailures"
								><text class="butto">清空失效商品</text></view
							>
						</view>
						<view class="productlist">
							<view class="goods-pros" v-for="(failure, failureIdx) in failureList" :key="failureIdx">
								<view class="goods-pros-t" @click.stop="failureToProduct(failure)">
									<!--选择商品-->
									<view
										class="checkbox-box"
										@click.stop="handleCheckFailure(failure)"
										v-if="isshowDelbtn"
									>
										<button
											class="checkbox iconfont"
											:class="[failure.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
										></button>
									</view>
									<text class="img-tip">失效</text>
									<view class="pros-img">
										<image :src="failure.mainImage ? failure.mainImage : ''" alt="" />
										<view class="pros-type" v-if="failure.productType == 2">医疗器械</view>
									</view>
									<view class="pros-product">
										<view class="producttitle">{{ failure.name }}</view>
										<view class="productspec">规格:{{ failure.unit ? failure.unit : '' }}</view>
										<view class="productstate">{{ failureStateText(failure.validFlag) }}</view>
									</view>
									<view class="pros-marks" v-if="failure.isFailureLayer"></view>
									<!--</view>-->
								</view>
							</view>
						</view>
					</view>

					<!--加载loadding-->
					<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
					<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
					<!--加载loadding-->
				</scroll-view>
				<!-- 脚部菜单 -->
				<view class="footer" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
					<view class="footer-le">
						<view class="foot-check checkbox-box" @tap.stop="handleCheckAll">
							<button
								class="checkbox iconfont"
								:class="[isCheckAll ? 'icon-yixuanze' : 'icon-weixuanze']"
							></button>
							<view class="text">全选</view>
						</view>
						<view class="sum">
							<view class="sum-none" v-if="reducedPrice > 0">
								<text class="money-sign">￥</text>
								<text class="money">{{ totalOriginalPrice | NumFormat }}</text>
								<text class="money-reduced"
									>减<text>￥{{ reducedPrice | NumFormat }}</text></text
								>
							</view>
							<view class="sum-price" :class="reducedPrice == 0 ? 'none' : ''">
								总价:<text class="money-sign">￥</text
								><text class="money">{{ allPrice | NumFormat }}</text>
							</view>
						</view>
					</view>
					<view v-if="!isshowDelbtn" class="footer-ri">
						<view class="btn hanld-btn" @tap="hanldlerToConfirm">去结算({{ allCount }})</view>
					</view>
					<view v-else class="footer-del">
						<view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
						<view class="btn btn-confirm" @tap.stop="handleDeleteCart">删除</view>
					</view>
				</view>
			</view>
			<view v-if="isEmpty" class="cart-content empty">
				<view class="empty-container">
					<image
						class="empty-container-image"
						src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png"
						mode="aspectFit"
					></image>
					<text class="error-text">购物车空空如也~</text>
				</view>
			</view>
		</view>
		<!-- 选择规格弹窗 -->
		<cm-unit-popup
			v-if="popupShow"
			:popupShow="popupShow"
			:skuProduct="handlePros"
			@skuBtnConfirm="handleBtnConfirm"
			@handleFuction="handleFuctionData"
		></cm-unit-popup>
		<!-- 促销活动弹窗 -->
		<activi-popup :product="handlerPros" :popupShow="popupShow1"></activi-popup>
		<!-- 透明模态层 -->
		<modal-layer v-if="modallayer"></modal-layer>
	</view>
</template>
<script>
import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
import tuiNomore from '@/components/tui-components/nomore/nomore'
import activiPopup from './components/cm-activipopu'
import modalLayer from '@/components/modal-layer'
import cmUnitPopup from './components/cm-unit-cart-popup'
import cartMixins from './mixins/cartMixins.js'
import apisMixins from './mixins/apisMixins.js'
import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	clubId: 0, // 机构Id
	serviceProviderId: 0, //协销Id
	againBuyProductIds: '', // 再次购买商品ids
	pageNum: 1, // 页码
	pageSize: 10 // 条数
}
export default {
	mixins: [apisMixins, cartMixins],
	components: {
		tuiLoadmore,
		tuiNomore,
		activiPopup,
		cmUnitPopup,
		modalLayer
	},
	data() {
		return {
			kindCount: 0,
			isStock: '',
			popupShow: false,
			popupShow1: false,
			handlePros: {},
			listQuery: Object.assign({}, defaultListQuery), // 购物车立即结算确认订单参数
			handlerPros: {}, //监听单挑促销商品
			promotionsList: [], //促销活动列表
			failureList: [], //失效商品列表
			goodsList: [], //购物车的商品
			delGoodsList: '', //要删除的商品
			setGoodData: '', //确认订单的商品
			isCheckAll: false, //是否全选
			totalOriginalPrice: 0, //所有原价价
			reducedPrice: 0, //满减
			allPrice: 0, //所有价格
			allCount: 0, //被选中的产品数量
			isModallayer: false,
			skeletonShow: true,
			isshowDelbtn: false,
			isDisabled: false, // 供应商/店铺全选是否禁用状态
			isEmpty: false, //显示空购物车
			scrollHeight: 'auto',
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			submitIds: [],
			checkenProsList: [],
			depositIds: [6060, 6061, 6062, 6063, 6064], //定金商品ID
			rechargeIds: [6065, 6066, 6067, 6068, 6069], //充值余额商品ID
			isIphoneX: this.$store.state.isIphoneX,
			vipFlag: 0,
			userIdentity: 0,
			isCheckedProductStatus: false
		}
	},
	onLoad() {
		this.setScrollHeight()
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	watch: {
		//深度监听所有数据，每次改变重新计算总价和总数
		goodsList: {
			deep: true,
			handler(val, oldval) {
				this.totalPeice()
				this.totalCount()
			}
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		},
		totalprice(val, count) {
			//单件商品的价格 × 数量
			return (val * count).toFixed(2)
		}
	},
	methods: {
		async initGetStotage() {
			const clubInfo = await this.$api.getComStorage('orderUserInfo')
			const userInfo = await this.$api.getStorage()
			this.isModallayer = false //遮罩层 防止多次点击
			this.skeletonShow = true //预加载圆圈
			this.isCheckAll = false //是否全选
			this.submitIds = []
			this.vipFlag = clubInfo.vipFlag ? clubInfo.vipFlag : 0
			this.userIdentity = clubInfo.userIdentity ? clubInfo.userIdentity : 0
			this.listQuery.clubId = clubInfo.clubId ? clubInfo.clubId : 0
			this.listQuery.againBuyProductIds = clubInfo.againBuyProductIds ? clubInfo.againBuyProductIds : ''
			this.listQuery.serviceProviderId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			this.initGetCartGoodsList()
			this.getClubProductNum()
		},
		initLogin() {
			this.$api.redirectTo('/pages/login/login?type=4')
		},
		clickPopupShow(pros, type) {
			//显示活动弹窗
			this.popupShow1 = true
			this.handlerPros = pros
		},
		failureToProduct(failure) {
			if (failure.status == 1) {
				this.$util.msg('商品已丢失,不能查看', 2000)
				return
			} else if (failure.status == 2) {
				this.$util.msg('商品已停售,不能查看', 2000)
				return
			} else {
				this.isModallayer = true
				this.$api.navigateTo(`/pages/goods/product?id=${failure.productId}`)
			}
		},
		failureStateText(state) {
			let stateText = '',
				stateTextObject = {
					0: '商品已停售',
					10: '商品已丢失'
				}
			Object.keys(stateTextObject).forEach(key => {
				if (key == state) {
					stateText = stateTextObject[key]
				}
			})
			return stateText
		},
		setScrollHeight() {
			// 窗口高度-footer高度
			const { windowHeight, pixelRatio } = uni.getSystemInfoSync()
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.footer').boundingClientRect()
				query.exec(res => {
					this.windowHeight = windowHeight
					if (res[0][0]) {
						this.scrollHeight = windowHeight - res[0][0].height
					}
				})
			}, 500)
		},
		initGetCartGoodsList() {
			//初始化购物车 index:1
			this.SellerService.GetSellerShoppingInfo(this.listQuery)
				.then(response => {
					this.skeletonShow = false
					let data = response.data
					let dataPage = data.pageDate
					this.promotionsList = data.promotionsList
					if (dataPage.list.length > 0 || data.invalidProductList.length > 0) {
						this.isEmpty = false
					} else {
						this.isEmpty = true
					}
					if (dataPage.list && dataPage.list.length > 0) {
						this.hasNextPage = dataPage.hasNextPage
						this.goodsList = dataPage.list
						this.goodsList.forEach((supplier, index) => {
							let cartListLength = supplier.cartList.length,
								invalidLength = 0
							supplier.cartList.forEach(pros => {
								pros.shopId = supplier.shopId
								pros.isStep = false
								if (pros.stock === 0 || pros.number > pros.stock) {
									supplier.isDisable = true
									pros.isDisable = true
								} else {
									pros.isDisable = false
								}
								if (pros.step === 2) {
									if (pros.number % pros.min != 0) {
										pros.number = pros.min
										this.totalShopPeice()
										this.updateShoppogNum(pros)
									}
								}
							})
						})
						this.totalShopPeice()
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.goodsList.length < 4) {
								this.pullUpOn = true
							} else {
								this.pullUpOn = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.goodsList = []
					}
					if (response.data.invalidProductList && response.data.invalidProductList.length > 0) {
						let newFailureList = [],
							isFailureLayer
						response.data.invalidProductList.forEach((failure, index) => {
							if (failure.validFlag == 0 || failure.validFlag == 10) {
								isFailureLayer = true
							} else {
								isFailureLayer = false
							}
							newFailureList.push(Object.assign({}, failure, { isFailureLayer: isFailureLayer }))
						})
						this.failureList = newFailureList
					} else {
						this.failureList = []
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getOnReachBottomData() {
			//上拉加载
			this.listQuery.pageNum += 1
			this.SellerService.GetSellerShoppingInfo(this.listQuery)
				.then(response => {
					let resultsData = response.data.pageDate
					this.promotionsList = response.data.promotionsList
					this.hasNextPage = resultsData.hasNextPage
					this.goodsList = this.goodsList.concat(resultsData.results)
					this.goodsList.forEach((supplier, index) => {
						let productsListLength = supplier.cartList.length,
							invalidLength = 0
						supplier.cartList.forEach(pros => {
							pros.shopId = supplier.shopId
							pros.isStep = false
							if (pros.stock === 0 || pros.number > pros.stock) {
								supplier.isDisable = true
								pros.isDisable = true
							} else {
								pros.isDisable = false
							}
							if (pros.step === 2) {
								if (pros.number % pros.min != 0) {
									pros.number = pros.min
									this.totalShopPeice()
									this.updateShoppogNum(pros)
								}
							}
						})
					})
					this.totalShopPeice()
					this.pullFlag = false // 防上拉暴滑
					setTimeout(() => {
						this.pullFlag = true
					}, 500)
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						this.loadding = false
						this.pullUpOn = false
						this.nomoreText = '已至底部'
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getClubProductNum() {
			// 获取协销下机构购物车数量
			this.SellerService.GetSellerProductNum({
				clubId: this.listQuery.clubId,
				serviceProviderId: this.listQuery.serviceProviderId
			}).then(response => {
				this.kindCount = response.data
			})
		},
		handleCheckFailure(failure) {
			//  选择失效商品
			failure.isChecked = !failure.isChecked
			this.updateCheckAllBtn()
		},
		handlsCkecdPros(item, pro) {
			//为未选中的时候改变为true，反之为true
			if (!this.isshowDelbtn) {
				if (pro.isDisable) { return }
			}
			pro.isChecked = !pro.isChecked
			if (pro.isChecked) {
				if (!this.submitIds.includes(pro.skuId * 1)) {
					this.submitIds.push(pro.skuId)
					this.checkenProsList.push(pro)
				}
				this.isCheckedProductStatus = true
			} else {
				var lent = this.submitIds.indexOf(pro.skuId * 1)
				if (lent >= 0) {
					this.submitIds.splice(lent, 1)
					this.checkenProsList.splice(lent, 1)
				}
			}
			this.updateProductCheckedAllBtn(item)
			this.updateCheckAllBtn()
		},
		updateProductCheckedAllBtn(item) {
			// 单独每个供应商的勾选判断
			let productsList = item.cartList,
				productsCheckedLength = 0,
				disabledLength = 0
			if (this.isshowDelbtn) {
				productsList.forEach(pros => {
					if (pros.isChecked) {
						productsCheckedLength++
					}
				})
			} else {
				productsList.forEach(pros => {
					if (pros.isChecked) {
						productsCheckedLength++
					}
				})
			}
			item.isChecked = productsCheckedLength === productsList.length - disabledLength
		},
		updateCheckAllBtn() {
			// 全选勾选判断
			let goodsCheckedLength = 0,
				disabledListLength = 0,
				goodsList = this.goodsList
			goodsList.forEach(item => {
				if (item.isChecked) {
					goodsCheckedLength++
				}
			})
			this.isCheckAll = goodsCheckedLength === goodsList.length - disabledListLength
		},
		handleCheckShop(supplier) {
			//与单选商品类似
			if (!this.isshowDelbtn) {
				if (supplier.isDisable) {
					return
				}
			}
			supplier.isChecked = !supplier.isChecked
			this.setProductChecked(supplier)
			this.updateCheckAllBtn()
		},
		setProductChecked(supplier) {
			supplier.cartList.forEach(pros => {
				if (this.isshowDelbtn) {
					if (supplier.isChecked) {
						pros.isChecked = true
						if (!this.submitIds.includes(pros.skuId * 1)) {
							this.submitIds.push(pros.skuId)
							this.checkenProsList.push(pros)
						}
					} else {
						pros.isChecked = false
						let lent = this.submitIds.indexOf(pros.skuId * 1)
						if (lent >= 0) {
							this.submitIds.splice(lent, 1)
							this.checkenProsList.splice(lent, 1)
						}
					}
				} else {
					if (supplier.isChecked && (pros.stock !== 0 || pros.number < pros.stock)) {
						pros.isChecked = true
						if (!this.submitIds.includes(pros.skuId * 1)) {
							this.submitIds.push(pros.skuId)
							this.checkenProsList.push(pros)
						}
					} else {
						pros.isChecked = false
						let lent = this.submitIds.indexOf(pros.skuId * 1)
						if (lent >= 0) {
							this.submitIds.splice(lent, 1)
							this.checkenProsList.splice(lent, 1)
						}
					}
				}
			})
		},
		updateBothCheckBtn() {
			if (this.isshowDelbtn) {
				// 当管理删除按钮出现时,失效的商品可被选择
				this.goodsList.forEach(supplier => {
					supplier.isChecked = this.isCheckAll
					this.setProductChecked(supplier)
				})
				//删除按钮 全选包括失效商品勾选
				this.failureList.forEach(failureItem => {
					failureItem.isChecked = this.isCheckAll
				})
			} else {
				this.goodsList.forEach(supplier => {
					if(supplier.isDisable){
						supplier.isChecked = false
					}else{
						supplier.isChecked = this.isCheckAll && !supplier.isDisabled
					}
					this.setProductChecked(supplier)
				})
			}
		},
		handleCheckAll() {
			//全选方法内调用方法
			this.isCheckAll = !this.isCheckAll
			this.updateBothCheckBtn()
		},
		totalShopPeice() {
			//每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
			let touchPrice = 0
			let reducedPrice = 0 //商铺合计满减价
			this.goodsList.map((item, index) => {
				//计算店铺满减后店铺合计
				if (item.promotions && item.promotions.mode == 2) {
					let prosPrice = 0 // 店铺价格合计
					let prosDiscountNum = 0 // 店铺促销叠加次数
					let totalOriginalPrice = 0 //店铺原价合计
					item.cartList.forEach(pros => {
						prosPrice += pros.price * pros.number
						totalOriginalPrice += pros.price * pros.number
					})
					if (item.promotions.discount == 1) {
						// 支持促销叠加条件的店铺满减 执行
						prosDiscountNum = parseInt(prosPrice / item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
						if (prosPrice >= item.promotions.touchPrice) {
							// 满足店铺满减条件下执行
							item.totalPrice = prosPrice - item.promotions.reducedPrice * prosDiscountNum
							item.reducedPrice = item.promotions.reducedPrice * prosDiscountNum
							item.totalOriginalPrice = totalOriginalPrice
						} else {
							item.reducedPrice = 0 //统计合计价格
							item.totalPrice = prosPrice
						}
					} else {
						if (prosPrice >= item.promotions.touchPrice) {
							// 满足店铺满减条件下执行
							item.totalPrice = prosPrice - item.promotions.reducedPrice
							item.reducedPrice = item.promotions.reducedPrice
							item.totalOriginalPrice = totalOriginalPrice
						} else {
							item.reducedPrice = 0 //统计合计价格
							item.totalPrice = prosPrice
						}
					}
				} else {
					//以下为计算除店铺满减以外的单品满减以及正常商品合计
					let _totalPrice = 0
					let _reducedPrice = 0
					let discountNum = 0
					let _totalOriginalPrice = 0
					item.cartList.forEach(pros => {
						let _price = pros.price * pros.number
						_totalOriginalPrice += pros.price * pros.number
						if (pros.promotions && pros.promotions.type != 2 && pros.promotions.mode == 2) {
							if (pros.promotions.discount == 1) {
								discountNum = parseInt(_price / pros.promotions.touchPrice)
								if (_price >= pros.promotions.touchPrice) {
									_price = _price - pros.promotions.reducedPrice * discountNum
									_reducedPrice += pros.promotions.reducedPrice * discountNum
								}
								_totalPrice += _price
							} else {
								if (_price >= pros.promotions.touchPrice) {
									_price = _price - pros.promotions.reducedPrice
									_reducedPrice += pros.promotions.reducedPrice
								}
								_totalPrice += _price
							}
						} else {
							_reducedPrice = 0
							_totalPrice += pros.price * pros.number
						}
					})
					item.reducedPrice = _reducedPrice
					item.totalOriginalPrice = _totalOriginalPrice
					item.totalPrice = _totalPrice
				}
			})
		},
		totalPeice() {
			//计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
			let totalPrice = 0
			let reducedPrice = 0
			let originalPrice = 0
			this.goodsList.forEach((item, index) => {
				let supplierPrice = 0
				let supplierReducedPrice = 0
				item.totalprice = 0
				item.reducedprice = 0
				item.originalprice = 0
				item.cartList.forEach(pros => {
					if (pros.isChecked) {
						this.isCheckedProductStatus = true
						supplierPrice += pros.price * pros.number
						// 单品满减
						if (pros.promotions && pros.promotions.type * 1 === 1 && pros.promotions.mode * 1 === 2) {
							// 单品满减-重新计算供应商总价/满减金额
							let _price = pros.price * pros.number
							if (pros.promotions.discount == 1) {
								let discountNum = parseInt(_price / pros.promotions.touchPrice)
								console.log('单品满减促销叠加通道叠加次数', `${discountNum}次`)
								// 单品满减-重新计算供应商总价/满减金额
								if (_price >= pros.promotions.touchPrice) {
									supplierPrice -= pros.promotions.reducedPrice * discountNum
									supplierReducedPrice += pros.promotions.reducedPrice * discountNum
								}
							} else {
								console.log('非促销叠加通道')
								// 单品满减-重新计算供应商总价/满减金额
								if (_price >= pros.promotions.touchPrice) {
									supplierPrice -= pros.promotions.reducedPrice
									supplierReducedPrice += pros.promotions.reducedPrice
								}
							}
						}
					}
				})
				// 店铺满减
				if (item.promotions && item.promotions.mode * 1 === 2) {
					// 店铺满减-计算供应商总价/满减金额
					if (item.promotions.discount == 1) {
						// 支持促销叠加条件的店铺满减 执行
						let prosDiscountNum = parseInt(supplierPrice / item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
						console.log('店铺满减促销叠加通道叠加次数', `${prosDiscountNum}次`)
						if (supplierPrice >= item.promotions.touchPrice) {
							supplierPrice -= item.promotions.reducedPrice * prosDiscountNum
							supplierReducedPrice += item.promotions.reducedPrice * prosDiscountNum
						}
					} else {
						console.log('店铺满减非促销叠加通道')
						// 店铺满减-计算供应商总价/满减金额
						if (supplierPrice >= item.promotions.touchPrice) {
							supplierPrice -= item.promotions.reducedPrice
							supplierReducedPrice += item.promotions.reducedPrice
						}
					}
				}
				item.totalprice = supplierPrice
				item.reducedprice = supplierReducedPrice
				item.originalprice = supplierPrice + supplierReducedPrice
				totalPrice += item.totalprice
				reducedPrice += item.reducedprice
				originalPrice += item.originalprice
				console.log('totalPrice', totalPrice)
				console.log('originalPrice', originalPrice)
			})
			if (this.isCheckedProductStatus) {
				// 总促销计算
				this.promotionsList.forEach(promotions => {
					// 凑单满减
					if (promotions.mode === 2 && promotions.type === 2) {
						let collecTotal = 0
						let collecDiscountNum = 0
						promotions.productList.forEach(pros => {
							collecTotal += this.collecTotalPrice(pros)
						})
						if (promotions.discount == 1) {
							// 支持凑单满减促销叠加条件的执行
							collecDiscountNum += parseInt(collecTotal / promotions.touchPrice) // 凑单满减促销叠加次数 = 凑单商品合计价格/凑单满减促销价格
							console.log('凑单促销满减叠加通道叠加次数', `${collecDiscountNum}次`)
							if (collecTotal >= promotions.touchPrice) {
								totalPrice -= promotions.reducedPrice * collecDiscountNum
								reducedPrice += promotions.reducedPrice * collecDiscountNum
							}
						} else {
							console.log('凑单促销满减非叠加通道')
							if (collecTotal >= promotions.touchPrice) {
								totalPrice -= promotions.reducedPrice
								reducedPrice += promotions.reducedPrice
							}
						}
					}
				})
				//最后统计商品原价
				this.totalOriginalPrice = originalPrice
				//最后满减金额 = 店铺减去金额 + 单品减去金额 + 凑单减去金额
				this.reducedPrice = reducedPrice
				//最终合计价格 = 	店铺满减合计 + 单品满减  + 正常合计 + 凑单满减
				this.allPrice = totalPrice
			}
		},
		collecTotalPrice(pros) {
			// 凑单满减计算勾选的凑单商品总价
			let price
			this.checkenProsList.find(el => {
				if (pros.productId == el.productId) {
					price = el.number * el.price
				}
			})
			return price
		},
		totalCount() {
			//计算总数量
			this.allCount = 0
			let prosAllCount = 0
			let validCount = 0
			let validList = []
			let productsList = []
			this.goodsList.forEach(item => {
				productsList = item.cartList
				productsList.forEach(pros => {
					if (pros.isChecked) {
						prosAllCount += parseInt(pros.number)
						this.allCount = prosAllCount
					}
				})
			})
		},
		changeCountAdd(item, pros) {
			//商品数量加加
			if (pros.step === 2) {
				pros.isStep = false
				pros.number += pros.min
				this.processActivityPrice(pros)
				this.isStock = false
			} else {
				pros.number++
				this.processActivityPrice(pros)
				this.isStock = false
			}
			this.updateShoppogNum(pros)
			this.totalShopPeice()
		},
		changeCountSub(item, pros) {
			//商品数量减减
			if (pros.number <= pros.min) {
				pros.number = pros.min
				this.$util.msg(`该商品最小起订量为${pros.min}`, 2000)
				return
			} else {
				if (pros.step === 2) {
					pros.isStep = false
					pros.number -= pros.min
				} else {
					pros.number--
				}
				this.processActivityPrice(pros)
			}
			this.updateShoppogNum(pros)
			this.totalShopPeice()
		},
		changeNnmber(e, item, pros) {
			//输入商品数量更新
			let _value = e.detail.value
			if (!this.$api.isNumber(_value)) {
				pros.number = pros.min
			} else if (_value < pros.min) {
				this.$util.msg(`该商品最小起订量为${pros.min}`, 2000)
				pros.number = pros.min
			} else {
				if (pros.step === 2) {
					if (_value % pros.min != 0) {
						pros.isStep = true
						pros.number = pros.min
					}
				}else{
					pros.isStep = false
					pros.number = _value
					this.processActivityPrice(pros)
				}
			}
			this.updateShoppogNum(pros)
			this.totalShopPeice()
		},
		processActivityPrice(pros) {
			//单独处理活动价格和阶梯价格
			let ladderPriceList = pros.ladderPrices
			if (pros.ladderFlag == 0 || pros.actStatus == 1) {
				pros.price = pros.price
			} else {
				ladderPriceList.forEach((item, index) => {
					if (pros.number >= item.buyNum) {
						pros.price = item.buyPrice
					}
				})
			}
		},
		setCartisDisable(){// 删除取消设置不能选的商品
			this.goodsList = this.goodsList.map(suppler=>{
				suppler.isDisable = false
				suppler.cartList.forEach(pros => {
					pros.isDisable = false
				})
				return suppler
			})
		},
		clearCartisDisable(){// 取消删除设置不能选的商品
			this.goodsList = this.goodsList.map((supplier) => {
				supplier.cartList.forEach(pros => {
					if(pros.stock === 0 || pros.number > pros.stock ){
					    supplier.isDisable = true
					    pros.isDisable = true
					}else{
					    pros.isDisable = false
					}
				})
				return supplier
			})
		},
		showDelManager() {
			//显示删除商品管理
			this.isshowDelbtn = true
			this.setCartisDisable()
			if (this.isCheckAll) {
				this.updateBothCheckBtn()
			} else {
				this.updateCheckAllBtn()
			}
		},
		hideDelManage() {
			//隐藏删除商品管理
			this.isshowDelbtn = false
			this.isCheckAll = false
			this.clearCartisDisable()
			this.goodsList = this.goodsList.map(suppler=>{
				suppler.isChecked = false
				suppler.cartList.forEach(pros => {
						pros.isChecked = false
				})
				return suppler
			})
		},
		goNavto(url) {
			uni.navigateTo({
				url
			})
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		navToListPage(id) {
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
		},
		isShowVipFlag(pros) {
			if (pros.priceFlag != 1) {
				if (this.userIdentity == 4 && this.vipFlag == 1) {
					return true
				} else if (this.userIdentity == 2) {
					return true
				}
			}
		},
		handleShouUnitPopup(pros) {
			// 规格弹窗
			this.popupShow = true
			this.handlePros = pros
		}
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData()
		}
	},
	onPullDownRefresh() {
		//下拉刷新
		this.initGetCartGoodsList()
		uni.stopPullDownRefresh()
	},
	onShow() {
		this.initGetStotage()
	}
}
</script>

<style lang="scss">
page {
	background: #f7f7f7;
}
.cart-content {
	position: relative;
	padding-bottom: 100rpx;
}
.container-cart-main.none {
	display: none;
}
.container-cart-main.show {
	display: block;
}
.cart-content.empty.none {
	display: none;
}
.cart-content.empty.show {
	display: block;
}
.container-cart.show {
	display: block;
}
.container-cart.none {
	display: none;
}
.empty-container.none {
	display: none;
}
.empty-container.show {
	display: flex;
}
.foot-check-delbtn {
	width: 100%;
	height: 80rpx;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 15rpx 24rpx;
	background-color: #f7f7f7;
	z-index: 990;
	.foot-text {
		font-size: $font-size-26;
		height: 50rpx;
		line-height: 50rpx;
		color: #666666;
		float: left;
		padding-left: 10rpx;
		text {
			// color: $color-system;
			margin: 0 6rpx;
		}
	}
	.delBtn {
		width: 100rpx;
		display: inline-block;
		padding: 0 15rpx;
		font-size: $font-size-26;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 30rpx;
		background: #ffffff;
		border: 1px solid #FF5B00;
		color: $color-system;
		float: right;
		text-align: center;
		&.none {
			display: none;
		}
	}
}
.checkbox-box {
	display: flex;
	align-items: center;
	.checkbox {
		display: flex;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		border-radius: 0;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: #ffffff;
		font-size: 36rpx;
		color: $color-system;
		padding: 5rpx;
		&.icon-weixuanze {
			color: #b2b2b2;
		}
	}
	&.disabled {
		.checkbox {
			color: #999999;
		}
	}
	.text {
		font-size: $font-size-24;
		margin-left: 10rpx;
	}
}
.goods-list {
	width: 100%;
	height: auto;
	border-top: 1px solid #ebebeb;
	background-color: #f7f7f7;
	.goods-item {
		width: 702rpx;
		padding: 0 24rpx;
		background: #ffffff;
		margin-bottom: 24rpx;
	}
	.shoptitle {
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
		.checkbox-box {
			padding: 10rpx;
		}
		.text {
			width: 450rpx;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-left: 20rpx;
			font-size: $font-size-28;
			color: $text-color;
			text-align: left;
			font-weight: bold;
		}
		.floor-item-act {
			height: 56rpx;
			text-align: center;
			box-sizing: border-box;
			float: left;
			padding: 10rpx 0;
			margin-left: 20rpx;
			.floor-tags {
				height: 28rpx;
				border-radius: 6rpx;
				background-color: #ffffff;
				line-height: 26rpx;
				color: $color-system;
				text-align: center;
				display: inline-block;
				padding: 0 6rpx;
				font-size: $font-size-20;
				border: 1px solid #FF5B00;
				float: right;
			}
		}
	}
	.goods-pros {
		width: 100%;
		height: auto;
	}
	.goods-pros-t {
		display: flex;
		align-items: center;
		width: 100%;
		height: auto;
		padding: 0 0 20rpx 0;
		.checkbox-box {
			padding: 10rpx;
		}
		.pros-img {
			width: 210rpx;
			height: 210rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
			border: 1px solid #f3f3f3;
			position: relative;
			image {
				width: 210rpx;
				height: 210rpx;
				border-radius: 10rpx;
			}
			.pros-type {
				width: 64rpx;
				height: 64rpx;
				text-align: justify;
				box-sizing: border-box;
				padding: 10rpx;
				border-radius: 0 0 8rpx 8rpx;
				background-color: #33ccbf;
				font-size: $font-size-22;
				color: #ffffff;
				line-height: 25rpx;
				position: absolute;
				top: 0;
				right: 10rpx;
			}
		}
	}
	.goods-pros-b {
		width: 100%;
		height: auto;
		padding: 0 0 24rpx 0;
		box-sizing: border-box;
		&.show {
			display: block;
		}
		&.none {
			display: none;
		}
		.sum-none {
			width: 100%;
			height: 48rpx;
			line-height: 48rpx;
			color: $text-color;
			float: left;
			text-align: right;
			.money {
				font-size: $font-size-26;
				color: #999999;
				text-decoration: line-through;
			}
			.money-sign {
				font-size: $font-size-26;
				color: #999999;
				text-decoration: line-through;
			}
			.money-reduced {
				margin-left: 10rpx;
				font-size: $font-size-26;
				color: $color-system;
				.iconfont {
					font-size: $font-size-34;
				}
			}
		}
		.sum {
			width: 100%;
			height: 40rpx;
			font-size: $font-size-28;
			line-height: 40rpx;
			color: $text-color;
			float: left;
			display: flex;
			justify-content: flex-end;
			.money {
				color: #ff2a2a;
				font-size: $font-size-28;
			}
			.money-sign {
				font-size: $font-size-24;
				color: #ff2a2a;
			}
		}
	}
	.pros-product {
		width: 386rpx;
		height: 100%;
		line-height: 36rpx;
		font-size: $font-size-26;
		position: relative;
		.producttitle {
			width: 100%;
			display: inline-block;
			height: auto;
			text-overflow: ellipsis;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 8rpx;
			.no-text {
				display: inline-block;
				height: 36rpx;
				padding: 0 12rpx;
				line-height: 36rpx;
				background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
				border-radius: 18rpx;
				text-align: center;
				color: #ffffff;
				font-size: $font-size-24;
				margin-right: 24rpx;
			}
		}
		.productspec {
			height: 36rpx;
			color: #999999;
			text-overflow: ellipsis;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-top: 10rpx;
		}
		.productCode {
			color: #666666;
		}
		.cart-sku-temp {
			width: 100%;
			height: 48rpx;
			margin: 30rpx 0 0 0;
			.cart-sku-text {
				font-size: 28rpx;
				line-height: 48rpx;
				color: #666666;
				float: left;
			}
			.cart-sku-btn {
				padding: 0 16rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				box-sizing: border-box;
				border: 1px solid #FF5B00;
				color: #FF5B00;
				float: left;
				border-radius: 20rpx;
				margin-left: 16rpx;
			}
		}
		.productprice {
			width: 100%;
			height: 48rpx;
			margin: 10rpx 0 0 0;
			.price {
				line-height: 48rpx;
				font-size: $font-size-28;
				width: 48%;
				color: #ff2a2a;
				float: left;
				&.disabled {
					color: #999999;
					text-decoration: line-through;
				}
				.money-sign {
					font-size: $font-size-24;
					color: #ff2a2a;
				}
			}
			.count {
				height: 100%;
				float: right;
				position: relative;
				&.show {
					display: block;
				}
				&.none {
					display: none;
				}
				.count-tips {
					width: auto;
					display: inline-block;
					padding: 0 15rpx;
					line-height: 44rpx;
					height: 44rpx;
					border-radius: 22rpx;
					background: $btn-confirm;
					font-size: $font-size-24;
					text-align: center;
					color: #ffffff;
					position: absolute;
					top: -60rpx;
					left: -5rpx;
					z-index: 5;
					&.step {
						left: -217rpx;
					}
					&::before {
						content: '';
						position: absolute;
						bottom: -30rpx;
						right: 15rpx;
						z-index: 1;
						width: 0;
						height: 0;
						border-width: 18rpx;
						border-style: solid;
						border-color: $color-system transparent transparent transparent;
					}
				}
				.number-box {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2rpx solid #ffe6dc;
					border-radius: 30rpx;
					height: 48rpx;
					.iconfont {
						font-size: $font-size-24;
						padding: 0 18rpx;
						color: #999999;
						text-align: center;
						line-height: 48rpx;
						font-weight: bold;
						background: #fef6f3;
						&.icon-jianhao {
							border-radius: 30rpx 0 0 30rpx;
						}
						&.icon-jiahao {
							border-radius: 0 30rpx 30rpx 0;
						}
					}
					.btn-input {
						width: 62rpx;
						height: 44rpx;
						line-height: 44rpx;
						border-radius: 4rpx;
						text-align: center;
						font-size: $font-size-24;
						border-bottom: 2rpx solid #ffe6dc;
						border-top: 2rpx solid #ffe6dc;
					}
				}
				.uni-numbox {
					position: absolute;
					left: 45rpx;
					bottom: 0;
					.uni-numbox-minus,
					.uni-numbox-plus {
						width: 50rpx;
						line-height: 40rpx;
					}
					.uni-numbox-value {
						font-size: $font-size-28;
						width: 60rpx;
					}
				}
			}
		}
		.floor-item-act {
			width: 100%;
			height: 56rpx;
			text-align: center;
			box-sizing: border-box;
			float: left;
			padding: 0 0 10rpx 0;
			margin-left: 10rpx;
		}
	}
}
.footer {
	width: 100%;
	background-color: #ffffff;
	height: 110rpx;
	position: fixed;
	bottom: 0rpx;
	z-index: 100;
	.footer-le {
		width: 510rpx;
		height: 100%;
		padding: 0 24rpx;
		float: left;
		.foot-check {
			width: 100rpx;
			float: left;
			line-height: 110rpx;
			font-size: $font-size-24;
			.checkbox {
				width: 40rpx;
				text-align: center;
			}
			.text {
				width: 60rpx;
				float: right;
			}
		}
		.sum {
			width: 380rpx;
			height: 110rpx;
			float: right;
			box-sizing: border-box;
			padding: 10rpx;
			.sum-none {
				width: 100%;
				height: 45rpx;
				line-height: 45rpx;
				color: $text-color;
				float: left;
				text-align: right;
				.money {
					font-size: $font-size-24;
					color: #999999;
					text-decoration: line-through;
				}
				.money-sign {
					font-size: $font-size-24;
					color: #999999;
					text-decoration: line-through;
				}
				.money-reduced {
					margin-left: 10rpx;
					font-size: $font-size-24;
					color: $color-system;
				}
			}
			.sum-price {
				text-align: right;
				width: 100%;
				height: 45rpx;
				line-height: 45rpx;
				font-size: $font-size-30;
				color: $text-color;
				float: left;
				font-weight: normal;
				&.none {
					height: 90rpx;
					line-height: 90rpx;
				}
				.money {
					color: #ff2a2a;
				}
				.money-sign {
					font-size: $font-size-24;
					color: #ff2a2a;
				}
			}
		}
	}
	.footer-ri {
		width: 180rpx;
		height: 84rpx;
		background: linear-gradient(135deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
		float: right;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		border-radius: 49rpx;
		margin-top: 15rpx;
		margin-right: 10rpx;
		&.none {
			display: none;
		}
		.btn {
			width: 200rpx;
			height: 100%;
			font-size: $font-size-28;
			line-height: 110rpx;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.footer-del {
		width: 400rpx;
		height: 110rpx;
		position: absolute;
		padding-left: 200rpx;
		background: #ffffff;
		right: 0;
		top: 0;
		z-index: 1000;
		&.show {
			animation: showDelbtn 0s linear both;
		}
		&.none {
			animation: hideDelbtn 0s linear both;
		}
		.btn {
			width: 50%;
			height: 100%;
			line-height: 110rpx;
			font-size: $font-size-28;
			color: #ffffff;
			text-align: center;
			float: left;
		}
		.btn.btn-cancel {
			background: #eec1ab;
		}
		.btn.btn-confirm {
			background: #ff2a2a;
		}
		@keyframes showDelbtn {
			0% {
				transform: translateX(0);
			}
			100% {
				transform: translateX(-100%);
			}
		}
		@keyframes hideDelbtn {
			0% {
				transform: translateX(-100%);
			}
			100% {
				transform: translateX(0);
			}
		}
	}
}
.failure-list {
	width: 702rpx;
	height: auto;
	padding: 0 24rpx;
	margin-top: 20rpx;
	background: #ffffff;
	.failure-title {
		width: 100%;
		height: 82rpx;
		line-height: 82rpx;
		font-size: $font-size-28;
		.title-txt {
			float: left;
			color: #666666;
			text-align: left;
		}
		.title-btn {
			float: right;
			color: $color-system;
			text-align: right;
			line-height: 80rpx;
			.butto {
				display: inline-block;
				padding: 0 15rpx;
				font-size: $font-size-26;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 30rpx;
				background: #ffffff;
				// border: 1px solid #C9C9C9;
				// color: #999999;
				margin-top: 15rpx;
			}
		}
	}
	.productlist {
		padding-top: 10rpx;
		.goods-pros {
			width: 100%;
			height: auto;
			padding: 20rpx 0;
		}
		.goods-pros-t {
			display: flex;
			align-items: center;
			width: 100%;
			height: 210rpx;
			position: relative;
			.img-tip {
				display: block;
				width: 72rpx;
				height: 36rpx;
				line-height: 36rpx;
				font-size: $font-size-24;
				text-align: center;
				color: #ffffff;
				border-radius: 24rpx;
				background: rgba(51, 51, 51, 0.3);
				// position: absolute;
				// left: 0;
				// top: 0;
			}
			.checkbox-box {
				padding: 10rpx;
			}
			.pros-img {
				width: 180rpx;
				height: 100%;
				border-radius: 10rpx;
				margin: 0 20rpx;
				border: 1px solid #f3f3f3;
				position: relative;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			.pros-marks {
				width: 750rpx;
				height: 250rpx;
				z-index: 90;
				background: rgba(0, 0, 0, 0.05);
				position: absolute;
				left: -20rpx;
				top: -20rpx;
			}
		}
		.goods-pros-b {
			width: 622rpx;
			margin-left: 84rpx;
			height: 40rpx;
			padding: 0 0 26rpx 0;
			// border-top: 1px solid #EBEBEB;
			&.show {
				display: block;
			}
			&.none {
				display: none;
			}
			.sum {
				font-size: $font-size-28;
				line-height: 40rpx;
				color: $text-color;
				display: flex;
				justify-content: flex-end;
				.money {
					color: #ff2a2a;
					font-size: $font-size-28;
				}
				.money-sign {
					font-size: $font-size-24;
					color: #ff2a2a;
				}
			}
		}
		.pros-product {
			width: 402rpx;
			height: 100%;
			line-height: 36rpx;
			font-size: $font-size-28;
			position: relative;
			.producttitle {
				width: 100%;
				display: inline-block;
				height: auto;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-bottom: 8rpx;
				.no-text {
					display: inline-block;
					height: 36rpx;
					padding: 0 12rpx;
					line-height: 36rpx;
					background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
					border-radius: 18rpx;
					text-align: center;
					color: #ffffff;
					font-size: $font-size-28;
					margin-right: 24rpx;
				}
			}
			.productspec {
				height: 36rpx;
				color: #999999;
				font-size: $font-size-26;
				margin-top: 20rpx;
			}
			.productstate {
				font-size: $font-size-28;
				height: 44rpx;
				color: #ff2a2a;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
	}
}
</style>