ec.uniapp-master/pages/store/cart/cart.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="购物车"></lf-nav>
		<view style="height: 1rpx;"></view>
		<view>
			<view v-for="(s_item, s_index) in list" :key="s_index" class="online-card">
				<view class="lf-m-b-20" @click="$url('/pages/shop/shopdetail?id='+ s_item.id)">
					<text class="lf-iconfont icon-Group- lf-font-28"></text>
					<text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">{{ s_item.name }}</text>
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
				</view>
				<view class="lf-row-between" v-if="s_item.full_minus">
					<view class="lf-flex">
						<view class="gray-tag">满减</view>
						<view class="lf-m-l-15 lf-font-24 lf-color-333">{{s_item.full_minus}}</view>
					</view>
					<view class="red-tag" @click="$msg('敬请期待')">去凑单</view>
				</view>
				<!-- 单个商品信息，增加滑动删除 -->
				<view v-for="(g_item, g_index) in s_item.goods" :key="g_index">
					<lf-swipe-action :options="options" :index="g_index" :show="show" @button="onButton($event, s_index, g_index)">
						<view class="lf-row-between">
							<u-checkbox-group>
								<u-checkbox shape="circle" active-color="#15716E" @change="goodsCheckChange($event, s_index, g_index)"  v-model="g_item.checked"></u-checkbox>
							</u-checkbox-group>
							<view class="lf-m-t-30" style="display: flex;">
								<image class="content-img" :src="g_item.img" mode="aspectFill" @click="$url('/pages/shop/goodsdetail?id='+ g_item.com_id)"></image>
								<view class="lf-m-l-15 content-info">
									<view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">{{g_item.name}}</view>
									<view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between">
										<view>{{g_item.qty ? g_item.qty+'件;' : ''}}{{g_item.color ? g_item.color+';' : ''}}{{g_item.size ? g_item.size : ''}}</view>
										<view class="lf-font-32 lf-color-price">￥{{ g_item.price }}</view>
									</view>
								</view>
							</view>
						</view>
					</lf-swipe-action>
				</view>
			</view>
		</view>
		<view style="height: 60rpx;"></view>
		<view class="cart-bottom">
			<u-checkbox-group>
				<u-checkbox shape="circle" active-color="#15716E" @change="allCheckChange"  v-model="allChecked">
					<text class="lf-font-28 lf-color-777">全选</text>
				</u-checkbox>
			</u-checkbox-group>
			<view class="lf-row-between">
				<view class="lf-font-32 lf-color-222 lf-font-bold lf-m-r-30">
					合计: ￥{{ total_price || 0 }}
				</view>
				<view class="cart-btn" hover-class="lf-opacity" @click="submit">
					<text>结算</text>
					<text v-if="total_count">({{ total_count }})</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lfSwipeAction from '@/components/lf-swipeAction/lf-swipeAction.vue';
	export default {
		components: {
			lfSwipeAction
		},
		data() {
			return {
				token: '', // 用户token
				allChecked: false, // 全选
				list: [], // 购物车列表
				total_price: '', // 总金额
				total_count: '', // 总数量
				options: [{
                    text: '删除',
                    style: {
                        backgroundColor: '#dd524d'
                    }
                },{
                    text: '取消',
                    style: {
                        backgroundColor: '#15716E'
                    }
                }],
				show: false
			}
		},
		watch: {
			list: {
				deep: true,
				handler: function(val){
					let total_count = 0;
					let total_price = 0;
					// TODO 真正对接接口时，使用精度计算
					val.map(s => {
						s.goods.map(g => {
							if(g.checked){
								total_count++;
								total_price += (g.price * g.qty)
							}
						})
					})
					this.total_count = total_count;
					this.total_price = total_price;
				}
			}
		},
		onLoad(){
			this.token = this.$cookieStorage.get('user_token');
			this.getCartList();
		},
		methods: {
			getCartList(){
				this.$http.get({
					api: 'api/cart',
					header: {
						Authorization: this.token
					}
				}).then(res => {
					console.log("===", res);
					let data = res.data.data;
					let list = [];
					for(let i in data){
						let goods = data[i].goods.map(item => {
							item.checked = false;
							return item;
						})
						list.push({
							name: data[i].name,
							full_minus: '',
							goods: goods,
							id: data[i].id
						})
					}
					this.list = list;
				})
			},
			// 商品被勾选
			goodsCheckChange(event, parentIndex, childIndex) {
				this.list[parentIndex].goods[childIndex].checked = event.value;
				let check_list = this.list.map(item => {
					return item.goods.every(g => g.checked);
				});
				this.allChecked = check_list.every(a => a);
			},
			// 全选被改变
			allCheckChange(event){
				this.allChecked = event.value;
				this.list.forEach(s => {
					s.goods.forEach(g => {
						g.checked = event.value;
					})
				})
			},
			// 结算
			submit(){
				if(this.total_count){
					let brand = [];
					let cart_ids = [];
					this.list.map(item => {
						let checked = item.goods.every(g => g.checked);
						item.goods.map(g => {
							if(g.checked){
								cart_ids.push(g.__raw_id);
							}
						})
						if(checked){
							brand.push(item.name);
						}
					})
					if(brand.length > 1){
						this.$msg('只支持单个店铺结算哦');
					}else{
						let par = {
							cart_ids: cart_ids,
							type: "normal",
							wechat_group_id: ""
						};
						this.$cookieStorage.set('order_confirm', par);
						this.$url('/pages/order/confirm/confirm');
					}
				}else{
					this.$msg('您未选择需要结算的商品');
				}
			},
			// 滑动组件，按钮被点击
			onButton(event, parentIndex, childIndex){
				if(event.buttonIndex == 0){
					let __raw_id = this.list[parentIndex].goods[childIndex].__raw_id;
					uni.showModal({
						title: '温馨提示',
						content: '确定移除该商品吗？',
						success: result => {
							if(result.confirm){
								this.$http.ajax({
									api: 'api/shopping/cart/'+ __raw_id,
									method: 'DELETE',
									header: {
										Authorization: this.token
									}
								}).then(res => {
									if(res.data.code == 200){
										this.$msg('删除成功', {icon: 'success'}).then(() => {
											this.list[parentIndex].goods.splice(childIndex, 1);
											if(this.list[parentIndex].goods.length <= 0){
												this.list.splice(parentIndex, 1);
											}
										})
									}else{
										this.$msg('删除失败', {icon: 'error'});
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color:  #F8F8F8;
	}
</style>

<style scoped lang="scss">
	.cart-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 80rpx;
		background: #15716E;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.cart-bottom {
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 32rpx;
	}
	.gray-tag {
		border-radius: 2rpx;
		border: 1rpx solid #979797;
		color: #777;
		padding: 0 6rpx;
		font-size: 20rpx;
		width: max-content;
	}
	.red-tag {
		font-size: 20rpx;
		color: #F63434;
	}
	.content-img {
		width: 130rpx;
		height: 130rpx;
		border-radius: 5rpx;
	}
	.content-info{
		width: 410rpx;
	}
	.online-card {
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		// margin-bottom: 30rpx;
		padding: 30rpx;
		margin: 30rpx auto;
		overflow: hidden;
		&:last-child {
			margin-bottom: 150rpx;
		}
	}
</style>