web-app-v1/pages/shop-car1/before.vue

<template>
	<view class="shop-car1">
		<view v-if="list.length" class="list">
			<view class="shopcar-item" v-for="(item, index) in list" :key="index">
				<view class="name" @tap="chooseGood(!item.choosed, index)">
					<view class="left">
						<text v-if="item.choosed" class="cuIcon-roundcheckfill"></text>
						<text v-else class="cuIcon-round"></text>
						<view class="name ellipsis">{{ item.name }}</view>
					</view>
					<text class="cuIcon-delete" @click.stop="deleteGood(index)"></text>
				</view>
				<view class="sizeItem" v-for="(sizeItem, sizeIndex) in item.size" :key="sizeIndex" v-if="item.cart[sizeIndex]" 
					@tap="chooseSize(!item.sizeChoosed[sizeIndex], index, sizeIndex)"
				>
					<text v-if="item.sizeChoosed[sizeIndex]" class="cuIcon-roundcheckfill"></text>
					<text v-else class="cuIcon-round"></text>
					<image :src="item.main_img"></image>
					<view class="info">
						<text>尺码：{{ sizeItem }}</text>
						<text class="basecolor">￥{{ item.money }}/{{ item.unit }}</text>
					</view>
					<NumInput :value="item.cart[sizeIndex]" :args="[index, sizeIndex]" @change="numChange" />
				</view>
			</view>
			<view class="gift_container" v-if="giftList.length > 0">
				<view class="fix_title">
					<text class="cuIcon-roundcheckfill"></text>
					<text class="title">赠品信息</text>
				</view>
				<div class="gift_list">
					<view class="gift_item" v-for="item in giftList" :key="item.id" v-show="Math.floor(giftNum / item.num) > 0">
						<template v-if="giftNum >= item.limit_num">
							<image :src="item.img" class="gift_img"></image>
							<view class="right">
								<view class="fixed">赠品名称:</view>
								<view class="bottom">
									<view class="name">{{item.name}}</view>
									<view class="num">数量：{{ Math.floor(giftNum / item.num) }}</view>
								</view>
							</view>
						</template>
					</view>
				</div>
			</view>
		</view>
		<view v-else class="none">
			<image src="../../static/icon/emptyshopcar.png"></image>
			<view class="big-btn" @tap="goToBuy">去下单</view>
		</view>
		<view class="buy">
			<view class="all" @tap="chooseAll(!choosedAll)">
				<text v-if="choosedAll" class="cuIcon-roundcheckfill"></text>
				<text v-else class="cuIcon-round"></text>
				<text>全选</text>
			</view>
			<view class="total">总计: <text>{{ '￥ ' + choosedPrice + '' }}</text></view>
			<view class="pay" @tap="confirm">结算({{ ' ' + choosedNum + ' ' }})</view>
		</view>
	</view>
</template>

<script>
	import { deepClone } from '@/common/util/index.js'
	import { _API_GoodList } from '@/apis/good.js'
	import { _API_GetallGift } from '@/apis/order.js'
 	import NumInput from '@/components/public/num-input.vue'
	export default {
		components: { NumInput },
		data() {
			return {
				giftList: []
			};
		},
		computed: {
			list() { return this.$store.state.cart.list },
			choosedAll() { return this.$store.getters['cart/choosedAll'] },
			choosedNum() { return this.$store.getters['cart/choosedNum'] },
			choosedPrice() { return this.$store.getters['cart/choosedPrice'] },
			giftNum() { return this.$store.getters['cart/giftNum'] }
		},
		// async onShow() {
		// 	uni.loading()
		// 	const { data: { list } } = await _API_GoodList()
		// 	for(let i = this.list.length - 1; i >= 0; i --) { // 遍历购物车
		// 		const inCartGood = list.find(listItem => listItem.attr_id == this.list[i].attr_id)
		// 		if (inCartGood) { // 如果购物车的商品存在于商品列表中
		// 			for(let j = this.list[i].size_id.length - 1; j >= 0; j --) {
		// 				const cartSize = this.list[i].size_id[j]
		// 				const inCartSize = inCartGood.size_id.find(e => e == cartSize)
		// 				console.log(inCartSize)
		// 				// // if (inCartSize) {
		// 				// // 	console.log(inCartSize)
		// 				// // } else {
		// 				// // 	console.log(inCartSize)
		// 				// // }
		// 				// console.log(inCartSize)
		// 			}
		// 		} else { // 不存直接删除
		// 			this.$store.commit('cart/DELETE', i)
		// 		}
		// 	}
		// },
		onShow() {
			// if (this.$store.getters['cart/shopcarNum']) {
			// 	uni.setTabBarBadge({ index: 1, text: this.$store.getters['cart/shopcarNum'] + '' })
			// } else {
			// 	uni.removeTabBarBadge({ index: 1 })
			// }
			this.getAllGift()
		},
		methods: {
			getAllGift() {
				this.giftList = []
				_API_GetallGift().then(res => {
					if(res.code === 200) {
						this.giftList = res.data.list
					}
				})
			},
			numChange(value, index, sizeIndex) { // 购物车数量发生变化
				if (value) {
					this.$store.commit('cart/COUNTCHANGE', { value, index, sizeIndex, del: true })
				} else {
					uni.showModal({
					    title: '提示',
					    content: '确定删除这个尺寸？',
					    success: res => {
					        if (res.confirm) {
					            this.$store.commit('cart/COUNTCHANGE', { value, index, sizeIndex, del: true })
					        }
					    }
					})
				}
			},
			chooseAll(to) { // 点击全选
				this.$store.commit('cart/CHOOSEDCHANGE', [to])
			},
			chooseGood(to, index) { // 点击商品
				this.$store.commit('cart/CHOOSEDCHANGE', [to, index])
			},
			chooseSize(to, index, sizeIndex) { // 点击尺寸
				this.$store.commit('cart/CHOOSEDCHANGE', [to, index, sizeIndex])
			},
			goToBuy() { // 点击去下单
				uni.navigateTo({ url: '../place-order/place-order' })
			},
			deleteGood(index) { // 点击删除商品
				uni.showModal({
				    title: '提示',
				    content: '确定删除这件商品？',
				    success: res => {
				        if (res.confirm) {
				            this.$store.commit('cart/DELETE', index)
				        }
				    }
				})
			},
			confirm() { // 点击结算
				if (this.choosedNum) {
					uni.navigateTo({ url: '../confirm-order1/confirm-order1' })
				}
			}
		}
	}
</script>

<style lang="scss">
	.shop-car1 {
		height: 100vh;
		overflow: auto;
		background: $app-base-bg;
		border-bottom: calc(var(--window-bottom) + 100rpx) solid transparent;
		.gift_container {
			width: 100%;
			.fix_title {
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 32rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid $app-base-bg;
				.cuIcon-roundcheckfill {
					color: #F76454;
					font-size: 32rpx;
				}
			    
				.title {
					margin-left: 30rpx;
					color: #181818;
					font-size: 32rpx;
				}
			}
			.gift_list {
				background-color: #FFFFFF;
				.gift_item {
					padding: 28rpx 30rpx;
					margin-bottom: 1px;
					background-color: #FFFFFF;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.gift_img {
						display: block;
						width: 140rpx;
						height: 140rpx;
					}
					.right {
						width: calc(100% - 140rpx);
						height: 140rpx;
						padding: 0 50rpx 0 30rpx;
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						.fixed {
							color: #181818;
							font-size: 32rpx;
						}
						.bottom {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.name {
								color: #F76454;
								font-size: 32rpx;
							}
							.num {
								color: #181818;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}
		.shopcar-item {
			margin-bottom: 10rpx;
			.name {
				height: 90rpx;
				@include flex();
				background: #FFFFFF;
				justify-content: space-between;
				.left {
					@include flex();
					> .name {
						color: #181818;
						font-size: 32rpx;
						font-weight: bold;
					}
					.cuIcon-round, .cuIcon-roundcheckfill {
						@include flex();
						width: 102rpx;
						height: 100%;
						font-size: 32rpx;
						&.cuIcon-roundcheckfill {
							color: $app-base-color;
						}
					}
				}
				.cuIcon-delete {
					font-size: 40rpx;
					margin-right: 30rpx;
				}
			}
			.sizeItem {
				@include flex();
				height: 200rpx;
				margin-top: 4rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding-right: 39rpx;
				.cuIcon-round, .cuIcon-roundcheckfill {
					@include flex();
					width: 102rpx;
					height: 100%;
					font-size: 32rpx;
					&.cuIcon-roundcheckfill {
						color: $app-base-color;
					}
				}
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 6rpx;
				}
				.info {
					flex: 1;
					height: 100%;
					@include flex(column);
					align-items: flex-start;
					padding: 43rpx 29rpx;
					box-sizing: border-box;
					justify-content: space-between;
				}
			}
		}
		.none {
			@include flex(column);
			height: 100%;
			image {
				width: 305rpx;
				height: 417rpx;
			}
			.big-btn {
				width: 280rpx;
				height: 80rpx;
				margin-top: 123rpx;
				border-radius: 40rpx;
			}
		}
		.buy {
			@include flex();
			position: fixed;
			left: 0;
			right: 0;
			bottom: var(--window-bottom);
			z-index: 1;
			height: 98rpx;
			font-size: 32rpx;
			background: #FFFFFF;
			justify-content: space-between;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(178,178,178,1);
			view {
				@include flex();
				height: 100%;
				&.all {
					font-size: 32rpx;
					text {
						margin-left: 30rpx;
						&.cuIcon-roundcheckfill {
							color: $app-base-color;
						}
					}
				}
				&.total {
					flex: 1;
					margin-right: 30rpx;
					justify-content: flex-end;
					text {
						color: $app-base-color;
					}
				}
				&.pay {
					width: 220rpx;
					color: #FFFFFF;
					background: $app-base-color;
				}
			}
		}
	}
</style>