web-app-v1/pages/shop-car1/shop-car1.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>
					<view class="right">
						<view class="right-box">
							<view style="margin-right: 40rpx;">
								<text class="one">数量：</text>
								<text class="two">{{item.goods_num}}</text>
							</view>
							<view class="">
								<text class="one">金额：</text>
								<text class="two">￥{{item.goods_money}}</text>
							</view>
							<!-- {{numChange}} -->
						</view>
						<text class="cuIcon-delete" @click.stop="deleteGood(index)"></text>
					</view>

				</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,item.cart[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]" :num="item.step"
						@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 class="total">合计: <text>{{ '￥ ' + choosedPrice + '' }}</text></view>
			<view class="pay" @tap="confirm">下一步</view>
		</view>
	</view>
</template>

<script>
	import {
		deepClone
	} from '@/common/util/index.js'
	import {
		_API_GoodList,
		GetGoodStatus
	} from '@/apis/good.js'
	import {
		_API_GetallGift,
		CheckGoodNum

	} from '@/apis/order.js'
	import NumInput from '@/components/public/num-input.vue'

	function sum(arr) {
		var len = arr.length;
		if (len == 0) {
			return 0;
		} else if (len == 1) {
			return arr[0];
		} else {
			return arr[0] + sum(arr.slice(1));
		}
	}
	export default {
		components: {
			NumInput
		},
		data() {
			return {
				giftList: [],
				isHelper: '',
				isLimit: false //下单数量是否限制  false不限制  true限制
			};
		},
		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)
		// 		}
		// 	}
		// },
		onLoad() {
			// 如果是助手登录隐藏tabbar
			this.isHelper = uni.getStorageSync('isHelper')
			if (this.isHelper) {
				uni.hideTabBar()
			} else {
				uni.showTabBar()
			}
		},
		onShow() {
			console.log(this.$store.state.cart.list)
			const cartinfo = this.$store.state.cart.list
			for (var i = 0; i < cartinfo.length; i++) {
				// cartinfo[i].goods_num= sum(cartinfo[i].cart)
				cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
				let cart = cartinfo[i].cart
				let sizeChoosed = cartinfo[i].sizeChoosed
				let options = []
				for (var e = 0; e < cart.length; e++) {
					var a = {};
					a.num = cart[e];
					a.sizeChoosed = sizeChoosed[e];
					options.push(a);
				}
				let newArr = options.filter((item, key) => {
					return item.num != 0 && item.sizeChoosed != false
				})
				cartinfo[i].options = newArr
				cartinfo[i].goods_num = newArr.reduce((p, e) => p + e.num, 0);
				cartinfo[i].goods_money = cartinfo[i].goods_num * cartinfo[i].money


			}
			console.log(cartinfo)
			// if (this.$store.getters['cart/shopcarNum']) {
			// 	// uni.setTabBarBadge({ index: 1, text: this.$store.getters['cart/shopcarNum'] + '' })
			// } else {
			// 	uni.removeTabBarBadge({ index: 1 })
			// }
			this.getAllGift()
			// 客户下单限制测试
			// this.checkStatus()

		},
		methods: {
			// 客户下单数量限制是否开启
			// 客户下单限制测试
			// checkStatus() {
			// 	GetGoodStatus().then(res => {
			// 		if (res.code === 200) {
			// 			this.isLimit = res.data.status
			// 		} else {
			// 			uni.showToast({
			// 				title: '获取状态失败'
			// 			})
			// 		}
			// 	})
			// },
			getAllGift() {
				this.giftList = []
				_API_GetallGift().then(res => {
					if (res.code === 200) {
						this.giftList = res.data.list
					}
				})
			},
			numChange(value, index, sizeIndex) { // 购物车数量发生变化
				if (value) {
					const cartinfo = this.$store.state.cart.list
					cartinfo[index].cart[sizeIndex] = value
					cartinfo[index].goods_num = sum(cartinfo[index].cart)
					cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
					this.$store.commit('cart/COUNTCHANGE', {
						value,
						index,
						sizeIndex,
						del: true
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确定删除这个尺寸？',
						success: res => {
							if (res.confirm) {
								const cartinfo = this.$store.state.cart.list
								cartinfo[index].cart[sizeIndex] = value
								cartinfo[index].goods_num = sum(cartinfo[index].cart)
								cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
								this.$store.commit('cart/COUNTCHANGE', {
									value,
									index,
									sizeIndex,
									del: true
								})
							}
						}
					})
				}
			},
			chooseAll(to) { // 点击全选
				console.log(to)
				this.$store.commit('cart/CHOOSEDCHANGE', [to])
				if (to === true) {
					const cartinfo = this.$store.state.cart.list
					for (var i = 0; i < cartinfo.length; i++) {
						cartinfo[i].goods_num = sum(cartinfo[i].cart)
						cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
					}
				} else {
					const cartinfo = this.$store.state.cart.list
					for (var i = 0; i < cartinfo.length; i++) {
						cartinfo[i].goods_num = 0
						cartinfo[i].goods_money = 0
					}
				}
			},
			chooseGood(to, index) { // 点击商品
				this.$store.commit('cart/CHOOSEDCHANGE', [to, index])
				console.log(to, index)
				if (to === true) {
					const cartinfo = this.$store.state.cart.list
					cartinfo[index].goods_num = sum(cartinfo[index].cart)
					cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
				} else {
					const cartinfo = this.$store.state.cart.list
					cartinfo[index].goods_num = 0
					cartinfo[index].goods_money = 0
				}
			},
			chooseSize(to, index, sizeIndex, num) { // 点击尺寸
				console.log(to, index, sizeIndex, num)
				this.$store.commit('cart/CHOOSEDCHANGE', [to, index, sizeIndex])
				const cartinfo = this.$store.state.cart.list
				if (to === true) {
					cartinfo[index].goods_money = cartinfo[index].goods_money + cartinfo[index].money * num
					cartinfo[index].goods_num = cartinfo[index].goods_num + num
					// const cartinfo = this.$store.state.cart.list
					// cartinfo[index].goods_num= sum(cartinfo[index].cart)
					// cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
				} else {
					cartinfo[index].goods_money = cartinfo[index].goods_money - cartinfo[index].money * num
					cartinfo[index].goods_num = cartinfo[index].goods_num - num
					// cartinfo[index].goods_money = - 
					// const cartinfo = this.$store.state.cart.list
					// cartinfo[index].goods_num= 0
					// cartinfo[index].goods_money = 0
				}
				// for(var i=0;i<cartinfo.length;i++) {
				// 	// if (cartinfo[i].cart.index)
				// 	let num = sum(cartinfo[i].cart) - cartinfo[i].cart
				// 	// cartinfo[i].goods_num= sum(cartinfo[i].cart)
				// 	cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
				// }
			},
			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() { // 点击结算
				let type = 0
				let total = 0
				let num = []
				let size_id = []
				//客户下单限制测试
				// let size6 = ''
				// let size3 = ''
				deepClone(this.list).forEach((goodItem, goodIndex) => {
					//客户下单限制测试
					// if (goodItem.name === '大卫博士青春版' || goodItem.name === '大卫博士高腰版') {
					// 	size3 = goodItem.cart.reduce((a, b) => a + b, 0)
					// }
					// if (goodItem.name === '大卫博士精装版') {
					// 	size6 = goodItem.cart.reduce((a, b) => a + b, 0)
					// }
					goodItem.cart.forEach((n, i) => {
						if (n && goodItem.sizeChoosed[i]) {
							type++
							total += n
							num.push(n)
							size_id.push(goodItem.size_id[i])
						}
					})
				})
				//客户下单限制测试
				// if (size3 % 3 != 0 && this.isLimit) {
				// 	uni.showModal({
				// 		content: '青春版和高腰版请按照3的倍数下单',
				// 		showCancel: false
				// 	})
				// 	return
				// }
				// if (size6 % 6 != 0 && this.isLimit) {
				// 	uni.showModal({
				// 		content: '精装版请按照6的倍数下单',
				// 		showCancel: false
				// 	})
				// 	return
				// }
				if (this.choosedNum) {
					CheckGoodNum({
						total,
						type,
						num,
						size_id
					}).then(res => {
						if (res.code == 200) {
							uni.navigateTo({
								url: '../confirm-order1/confirm-order1'
							})
							location.reload()
						} else {
							uni.showModal({
								showCancel: false,
								title: '提示',
								content: res.message
							})
						}
					})
				}
			}
		}
	}
</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 {
				background: #FFFFFF;
				padding: 20rpx 0;

				.left {
					@include flex();
					justify-content: flex-start;

					>.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;
						}
					}
				}

				.right {
					margin-top: 15rpx;
					padding-left: 92rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&-box {
						// width: 384rpx;
						line-height: 52rpx;
						padding: 0 20rpx;
						background-color: #FFF4F3;
						border-radius: 8rpx;
						display: flex;
						font-size: 32rpx;

						.one {
							color: #333;
						}

						.two {
							color: #F76454;
							font-weight: bold;
						}
					}
				}

				.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: 0;
			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;
						font-size: 40rpx;
					}
				}

				&.pay {
					width: 220rpx;
					color: #FFFFFF;
					background: $app-base-color;
				}
			}
		}
	}
</style>