商品规格修改

common/css/common.scss

@@ -412,7 +412,7 @@ button::after{
 		position: absolute;
 		left: 0;
 		top: 0;
-		border-radius: 8rpx 0 0 8rpx;
+		border-radius: 8rpx 16rpx 0 8rpx;
 		&.none{
 			border-radius: 8rpx;
 		}

components/cm-module/cart-components/cm-unit-popup.vue

@@ -0,0 +1,552 @@
+<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">
+						<view class="sku-price-viw">
+							<view class="sku-price-text"
+								  :class="PromotionsFormat(product.promotions) || product.svipProductFlag == 1 ? 'none' : ''"
+							>
+								￥{{
+									(PromotionsFormat(product.promotions) || product.svipProductFlag == 1
+										? product.originalPrice
+										: product.price) | NumFormat
+								}}
+							</view>
+						</view>
+						<view class="sku-price-vip">
+							<view class="floor-item-act">
+								<view class="coupon-tags" v-if="product.couponsLogo">优惠券</view>
+								<template v-if="product.actStatus == 1 && product.promotions">
+									<view v-if="PromotionsFormat(product.promotions)" class="floor-tags">
+										{{ product.promotions.name }}
+										<text v-if="product.promotions != null && product.promotions.type != 3">
+											:￥{{
+												product.promotions == null
+													? '0.00'
+													: product.promotions.touchPrice | NumFormat
+											}}
+										</text>
+									</view>
+									<view v-else-if="product.promotions.type != 3" class="floor-tags">
+										{{ product.promotions.name }}
+									</view>
+								</template>
+								<template v-if="product.actStatus == null && product.ladderFlag == 1">
+									<view class="floor-tags">阶梯价格</view>
+								</template>
+								<template v-if="product.svipProductFlag == 1">
+									<view class="svip-tags">
+										<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
+										<view class="price" v-if="isShowVipFlag(product)">{{
+											product.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">缺货</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"
+									@click="changeCountSub"
+								></view>
+								<input
+									class="btn-input"
+									type="number"
+									v-model="product.number"
+									maxlength="4"
+									@blur="changeNumber($event)"
+								/>
+								<view
+									class="iconfont icon-jiahao"
+									@click="changeCountAdd"
+								></view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
+				<view class="tui-modal-flex">
+					<view class="tui-modal-button cancel" @click="hidePopup">取消</view>
+					<view class="tui-modal-button confirm" @click="handleConfirm">确定</view>
+				</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: {
+		product: {
+			type: Object
+		},
+		popupShow: {
+			type: Boolean,
+			default: false
+		},
+		type: {
+			type: Number,
+			default: 1
+		}
+	},
+	data() {
+		return {
+			isBtnDisabled:false,
+			vipFlag: 0, // 是否是超级会员 0否 1是
+			skuIndex: 0,
+			number: 0,
+			buyRetailPrice: 0,
+			ladderPriceList: [],
+			isQuantity: false,
+			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.ladderPriceList = this.product.ladderPriceList ? this.product.ladderPriceList : null
+		this.initData()
+	},
+	computed: {
+		...mapState(['hasLogin'])
+	},
+	methods: {
+		async initData(data) {
+			const userInfo = await this.$api.getStorage()
+			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
+			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
+			//处理禁用按钮商品
+			this.isBtnDisabled = this.isDisabledFlag(this.product)
+		},
+		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
+		},
+		PromotionsFormat(promo) {
+			//促销活动类型数据处理
+			if (promo != null) {
+				if (promo.type == 1 && promo.mode == 1) {
+					return true
+				} else {
+					return false
+				}
+			}
+			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
+		}, 
+		handleConfirm() {
+			this.$emit('buyConfirm', data)
+			this.$parent.popupShow2 = false
+		},
+		handleChoisSku(sku, index) {
+			// 选择SKU
+			this.skuIndex = index
+		},
+		hidePopup() {
+			this.$parent.popupShow2 = 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;
+						}
+						&.icon-jiahao {
+							border-radius: 0 30rpx 30rpx 0;
+						}
+					}
+					.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;
+			}
+			&.confirm {
+				background: $btn-confirm;
+				color: #ffffff;
+			}
+		}
+	}
+}
+</style>

components/cm-module/cart-components/index.vue

@@ -63,103 +63,114 @@
 											></view>
 										</view>
 										<view class="pros-img" @click.stop="navToListPage(pros.productId)"
-											><image :src="pros.image ? pros.image : ''" alt=""
-										/><view class="pros-type" v-if="pros.productType == 2">医疗器械</view>
+											><image :src="pros.image ? pros.image : ''" alt="" /><view
+												class="pros-type"
+												v-if="pros.productType == 2"
+												>医疗器械</view
+											>
 										</view>
 										<view class="pros-product">
 											<view class="producttitle" @click.stop="navToListPage(pros.productId)">{{
 												pros.name
 											}}</view>
 											<view class="productspec">规格:{{ pros.unit ? pros.unit : '' }}</view>
-											<view class="productprice">
-												<!--使用过滤器对总价改变-->
-												<view
-													class="price"
-													:class="
-														PromotionsFormat(pros.promotions) ||
-														(pros.svipProductFlag == 1 && vipFlag == 1)
-															? 'disabled'
-															: ''
-													"
-												>
-													<text>￥</text>
-													{{
-														(PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
-															? pros.originalPrice
-															: pros.price) | NumFormat
-													}}
-												</view>
-												<view
-													class="count"
-													v-if="pros.validFlag == 2"
-													:class="[isshowDelbtn ? 'none' : 'show']"
-												>
-													<text class="count-tips" v-if="pros.number < pros.min"
-														>起订量:{{ pros.min }}</text
-													>
-													<text class="count-tips step" v-if="pros.isStep"
-														>购买量必须为起订量的整数倍</text
-													>
-													<view class="number-box">
-														<view
-															class="iconfont icon-jianhao"
-															@click="changeCountSub(item, pros)"
-														></view>
-														<input
-															class="btn-input"
-															type="number"
-															maxlength="4"
-															v-model="pros.number"
-															@blur="changeNnmber($event, item, pros)"
-															@focus="changeInput(pros)"
-														/>
-														<view
-															class="iconfont icon-jiahao"
-															@click="changeCountAdd(item, pros)"
-														></view>
-													</view>
-												</view>
-											</view>
-											<view class="floor-item-act">
-												<template v-if="pros.actStatus == 1 && pros.promotions">
+											<template v-if="pros.stock> 0">
+												<view class="cart-sku-temp" @click.stop="handleShouUnitPopup(pros)">
+													<view class="cart-sku-text">重新选择商品规格</view>
+													<view class="cart-sku-btn">重选</view>
+												</view>	
+											</template>
+											<template v-else>
+												<view class="productprice">
+													<!--使用过滤器对总价改变-->
 													<view
-														v-if="PromotionsFormat(pros.promotions)"
-														class="floor-tags"
-														@click.stop="clickPopupShow(pros, 1)"
+														class="price"
+														:class="
+															PromotionsFormat(pros.promotions) ||
+															(pros.svipProductFlag == 1 && vipFlag == 1)
+																? 'disabled'
+																: ''
+														"
 													>
-														{{ pros.promotions.name }}
-														<text
-															v-if="pros.promotions != null && pros.promotions.type != 3"
-														>
-															:￥{{
-																pros.promotions == null
-																	? '0.00'
-																	: pros.promotions.touchPrice | NumFormat
-															}}
-														</text>
+														<text>￥</text>
+														{{
+															(PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
+																? pros.originalPrice
+																: pros.price) | NumFormat
+														}}
 													</view>
 													<view
-														v-else-if="pros.promotions.type != 3"
-														class="floor-tags"
-														@click.stop="clickPopupShow(pros, 2)"
-													>
-														{{ pros.promotions.name }}
-													</view>
-												</template>
-												<template v-if="pros.actStatus == null && pros.ladderFlag == 1">
-													<view class="floor-tags" @click.stop="clickPopupShow(pros, 2)"
-														>阶梯价格</view
+														class="count"
+														v-if="pros.validFlag == 2"
+														:class="[isshowDelbtn ? 'none' : 'show']"
 													>
-												</template>
-												<template v-if="pros.svipProductFlag == 1">
-													<view class="svip-tags">
-														<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
-														<view class="price" v-if="isShowVipFlag(pros)">{{
-															pros.svipPriceTag
-														}}</view>
+														<text class="count-tips" v-if="pros.number < pros.min"
+															>起订量:{{ pros.min }}</text
+														>
+														<text class="count-tips step" v-if="pros.isStep"
+															>购买量必须为起订量的整数倍</text
+														>
+														<view class="number-box">
+															<view
+																class="iconfont icon-jianhao"
+																@click="changeCountSub(item, pros)"
+															></view>
+															<input
+																class="btn-input"
+																type="number"
+																maxlength="4"
+																v-model="pros.number"
+																@blur="changeNnmber($event, item, pros)"
+																@focus="changeInput(pros)"
+															/>
+															<view
+																class="iconfont icon-jiahao"
+																@click="changeCountAdd(item, pros)"
+															></view>
+														</view>
 													</view>
-												</template>
-											</view>
+												</view>
+												<view class="floor-item-act">
+													<template v-if="pros.actStatus == 1 && pros.promotions">
+														<view
+															v-if="PromotionsFormat(pros.promotions)"
+															class="floor-tags"
+															@click.stop="clickPopupShow(pros, 1)"
+														>
+															{{ pros.promotions.name }}
+															<text
+																v-if="pros.promotions != null && pros.promotions.type != 3"
+															>
+																:￥{{
+																	pros.promotions == null
+																		? '0.00'
+																		: pros.promotions.touchPrice | NumFormat
+																}}
+															</text>
+														</view>
+														<view
+															v-else-if="pros.promotions.type != 3"
+															class="floor-tags"
+															@click.stop="clickPopupShow(pros, 2)"
+														>
+															{{ pros.promotions.name }}
+														</view>
+													</template>
+													<template v-if="pros.actStatus == null && pros.ladderFlag == 1">
+														<view class="floor-tags" @click.stop="clickPopupShow(pros, 2)"
+															>阶梯价格</view
+														>
+													</template>
+													<template v-if="pros.svipProductFlag == 1">
+														<view class="svip-tags">
+															<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
+															<view class="price" v-if="isShowVipFlag(pros)">{{
+																pros.svipPriceTag
+															}}</view>
+														</view>
+													</template>
+												</view>
+											</template>
 										</view>
 									</view>
 								</view>
@@ -302,6 +313,13 @@
 				</view>
 			</view>
 		</view>
+		<!-- 选择规格弹窗 -->
+		<cm-unit-popup
+			v-if="popupShow2"
+			:popupShow="popupShow2"
+			:product="handlePros"
+			@btnConfirm="handleBtnConfirm"
+		></cm-unit-popup>
 		<!-- 促销活动弹窗 -->
 		<activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
 		<!-- 透明模态层 -->
@@ -351,8 +369,12 @@
 										<view class="list-cell-type">
 											<view class="list-cell-tags">
 												<template v-if="coupon.moneyCouponFlag == 1">
-													<text class="tags" v-if="coupon.moneyCouponType == 1">意向{{ coupon.couponType | TypeFormat }}</text>
-													<text class="tags" v-else>定向{{ coupon.couponType | TypeFormat }}</text>
+													<text class="tags" v-if="coupon.moneyCouponType == 1"
+														>意向{{ coupon.couponType | TypeFormat }}</text
+													>
+													<text class="tags" v-else
+														>定向{{ coupon.couponType | TypeFormat }}</text
+													>
 												</template>
 												<template v-else>
 													<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
@@ -388,22 +410,22 @@
 											<view class="icon-used">
 												<template v-if="coupon.couponBtnType == 0">
 													<template v-if="coupon.couponPayWay == 2">
-														<view class="icon-used-text">{{ coupon.moneyCouponPrice }}采美豆</view>
+														<view class="icon-used-text"
+															>{{ coupon.moneyCouponPrice }}采美豆</view
+														>
 														<view
 															class="icon-used-btn receive"
 															@click="toDeductCoupon(coupon)"
 															>抵扣</view
 														>
-													</template>								
+													</template>
 													<template v-else-if="coupon.couponPayWay == 1">
 														<view class="icon-used-text">购买</view>
-														<view
-															class="icon-used-btn receive"
-															@click="toPayCoupon(coupon)"
+														<view class="icon-used-btn receive" @click="toPayCoupon(coupon)"
 															>￥{{ coupon.moneyCouponPrice }}</view
 														>
 													</template>
-													<template v-else>	
+													<template v-else>
 														<view
 															class="icon-used-btn receive"
 															@click="receiveCoupon(coupon)"
@@ -486,6 +508,7 @@ import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
 import tuiNomore from '@/components/tui-components/nomore/nomore'
 import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
 import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
+import cmUnitPopup from './cm-unit-popup.vue'
 import modalLayer from '@/components/modal-layer'
 import payMixins from '@/mixins/payMixins.js'
 import { mapState, mapMutations } from 'vuex'
@@ -502,6 +525,7 @@ export default {
 		tuiNomore,
 		activiPopup,
 		couponTabs,
+		cmUnitPopup,
 		modalLayer
 	},
 	data() {
@@ -547,10 +571,11 @@ export default {
 			pageSize: 10,
 			pageNum: 1,
 			submitIds: [],
-			checkenProsList:[],
+			checkenProsList: [],
 			popupShow: false,
 			popupShow0: false,
 			popupShow1: false,
+			popupShow2: false,
 			currentTab: 1,
 			navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
 			couponParam: {
@@ -579,6 +604,7 @@ export default {
 					plain: false
 				}
 			],
+			handlePros:{}
 		}
 	},
 	created() {
@@ -849,27 +875,30 @@ export default {
 			this.goodsList.map((item, index) => {
 				//计算店铺满减后店铺合计
 				if (item.promotions && item.promotions.mode == 2) {
-					let prosPrice = 0	// 店铺价格合计
+					let prosPrice = 0 // 店铺价格合计
 					let prosDiscountNum = 0 // 店铺促销叠加次数
 					let totalOriginalPrice = 0 //店铺原价合计
 					item.cartList.forEach(pros => {
 						prosPrice += pros.price * pros.number
 						totalOriginalPrice += pros.originalPrice * pros.number
 					})
-					if(item.promotions.discount == 1){// 支持促销叠加条件的店铺满减 执行
-						prosDiscountNum = parseInt(prosPrice/item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
-						console.log('店铺满减促销叠加通道叠加次数',`${prosDiscountNum}次`)
-						if (prosPrice >= item.promotions.touchPrice) {// 满足店铺满减条件下执行
-							item.totalPrice = prosPrice - item.promotions.reducedPrice*prosDiscountNum
-							item.reducedPrice = item.promotions.reducedPrice*prosDiscountNum
+					if (item.promotions.discount == 1) {
+						// 支持促销叠加条件的店铺满减 执行
+						prosDiscountNum = parseInt(prosPrice / item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
+						console.log('店铺满减促销叠加通道叠加次数', `${prosDiscountNum}次`)
+						if (prosPrice >= item.promotions.touchPrice) {
+							// 满足店铺满减条件下执行
+							item.totalPrice = prosPrice - item.promotions.reducedPrice * prosDiscountNum
+							item.reducedPrice = item.promotions.reducedPrice * prosDiscountNum
 							item.totalOriginalPrice = totalOriginalPrice
 						} else {
 							item.reducedPrice = 0 //统计合计价格
 							item.totalPrice = prosPrice
 						}
-					}else{
+					} else {
 						console.log('店铺满减促销非叠加通道')
-						if (prosPrice >= item.promotions.touchPrice) {// 满足店铺满减条件下执行
+						if (prosPrice >= item.promotions.touchPrice) {
+							// 满足店铺满减条件下执行
 							item.totalPrice = prosPrice - item.promotions.reducedPrice
 							item.reducedPrice = item.promotions.reducedPrice
 							item.totalOriginalPrice = totalOriginalPrice
@@ -888,15 +917,15 @@ export default {
 						let _price = pros.price * pros.number
 						_totalOriginalPrice += _price
 						if (pros.promotions && pros.promotions.type != 2 && pros.promotions.mode == 2) {
-							if(pros.promotions.discount == 1){
-								discountNum = parseInt(_price/pros.promotions.touchPrice)
-								console.log('单品满减促销叠加通道叠加次数',`${discountNum}次`)
+							if (pros.promotions.discount == 1) {
+								discountNum = parseInt(_price / pros.promotions.touchPrice)
+								console.log('单品满减促销叠加通道叠加次数', `${discountNum}次`)
 								if (_price >= pros.promotions.touchPrice) {
-									_price = _price - pros.promotions.reducedPrice*discountNum
-									_reducedPrice += pros.promotions.reducedPrice*discountNum
+									_price = _price - pros.promotions.reducedPrice * discountNum
+									_reducedPrice += pros.promotions.reducedPrice * discountNum
 								}
 								_totalPrice += _price
-							}else{
+							} else {
 								console.log('单品满减非促销叠加通道')
 								if (_price >= pros.promotions.touchPrice) {
 									_price = _price - pros.promotions.reducedPrice
@@ -932,27 +961,27 @@ export default {
 					if (pros.isChecked) {
 						supplierPrice += pros.price * pros.number
 						svipReducedPrice += item.svipReducedPrice
-						if( pros.svipProductFlag == 1 ){
+						if (pros.svipProductFlag == 1) {
 							totalAmount += item.originalPrice
-						}else{
+						} else {
 							item.totalprice = supplierPrice
 							totalAmount += item.totalprice
 						}
 						// 单品满减
 						if (pros.promotions && pros.promotions.type * 1 === 1 && pros.promotions.mode * 1 === 2) {
 							let _price = pros.price * pros.number
-							if(pros.promotions.discount == 1){
-								let discountNum = parseInt(_price/pros.promotions.touchPrice)
-								console.log('单品满减促销叠加通道叠加次数',`${discountNum}次`)
+							if (pros.promotions.discount == 1) {
+								let discountNum = parseInt(_price / pros.promotions.touchPrice)
+								console.log('单品满减促销叠加通道叠加次数', `${discountNum}次`)
 								// 单品满减-重新计算供应商总价/满减金额
-								if ( _price >= pros.promotions.touchPrice) {
-									supplierPrice -= pros.promotions.reducedPrice*discountNum
-									supplierReducedPrice += pros.promotions.reducedPrice*discountNum
+								if (_price >= pros.promotions.touchPrice) {
+									supplierPrice -= pros.promotions.reducedPrice * discountNum
+									supplierReducedPrice += pros.promotions.reducedPrice * discountNum
 								}
-							}else{
+							} else {
 								console.log(' 单品满减非促销叠加通道')
 								// 单品满减-重新计算供应商总价/满减金额
-								if ( _price >= pros.promotions.touchPrice) {
+								if (_price >= pros.promotions.touchPrice) {
 									supplierPrice -= pros.promotions.reducedPrice
 									supplierReducedPrice += pros.promotions.reducedPrice
 								}
@@ -962,14 +991,15 @@ export default {
 				})
 				// 店铺满减
 				if (item.promotions && item.promotions.mode * 1 === 2) {
-					if(item.promotions.discount == 1){// 支持促销叠加条件的店铺满减 执行
-						let prosDiscountNum = parseInt(supplierPrice/item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
-						console.log('店铺满减促销叠加通道叠加次数',`${prosDiscountNum}次`)
+					if (item.promotions.discount == 1) {
+						// 支持促销叠加条件的店铺满减 执行
+						let prosDiscountNum = parseInt(supplierPrice / item.promotions.touchPrice) // 店铺满减促销叠加次数 = 店铺合计价格/满减促销价格
+						console.log('店铺满减促销叠加通道叠加次数', `${prosDiscountNum}次`)
 						if (supplierPrice >= item.promotions.touchPrice) {
-							supplierPrice -= item.promotions.reducedPrice*prosDiscountNum
-							supplierReducedPrice += item.promotions.reducedPrice*prosDiscountNum
+							supplierPrice -= item.promotions.reducedPrice * prosDiscountNum
+							supplierReducedPrice += item.promotions.reducedPrice * prosDiscountNum
 						}
-					}else{
+					} else {
 						console.log('店铺满减非促销叠加通道')
 						// 店铺满减-计算供应商总价/满减金额
 						if (supplierPrice >= item.promotions.touchPrice) {
@@ -995,20 +1025,21 @@ export default {
 					promotions.productList.forEach(pros => {
 						collecTotal += this.collecTotalPrice(pros)
 					})
-					if(promotions.discount == 1){// 支持凑单满减促销叠加条件的执行
-						collecDiscountNum += parseInt(collecTotal/promotions.touchPrice) // 凑单满减促销叠加次数 = 凑单商品合计价格/凑单满减促销价格
-						console.log('凑单促销满减叠加通道叠加次数',`${collecDiscountNum}次`)
+					if (promotions.discount == 1) {
+						// 支持凑单满减促销叠加条件的执行
+						collecDiscountNum += parseInt(collecTotal / promotions.touchPrice) // 凑单满减促销叠加次数 = 凑单商品合计价格/凑单满减促销价格
+						console.log('凑单促销满减叠加通道叠加次数', `${collecDiscountNum}次`)
 						if (collecTotal >= promotions.touchPrice) {
-							totalPrice -= promotions.reducedPrice*collecDiscountNum
-							reducedPrice += promotions.reducedPrice*collecDiscountNum
+							totalPrice -= promotions.reducedPrice * collecDiscountNum
+							reducedPrice += promotions.reducedPrice * collecDiscountNum
 						}
-					}else{  
-						console.log('凑单促销满减非叠加通道') 
+					} else {
+						console.log('凑单促销满减非叠加通道')
 						if (collecTotal >= promotions.touchPrice) {
 							totalPrice -= promotions.reducedPrice
 							reducedPrice += promotions.reducedPrice
 						}
-					} 
+					}
 				}
 			})
 			// 最后勾选的超级会员优惠价
@@ -1033,16 +1064,17 @@ export default {
 					this.couponPrice = 0
 				}
 			}
-			// 最终优惠金额 = 促销优惠金额 + 优惠券优惠金额 + 超级会员优惠金额 
+			// 最终优惠金额 = 促销优惠金额 + 优惠券优惠金额 + 超级会员优惠金额
 			this.totalDiscountAmount = this.reducedPrice + this.couponPrice + this.svipReducedPrice
 			console.log('最终优惠金额', `${this.totalDiscountAmount}元`)
 			// 控制显示优惠明细
 			this.isDiscount = this.totalDiscountAmount > 0 ? true : false
 		},
-		collecTotalPrice(pros){// 凑单满减计算勾选的凑单商品总价
-			let price 
+		collecTotalPrice(pros) {
+			// 凑单满减计算勾选的凑单商品总价
+			let price
 			this.checkenProsList.find(el => {
-				if(pros.productId == el.productId ){
+				if (pros.productId == el.productId) {
 					price = el.number * el.price
 				}
 			})
@@ -1261,7 +1293,9 @@ export default {
 						Um_Key_SourcePage: '底部菜单购物车'
 					})
 				}
-				this.$api.navigateTo(`/pages/user/order/create-order?type=2&data=${JSON.stringify({ data: cartPramsData })}`)
+				this.$api.navigateTo(
+					`/pages/user/order/create-order?type=2&data=${JSON.stringify({ data: cartPramsData })}`
+				)
 			}
 		},
 		showDelManager() {
@@ -1381,8 +1415,9 @@ export default {
 				url: '/pages/tabBar/home/index'
 			})
 		},
-		goSuppile(shop) {//跳转店铺
-			if(shop.shopType === 2){
+		goSuppile(shop) {
+			//跳转店铺
+			if (shop.shopType === 2) {
 				return
 			}
 			this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${shop.shopId}`)
@@ -1477,7 +1512,7 @@ export default {
 				this.$uma.trackEvent('Um_Event_cartCouponReceive', {
 					Um_Key_PageName: '机构购物车',
 					Um_Key_EvenName: '领取优惠券',
-					Um_Key_CouponId: `${coupon.couponId}`,
+					Um_Key_CouponId: `${coupon.couponId}`
 				})
 			}
 			this.ProductService.ReceiveCoupon({
@@ -1503,7 +1538,7 @@ export default {
 				this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
 					Um_Key_PageName: '领券中心',
 					Um_Key_EvenName: '抵扣优惠券',
-					Um_Key_CouponId: `${coupon.couponId}`,
+					Um_Key_CouponId: `${coupon.couponId}`
 				})
 			}
 			if (this.hasLogin) {
@@ -1516,71 +1551,79 @@ export default {
 				this.$api.navigateTo('/pages/login/login')
 			}
 		},
-		WeChatPayCouponBeans(coupon){
+		WeChatPayCouponBeans(coupon) {
 			// 采美豆抵扣优惠券
 			this.PayService.WeChatPayCouponBeans({
 				source: 1, //领取渠道 1 小程序  2 网站
 				userId: this.couponParam.userId,
 				couponId: coupon.couponId
 			})
-			.then(response => {
-				this.$util.msg('抵扣成功', 1500)
-				setTimeout(() => {
-					this.currentTab = 1
-					this.couponParam.status = 2
-					this.queryPopupCoupons()
-				}, 1500)
-			})
-			.catch(error => {
-				this.$util.msg(error.msg, 2000)
-			})
+				.then(response => {
+					this.$util.msg('抵扣成功', 1500)
+					setTimeout(() => {
+						this.currentTab = 1
+						this.couponParam.status = 2
+						this.queryPopupCoupons()
+					}, 1500)
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
 		},
-		toPayCoupon(coupon){
+		toPayCoupon(coupon) {
 			// 点击购买优惠券,友盟埋点收集购买优惠券
 			if (process.env.NODE_ENV != 'development') {
 				this.$uma.trackEvent('Um_Event_cartCouponBuy', {
 					Um_Key_PageName: '机构购物车',
 					Um_Key_EvenName: '购买优惠券',
-					Um_Key_CouponId: `${coupon.couponId}`,
+					Um_Key_CouponId: `${coupon.couponId}`
 				})
 			}
 			this.createCouponRecord(coupon)
 		},
-		createCouponRecord(coupon){
+		createCouponRecord(coupon) {
 			// 生成购买优惠券记录Id
 			this.PayService.WeChatCouponRecord({
 				userId: this.userId,
 				couponId: coupon.couponId
 			})
-			.then(response => {
-				this.MiniWxPayFor(coupon,response.data.couponRecordId)
-			})
-			.catch(error => {
-				if(error.code == -1){//个人机构不能购买
-					this.contentModalText ='该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
-					this.modal = true
-					
-				}else if(error.code == -2){//会员机构不是医美机构不能购买
-					this.$util.msg('该优惠券仅限医美机构购买', 2000)
-				}
-			})
+				.then(response => {
+					this.MiniWxPayFor(coupon, response.data.couponRecordId)
+				})
+				.catch(error => {
+					if (error.code == -1) {
+						//个人机构不能购买
+						this.contentModalText = '该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
+						this.modal = true
+					} else if (error.code == -2) {
+						//会员机构不是医美机构不能购买
+						this.$util.msg('该优惠券仅限医美机构购买', 2000)
+					}
+				})
 		},
-		async MiniWxPayFor(coupon,couponRecordId){
+		async MiniWxPayFor(coupon, couponRecordId) {
 			const wechatcode = await authorize.getCode('weixin')
 			const params = {
 				userId: this.userId,
 				couponId: coupon.couponId,
-				couponRecordId:couponRecordId,
-				payType:'XCX',
+				couponRecordId: couponRecordId,
+				payType: 'XCX',
 				code: wechatcode,
 				source: 1 //支付来源 1 小程序 2 WWW
 			}
-			this.weChatMiniCouponWxPay(params,'Um_Event_cartCouponPay','机构购物车','线上支付优惠券',coupon.couponId,this.userId)
+			this.weChatMiniCouponWxPay(
+				params,
+				'Um_Event_cartCouponPay',
+				'机构购物车',
+				'线上支付优惠券',
+				coupon.couponId,
+				this.userId
+			)
 		},
-		hideMobel(){
+		hideMobel() {
 			this.modal = false
 		},
-		handleClick(e){
+		handleClick(e) {
 			//个人机构跳转升级页面
 			if (e.index == 1) {
 				this.$api.navigateTo('/pages/login/apply')
@@ -1596,7 +1639,7 @@ export default {
 						this.$uma.trackEvent('Um_Event_cartCouponButton', {
 							Um_Key_PageName: '机构购物车',
 							Um_Key_EvenName: '点击领券按钮',
-							Um_Key_userId: `${this.userId}`,
+							Um_Key_userId: `${this.userId}`
 						})
 					}
 					this.currentTab = 0
@@ -1610,6 +1653,10 @@ export default {
 					break
 			}
 		},
+		handleShouUnitPopup(pros){// 规格弹窗
+			this.popupShow2 = true
+			this.handlePros = pros
+		},
 		hidePopup(index) {
 			// 隐藏popup弹窗
 			switch (index) {
@@ -1817,16 +1864,16 @@ page {
 				height: 100%;
 				border-radius: 10rpx;
 			}
-			.pros-type{
+			.pros-type {
 				width: 64rpx;
 				height: 64rpx;
 				text-align: justify;
 				box-sizing: border-box;
 				padding: 10rpx;
 				border-radius: 0 0 8rpx 8rpx;
-				background-color: #33CCBF;
+				background-color: #33ccbf;
 				font-size: $font-size-22;
-				color: #FFFFFF;
+				color: #ffffff;
 				line-height: 25rpx;
 				position: absolute;
 				top: 0;
@@ -1926,6 +1973,29 @@ page {
 			color: #999999;
 			font-size: $font-size-26;
 		}
+		.cart-sku-temp{
+			width: 100%;
+			height: 48rpx;
+			margin: 30rpx 0 0 0;
+			.cart-sku-text{
+				font-size: 28rpx;
+				line-height: 48rpx;
+				color: #666666;
+				float: left;
+			}
+			.cart-sku-btn{
+				padding: 0 16rpx;
+				text-align: center;
+				line-height: 40rpx;
+				font-size: 24rpx;
+				box-sizing: border-box;
+				border: 1px solid #e15616;
+				color: #e15616;
+				float: left;
+				border-radius: 20rpx;
+				margin-left: 16rpx;
+			}
+		}
 		.productprice {
 			width: 100%;
 			height: 48rpx;

components/cm-module/productDetails/cm-ladder-popup.vue

@@ -0,0 +1,144 @@
+<template name="cm-ladder-popup">
+	<!-- 规格阶梯价 -->
+	<view class="tui-popup-maskmodel" v-show="show" @click.stop="hidePopup">
+		<view class="tui-popup-ladder">
+			<view class="tui-scrollview-box">
+				<view class="ladder-main clearfix">
+					<view class="ladder-item">
+						<view class="ladder-item-td">起订量</view> <view class="ladder-item-td">价格</view>
+					</view>
+					<view class="ladder-item" v-for="(ladd, index) in ladderPriceList" :key="index">
+						<view class="ladder-item-td">{{ ladd.numRange }}</view>
+						<view class="ladder-item-td">￥{{ ladd.buyPrice | NumFormat }}</view>
+					</view>
+				</view>
+			</view>
+			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
+				<view class="tui-flex-1">
+					<view class="tui-button" @click.stop="hidePopup">了解</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+	name: 'cm-ladder-popup',
+	props: {
+		list: {
+			type: Array
+		},
+		show: {
+			type: Boolean,
+			default: false
+		},
+		type: { 
+			type: Number,
+			default: 1
+		}
+	},
+	data() {
+		return {
+			ladderPriceList:[]
+		}
+	},
+	filters: {
+		NumFormat: function(value) {
+			//处理金额
+			if (!value) return '0.00'
+			let number = Number(value).toFixed(2)
+			return number
+		}
+	},
+	created() {
+		this.ladderPriceList = this.list
+	},
+	methods: {
+		hidePopup() {
+			this.$parent.laddePopupShow = false
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.tui-popup-maskmodel{
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.6);
+	z-index: 1000;
+}
+.tui-popup-ladder {
+	width: 100%;
+	height: 700rpx;
+	box-sizing: border-box;
+	padding: 40rpx 24rpx 0 24rpx;
+	border-radius: 16rpx;
+	background-color: #ffffff;
+	box-shadow: 0px 10rpx 12rpx 0px rgba(0, 0, 0, 0.2);
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 1009;
+	.tui-scrollview-box {
+		width: 100%;
+		height: auto;
+		float: left;
+		box-sizing: border-box;
+		.ladder-main {
+			width: 100%;
+			min-height: 240rpx;
+			border: 1px solid rgba(225, 86, 22, 0.6);
+			border-radius: 10rpx;
+			.ladder-item {
+				width: 100%;
+				height: 80rpx;
+				float: left;
+				border-bottom: 1px solid rgba(225, 86, 22, 0.6);
+				&:nth-child(1) {
+					.ladder-item-td {
+						color: #333333;
+					}
+				}
+				&:last-child {
+					border-bottom: none;
+				}
+				.ladder-item-td {
+					width: 50%;
+					text-align: center;
+					line-height: 80rpx;
+					font-size: $font-size-28;
+					color: $color-system;
+					box-sizing: border-box;
+					float: left;
+					&:nth-child(1) {
+						border-right: 1px solid rgba(225, 86, 22, 0.6);
+					}
+				}
+			}
+		}
+	}	
+}
+
+.tui-popup-btn {
+	width: 100%;
+	height: auto;
+	float: left;
+	margin-top: 200rpx;
+	.tui-button {
+		width: 100%;
+		height: 88rpx;
+		background: $btn-confirm;
+		line-height: 88rpx;
+		text-align: center;
+		color: #ffffff;
+		font-size: $font-size-28;
+		border-radius: 44rpx;
+	}
+}
+</style>

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

@@ -0,0 +1,618 @@
+<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">
+						<view class="sku-price-viw">
+							<view class="sku-price-text"
+								  :class="PromotionsFormat(product.promotions) || product.svipProductFlag == 1 ? 'none' : ''"
+							>
+								￥{{
+									(PromotionsFormat(product.promotions) || product.svipProductFlag == 1
+										? product.originalPrice
+										: product.price) | NumFormat
+								}}
+							</view>
+						</view>
+						<view class="sku-price-vip">
+							<view class="floor-item-act">
+								<view class="coupon-tags" v-if="product.couponsLogo">优惠券</view>
+								<template v-if="product.actStatus == 1 && product.promotions">
+									<view v-if="PromotionsFormat(product.promotions)" class="floor-tags">
+										{{ product.promotions.name }}
+										<text v-if="product.promotions != null && product.promotions.type != 3">
+											:￥{{
+												product.promotions == null
+													? '0.00'
+													: product.promotions.touchPrice | NumFormat
+											}}
+										</text>
+									</view>
+									<view v-else-if="product.promotions.type != 3" class="floor-tags">
+										{{ product.promotions.name }}
+									</view>
+								</template>
+								<template v-if="product.actStatus == null && product.ladderFlag == 1">
+									<view class="floor-tags">阶梯价格</view>
+								</template>
+								<template v-if="product.svipProductFlag == 1">
+									<view class="svip-tags">
+										<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
+										<view class="price" v-if="isShowVipFlag(product)">{{
+											product.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">缺货</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"
+									@click="changeCountSub"
+								></view>
+								<input
+									class="btn-input"
+									type="number"
+									v-model="number"
+									maxlength="4"
+									@blur="changeNumber($event)"
+								/>
+								<view
+									class="iconfont icon-jiahao"
+									@click="changeCountAdd"
+								></view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
+				<view class="tui-modal-flex">
+					<view class="tui-modal-button cancel" @click="handleConfirm">加入购物车</view>
+					<view class="tui-modal-button confirm" @click="toConfirmation">立即购买</view>
+				</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: {
+		product: {
+			type: Object
+		},
+		popupShow: {
+			type: Boolean,
+			default: false
+		},
+		type: {
+			type: Number,
+			default: 1
+		}
+	},
+	data() {
+		return {
+			userId:0,// 用户Id
+			vipFlag: 0, // 是否是超级会员 0否 1是
+			skuIndex: 0,
+			number: 0,
+			buyRetailPriceStep: 1,
+			buyRetailPrice: 0,
+			ladderPriceList: [],
+			isQuantity: false,
+			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.initData()
+		
+		
+	},
+	computed: {
+		...mapState(['hasLogin'])
+	},
+	methods: {
+		async initData(data) {
+			const userInfo = await this.$api.getStorage()
+			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
+			this.userId = userInfo.userId ? userInfo.userId : 0
+			this.number = this.product.minBuyNumber
+			this.buyRetailPrice = this.product.price
+			this.ladderPriceList = this.product.ladderPriceList ? this.product.ladderPriceList : null
+			this.buyRetailPriceStep = this.handleData.step
+			if (this.handleData.ladderPriceFlag == 1) {
+				this.number = this.handleData.maxBuyNumber ? this.handleData.maxBuyNumber : 1
+			} else {
+				this.number = this.handleData.minBuyNumber
+			}
+		},
+		PromotionsFormat(promo) {
+			//促销活动类型数据处理
+			if (promo != null) {
+				if (promo.type == 1 && promo.mode == 1) {
+					return true
+				} else {
+					return false
+				}
+			}
+			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
+		}, 
+		changeCountAdd() {
+			//popup弹窗数量增加按钮
+			if (this.buyRetailPriceStep == 2) {
+				this.number += this.product.minBuyNumber
+			} else {
+				this.number++
+			}
+			this.calculatPerice()
+		},
+		changeCountSub() {
+			//popup弹窗数量减按钮
+			if (this.number <= this.product.minBuyNumber) {
+				this.number = this.product.minBuyNumber
+				this.isQuantity = true
+				this.$util.msg(`该商品最小起订量为${this.product.minBuyNumber}`, 2000)
+				return
+			} else {
+				if (this.buyRetailPriceStep == 2) {
+					this.number -= this.product.minBuyNumber
+				} else {
+					this.number--
+				}
+				this.calculatPerice()
+				this.isQuantity = false
+			}
+		},
+		changeNumber(e) {
+			let _value = e.detail.value
+			if (!this.$api.isNumber(_value)) {
+				this.number = this.product.minBuyNumber
+			} else if (_value < this.product.minBuyNumber) {
+				this.$util.msg(`该商品最小起订量为${this.product.minBuyNumber}`, 2000)
+				this.number = this.product.minBuyNumber
+			} else if (_value % this.product.minBuyNumber != 0) {
+				this.$util.msg('购买量必须为起订量的整数倍', 2000)
+				this.number = this.product.minBuyNumber
+			} else {
+				this.number = e.detail.value
+				this.calculatPerice()
+			}
+		},
+		calculatPerice() {
+			//判断是否为阶梯价然后做计算价格处理
+			if (this.product.ladderPriceFlag == 1) {
+				this.product.ladderPrices.forEach((item, index) => {
+					if (this.number >= item.buyNum) {
+						this.buyRetailPrice = item.buyPrice
+					}
+				})
+			}
+		},
+		toConfirmation() {
+			//跳转确认订单页面
+			this.$parent.popupShow1 = false
+			let productStp = {
+				productIds: this.product.productId,
+				productCount: this.number
+			}
+			console.log('productStp',productStp)
+			this.$api.navigateTo(
+				`/pages/user/order/create-order?type=1&data=${JSON.stringify({ data: productStp })}`
+			)
+		},
+		handleConfirm() {
+			//增加购物车成功和toast弹窗提示成功
+			this.ProductService.shoppingAddCart({
+				productId: this.product.productId,
+				userId: this.userId,
+				productCount: this.number
+			})
+				.then(response => {
+					this.$parent.popupShow1 = false
+					this.$util.msg('加入购物车成功', 1500, true, 'success')
+					this.$parent.ProductCartNumber()
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		handleChoisSku(sku, index) {
+			// 选择SKU
+			this.skuIndex = index
+		},
+		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;
+						}
+						&.icon-jiahao {
+							border-radius: 0 30rpx 30rpx 0;
+						}
+					}
+					.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;
+			}
+			&.confirm {
+				background: $btn-confirm;
+				color: #ffffff;
+			}
+		}
+	}
+}
+</style>

components/cm-module/scrollTop/scrollTop.vue

@@ -60,7 +60,7 @@
 		height: 200rpx;
 		position: fixed;
 		right: 20rpx;
-		z-index: 999;
+		z-index: 99;
 		.icon{
 			width: 80rpx;
 			height: 80rpx;

pages/goods/components/cm-prams-popup.vue

@@ -0,0 +1,109 @@
+<template name="cm-parameter">
+	<!-- 相关参数 -->
+	<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup">
+		<view class="tui-popup-box clearfix">
+			<view class="title">商品参数</view>
+			<div class="tui-popup-main">
+				<scroll-view class="tui-popup-scroll" scroll-y="true">
+					<view class="content-tr">
+						<view class="content-td">起订量</view>
+						<view class="content-th">{{ product.minBuyNumber }}</view>
+					</view>
+					<view class="content-tr">
+						<view class="content-td">品牌</view>
+						<view class="content-th">{{
+							product.brandName == null ? '其他' : product.brandName
+						}}</view>
+					</view>
+					<view class="content-tr">
+						<view class="content-td">分类</view>
+						<view class="content-th">{{
+							product.typeName == null ? '暂无' : product.typeName
+						}}</view>
+					</view>
+					<view class="content-tr">
+						<view class="content-td">包装规格</view>
+						<view class="content-th">{{ product.unit }}</view>
+					</view>
+					<view class="content-tr">
+						<view class="content-td">商品编码</view>
+						<view class="content-th">{{ product.productCode }}</view>
+					</view>
+					<view class="content-tr">
+						<view class="content-td">库存</view>
+						<view class="content-th">{{ product.stock }}</view>
+					</view>
+					<view
+						class="content-tr"
+						v-if="product.parametersList.length > 0"
+						v-for="(item, index) in product.parametersList"
+						:key="index"
+					>
+						<view class="content-td">{{ item.paramsName }}</view>
+						<view class="content-th">{{ item.paramsContent }}</view>
+					</view>
+				</scroll-view>
+			</div>
+			<view
+				class="tui-right-flex tui-popup-btn"
+				:style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }"
+			>
+				<view class="tui-flex-1"> <view class="tui-button" @click="hidePopup">收起</view> </view>
+			</view>
+		</view>
+	</tui-bottom-popup>		
+</template>
+
+<script>
+	export default{
+		name:'cm-prams-popup',
+		props:{
+			product:{
+				type:Object,
+			},
+			popupShow:{
+				type:Boolean,
+				default:false
+			}
+		},
+		data() {
+			return{
+				data:[]
+			}
+		},
+		created() {
+			console.log('111111',this.product)
+		},
+		methods:{
+			hidePopup(){
+				this.$parent.popupShow0 = false
+			},
+		},
+		
+	}
+</script>
+
+<style lang="scss">
+	
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,563 @@
+<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>

pages/goods/components/cm-unit-price.vue

@@ -0,0 +1,310 @@
+<template name="cm-price">
+	<!-- 商品详情价格判断 -->
+	<view class="sku-price-main">
+		<view class="sku-price-viw">
+			<!-- 价格等级和权限 -->
+			<template v-if="!hasLogin">
+				<!-- 游客 -->
+				<view class="sku-price-text">
+					<text class="sku-price-l">￥</text>
+					<uni-grader :grade="Number(product.priceGrade)"></uni-grader>
+				</view>
+			</template>
+			<template v-else-if="userIdentity == 1">
+				<!-- 协销 -->
+				<view
+					class="sku-price-text"
+					:class="PromotionsFormat(product.promotions) || product.svipProductFlag == 1 ? 'none' : ''"
+				>
+					￥{{
+						(PromotionsFormat(product.promotions) || product.svipProductFlag == 1
+							? product.originalPrice
+							: product.price) | NumFormat
+					}}
+				</view>
+			</template>
+			<template v-else-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
+				<!-- 资质机构 -->
+				<view class="sku-price-text" v-if="product.priceFlag == 1">￥未公开价格</view>
+				<view class="sku-price-text" v-else-if="product.priceFlag == 3 && firstClubType != 1"
+					>￥仅医美机构可见</view
+				>
+				<view
+					v-else
+					class="sku-price-text"
+					:class="PromotionsFormat(product.promotions) || product.svipProductFlag == 1 ? 'none' : ''"
+				>
+					￥{{
+						(PromotionsFormat(product.promotions) || product.svipProductFlag == 1
+							? product.originalPrice
+							: product.price) | NumFormat
+					}}
+				</view>
+			</template>
+			<template v-else-if="userIdentity == 3">
+				<!-- 供应商 -->
+				<template v-if="product.shopId === shopID">
+					<view class="sku-price-text" v-if="product.priceFlag == 1">￥未公开价格</view>
+					<view
+						v-else
+						class="sku-price-text"
+						:class="PromotionsFormat(product.promotions) || product.svipProductFlag == 1 ? 'none' : ''"
+					>
+						￥{{
+							(PromotionsFormat(product.promotions) || product.svipProductFlag == 1
+								? product.originalPrice
+								: product.price) | NumFormat
+						}}
+					</view>
+				</template>
+				<template v-else>
+					<view class="sku-price-text">
+						<text class="sku-price-l">￥</text>
+						<uni-grader :grade="Number(product.priceGrade)"></uni-grader>
+					</view>
+				</template>
+			</template>
+			<template v-else-if="userIdentity == 4 && vipFlag != 1">
+				<!-- 普通机构 -->
+				<text class="sku-price-text" v-if="product.priceFlag == 1">￥未公开价格</text>
+				<text class="sku-price-text" v-else-if="product.priceFlag == 2">￥价格仅会员可见</text>
+				<text class="sku-price-text" v-else-if="product.priceFlag == 3">￥仅医美机构可见</text>
+				<view
+					v-else
+					class="sku-price-text"
+					:class="PromotionsFormat(product.promotions) || product.svipProductFlag == 1 ? 'none' : ''"
+				>
+					￥{{
+						(PromotionsFormat(product.promotions) || product.svipProductFlag == 1
+							? product.originalPrice
+							: product.price) | NumFormat
+					}}
+				</view>
+			</template>
+		</view>
+		<view class="sku-price-vip">
+			<!-- 优惠券和超级会员标记 -->
+			<template v-if="!hasLogin">
+				<!-- 游客 -->
+				<view class="floor-item-act">
+					<view class="coupon-tags" v-if="this.$parent.productCoupon.length > 0">优惠券</view>
+					<template v-if="product.actStatus == 1">
+						<view v-if="product.promotions.type == 1 && product.promotions.mode == 1" class="floor-tags">
+							{{ product.promotions.name }}<text v-if="hasLogin">:￥{{ product.price | NumFormat }}</text>
+						</view>
+						<view v-else class="floor-tags">{{ product.promotions.name }}</view>
+					</template>
+					<template v-if="product.svipProductFlag == 1">
+						<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
+					</template>
+				</view>
+			</template>
+			<template v-else-if="userIdentity == 1">
+				<!-- 协销 -->
+				<view class="floor-item-act">
+					<view class="coupon-tags" v-if="this.$parent.productCoupon.length > 0">优惠券</view>
+					<template v-if="product.actStatus == 1">
+						<view v-if="product.promotions.type == 1 && product.promotions.mode == 1" class="floor-tags">
+							{{ product.promotions.name
+							}}<text v-if="hasLogin"
+								>:￥{{
+									product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
+								}}</text
+							>
+						</view>
+						<view v-else class="floor-tags">{{ product.promotions.name }}</view>
+					</template>
+					<template v-if="product.svipProductFlag == 1">
+						<view class="svip-tags">
+							<view class="tags none">SVIP</view> <view class="price">{{ product.svipPriceTag }}</view>
+						</view>
+					</template>
+				</view>
+			</template>
+			<template v-else-if="userIdentity == 2 || (userIdentity == 4 && vipFlag == 1)">
+				<!-- 资质机构 -->
+				<view class="floor-item-act">
+					<view class="coupon-tags" v-if="this.$parent.productCoupon.length > 0">优惠券</view>
+					<template v-if="product.actStatus == 1">
+						<view v-if="product.promotions.type == 1 && product.promotions.mode == 1" class="floor-tags">
+							{{ product.promotions.name
+							}}<text v-if="hasLogin && product.priceFlag != 1"
+								>:￥{{
+									product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
+								}}</text
+							>
+						</view>
+						<view v-else class="floor-tags">{{ product.promotions.name }}</view>
+					</template>
+					<template v-if="product.svipProductFlag == 1">
+						<view class="svip-tags">
+							<view class="tags" :class="{ none: !isShowVipFlag(product) }">SVIP</view>
+							<view class="price" v-if="isShowVipFlag(product)">{{ product.svipPriceTag }}</view>
+						</view>
+					</template>
+				</view>
+			</template>
+			<template v-else-if="userIdentity == 3">
+				<!-- 供应商 -->
+				<view class="floor-item-act">
+					<view class="coupon-tags" v-if="this.$parent.productCoupon.length > 0">优惠券</view>
+					<template v-if="product.actStatus == 1">
+						<view v-if="product.promotions.type == 1 && product.promotions.mode == 1" class="floor-tags">
+							{{ product.promotions.name
+							}}<text v-if="hasLogin && product.priceFlag != 1"
+								>:￥{{
+									product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
+								}}</text
+							>
+						</view>
+						<view v-else class="floor-tags">{{ product.promotions.name }}</view>
+					</template>
+					<template v-if="product.svipProductFlag == 1">
+						<view class="svip-tags">
+							<view class="tags" :class="{ none: vipFlag != 1 }">SVIP</view>
+							<view class="price" v-if="product.priceFlag != 1 && vipFlag == 1">{{
+								product.svipPriceTag
+							}}</view>
+						</view>
+					</template>
+				</view>
+			</template>
+			<template v-else-if="userIdentity == 4 && vipFlag != 1">
+				<!-- 普通机构 -->
+				<view class="floor-item-act">
+					<view class="coupon-tags" v-if="this.$parent.productCoupon.length > 0">优惠券</view>
+					<template v-if="product.actStatus == 1">
+						<view v-if="PromotionsFormat(product.promotions)" class="floor-tags">
+							{{ product.promotions.name
+							}}<text v-if="hasLogin && product.priceFlag != 1"
+								>:￥{{
+									product.promotions == null ? '0.00' : product.promotions.touchPrice | NumFormat
+								}}</text
+							>
+						</view>
+						<view v-else class="floor-tags">{{ product.promotions.name }}</view>
+					</template>
+					<template v-if="product.svipProductFlag == 1">
+						<view class="svip-tags">
+							<view class="tags" :class="{ none: !isShowVipFlag(product) }">SVIP</view>
+							<view class="price" v-if="isShowVipFlag(product)">{{ product.svipPriceTag }}</view>
+						</view>
+					</template>
+				</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import uniGrader from '@/components/uni-grade/uni-grade.vue'
+export default {
+	name: 'cm-unit-price',
+	components: {
+		uniGrader
+	},
+	props: {
+		product: {
+			type: Object
+		}
+	},
+	data() {
+		return {
+			vipFlag: 0, // 是否是超级会员 0否 1是
+			userIdentity: 2,
+			shopID: 0,
+			isIphoneX: this.$store.state.isIphoneX,
+			firstClubType: 0
+		}
+	},
+	filters: {
+		NumFormat(value) {
+			//处理金额
+			return Number(value).toFixed(2)
+		}
+	},
+	created() {
+		this.initData()
+	},
+	computed: {
+		...mapState(['hasLogin', 'clubType'])
+	},
+	methods: {
+		async initData(data) {
+			const userInfo = await this.$api.getStorage()
+			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
+			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
+			this.shopID = userInfo.shopId ? userInfo.shopId : 0
+			this.firstClubType = this.clubType
+		},
+		PromotionsFormat(promo) {
+			//促销活动类型数据处理
+			if (promo != null) {
+				if (promo.type == 1 && promo.mode == 1) {
+					return true
+				} else {
+					return false
+				}
+			}
+			return false
+		},
+		isShowVipFlag(pros) {
+			/**
+			 *显示SVIP和超级会员价格：
+			 * 	个人机构（不是超级会员，但价格所有机构可见），
+			 *	资质机构（不是超级会员，但价格所有机构可见或仅会员可见），
+			 * 	超级会员（价格所有机构可见或仅会员可见），超级会员（是医美机构，价格仅医美可见）
+			 *商品价格是否可见：priceFlag  0:所有机构可见 1：未公开价格 2：仅会员可见 3：仅医美机构可见
+			 *	普通机构
+			 * 		超级会员 && priceFlag === 0
+			 * 	资质机构
+			 * 		priceFlag !== 1 ||
+			 * 		超级会员
+			 * 			商品priceFlag === 3 && 是否是医美机构
+			 */
+			// 未登录 || 非会员
+			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
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.sku-price-main {
+	width: 100%;
+	height: 100%;
+	.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;
+	}
+}
+</style>

pages/goods/components/cm-unit-suppor-popup.vue

@@ -0,0 +1,403 @@
+<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>

pages/goods/goods-supporting.vue

@@ -13,12 +13,12 @@
 				<!-- 列表 -->
 				<view class="tui-cart-cell  tui-mtop" v-for="(pros, index) in productList" :key="index">
 					<view class="tui-goods-item">
-						<view class="tui-goods-main" :class="{'none': index === productList.length -1 }">
+						<view class="tui-goods-main" :class="{ none: index === productList.length - 1 }">
 							<view class="tui-goods-checkBox">
 								<view
 									class="checkbox iconfont"
 									:class="[pros.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
-									:style="{color : disabledChecked(pros) ? '#E1E1E1' : '#E15616' }"
+									:style="{ color: disabledChecked(pros) ? '#E1E1E1' : '#E15616' }"
 									@click="checkedSoperv(pros)"
 								>
 								</view>
@@ -31,9 +31,13 @@
 								<text class="list-details-title" @click.stop="navToDetailPage(pros.productId)">{{
 									pros.name
 								}}</text>
-								<text class="list-details-specs" @click.stop="navToDetailPage(pros.productId)"
-									>规格：{{ pros.unit != null ? pros.unit : '' }}</text
-								>
+								<text class="list-details-specs" @click.stop="handlerUnit(pros)"
+									>规格：
+									<text class="list-unit">
+										{{ pros.unit }}
+										<text class="iconfont icon-xiangxiajiantou"></text>
+									</text>
+								</text>
 								<template v-if="hasLogin">
 									<template v-if="userIdentity == 4 && vipFlag != 1">
 										<view class="list-details-price" v-if="pros.priceFlag == 1">
@@ -91,9 +95,7 @@
 											</view>
 											<view class="list-details-price none">
 												<view class="floor-item-act">
-													<view class="coupon-tags" v-if="pros.couponsLogo"
-														>优惠券</view
-													>
+													<view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
 													<template v-if="pros.actStatus == 1">
 														<view
 															class="floor-tags"
@@ -131,8 +133,13 @@
 										<view class="list-details-price" v-if="pros.priceFlag == 1">
 											<view class="list-none"><view class="price-small">￥未公开价格</view></view>
 										</view>
-										<view class="list-details-price" v-else-if="pros.priceFlag == 3 && firstClubType!=1">
-											<view class="list-none"><view class="price-small">￥仅医美机构可见</view></view>
+										<view
+											class="list-details-price"
+											v-else-if="pros.priceFlag == 3 && firstClubType != 1"
+										>
+											<view class="list-none"
+												><view class="price-small">￥仅医美机构可见</view></view
+											>
 										</view>
 										<template v-else>
 											<view class="list-details-price">
@@ -262,39 +269,46 @@
 				<!--加载loadding-->
 			</view>
 		</view>
+		<!-- 选择规格弹窗 -->
+		<cm-unit-suppor-popup
+			v-if="popupShow1"
+			:popupShow="popupShow1"
+			:product="handlePros"
+			@btnConfirm="handleBtnConfirm"
+		></cm-unit-suppor-popup>
 		<!-- 取消收藏操作 -->
-		<tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
-			<view class="tui-popup-box clearfix">
-				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
-					<view class="tui-flex-1">
-						<view class="superv-header-checked">
-							<view class="oltext" @click="isCheckedAll">
-								<view
-									class="checkbox iconfont"
-									:class="[isAllChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
-								></view>
-								<view class="text">全选</view>
-							</view>
+		<view class="fiexd-popup-box clearfix">
+			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
+				<view class="tui-flex-1">
+					<view class="superv-header-checked">
+						<view class="oltext" @click="isCheckedAll">
+							<view
+								class="checkbox iconfont"
+								:class="[isAllChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
+							></view>
+							<view class="text">全选</view>
 						</view>
-						<view class="tui-button buy" @click="handleSupportingSubmit('buy')">立即购买</view>
-						<view class="tui-button add" @click="handleSupportingSubmit('add')">加入购物车</view>
 					</view>
+					<view class="tui-button buy" @click="handleSupportingSubmit('buy')">立即购买</view>
+					<view class="tui-button add" @click="handleSupportingSubmit('add')">加入购物车</view>
 				</view>
 			</view>
-		</tui-bottom-popup>
+		</view>
 	</view>
 </template>
 <script>
 import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
 import tuiNomore from '@/components/tui-components/nomore/nomore'
 import uniGrader from '@/components/uni-grade/uni-grade.vue'
+import cmUnitSupporPopup from './components/cm-unit-suppor-popup.vue'
 
 import { mapState, mapMutations } from 'vuex'
 export default {
 	components: {
 		tuiLoadmore,
 		tuiNomore,
-		uniGrader
+		uniGrader,
+		cmUnitSupporPopup
 	},
 	data() {
 		return {
@@ -303,12 +317,13 @@ export default {
 			totalRecord: 0,
 			cartQuantity: 0,
 			popupShow: true,
+			popupShow1:false,
 			listQuery: {
 				userId: 0,
 				productId: 0,
 				source: 2,
-				pageNum:1,
-				pageSize:50
+				pageNum: 1,
+				pageSize: 50
 			},
 			productList: [],
 			handleData: {},
@@ -327,8 +342,9 @@ export default {
 			nomoreText: '上拉显示更多',
 			vipFlag: 0,
 			userIdentity: 0,
-			firstClubType:0,
-			isStock: false
+			firstClubType: 0,
+			isStock: false,
+			handlePros:{}//
 		}
 	},
 	onLoad(option) {
@@ -344,7 +360,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['hasLogin', 'userInfo','clubType']),
+		...mapState(['hasLogin', 'userInfo', 'clubType'])
 	},
 	methods: {
 		...mapMutations(['login', 'logout']),
@@ -360,7 +376,7 @@ export default {
 			// 初始化商品详情配套商品
 			this.ProductService.getCommodityCombinationList(this.listQuery)
 				.then(response => {
-					let data = response.data 
+					let data = response.data
 					this.hasNextPage = data.hasNextPage
 					this.productList = data.results.map((pros, index) => {
 						pros.isChecked = false
@@ -397,9 +413,9 @@ export default {
 					if (data.results && data.results.length > 0) {
 						this.hasNextPage = data.hasNextPage
 						let list = data.results.map((pros, index) => {
-							if(this.isAllChecked && !this.disabledChecked(pros)){
+							if (this.isAllChecked && !this.disabledChecked(pros)) {
 								pros.isChecked = true
-							}else{
+							} else {
 								pros.isChecked = false
 							}
 							pros.number = pros.minBuyNumber
@@ -443,17 +459,17 @@ export default {
 		getAddProductCart() {
 			//增加购物车成功和toast弹窗提示成功
 			let list = []
-			if(!this.isProductChecked){
+			if (!this.isProductChecked) {
 				this.$util.msg('请先选择商品', 2000)
 				return
 			}
-			this.productList.forEach((el)=>{
-				if(el.isChecked){
-					list.push({ productId:el.productId , productCount: el.number })
+			this.productList.forEach(el => {
+				if (el.isChecked) {
+					list.push({ productId: el.productId, productCount: el.number })
 				}
 			})
 			this.ProductService.ShoppingAddCarts({
-				productInfo:JSON.stringify(list),
+				productInfo: JSON.stringify(list),
 				userId: this.listQuery.userId
 			})
 				.then(response => {
@@ -466,19 +482,17 @@ export default {
 		toConfirmation() {
 			//跳转确认订单页面
 			let list = []
-			if(!this.isProductChecked){
+			if (!this.isProductChecked) {
 				this.$util.msg('请先选择商品', 2000)
 				return
 			}
 			this.productList.map((el, index) => {
-				if(el.isChecked){
-					list.push({ id:el.productId , count: el.number })
+				if (el.isChecked) {
+					list.push({ id: el.productId, count: el.number })
 				}
 			})
-			console.log('勾选商品',list)
-			this.$api.navigateTo(
-				`/pages/user/order/create-order?type=3&data=${JSON.stringify({ data: list })}`
-			)
+			console.log('勾选商品', list)
+			this.$api.navigateTo(`/pages/user/order/create-order?type=3&data=${JSON.stringify({ data: list })}`)
 		},
 		updateCheckAllBtn() {
 			//勾选单个判断全选
@@ -498,20 +512,23 @@ export default {
 		updateBothCheckBtn() {
 			//全选勾选判断
 			this.productList.forEach(pros => {
-				if(!this.disabledChecked(pros)){
+				if (!this.disabledChecked(pros)) {
 					pros.isChecked = this.isAllChecked
 				}
 			})
 		},
-		disabledChecked(pros){
-			if(pros.priceFlag ==1){// 为公开价格返回 true 禁用按钮
+		disabledChecked(pros) {
+			if (pros.priceFlag == 1) {
+				// 为公开价格返回 true 禁用按钮
 				return true
-			}else if(this.userIdentity == 4){// 普通机构且商品价格仅会员可见 || 商品价格仅医美机构可见  禁用按钮
-				if( pros.priceFlag ==2 || pros.priceFlag ==3){
+			} else if (this.userIdentity == 4) {
+				// 普通机构且商品价格仅会员可见 || 商品价格仅医美机构可见  禁用按钮
+				if (pros.priceFlag == 2 || pros.priceFlag == 3) {
 					return true
 				}
-			}else if(this.userIdentity == 2){// 资质机构下 商品价格仅医美机构可见 且本机构不为医美机构  禁用按钮
-				if( pros.priceFlag ==3 && this.firstClubType !=1 ){
+			} else if (this.userIdentity == 2) {
+				// 资质机构下 商品价格仅医美机构可见 且本机构不为医美机构  禁用按钮
+				if (pros.priceFlag == 3 && this.firstClubType != 1) {
 					return true
 				}
 			}
@@ -528,7 +545,7 @@ export default {
 		},
 		checkedSoperv(pros) {
 			// 勾选商品
-			if(this.disabledChecked(pros)){
+			if (this.disabledChecked(pros)) {
 				this.$util.msg('该商品暂不能购买', 2000)
 				return
 			}
@@ -583,7 +600,7 @@ export default {
 				this.$util.msg('购买量必须为起订量的整数倍', 2000)
 				pros.number = pros.minBuyNumber
 			} else {
-				pros.number = _value 
+				pros.number = _value
 				this.calculatPerice(pros)
 			}
 		},
@@ -610,18 +627,25 @@ export default {
 			 * 		priceFlag !== 1 ||
 			 * 		超级会员
 			 * 			商品priceFlag === 3 && 是否是医美机构
-			*/
+			 */
 			// 未登录 || 非会员
-			if(!this.hasLogin || !this.vipFlag === 1) return false
+			if (!this.hasLogin || !this.vipFlag === 1) return false
 			// 商品所有机构可见
-			if(pros.priceFlag === 0 ) return true
+			if (pros.priceFlag === 0) return true
 			// 商品价格仅资质机构可见
-			if(pros.priceFlag === 2 && this.userIdentity === 2) return true
+			if (pros.priceFlag === 2 && this.userIdentity === 2) return true
 			// 商品价格仅医美机构可见
-			if(pros.priceFlag === 3 && this.userIdentity === 2 &&  this.firstClubType == 1) return true
+			if (pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) return true
 			// 其它
 			return false
 		},
+		handleBtnConfirm(data){
+			this.handlePros.unit = data.unit
+		},
+		handlerUnit(pros){
+			this.popupShow1 = true
+			this.handlePros = pros
+		},
 		navToDetailPage(id) {
 			this.isModallayer = true
 			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
@@ -712,7 +736,7 @@ page {
 		height: 100%;
 		border-bottom: 1px solid #ebebeb;
 		padding-bottom: 24rpx;
-		&.none{
+		&.none {
 			border-bottom: none;
 		}
 	}
@@ -756,16 +780,16 @@ page {
 		flex-shrink: 0;
 		display: block;
 	}
-	.tui-goods-type{
+	.tui-goods-type {
 		width: 64rpx;
 		height: 64rpx;
 		text-align: justify;
 		box-sizing: border-box;
 		padding: 10rpx;
 		border-radius: 0 0 8rpx 8rpx;
-		background-color: #33CCBF;
+		background-color: #33ccbf;
 		font-size: $font-size-22;
-		color: #FFFFFF;
+		color: #ffffff;
 		line-height: 25rpx;
 		position: absolute;
 		top: 0;
@@ -794,6 +818,29 @@ page {
 		margin-top: 8rpx;
 		color: #999999;
 		font-size: 24rpx;
+		.list-unit{
+			line-height: 40rpx;
+			display: inline-block;
+			text-align: center;
+			padding: 0 60rpx 0 16rpx;
+			font-size: 22rpx;
+			box-sizing: border-box;
+			border: 1px solid #CCC;
+			color: #999999;
+			position: relative;
+			border-radius: 6rpx;
+			.icon-xiangxiajiantou{
+				display: block;
+				width: 60rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				color: #999999;
+				position: absolute;
+				right: 0;
+				top: 0;
+				font-size: 32rpx;
+			}
+		}
 	}
 	.list-details-price {
 		width: 100%;
@@ -1009,6 +1056,17 @@ page {
 		}
 	}
 }
+.fiexd-popup-box{
+	width: 100%;
+	min-height: 168rpx;
+	padding: 6rpx 24rpx;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 99;
+	box-sizing: border-box;
+	background: #FFFFFF;
+}
 .tui-popup-btn {
 	width: 100%;
 	height: auto;

pages/goods/mixins/proMixins.js

@@ -0,0 +1,30 @@
+// 统计数据
+// 统计类型 1：首页banner；2：直播模块；3：最新活动；4：热门文章；5：新品橱窗；6：活动列表
+import Vue from 'vue'
+const proMixins = {
+    computed: {
+		
+    },
+    methods: {
+        cmsSysStatistics(cmsSysType,productId) {
+            this.ProductService.sYsStatisticsTypesSatisticsNumber({typeId:cmsSysType,productId:productId})
+                .then(response => {
+                    const map = {
+					    1: '首页轮播',
+					    2: '直播模块',
+					    3: '最新活动',
+					    4: '热门文章',
+					    5: '新品橱窗',
+					    6: '活动列表'
+                    }
+                    const sYsText = map[cmsSysType]
+                    console.log(`<-------${sYsText}统计数据成功------>`)
+                })
+                .catch(error => {
+                    console.log(`<-------统计${sYsText}数据异常------>`)
+                })
+        },
+    }
+}
+
+export default proMixins

pages/goods/product.vue

@@ -176,6 +176,11 @@
 						<image class="none-image" :src="productNoneImage" mode=""></image>
 						<view class="none-text">此商品已{{ goodsData.disabledText }}，请浏览以下推荐商品~</view>
 					</view>
+					<!-- 选择规格 -->
+					<view class="product-parameter" v-if="isShowButton" @click="showPopup(3)">
+						<text class="title">选择：</text> <text class="name">共10种规格可选</text>
+						<text class="iconfont icon-xiayibu"></text>
+					</view>
 					<!-- 参数 -->
 					<view class="product-parameter" @click="showPopup(0)" v-if="!goodsData.isNoneDisabled">
 						<text class="title">参数：</text> <text class="name">品牌 起订量 分类...</text>
@@ -334,59 +339,6 @@
 						:userId="userId"
 					></cm-product-doc>
 				</view>
-				<!-- 商品参数 -->
-				<tui-bottom-popup :radius="true" :show="popupShow0" @close="hidePopup(0)">
-					<view class="tui-popup-box clearfix">
-						<view class="title">商品参数</view>
-						<div class="tui-popup-main">
-							<scroll-view class="tui-popup-scroll" scroll-y="true">
-								<view class="content-tr">
-									<view class="content-td">起订量</view>
-									<view class="content-th">{{ product.minBuyNumber }}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">品牌</view>
-									<view class="content-th">{{
-										product.brandName == null ? '其他' : product.brandName
-									}}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">分类</view>
-									<view class="content-th">{{
-										product.typeName == null ? '暂无' : product.typeName
-									}}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">包装规格</view>
-									<view class="content-th">{{ product.unit }}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">商品编码</view>
-									<view class="content-th">{{ product.productCode }}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">库存</view>
-									<view class="content-th">{{ product.stock }}</view>
-								</view>
-								<view
-									class="content-tr"
-									v-if="product.parametersList.length > 0"
-									v-for="(item, index) in product.parametersList"
-									:key="index"
-								>
-									<view class="content-td">{{ item.paramsName }}</view>
-									<view class="content-th">{{ item.paramsContent }}</view>
-								</view>
-							</scroll-view>
-						</div>
-						<view
-							class="tui-right-flex tui-popup-btn"
-							:style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }"
-						>
-							<view class="tui-flex-1"> <view class="tui-button" @click="hidePopup(0)">收起</view> </view>
-						</view>
-					</view>
-				</tui-bottom-popup>
 				<!-- 优惠券 -->
 				<tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
 					<view class="tui-popup-box clearfix">
@@ -578,7 +530,7 @@
 								:disabled="goodsData.disabled"
 								class="btn btn-cart"
 								:class="[goodsData.disabled ? 'disabled' : '']"
-								@tap.stop="btnGetConfirm('add')"
+								@tap.stop="btnGetConfirm"
 							>
 								加入购物车
 							</button>
@@ -586,64 +538,21 @@
 								:disabled="goodsData.disabled"
 								class="btn btn-bay"
 								:class="[goodsData.disabled ? 'disabled' : '']"
-								@tap.stop="btnGetConfirm('buy')"
+								@tap.stop="btnGetConfirm"
 							>
 								立即购买
 							</button>
 						</view>
 					</view>
 				</view>
-				<!--底部选择模态层弹窗组件 -->
-				<tui-bottom-popup :radius="true" :show="popupShow3" @close="hidePopup(3)">
-					<view class="tui-popup-box clearfix">
-						<view class="tui-shopping-main" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
-							<view class="layer-smimg"> <image :src="product.mainImage" mode=""></image> </view>
-							<view class="layer-nunbox">
-								<view class="layer-nunbox-t" v-if="product.step === 2">
-									<view class="text">*该商品只能以起订量的整数倍购买</view>
-								</view>
-								<view class="layer-nunbox-t">
-									<view class="layer-nunbox-text">数量:</view>
-									<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 class="layer-nunbox-b">
-									<view class="text"
-										>单价: <text class="p sm">￥</text>
-										<text class="p bg">{{ buyRetailPrice.toFixed(2) }}</text>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view
-							class="tui-right-flex tui-popup-btn"
-							:style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }"
-						>
-							<view class="tui-flex-1"> <view class="tui-button" @click="btnConfirm">确定</view> </view>
-						</view>
-					</view>
-				</tui-bottom-popup>
 				<!-- 侧边 -->
 				<scroll-top :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></scroll-top>
 			</view>
 		</template>
+		<!-- 商品参数 -->
+		<cm-prams-popup v-if="popupShow0" :popupShow="popupShow0" :product="product"></cm-prams-popup>
+		<!-- 选择规格弹窗 -->
+		<cm-unit-popup v-if="popupShow3" :popupShow="popupShow3" :product="product" :type="unitPopupType" :goodsData="goodsData" @buyConfirm="handleBuyConfirm"></cm-unit-popup>
 		<!-- 弹窗提示 -->
 		<tui-modal
 			:show="modal"
@@ -680,6 +589,8 @@ import cmParameter from './components/cm-parameter' //相关参数
 import cmService from './components/cm-service' //服务项目
 import cmProductDoc from './components/cm-product-doc.vue'
 import cmProductModal from './components/cm-product-modal.vue'
+import cmPramsPopup from './components/cm-prams-popup.vue'
+import cmUnitPopup from './components/cm-unit-popup.vue'
 import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
 import authorize from '@/common/config/authorize.js'
 import wxLogin from '@/common/config/wxLogin.js'
@@ -699,6 +610,8 @@ export default {
 		cmService,
 		couponTabs,
 		cmProductDoc,
+		cmPramsPopup,
+		cmUnitPopup,
 		cmProductModal
 	},
 	data() {
@@ -725,7 +638,6 @@ export default {
 			isEvaluate: false,
 			isAnimation: false,
 			skeletonShow: true,
-			isQuantity: false,
 			isStock: false,
 			disabled: false,
 			isNoneDisabled: false,
@@ -743,8 +655,6 @@ export default {
 			product: {}, //采美
 			productImage: [],
 			retailPrice: 0,
-			buyRetailPrice: 0,
-			buyRetailPriceStep: 1,
 			stock: 0,
 			number: 0,
 			minBuyNumber: 0,
@@ -808,7 +718,8 @@ export default {
 				}
 			],
 			showModal: false,
-			isShowCaimeiShop: false
+			isShowCaimeiShop: false,
+			unitPopupType:0, // 选择类型 1 点击加入购物车  立即购买  2：点击规格选择
 		}
 	},
 	computed: {
@@ -946,7 +857,6 @@ export default {
 					this.ladderPriceFlag = this.product.ladderPriceFlag
 					this.html = this.adaptRichTextImg(this.product)
 					this.stock = this.product.stock
-					this.buyRetailPriceStep = this.product.step
 					this.number = this.product.minBuyNumber
 					this.minBuyNumber = this.product.minBuyNumber
 
@@ -961,7 +871,6 @@ export default {
 					//拆分金额并转千分位格式显示
 					if (this.product.price != null) {
 						this.retailPrice = this.product.price.toFixed(2)
-						this.buyRetailPrice = this.product.price
 					}
 					//处理下架商品和售罄商品
 					if (this.product.validFlag == 3 || this.stock == 0) {
@@ -1338,108 +1247,21 @@ export default {
 				this.$api.navigateTo('/pages/login/login?type=1')
 			}
 		},
-		btnGetConfirm(type) {
+		btnGetConfirm() {
 			//加入购物车&&立即购买点击
 			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
-				}
-				this.isBtnType = type
 				this.popupShow3 = true
+				this.unitPopupType = 1
 			} else {
 				this.$api.navigateTo('/pages/login/login?type=1')
 			}
 		},
-		//popup弹窗数量增加按钮
-		changeCountAdd() {
-			if (this.buyRetailPriceStep == 2) {
-				this.number += this.minBuyNumber
-			} else {
-				this.number++
-			}
-			this.processActivityPrice()
-		},
-		//popup弹窗数量减按钮
-		changeCountSub() {
-			if (this.number <= this.minBuyNumber) {
-				this.number = this.minBuyNumber
-				this.isQuantity = true
-				this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
-				return
-			} else {
-				if (this.buyRetailPriceStep == 2) {
-					this.number -= this.minBuyNumber
-				} else {
-					this.number--
-				}
-				this.processActivityPrice()
-				this.isQuantity = false
-			}
-		},
-		changeNumber(e) {
-			let _value = e.detail.value
-			if (!this.$api.isNumber(_value)) {
-				this.number = this.minBuyNumber
-			} else if (_value < this.minBuyNumber) {
-				this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
-				this.number = this.minBuyNumber
-			} else if (_value % this.minBuyNumber != 0) {
-				this.$util.msg('购买量必须为起订量的整数倍', 2000)
-				this.number = this.minBuyNumber
-			} else {
-				this.number = e.detail.value
-			}
-			this.processActivityPrice()
-		},
-		processActivityPrice() {
-			//单独处理活动价格和阶梯价格
-			if ((this.ladderPriceFlag == '0' && this.product.actStatus == 0) || this.product.actStatus == 1) {
-				this.buyRetailPrice = this.product.price
+		handleBuyConfirm(data){// 监听确定选择规格
+			console.log('data',data)
+			if (data.type == 'buy') {
+				this.toConfirmation()
 			} else {
-				this.ladderPriceList.forEach((item, index) => {
-					if (this.number >= item.buyNum) {
-						this.buyRetailPrice = item.buyPrice
-					}
-				})
-			}
-		},
-		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}`
-				})
-			}
-			if (this.isBtnType == 'add') {
 				this.getAddProductCart()
-				this.popupShow3 = false
-			} else {
-				this.toConfirmation()
 			}
 		},
 		toConfirmation() {
@@ -1538,6 +1360,7 @@ export default {
 			switch (index) {
 				case 0:
 					this.popupShow0 = true
+					console.log('popupShow0',this.popupShow0)
 					break
 				case 1:
 					this.popupShow1 = true
@@ -1550,6 +1373,11 @@ export default {
 						this.$api.navigateTo('/pages/login/login')
 					}
 					break
+				case 3:
+					this.popupShow3 = true
+					this.unitPopupType = 2
+					break
+					
 			}
 		},
 		hidePopup(index) {
@@ -1757,7 +1585,7 @@ page {
 		position: absolute;
 		right: 30rpx;
 		top: 0;
-		z-index: 999;
+		z-index: 99;
 	}
 }
 .banner {
@@ -2985,102 +2813,6 @@ page {
 			}
 		}
 	}
-	.tui-shopping-main {
-		width: 100%;
-		.layer-smimg {
-			width: 114rpx;
-			height: 114rpx;
-			float: left;
-			border-radius: 10rpx;
-			margin-right: 24rpx;
-			image {
-				width: 114rpx;
-				height: 114rpx;
-				border-radius: 10rpx;
-			}
-		}
-		.layer-nunbox {
-			justify-content: space-between;
-			align-items: center;
-			width: 536rpx;
-			height: auto;
-			float: left;
-			.layer-nunbox-t {
-				width: 100%;
-				height: 44rpx;
-				position: relative;
-				display: flex;
-				margin-bottom: 10rpx;
-				.text {
-					font-size: $font-size-24;
-					line-height: 48rpx;
-					color: #999999;
-				}
-				.layer-nunbox-text {
-					line-height: 44rpx;
-					font-size: $font-size-28;
-				}
-				.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;
-						}
-					}
-					.btn-input {
-						width: 62rpx;
-						height: 48rpx;
-						line-height: 48rpx;
-						background: #ffffff;
-						border-radius: 4rpx;
-						text-align: center;
-						font-size: $font-size-28;
-					}
-				}
-				.product-step {
-					position: absolute;
-					left: 45rpx;
-					bottom: 0;
-					height: 44rpx;
-					background: #ffffff;
-				}
-			}
-			.layer-nunbox-b {
-				width: 100%;
-				height: 44rpx;
-				margin-top: 13rpx;
-			}
-			.text {
-				line-height: 44rpx;
-				font-size: $font-size-28;
-				.p {
-					color: #ff2a2a;
-				}
-				.p:first-child {
-					margin-left: 30rpx;
-				}
-				.p.sm {
-					font-size: $font-size-24;
-				}
-			}
-		}
-	}
 }
 .tui-popup-btn {
 	width: 100%;

pages/seller/cart/components/cm-unit-popup.vue

@@ -0,0 +1,522 @@
+<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">
+						<view class="sku-price-viw">
+							<view class="sku-price-text"
+								  :class="PromotionsFormat(product.promotions) || product.svipProductFlag == 1 ? 'none' : ''"
+							>
+								￥{{
+									(PromotionsFormat(product.promotions) || product.svipProductFlag == 1
+										? product.originalPrice
+										: product.price) | NumFormat
+								}}
+							</view>
+						</view>
+						<view class="sku-price-vip">
+							<view class="floor-item-act">
+								<view class="coupon-tags" v-if="product.couponsLogo">优惠券</view>
+								<template v-if="product.actStatus == 1 && product.promotions">
+									<view v-if="PromotionsFormat(product.promotions)" class="floor-tags">
+										{{ product.promotions.name }}
+										<text v-if="product.promotions != null && product.promotions.type != 3">
+											:￥{{
+												product.promotions == null
+													? '0.00'
+													: product.promotions.touchPrice | NumFormat
+											}}
+										</text>
+									</view>
+									<view v-else-if="product.promotions.type != 3" class="floor-tags">
+										{{ product.promotions.name }}
+									</view>
+								</template>
+								<template v-if="product.actStatus == null && product.ladderFlag == 1">
+									<view class="floor-tags">阶梯价格</view>
+								</template>
+								<template v-if="product.svipProductFlag == 1">
+									<view class="svip-tags">
+										<view class="tags">SVIP</view>
+										<view class="price">{{product.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">缺货</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"
+									@click="changeCountSub"
+								></view>
+								<input
+									class="btn-input"
+									type="number"
+									v-model="params.productCount"
+									maxlength="4"
+									@blur="changeNumber($event)"
+								/>
+								<view
+									class="iconfont icon-jiahao"
+									@click="changeCountAdd"
+								></view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
+				<view class="tui-modal-flex">
+					<view class="tui-modal-button confirm" @click="handleConfirm">加入购物车</view>
+				</view>
+			</view>
+		</view>
+	</tui-bottom-popup>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+	name: 'cm-unit-popup',
+	props: {
+		product: {
+			type: Object
+		},
+		popupShow: {
+			type: Boolean,
+			default: false
+		},
+		type: {
+			type: Number,
+			default: 1
+		}
+	},
+	data() {
+		return {
+			skuIndex: 0,
+			userIdentity:0,
+			params:{
+				serviceProviderId:0,//协销Id
+				productId:0,
+				clubId:0,
+				serviceProviderId:0,
+				productCount:1,
+				type:1
+			},
+			number: 0,
+			buyRetailPriceStep: 1,
+			buyRetailPrice: 0,
+			ladderPriceList: [],
+			isQuantity: false,
+			skuList: [
+				{
+					unit: '135ml70ml', // 规格
+					normalPrice: 1000, // 市场价
+					price: 500, // 售价
+					costPrice: 500, // 结算价
+					stock: 100 ,// 库存
+					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 ,// 库存
+					ladderPriceList:null
+				},
+				{
+					unit: '精华70ml', // 规格
+					normalPrice: 1000, // 市场价
+					price: 500, // 售价
+					costPrice: 500, // 结算价
+					stock: 100 ,// 库存
+					ladderPriceList:null
+				},
+				{
+					unit: '【70ml】2瓶', // 规格
+					normalPrice: 1000, // 市场价
+					price: 500, // 售价
+					costPrice: 500, // 结算价
+					stock: 100 ,// 库存
+					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 ,// 库存
+					ladderPriceList:null
+				},
+				{
+					unit: '【50ml】3瓶', // 规格
+					normalPrice: 1000, // 市场价
+					price: 500, // 售价
+					costPrice: 500, // 结算价
+					stock: 100 ,// 库存
+					ladderPriceList:[
+						{
+							numRange:'1-10',
+							buyPrice:500
+						},
+						{
+							numRange:'10-100',
+							buyPrice:5000
+						},
+						{
+							numRange:'100-1000',
+							buyPrice:50000
+						},
+					]
+				}
+			],
+		}
+	},
+	filters: {
+		NumFormat(value) {
+			//处理金额
+			return Number(value).toFixed(2)
+		}
+	},	
+	created() {
+		this.initData()
+	},
+	computed: {
+		...mapState(['hasLogin'])
+	},
+	methods: {
+		async initData(data) {
+			const clubInfo = await this.$api.getComStorage('orderUserInfo')
+			const userInfo = await this.$api.getStorage()
+			this.userIdentity = userInfo.userIdentity
+			this.params.clubId = clubInfo.clubId ? clubInfo.clubId : 0
+			this.params.serviceProviderId = userInfo.serviceProviderId
+			this.params.productId = this.product.productId
+			this.params.productCount = this.product.minBuyNumber
+			this.buyRetailPrice = this.product.price
+			this.buyRetailPriceStep = this.handleData.step
+			if (this.handleData.ladderPriceFlag == 1) {
+				this.params.productCount = this.handleData.maxBuyNumber ? this.handleData.maxBuyNumber : 1
+			} else {
+				this.params.productCount = this.handleData.minBuyNumber
+			}
+		},
+		PromotionsFormat(promo) {
+			//促销活动类型数据处理
+			if (promo != null) {
+				if (promo.type == 1 && promo.mode == 1) {
+					return true
+				} else {
+					return false
+				}
+			}
+			return false
+		},
+		changeCountAdd() {
+			//popup弹窗数量增加按钮
+			if (this.buyRetailPriceStep == 2) {
+				this.params.productCount += this.product.minBuyNumber
+			} else {
+				this.params.productCount++
+			}
+		},
+		changeCountSub() {
+			//popup弹窗数量减按钮
+			if (this.params.productCount <= this.product.minBuyNumber) {
+				this.params.productCount = this.product.minBuyNumber
+				this.isQuantity = true
+				this.$util.msg(`该商品最小起订量为${this.product.minBuyNumber}`, 2000)
+				return
+			} else {
+				if (this.buyRetailPriceStep == 2) {
+					this.params.productCount -= this.product.minBuyNumber
+				} else {
+					this.params.productCount--
+				}
+				this.isQuantity = false
+			}
+		},
+		changeNumber(e) {
+			let _value = e.detail.value
+			if (!this.$api.isNumber(_value)) {
+				this.params.productCount = this.product.minBuyNumber
+			} else if (_value < this.product.minBuyNumber) {
+				this.$util.msg(`该商品最小起订量为${this.product.minBuyNumber}`, 2000)
+				this.params.productCount = this.product.minBuyNumber
+			} else if (_value % this.product.minBuyNumber != 0) {
+				this.$util.msg('购买量必须为起订量的整数倍', 2000)
+				this.params.productCount = this.product.minBuyNumber
+			} else {
+				this.params.productCount = e.detail.value
+			}
+		},
+		handleConfirm() {
+			//增加购物车成功和toast弹窗提示成功
+			this.SellerService.ShoppingCartAddCart(this.params).then(response => {
+				this.$parent.popupShow = false
+				this.$util.msg('加入购物车成功',1500,true,'success')
+				this.$parent.getClubProductNum();
+			}).catch(error =>{
+				this.$util.msg(error.msg,2000);
+			})
+		},
+		handleChoisSku(sku, index) {
+			// 选择SKU
+			this.skuIndex = index
+		},
+		hidePopup() {
+			this.$parent.popupShow = 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;
+						}
+						&.icon-jiahao {
+							border-radius: 0 30rpx 30rpx 0;
+						}
+					}
+					.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;
+			}
+			&.confirm {
+				background: $btn-confirm;
+				color: #ffffff;
+			}
+		}
+	}
+}
+</style>

pages/seller/cart/components/cm-unit-suppor-popup.vue

@@ -0,0 +1,413 @@
+<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.image" mode=""></image> </view>
+						<view class="tui-sku-price">
+							<view class="sku-price-viw">
+								<view
+									class="sku-price-text"
+									:class="
+										PromotionsFormat(product.promotions) || product.svipProductFlag == 1 ? 'none' : ''
+									"
+								>
+									￥{{
+										(PromotionsFormat(product.promotions) || product.svipProductFlag == 1
+											? product.originalPrice
+											: product.price) | NumFormat
+									}}
+								</view>
+							</view>
+							<view class="sku-price-vip">
+								<view class="floor-item-act">
+									<view class="coupon-tags" v-if="product.couponsLogo">优惠券</view>
+									<template v-if="product.actStatus == 1 && product.promotions">
+										<view v-if="PromotionsFormat(product.promotions)" class="floor-tags">
+											{{ product.promotions.name }}
+											<text v-if="product.promotions != null && product.promotions.type != 3">
+												:￥{{
+													product.promotions == null
+														? '0.00'
+														: product.promotions.touchPrice | NumFormat
+												}}
+											</text>
+										</view>
+										<view v-else-if="product.promotions.type != 3" class="floor-tags">
+											{{ product.promotions.name }}
+										</view>
+									</template>
+									<template v-if="product.actStatus == null && product.ladderFlag == 1">
+										<view class="floor-tags">阶梯价格</view>
+									</template>
+									<template v-if="product.svipProductFlag == 1">
+										<view class="svip-tags">
+											<view class="tags">SVIP</view>
+											<view class="price">{{ product.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">缺货</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" @click="handleConfirm">确定</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 cmLadderPopup from '@/components/cm-module/productDetails/cm-ladder-popup.vue'
+export default {
+	name: 'cm-unit-popup',
+	components: {
+		cmLadderPopup
+	},
+	props: {
+		product: {
+			type: Object
+		},
+		popupShow: {
+			type: Boolean,
+			default: false
+		},
+		type: {
+			type: Number,
+			default: 1
+		}
+	},
+	data() {
+		return {
+			laddePopupShow:false,
+			isShowLadder: false,
+			skuIndex: 0,
+			userIdentity: 0,
+			number: 0,
+			buyRetailPrice: 0,
+			ladderPriceList: [],
+			isQuantity: false,
+			skuList: [
+				{
+					unit: '135ml70ml', // 规格
+					normalPrice: 1000, // 市场价
+					price: 500, // 售价
+					costPrice: 500, // 结算价
+					stock: 100, // 库存
+					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, // 库存
+					ladderPriceList: null
+				},
+				{
+					unit: '精华70ml', // 规格
+					normalPrice: 1000, // 市场价
+					price: 500, // 售价
+					costPrice: 500, // 结算价
+					stock: 100, // 库存
+					ladderPriceList: null
+				},
+				{
+					unit: '【70ml】2瓶', // 规格
+					normalPrice: 1000, // 市场价
+					price: 500, // 售价
+					costPrice: 500, // 结算价
+					stock: 100, // 库存
+					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, // 库存
+					ladderPriceList: null
+				},
+				{
+					unit: '【50ml】3瓶', // 规格
+					normalPrice: 1000, // 市场价
+					price: 500, // 售价
+					costPrice: 500, // 结算价
+					stock: 100, // 库存
+					ladderPriceList: [
+						{
+							numRange: '1-10',
+							buyPrice: 500
+						},
+						{
+							numRange: '10-100',
+							buyPrice: 5000
+						},
+						{
+							numRange: '100-1000',
+							buyPrice: 50000
+						}
+					]
+				}
+			]
+		}
+	},
+	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
+			//处理禁用按钮商品
+			// if (this.product.skuList[0].ladderPriceList) {
+			// 	this.isShowLadder = true
+			// }
+		},
+		PromotionsFormat(promo) {
+			//促销活动类型数据处理
+			if (promo != null) {
+				if (promo.type == 1 && promo.mode == 1) {
+					return true
+				} else {
+					return false
+				}
+			}
+			return false
+		},
+		handleConfirm() {
+			const data = { unit : this.handleUnit} 
+			this.$emit('handleUnitConfirm', data)
+			this.$parent.popupShow = 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.popupShow = 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;
+		padding-bottom: 30rpx;
+		.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;
+		margin-bottom: 30rpx;
+	}
+}
+.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>

pages/seller/cart/components/immediatelyList.vue

@@ -145,6 +145,14 @@
 								<view class="list-details-price zuhe_list_price">
 									<view class="list-shop com">
 										<view class="list-price zuhe_list_price">
+											<view class="zuhe_price-larger zuhe_list_text">
+												<text class="price-larger">规格：{{ pros.unit }}</text>
+												<text
+													class="price-btn"
+													@click.stop="handleShowUnitPopup(pros, proIndex)"
+													>重选</text
+												>
+											</view>
 											<view class="zuhe_price-larger zuhe_list_text">
 												<view class="list-price-none" v-if="pros.repurchaseFlag == 1">
 													<text class="price-none">价格：￥{{ pros.originalPrice }}</text>
@@ -237,6 +245,8 @@
 				</scroll-view>
 			</view>
 		</view>
+		<!-- 组合商品规格弹窗 -->
+		<cmUnitSupporPopup v-if="popupShow" :popupShow="popupShow" :product="handleProsData" @handleUnitConfirm="hanldeSupporUnitConfirm"></cmUnitSupporPopup>
 		<!-- 可拖动悬浮按钮 -->
 		<cm-drag
 			:cartNum="cartQuantity"
@@ -257,6 +267,8 @@ import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
 import modalLayer from '@/components/modal-layer'
 import uniStars from '@/components/uni-stars/uni-stars.vue'
 import cmDrag from '@/components/cm-custom/cm-drag.vue'
+import cmUnitSupporPopup from './cm-unit-suppor-popup'
+
 import { mapState, mapMutations } from 'vuex'
 export default {
 	name: 'productList',
@@ -264,6 +276,7 @@ export default {
 		listSkeleton,
 		modalLayer,
 		uniStars,
+		cmUnitSupporPopup,
 		cmDrag
 	},
 	props: {
@@ -274,6 +287,8 @@ export default {
 	},
 	data() {
 		return {
+			popupShow: false,
+			handleProsData: {},
 			isShowClose: false,
 			searchInputVal: '',
 			isModallayer: false,
@@ -282,7 +297,7 @@ export default {
 			priceLoading: true,
 			isShowEmpty: false,
 			isShowEmptyText: '搜索相关商品',
-			userId:0,
+			userId: 0,
 			clubUserId: '',
 			identity: 0,
 			isFocus: false,
@@ -312,7 +327,7 @@ export default {
 	},
 	created() {
 		this.setScrollHeight()
-		this.initGetStotage()	
+		this.initGetStotage()
 		this.isFocus = true
 	},
 	filters: {
@@ -325,7 +340,8 @@ export default {
 		...mapState(['hasLogin', 'userInfo'])
 	},
 	methods: {
-		async initGetStotage() {// 初始化
+		async initGetStotage() {
+			// 初始化
 			const userInfo = await this.$api.getStorage()
 			const clubInfo = await this.$api.getComStorage('orderUserInfo')
 			this.userId = userInfo.userId ? userInfo.userId : 0
@@ -414,7 +430,7 @@ export default {
 			})
 			productIds = productIdArr.join(',')
 			this.ProductService.querySearchProductPrice({
-				flag:this.identity, //查询促销标记 1协销 2机构 3供应商
+				flag: this.identity, //查询促销标记 1协销 2机构 3供应商
 				userId: this.userId,
 				productIds: productIds,
 				source: 2
@@ -666,6 +682,15 @@ export default {
 			}
 			return false
 		},
+		handleShowUnitPopup(pros, index) {
+			// 组合商品规格弹窗
+			this.handleProsData = pros
+			this.popupShow = true
+		},
+		hanldeSupporUnitConfirm(data){
+			console.log('data',data)
+			this.handleProsData.unit = data.unit
+		},
 		btnClick() {
 			this.$emit('goCartPage')
 		},
@@ -861,7 +886,7 @@ export default {
 	display: flex;
 	flex-direction: row;
 	box-sizing: content-box;
-	.list-details-image{
+	.list-details-image {
 		width: 218rpx;
 		height: 218rpx !important;
 		margin-right: 26rpx;
@@ -872,16 +897,16 @@ export default {
 			width: 218rpx;
 			height: 218rpx !important;
 		}
-		.list-details-type{
+		.list-details-type {
 			width: 64rpx;
 			height: 64rpx;
 			text-align: justify;
 			box-sizing: border-box;
 			padding: 10rpx;
 			border-radius: 0 0 8rpx 8rpx;
-			background-color: #33CCBF;
+			background-color: #33ccbf;
 			font-size: $font-size-22;
-			color: #FFFFFF;
+			color: #ffffff;
 			line-height: 25rpx;
 			position: absolute;
 			top: 0;
@@ -1010,6 +1035,18 @@ export default {
 					float: left;
 					margin-right: 20rpx;
 				}
+				.price-btn {
+					display: inline-block;
+					padding: 0 16rpx;
+					line-height: 32rpx;
+					border-radius: 16rpx;
+					text-align: center;
+					box-sizing: border-box;
+					border: 1px solid #e15616;
+					font-size: 24rpx;
+					color: #e15616;
+					margin-left: 30rpx;
+				}
 			}
 			.price-two {
 				color: #666666;

pages/seller/cart/immediately.vue

@@ -10,38 +10,8 @@
 						  @changetab="hanldChangeTab"
 						  >
 		</immediately-list>
-		<!--底部选择模态层弹窗组件 -->
-		<view class="popup spec"  :class="specClass"  @touchmove.stop.prevent="discard" @tap="hideSpec" >
-			<!-- 遮罩层 -->
-			<view class="mask"></view>
-			<view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-370rpx' : '-360rpx'}">
-				<view class="content">
-					<view class="layer-smimg">
-						<image :src="handleData.image" mode=""></image>
-					</view>
-					<view class="layer-nunbox">
-						<view class="layer-nunbox-m" v-if="handleData.code!=''&& handleData.code!=null">商品编码：{{handleData.code}}</view>
-						<view class="layer-nunbox-t">
-							<view class="layer-nunbox-text">数量：</view>
-							<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='6'  @blur="changeNumber($event)">
-								<view  class="iconfont icon-jiahao"  :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
-							</view>
-						</view>
-						<view class="layer-nunbox-b">
-							<view class="text">单价：
-								<text class="p sm">￥</text>
-								<text class="p bg">{{ buyRetailPrice | NumFormat }}</text>
-							</view>
-						</view>
-					</view>
-				</view>
-				<view class="btn">
-					<view class="button add" @click="getAddProductCart">加入购物车</view>
-				</view>
-			</view>
-		</view>
+		<!-- 单品规格弹窗 -->
+		<cm-unit-popup v-if="popupShow" :popupShow="popupShow" :product="handleData"></cm-unit-popup>
 		<!-- 组合加入购物车 -->
 		<view class="popup spec zuhe" :class="specClasszuhe"  @touchmove.stop.prevent="discard" @tap="hideSpecs">
 			<!-- 遮罩层 -->
@@ -63,7 +33,6 @@
 				</view>
 			</view>
 		</view>
-
 		<!--  -->
 		<view class="popup spec zuhe" :class="specClassjieti"  @touchmove.stop.prevent="discard" >
 			<view class="mask"></view>
@@ -88,12 +57,15 @@
 
 <script>
 	import immediatelyList from './components/immediatelyList'
+	import cmUnitPopup from './components/cm-unit-popup'
 	export default{
 		components:{
-			immediatelyList
+			immediatelyList,
+			cmUnitPopup
 		},
 		data(){
 			return{
+				popupShow:false,
 				clubId:'',	//机构ID
 				serviceProviderId:'',//协销ID
 				serverUrl: '',
@@ -162,31 +134,9 @@
 						this.productTotalAmount = data.productTotalAmount;
 					}
 				}else{
-					this.number = data.minBuyNumber
-					this.minBuyNumber = data.minBuyNumber
-					this.buyRetailPrice = data.price;
-					this.buyRetailPriceStep = data.step
-					this.specClass = 'show';
-					if(this.handleData.ladderPriceFlag == '1'){
-						this.ProductService.GetSearchProductLadderPrice({productId:this.handleData.productId}).then(response=>{
-							this.handleDataLadderPriceList = response.data
-							this.handleDataLadderPriceList.forEach((item,index)=>{
-								if(this.number>=item.buyNum){
-									this.buyRetailPrice = item.buyPrice
-								}
-							})
-						}).catch(error =>{
-							console.log('获取阶梯价格异常')
-						})
-					}
+					this.popupShow = true
 				}
 			},
-			hideSpec() {//关闭选择数量确认弹窗
-				this.specClass = 'hide';
-				setTimeout(() => {
-					this.specClass = 'none';
-				}, 200);
-			},
 			hideSpecs(){
 				this.specClasszuhe='hide';
 				setTimeout(() => {
@@ -199,56 +149,6 @@
 					this.specClassjieti='none';
 				}, 200);
 			},
-			changeCountAdd(){//popup弹窗数量增加按钮
-				if(this.buyRetailPriceStep == 2){
-					this.number += this.minBuyNumber
-				}else{
-					this.number++
-				}
-				this.calculatPerice()
-			},
-			changeCountSub(){//popup弹窗数量减按钮
-				if(this.number<=this.minBuyNumber){
-					this.number= this.minBuyNumber
-					this.isQuantity =true
-					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
-					return
-				}else{
-					if(this.buyRetailPriceStep == 2){
-						this.number-=this.minBuyNumber
-					}else{
-						this.number--
-					}
-					this.calculatPerice()
-					this.isQuantity =false
-				}
-			 },
-			changeNumber(e){
-				let _value = e.detail.value;
-				if(!this.$api.isNumber(_value)){
-					this.number = this.minBuyNumber
-				}else if(_value < this.minBuyNumber){
-					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
-					this.number = this.minBuyNumber
-				}else if( _value % this.minBuyNumber !=0 ){
-					this.$util.msg(`购买量必须为起订量的整数倍`,2000);
-					this.number = this.minBuyNumber
-				}else{
-					this.number = e.detail.value
-					this.calculatPerice()
-				}
-			},
-			calculatPerice(){//判断是否为阶梯价然后做计算价格处理
-				if(this.handleData.ladderPriceFlag == '1'){
-					this.handleDataLadderPriceList.forEach((item,index)=>{
-						if(this.number>=item.buyNum){
-							this.buyRetailPrice = item.buyPrice
-						}
-					})
-				}else{
-					this.buyRetailPrice = this.handleData.price;
-				}
-			},
 			getzuheCart(){//组合商品加入购物车
 				let productInfo=[];
 				this.handleData.combinationProductList.forEach(item =>{
@@ -285,24 +185,6 @@
 					item.initProductNum = 0;
 				})
 			},
-			getAddProductCart(){//增加购物车成功和toast弹窗提示成功
-				this.SellerService.ShoppingCartAddCart(
-					{
-						productId:this.handleData.productId,
-						clubId:this.clubId,
-						serviceProviderId:this.serviceProviderId,
-						productCount:this.number,
-						type:1
-					}
-				).then(response => {
-					this.specClass = 'hide';
-					this.$util.msg('加入购物车成功',1500,true,'success')
-					this.getClubProductNum();
-					setTimeout(() => {this.specClass = 'none'}, 200)
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000);
-				})
-			},
 			hanldToCartPage(){
 				this.$api.navigateTo('/pages/seller/cart/cart')
 			},

pages/tabBar/home/index.vue

@@ -178,8 +178,7 @@ export default {
 					let data = response.data
 					this.pageList = data.homePageFloor
 					this.hotListPageFloor = data.pageFloorList
-					this.supplierObj = data.supplierImage
-					uni.setStorageSync('pageLabel','首页')
+					this.supplierObj = data.supplierImage				
 					setTimeout(() => {
 						this.isRequest = true
 					}, 500)
@@ -293,6 +292,7 @@ export default {
 		this.modallayer = false
 		this.autoplay = true
 		this.GetWxAuthorize()
+		uni.setStorageSync('pageLabel','首页')
 	},
 	onHide() {
 		this.autoplay = false

pages/user/collection/collection.vue

@@ -181,50 +181,8 @@
 				</view>
 			</view>
 		</tui-bottom-popup>
-		<!-- 购买弹窗 -->
-		<tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
-			<view class="tui-popup-box clearfix">
-				<view class="tui-popup-content">
-					<view class="layer-smimg"> <image :src="handleData.image" mode=""></image> </view>
-					<view class="layer-nunbox">
-						<view class="layer-nunbox-t">
-							<view class="layer-nunbox-text">数量:</view>
-							<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 class="layer-nunbox-b">
-							<view class="text"
-								>单价: <text class="p sm">￥</text>
-								<text class="p bg">{{ buyRetailPrice.toFixed(2) }}</text>
-							</view>
-						</view>
-					</view>
-				</view>
-				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
-					<view class="tui-flex-btn">
-						<view class="button add" @click="getAddProductCart">加入购物车</view>
-						<view class="button buy" @click="toConfirmation">立即购买</view>
-					</view>
-				</view>
-			</view>
-		</tui-bottom-popup>
+		<!-- 选择规格弹窗 -->
+		<cm-unit-popup v-if="popupShow1" :popupShow="popupShow1" :product="handleData"></cm-unit-popup>
 		<!-- 弹窗提示 -->
 		<tui-modal
 			:show="modal"
@@ -254,6 +212,7 @@
 import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
 import tuiNomore from '@/components/tui-components/nomore/nomore'
 import cmDrag from '@/components/cm-custom/cm-drag.vue'
+import cmUnitPopup from '@/components/cm-module/productDetails/cm-unit-popup.vue'
 
 import { mapState, mapMutations } from 'vuex'
 const defaultListQuery = {
@@ -265,7 +224,8 @@ export default {
 	components: {
 		tuiLoadmore,
 		tuiNomore,
-		cmDrag
+		cmDrag,
+		cmUnitPopup
 	},
 	data() {
 		return {
@@ -294,10 +254,6 @@ export default {
 			listQuery: Object.assign({}, defaultListQuery),
 			productList: [],
 			handleData: {},
-			number: 0,
-			buyRetailPrice: 0,
-			buyRetailPriceStep: 1,
-			isQuantity: false,
 			scrollTop: 0,
 			isEmpty: false,
 			isAllChecked: false,
@@ -505,85 +461,6 @@ export default {
 			}
 			return false
 		},
-		changeCountAdd() {
-			//popup弹窗数量增加按钮
-			if (this.buyRetailPriceStep == 2) {
-				this.number += this.handleData.minBuyNumber
-			} else {
-				this.number++
-			}
-			this.calculatPerice()
-		},
-		changeCountSub() {
-			//popup弹窗数量减按钮
-			if (this.number <= this.handleData.minBuyNumber) {
-				this.number = this.handleData.minBuyNumber
-				this.isQuantity = true
-				this.$util.msg(`该商品最小起订量为${this.handleData.minBuyNumber}`, 2000)
-				return
-			} else {
-				if (this.buyRetailPriceStep == 2) {
-					this.number -= this.handleData.minBuyNumber
-				} else {
-					this.number--
-				}
-				this.calculatPerice()
-				this.isQuantity = false
-			}
-		},
-		changeNumber(e) {
-			let _value = e.detail.value
-			if (!this.$api.isNumber(_value)) {
-				this.number = this.handleData.minBuyNumber
-			} else if (_value < this.handleData.minBuyNumber) {
-				this.$util.msg(`该商品最小起订量为${this.handleData.minBuyNumber}`, 2000)
-				this.number = this.handleData.minBuyNumber
-			} else if (_value % this.handleData.minBuyNumber != 0) {
-				this.$util.msg('购买量必须为起订量的整数倍', 2000)
-				this.number = this.handleData.minBuyNumber
-			} else {
-				this.number = e.detail.value
-				this.calculatPerice()
-			}
-		},
-		calculatPerice() {
-			//判断是否为阶梯价然后做计算价格处理
-			if (this.handleData.ladderPriceFlag == 1) {
-				this.handleData.ladderPrices.forEach((item, index) => {
-					if (this.number >= item.buyNum) {
-						this.buyRetailPrice = item.buyPrice
-					}
-				})
-			}
-		},
-		toConfirmation() {
-			//跳转确认订单页面
-			this.popupShow1 = false
-			let productStp = {
-				productIds: this.handleData.productId,
-				productCount: this.number
-			}
-			console.log('productStp',productStp)
-			this.$api.navigateTo(
-				`/pages/user/order/create-order?type=1&data=${JSON.stringify({ data: productStp })}`
-			)
-		},
-		getAddProductCart() {
-			//增加购物车成功和toast弹窗提示成功
-			this.ProductService.shoppingAddCart({
-				productId: this.handleData.productId,
-				userId: this.listQuery.userId,
-				productCount: this.number
-			})
-				.then(response => {
-					this.popupShow1 = false
-					this.$util.msg('加入购物车成功', 1500, true, 'success')
-					this.ProductCartNumber()
-				})
-				.catch(error => {
-					this.$util.msg(error.msg, 2000)
-				})
-		},
 		showPopup(index, pros) {
 			// 弹窗显示
 			switch (index) {
@@ -593,14 +470,6 @@ export default {
 				case 1:
 					this.popupShow1 = true
 					this.handleData = pros
-					console.log(this.handleData)
-					this.buyRetailPrice = this.handleData.price
-					this.buyRetailPriceStep = this.handleData.step
-					if (this.handleData.ladderPriceFlag == 1) {
-						this.number = this.handleData.maxBuyNumber ? this.handleData.maxBuyNumber : 1
-					} else {
-						this.number = this.handleData.minBuyNumber
-					}
 					break
 			}
 		},

pages/user/regularPurchase/regularPurchase.vue

@@ -1,186 +1,42 @@
 <template>
 	<view class="container all-type-list-wrapper">
+		<!-- 商品列表 -->
 		<product-list ref="productList" @operationConfim="hanldOperationConfim"></product-list>
-		<!--底部选择模态层弹窗组件 -->
-		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
-			<!-- 遮罩层 -->
-			<view class="mask"></view>
-			<view
-				class="layer"
-				@tap.stop="discard"
-				:style="{ paddingBottom: isIphoneX ? '68rpx' : '36rpx', bottom: isIphoneX ? '-332rpx' : '-294rpx' }"
-			>
-				<view class="content">
-					<view class="layer-smimg"> <image :src="handleData.image" mode=""></image> </view>
-					<view class="layer-nunbox">
-						<view class="layer-nunbox-t">
-							<view class="layer-nunbox-text">数量:</view>
-							<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 class="layer-nunbox-b">
-							<view class="text"
-								>单价: <text class="p sm">￥</text>
-								<text class="p bg">{{ buyRetailPrice.toFixed(2) }}</text>
-							</view>
-						</view>
-					</view>
-				</view>
-				<view class="btn">
-					<view class="button buy" @click="toConfirmation">立即购买</view>
-					<view class="button add" @click="getAddProductCart">加入购物车</view>
-				</view>
-			</view>
-		</view>
+		<!-- 选择规格弹窗 -->
+		<cm-unit-popup v-if="popupShow1" :popupShow="popupShow1" :product="handleData"></cm-unit-popup>
 	</view>
 </template>
 
 <script>
 import productList from './components/productList'
+import cmUnitPopup from '@/components/cm-module/productDetails/cm-unit-popup.vue'
 export default {
 	components: {
-		productList
+		productList,
+		cmUnitPopup
 	},
 	data() {
 		return {
-			userId: '',
-			serverUrl: '',
-			emptyText: '',
-			lastPageType: '',
-			lastPageVal: '',
+			userId: 0,
 			isIphoneX: this.$store.state.isIphoneX,
-			specClass: '', //规格弹窗css类，控制开关动画
+			popupShow1:false,
 			handleData: {},
-			isQuantity: false,
-			isStock: false,
-			minBuyNumber: 0,
-			number: 0,
-			buyRetailPrice: 0,
-			buyRetailPriceStep: 1
 		}
 	},
-	onLoad() {},
+	onLoad() {
+		this.initGetStotage()
+	},
 	methods: {
+		async initGetStotage() {
+			const userInfo = await this.$api.getStorage()
+			this.userId = userInfo.userId ? userInfo.userId : 0
+			this.GetProductListInfo()
+			this.ProductCartNumber()
+		},
 		hanldOperationConfim(data) {
 			//显示选择数量确认弹窗
-			this.specClass = 'show'
+			this.popupShow1 = true
 			this.handleData = data
-			this.minBuyNumber = data.minBuyNumber
-			this.buyRetailPrice = data.price
-			this.buyRetailPriceStep = data.step
-			if (this.handleData.ladderPriceFlag == 1) {
-				this.number = data.maxBuyNumber
-			} else {
-				this.number = data.minBuyNumber
-			}
-		},
-		hideSpec() {
-			//关闭选择数量确认弹窗
-			this.specClass = 'hide'
-			setTimeout(() => {
-				this.specClass = 'none'
-			}, 200)
-		},
-		changeCountAdd() {
-			//popup弹窗数量增加按钮
-			if (this.buyRetailPriceStep == 2) {
-				this.number += this.minBuyNumber
-			} else {
-				this.number++
-			}
-			this.calculatPerice()
-		},
-		changeCountSub() {
-			//popup弹窗数量减按钮
-			if (this.number <= this.minBuyNumber) {
-				this.number = this.minBuyNumber
-				this.isQuantity = true
-				this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
-				return
-			} else {
-				if (this.buyRetailPriceStep == 2) {
-					this.number -= this.minBuyNumber
-				} else {
-					this.number--
-				}
-				this.calculatPerice()
-				this.isQuantity = false
-			}
-		},
-		changeNumber(e) {
-			let _value = e.detail.value
-			if (!this.$api.isNumber(_value)) {
-				this.number = this.minBuyNumber
-			} else if (_value < this.minBuyNumber) {
-				this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
-				this.number = this.minBuyNumber
-			} else if (_value % this.minBuyNumber != 0) {
-				this.$util.msg('购买量必须为起订量的整数倍', 2000)
-				this.number = this.minBuyNumber
-			} else {
-				this.number = e.detail.value
-				this.calculatPerice()
-			}
-		},
-		calculatPerice() {
-			//判断是否为阶梯价然后做计算价格处理
-			if (this.handleData.ladderPriceFlag == 1) {
-				this.handleData.ladderPriceList.forEach((item, index) => {
-					if (this.number >= item.buyNum) {
-						this.buyRetailPrice = item.buyPrice
-					}
-				})
-			}
-		},
-		toConfirmation() {
-			//跳转确认订单页面
-			this.specClass = 'hide'
-			let productStp = {
-				productIds: this.handleData.productId,
-				productCount: this.number
-			}
-			this.$api.navigateTo(
-				`/pages/user/order/create-order?type=1&data=${JSON.stringify({ data: productStp })}`
-			)
-			setTimeout(() => {
-				this.specClass = 'none'
-			}, 200)
-		},
-		getAddProductCart() {
-			//增加购物车成功和toast弹窗提示成功
-			this.ProductService.shoppingAddCart({
-				productId: this.handleData.productId,
-				userId: this.userId,
-				productCount: this.number
-			})
-				.then(response => {
-					this.specClass = 'hide'
-					this.$util.msg('加入购物车成功', 1500, true, 'success')
-					setTimeout(() => {
-						this.specClass = 'none'
-					}, 1500)
-					this.GetUserCartNumber()
-				})
-				.catch(error => {
-					this.$util.msg(error.msg, 2000)
-				})
 		},
 		GetUserCartNumber() {
 			this.OrderService.ShoppingCartCount({ userId: this.userId })
@@ -190,17 +46,10 @@ export default {
 				.catch(error => {
 					console.log('查询用户购物车数量失败')
 				})
-		},
-		discard() {
-			//丢弃
 		}
 	},
 	onShow() {
-		let pages = getCurrentPages(),
-			thisPage = pages[pages.length - 1]
-		this.$api.getStorage().then(resolve => {
-			this.userId = resolve.userId ? resolve.userId : 0
-		})
+	
 	}
 }
 </script>

utils/residence.js

@@ -38,12 +38,14 @@ const leave = (prev) => {
 // 页面切换
 const routting = async (current, prev) => {
     await userBehavior(current, prev)
+	
 }
 
 /* 用户停留时间 */
 async function userBehavior(current, prev) {
     const sysParams = Object.assign({}, defaultParams)
     try {
+        if (process.env.NODE_ENV !== 'production') { return }
         if (!prev) return
         if (!isInclude(prev.path)) return
         //协销不记录