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="checkShop(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 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="ischeck(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>
										<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="productprice">
												<!--使用过滤器对总价改变-->
												<view
													class="price"
													:class="PromotionsFormat(pros.promotions) ? 'disabled' : ''"
												>
													<text>￥</text>
													{{
														(PromotionsFormat(pros.promotions)
															? 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
												v-show="pros.actStatus == 1 && pros.promotions"
												class="floor-item-act"
											>
												<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>
											</view>
											<view
												v-if="pros.actStatus == null && pros.ladderFlag == 1"
												class="floor-item-act"
											>
												<view class="floor-tags" @click.stop="clickPopupShow(pros, 2)"
													>阶梯价格</view
												>
											</view>
										</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="deletefailureList"
								><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="ischeckFailure(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>
									<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="toConfirmation">去结算({{ 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="deleteList">删除</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="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="toConfirmation">去结算({{ 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="deleteList">删除</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>
		<!-- 促销活动弹窗 -->
		<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">
												<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
											</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">
												<view
													class="icon-used-btn receive"
													v-if="currentTab == 0"
													@click="receiveCoupon(coupon)"
													>领取</view
												>
												<view class="icon-used-btn make" v-if="currentTab == 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">
							<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>
	</view>
</template>

<script>
import authorize from '@/common/config/authorize.js'
import tuiSkeleton from '@/components/tui-skeleton/tui-skeleton'
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 modalLayer from '@/components/modal-layer'
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'cartComponents',
	props: {
		pathType: {
			type: Number
		}
	},
	components: {
		tuiSkeleton,
		tuiLoadmore,
		tuiNomore,
		activiPopup,
		couponTabs,
		modalLayer
	},
	data() {
		return {
			StaticUrl: this.$Static, // 静态图片路径
			CustomBar: this.CustomBar, // 顶部导航栏高度
			isIphoneX: this.$store.state.isIphoneX,
			userId: '',
			alertType: '',
			isStock: '',
			handlerPros: {}, // 监听单挑促销商品
			failureList: [], // 失效商品列表
			goodsList: [], // 购物车的商品
			promotionsList: [], // 促销列表
			totalCouponList: [], // 优惠券算列表
			eligibleCoupons: [], // 最终需要用到优惠券
			delGoodsList: '', // 要删除的商品
			setGoodData: '', // 确认订单的商品
			isCheckAll: false, // 是否全选
			kindCount: 0, // 购物车宝贝数量
			totalAmount: 0, //商品最终合计总价
			allPrice: 0, // 所有价格
			totalOriginalPrice: 0, // 所有原价价
			reducedPrice: 0, // 满减
			couponPrice: 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: [],
			popupShow: false,
			popupShow0: false,
			popupShow1: false,
			currentTab: 1,
			navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
			couponParam: {
				// 获取弹窗优惠券领取参数
				userId: 0,
				shopId: 0,
				status: 1,
				source: 2
			},
			productCouponList: [], // 优惠券弹窗列表
			isCouponEmpty: false
		}
	},
	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: {
		initData() {
			this.isModallayer = false //遮罩层 防止多次点击
			this.skeletonShow = true //预加载圆圈
			this.isCheckAll = false //是否全选
			this.submitIds = []
			this.couponPrice = 0
			this.totalDiscountAmount = 0
			this.isDiscount = false
			this.eligibleCoupons = []
			this.$api.getStorage().then(resolve => {
				this.userId = this.couponParam.userId = resolve.userId ? resolve.userId : 0
				this.initGetCartGoodsList()
			})
		},
		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((item, index) => {
							item.cartList.forEach(pros => {
								pros.shopId = item.shopId
								pros.isStep = 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)
				})
		},
		ischeckFailure(failure) {
			failure.isChecked = !failure.isChecked
			this.updateCheckAllBtn()
		},
		ischeck(item, pro) {
			//为未选中的时候改变为true，反之为true
			pro.isChecked = !pro.isChecked
			if (pro.isChecked) {
				if (!this.submitIds.includes(pro.productId * 1)) {
					this.submitIds.push(pro.productId)
				}
			} else {
				var lent = this.submitIds.indexOf(pro.productId * 1)
				if (lent >= 0) {
					this.submitIds.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
			}
		},
		checkShop(item) {
			//与单选商品类似
			item.isChecked = !item.isChecked
			this.setProductChecked(item)
			this.updateCheckAllBtn()
		},
		setProductChecked(item) {
			item.cartList.forEach(pros => {
				if (item.isChecked) {
					pros.isChecked = true
					if (!this.submitIds.includes(pros.productId * 1)) {
						this.submitIds.push(pros.productId)
					}
				} else {
					pros.isChecked = false
					var lent = this.submitIds.indexOf(pros.productId * 1)
					if (lent >= 0) {
						this.submitIds.splice(lent, 1)
					}
				}
			})
		},
		updateBothCheckBtn() {
			if (this.isshowDelbtn) {
				// 当管理删除按钮出现时,失效的商品可被选择
				this.goodsList.forEach(item => {
					item.isChecked = this.isCheckAll
					this.setProductChecked(item)
				})
				//删除按钮 全选包括失效商品勾选
				this.failureList.forEach(failureItem => {
					failureItem.isChecked = this.isCheckAll
				})
			} else {
				this.goodsList.forEach(item => {
					item.isChecked = this.isCheckAll && !item.isDisabled
					this.setProductChecked(item)
				})
			}
		},
		checkAll() {
			//全选方法内调用方法
			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 totalOriginalPrice = 0 //商铺合计原价
					item.cartList.forEach(pros => {
						prosPrice += pros.price * pros.number
						totalOriginalPrice += pros.originalPrice * pros.number
					})
					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 _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 (_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) {
						supplierPrice += pros.price * pros.number
						// 单品满减
						if (pros.promotions && pros.promotions.type * 1 === 1 && pros.promotions.mode * 1 === 2) {
							// 单品满减-重新计算供应商总价/满减金额
							if (pros.price * pros.number >= pros.promotions.touchPrice) {
								supplierPrice -= pros.promotions.reducedPrice
								supplierReducedPrice += pros.promotions.reducedPrice
							}
						}
					}
				})
				// 店铺满减
				if (item.promotions && item.promotions.mode * 1 === 2) {
					// 店铺满减-计算供应商总价/满减金额
					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 = totalPrice
			})
			// 总促销计算
			this.promotionsList.forEach(promotions => {
				// 凑单满减
				if (promotions.mode === 2 && promotions.type === 2) {
					let total = 0
					promotions.productList.forEach(pros => {
						if (this.submitIds.includes(pros.productId * 1)) {
							total += pros.number * pros.price
						}
					})
					if (total >= promotions.touchPrice) {
						totalPrice -= promotions.reducedPrice
						reducedPrice += promotions.reducedPrice
					}
				}
			})
			// 最后统计商品原价
			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
			console.log('总共减去优惠金额', this.totalDiscountAmount)
			// 控制显示优惠明细
			if (this.totalDiscountAmount > 0) {
				this.isDiscount = true
			} else {
				this.isDiscount = false
			}
		},
		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
					}
				})
			}
		},
		updateShoppogNum(pros) {
			//加减购物车商品更新到后台
			this.ProductService.ShoppingCartUpdate({
				userId: this.userId,
				productId: pros.productId,
				productCount: pros.number,
				source: 2
			})
				.then(response => {
					this.isshowDelbtn = false
					this.initGetCartGoodsList()
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		toConfirmation() {
			//跳转确认订单页面
			let setGoodsList = []
			this.goodsList.forEach(res => {
				let products = res.cartList
				products.forEach(pros => {
					if (pros.isChecked) {
						setGoodsList.push(pros.productId)
					}
				})
			})
			if (setGoodsList == '') {
				this.$util.msg('请先选择结算商品~', 2000)
				return
			} else {
				this.isNoConfim = false
				this.goodsList.forEach(el => {
					el.cartList.forEach(pros => {
						if (pros.isChecked) {
							if (pros.number < pros.min) {
								this.isNoConfim = true
							}
						}
					})
				})
				if (this.isNoConfim) {
					this.$util.modal(
						'',
						'有商品的购买量没达到最小起订量，请修改数量后再次提交结算',
						'去修改',
						'',
						false,
						() => {}
					)
					return
				}
				let productIds = ''
				this.goodsList.forEach(el => {
					//获取勾选的商品ID拼接字符串逗号隔开，最后一个逗号去掉
					el.cartList.forEach(pros => {
						if (pros.isChecked) {
							productIds += pros.productId + ','
						}
					})
				})
				let cartPramsData = { productIds: productIds.substring(0, productIds.lastIndexOf(',')) }
				// 友盟埋点购物车去结算点击事件
				if (process.env.NODE_ENV != 'development') {
					this.$uma.trackEvent('Um_Event_shoppingCartConfirmOrder', {
						Um_Key_PageName: '去结算',
						Um_Key_SourcePage: '底部菜单购物车'
					})
				}
				this.$api.navigateTo(`/pages/user/order/create-order?data=${JSON.stringify({ data: cartPramsData })}`)
			}
		},
		showDelManager() {
			//显示删除商品管理
			this.isshowDelbtn = true
			if (this.isCheckAll) {
				this.updateBothCheckBtn()
			} else {
				this.goodsList.forEach(item => {
					if (item.isChecked) {
						item.cartList.forEach(pros => {
							pros.isChecked = true
						})
					}
				})
				this.updateCheckAllBtn()
			}
			// 失效也被勾选
			this.failureList.forEach(failureItem => {
				if (failureItem.isFailureLayer) {
					failureItem.isFailureLayer = false
				}
			})
		},
		hideDelManage() {
			//隐藏删除商品管理
			this.isshowDelbtn = false
			let isFailureLayer,
				newFailureList = []
			if (this.isCheckAll) {
				this.updateBothCheckBtn()
			} else {
				// 失效商品取消勾选
				this.goodsList.forEach(item => {
					if (item.isDisabled) {
						item.isChecked = false
					}
					item.cartList.forEach(pros => {
						if (pros.validFlag == 3) {
							pros.isChecked = false
						}
					})
				})
				this.updateCheckAllBtn()
			}
			this.failureList.forEach((failure, index) => {
				if (failure.failureState == 1 || failure.failureState == 2) {
					isFailureLayer = true
				} else {
					isFailureLayer = false
				}
				newFailureList.push(Object.assign({}, failure, { isFailureLayer: isFailureLayer }))
			})
			this.failureList = newFailureList
		},
		deleteList() {
			//删除购物车商品
			this.delGoodsList = []
			this.goodsList.forEach(delitem => {
				let products = delitem.cartList
				products.forEach(pros => {
					if (pros.isChecked) {
						this.delGoodsList += pros.productId + ','
					}
				})
			})
			this.failureList.forEach(failure => {
				if (failure.isChecked) {
					this.delGoodsList += failure.productId + ','
				}
			})
			if (this.delGoodsList.length == 0) {
				this.$util.msg('请选择要删除的商品~', 2000)
				return
			} else {
				this.$util.modal('', '确定删除选中的商品吗？', '确定', '取消', true, () => {
					this.ProductService.ShoppingCartDelete({
						userId: this.userId,
						productIds: this.delGoodsList
					})
						.then(response => {
							this.$util.msg('删除成功', 2000)
							setTimeout(() => {
								this.isshowDelbtn = false
								this.initGetCartGoodsList()
							}, 2000)
						})
						.catch(error => {
							this.$util.msg(error.msg, 2000)
						})
				})
			}
		},
		deletefailureList() {
			this.failureList.forEach(failure => {
				this.delGoodsList += failure.productId + ','
			})
			this.$util.modal('', '确定清空全部失效商品吗？', '确定', '取消', true, () => {
				this.ProductService.ShoppingCartDelete({
					userId: this.userId,
					productIds: this.delGoodsList
				})
					.then(response => {
						this.$util.msg('删除成功', 2000)
						setTimeout(() => {
							this.isshowDelbtn = false
							this.initGetCartGoodsList()
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		goIndex() {
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			})
		},
		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: '库存不足'
				}
			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() {
			// 获取弹窗优惠券列表
			this.ProductService.ShoppingCartGetCoupon(this.couponParam)
				.then(response => {
					let data = response.data
					this.navbar[0].num = data.notCouponNum
					this.navbar[1].num = data.couponNum
					if (data.couponList && data.couponList.length > 0) {
						this.productCouponList = data.couponList
						this.isCouponEmpty = false
					} else {
						this.isCouponEmpty = true
					}
				})
				.catch(error => {
					console.log('获取优惠券列表失败')
				})
		},
		receiveCoupon(coupon) {
			// 点击优惠券领取按钮
			this.ProductService.ReceiveCoupon({
				userId: this.couponParam.userId,
				couponId: coupon.couponId,
				source: 2
			})
				.then(response => {
					this.$util.msg('领取成功', 1500, true, 'success')
					setTimeout(() => {
						this.currentTab = 1
						this.couponParam.status = 2
						this.queryPopupCoupons()
					}, 1500)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		showPopup(index, shop) {
			// 显示popup弹窗
			switch (index) {
				case 0:
					this.currentTab = 0
					this.couponParam.status = 1
					this.couponParam.shopId = shop.shopId
					this.queryPopupCoupons()
					this.popupShow0 = true
					break
				case 1:
					this.popupShow1 = true
					break
			}
		},
		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;
			.floor-tags {
				height: 28rpx;
				border-radius: 6rpx;
				background-color: #ffffff;
				line-height: 28rpx;
				color: $color-system;
				text-align: center;
				display: inline-block;
				padding: 0 16rpx;
				font-size: $font-size-20;
				border: 1px solid #e15616;
				float: right;
			}
		}
	}
	.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;
			image {
				width: 100%;
				height: 100%;
				border-radius: 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;
		}
		.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;
			.floor-tags {
				height: 28rpx;
				border-radius: 6rpx;
				background-color: #ffffff;
				line-height: 28rpx;
				color: $color-system;
				text-align: center;
				display: inline-block;
				padding: 0 16rpx;
				font-size: $font-size-20;
				border: 1px solid #e15616;
				float: left;
			}
		}
	}
}
.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: 57rpx;
								.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>