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

<template>
	<view class="container cart clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view class="foot-check-delbtn" v-if="!isshowDelbtn && goodsList.length > 0" :style="{ top: CustomBar + 'px' }">
			<view class="foot-text"
				>共<text>{{ kindCount }}</text
				>件商品</view
			>
			<view class="delBtn" @tap.stop="showDelManager">删除</view>
		</view>
		<view class="container-cart-main tui-skeleton" :style="{ paddingTop: isshowDelbtn ? '0rpx' : '80rpx' }">
			<view v-if="!isEmpty" class="container-cart">
				<scroll-view class="cart-content" scroll-y @scrolltolower="toLower">
					<view class="goods-list">
						<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
							<view class="shoptitle">
								<!--选择商店的全部商品 :disabled="isNnder"-->
								<view class="checkbox-box" @click.stop="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>
							<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, idx)">
											<view
												class="checkbox iconfont"
												:class="[pros.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
											></view>
										</view>
										<view class="pros-img" @click.stop="navToListPage(pros.productId)">
											<image :src="pros.image ? pros.image : ''" alt="" />
										</view>
										<view class="pros-product">
											<view class="producttitle" @click.stop="navToListPage(pros.productId)">
												{{ pros.name }}
											</view>
											<view class="productspec">规格:{{ pros.unit ? pros.unit : '' }}</view>
											<view
												class="productspec"
												v-if="pros.productCode != '' && pros.productCode != null"
											>
												<view bgcolor="#666666">商品编码:{{ pros.productCode }}</view>
											</view>
											<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" :class="[isshowDelbtn ? 'none' : 'show']">
													<text class="count-tips" v-if="pros.number < pros.min"
														>起订量:{{ pros.min }}</text
													>
													<text class="count-tips step" v-if="pros.isStep"
														>购买量必须为起订量的整数倍</text
													>
													<view class="number-box">
														<view
															class="iconfont icon-jianhao"
															@click="changeCountSub(item, pros)"
														></view>
														<input
															class="btn-input"
															type="number"
															maxlength="6"
															v-model="pros.number"
															@blur="changeNnmber($event, item, pros)"
														/>
														<view
															class="iconfont icon-jiahao"
															@click="changeCountAdd(item, pros)"
														></view>
													</view>
												</view>
											</view>
											<view v-show="pros.actStatus == 1" 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.mainImage ? failure.mainImage : ''" 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.validFlag) }}</view>
									</view>
									<view class="pros-marks" v-if="failure.isFailureLayer"></view>
									<!--</view>-->
								</view>
							</view>
						</view>
					</view>

					<!--加载loadding-->
					<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
					<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
					<!--加载loadding-->
				</scroll-view>
				<!-- 脚部菜单 -->
				<view class="footer" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
					<view class="footer-le">
						<view class="foot-check checkbox-box" @tap.stop="checkAll()">
							<button
								class="checkbox iconfont"
								:class="[isCheckAll ? 'icon-yixuanze' : 'icon-weixuanze']"
							></button>
							<view class="text">全选</view>
						</view>
						<view class="sum">
							<view class="sum-none" v-if="reducedPrice > 0">
								<text class="money-sign">￥</text>
								<text class="money">{{ totalOriginalPrice | NumFormat }}</text>
								<text class="money-reduced"
									>减<text>￥{{ reducedPrice | NumFormat }}</text></text
								>
							</view>
							<view class="sum-price" :class="reducedPrice == 0 ? 'none' : ''">
								总价:<text class="money-sign">￥</text
								><text class="money">{{ allPrice | NumFormat }}</text>
							</view>
						</view>
					</view>
					<view v-if="!isshowDelbtn" class="footer-ri">
						<view class="btn hanld-btn" @tap="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>
			</view>
			<view v-if="isEmpty" class="cart-content empty">
				<view class="empty-container">
					<image
						class="empty-container-image"
						src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png"
						mode="aspectFit"
					></image>
					<text class="error-text">购物车空空如也~</text>
				</view>
			</view>
		</view>
		<!-- 促销活动弹窗 -->
		<activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
		<!-- 透明模态层 -->
		<modal-layer v-if="modallayer"></modal-layer>
	</view>
</template>
<script>
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 modalLayer from '@/components/modal-layer'
import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	clubId: 0, // 机构Id
	serviceProviderId: 0, //协销Id
	againBuyProductIds: '', // 再次购买商品ids
	pageNum: 1, // 页码
	pageSize: 10 // 条数
}
export default {
	components: {
		tuiSkeleton,
		tuiLoadmore,
		tuiNomore,
		activiPopup,
		modalLayer
	},
	data() {
		return {
			kindCount: 0,
			isStock: '',
			popupShow: false,
			listQuery: Object.assign({}, defaultListQuery), // 购物车立即结算确认订单参数
			handlerPros: {}, //监听单挑促销商品
			promotionsList: [], //促销活动列表
			failureList: [], //失效商品列表
			goodsList: [], //购物车的商品
			delGoodsList: '', //要删除的商品
			setGoodData: '', //确认订单的商品
			isCheckAll: false, //是否全选
			totalOriginalPrice: 0, //所有原价价
			reducedPrice: 0, //满减
			allPrice: 0, //所有价格
			allCount: 0, //被选中的产品数量
			isModallayer: false,
			skeletonShow: true,
			isshowDelbtn: false,
			isDisabled: false, // 供应商/店铺全选是否禁用状态
			isEmpty: false, //显示空购物车
			scrollHeight: 'auto',
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			submitIds: [],
			depositIds: [6060, 6061, 6062, 6063, 6064], //定金商品ID
			rechargeIds: [6065, 6066, 6067, 6068, 6069], //充值余额商品ID
			isIphoneX: this.$store.state.isIphoneX
		}
	},
	onLoad() {
		this.setScrollHeight()
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		},
		totalprice(val, count) {
			//单件商品的价格 × 数量
			return (val * count).toFixed(2)
		}
	},
	methods: {
		initData() {
			this.isModallayer = false //遮罩层 防止多次点击
			this.skeletonShow = true //预加载圆圈
			this.isCheckAll = false //是否全选
			this.submitIds = []
			this.$api.getStorage().then(resolve => {
				this.listQuery.serviceProviderId = resolve.serviceProviderId ? resolve.serviceProviderId : 0
				this.initGetCartGoodsList()
				this.getClubProductNum()
			})
		},
		initLogin() {
			this.$api.redirectTo('/pages/login/login?type=4')
		},
		clickPopupShow(pros, type) {
			//显示活动弹窗
			this.popupShow = true
			this.handlerPros = pros
		},
		failureToProduct(failure) {
			if (failure.status == 1) {
				this.$util.msg('商品已丢失,不能查看', 2000)
				return
			} else if (failure.status == 2) {
				this.$util.msg('商品已停售,不能查看', 2000)
				return
			} else {
				this.isModallayer = true
				this.$api.navigateTo(`/pages/goods/product?id=${failure.productId}`)
			}
		},
		failureStateText(state) {
			let stateText = '',
				stateTextObject = {
					0: '商品已停售',
					10: '商品已丢失'
				}
			Object.keys(stateTextObject).forEach(key => {
				if (key == state) {
					stateText = stateTextObject[key]
				}
			})
			return stateText
		},
		deletefailureList() {
			this.failureList.forEach(failure => {
				this.delGoodsList += failure.sellerCartId + ','
			})
			this.$util.modal('', '确定清空全部失效商品吗？', '确定', '取消', true, () => {
				console.log(this.delGoodsList)
				this.SellerService.SellerCartdelete({ sellerCartIds: this.delGoodsList })
					.then(response => {
						console.log(response)
						this.$util.msg('删除成功', 2000)
						setTimeout(() => {
							this.isshowDelbtn = false
							this.initGetCartGoodsList()
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		setScrollHeight() {
			// 窗口高度-footer高度
			const { windowHeight, pixelRatio } = uni.getSystemInfoSync()
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.footer').boundingClientRect()
				query.exec(res => {
					this.windowHeight = windowHeight
					if (res[0][0]) {
						this.scrollHeight = windowHeight - res[0][0].height
					}
				})
			}, 500)
		},
		initGetCartGoodsList() {
			//初始化购物车 index:1
			this.SellerService.GetSellerShoppingInfo(this.listQuery)
				.then(response => {
					this.skeletonShow = false
					let data = response.data
					let dataPage = data.pageDate
					this.promotionsList = data.promotionsList

					if (dataPage.list.length > 0 || data.invalidProductList.length > 0) {
						this.isEmpty = false
					} else {
						this.isEmpty = true
					}
					if (dataPage.list && dataPage.list.length > 0) {
						this.hasNextPage = dataPage.hasNextPage
						this.goodsList = dataPage.list
						this.goodsList.forEach((item, index) => {
							let cartListLength = item.cartList.length,
								invalidLength = 0
							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()
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.goodsList.length < 4) {
								this.pullUpOn = true
							} else {
								this.pullUpOn = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.goodsList = []
					}
					if (response.data.invalidProductList && response.data.invalidProductList.length > 0) {
						let newFailureList = [],
							isFailureLayer
						response.data.invalidProductList.forEach((failure, index) => {
							if (failure.validFlag == 0 || failure.validFlag == 10) {
								isFailureLayer = true
							} else {
								isFailureLayer = false
							}
							newFailureList.push(Object.assign({}, failure, { isFailureLayer: isFailureLayer }))
						})
						this.failureList = newFailureList
						console.log(this.failureList)
					} else {
						this.failureList = []
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getOnReachBottomData() {
			//上拉加载
			this.listQuery.pageNum += 1
			this.SellerService.GetSellerShoppingInfo(this.listQuery)
				.then(response => {
					let resultsData = response.data.pageDate
					this.promotionsList = response.data.promotionsList
					this.hasNextPage = resultsData.hasNextPage
					this.goodsList = this.goodsList.concat(resultsData.results)
					this.goodsList.forEach((item, index) => {
						let productsListLength = item.cartList.length,
							invalidLength = 0
						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()
					this.pullFlag = false // 防上拉暴滑
					setTimeout(() => {
						this.pullFlag = true
					}, 500)
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						this.loadding = false
						this.pullUpOn = false
						this.nomoreText = '已至底部'
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getClubProductNum() {
			// 获取协销下机构购物车数量
			this.SellerService.GetSellerProductNum({
				clubId: this.listQuery.clubId,
				serviceProviderId: this.listQuery.serviceProviderId
			}).then(response => {
				this.kindCount = response.data
			})
		},
		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 - disabledLength
		},
		updateCheckAllBtn() {
			// 全选勾选判断
			let goodsCheckedLength = 0,
				disabledListLength = 0,
				goodsList = this.goodsList
			goodsList.forEach(item => {
				if (item.isChecked) {
					goodsCheckedLength++
				}
			})
			this.isCheckAll = goodsCheckedLength === goodsList.length - disabledListLength
		},
		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)
				})
			} else {
				this.goodsList.forEach(item => {
					item.isChecked = this.isCheckAll
					this.setProductChecked(item)
				})
			}
		},
		checkAll() {
			//全选方法内调用方法
			this.isCheckAll = !this.isCheckAll
			this.updateBothCheckBtn()
		},
		totalShopPeice() {
			//每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
			let touchPrice = 0
			let reducedPrice = 0 //商铺合计满减价
			this.goodsList.map((item, index) => {
				//计算店铺满减后店铺合计
				if (item.promotions && item.promotions.mode == 2) {
					let prosPrice = 0
					let totalOriginalPrice = 0 //商铺合计原价
					item.cartList.forEach(pros => {
						prosPrice += pros.price * pros.number
						totalOriginalPrice += pros.price * 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.promotionsList.forEach(promotions => {
				// 凑单满减
				if (promotions.mode * 1 === 2 && promotions.type * 1 === 2) {
					let total = 0
					promotions.products.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
		},
		totalCount() {
			//计算总数量
			this.allCount = 0
			let prosAllCount = 0
			let validCount = 0
			let validList = []
			let productsList = []
			this.goodsList.forEach(item => {
				productsList = item.cartList
				productsList.forEach(pros => {
					if (pros.isChecked) {
						prosAllCount += parseInt(pros.number)
						this.allCount = prosAllCount
					}
				})
			})
		},
		changeCountAdd(item, pros) {
			//商品数量加加
			if (pros.step === 2) {
				pros.isStep = false
				pros.number += pros.min
				this.processActivityPrice(pros)
				this.isStock = false
			} else {
				pros.number++
				this.processActivityPrice(pros)
				this.isStock = false
			}
			this.updateShoppogNum(pros)
			this.totalShopPeice()
		},
		changeCountSub(item, pros) {
			//商品数量减减
			if (pros.number <= pros.min) {
				pros.number = pros.min
				this.$util.msg(`该商品最小起订量为${pros.min}`, 2000)
				return
			} else {
				if (pros.step === 2) {
					pros.isStep = false
					pros.number -= pros.min
				} else {
					pros.number--
				}
				this.processActivityPrice(pros)
			}
			this.updateShoppogNum(pros)
			this.totalShopPeice()
		},
		changeNnmber(e, item, pros) {
			//输入商品数量更新
			let _value = e.detail.value
			if (!this.$api.isNumber(_value)) {
				pros.number = pros.min
			} else if (_value < pros.min) {
				this.$util.msg(`该商品最小起订量为${pros.min}`, 2000)
				pros.number = pros.min
			} else if (_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.SellerService.SellerAddProductNum({
				id: pros.id,
				productCount: pros.number,
				serviceProviderId: this.listQuery.serviceProviderId
			})
				.then(response => {
					this.isshowDelbtn = false
					this.isCheckAll = false
					this.initGetCartGoodsList()
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		toConfirmation() {
			//跳转确认订单页面
			let setGoodsList = []
			let productIdList = []
			let productIds = ''
			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 {
				/**
				 * @获取勾选的商品ID拼接字符串逗号隔开，最后一个逗号去掉
				 * @获取勾选的商品分类ID拼接字符串格式逗号隔开，最后一个逗号去掉
				 */
				this.goodsList.forEach(el => {
					el.cartList.forEach(pros => {
						if (pros.isChecked) {
							productIdList.push(pros.productId)
						}
					})
				})
				//判断勾选的商品是否为充值商品或者为定金商品的一些处理逻辑
				const isHasDepositlds = productIdList.filter(item => this.depositIds.includes(item))
				const isHasRechargeIds = productIdList.filter(item => this.rechargeIds.includes(item))
				const isGoods = productIdList.every(item => {
					;[...this.depositIds, ...this.rechargeIds].includes(item)
				})
				if (productIdList.length == 1 && isHasDepositlds.length === 1 && isHasRechargeIds.length === 0) {
					console.log('定金商品')
					productIdList.forEach(item => {
						productIds += item + ','
					})
				} else if (productIdList.length == 1 && isHasRechargeIds.length === 1 && isHasDepositlds.length === 0) {
					console.log('充值余额商品')
					productIdList.forEach(item => {
						productIds += item + ','
					})
				} else if (!isGoods && isHasRechargeIds.length === 0 && isHasDepositlds.length === 0) {
					console.log('正常商品')
					productIdList.forEach(item => {
						productIds += item + ','
					})
				} else {
					this.$util.modal('提示', '缴纳订金商品或余额充值商品请单独下单!', '确定', '', false, () => {})
					return
				}
				let cartPramsData = { productIds: productIds.substring(0, productIds.lastIndexOf(',')) }
				this.$api.navigateTo(`/pages/seller/order/create-order?data=${JSON.stringify({ data: cartPramsData })}`)
			}
		},
		showDelManager() {
			//显示删除商品管理
			this.isshowDelbtn = true
			if (this.isCheckAll) {
				this.updateBothCheckBtn()
			} else {
				this.updateCheckAllBtn()
			}
		},
		hideDelManage() {
			//隐藏删除商品管理
			this.isshowDelbtn = false
			if (this.isCheckAll) {
				this.updateBothCheckBtn()
			} else {
				this.updateCheckAllBtn()
			}
		},
		deleteList() {
			//删除购物车商品
			this.delGoodsList = []
			this.goodsList.forEach(delitem => {
				let products = delitem.cartList
				products.forEach(pros => {
					if (pros.isChecked) {
						this.delGoodsList += pros.id + ','
					}
				})
			})
			this.failureList.forEach(failure => {
				if (failure.isChecked) {
					this.delGoodsList += failure.id + ','
				}
			})
			if (this.delGoodsList.length == 0) {
				this.$util.msg('请选择要删除的商品~', 2000)
				return
			} else {
				this.$util.modal('', '确定删除选中的商品吗？', '确定', '取消', true, () => {
					this.SellerService.DeleteSellerCart({
						cartIds: this.delGoodsList,
						serviceProviderId: this.listQuery.serviceProviderId
					})
						.then(response => {
							this.$util.msg('删除成功', 2000)
							setTimeout(() => {
								this.isshowDelbtn = false
								this.initGetCartGoodsList()
							}, 2000)
						})
						.catch(error => {
							this.$util.msg(error.msg, 2000)
						})
				})
			}
		},
		goNavto(url) {
			uni.navigateTo({
				url
			})
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		navToListPage(id) {
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
		}
	},
	watch: {
		//深度监听所有数据，每次改变重新计算总价和总数
		goodsList: {
			deep: true,
			handler(val, oldval) {
				this.totalPeice()
				this.totalCount()
			}
		}
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData()
		}
	},
	onPullDownRefresh() {
		//下拉刷新
		this.initGetCartGoodsList()
		uni.stopPullDownRefresh()
	},
	onShow() {
		this.$api.getComStorage('orderUserInfo').then(resolve => {
			console.log(resolve)
			this.listQuery.clubId = resolve.clubID ? resolve.clubID : 0
			this.listQuery.againBuyProductIds = resolve.againBuyProductIds ? resolve.againBuyProductIds : ''
			this.initData()
		})
	}
}
</script>

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