qianniaoMp/components/SelSkuPop.vue

<template>
	<view class="blanck-pop">
		<u-popup
			:custom-style="{
				background: 'rgba(0,0,0,0)'
			}"
			:value="isShow"
			:mask-close-able="false"
			mode="bottom"
		>
			<view class="detail-box">
				<view class="detail-view">
					<view class="close-icon"><u-icon @click="closeaddcartPop" name="close" color="#EAEAEA" size="32"></u-icon></view>
					<view class="goods-view clearfix">
						<view class="float_left"><image class="goods-img" :src="goods_detail.images[0]" mode="aspectFill"></image></view>
						<view class="float_right goods-info">
							<view class="goods-name ellipsis">{{ goods_detail.title || '' }}</view>
							<view class="goods-desc">
								<block v-if="baseSet.stockDisplay === 5">
									<!-- 总库存大于0 且 支持负库存销售 显示【有货】 -->
									<text class="goods-desc-text">
										总库存：{{ Math.floor(goods_detail.inventoryTotal) > 0 || goods_detail.isDistribution === 5 ? '有货' : '库存不足' }}
									</text>
								</block>
								<block v-if="baseSet.stockDisplay === 6">
									<!-- 负库存销售即使没有库存也 显示【有货】 -->
									<text class="goods-desc-text" v-if="goods_detail.isDistribution === 5">总库存：{{ Math.floor(goods_detail.inventoryTotal) || '有货' }}</text>
									<text class="goods-desc-text" v-else>总库存：{{ Math.floor(goods_detail.inventoryTotal) || '库存不足' }}</text>
								</block>
								<text class="goods-desc-text">已售：{{ goods_detail.salesNum || 0 }}</text>
							</view>
						</view>
					</view>
					<scroll-view scroll-y="true" style="max-height: 700rpx;">
						<view class="sku-ul">
							<view class="sku-li" v-for="(item, index) in specMultiple" :key="index">
								<view class="sku-name ellipsis">
									{{ item.unitName }}
									<text style="margin-left: 8rpx;" v-for="(sku, skuI) in item.specGroup" :key="skuI">{{ sku.specValueName }}</text>
								</view>
								<view class="sku-desc">
									<!-- 库存大于0 且 支持负库存销售 显示【有货】 -->
									<text class="sku-desc-text" v-if="baseSet.stockDisplay === 5">
										库存：{{ Math.floor(item.inventory) > 0 || goods_detail.isDistribution === 5 ? '有货' : '库存不足' }}
									</text>
									<text class="sku-desc-text" v-if="baseSet.stockDisplay === 6">
										<!-- 负库存销售即使没有库存也 显示【有货】 -->
										<block v-if="goods_detail.isDistribution === 5 && Math.floor(item.inventory) <= 0">库存：有货</block>
										<block v-else>库存：{{ Math.floor(item.inventory) }}{{ item.unitName }}</block>
									</text>
									<text class="sku-desc-text" v-if="item.setNum > 1">{{ item.setNum }}{{ item.unitName }}起购</text>
									<text class="sku-desc-text" v-if="item.isMaster === 4">
										1{{ item.unitName }}{{ goodsDetail.isEq === 5 ? '≈' : '=' }}{{ Number(item.conversion) }}{{ goods_detail.unitName }}
									</text>
								</view>
								<view class="sku-price clearfix ">
									<!-- 阶梯价 -->
									<block v-if="!showGoodsPrice">
										<view class="float_left ladder-ul" v-if="item.enabledLadder === 1">
											<view class="ladder-li" v-for="(ladder, ladderI) in item.ladderPrice" :key="ladderI">
												<view class="price-text clearfix primary-color">
													<view class="float_left rmb-icon">¥</view>
													<rich-text class="float_left" :nodes="$_utils.splitPrice(ladder.price)"></rich-text>
												</view>
												<view class="num-region" v-if="ladderI + 1 === item.ladderPrice.length">≥{{ ladder.from }}{{ item.unitName }}</view>
												<view class="num-region" v-else>{{ ladder.from }}~{{ ladder.to }}{{ item.unitName }}</view>
											</view>
										</view>
										<!-- 非阶梯价 -->
										<view v-else class="float_left clearfix primary-color price-text">
											<view class="float_left rmb-icon">¥</view>
											<rich-text class="float_left" :nodes="$_utils.splitPrice(item.salePrice)"></rich-text>
										</view>
									</block>
									<block v-else>
										<text class="showGoodsPrice primary-color">{{ showGoodsPrice }}</text>
									</block>
									<view class="vip-price float_left clearfix" v-if="item.memberPrice > 0">
										<view class="price-text">¥{{ item.memberPrice }}</view>
										<view class="price-bs">VIP</view>
									</view>
									<!-- 步进器 -->
									<view class="num-edit-view float_right">
										<view class="subr-view p-background-img " :class="[item.buy_num <= 0 ? 'disabled-color' : '']" @click="delNum(index)">
											<u-icon size="28" name="minus"></u-icon>
										</view>
										<view class="buy-num-input-view">
											<input type="number" @blur="buyNumInput($event, index)" class="buy-num-input" :value="item.buy_num" />
										</view>
										<!-- 数量大于库存或者当前商品不支持负库存销售 则当前加号按钮禁用-->
										<view
											class="plus-view p-background-img"
											:class="[item.buy_num >= Math.floor(item.inventory) && goods_detail.isDistribution !== 5 ? 'disabled-color' : '']"
											@click="plusNum(index)"
										>
											<u-icon size="28" name="plus"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>

					<view class="sub-btn p-background-img">加入购物车</view>
				</view>
			</view>
		</u-popup>

		<NoLoginTip @cancel="cancelTip" :show="loginTip" v-if="loginTip" />
	</view>
</template>

<script>
import NoLoginTip from './NoLoginTip.vue';
export default {
	components: {
		NoLoginTip
	},
	props: {
		selAddress: {
			type: Object,
			default: () => {
				return {};
			}
		},
		isShow: {
			type: Boolean,
			default: false
		},
		goodsId: {
			type: [Number, String],
			default: 0
		},
		isList: {
			type: Boolean,
			default: true
		},
		skuId: {
			type: [Number, String],
			default: ''
		}
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		baseSet() {
			return this.$store.state.baseSet;
		},
		userStatus() {
			return this.$store.state.userStatus;
		},
		showGoodsPrice() {
			if (this.baseSet.goodsPrice === 5 && this.hasLogin) {
				return '';
			} else if (!this.hasLogin && this.baseSet.goodsPrice === 4) {
				return '请登录';
			} else if (this.userStatus.enableStatus === 4 && this.baseSet.goodsPrice === 4) {
				return '已禁用';
			} else if (this.userStatus.status !== 2 && this.baseSet.goodsPrice === 4) {
				if (this.userStatus.status === 0) {
					return '待审核';
				} else if (this.userStatus.status === 1) {
					return '审核中';
				} else if (this.userStatus.status === 3) {
					return '已驳回';
				}
			} else {
				return '';
			}
		}
	},
	watch: {
		goodsId(val) {
			if (this.isShow) {
				this.goods_detail = {};
				this.specMultiple = [];
				this.getGoodsDetail();
			}
		}
	},
	data() {
		return {
			eq_sku_kg: {},
			isLogin: true, // 判断是否登录
			loginTip: false,
			goods_detail: {
				images: [],
				specGroup: [],
				unitData: []
			},
			spec_id_group: [],
			now_sku_data: {},
			buy_num: 1,
			now_sel_address: {},
			address_data: {}, // 客户地址数据
			not_dispatch_areas: {}, // 该商品不能配送区域
			is_not_express: true, // 当前选择区域是否能够配送
			activityId: '',
			specMultiple: []
		};
	},
	methods: {
		// 请求商品品详情
		async getGoodsDetail() {
			this.$u.api.getGoodsDetail(this.goodsId).then(res => {
				this.goods_detail = res.data;
				this.specMultiple = res.data.specMultiple.map(item => {
					return {
						...item,
						buy_num: 0
					};
				});
			});
		},
		// 关闭加入购物车弹窗
		closeaddcartPop() {
			this.$emit('close', false);
		},
		// 减号按钮
		delNum(index) {
			let target = this.$u.deepClone(this.specMultiple);
			if (target[index].buy_num > 0) {
				// 当前数量为起订量的时候，点击减号按钮直接设置成0
				if (target[index].setNum > 1 && target[index].buy_num === target[index].setNum) {
					target[index].buy_num = 0;
				} else {
					target[index].buy_num = target[index].buy_num - 1;
				}
			}
			this.specMultiple = target;
		},
		// 加号按钮
		plusNum(index) {
			let target = this.$u.deepClone(this.specMultiple);
			// 数量小于库存或者当前商品支持负库存销售，则可以继续添加数量
			if (target[index].buy_num < Math.floor(target[index].inventory) || this.goods_detail.isDistribution === 5) {
				if (target[index].buy_num < 1) {
					// 当前数量为0的时候，第一次加起订量
					target[index].buy_num += target[index].setNum;
				} else {
					target[index].buy_num += 1;
				}
			}
			this.specMultiple = target;
		},
		// 输入框失去焦点
		buyNumInput(e, index) {
			let target = this.$u.deepClone(this.specMultiple);
			target[index].buy_num = e.detail.value - 0;
			// 数量小于库存或者当前商品支持负库存销售，则可以继续添加数量
			if (target[index].buy_num >= Math.floor(target[index].inventory) && this.goods_detail.isDistribution !== 5) {
				this.$u.toast('库存不足，已为您修正');
				this.$nextTick(() => {
					target[index].buy_num = Math.floor(target[index].inventory);
				});
			}
			this.specMultiple = target;
		}
	}
};
</script>

<style lang="scss">
.detail-box {
	padding-top: 34rpx;
	.detail-view {
		padding: 0 32rpx 32rpx;
		background-color: #ffffff;
		position: relative;
		.close-icon {
			position: absolute;
			right: 32rpx;
			top: 30rpx;
		}
		.goods-view {
			.goods-img {
				display: block;
				transform: translateY(-34rpx);
				width: 176rpx;
				height: 176rpx;
				background: #f5f7f7;
				border-radius: 8rpx;
			}
			.goods-info {
				width: calc(100% - 188rpx);
				padding-top: 24rpx;
				padding-right: 58rpx;
				.goods-name {
					width: 100%;
					color: #111111;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					margin-bottom: 8rpx;
					-webkit-line-clamp: 1;
					height: 40rpx;
				}
				.goods-desc {
					color: #9d9d9d;
					font-size: 20rpx;
					.goods-desc-text{
						margin-right: 8rpx;
					}
				}
			}
		}
		.sub-btn {
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #fe923e 0%, #ff3724 100%);
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 56rpx auto 0;
			color: #ffffff;
			font-size: 32rpx;
			font-weight: 500;
		}
		.sku-ul {
			.sku-li {
				padding: 24rpx 0;
				border-bottom: 1px solid #eeeeee;
				&:last-child {
					border-bottom: 0 none;
				}
				.sku-name {
					width: 100%;
					color: #111111;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					margin-bottom: 8rpx;
					-webkit-line-clamp: 1;
					height: 40rpx;
				}
				.sku-desc {
					color: #9d9d9d;
					font-size: 20rpx;
					.sku-desc-text {
						margin-right: 8rpx;
					}
				}
				.sku-price {
					.ladder-ul {
						display: flex;
						width: 432rpx;
						.ladder-li {
							position: relative;
							flex: 3;
							.num-region {
								font-size: 22rpx;
								color: #9d9d9d;
								font-weight: 500;
								margin-top: 8rpx;
							}
						}
					}
					.price-text {
						font-size: 32rpx;
						font-family: DIN-Medium;
						padding-top: 16rpx;
						.rmb-icon {
							font-size: 20rpx;
							margin-top: 12rpx;
						}
					}
					.vip-price {
						margin-left: 20upx;
						margin-top: 18upx;
						line-height: 32rpx;
						height: 32rpx;
						border-radius: 4rpx;
						overflow: hidden;
						font-family: DINPro-Regular;

						.price-text {
							min-width: 80rpx;
							text-align: center;
							float: left;
							vertical-align: middle;
							font-size: 20rpx;
							color: #ffdfa2;
							background: linear-gradient(270deg, #1e5657 0%, #0d2b2c 100%);
							padding: 0 8rpx;
						}

						.price-bs {
							text-align: center;
							float: left;
							vertical-align: middle;
							width: 32rpx;
							background-color: #ffdfa2;
							font-size: 16rpx;
							color: #2c7564;
							font-family: DIN-Medium;
						}
					}
					.num-edit-view {
						text-align: center;
						display: inline-flex;
						align-items: center;

						.buy-num-input-view {
							display: flex;
							position: relative;
							text-align: center;
							padding: 0;
							justify-content: center;
							align-items: center;
							margin: 0 16rpx;
							flex-direction: row;

							.buy-num-input {
								width: 104upx;
								text-align: center;
								font-family: DIN-Medium;
								line-height: 48upx;
								height: 48upx;
								font-size: 26upx;
								color: #111111;
								background: rgba(202, 202, 202, 0.39);
								border-radius: 6rpx;
							}
						}

						.subr-view,
						.plus-view {
							justify-content: center;
							align-items: center;
							flex-direction: row;
							display: flex;
							margin-top: 0upx;
							width: 48rpx;
							height: 48rpx;
							line-height: 48rpx;
							color: #ffffff;
							border-radius: 100%;
						}
						.disabled-color {
							background-image: linear-gradient(90deg, rgba(202, 202, 202, 0.39) 0%, rgba(202, 202, 202, 0.39) 100%) !important;
						}
					}
				}
			}
		}
	}
}
</style>