qjd-user-uniapp/pages/cart/cart.vue

<template>
	<view class="container">
		<view class="swiper" :style="{height: getCartAllGoods() ? '120px' : '60px'}">
			<view class="swiper-text">共{{getCartAllGoods()}}件商品</view>
			<view v-if="cartsList.length" class="swiper-text" style="float: right;" @click="manageType = !manageType">{{manageType ? '完成' :'管理'}}</view>
		</view>
		<view class="cart-box" :style="{bottom: manageType ? '52px' : '0px'}">
			<view class="no-cart" v-if="!cartsList.length">
				<image class="no-cart-img" src="../../static/images/noCart.png" mode="aspectFill"></image>
				<text class="no-cart-text">购物车暂无商品</text>
				<u-button type="success" shape="circle" :ripple="true" :hair-line="false" :plain="true" @click="goToMall" class="button1">去逛逛</u-button>
			</view>
			<view v-if="cartsList.length" class="shop-row" v-for="(item, index1) in cartsList" :key="index1">
				<view class="shop-info">
					<view class="iconfont" :class="item.allCheck ? 'iconqueding' : 'iconfeigouxuan'" @click="checkShop(item)"></view>
					<view class="shop-info-right" @click="goToShop(item)">
						<view class="iconfont iconshangjia"></view>
						<view class="shop-name">{{item.supplierName}}</view>
						<view class="iconfont iconfangxiang"></view>
					</view>
				</view>
				<view class="goods-list">
					<view class="goods-row" v-for="(site, index2) in item.products" :key="index2" @click.stop="goToGoodDetails(site)">
						<view class="iconfont" :class="site.check ? 'iconqueding' : 'iconfeigouxuan'" @click.stop="checkGoods(item, site)"></view>
						<image class="goods-img" :src="site.imgUrl" mode="aspectFill"></image>
						<view class="goods-info">
							<view class="goods-name">{{site.productName}}</view>
							<view class="goods-type">类型：{{site.productType == 1 ? '普通商品' : '自助采摘'}}</view>
							<view class="goods-handle">
								<view class="goods-price">
									<text style="font-size: 15px;">￥</text>{{site.bizPrice}}
								</view>
								<view class="handle-box" @click.stop="">
									<uni-icons type="minus-filled" size="20" color="#A67A54" @click.native.stop="numSub(item, site)"></uni-icons>
									<text class="good-select">{{site.buyNum}}</text>
									<uni-icons type="plus-filled" size="20" color="#A67A54" @click.native.stop="numAdd(item, site)"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-handle-box">
					<view class="shop-handle-text">
						<text class="shop-text">合计</text>
						<text class="shop-price">￥{{getShopCheckPrice(item)}}</text>
					</view>
					<u-button type="success" size="medium" shape="circle" :ripple="true" @click="toPay(item)" :disabled="!getShopCheckGoods(item)"
					 class="handle-button">结算({{getShopCheckGoods(item)}})</u-button>
				</view>
			</view>
		</view>
		<view class="cart-handle-box" v-if="manageType">
			<view class="iconfont" :class="getAllCartType() ? 'iconqueding' : 'iconfeigouxuan'" @click="checkAllShop()"></view>
			<view class="icon-text" @click="checkAllShop()">{{getAllCartType() ? '取消' : ''}}全选</view>
			<u-button type="success" size="medium" shape="circle" :ripple="true" :hair-line="false" :plain="true" @click="deleteSelectCarts()"
			 class="cart-handle-delete">删除</u-button>
		</view>
		<u-modal v-model="modalShow" content="是否删除勾选商品？" @confirm="submitDeleteData()" :async-close="true"
		 :show-cancel-button="true"></u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				cartsList: [],
				cartNum: 1,
				manageType: false,
				modalShow: false,
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.cartsList = []
			this.getCartData()
		},
		onPullDownRefresh() {
			this.cartsList = []
			this.getCartData('refresh')
		},
		methods: {
			// 跳转商城
			goToMall() {
				uni.switchTab({
					url: '/pages/shop/index'
				});
			},
			//  跳转商铺页
			goToShop(item) {
				uni.navigateTo({
					url: '/pagesGood/shopDetails?goodId=' + item.products[0].productId
				});
			},
			//  跳转商品详情
			goToGoodDetails(site) {
				uni.navigateTo({
					url: '/pagesGood/goodDetails?goodId=' + site.productId
				});
			},
			//  获取购物车列表
			getCartData(type) {
				NET.request(API.getCartList, {}, 'GET').then(res => {
					if (type == 'refresh') {
						uni.stopPullDownRefresh();
					}
					res.data.merchants && res.data.merchants.forEach(item => {
						item.allCheck = false
						item.products.forEach(site => {
							site.check = false
						})
					})
					this.cartsList = res.data.merchants || []
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取购物车列表失败',
						type: 'warning',
					})
				})
			},
			//  获取商铺下选中商品价格
			getShopCheckPrice(item) {
				return item.products.reduce((total, site) => {
					return total + (site.check ? (site.buyNum * site.bizPrice) : 0)
				}, 0)
			},
			//  获取全部商铺下商品
			getCartAllGoods() {
				return this.cartsList.reduce((total1, item) => {
					return total1 + item.products.reduce((total2, site) => {
						return total2 + site.buyNum
					}, 0)
				}, 0)
			},
			//  获取全部商铺下商品
			getShopCheckGoods(item) {
				return item.products.reduce((total, site) => {
					return total + (site.check ? site.buyNum : 0)
				}, 0)
			},
			//  全选店铺
			checkShop(item) {
				item.allCheck = !item.allCheck
				item.products.forEach(site => {
					site.check = item.allCheck
				})
			},
			//  勾选商品
			checkGoods(item, site) {
				site.check = !site.check
				item.allCheck = item.products.filter(site => site.check).length == item.products.length
			},
			//  数量减
			numSub(item, site) {
				if (site.buyNum > 1) {
					site.buyNum--
					this.setCartNum(item, site)
				}
			},
			//  数量加
			numAdd(item, site) {
				site.buyNum++
				this.setCartNum(item, site)
			},
			//  提交购物车变更参数
			setCartNum(item, site) {
				NET.request(API.editCart, {
					vos: [{
						buyNum: site.buyNum,
						flag: 2,
						selected: site.selected,
						shoppingcartId: site.shoppingcartId,
					}]
				}, 'PUT').then(res => {}).catch(error => {
					this.$refs.uTips.show({
						title: '改变商品数量失败',
						type: 'warning',
					})
				})
			},
			//  检测所有商铺全选情况
			getAllCartType() {
				return this.cartsList.filter(site => site.allCheck).length == this.cartsList.length
			},
			//  设置所有商铺全选状态
			checkAllShop() {
				let type = this.getAllCartType()
				this.cartsList.forEach(item => {
					item.allCheck = !type
					item.products.forEach(site => {
						site.check = !type
					})
				})
			},
			//  删除购物车
			deleteSelectCarts(item, site) {
				this.modalShow = true
			},
			//  提交删除购物车数据
			submitDeleteData() {
				let shoppingcartIds = []
				this.cartsList.forEach(item => {
					item.products.forEach(site => {
						if (site.check) {
							shoppingcartIds.push(site.shoppingcartId)
						}
					})
				})
				if (!shoppingcartIds.length) {
					this.modalShow = false
					this.$refs.uTips.show({
						title: '请勾选商品',
						type: 'warning',
					})
					return false
				}
				let str = '?'
				shoppingcartIds.forEach((site, index) => {
					str += (index ? '&' : '') + 'shoppingcartIds=' + site
				})
				NET.request(API.deleteCart + str, {}, 'POST').then(res => {
					this.modalShow = false
					this.manageType = false
					this.getCartData()
				}).catch(error => {
					this.modalShow = false
					this.$refs.uTips.show({
						title: '删除购物车失败',
						type: 'warning',
					})
				})
			},
			//  提交购物车变更参数
			toPay(item) {
				uni.removeStorageSync('defaultAddress');
				uni.setStorage({
					key: 'orderData',
					data: {
						tenantCode: item.tenantCode,
						supplierName: item.supplierName,
						areaSize: '',
						term: '',
						goodsList: item.products.filter(site => site.check).map(site => {
							return {
								bizPrice: site.bizPrice,
								buyNum: site.buyNum,
								imgUrl: site.imgUrl,
								originalPrice: site.originalPrice,
								productId: site.productId,
								productName: site.productName,
								productType: site.productType,
								shoppingcartId: site.shoppingcartId,
							}
						})
					}
				});
				uni.navigateTo({
					url: '/pagesGood/orderPay?flag=1&orderType=1'
				});
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="less" scoped>
	// page {
	// 	width: 100%;
	// 	height: 100%;
	// }

	.container {
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
		position: relative;

		.iconqueding,
		.iconfeigouxuan {
			color: #56a83a;
			font-size: 36px;
			margin-left: 5px;
		}

		.swiper {
			width: 100%;
			height: 120px;
			float: left;
			background-color: #56a83a;
			border-radius: 0 0 40px 40px;

			.swiper-text {
				float: left;
				line-height: 16px;
				font-size: 15px;
				color: #FFFFFF;
				padding: 16px 15px;
			}
		}
		.swiper2 {
			width: 100%;
			height: 60px;
			float: left;
			background-color: #56a83a;
			border-radius: 0 0 40px 40px;
		
			.swiper-text {
				float: left;
				line-height: 16px;
				font-size: 15px;
				color: #FFFFFF;
				padding: 16px 15px;
			}
		}
        .no-cart {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			top: 50px;
			position: relative;
			.no-cart-img {
				width: 155px;
				height: 200px;
				margin-bottom: 20px;
			}
			.no-cart-text {
				font-size: 16px;
				font-family: PingFang SC;
				color: #999999;
				margin-bottom: 60px;
			}
			.button1 {
				/deep/button {
					background-color: #74bd60 !important;
					border: none !important;
					color: white !important;
				}
				width: 40%;
				height: 34px;
			}
		}
		.cart-box {
			width: calc(100% - 30px);
			min-height: calc(100vh - 40px - 50px);
			overflow: visible;
			position: absolute;
			top: 50px;
			bottom: 0;
			left: 15px;
			overflow-y: auto;

			.shop-row {
				width: 100%;
				float: left;
				background: #FFFFFF;
				border-radius: 10px;
				margin-bottom: 15px;

				.shop-info {
					width: 100%;
					height: 50px;
					float: left;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #EEEEEE;

					.shop-info-right {
						display: flex;
						align-items: center;
					}

					.shop-name {
						font-size: 15px;
						font-family: PingFang SC;
						color: #333333;
						margin: 0 6px;
					}

					.iconshangjia {
						color: #333333;
						font-size: 26px;
					}

					.iconfangxiang {
						color: #999999;
						font-size: 20px;
					}
				}

				.goods-list {
					width: 100%;
					float: left;

					.goods-row {
						width: 100%;
						height: 120px;
						float: left;
						padding-top: 15px;
						border-bottom: 1px solid #EEEEEE;
						display: flex;

						.iconqueding,
						.iconfeigouxuan {
							margin-top: 26px;
						}

						.goods-img {
							width: 90px;
							height: 90px;
							margin: 0 15px 0 2px;
							border-radius: 5px;
							object-fit: cover;
							overflow: hidden;
						}

						.goods-info {
							height: 90px;
							flex: 1;

							.goods-name {
								width: 100%;
								height: 32px;
								float: left;
								font-size: 12px;
								font-family: PingFang SC;
								color: #333333;
								line-height: 16px;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								word-wrap: break-word;
								margin-bottom: 8px;
							}

							.goods-type {
								float: left;
								height: 20px;
								padding: 0 8px;
								background: #F0F0F0;
								border-radius: 4px;
								color: #666666;
								font-size: 10px;
								line-height: 20px;
								margin-bottom: 10px;
							}

							.goods-handle {
								width: 100%;
								height: 20px;
								box-sizing: border-box;
								padding-right: 15px;
								float: left;
								display: flex;
								justify-content: space-between;
								align-items: center;
								line-height: 20px;

								.goods-price {
									flex: 1;
									font-size: 18px;
									font-family: PingFang SC;
									color: #56a83a;
									line-height: 20px;
								}

								.handle-box {
									flex: 1;
									line-height: 20px;
									text-align: right;

									.good-select {
										font-size: 16px;
										font-family: PingFang SC;
										color: #333333;
										margin: 0 10px;
									}
								}
							}
						}
					}
				}

				.shop-handle-box {
					width: 100%;
					height: 54px;
					float: left;
					box-sizing: border-box;
					padding: 0 16px;

					.shop-handle-text {
						width: calc(100% - 110px);
						height: 54px;
						float: left;
						white-space: nowrap;
						font-size: 15px;
						font-family: PingFang SC;
						line-height: 54px;
						text-align: right;

						.shop-text {
							color: #333333;
							margin-right: 16px;
						}

						.shop-price {
							color: #56a83a;
						}
					}

					.handle-button {
						width: 96px;
						height: 40px;
						display: block;
						float: right;
						margin-top: 7px;
						padding: 0;
						text-align: center;

						/deep/button {
							background-color: #56a83a;
							color: #FFFFFF;
							height: 40px;
							width: 96px;
							line-height: 40px;
						}
						/deep/.u-btn--success--disabled{
							background-color: #74bd60!important;
						}
					}
				}
			}
		}

		.cart-handle-box {
			width: 100%;
			height: 52px;
			position: absolute;
			z-index: 1;
			bottom: 0;
			background: #FFFFFF;
			box-sizing: border-box;
			border-top: 1px solid #EEEEEE;
			padding: 0 15px 0 4px;

			.iconfont {
				height: 52px;
				line-height: 52px;
				float: left;
				display: block;
			}

			.icon-text {
				height: 52px;
				float: left;
				font-size: 15px;
				font-family: PingFang SC;
				color: #666666;
				line-height: 52px;
			}

			.cart-handle-delete {
				display: block;
				width: 96px;
				height: 32px;
				line-height: 32px;
				padding: 0;
				margin: 10px 0 0 0;
				float: right;
				border-color: #56a83a !important;
				background-color: #FFFFFF !important;
				color: #56a83a !important;

				/deep/button {
					border-color: #56a83a !important;
					background-color: #FFFFFF !important;
					color: #56a83a !important;
					padding: 0 24px;
				}
			}
		}
	}
</style>