cbz/page_shop/pages/mine/cart.vue

<template>
	<view class="content">
		<view class="top hflex acenter jbetween">
			<view class="hflex acenter">
				<u-icon name="map-fill" color="#555555" size="13"></u-icon>
				<view class="top_text">{{city}}</view>
			</view>
			<view class="top_text" @click="manager">{{is_manager == 0?'管理':'取消'}}</view>
		</view>
		<view class="center">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="box vflex">
					
					<view class="hflex acenter jbetween cell">
						<view class="hflex acenter">
							<u-checkbox-group placement="column" @change="checkboxAll(index)">
								<u-checkbox :value="all" :checked="isAllSelected" shape="circle"></u-checkbox>
							</u-checkbox-group>
							<view class="title">{{item.nickname}}</view>
						</view>
						<view class="right_btn" @click="toShop(item.id)">进店看看</view>
					</view>
					
					<block v-for="(item2,index2) in item.goods_item" :key="index2">
						<u-checkbox-group placement="column" @change="checkboxChange(index,index2)">
							<u-swipe-action>
								<u-swipe-action-item :options="options2" @click="deleteCart(index,index2)">
									<view class="hflex acenter cell">
										<u-checkbox v-model="item2.id" :value="item2.id" :checked="item2.checked" shape="circle"></u-checkbox>
										<image :src="item2.cover" mode="aspectFill" class="img"></image>
										<view class="vflex img_right">
											<view class="item_name">{{item2.name}}</view>
											<view class="norm">{{item2.goods_spec}}</view>
											<view class="hflex acenter jbetween">
												<view class="text_red">￥{{item2.price_selling}}</view>
												<u-number-box buttonSize="25" :integer="true" :name="item2.id" v-model="item2.num" @change="valChange"></u-number-box>
											</view>
										</view>
									</view>
								</u-swipe-action-item>
							  </u-swipe-action>
							
						</u-checkbox-group>
					</block>
				</view>
			</block>
		</view>
		<view class="bottom hflex acenter jbetween">
			<view>
				<u-checkbox-group placement="column" @change="checkboxAll2">
					<u-checkbox :value="all" :checked="isAllSelected" shape="circle" label="全选"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="hflex aend" v-if="is_manager == 0">
				<view class="bottom_num">已选{{num?num:0}}件</view>
				<view class="bottom_total hflex acenter jcenter">合计：<span class="text-blue">￥{{total}}</span></view>
				<view class="btn" @click="buy">一键结算</view>
			</view>
			<view class="hflex aend" v-if="is_manager == 1">
				<view class="btn2" @click="batchDelete">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				is_manager: 0,
				city: '北京市',
				pageList: [
					
				],
				num: 0,
				total: 0,
				isAllSelected: false,
				options2: [{
                    text: '删除'
                }]
			}
		},
		onLoad() {
			that = this
			var city = uni.getStorageSync('city')
			if(city) {
				that.city = city
			}
			that.getCart()
		},
		methods: {
			// 获取购物车列表
			getCart() {
				$api.req({
					url: '/data/api.Goods/goods_cart_list'
				}, function(res) {
					console.log(res);
					that.pageList = res.data.list
				})
			},
			// 管理
			manager() {
				if(that.is_manager == 0) {
					that.is_manager = 1
				} else {
					that.is_manager = 0
				}
			},
			// 单个店铺全选
			checkboxAll(index) {
				// console.log(e);
				that.pageList[index].isAllSelected = !that.pageList[index].isAllSelected
				if(that.pageList[index].isAllSelected) {
					for(var i = 0;i<that.pageList[index].goods_item.length;i++) {
						that.$set(that.pageList[index].goods_item[i],'checked',true)
						// that.pageList[index].isAllSelected = true
					}
				} else {
					for(var i = 0;i<that.pageList[index].goods_item.length;i++) {
						that.$set(that.pageList[index].goods_item[i],'checked',false)
						// that.pageList[index].isAllSelected = false
					}
				}
				that.totalGood()
			},
			// 选择单个商品
			checkboxChange(index,index2) {
				if(that.pageList[index].goods_item[index2].checked) {
					that.pageList[index].goods_item[index2].checked = !that.pageList[index].goods_item[index2].checked
				} else {
					that.$set(that.pageList[index].goods_item[index2],'checked',true)
				}
				that.totalGood()
			},
			// 选择所有商品
			checkboxAll2() {
				that.isAllSelected = !that.isAllSelected
				if(that.isAllSelected) {
					for(var i = 0;i<that.pageList.length;i++) {
						that.pageList[i].isAllSelected = true
						for (var j=0;j<that.pageList[i].goods_item.length;j++) {
							that.$set(that.pageList[i].goods_item[j],'checked',true)
						}
					}
					
				} else {
					for(var i = 0;i<that.pageList.length;i++) {
						that.pageList[i].isAllSelected = false
						for (var j=0;j<that.pageList[i].goods_item.length;j++) {
							that.$set(that.pageList[i].goods_item[j],'checked',false)
						}
					}
					that.num = 0
					that.total = 0
				}
				that.totalGood()
			},
			// 进店看看
			toShop(id) {
				$api.jump('/page_shop/pages/good/shop?id=' + id)
			},
			// 计算选择数量和价格
			totalGood() {
				var total = 0	
				that.total = 0
				that.num = 0
				var num = 0
				for(var i = 0;i<that.pageList.length;i++) {
					for (var j=0;j<that.pageList[i].goods_item.length;j++) {
						if(that.pageList[i].goods_item[j].checked) {
							num += that.pageList[i].goods_item[j].num
							total += that.pageList[i].goods_item[j].num * Number(that.pageList[i].goods_item[j].price_selling)
							that.total = total.toFixed(2)
							that.num = num
						}
					}
				}
			},
			// 数量
			valChange(e) {
				console.log(e.name);
				$api.req({
					url: '/data/api.Goods/goods_cart_save',
					data: {
						cart_id: e.name,
						num: e.value
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						// that.getCart()
						that.totalGood()
					}
				})
			},
			// 删除
			deleteCart(index,index2) {
				$api.req({
					url: '/data/api.Goods/goods_cart_del',
					data: {
						cart_ids: that.pageList[index].goods_item[index2].id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						that.getCart()
					}
				})
			},
			batchDelete() {
				var cart_ids = []
				for(var i = 0;i<that.pageList.length;i++) {
					for (var j=0;j<that.pageList[i].goods_item.length;j++) {
						if(that.pageList[i].goods_item[j].checked) {
							cart_ids.push(that.pageList[i].goods_item[j].id)
						}
					}
				}
				cart_ids = cart_ids.toString()
				$api.req({
					url: '/data/api.Goods/goods_cart_del',
					data: {
						cart_ids: cart_ids
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						that.getCart()
					}
				})
			},
			buy() {
				var cart_ids = []
				for(var i = 0;i<that.pageList.length;i++) {
					for (var j=0;j<that.pageList[i].goods_item.length;j++) {
						if(that.pageList[i].goods_item[j].checked) {
							cart_ids.push(that.pageList[i].goods_item[j].id)
						}
					}
				}
				cart_ids = cart_ids.toString()
				$api.req({
					url: '/data/api.Order/crat_create',
					method: 'POST',
					data: {
						cart_ids: cart_ids,
						address_id: uni.getStorageSync('address_id')?uni.getStorageSync('address_id'): '',
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F5F5F5;
		.top {
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			.top_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #555555;
				line-height: 40rpx;
				padding-left: 6rpx;
			}
		}
		.center {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			margin-bottom: 186rpx;
			.box {
				width: 100%;
				background: #FFFFFF;
				border-radius: 14px;
				margin-top: 20rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				.cell {
					padding: 10rpx 0;
				}
				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
					line-height: 42rpx;
				}
				.right_btn {
					width: 112rpx;
					height: 36rpx;
					background: #EDF0FF;
					border-radius: 18rpx;
					text-align: center;
					font-size: 20rpx;
					font-weight: 400;
					color: #506DFF;
					line-height: 36rpx;
				}
				.img {
					width: 128rpx;
					height: 128rpx;
					border-radius: 12rpx;
					margin: 0 20rpx 0 16rpx;
				}
				.img_right {
					width: calc(100% - 188rpx);
				}
				.item_name {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					// padding-bottom: 32rpx;
				}
				.norm {
					margin: 12rpx 0;
					background: #F5F5F5;
					border-radius: 2px;
					box-sizing: border-box;
					padding: 8rpx 24rpx 8rpx 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #888888;
					line-height: 28rpx;
				}
				.text_red {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF4747;
					line-height: 32rpx;
				}
				.u-number-box {
					// width: 152rpx;
					// height: 40rpx !important;
					.input {
						// min-height: 40rpx !important;
					}
					.u-number-box__minus {
						border-radius: 20rpx 0 0 20rpx;
					}
					.u-number-box__input {
						margin: 0 !important;
						min-height: 40rpx !important;
					}
					.u-number-box__plus {
						border-radius: 0 20rpx 20rpx 0;
					}
				}
				
			}
		}
		.bottom {
			width: 100%;
			z-index: 9999;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 30rpx 74rpx;
			.bottom_num {
				font-size: 20rpx;
				font-weight: 400;
				color: #939393;
				line-height: 34rpx;
				padding-bottom: 16rpx;
			}
			.bottom_total {
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
				padding-bottom: 16rpx;
			}
			.text-blue {
				font-size: 34rpx;
				font-weight: 400;
				color: #5270FF;
			}
			.btn {
				width: 232rpx;
				height: 88rpx;
				background: #506DFF;
				border-radius: 44rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
			.btn2 {
				width: 200rpx;
				height: 80rpx;
				border-radius: 44rpx;
				border: 1px solid #506DFF;
				font-size: 36rpx;
				font-weight: 500;
				color: #506DFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
		.u-page {
			padding: 0;
		}
	
		.u-demo-block__title {
			padding: 10px 0 2px 15px;
		}
	
		.swipe-action {
			&__content {
				 padding: 25rpx 0;
		
				&__text {
					 font-size: 15px;
					 color: $u-main-color;
					 padding-left: 30rpx;
				 }
			}
		}
		.u-swipe-action-item__right__button__wrapper {
			background-color: #FF4C4C !important;
		}
		.u-swipe-action-item__right {
			width: 114rpx;
			height: 128rpx;
			margin:  0 0 30rpx;
		}
	}
</style>