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

<template name="navbars">
	<view>
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view v-else 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"
										:style="{ color: item.isDisable ? '#efefef' : '' }"
										:class="[item.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
									></view>
								</view>
								<view class="text" @click.stop="goSuppile(item)">{{ item.shopName }} </view>
							</view>
							<view class="productlist">
								<view class="goods-pros" v-for="(pros, idx) in item.cartList" :key="idx">
									<view class="goods-pros-t">
										<!--选择商品-->
										<view class="checkbox-box" @click.stop="handlsCkecdPros(item, pros)">
											<view
												class="checkbox iconfont"
												:style="{ color: pros.isDisable ? '#EFEFEF' : '' }"
												: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>
											<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">
														<text>￥</text> {{ pros.price | NumFormat }}
													</view>
													<view
														class="count"
														v-if="pros.validFlag == 1"
														: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>
											</template>
										</view>
									</view>
								</view>
							</view>
							<view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none' : 'show']">
								<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>
									<view class="pros-product">
										<view class="producttitle">{{ failure.name }}</view>
										<view class="productspec">规格:{{ failure.unit ? failure.unit : '' }}</view>
										<view class="productstate">{{ failure.status | failurefilters }}</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="handleCheckAll">
								<button
									class="checkbox iconfont"
									:class="[isCheckAll ? 'icon-yixuanze' : 'icon-weixuanze']"
								></button>
								<view class="text">全选</view>
							</view>
							<view class="sum">
								<view class="sum-price none">
									总价:<text class="money-sign">￥</text
									><text class="money">{{ allPrice | NumFormat }}</text>
								</view>
							</view>
						</view>
						<view v-if="!isshowDelbtn" class="footer-ri">
							<view class="btn hanld-btn" @tap="hanldlerToConfirm">去结算({{ allCount }})</view>
						</view>
						<view v-else class="footer-del">
							<view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
							<view class="btn btn-confirm" @tap.stop="handleDeleteCart">删除</view>
						</view>
					</view>
				</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 none">
									总价:<text class="money-sign">￥</text
									><text class="money">{{ allPrice | NumFormat }}</text>
								</view>
							</view>
						</view>
						<view v-if="!isshowDelbtn" class="footer-ri">
							<view class="btn hanld-btn" @tap="hanldlerToConfirm">去结算({{ allCount }})</view>
						</view>
						<view v-else class="footer-del">
							<view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
							<view class="btn btn-confirm" @tap.stop="handleDeleteCart">删除</view>
						</view>
					</view>
				</template>
			</view>
			<view v-else class="cart-content empty">
				<view class="empty-container">
					<image
						class="empty-container-image"
						:src="staticUrl + 'icon_cart_empty@2x.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>
		<!-- 弹窗提示 -->
		<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 cmUnitPopup from './cm-unit-popup.vue'
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: 'cm-cart-temp',
	mixins: [payMixins, apisMixins, cartMixins],
	props: {
		pathType: {
			type: Number
		}
	},
	components: {
		cmUnitPopup
	},
	data() {
		return {
			staticUrl: this.global.staticUrl,
			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, // 所有价格
			allCount: 0, // 被选中的产品数量
			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,
			popupShow2: false,
			currentTab: 1,
			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: '#F3B574'
					},
					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: {
		failurefilters(state) {
			const map = {
				3: '商品已下架'
			}
			return map[state]
		},
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		},
		totalprice(val, count) {
			//单件商品的价格 × 数量
			return (val * count).toFixed(2)
		}
	},
	methods: {
		async initData() {
			const userInfo = await this.$api.getStorage()
			this.skeletonShow = true //预加载圆圈
			this.isCheckAll = false //是否全选
			this.submitIds = []
			this.checkenProsList = []
			this.userId = userInfo.userId ? userInfo.userId : 0
			this.initGetCartGoodsList()
		},
		async initGetCartGoodsList() {
			//初始化购物车 index:1
			const res = await this.ProductService.QueryShoppingCartList({ userId: this.userId, source: 2 })
			let data = res.data
			console.log('data', data)
			this.kindCount = data.kindCount
			this.$store.commit('updateAllNum', data.kindCount)
			if (data.list.length === 0 && data.invalid.length === 0) {
				this.isEmpty = true
			}
			this.infoCartData(data.list)
			this.infoInvalidData(data.invalid)
			this.skeletonShow = false
		},
		infoCartData(data) {
			//初始化有效商品
			this.goodsList = data.map((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)
						}
					}
				})
				return supplier
			})
			this.totalShopPeice()
		},
		infoInvalidData(data) {
			// 初始化失效商品
			this.failureList = data.map((failure, index) => {
				failure.isFailureLayer = false
				if (failure.status == 1 || failure.status == 2) {
					failure.isFailureLayer = true
				}
				return failure
			})
		},
		clickPopupShow(pros, type) {
			this.popupShow = true
			this.handlerPros = pros
		},
		handleCheckFailure(failure) {
			//  选择失效商品
			failure.isChecked = !failure.isChecked
			this.updateCheckAllBtn()
		},
		handlsCkecdPros(item, pro) {
			//为未选中的时候改变为true，反之为true
			if (!this.isshowDelbtn) {
				if (pro.isDisable) {
					return
				}
			}
			pro.isChecked = !pro.isChecked
			if (pro.isChecked) {
				if (!this.submitIds.includes(pro.skuId * 1)) {
					this.submitIds.push(pro.skuId)
					this.checkenProsList.push(pro)
				}
			} 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
			this.goodsList.forEach(item => {
				if (item.isChecked) {
					goodsCheckedLength++
				}
			})
			this.failureList.forEach(failureItem => {
				if (failureItem.isChecked) {
					goodsCheckedLength++
				}
			})
			if (this.isshowDelbtn) {
				this.isCheckAll = goodsCheckedLength === this.goodsList.length + this.failureList.length
			} else {
				this.isCheckAll = goodsCheckedLength === this.goodsList.length
			}
		},
		handleCheckShop(supplier) {
			//与单选商品类似
			if (!this.isshowDelbtn) {
				if (supplier.isDisable) {
					return
				}
			}
			supplier.isChecked = !supplier.isChecked
			this.setProductChecked(supplier)
			this.updateCheckAllBtn()
		},
		setProductChecked(supplier) {
			supplier.cartList.forEach(pros => {
				if (this.isshowDelbtn) {
					if (supplier.isChecked) {
						pros.isChecked = true
						if (!this.submitIds.includes(pros.skuId * 1)) {
							this.submitIds.push(pros.skuId)
							this.checkenProsList.push(pros)
						}
					} else {
						pros.isChecked = false
						let lent = this.submitIds.indexOf(pros.skuId * 1)
						if (lent >= 0) {
							this.submitIds.splice(lent, 1)
							this.checkenProsList.splice(lent, 1)
						}
					}
				} else {
					if (supplier.isChecked && (pros.stock !== 0 || pros.number < pros.stock)) {
						pros.isChecked = true
						if (!this.submitIds.includes(pros.skuId * 1)) {
							this.submitIds.push(pros.skuId)
							this.checkenProsList.push(pros)
						}
					} else {
						pros.isChecked = false
						let lent = this.submitIds.indexOf(pros.skuId * 1)
						if (lent >= 0) {
							this.submitIds.splice(lent, 1)
							this.checkenProsList.splice(lent, 1)
						}
					}
				}
			})
		},
		updateBothCheckBtn() {
			if (this.isshowDelbtn) {
				// 当管理删除按钮出现时,失效的商品可被选择
				this.goodsList.forEach(supplier => {
					supplier.isChecked = this.isCheckAll
					this.setProductChecked(supplier)
				})
				//删除按钮 全选包括失效商品勾选
				this.failureList.forEach(failureItem => {
					failureItem.isChecked = this.isCheckAll
				})
			} else {
				this.goodsList.forEach(supplier => {
					if (supplier.isDisable) {
						supplier.isChecked = false
					} else {
						supplier.isChecked = this.isCheckAll && !supplier.isDisabled
					}
					this.setProductChecked(supplier)
				})
			}
		},
		handleCheckAll() {
			//全选方法内调用方法
			this.isCheckAll = !this.isCheckAll
			this.updateBothCheckBtn()
		},
		totalShopPeice() {
			//每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
			this.goodsList.map((item, index) => {
				let totalPrice = 0
				item.cartList.forEach(pros => {
					totalPrice += pros.price * pros.number
				})
				item.totalPrice = totalPrice
			})
		},
		totalPeice() {
			//计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
			let totalPrice = 0
			let totalAmount = 0
			this.goodsList.forEach((item, index) => {
				let supplierPrice = 0
				item.totalprice = 0
				item.cartList.forEach(pros => {
					if (pros.isChecked) {
						supplierPrice += pros.price * pros.number
						totalAmount += item.totalprice
					}
				})
				item.totalprice = supplierPrice
				totalPrice += item.totalprice
				this.totalAmount = totalAmount
			})
			// 最终合计价格 = 	店铺满减合计 + 单品满减  + 正常合计 + 凑单满减
			this.allPrice = totalPrice
			console.log('最终合计价格', `${this.allPrice}元`)
		},
		totalCount() {
			//计算总数量
			this.allCount = 0
			let prosAllCount = 0
			let validCount = 0
			let validList = []
			let productsList = []
			this.goodsList.forEach(item => {
				productsList = item.cartList
				productsList.forEach(pros => {
					if (pros.isChecked) {
						prosAllCount += parseInt(pros.number)
						this.allCount = prosAllCount
					}
				})
			})
		},
		changeCountAdd(item, pros) {
			//商品数量加加
			if (pros.step === 2) {
				pros.isStep = false
				pros.number += pros.min
				this.processActivityPrice(pros)
				this.isStock = false
			} else {
				pros.number++
				this.processActivityPrice(pros)
				this.isStock = false
			}
			this.updateShoppogNum(pros)
			this.totalShopPeice()
		},
		changeCountSub(item, pros) {
			//商品数量减减
			if (pros.number <= pros.min) {
				pros.number = pros.min
				this.$util.msg(`该商品最小起订量为${pros.min}`, 2000)
				return
			} else {
				if (pros.step === 2) {
					pros.isStep = false
					pros.number -= pros.min
				} else {
					pros.number--
				}
				this.processActivityPrice(pros)
			}
			this.updateShoppogNum(pros)
			this.totalShopPeice()
		},
		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
					}
				})
			}
		},
		setCartisDisable() {
			// 删除取消设置不能选的商品
			this.goodsList = this.goodsList.map(suppler => {
				suppler.isDisable = false
				suppler.cartList.forEach(pros => {
					pros.isDisable = false
				})
				return suppler
			})
		},
		clearCartisDisable() {
			// 取消删除设置不能选的商品
			this.goodsList = this.goodsList.map(supplier => {
				supplier.cartList.forEach(pros => {
					if (pros.stock === 0 || pros.number > pros.stock) {
						supplier.isDisable = true
						pros.isDisable = true
					} else {
						pros.isDisable = false
					}
				})
				return supplier
			})
		},
		showDelManager() {
			//显示删除商品管理
			this.isshowDelbtn = true
			this.setCartisDisable()
			if (this.isCheckAll) {
				this.updateBothCheckBtn()
			} else {
				this.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
			this.isCheckAll = false
			this.clearCartisDisable()
			this.goodsList = this.goodsList.map(suppler => {
				suppler.isChecked = false
				suppler.cartList.forEach(pros => {
					pros.isChecked = false
				})
				return suppler
			})
			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.$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.$api.navigateTo(`/pages/goods/product?id=${failure.productId}`)
			}
		},
		handleShouUnitPopup(pros) {
			// 规格弹窗
			this.popupShow2 = true
			this.handlePros = pros
		},
		hideMobel() {
			this.modal = false
		},
		handleClick(e) {
			//个人机构跳转升级页面
			if (e.index == 1) {
				this.shoppingCartDelete({ userId: this.userId, skuIds: this.delSkuIds })
			}
			this.modal = false
		},
		setHeaderBtnPosi() {
			// 获得胶囊按钮位置信息
			let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
			return headerBtnPosi
		},
		setSysteminfo() {
			let systeminfo
			uni.getSystemInfo({
				// 获取设备信息
				success: res => {
					systeminfo = res
				}
			})
			return systeminfo
		},
		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)
		}
	}
}
</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 #999999;
		color: #999999;
		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;
		}
	}
	.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;
			}
		}
	}
	.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 #ff5b00;
				color: #ff5b00;
				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 #d5d5d5;
					border-radius: 30rpx;
					.iconfont {
						font-size: $font-size-24;
						padding: 0 18rpx;
						color: #999999;
						text-align: center;
						line-height: 48rpx;
						font-weight: bold;
						background: #f7f7f7;
						&.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;
					}
				}
			}
		}
	}
}
.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-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;
				}
			}
			.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: $btn-confirm;
			font-size: $font-size-26;
			line-height: 84rpx;
			color: #ffffff;
			display: flex;
			border-radius: 42rpx;
			justify-content: center;
			align-items: center;
		}
	}
	.footer-del {
		width: 460rpx;
		height: 110rpx;
		position: absolute;
		padding-left: 140rpx;
		background: #ffffff;
		right: 0;
		top: 0;
		z-index: 1000;
		&.show {
			animation: showDelbtn 0s linear both;
		}
		&.none {
			animation: hideDelbtn 0s linear both;
		}
		.btn {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size-28;
			color: #ffffff;
			text-align: center;
			float: left;
			margin: 10rpx;
			border-radius: 40rpx;
		}
		.btn.btn-cancel {
			background: #f7f7f7;
			color: #b2b2b2;
		}
		.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>