caimei-applets-caimei/pages/goods/components/cm-unit-popup.vue

<template name="cm-parameter">
	<!-- 相关规格 -->
	<view>
		<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="product.mainImage" mode=""></image> </view>
						<view class="tui-sku-price"> <cmUnitPrice :product="product"></cmUnitPrice> </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">缺货</text>
							</view>
						</view>
					</view>
					<view class="sku-unit-nunbox">
						<view class="sku-unit-nunbox" v-if="product.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"
										:class="[isQuantity == true ? 'disabled' : '']"
										@click="changeCountSub"
									></view>
									<input
										class="btn-input"
										type="number"
										v-model="number"
										maxlength="4"
										@blur="changeNumber($event)"
									/>
									<view
										class="iconfont icon-jiahao"
										:class="[isStock == true ? 'disabled' : '']"
										@click="changeCountAdd"
									></view>
								</view>
							</view>
						</view>
					</view>
					<view class="sku-unit-ladel" v-if="isShowLadder" @click.stop="showLaddePopup"> 此规格商品存在阶梯价格，点击查看 >>> </view>
				</view>
				<view
					class="tui-right-flex tui-popup-btn"
					v-if="isShowButton"
					:style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }"
				>
					<view class="tui-flex-1" v-if="type === 1">
						<view class="tui-button" @click="btnConfirm">确定</view>
					</view>
					<view class="tui-modal-flex" v-else>
						<button
							class="tui-modal-button cancel"
							:disabled="goodsData.disabled"
							:class="[goodsData.disabled ? 'disabled' : '']"
							@click="handleConfirm('add')"
						>
							加入购物车
						</button>
						<button
							class="tui-modal-button confirm"
							:disabled="goodsData.disabled"
							:class="[goodsData.disabled ? 'disabled' : '']"
							@click="handleConfirm('buy')"
						>
							立即购买
						</button>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		<!-- 阶梯价弹窗 -->
		<cmLadderPopup v-if="laddePopupShow" :show="laddePopupShow" :list="ladderPriceList"></cmLadderPopup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import cmUnitPrice from './cm-unit-price.vue'
import cmLadderPopup from '@/components/cm-module/productDetails/cm-ladder-popup.vue'
export default {
	name: 'cm-unit-popup',
	components: {
		uniGrader,
		cmUnitPrice,
		cmLadderPopup
	},
	props: {
		product: {
			type: Object
		},
		goodsData: {
			type: Object
		},
		popupShow: {
			type: Boolean, 
			default: false
		},
		type: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			skuIndex: 0,
			number: 0,
			buyRetailPrice: 0,
			ladderPriceList: [],
			isStock:false,// 
			isQuantity: false,
			isShowButton: false,
			skuList: [
				{
					unit: '135ml70ml', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 ,// 库存
					minBuyNumber:1,//起订量
					ladderPriceList:[
						{
							numRange:'1-10',
							buyPrice:500
						},
						{
							numRange:'10-100',
							buyPrice:5000
						},
						{
							numRange:'100-1000',
							buyPrice:50000
						},
					]
				},
				{
					unit: ' 精华70ml', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 ,// 库存
					minBuyNumber:1,//起订量
					ladderPriceList:null
				},
				{
					unit: '精华70ml', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 ,// 库存
					minBuyNumber:1,//起订量
					ladderPriceList:null
				},
				{
					unit: '【70ml】2瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 ,// 库存
					minBuyNumber:1,//起订量
					ladderPriceList:[
						{
							numRange:'1-10',
							buyPrice:500
						},
						{
							numRange:'10-100',
							buyPrice:5000
						},
						{
							numRange:'100-1000',
							buyPrice:50000
						},
					]
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 ,// 库存
					minBuyNumber:1,//起订量
					ladderPriceList:null
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 ,// 库存
					minBuyNumber:1,//起订量
					ladderPriceList:[
						{
							numRange:'1-10',
							buyPrice:500
						},
						{
							numRange:'10-100',
							buyPrice:5000
						},
						{
							numRange:'100-1000',
							buyPrice:50000
						},
					]
				}
			],
			handleStock:0,// 规格库存
			handleMinNumber:1, // 规格起订量
			isShowLadder:false,
			laddePopupShow:false,
		}
	},
	created() {
		console.log('product', this.product)
		this.number = this.skuList[0].minBuyNumber
		this.handleMinNumber = this.skuList[0].minBuyNumber
		this.handleStock = this.skuList[0].stock
		this.buyRetailPrice = this.product.price
		this.initData()
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		async initData(data) {
			const userInfo = await this.$api.getStorage()
			if (userInfo.userIdentity == 0 || userInfo.userIdentity == 2 || userInfo.userIdentity == 4) {
				this.isShowButton = true
			} else {
				this.isShowButton = false
			}
			if(this.product.skuList[0].ladderPriceList){ this.isShowLadder = true }
		},
		//popup弹窗数量增加按钮
		changeCountAdd() {
			if(this.number === this.handleStock){ 
				this.isStock = true 
				return 
			}
			if (this.product.step == 2) {
				this.number += this.handleMinNumber
			} else {
				this.number++
			}
			this.processActivityPrice()
		},
		//popup弹窗数量减按钮
		changeCountSub() {
			if (this.number <= this.handleMinNumber) {
				this.number = this.handleMinNumber
				this.isQuantity = true
				this.$util.msg(`该商品最小起订量为${this.handleMinNumber}`, 2000)
				return
			} else {
				if (this.product.step == 2) {
					this.number -= this.handleMinNumber
				} else {
					this.number--
				}
				this.processActivityPrice()
				this.isQuantity = false
			}
		},
		changeNumber(e) {
			let _value = e.detail.value
			if (!this.$api.isNumber(_value)) {
				this.number = this.handleMinNumber
			} else if (_value < this.handleMinNumber) {
				this.$util.msg(`该商品最小起订量为${this.handleMinNumber}`, 2000)
				this.number = this.handleMinNumber
			} else if (_value % this.handleMinNumber != 0) {
				this.$util.msg('购买量必须为起订量的整数倍', 2000)
				this.number = this.handleMinNumber
			} else if(_value > this.handleStock) {
				this.number = this.handleStock
			}else{
				this.number = e.detail.value
			}
			this.processActivityPrice()
		},
		processActivityPrice() {
			//单独处理活动价格和阶梯价格
			if ((this.product.ladderPriceFlag == '0' && this.product.actStatus == 0) || this.product.actStatus == 1) {
				this.buyRetailPrice = this.product.price
			} else {
				this.ladderPriceList.forEach((item, index) => {
					if (this.number >= item.buyNum) {
						this.buyRetailPrice = item.buyPrice
					}
				})
			}
		},
		handleConfirm(type) {
			if (this.hasLogin) {
				switch (type) {
					case 'add':
						// 友盟埋点商品详情加入购物车点击事件
						if (process.env.NODE_ENV != 'development') {
							this.$uma.trackEvent('Um_Event_ProductAddCart', {
								Um_Key_PageName: '加入购物车',
								Um_Key_SourcePage: '商品详情',
								Um_Key_ProductID: `${this.product.productId}`
							})
						}
						if (this.ladderPriceFlag) {
							this.processActivityPrice()
						}
						break
					case 'buy':
						// 友盟埋点商品详情立即购买点击事件
						if (process.env.NODE_ENV != 'development') {
							this.$uma.trackEvent('Um_Event_ProductBuyConfirm', {
								Um_Key_PageName: '立即购买',
								Um_Key_SourcePage: '商品详情',
								Um_Key_ProductID: `${this.product.productId}`
							})
						}
						break
				}
				let data = { type: type }
				this.$emit('buyConfirm', data)
				this.$parent.popupShow3 = false
			} else {
				this.$api.navigateTo('/pages/login/login')
			}
		},
		btnConfirm() {
			//加入购物车&&立即购买跳转订单页并关闭弹窗
			// 友盟埋点商品详情确认购买商品点击事件
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_ProductShoppingConfirm', {
					Um_Key_PageName: '商品购买确认',
					Um_Key_SourcePage: '商品详情',
					Um_Key_ProductID: `${this.product.productId}`
				})
			}
			let data = { type: type }
			this.$emit('buyConfirm', data)
			this.$parent.popupShow3 = false
		},
		handleChoisSku(sku, index) {
			// 选择SKU
			this.skuIndex = index
			this.number = this.handleMinNumber = sku.minBuyNumber
			this.handleStock = sku.stock
			console.log('handleStock',this.handleStock)
			this.ladderPriceList = sku.ladderPriceList
			this.isShowLadder = sku.ladderPriceList ? true : false
		},
		showLaddePopup(){
			// 点击显示阶梯价
			this.laddePopupShow = true
		},
		hidePopup() {
			//隐藏
			this.$parent.popupShow3 = false
		}
	}
}
</script>

<style lang="scss">
.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;
		}
	}
	.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: 10rpx;
			.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;
						}
						&.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;
					}
				}
			}
		}
	}
	.sku-unit-ladel {
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		float: left;
		margin-top: 20rpx;
		text-align: center;
		font-size: 24rpx;
		background: #fffaf8;
		color: #e15616;
	}
}
.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>