caimei-applets-caimei/components/cm-module/cart-components/index.vue

<template name="navbars">
	<view>
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view class="container-cart-main tui-skeleton" :style="{ paddingTop: isshowDelbtn ? '0rpx' : '80rpx' }">
			<template v-if="pathType == 0">
				<view class="foot-check-delbtn" v-if="!isshowDelbtn && goodsList.length > 0">
					<view class="foot-text"
						>共<text>{{ kindCount }}</text
						>件商品</view
					>
					<view class="delBtn" @tap.stop="showDelManager">删除</view>
				</view>
			</template>
			<template v-else>
				<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>
			</template>
			<view v-if="!isEmpty" class="container-cart">
				<view class="cart-content" :style="{ paddingBottom: isIphoneX ? '130rpx' : '100rpx' }">
					<view class="goods-list">
						<view v-for="(item, index) in goodsList" :key="index" class="goods-item clearfix">
							<view class="shoptitle">
								<!--选择商店的全部商品"-->
								<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" @click.stop="goSuppile(item)">{{ item.shopName }} </view>
								<view class="text-coupon" @click="showPopup(0, item)" v-if="item.couponsLogo"
									>领券</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)">
											<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>
											<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"
														v-if="pros.validFlag == 2"
														: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="4"
																v-model="pros.number"
																@blur="changeNnmber($event, item, pros)"
																@focus="changeInput(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.image ? failure.image : ''" 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.status) }}</view>
									</view>
									<view class="pros-marks" v-if="failure.isFailureLayer"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 脚部菜单 -->
				<template v-if="pathType == 0">
					<view class="footer">
						<view class="footer-le">
							<view class="foot-check checkbox-box" @tap.stop="checkAll()">
								<button
									class="checkbox iconfont"
									:class="[isCheckAll ? 'icon-yixuanze' : 'icon-weixuanze']"
								></button>
								<view class="text">全选</view>
							</view>

							<view class="sum">
								<view class="sum-price" :class="isDiscount ? '' : 'none'">
									总价:<text class="money-sign">￥</text
									><text class="money">{{ (allPrice - couponPrice) | NumFormat }}</text>
								</view>
								<view class="sum-none" v-if="isDiscount">
									<text class="money-reduced"
										>共减<text>￥{{ totalDiscountAmount | NumFormat }}</text></text
									>
									<text class="money-popup" @click="showPopup(1)"
										>优惠明细<text class="iconfont icon-xiangshangjiantou"></text
									></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>
				</template>
				<template v-else>
					<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-price" :class="isDiscount ? '' : 'none'">
									总价:<text class="money-sign">￥</text
									><text class="money">{{ (allPrice - couponPrice) | NumFormat }}</text>
								</view>
								<view class="sum-none" v-if="isDiscount">
									<text class="money-reduced"
										>共减<text>￥{{ totalDiscountAmount | NumFormat }}</text></text
									>
									<text class="money-popup" @click="showPopup(1)"
										>优惠明细<text class="iconfont icon-xiangshangjiantou"></text
									></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>
				</template>
			</view>
			<view v-else 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 class="login-btn" @click="goIndex">去商城</view>
				</view>
			</view>
		</view>
		<!-- 选择规格弹窗 -->
		<cm-unit-popup
			v-if="popupShow2"
			:popupShow="popupShow2"
			:skuProduct="handlePros"
			@skuBtnConfirm="handleBtnConfirm"
		></cm-unit-popup>
		<!-- 促销活动弹窗 -->
		<activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
		<!-- 透明模态层 -->
		<modal-layer v-if="modallayer"></modal-layer>
		<!-- 优惠券 -->
		<tui-bottom-popup :radius="true" :show="popupShow0" @close="hidePopup(0)">
			<view class="tui-popup-box clearfix">
				<view class="title">优惠券</view>
				<view class="tui-popup-close" @click="hidePopup(0)">
					<text class="iconfont icon-iconfontguanbi"></text>
				</view>
				<view class="tui-popup-tabs">
					<coupon-tabs
						:tabs="navbar"
						:currentTab="currentTab > 2 ? 0 : currentTab"
						@change="couponChange"
						:itemWidth="100 / navbar.length + '%'"
						selectedColor="#e15616"
						sliderBgColor="#e15616"
					>
					</coupon-tabs>
				</view>
				<div class="tui-popup-main coupon">
					<scroll-view class="tui-popup-scroll" scroll-y="true">
						<view class="coupon-empty" v-if="isCouponEmpty">
							<image
								class="empty-container-image"
								:src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
							></image>
							<text class="error-text">暂无优惠券~</text>
						</view>
						<template v-else>
							<view
								v-for="(coupon, index) in productCouponList"
								:key="index"
								:id="coupon.couponId"
								class="coupon-list"
							>
								<view class="list-cell-le">
									<view class="coupon-maxMoney"
										><text class="small">￥</text>{{ coupon.couponAmount }}</view
									>
									<view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
								</view>
								<view class="list-cell-ri">
									<view class="list-cell-top">
										<view class="list-cell-type">
											<view class="list-cell-tags">
												<template v-if="coupon.moneyCouponFlag == 1">
													<text class="tags" v-if="coupon.moneyCouponType == 1"
														>意向{{ coupon.couponType | TypeFormat }}</text
													>
													<text class="tags" v-else
														>定向{{ coupon.couponType | TypeFormat }}</text
													>
												</template>
												<template v-else>
													<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
												</template>
											</view>
											<view
												class="list-cell-texts"
												:class="currentTab == 1 || currentTab == 2 ? 'none' : ''"
											>
												<text v-if="coupon.couponType == 0">
													{{
														coupon.productType && coupon.productType == 1
															? '全商城商品通用'
															: '仅可购买指定商品'
													}}
												</text>
												<text v-if="coupon.couponType == 1">
													{{
														coupon.categoryType == 1
															? '仅限购买产品类商品'
															: '仅限购买仪器类商品'
													}}
												</text>
												<text v-if="coupon.couponType == 3"
													>仅限购买店铺【{{ coupon.shopName }}】的商品</text
												>
												<text v-if="coupon.couponType == 4 || coupon.couponType == 2"
													>全商城商品通用</text
												>
											</view>
										</view>
										<view class="list-cell-btn">
											<view class="icon-used">
												<template v-if="coupon.couponBtnType == 0">
													<template v-if="coupon.couponPayWay == 2">
														<view class="icon-used-text"
															>{{ coupon.moneyCouponPrice }}采美豆</view
														>
														<view
															class="icon-used-btn receive"
															@click="handleToDeductCoupon(coupon)"
															>抵扣</view
														>
													</template>
													<template v-else-if="coupon.couponPayWay == 1">
														<view class="icon-used-text">购买</view>
														<view class="icon-used-btn receive" @click="handlePayCoupon(coupon)"
															>￥{{ coupon.moneyCouponPrice }}</view
														>
													</template>
													<template v-else>
														<view
															class="icon-used-btn receive"
															@click="receiveCoupon(coupon)"
															>领取</view
														>
													</template>
												</template>
												<view class="icon-used-btn make" v-if="coupon.couponBtnType == 1"
													>已领取</view
												>
											</view>
										</view>
									</view>
									<view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
								</view>
							</view>
						</template>
					</scroll-view>
				</div>
			</view>
		</tui-bottom-popup>
		<!-- 优惠明细 -->
		<tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
			<view class="tui-popup-box clearfix">
				<view class="title">优惠明细</view>
				<view class="tui-popup-close" @click="hidePopup(1)">
					<text class="iconfont icon-iconfontguanbi"></text>
				</view>
				<div class="tui-popup-main coupon">
					<view class="tui-popup-coupon">
						<view class="tui-popup-h1">
							<view class="tui-popup-text left">商品总额</view>
							<view class="tui-popup-text right bold">￥{{ totalAmount | NumFormat }}</view>
						</view>
						<view class="tui-popup-h1" v-if="reducedPrice > 0">
							<view class="tui-popup-text left">促销满减</view>
							<view class="tui-popup-text right bold red">-￥{{ reducedPrice | NumFormat }}</view>
						</view>
						<view class="tui-popup-h1" v-if="couponPrice > 0">
							<view class="tui-popup-text left">优惠券</view>
							<view class="tui-popup-text right bold red">-￥{{ couponPrice | NumFormat }}</view>
						</view>
						<view class="tui-popup-h1" v-if="svipReducedPrice > 0">
							<view class="tui-popup-text left">超级会员优惠</view>
							<view class="tui-popup-text right bold red">-￥{{ svipReducedPrice | NumFormat }}</view>
						</view>
						<view class="tui-popup-h1">
							<view class="tui-popup-text left bold">共减</view>
							<view class="tui-popup-text right bold red">-￥{{ totalDiscountAmount | NumFormat }}</view>
						</view>
						<view class="tui-popup-h1">
							<view class="tui-popup-text left bold">总价</view>
							<view class="tui-popup-text right bold"
								>￥{{ (totalAmount - totalDiscountAmount) | NumFormat }}</view
							>
						</view>
					</view>
				</div>
			</view>
		</tui-bottom-popup>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>

<script>
import authorize from '@/common/config/authorize.js'
import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
import tuiNomore from '@/components/tui-components/nomore/nomore'
import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
import cmUnitPopup from './cm-unit-popup.vue'
import modalLayer from '@/components/modal-layer'
import payMixins from '@/mixins/payMixins.js'
import cartMixins from './mixins/cartMixins.js'
import apisMixins from './mixins/apisMixins.js'
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'cartComponents',
	mixins: [payMixins,apisMixins,cartMixins],
	props: {
		pathType: {
			type: Number
		}
	},
	components: {
		tuiLoadmore,
		tuiNomore,
		activiPopup,
		couponTabs,
		cmUnitPopup,
		modalLayer
	},
	data() {
		return {
			StaticUrl: this.$Static, // 静态图片路径
			CustomBar: this.CustomBar, // 顶部导航栏高度
			isIphoneX: this.$store.state.isIphoneX,
			userId: 0,
			userIdentity: 0,
			alertType: '',
			isStock: '',
			handlerPros: {}, // 监听单挑促销商品
			failureList: [], // 失效商品列表
			goodsList: [], // 购物车的商品
			promotionsList: [], // 促销列表
			totalCouponList: [], // 优惠券算列表
			eligibleCoupons: [], // 最终需要用到优惠券
			setGoodData: '', // 确认订单的商品
			isCheckAll: false, // 是否全选
			kindCount: 0, // 购物车宝贝数量
			totalAmount: 0, // 商品最终合计总价
			allPrice: 0, // 所有价格
			totalOriginalPrice: 0, // 所有原价价
			reducedPrice: 0, // 促销满减
			couponPrice: 0, // 优惠金额
			svipReducedPrice: 0, // 超级会员优惠金额
			totalDiscountAmount: 0, // 总共减去金额
			isDiscount: false, // 控制显示优惠明细
			allCount: 0, // 被选中的产品数量
			isModallayer: false,
			skeletonShow: true,
			isshowDelbtn: false,
			isDisabled: false, // 供应商/店铺全选是否禁用状态
			isNoConfim: false,
			isEmpty: false, // 显示空购物车
			scrollHeight: 'auto',
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			pageSize: 10,
			pageNum: 1,
			submitIds: [],
			checkenProsList: [],
			popupShow: false,
			popupShow0: false,
			popupShow1: false,
			popupShow2: false,
			currentTab: 1,
			navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
			couponParam: {
				// 获取弹窗优惠券领取参数
				userId: 0,
				shopId: 0,
				status: 1,
				source: 2
			},
			productCouponList: [], // 优惠券弹窗列表
			isCouponEmpty: false,
			contentModalText: '', //操作文字提示语句
			modal: false,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '去升级',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
					},
					plain: false
				}
			],
			handlePros:{}
		}
	},
	created() {
		this.setScrollHeight()
		console.log('pathType', this.pathType)
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'isWxAuthorize'])
	},
	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)
		},
		TypeFormat(value) {
			switch (value) {
				case 0:
					return '活动券'
					break
				case 1:
					return '品类券'
					break
				case 2:
					return '用户专享券'
					break
				case 3:
					return '店铺券'
					break
				case 4:
					return '新用户券'
					break
			}
		}
	},
	methods: {
		async initData() {
			const userInfo = await this.$api.getStorage()
			this.isModallayer = false //遮罩层 防止多次点击
			this.skeletonShow = true //预加载圆圈
			this.isCheckAll = false //是否全选
			this.submitIds = []
			this.checkenProsList = []
			this.couponPrice = 0
			this.reducedPrice = 0
			this.totalDiscountAmount = 0
			this.isDiscount = false
			this.eligibleCoupons = []
			this.userId = this.couponParam.userId = userInfo.userId ? userInfo.userId : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.initGetCartGoodsList()
		},
		isShowVipFlag(pros) {
			if (pros.priceFlag != 1) {
				if (this.userIdentity == 4 && this.vipFlag == 1) {
					return true
				} else if (this.userIdentity == 2) {
					return true
				}
			}
		},
		initLogin() {
			this.$api.redirectTo('/pages/login/login')
		},
		clickPopupShow(pros, type) {
			this.popupShow = true
			this.handlerPros = pros
		},
		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.ProductService.QueryShoppingCartList({ userId: this.userId, source: 2 })
				.then(response => {
					this.skeletonShow = false
					let data = response.data
					this.kindCount = data.kindCount
					this.promotionsList = data.promotions
					this.totalCouponList = data.couponList
					this.$store.commit('updateAllNum', data.kindCount)
					if (data.list.length > 0 || data.invalid.length > 0) {
						this.isEmpty = false
					} else {
						this.isEmpty = true
					}
					if (data.list && data.list.length > 0) {
						this.goodsList = data.list
						this.goodsList.forEach((supplier, index) => {
							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()
					} else {
						this.goodsList = []
					}
					if (data.invalid && data.invalid.length > 0) {
						let newFailureList = [],
							isFailureLayer
						data.invalid.forEach((failure, index) => {
							if (failure.status == 1 || failure.status == 2) {
								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)
				})
		},
		handleCheckFailure(failure) {//  选择失效商品
			failure.isChecked = !failure.isChecked
			this.updateCheckAllBtn()
		},
		handlsCkecdPros(item, pro) {
			//为未选中的时候改变为true，反之为true
			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)
				}
			} 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
		},
		updateCheckAllBtn() {
			// 全选勾选判断
			let goodsCheckedLength = 0,
				goodsList = this.goodsList,
				failureList = this.failureList
			goodsList.forEach(item => {
				if (item.isChecked) {
					goodsCheckedLength++
				}
			})
			failureList.forEach(failureItem => {
				if (failureItem.isChecked) {
					goodsCheckedLength++
				}
			})
			if (this.isshowDelbtn) {
				this.isCheckAll = goodsCheckedLength === goodsList.length + failureList.length
			} else {
				this.isCheckAll = goodsCheckedLength === goodsList.length
			}
		},
		handleCheckShop(supplier) {
			//与单选商品类似
			if(supplier.isDisable){ return }
			supplier.isChecked = !supplier.isChecked
			this.setProductChecked(supplier)
			this.updateCheckAllBtn()
		},
		setProductChecked(supplier) {
			supplier.cartList.forEach(pros => {
				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 => {
					supplier.isChecked = this.isCheckAll && !supplier.isDisabled
					this.setProductChecked(supplier)
				})
			}
		},
		handleCheckAll() {
			//全选方法内调用方法
			this.isCheckAll = !this.isCheckAll
			if (!this.isCheckAll) {
				this.popupShow1 = false
			}
			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.originalPrice * pros.number
					})
					if (item.promotions.discount == 1) {
						// 支持促销叠加条件的店铺满减 执行
						prosDiscountNum = parseInt(prosPrice / item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
						console.log('店铺满减促销叠加通道叠加次数', `${prosDiscountNum}次`)
						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 {
						console.log('店铺满减促销非叠加通道')
						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 += _price
						if (pros.promotions && pros.promotions.type != 2 && pros.promotions.mode == 2) {
							if (pros.promotions.discount == 1) {
								discountNum = parseInt(_price / pros.promotions.touchPrice)
								console.log('单品满减促销叠加通道叠加次数', `${discountNum}次`)
								if (_price >= pros.promotions.touchPrice) {
									_price = _price - pros.promotions.reducedPrice * discountNum
									_reducedPrice += pros.promotions.reducedPrice * discountNum
								}
								_totalPrice += _price
							} else {
								console.log('单品满减非促销叠加通道')
								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
			let svipReducedPrice = 0
			let totalAmount = 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) {
						supplierPrice += pros.price * pros.number
						svipReducedPrice += item.svipReducedPrice
						if (pros.svipProductFlag == 1) {
							totalAmount += item.originalPrice
						} else {
							item.totalprice = supplierPrice
							totalAmount += item.totalprice
						}
						// 单品满减
						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
				this.totalAmount = totalAmount
			})
			// 总促销计算
			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.svipReducedPrice = svipReducedPrice
			// 最后统计商品原价
			this.totalOriginalPrice = originalPrice
			// 最后满减金额 = 店铺减去金额 + 单品减去金额 + 凑单减去金额
			this.reducedPrice = reducedPrice
			// 最终合计价格 = 	店铺满减合计 + 单品满减  + 正常合计 + 凑单满减
			this.allPrice = totalPrice
			console.log('最后统计商品原价', `${this.totalOriginalPrice}元`)
			console.log('最后满减金额', `${this.reducedPrice}元`)
			console.log('最终合计价格', `${this.allPrice}元`)
			// 计算优惠券
			if (this.totalCouponList.length > 0) {
				let eligibleCoupons = this.calculationCoupon()
				if (eligibleCoupons.length > 0) {
					this.eligibleCoupons.splice(0, this.eligibleCoupons.length)
					this.eligibleCoupons = eligibleCoupons.sort((a, b) => b.couponAmount - a.couponAmount)
					this.couponPrice = this.eligibleCoupons[0].couponAmount
				} else {
					this.couponPrice = 0
				}
			}
			// 最终优惠金额 = 促销优惠金额 + 优惠券优惠金额 + 超级会员优惠金额
			this.totalDiscountAmount = this.reducedPrice + this.couponPrice + this.svipReducedPrice
			console.log('最终优惠金额', `${this.totalDiscountAmount}元`)
			// 控制显示优惠明细
			this.isDiscount = this.totalDiscountAmount > 0 ? true : false
		},
		collecTotalPrice(pros) {
			// 凑单满减计算勾选的凑单商品总价
			let price
			this.checkenProsList.find(el => {
				if (pros.skuId == el.skuId) {
					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
					}
				})
			})
		},
		calculationCoupon() {
			// 优惠券计算
			let eligibleCoupons = []
			this.goodsList.forEach(shop => {
				shop.cartList.forEach(pros => {
					if (pros.isChecked) {
						this.totalCouponList.forEach(coupon => {
							//循环优惠券
							switch (coupon.couponType) {
								case 0: // 活动券
									if (coupon.productType == 1) {
										// 活动券-全商城商品
										if (this.allPrice >= coupon.touchPrice) {
											eligibleCoupons.push(coupon)
										}
									} else if (coupon.productType == 2) {
										// 活动券-指定商品
										if (coupon.productIds && coupon.productIds.includes(pros.productId)) {
											if (this.allPrice >= coupon.touchPrice) {
												eligibleCoupons.push(coupon)
											}
										}
									}
									break
								case 1: // 品类券适用于产品或者仪器 categoryType(commodityType) : 1 产品  2 仪器
									if (coupon.categoryType && coupon.categoryType == pros.commodityType) {
										if (this.allPrice >= coupon.touchPrice) {
											eligibleCoupons.push(coupon)
										}
									}
									break
								case 2: // 用户专享券 适用于商城全部商品
									if (this.allPrice >= coupon.touchPrice) {
										eligibleCoupons.push(coupon)
									}
									break
								case 3: // 店铺券适用于某个供应商的全部商品
									if (coupon.shopId && pros.supplierId == coupon.shopId) {
										if (this.allPrice >= coupon.touchPrice) {
											eligibleCoupons.push(coupon)
										}
									}
									break
								case 4: //新用户券 适用于商城全部商品
									if (this.allPrice >= coupon.touchPrice) {
										eligibleCoupons.push(coupon)
									}
									break
							}
						})
					} else {
						console.log('没有选择商品')
						return
					}
				})
			})
			return eligibleCoupons
		},
		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()
		},
		changeInput(pros) {
			//输入商品数量更新
			pros.isStep = false
		},
		changeNnmber(e, item, pros) {
			//输入商品数量更新
			let _value = Number(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 (_value % pros.min != 0) {
				pros.isStep = true
				pros.number = pros.min
			} else {
				pros.isStep = false
				pros.number = e.detail.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
					}
				})
			}
		},
		showDelManager() {
			//显示删除商品管理
			this.isshowDelbtn = true
			if (this.isCheckAll) {
				this.updateBothCheckBtn()
			} else {
				this.goodsList = this.goodsList.map(suppler=>{
					if (suppler.isChecked) {
						suppler.cartList.forEach(pros => {
							pros.isChecked = true
						})
					}
					return suppler
				})
				this.updateCheckAllBtn()
			}
			// 失效也被勾选
			this.failureList = this.failureList.map(el=>{
				if (el.isFailureLayer) {
					el.isFailureLayer = false
				}
				return el
			})
		},
		hideDelManage() {
			//隐藏删除商品管理
			this.isshowDelbtn = false
			let isFailureLayer,
				newFailureList = []
			if (this.isCheckAll) {
				this.updateBothCheckBtn()
			} else {
				// 失效商品取消勾选
				this.goodsList = this.goodsList.map(suppler=>{
					if (suppler.isDisabled) {
						suppler.isChecked = false
					}
					suppler.cartList.forEach(pros => {
						if (pros.validFlag == 3) {
							pros.isChecked = false
						}
					})
					return suppler
				})
				this.updateCheckAllBtn()
			}
			this.failureList = this.failureList.map(el=>{
				if (el.failureState == 1 || el.failureState == 2) {
					el.isFailureLayer = true
				} else {
					el.isFailureLayer = false
				}
				return el
			})
		},
		
		goIndex() {
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			})
		},
		goSuppile(shop) {
			//跳转店铺
			if (shop.shopType === 2) {
				return
			}
			this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${shop.shopId}`)
		},
		goNavto(url) {
			uni.navigateTo({
				url
			})
		},
		navToListPage(id) {
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
		},
		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 = {
					1: '商品已丢失',
					2: '商品已停售',
					3: '商品已下架',
					4: '商品已售罄',
					5: '价格仅会员可见，您不能购买',
					6: '未公开价格',
					7: '库存不足',
					8: '价格仅医美机构可见'
				}
			Object.keys(stateTextObject).forEach(key => {
				if (key == state) {
					stateText = stateTextObject[key]
				}
			})
			return stateText
		},
		setHeaderBtnPosi() {
			// 获得胶囊按钮位置信息
			let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
			return headerBtnPosi
		},
		setSysteminfo() {
			let systeminfo
			uni.getSystemInfo({
				// 获取设备信息
				success: res => {
					systeminfo = res
				}
			})
			return systeminfo
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		queryPopupCoupons() {
			// 获取优惠券列表调用 apisMixins -> apiShoppingCartGetCoupon
			this.apiShoppingCartGetCoupon(this.couponParam)
		},
		receiveCoupon(coupon) {
			// 点击优惠券领取按钮,友盟埋点收集领取优惠券
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_cartCouponReceive', {
					Um_Key_PageName: '机构购物车',
					Um_Key_EvenName: '领取优惠券',
					Um_Key_CouponId: `${coupon.couponId}`
				})
			}
			// 领取优惠券调用 apisMixins -> apiReceiveCoupon
			this.apiReceiveCoupon({userId: this.couponParam.userId,couponId: coupon.couponId,source: 1})
		},
		handleToDeductCoupon(coupon) {
			// 点击采美豆抵扣优惠券
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
					Um_Key_PageName: '领券中心',
					Um_Key_EvenName: '抵扣优惠券',
					Um_Key_CouponId: `${coupon.couponId}`
				})
			}
			if (this.hasLogin) {
				if (this.userIdentity === 1 || this.userIdentity === 3) {
					this.$util.msg('您的身份暂不支持领取优惠券', 2000)
					return
				}
				// 调用 apisMixins -> apiWeChatPayCouponBeans
				this.apiWeChatPayCouponBeans({ source: 1, userId: this.couponParam.userId,couponId: coupon.couponId })
			} else {
				this.$api.navigateTo('/pages/login/login')
			}
		},
		handlePayCoupon(coupon) {
			// 点击购买优惠券,友盟埋点收集购买优惠券
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_cartCouponBuy', {
					Um_Key_PageName: '机构购物车',
					Um_Key_EvenName: '购买优惠券',
					Um_Key_CouponId: `${coupon.couponId}`
				})
			}
			// 生成购买优惠券记录Id调用 apisMixins -> apiReceiveCoupon
			this.apiWeChatCouponRecord({ userId: this.userId,couponId: coupon.couponId },coupon)
		},
		hideMobel() {
			this.modal = false
		},
		handleClick(e) {
			//个人机构跳转升级页面
			if (e.index == 1) {
				this.$api.navigateTo('/pages/login/apply')
			}
			this.modal = false
		},
		showPopup(index, shop) {
			// 显示popup弹窗
			switch (index) {
				case 0:
					// 友盟埋点收集领券按钮
					if (process.env.NODE_ENV != 'development') {
						this.$uma.trackEvent('Um_Event_cartCouponButton', {
							Um_Key_PageName: '机构购物车',
							Um_Key_EvenName: '点击领券按钮',
							Um_Key_userId: `${this.userId}`
						})
					}
					this.currentTab = 0
					this.couponParam.status = 1
					this.couponParam.shopId = shop.shopId
					this.queryPopupCoupons()
					this.popupShow0 = true
					break
				case 1:
					this.popupShow1 = true
					break
			}
		},
		handleShouUnitPopup(pros){// 规格弹窗
			this.popupShow2 = true
			this.handlePros = pros
		},
		hidePopup(index) {
			// 隐藏popup弹窗
			switch (index) {
				case 0:
					this.popupShow0 = false
					break
				case 1:
					this.popupShow1 = false
					break
			}
		},
		couponChange(e) {
			this.currentTab = e.index
			switch (this.currentTab) {
				case 0:
					this.couponParam.status = 1
					this.queryPopupCoupons()
					break
				case 1:
					this.couponParam.status = 2
					this.queryPopupCoupons()
					break
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f7f7f7;
	height: auto;
}
.cart-content {
	position: relative;
}
.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 {
			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 #e15616;
		color: #e15616;
		float: right;
		text-align: center;
		&.none {
			display: none;
		}
	}
}
.checkbox-box {
	display: flex;
	align-items: center;
	.checkbox {
		display: flex;
		margin: 0;
		padding: 5rpx;
		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: #999999;
		&.icon-yixuanze {
			color: $color-system;
		}
	}
	&.disabled {
		.checkbox {
			color: #999999;
		}
	}
	.text {
		font-size: $font-size-24;
		margin-left: 10rpx;
	}
}
.goods-list {
	width: 100%;
	height: auto;
	background-color: #f7f7f7;
	.goods-item {
		width: 702rpx;
		padding: 0 24rpx;
		background: #ffffff;
		margin-bottom: 24rpx;
	}
	.shoptitle {
		height: 80rpx;
		line-height: 80rpx;
		.checkbox-box {
			float: left;
			line-height: 80rpx;
			display: inline-block;
			box-sizing: border-box;
		}
		.text {
			width: 400rpx;
			float: left;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 80rpx;
			margin-left: 20rpx;
			font-size: $font-size-28;
			color: $text-color;
			text-align: left;
			font-weight: bold;
		}
		.text-coupon {
			float: right;
			line-height: 80rpx;
			font-size: $font-size-30;
			color: #e15616;
		}
		.floor-item-act {
			width: 120rpx;
			height: 80rpx;
			text-align: center;
			box-sizing: border-box;
			float: left;
			padding: 24rpx 0;
			margin-left: 20rpx;
		}
	}
	.goods-pros {
		width: 100%;
		height: auto;
		margin-bottom: 20rpx;
	}
	.goods-pros-t {
		display: flex;
		align-items: center;
		width: 100%;
		height: 210rpx;
		padding: 0 0 26rpx 0;
		.checkbox-box {
			// padding: 10rpx;
		}
		.pros-img {
			width: 210rpx;
			height: 100%;
			border-radius: 10rpx;
			margin: 0 20rpx;
			border: 1px solid #f3f3f3;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				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-26;
			line-height: 40rpx;
			color: $text-color;
			float: left;
			display: flex;
			justify-content: flex-end;
			font-weight: bold;
			.money {
				color: #ff2a2a;
				font-size: $font-size-26;
			}
			.money-sign {
				font-size: $font-size-24;
				color: #ff2a2a;
			}
		}
	}
	.pros-product {
		width: 416rpx;
		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: 15rpx;
			.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;
		}
		.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 #e15616;
				color: #e15616;
				float: left;
				border-radius: 20rpx;
				margin-left: 16rpx;
			}
		}
		.productprice {
			width: 100%;
			height: 48rpx;
			margin: 30rpx 0 0 0;
			.price {
				line-height: 48rpx;
				font-size: $font-size-26;
				width: 48%;
				color: #ff2a2a;
				float: left;
				font-weight: bold;
				&.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;
					.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: 48rpx;
						line-height: 48rpx;
						background: #fff;
						border-radius: 4rpx;
						text-align: center;
						font-size: $font-size-24;
					}
				}
				.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;
		}
	}
}
.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;
		border-bottom: 1px solid #ebebeb;
		.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: 730rpx;
				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;
			}
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 24rpx 0 24rpx;
	.tui-popup-close {
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		right: 0;
		top: 24rpx;
		line-height: 90rpx;
		text-align: center;
		color: #b2b2b2;
		.icon-iconfontguanbi {
			font-size: $font-size-40;
		}
	}
	.title {
		font-size: $font-size-34;
		color: $text-color;
		line-height: 88rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 88rpx;
		font-weight: bold;
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		&.coupon {
			padding-bottom: 40rpx;
			.coupon-empty {
				width: 100%;
				height: 600rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: fixed;
				background: $bg-color;
				.empty-container-image {
					width: 150rpx;
					height: 150rpx;
					margin-bottom: 0;
					margin-top: 0;
				}
				.error-text {
					font-size: $font-size-28;
					color: #999999;
					line-height: 88rpx;
				}
			}
		}
		.tui-popup-scroll {
			width: 100%;
			height: 600rpx;
			.coupon-list {
				width: 100%;
				height: 200rpx;
				margin-top: 24rpx;
				box-sizing: border-box;
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
				background-size: cover;
				&:last-child {
					margin-bottom: 24rpx;
				}
				.list-cell-le {
					width: 224rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 37rpx 0;
					float: left;
					.coupon-maxMoney {
						width: 100%;
						height: 78rpx;
						line-height: 78rpx;
						font-size: 56rpx;
						color: #ffffff;
						text-align: center;
						.small {
							font-size: $font-size-24;
						}
					}
					.coupon-minMoney {
						width: 100%;
						height: 33rpx;
						line-height: 33rpx;
						font-size: $font-size-24;
						color: #ffffff;
						text-align: center;
					}
				}
				.list-cell-ri {
					width: 478rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 20rpx 24rpx 0 24rpx;
					float: right;
					.list-cell-top {
						width: 100%;
						height: 121rpx;
						float: left;
						border-bottom: 1px solid #e1e1e1;
						.list-cell-type {
							width: 286rpx;
							height: 100%;
							float: left;
							.list-cell-tags {
								width: 100%;
								height: 32rpx;
								margin-bottom: 7rpx;
								.tags {
									display: inline-block;
									padding: 0 10rpx;
									height: 32rpx;
									line-height: 32rpx;
									background-color: #ffdcce;
									color: #f94b4b;
									font-size: $font-size-20;
									border-radius: 8rpx;
									text-align: center;
									float: left;
								}
							}
							.list-cell-texts {
								width: 100%;
								height: auto;
								line-height: 35rpx;
								text-overflow: ellipsis;
								display: -webkit-box;
								word-break: break-all;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								font-size: 26rpx;
								color: #333333;
							}
						}
						.list-cell-btn {
							width: 128rpx;
							height: 100%;
							float: right;
							.icon-used {
								width: 100%;
								height: 100%;
								box-sizing: border-box;
								padding-top: 28rpx;
								.icon-used-text {
									width: 100%;
									text-align: center;
									line-height: 26rpx;
									font-size: $font-size-20;
									color: #f94b4b;
								}
								.icon-used-btn {
									width: 128rpx;
									height: 48rpx;
									border-radius: 28rpx;
									line-height: 48rpx;
									font-size: $font-size-26;
									text-align: center;
									&.receive {
										background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
										color: #ffffff;
									}
									&.make {
										border: solid 1px #f94b4b;
										color: #f94b4b;
									}
								}
							}
						}
					}
					.list-cell-time {
						width: 100%;
						height: 58rpx;
						line-height: 58rpx;
						text-align: left;
						font-size: $font-size-20;
						color: #999999;
					}
				}
			}
		}
		.tui-popup-coupon {
			width: 100%;
			height: 500rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.tui-popup-h1 {
				width: 100%;
				height: 66rpx;
				display: flex;
				align-items: center;
				.tui-popup-text {
					flex: 1;
					height: 66rpx;
					line-height: 66rpx;
					font-size: $font-size-30;
					color: #333333;
					&.red {
						color: #f94b4b;
					}
					&.bold {
						font-weight: bold;
					}
					&.left {
						text-align: left;
					}
					&.right {
						text-align: right;
					}
				}
			}
		}
	}
}
.footer {
	width: 100%;
	background-color: #ffffff;
	height: 110rpx;
	position: fixed;
	bottom: 0rpx;
	z-index: 990;
	.footer-le {
		width: 520rpx;
		height: 100%;
		padding-left: 24rpx;
		float: left;
		box-sizing: border-box;
		.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: 360rpx;
			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: left;
				.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: #ff2a2a;
				}
				.money-popup {
					height: 45rpx;
					line-height: 45rpx;
					display: inline-block;
					float: right;
					font-size: $font-size-24;
					color: #ff2a2a;
					.icon-xiangshangjiantou {
						font-size: $font-size-30;
						margin-left: 5rpx;
					}
				}
			}
			.sum-price {
				width: 100%;
				height: 45rpx;
				line-height: 45rpx;
				font-size: $font-size-30;
				color: $text-color;
				float: left;
				font-weight: normal;
				text-align: left;
				&.none {
					height: 90rpx;
					line-height: 90rpx;
				}
				.money {
					color: #ff2a2a;
				}
				.money-sign {
					font-size: $font-size-24;
					color: #ff2a2a;
				}
			}
		}
	}
	.footer-ri {
		width: 230rpx;
		height: 100%;
		float: right;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		box-sizing: border-box;
		padding: 13rpx 15rpx 13rpx 5rpx;
		&.none {
			display: none;
		}
		.btn {
			width: 200rpx;
			height: 100%;
			background: linear-gradient(135deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
			font-size: $font-size-28;
			line-height: 84rpx;
			color: #ffffff;
			display: flex;
			border-radius: 42rpx;
			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);
			}
		}
	}
}
</style>