caimei-applets-caimei/pages/goods/components/cm-unit-suppor-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="product.image" 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-ladel" v-if="isShowLadder" @click.stop="showLaddePopup"> 此规格商品存在阶梯价格，点击查看 >>> </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 confirm"
						:disabled="isBtnDisabled"
						:class="[isBtnDisabled ? 'disabled' : '']"
						@click="handleConfirm"
					>
						确定
					</button>
				</view>
			</view>
		</view>
	</tui-bottom-popup>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import cmUnitPrice from './cm-unit-price.vue'
export default {
	name: 'cm-unit-popup',
	components: {
		uniGrader,
		cmUnitPrice
	},
	props: {
		product: {
			type: Object
		},
		popupShow: {
			type: Boolean,
			default: false
		},
		type: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			isShowLadder:false,
			isBtnDisabled:false,
			skuIndex: 0,
			userIdentity: 0,
			number: 0,
			buyRetailPrice: 0,
			ladderPriceList: [],
			isQuantity: false,
			handleUnit:'',
			skuList: [
				{
					unit: '135ml70ml', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: ' 精华70ml', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '精华70ml', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【70ml】2瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【50ml】3瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				},
				{
					unit: '【35ml】4瓶', // 规格
					normalPrice: 1000, // 市场价
					price: 500, // 售价
					costPrice: 500, // 结算价
					stock: 100 // 库存
				}
			]
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},	
	created() {
		this.number = this.product.minBuyNumber
		this.buyRetailPrice = this.product.price
		this.initData()
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		async initData(data) {
			const userInfo = await this.$api.getStorage()
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			//处理禁用按钮商品
			this.isBtnDisabled = this.isDisabledFlag(this.product)
			if(this.product.skuList[0].ladderPriceList){ this.isShowLadder = true }
		},
		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
		},
		handleConfirm() {
			const data = { unit : this.handleUnit} 
			this.$emit('btnConfirm', data)
			this.$parent.popupShow1 = false
		},
		handleChoisSku(sku, index) {
			// 选择SKU
			this.skuIndex = index
			this.handleUnit = sku.unit
			this.ladderPriceList = sku.ladderPriceList
			this.isShowLadder = sku.ladderPriceList ? true : false
		},
		showLaddePopup(){
			// 点击显示阶梯价
			this.laddePopupShow = true
		},
		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;
		}
	}
	.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-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;
		}
		&.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>