web-app/components/public/add-cart.vue

<template>
	<view v-if="showed" class="add-cart" @touchmove.stop="">
		<view class="content">
			<view class="close" @tap="showed = false">
				<text class="cuIcon-close"></text>
			</view>
			<view class="info">
				<view class="item-info">
					<image :src="item.main_img" mode=""></image>
					<view class="ellipsis">{{ item.name }}</view>
					<view class="shop-car" @click="toCart">
						<text class="cuIcon-cartfill"></text>
					</view>
				</view>
				<view v-for="(size, index) in item.size" :key="index" class="size-item">
					<view class="left">
						<text>{{ size }}</text>
						<text class="basecolor">￥{{ item.money }}/{{ item.unit }}</text>
						<!-- <text>库存：{{ item.storage[index] }}</text> -->
					</view>
					<NumInput :value="item.cart[index]" :args="[item.size_id[index]]" @change="numChange" />
				</view>
			</view>
			<view class="add" @tap="addCart">加入购物车</view>
		</view>
	</view>
</template>

<script>
	import NumInput from '@/components/public/num-input.vue'
	export default {
		components: { NumInput },
		data() {
			return {
				showed: false,
				item: {}
			}
		},
		computed: {
			choosedNum () {
				return this.item.cart.reduce((t, e) => t + e, 0)
			}
		},
		methods: {
			show(item) {
				this.showed = true
				this.item = item
				console.log(item)
			},
			hide() {
				this.showed = false
			},
			numChange(value, size_id) {
				this.$set(this.item.cart, this.item.size_id.findIndex(e => e === size_id), value)
			},
			addCart() {
				if (this.choosedNum) {
					this.item.choosed = true
					this.item.sizeChoosed = Array(this.item.size.length).fill(true)
					this.$store.commit('cart/ADD', this.item)
					this.hide()
				} else {
					uni.showToast({ title: '请选择尺寸', icon: 'none' })
				}
			},
			toCart() {
				uni.switchTab({ url: '../../pages/shop-car1/shop-car1' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-cart {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		background: rgba(0, 0, 0, .3);
		.content {
			left: 0;
			right: 0;
			bottom: 0;
			height: 960rpx;
			@include flex(column);
			position: absolute;
			background: #FFFFFF;
			.close {
				top: 0;
				right: 0;
				width: 100rpx;
				height: 70rpx;
				font-size: 40rpx;
				@include flex();
				z-index: 1;
				position: absolute;
			}
			.info {
				width: 100%;
				height: 860rpx;
				overflow: auto;
				padding: 30rpx;
				position: relative;
				box-sizing: border-box;
				.item-info {
					height: 180rpx;
					@include flex();
					margin-bottom: 30rpx;
					align-items: flex-start;
					justify-content: flex-start;
					image {
						width: 180rpx;
						height: 180rpx;
						margin: 0 37rpx 0 18rpx;
					}
					.ellipsis {
						color: #181818;
						font-size: 32rpx;
						font-weight: bold;
						line-height: 3;
					}
					.shop-car {
						flex: 1;
						height: 100%;
						@include flex();
						text {
							@include flex();
							border-radius: 50%;
							background: $app-base-color;
							width: 100rpx;
							height: 100rpx;
							font-size: 48rpx;
							color: #FFFFFF;
						}
					}
				}
				.size-item {
					@include flex()
					height: 227rpx;
					padding: 36rpx 18rpx;
					box-sizing: border-box;
					border-top: 2rpx solid #CCCCCC;
					.left {
						flex: 1;
						height: 100%;
						font-size: 28rpx;
						margin-right: 24px;
						@include flex(column);
						align-items: flex-start;
						justify-content: space-between;
						.num {
							width: 100%;
							@include flex();
							justify-content: space-between;
						}
					}
				}
			}
			.add {
				@include flex();
				color: #FFFFFF;
				font-size: 36rpx;
				flex: 1;
				width: 100%;
				background: $app-base-color;
			}
		}
	}
</style>