caimei-applets-caimei/components/cm-module/productDetails/cm-unit-popup.vue

<template name="cm-parameter">
	<!-- 相关规格 -->
	<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup">
		<view class="tui-popup-box clearfix">
			<view class="tui-shopping-main" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
				<view class="tui-sku-title">
					<view class="tui-sku-image"> <image :src="skuProduct.image" mode=""></image> </view>
					<view class="tui-sku-price">
						<view class="sku-price-viw">
							<view
								class="sku-price-text"
								:class="
									PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1
										? 'none'
										: ''
								"
							>
								￥{{
									(PromotionsFormat(skuProduct.promotions) || skuProduct.svipProductFlag == 1
										? skuProduct.originalPrice
										: skuProduct.price) | NumFormat
								}}
							</view>
						</view>
						<view class="sku-price-vip">
							<view class="floor-item-act">
								<view class="coupon-tags" v-if="skuProduct.couponsLogo">优惠券</view>
								<template v-if="skuProduct.actStatus == 1 && skuProduct.promotions">
									<view v-if="PromotionsFormat(skuProduct.promotions)" class="floor-tags">
										{{ skuProduct.promotions.name }}
										<text v-if="skuProduct.promotions != null && skuProduct.promotions.type != 3">
											:￥{{
												skuProduct.promotions == null
													? '0.00'
													: skuProduct.promotions.touchPrice | NumFormat
											}}
										</text>
									</view>
									<view v-else-if="skuProduct.promotions.type != 3" class="floor-tags">
										{{ skuProduct.promotions.name }}
									</view>
								</template>
								<template v-if="skuProduct.actStatus == null && skuProduct.ladderFlag == 1">
									<view class="floor-tags">阶梯价格</view>
								</template>
								<template v-if="skuProduct.svipProductFlag == 1">
									<view class="svip-tags">
										<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
										<view class="price" v-if="isShowVipFlag(skuProduct)">{{
											skuProduct.svipPriceTag
										}}</view>
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
				<view class="tui-sku-unit">
					<view class="sku-unit-h1">规格：</view>
					<view class="sku-unit-li">
						<view
							class="unit-li"
							v-for="(sku, index) in skuList"
							@click="handleChoisSku(sku, index)"
							:key="index"
							:class="skuIndex === index ? 'active' : ''"
						>
							{{ sku.unit }} <text class="tips" v-if="sku.stock === 0">缺货</text>
						</view>
					</view>
				</view>
				<view class="sku-unit-nunbox">
					<view class="sku-unit-nunbox" v-if="skuProduct.step === 2">
						<view class="text">*该商品只能以起订量的整数倍购买</view>
					</view>
					<view class="sku-unit-nunbox-t">
						<view class="sku-unit-nunbox-text">购买数量:</view>
						<view class="sku-unit-nunbox-num">
							<view class="number-box">
								<view
									class="iconfont icon-jianhao"
									@click="changeCountSub"
									:class="[isQuantity == true ? 'disabled' : '']"
								></view>
								<input
									class="btn-input"
									type="number"
									v-model="productCount"
									maxlength="4"
									@blur="changeNumber($event)"
								/>
								<view
									class="iconfont icon-jiahao"
									@click="changeCountAdd"
									:class="[isStock == true ? 'disabled' : '']"
								></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
				<view class="tui-modal-flex">
					<button
						class="tui-modal-button cancel"
						@click="handleBuyConfirm('add')"
						:disabled="isBtnDisabled"
						:class="[isBtnDisabled ? 'disabled' : '']"
					>
						加入购物车
					</button>
					<button
						class="tui-modal-button confirm"
						@click="handleBuyConfirm('buy')"
						:disabled="isBtnDisabled"
						:class="[isBtnDisabled ? 'disabled' : '']"
					>
						立即购买
					</button>
				</view>
			</view>
		</view>
	</tui-bottom-popup>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
export default {
	name: 'cm-unit-popup',
	components: {
		uniGrader
	},
	props: {
		skuProduct: {
			type: Object
		},
		popupShow: {
			type: Boolean,
			default: false
		},
		type: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			vipFlag: 0, // 是否是超级会员 0否 1是
			skuIndex: 0,
			isStock: false, //
			isQuantity: false, 
			handleStock: 0, // 规格库存
			handleMinNumber: 1, // 规格起订量
			productCount: 0,
			skuList: [],
			addParams: {
				skuId: 0,
				productCount: 0,
				productId: 0,
				userId: 0,
				source: 1
			},
			isBtnDisabled: false
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	created() {
		this.initData()
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		async initData() {
			const userInfo = await this.$api.getStorage()
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.addParams.userId = userInfo.userId ? userInfo.userId : 0
			this.addParams.productId = this.skuProduct.productId
			this.skuList = this.skuProduct.skus
			this.productCount = this.skuList[0].minBuyNumber
			this.addParams.skuId = this.skuList[0].skuId
			this.handleMinNumber = this.skuList[0].minBuyNumber
			this.handleStock = this.skuList[0].stock
			//处理禁用按钮商品
			this.isBtnDisabled = this.isDisabledFlag(this.skuProduct)
		},
		isDisabledFlag(pros) {
			// 非会员
			if (!this.vipFlag === 1) return true
			// 商品已下架 || 库存为0
			if (pros.validFlag == 3 || pros.stock == 0) return true
			// 商品价格不公开
			if (pros.priceFlag === 1) return true
			// 商品价格仅资质机构可见 && 机构为普通机构
			if (pros.priceFlag === 2 && this.userIdentity === 4) return true
			// 商品价格仅医美机构可见 && 机构为普通机构
			if (pros.priceFlag === 3 && this.userIdentity === 4) return true
			// 商品价格仅医美机构可见 && 机构为资质机构 && 不是医美机构
			if (pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType != 1) return true
			//其他
			return false
		},
		isShowVipFlag(pros) {
			// 未登录 || 非会员
			if (!this.hasLogin || !this.vipFlag === 1) return false
			// 商品所有机构可见
			if (pros.priceFlag === 0) return true
			// 商品价格仅资质机构可见
			if (pros.priceFlag === 2 && this.userIdentity === 2) return true
			// 商品价格仅医美机构可见
			if (pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) return true
			// 其它
			return false
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		//popup弹窗数量增加按钮
		changeCountAdd() {
			if (this.productCount === this.handleStock) {
				this.isStock = true
				return
			}
			if (this.skuProduct.step == 2) {
				this.productCount += this.handleMinNumber
			} else {
				this.productCount++
			}
		},
		//popup弹窗数量减按钮
		changeCountSub() {
			if (this.productCount <= this.handleMinNumber) {
				this.productCount = this.handleMinNumber
				this.isQuantity = true
				this.$util.msg(`该商品最小起订量为${this.handleMinNumber}`, 2000)
				return
			} else {
				if (this.skuProduct.step == 2) {
					this.productCount -= this.handleMinNumber
				} else {
					this.productCount--
				}
				this.isQuantity = false
			}
		},
		changeNumber(e) {
			let _value = e.detail.value
			if (!this.$api.isNumber(_value)) {
				this.productCount = this.handleMinNumber
			} else if (_value < this.handleMinNumber) {
				this.$util.msg(`该商品最小起订量为${this.handleMinNumber}`, 2000)
				this.productCount = this.handleMinNumber
			} else if (_value % this.handleMinNumber != 0) {
				this.$util.msg('购买量必须为起订量的整数倍', 2000)
				this.productCount = this.handleMinNumber
			} else if (_value > this.handleStock) {
				this.productCount = this.handleStock
			} else {
				this.productCount = e.detail.value
			}
		},
		handleBuyConfirm(type) {
			// 监听确定选择规格
			if (type == 'buy') {
				this.handleToConfirm({
					productIds: this.addParams.productId,
					skuId: this.addParams.skuId,
					productCount: this.productCount
				})
			} else {
				this.addParams.productCount = this.productCount
				this.handleAddClubCart(this.addParams)
			}
		},
		handleToConfirm(data) {
			//跳转确认订单页面
			this.$api.navigateTo(`/pages/user/order/create-order?type=1&data=${JSON.stringify({ data: data })}`)
			this.hidePopup()
		},
		handleAddClubCart(params) {
			//增加购物车成功和toast弹窗提示成功
			this.ProductService.shoppingAddCart(params)
				.then(response => {
					this.$util.msg('加入购物车成功', 1500, true, 'success')
					this.$parent.GetUserCartNumber()
					this.hidePopup()
				})
				.catch(error => {
					console.log('error', error.msg)
				})
		},
		handleChoisSku(sku, index) {
			// 选择SKU
			this.skuIndex = index
			this.addParams.productCount = this.handleMinNumber = sku.minBuyNumber
			this.addParams.skuId = sku.skuId
			this.handleStock = sku.stock
			this.isBtnDisabled = sku.stock === 0
			this.$emit('skuClick', sku)
		},
		hidePopup() {
			this.$parent.popupShow1 = false
		}
	}
}
</script>

<style lang="scss">
.tui-popup-box {
	padding: 40rpx 24rpx 0 24rpx;
}
.tui-shopping-main {
	width: 100%;
	.tui-sku-title {
		width: 100%;
		height: 136rpx;
		float: left;
		margin-bottom: 30rpx;
		.tui-sku-image {
			width: 138rpx;
			height: 138rpx;
			float: left;
			border-radius: 8rpx;
			margin-right: 30rpx;
			box-sizing: border-box;
			border: 1px dashed #e1e1e1;
			image {
				width: 134rpx;
				height: 134rpx;
				border-radius: 10rpx;
			}
		}
		.tui-sku-price {
			height: 136rpx;
			float: left;
			.sku-price-viw {
				width: 100%;
				height: 40rpx;
				margin-bottom: 24rpx;
				.sku-price-text {
					font-size: 28rpx;
					line-height: 40rpx;
					color: #f94b4b;
					font-weight: bold;
					.sku-price-l {
						float: left;
						font-weight: normal;
					}
					&.none {
						text-decoration: line-through;
						color: #999999;
						font-weight: normal;
					}
				}
			}
			.sku-price-vip {
				width: 100%;
				height: 40rpx;
			}
		}
	}
	.tui-sku-unit {
		width: 100%;
		height: auto;
		float: left;
		.sku-unit-h1 {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333333;
			font-weight: bold;
		}
		.sku-unit-li {
			width: 100%;
			height: auto;
			.unit-li {
				padding: 0 24rpx;
				line-height: 48rpx;
				text-align: center;
				font-size: 24rpx;
				color: #666666;
				background: #f5f5f5;
				float: left;
				margin-right: 16rpx;
				margin-top: 12rpx;
				margin-bottom: 12rpx;
				border-radius: 24rpx;
				position: relative;
				box-sizing: border-box;
				border: 1px solid #f5f5f5;
				&.active {
					border-color: $color-system;
					background: #fff1eb;
					color: $color-system;
					.tips {
						background: #e15616;
					}
				}
				.tips {
					padding: 0 10rpx;
					line-height: 32rpx;
					text-align: center;
					font-size: 22rpx;
					color: #ffffff;
					background: #cccccc;
					float: left;
					border-radius: 16rpx;
					position: absolute;
					right: -12rpx;
					top: -15rpx;
				}
			}
		}
	}
	.sku-unit-nunbox {
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: auto;
		float: left;
		margin-top: 30rpx;
		.sku-unit-nunbox-t {
			width: 100%;
			height: 44rpx;
			position: relative;
			margin-bottom: 20rpx;
			.text {
				font-size: $font-size-24;
				line-height: 48rpx;
				color: #999999;
			}
			.sku-unit-nunbox-text {
				line-height: 44rpx;
				font-size: $font-size-28;
				float: left;
				font-weight: bold;
			}
			.sku-unit-nunbox-num {
				float: right;
				.number-box {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2rpx solid #ffe6dc;
					border-radius: 30rpx;
					height: 48rpx;
					margin-left: 20rpx;
					.iconfont {
						font-size: $font-size-24;
						padding: 0 18rpx;
						color: #999999;
						text-align: center;
						line-height: 48rpx;
						font-weight: bold;
						background: #fef6f3;
						&.icon-jianhao {
							border-radius: 30rpx 0 0 30rpx;
							&.disabled {
								background: #f5f5f5;
							}
						}
						&.icon-jiahao {
							border-radius: 0 30rpx 30rpx 0;
							&.disabled {
								background: #f5f5f5;
							}
						}
					}
					.btn-input {
						width: 62rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: #ffffff;
						border-radius: 4rpx;
						text-align: center;
						font-size: $font-size-28;
					}
				}
			}
		}
	}
}
.tui-popup-btn {
	width: 100%;
	float: left;
	.tui-modal-flex {
		width: 100%;
		height: 84rpx;
		margin-top: 40rpx;
		display: flex;
		.tui-modal-button {
			flex: 1;
			line-height: 84rpx;
			font-size: $font-size-28;
			text-align: center;
			border-radius: 42rpx;
			padding: 0;
			margin: 0 15rpx;
			box-sizing: border-box;
			&.cancel {
				background: #ffe6dc;
				color: #e15616;
				&.disabled {
					background-color: #e1e1e1;
					color: #ffffff;
				}
			}
			&.confirm {
				background: $btn-confirm;
				color: #ffffff;
				&.disabled {
					background: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
				}
			}
		}
	}
}
</style>