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')">
					<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">
					<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)">
						<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')"></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.count}}件；{{g_item.spec}}</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.count)
							}
						})
					})
					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);
					// TODO 此处为假数据 ------------------
					let list = [{
						name: '精品超市',
						full_minus: '母婴产品教师节满1200减200',
						goods: [{
							checked: false,
							img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
							name: '爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g',
							count: 1,
							spec: '900g',
							price: '385'
						},{
							checked: false,
							img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
							name: '基尼泰煤2000G',
							count: 2,
							spec: '900g',
							price: '197'
						}]
					},{
						name: '精品超市',
						full_minus: '母婴产品教师节满1200减200',
						goods: [{
							checked: false,
							img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
							name: '爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g',
							count: 4,
							spec: '900g',
							price: '99'
						}]
					}]
					this.list = list;
					// TODO 此处为假数据 end --------------
				})
			},
			// 商品被勾选
			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){
					this.$url('/pages/order/confirm/confirm');
				}else{
					this.$msg('您未选择需要结算的商品');
				}
			},
			// 滑动组件，按钮被点击
			onButton(event, parentIndex){
				console.log("event", event, parentIndex);
				if(event.buttonIndex == 0){
					uni.showModal({
						title: '温馨提示',
						content: '确定移除该商品吗？',
						success: result => {
							
						}
					})
				}
			}
		}
	}
</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>