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" v-if="pageList.length>0">
			<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 text_hide" style="max-width: 450rpx;">{{item.nickname}}</view>
						</view>
						<view class="right_btn" @click="toShop(item.admin_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 :key="item2.id" :autoClose="true">
								<u-swipe-action-item :options="options2" @click="deleteCart(index,index2)" :autoClose="true">
									<view class="hflex acenter cell">
										<u-checkbox v-model="item2.id" :value="item2.id" :checked="item2.checked" shape="circle"></u-checkbox>
										<image :src="item2.show_image" mode="aspectFill" class="img"></image>
										<view class="vflex img_right">
											<view class="item_name text_hide" style="max-width: 450rpx;">{{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="center" v-else>
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" text="购物车为空"></u-empty>
		</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">￥{{count}}</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: [
					
				],
				count: 0,
				num: 0,
				page: 1,
				limit: 10,
				total: 10,
				isAllSelected: false,
				options2: [{
                    text: '删除'
                }]
			}
		},
		onLoad() {
			that = this
			var city = uni.getStorageSync('city')
			if(city) {
				that.city = city
			}
			that.getCart()
		},
		onShow() {
			var token = uni.getStorageSync('token') 
			if(!token) {
				$api.info('请先登录')
				setTimeout(() =>{
					$api.jump('/pages/login/code_login')
				}, 1000)
			}
		},
		methods: {
			// 获取购物车列表
			getCart() {
				$api.req({
					url: '/data/api.Goods/goods_cart_list',
					data: {
						page: that.page
					}
				}, function(res) {
					if(that.page == 1) {
						that.pageList = res.data.list
					} else {
						that.pageList = that.pageList.concat(res.data.list)
					}
					that.total = res.data.page.total
					that.limit = res.data.page.limit
					for(var i=0;i<that.pageList.length;i++) {
						for(var j=0;j<that.pageList[i].goods_item.length;j++) {
							that.pageList[i].goods_item[j].goods_spec = $api.resetspec(that.pageList[i].goods_item[j].goods_spec)
						}
					}
				})
			},
			// 管理
			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.count = 0
				}
				that.totalGood()
			},
			// 进店看看
			toShop(id) {
				$api.jump('/page_shop/pages/good/shop?id=' + id)
			},
			// 计算选择数量和价格
			totalGood() {
				var count = 0	
				that.count = 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
							count += that.pageList[i].goods_item[j].num * Number(that.pageList[i].goods_item[j].price_selling)
							that.count = count.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 address_id = uni.getStorageSync('address_id')
				var url = ''
				var cart_ids = []
				var data = []
				var good_item = []
				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)
							good_item.push(that.pageList[i].goods_item[j])
						}
					}
					var item = {
						nickname: that.pageList[i].nickname,
						goods_item: good_item
					}
					if(good_item.length !== 0) {
						data.push(item)
					}
					good_item = []
				} 
				if(cart_ids.length == 0) {
					$api.info('请先选择商品')
					return
				}
				cart_ids = cart_ids.toString()
				if(address_id) {
					url = '/page_shop/pages/good/submit?data=' + JSON.stringify(data) + '&cart_ids=' + cart_ids + '&address_id=' + address_id
				} else {
					url = '/page_shop/pages/good/submit?data=' + JSON.stringify(data) + '&cart_ids=' + cart_ids
				}
				$api.jump(url)
				/* 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)
							good_item.push(that.pageList[i].goods_item[j])
						}
					}
					var item = {
						nickname: that.pageList[i].nickname,
						goods_item: good_item
					}
					if(good_item.length !== 0) {
						data.push(item)
					}
					good_item = []
				}
				cart_ids = cart_ids.toString()
				$api.jump('/page_shop/pages/good/submit?pay_no=' + pay_no + '&data=' + JSON.stringify(data) + '&address_id=' + address_id) 
				$api.req({
					url: '/data/api.Order/crat_create',
					method: 'POST',
					data: {
						cart_ids: cart_ids,
						address_id: address_id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						var pay_no = res.data
						$api.jump('/page_shop/pages/good/submit?pay_no=' + pay_no + '&data=' + JSON.stringify(data) + '&address_id=' + address_id) 
					}
				}) */
			},
			onReachBottom() {
				if (Number(that.page) * Number(that.limit) >= Number(that.total)) {
					// $api.info("没有更多了")
				} else {
					that.page++
					that.getCart()
				}
				
			}
		},
	}
</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 {
					max-width: 400rpx;
					width: max-content;
					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-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					box-orient: vertical;
					line-clamp: 2;
					-webkit-line-clamp: 2;
				}
				.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>