high-mini/pages/classify/cart/cart.vue

<template>
	<view class="">
		<!-- v-if="cartList.length>0"  -->
		
		<view  class="cart-container backcor9">
			<scroll-view :scroll-y="true" class="cart-list">

				<uni-swipe-action>

					<!-- 从这里开始遍历-->
					<view v-for="(item,index) in cartList"
						:class="(item.isFailure?' isFailure ':' ')+'marb10 border-8r backcolorfff paading10'"
						:key="item.id">

						<!-- :disabled="item.isFailure" -->
						<uni-swipe-action-item :auto-close="autoClose" :right-options="swipe_options"
							@click="swipe_opt_event($event,item.id)" @change="swipe_change($event, item.id)">

							<view class="cart-container2">
								<checkbox-group @change="checkClick(item)">
									<checkbox class="mycheck" :disabled="!isEdit&&item.isFailure" color="#FFC71E"
										:value="item.id" :checked="item.whetherCheck" />
								</checkbox-group>
								<view class="cart-detail">
									<view class="cart-img">
										<image :src="imageUrl+item.img" class="img border-8r" mode="aspectFill"></image>
									</view>
									<view class="cart-msg">
										<view class="">
											<view class="cart-msg-title font16 marb10 mart5">{{item.title}}</view>
											<view class="cart-msg-parm font13 marb10 fcor777">{{item.skuName|| ''}}
											</view>
										</view>

										<view class="cart-msg-price">
											<view class="cart-price font16 fcorred">
												<!-- ¥ <text class="font20">18 </text>.8 -->
												¥{{item.price}}
											</view>
											<view class="cart-num">

												<uni-number-box v-model="item.num" :min="1" @noMoreLess="noMoreLess(item.id+'')"
													@change="changeNumValue($event,item.id)" />
											</view>
										</view>


									</view>
								</view>
							</view>
						</uni-swipe-action-item>

					</view>

					<noMore></noMore>

				</uni-swipe-action>

			</scroll-view>
			<view class="cart-tool bg-white">
				<view class="select-all">
					<checkbox-group @change="checkAllClick">
						<label>
							<!-- :disabled="cartList.length == 0" -->
							<checkbox class="mycheck" color="#FFC71E" :value="allCheck.value"
								:checked="allCheck.whetherCheck" />
							<text class="paddleft5 font16 fcor777">全选</text>
						</label>
						<!--  -->
					</checkbox-group>
					<text v-if="!isEdit" class="paddleft5 fcorred font16" @click="editDelete">编辑</text>
					<text v-if="isEdit" class="icon-ymt delete paddleft5 fcorred" @click="deleteCart"></text>

				</view>
				<text v-if="isEdit" class="tool-right paddleft5 fcorred" @click="editDelete">退出编辑</text>
				<view v-if="!isEdit" class="tool-right">
					<view class="tool-jiesuan marRight10 ">
						合计:<text class="fcorred">¥{{priceAll}}</text>
					</view>
					<view class="jiesuan-btn fcorfff " @click="settleAccount">
						结算
					</view>

				</view>

			</view>
		</view>

		<!-- <view v-else class="cart-container backcor9">
			<view class="">
				购物车内暂无商品，快去购物吧
			</view>

		</view> -->
	</view>


</template>

<script>
	// import cartList from '@/pages/classify/cart-list/cart-list.vue'
	import noMore from '@/pages/classify/no-more/no-more.vue'
	import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue'
	import {
		getShoppingCartList,
		goodsAddNum,
		deleteShoppingCart
	} from '@/Utils/physicalObject.js'

	const app = getApp();
	export default {
		data() {
			return {
				imageUrl: app.globalData.imgUrl, //图片地址
				cartList: [],


				checkList: [],
				allCheck: {
					name: '全选',
					whetherCheck: false,
					value: 'all'
				},

				// 
				swipe_options: [{
					isCheck: false,
				 text: "收藏",
					icon: ' shoucang32 ',
					style: {
				  backgroundColor: '#f6c133'
					}
				}, {
					text: '删除',
					icon: ' delete ',
					style: {
						backgroundColor: '#E64340'
					}
				}],
				swipe_item_index: null,
				numberValue: 0,
				cartList: [],
				autoClose: false,
				// listSelect:[],

				isEdit: false,
				showAction: 'none'

			}
		},
		components: {
			// cartList,
			noMore,
			"uni-number-box": uniNumberBox
		},
		computed: {
			priceAll() {
				//总计金额
				var str = 0;
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].whetherCheck) {
						str += this.cartList[i].num * this.cartList[i].price;
					}
				}
				return str;
			}
		},
		onLoad() {
			// this.cartList=[
			// {id:111,name:"小香风",isFailure:true,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1},
			// {id:222,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1},
			// {id:333,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1},
			// {id:444,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1},
			// ]
			// this.cartList.map(item=>{
			// 	this.$set(item, 'checked', false);
			// })
			this.initData();

		},
		methods: {
			initData() {

				getShoppingCartList().then(res => {

					if (res.return_code == '000000') {
						console.log(res.return_data)
						this.cartList = res.return_data;
						this.allCheckInit();
						
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			editDelete() {
				this.isEdit = !this.isEdit;
				if (!this.isEdit) { //退出编辑
					this.cartList.map(item => {
						if (item.whetherCheck && item.isFailure) {
							item.whetherCheck = false;
						}
					})
				} else { //进入编辑
					if (this.allCheck.whetherCheck) {
						this.cartList.map(item => {
							item.whetherCheck = true;
						})
					}
				}


			},
			// 全选的点击事件
			checkAllClick(e) {
				this.allCheck.whetherCheck = !this.allCheck.whetherCheck;
				if (this.allCheck.whetherCheck) {
					this.cartList.map(item => {
						if (!this.isEdit) { //商品的全选事件
							if (!item.isFailure) {
								item.whetherCheck = true
							}
						} else { //编辑的全选事件
							item.whetherCheck = true
						}

					})
				} else {
					this.cartList.map(item => {
						item.whetherCheck = false
					})
				}
			},

			// 单个商品的选择
			checkClick(item) {
				item.whetherCheck = !item.whetherCheck;

				if (!item.whetherCheck) {
					if (!this.isEdit && !item.isFailure) { //商品
						this.allCheck.whetherCheck = false;
					} else if (this.isEdit) {
						this.allCheck.whetherCheck = false;
					}

				} else {
					// 				// 判断每一个商品是否是被选择的状态
					// 				const goods = this.cartList.every(item => {
					// 					if(!this.isEdit){//商品
					// 						if(item.isFailure){
					// 							return true;
					// 						}
					// 					}


					// 					return item.whetherCheck === true
					// 				})
					// 				if (goods) {
					// 					this.allCheck.whetherCheck = true
					// 				} else {
					// 					this.allCheck.whetherCheck = false
					// 				}

					this.allCheckInit()
				}
			},
			allCheckInit() {
				
				if(this.cartList.length == 0){
					this.allCheck.whetherCheck = false;
					return
				}
				
				// 判断每一个商品是否是被选择的状态
				const goods = this.cartList.every(item => {
					// if (!this.isEdit) { //商品
					// 	if (item.isFailure) {
					// 		return true;
					// 	}
					// }
					return item.whetherCheck === true
				})
				if (goods) {
					this.allCheck.whetherCheck = true
				} else {
					this.allCheck.whetherCheck = false
				}
				// console.log(this.allCheck.whetherCheck,goods)
			},

			// 判断购物车内是否有商品
			isHaveGoods() {
				if (this.cartList.length == 0) {
					uni.showToast({
						title: '购物车内暂无商品喔',
						duration: 1000,
						icon: 'none'
					});

					return false
				}
				return true;
			},

			// 购物车删除
			deleteCart() {
				if (!this.isHaveGoods()) return;
				var select = [];
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].whetherCheck) {
						select.push(this.cartList[i].id)
					}
				}
				if (select.length == 0) {
					uni.showToast({
						title: '请勾选要移除购物车的商品',
						duration: 1000,
						icon: 'none'
					});
					return
				} else {
					// console.log(select.join(), "要移除的商品id")
					let str=select.join();
					this.noMoreLess(str)
				}


			},
			// 结算
			settleAccount() {
				if (!this.isHaveGoods()) return;

				if (this.priceAll > 0) {
					uni.navigateTo({
						url: '/pages/settleAccounts/settleAccounts'
					})
				} else {
					uni.showToast({
						title: '请勾选要购买的商品',
						duration: 1000,
						icon: 'none'
					});
				}

			},
			// 滑动点击
			swipe_opt_event(e,id) {
				console.log(e, "dianji")

				if (e.index == 0) { //收藏

					// console.log(e.content.isCheck)
					// e.content.isCheck=!e.content.isCheck

					// if(e.content.isCheck){
					// 	e.content.icon=" shoucang32-select "
					// }else{
					// 	e.content.icon=" shoucang32 "
					// }
					this.showAction = 'right'

					return
				}
				if (e.index == 1) { //删除
					
					this.noMoreLess(id+"")


					// this.showAction = 'right';

					return
				}
				
			},
			// 滑动事件
			swipe_change(e, id) {
				console.log(e, id)
				// this.swipe_item_index= (e == 'none') ? null : v

			},
			noMoreLess(ids) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确定把该商品移除购物车吗?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定,要删除的id',ids);
							let params={ids:ids};
							deleteShoppingCart(params).then(res=>{
								let title ;
								if (res.return_code == '000000') {
										title = res.return_data;				
								}else{
									title = res.return_msg;
								}
								uni.showToast({
									title: title,
									icon: 'none',
									duration: 2000
								})		
								
								_this.initData();
								
							})
							
						} else if (res.cancel) {

							console.log('用户点击取消');
						}
					}
				});

			},
			
			changeNumValue(v, id) {
				// console.log(v,id)
				// console.log(this.cartList)
				let params = {
					id: id
				}
				goodsAddNum(params).then(res => {

					if (res.return_code == '000000') {
						uni.showToast({
							title: res.return_data,
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})

			}

		}

	}
</script>

<style lang="scss" scoped>
	.bg-white {
		background-color: #fff;
	}

	.cart-container {
		height: 100vh;
		padding: 10px 20rpx 0px;
		box-sizing: border-box;
		position: relative;
	}

	.cart-list {
		height: calc(100vh - 70px);
	}

	// 列表
	.cart-container2 {
		display: flex;
		align-items: center;

		.mycheck {
			// margin:0 20rpx;
		}

		.cart-detail {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 0 10rpx;

			.cart-img {

				.img {
					vertical-align: middle;
					width: 200rpx;
					height: 200rpx;

				}
			}

			.cart-msg {
				flex: 1;
				align-self: flex-start;
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.cart-msg-title {}

				.cart-msg-parm {}

				.cart-msg-price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.cart-price {}

					.cart-num {}

				}
			}
		}

	}


	// 失效
	.isFailure {
		.cart-img {
			position: relative;

			:before {
				content: '商品失效';
				display: block;
				height: 20rpx;
				width: 120rpx;
				line-height: 20rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #E6E6E6;
				position: absolute;
				top: calc(50% - 30rpx);
				left: 20rpx;
				z-index: 10;
				font-size: 28rpx;
				text-align: center;
			}
		}

		background-color: #ffffff;
		opacity: 0.8;
	}


	// 底部
	.cart-tool {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 10px;
		height: 60px;
		// line-height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.select-all {
			display: flex;
			align-items: center;
		}

		.tool-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.tool-jiesuan {}

			.jiesuan-btn {
				width: 200rpx;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-radius: 20px;
				background: linear-gradient(to right, #FFCC1E, #FF8F19);
			}
		}
	}
</style>