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

<template>
	<view v-if="showed" class="add-cart" catchtouchmove="ture">
		<view class="content">
			<view class="close" @tap="showed = false">
				<text class="cuIcon-close"></text>
			</view>
			<view class="info">
				<view class="info_top">
					<view class="info_top_left">
						<image :src="item.main_img" mode="widthFix"></image>
					</view>
					<view class="info_top_right">
						<view>{{ item.name }}</view>
						<view class="shop-car" @click="toCart">
							<text class="cuIcon-cartfill"></text>
						</view>
					</view>
				</view>
				<scroll-view :scroll-y="true" class="info_top_bottom">
					<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></text> -->
						</view>
						<view v-if="+item.storage[index] > 0">
							<!-- <NumInput v-if="item.name == '红色贺岁款（精装版）'" :value="item.cart[index]" :args="[item.size_id[index]]" :num="item.step" :max="item.residue[index]" :name="item.name"
								@change="numChange" /> -->
							<NumInput  :value="item.cart[index]" :args="[item.size_id[index]]" :num="item.step" :name="item.name"
								@change="numChange" />
						</view>
						<view v-else>暂无库存</view>
					</view>
				</scroll-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: {}
			}
		},
		watch: {
			showed(a) {
				if (a) {
					let body = document.getElementsByTagName('body')[0]
					body.setAttribute('style', 'position: fixed;top:0;bottom:0;left:0;right:0;')
				} else {
					let body = document.getElementsByTagName('body')[0]
					body.removeAttribute('style')
				}
			}
		},
		computed: {
			choosedNum() {
				return this.item.cart.reduce((t, e) => t + e, 0)
			}
		},
		destroyed() {
			let body = document.getElementsByTagName('body')[0]
			body.removeAttribute('style')
		},
		methods: {
			mask() {
				return false
			},
			show(item) {
				this.showed = true
				this.item = item
				console.log(item, '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.item.open = false
					this.hide()
				} else {
					uni.showToast({
						title: '请选择尺寸',
						icon: 'none'
					})
				}
			},
			toCart() {
				uni.navigateTo({
					url: '../../pages/shop-car1/shop-car1'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.add-cart {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 1;
		background: rgba(0, 0, 0, .3);
		overflow: hidden;

		.content {
			left: 0;
			right: 0;
			bottom: 0;
			height: 960rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: 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 {
				flex: 1;
				width: 100%;
				overflow: auto;
				padding: 30rpx;
				position: relative;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;
				overflow: hidden;
				align-items: center;

				.info_top {
					width: 100%;
					height: 180rpx;
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					background-color: #FFFFFF;

					.info_top_left {
						width: 180rpx;
						height: 180rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.info_top_right {
						padding-left: 10rpx;
						flex: 1;
						color: #181818;
						font-size: 32rpx;
						font-weight: bold;
						height: 180rpx;
						display: flex;
						justify-content: center;
						flex-direction: column;

						.shop-car {
							width: 100%;
							@include flex();
							justify-content: flex-end;

							text {
								@include flex();
								border-radius: 50%;
								background: $app-base-color;
								width: 100rpx;
								height: 100rpx;
								font-size: 48rpx;
								color: #FFFFFF;
							}
						}
					}
				}

				.info_top_bottom {
					width: 100%;
					height: calc(100% - 190rpx);
				}

				.item-info {
					@include flex();
					margin-bottom: 30rpx;
					align-items: flex-start;
					justify-content: space-between;
					width: 100%;
					height: 180rpx !important;
					overflow: hidden;

					.main_img_box {
						width: 180rpx;
						height: 180rpx;
						margin: 0 18rpx 0 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							display: block;
							width: 225rpx !important;
							height: 180rpx !important;
						}
					}

					.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() 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;
				height: 80rpx;
				width: 100%;
				background: $app-base-color;
			}
		}
	}
</style>