caimei-applets-caimei/pages/goods/goods-supporting.vue

<template>
	<view class="container product clearfix">
		<view class="product-content" :style="{ paddingBottom: popupShow ? '150rpx' : '0' }">
			<view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
				<!-- 空白页 -->
				<view class="empty-container" v-if="isEmpty">
					<image
						class="empty-container-image"
						:src="StaticUrl + '/icon/icon-collection-empty@2x.png'"
					></image>
					<text class="error-text">暂无收藏商品~</text>
				</view>
				<!-- 列表 -->
				<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-checkBox">
								<view
									class="checkbox iconfont"
									:class="[pros.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
									:style="{color : disabledChecked(pros) ? '#E1E1E1' : '#E15616' }"
									@click="checkedSoperv(pros)"
								>
								</view>
							</view>
							<view class="tui-goods-image" @click.stop="navToDetailPage(pros.productId)"
								><image :src="pros.image" class="tui-goods-img" />
							</view>
							<view class="tui-goods-info">
								<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
								>
								<template v-if="hasLogin">
									<template v-if="userIdentity == 4">
										<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 == 2">
											<view class="list-none"
												><view class="price-small">￥价格仅会员可见</view></view
											>
										</view>
										<view class="list-details-price" v-else-if="pros.priceFlag == 3">
											<view class="list-none"
												><view class="price-small">￥仅医美机构可见</view></view
											>
										</view>
										<template v-else>
											<view class="list-details-price">
												<view class="list-price">
													<text
														class="price-larger"
														:class="
															PromotionsFormat(pros.promotions) ||
															pros.svipProductFlag == 1
																? 'none'
																: ''
														"
													>
														￥{{
															(PromotionsFormat(pros.promotions) ||
															pros.svipProductFlag == 1
																? pros.originalPrice
																: pros.price) | NumFormat
														}}
													</text>
												</view>
												<view class="add-cart-btn" v-if="!disabledChecked(pros)">
													<view class="number-box">
														<view
															class="iconfont icon-jianhao"
															@click="changeCountSub(pros)"
														></view>
														<input
															class="btn-input"
															type="number"
															maxlength="4"
															v-model="pros.number"
															@blur="changeNumber($event, pros)"
														/>
														<view
															class="iconfont icon-jiahao"
															@click="changeCountAdd(pros)"
														></view>
													</view>
												</view>
											</view>
											<view class="list-details-price none">
												<view class="floor-item-act">
													<view class="coupon-tags" v-if="pros.couponsLogo"
														>优惠券</view
													>
													<template v-if="pros.actStatus == 1">
														<view
															class="floor-tags"
															v-if="
																pros.actStatus == 1 && PromotionsFormat(pros.promotions)
															"
														>
															{{ pros.promotions.name }}
															<text
																v-if="
																	hasLogin && userIdentity == 2 && pros.priceFlag != 1
																"
																>:￥{{ pros.price | NumFormat }}</text
															>
														</view>
														<view class="floor-tags" v-else>{{
															pros.promotions.name
														}}</view>
													</template>
													<template v-if="pros.svipProductFlag == 1">
														<view class="svip-tags">
															<view class="tags" :class="{ none: !isShowVipFlag(pros) }"
																>SVIP</view
															>
															<view class="price" v-if="isShowVipFlag(pros)">{{
																pros.svipPriceTag
															}}</view>
														</view>
													</template>
												</view>
											</view>
										</template>
									</template>
									<template v-else>
										<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>
										<template v-else>
											<view class="list-details-price">
												<view class="list-price">
													<text
														class="price-larger"
														:class="
															PromotionsFormat(pros.promotions) ||
															pros.svipProductFlag == 1
																? 'none'
																: ''
														"
													>
														￥{{
															(PromotionsFormat(pros.promotions) ||
															pros.svipProductFlag == 1
																? pros.originalPrice
																: pros.price) | NumFormat
														}}
													</text>
												</view>
												<view class="add-cart-btn">
													<view class="number-box">
														<view
															class="iconfont icon-jianhao"
															:class="[isQuantity == true ? 'disabled' : '']"
															@click="changeCountSub(pros)"
														></view>
														<input
															class="btn-input"
															type="number"
															maxlength="4"
															v-model="pros.number"
															@blur="changeNumber($event, pros)"
														/>
														<view
															class="iconfont icon-jiahao"
															:class="[isStock == true ? 'disabled' : '']"
															@click="changeCountAdd(pros)"
														></view>
													</view>
												</view>
											</view>
											<view class="list-details-price none">
												<view class="floor-item-act">
													<template v-if="pros.actStatus == 1">
														<view
															class="floor-tags"
															v-if="
																pros.actStatus == 1 && PromotionsFormat(pros.promotions)
															"
														>
															{{ pros.promotions.name }}
															<text
																v-if="
																	hasLogin && userIdentity == 2 && pros.priceFlag != 1
																"
																>:￥{{ pros.price | NumFormat }}</text
															>
														</view>
														<view class="floor-tags" v-else>{{
															pros.promotions.name
														}}</view>
													</template>
													<template v-if="pros.svipProductFlag == 1">
														<view class="svip-tags">
															<view class="tags" :class="{ none: vipFlag == 0 }"
																>SVIP</view
															>
															<view class="price" v-if="isShowVipFlag(pros)">{{
																pros.svipPriceTag
															}}</view>
														</view>
													</template>
												</view>
											</view>
										</template>
									</template>
								</template>
								<template v-else>
									<view class="list-details-price">
										<view class="p-stars">
											<text class="p-no">￥</text>
											<uni-grader :grade="Number(pros.priceGrade)" :margin="14"></uni-grader>
										</view>
										<view class="add-cart-btn">
											<view class="number-box">
												<view
													class="iconfont icon-jianhao"
													@click="changeCountSub(pros)"
												></view>
												<input
													class="btn-input"
													type="number"
													maxlength="4"
													v-model="pros.number"
													@blur="changeNumber($event, pros)"
												/>
												<view class="iconfont icon-jiahao" @click="changeCountAdd(pros)"></view>
											</view>
										</view>
									</view>
									<view class="list-details-price none">
										<view class="floor-item-act">
											<template v-if="pros.actStatus == 1">
												<view
													class="floor-tags"
													v-if="pros.actStatus == 1 && PromotionsFormat(pros.promotions)"
												>
													{{ pros.promotions.name }}
												</view>
												<view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
											</template>
											<template v-if="pros.svipProductFlag == 1">
												<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
											</template>
										</view>
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
				<!--加载loadding-->
			</view>
		</view>
		<!-- 取消收藏操作 -->
		<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>
						<view class="tui-button buy" @click="handleSupportingSubmit('buy')">立即购买</view>
						<view class="tui-button add" @click="handleSupportingSubmit('add')">加入购物车</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
	</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 { mapState, mapMutations } from 'vuex'
export default {
	components: {
		tuiLoadmore,
		tuiNomore,
		uniGrader
	},
	data() {
		return {
			StaticUrl: this.$Static,
			isIphoneX: this.$store.state.isIphoneX,
			totalRecord: 0,
			cartQuantity: 0,
			popupShow: true,
			listQuery: {
				userId: 0,
				productId: 0,
				source: 2,
				pageNum:1,
				pageSize:50
			},
			productList: [],
			handleData: {},
			number: 0,
			buyRetailPrice: 0,
			buyRetailPriceStep: 1,
			isQuantity: false,
			scrollTop: 0,
			isEmpty: false,
			isAllChecked: false,
			navbarHeight: '',
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			hasNextPage: false,
			nomoreText: '上拉显示更多',
			vipFlag: 0,
			userIdentity: 0,
			firstClubType:0,
			isStock: false
		}
	},
	onLoad(option) {
		this.listQuery.productId = option.productId
		this.initGetStotage()
	},
	filters: {
		NumFormat: function(value) {
			//处理金额
			if (!value) return '0.00'
			let number = Number(value).toFixed(2)
			return number
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo','clubType']),
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async initGetStotage() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.firstClubType = this.clubType
			this.getCommodityCombinationList()
		},
		getCommodityCombinationList() {
			// 初始化商品详情配套商品
			this.ProductService.getCommodityCombinationList(this.listQuery)
				.then(response => {
					let data = response.data 
					this.hasNextPage = data.hasNextPage
					this.productList = data.results.map((pros, index) => {
						pros.isChecked = false
						pros.number = pros.minBuyNumber
						return pros
					})
					this.pullFlag = false
					setTimeout(() => {
						this.pullFlag = true
					}, 500)
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						if (this.productList.length < 8) {
							this.pullUpOn = true
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					console.log('获取组合商品列表失败')
				})
		},
		GetOnReachBottomData() {
			//上拉加载
			this.listQuery.pageNum += 1
			this.ProductService.getCommodityCombinationList(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.results && data.results.length > 0) {
						this.hasNextPage = data.hasNextPage
						let list = data.results.map((pros, index) => {
							if(this.isAllChecked && !this.disabledChecked(pros)){
								pros.isChecked = true
							}else{
								pros.isChecked = false
							}
							pros.number = pros.minBuyNumber
							return pros
						})
						this.productList = this.productList.concat(list)
						this.pullFlag = false // 防上拉暴滑
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		handleSupportingSubmit(type) {
			if (this.hasLogin) {
				switch (type) {
					case 'buy':
						console.log('立即购买')
						this.toConfirmation()
						break
					case 'add':
						console.log('加入购物车')
						this.getAddProductCart()
						break
				}
			} else {
				this.$api.navigateTo('/pages/login/login')
			}
		},
		getAddProductCart() {
			//增加购物车成功和toast弹窗提示成功
			let list = []
			if(!this.isProductChecked){
				this.$util.msg('请先选择商品', 2000)
				return
			}
			this.productList.forEach((el)=>{
				if(el.isChecked){
					list.push({ productId:el.productId , productCount: el.number })
				}
			})
			this.ProductService.ShoppingAddCarts({
				productInfo:JSON.stringify(list),
				userId: this.listQuery.userId
			})
				.then(response => {
					this.$util.msg('加入购物车成功', 1500, true, 'success')
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		toConfirmation() {
			//跳转确认订单页面
			let list = []
			if(!this.isProductChecked){
				this.$util.msg('请先选择商品', 2000)
				return
			}
			this.productList.map((el, index) => {
				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 })}`
			)
		},
		updateCheckAllBtn() {
			//勾选单个判断全选
			let goodsCheckedLength = 0
			this.productList.forEach(pros => {
				if (pros.isChecked) {
					goodsCheckedLength++
				}
			})
			this.isAllChecked = goodsCheckedLength === this.productList.length
			if (goodsCheckedLength > 0) {
				this.isProductChecked = true
			} else {
				this.isProductChecked = false
			}
		},
		updateBothCheckBtn() {
			//全选勾选判断
			this.productList.forEach(pros => {
				if(!this.disabledChecked(pros)){
					pros.isChecked = this.isAllChecked
				}
			})
		},
		disabledChecked(pros){
			if(pros.priceFlag ==1){// 为公开价格返回 true 禁用按钮
				return true
			}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 ){
					return true
				}
			}
		},
		isCheckedAll() {
			//全选
			this.isAllChecked = !this.isAllChecked
			if (this.isAllChecked) {
				this.isProductChecked = true
			} else {
				this.isProductChecked = false
			}
			this.updateBothCheckBtn()
		},
		checkedSoperv(pros) {
			// 勾选商品
			if(this.disabledChecked(pros)){
				this.$util.msg('该商品暂不能购买', 2000)
				return
			}
			pros.isChecked = !pros.isChecked
			this.updateCheckAllBtn()
		},
		PromotionsFormat(promo) {
			//优惠价促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		changeCountAdd(pros) {
			//popup弹窗数量增加按钮
			if (pros.step == 2) {
				pros.number += pros.minBuyNumber
			} else {
				pros.number++
			}
			this.calculatPerice()
		},
		changeCountSub(pros) {
			//popup弹窗数量减按钮
			if (pros.number <= pros.minBuyNumber) {
				pros.number = pros.minBuyNumber
				this.isQuantity = true
				this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`, 2000)
				return
			} else {
				if (pros.step == 2) {
					pros.number -= pros.minBuyNumber
				} else {
					pros.number--
				}
				this.calculatPerice()
				this.isQuantity = false
			}
		},
		changeNumber(e, pros) {
			let _value = Number(e.detail.value)
			if (!this.$api.isNumber(_value)) {
				pros.number = pros.minBuyNumber
			} else if (_value < pros.minBuyNumber) {
				this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`, 2000)
				pros.number = pros.minBuyNumber
			} else if (_value % pros.minBuyNumber != 0) {
				this.$util.msg('购买量必须为起订量的整数倍', 2000)
				pros.number = pros.minBuyNumber
			} else {
				pros.number = _value 
				this.calculatPerice(pros)
			}
		},
		calculatPerice(pros) {
			//判断是否为阶梯价然后做计算价格处理
			if (pros.ladderPriceFlag == 1) {
				pros.ladderPrices.forEach((el, index) => {
					if (pros.number >= el.buyNum) {
						pros.price = el.buyPrice
					}
				})
			}
		},
		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
		},
		navToDetailPage(id) {
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
			this.isModallayer = false
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.GetOnReachBottomData()
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getCommodityCombinationList()
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShow() {}
}
</script>

<style lang="scss">
@import '@/uni.scss';
page {
	background: #fff;
}
.empty-container {
	z-index: 9999;
}
.tui-header {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0 40rpx;
}
.header-sit {
	width: 100%;
	box-sizing: border-box;
	height: 80rpx;
	line-height: 80rpx;
	box-sizing: border-box;
	padding: 0 40rpx;
	text-align: left;
	font-size: $font-size-40;
	color: #ffffff;
	font-weight: 600;
	font-family: '正楷';
	margin-top: 30rpx;
	.iconfont {
		font-size: 42rpx;
		margin-left: 30rpx;
	}
}
.mine {
	width: 100%;
	height: 100%;
	position: relative;
}
.product-content {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0;
	box-sizing: border-box;
	.empty-container-image {
		width: 260rpx;
		height: 260rpx;
		margin-top: -300rpx;
	}
}
.tui-goods-item {
	padding: 30rpx 20rpx 0 20rpx;
	box-sizing: border-box;
	position: relative;
	.tui-goods-main {
		display: flex;
		width: 100%;
		height: 100%;
		border-bottom: 1px solid #ebebeb;
		padding-bottom: 24rpx;
		&.none{
			border-bottom: none;
		}
	}
}
.tui-goods-checkBox {
	display: flex;
	align-items: center;
	margin: 0 15rpx;
	.checkbox {
		display: flex;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		border-radius: 0;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: #ffffff;
		font-size: 36rpx;
		color: $color-system;
	}
	.text {
		font-size: $font-size-24;
		margin-left: 10rpx;
	}
}
.tui-goods-image {
	width: 180rpx;
	height: 180rpx !important;
	border-radius: 12rpx;
	.tui-goods-img {
		width: 180rpx;
		height: 180rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}
}
.tui-goods-info {
	width: 460rpx;
	padding-left: 20rpx;
	box-sizing: border-box;
	position: relative;
	.list-details-title {
		line-height: 38rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 26rpx;
		color: #333333;
	}
	.list-details-specs {
		width: 100%;
		display: inline-block;
		margin-top: 8rpx;
		color: #999999;
		font-size: 24rpx;
	}
	.list-details-price {
		width: 100%;
		line-height: 54rpx;
		float: left;
		.p-stars {
			float: left;
			.p-no {
				font-size: $font-size-28;
				color: $text-color;
				display: block;
				float: left;
			}
		}
		&.none {
			height: 32rpx;
			line-height: 32rpx;
		}
		.floor-item-act {
			height: 54rpx;
			text-align: center;
			box-sizing: border-box;
			float: left;
		}
		.price-icon {
			width: 22rpx;
			height: 28rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		}
		.price-icon + text {
			font-size: 25rpx;
			vertical-align: middle;
		}
		.list-login-now {
			width: 375rpx;
			color: #f8c499;
			position: absolute;
			bottom: 0;
			.p-no {
				float: left;
				font-size: $font-size-24;
				color: $color-system;
				margin-right: 10rpx;
			}
		}
		.login-now {
			padding: 10rpx 10rpx 10rpx 0;
		}
		.list-none {
			margin-top: 20rpx;
			.price-small {
				font-size: $font-size-26;
				line-height: 40rpx;
				color: #ff2a2a;
			}
		}
		.list-price {
			color: #ff2a2a;
			float: left;
			line-height: 54rpx;
			align-items: center;
			justify-content: center;
			.price-larger {
				font-size: $font-size-30;
				display: inline-block;
				&.none {
					text-decoration: line-through;
					color: #999999;
				}
			}
		}
		.add-cart-btn {
			float: right;
			width: 186rpx;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 30rpx;
			color: #fff;
			font-size: 24rpx;
			margin-right: 0;
			background: #ffffff;
			color: $text-color;
			text-align: center;
			.number-box {
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #ffe6dc;
				border-radius: 30rpx;
				.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: #fff;
					border-radius: 4rpx;
					text-align: center;
					font-size: $font-size-24;
				}
			}
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 168rpx;
	padding: 6rpx 24rpx;
	.tui-popup-content {
		padding-top: 30rpx;
	}
}
.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: 88rpx;
	padding: 13rpx 0 0 0;
	float: left;
	.layer-nunbox-t {
		width: 100%;
		height: 44rpx;
		position: relative;
		display: flex;
		.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%;
	height: auto;
	float: left;
	box-sizing: border-box;
	margin-top: 30rpx;
	.superv-header-checked {
		float: left;
		font-size: $font-size-30;
		.oltext {
			width: 120rpx;
			float: left;
			color: #666666;
			display: flex;
			margin-left: 10rpx;
			.checkbox {
				display: flex;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				text-align: center;
				text-decoration: none;
				border-radius: 0;
				-webkit-tap-highlight-color: transparent;
				overflow: hidden;
				font-size: 34rpx;
				color: $color-system;
				line-height: 80rpx;
			}
			.text {
				float: left;
				line-height: 80rpx;
				margin-left: 15rpx;
			}
		}
		.ortext {
			width: 120rpx;
			float: right;
			color: $color-system;
			text-align: right;
		}
	}
	.tui-button {
		width: 210rpx;
		height: 88rpx;
		float: right;
		background: #e1e1e1;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: $font-size-28;
		border-radius: 44rpx;
		margin-left: 32rpx;
		&.add {
			background: #ffe6dc;
			color: #e15616;
		}
		&.buy {
			background: $btn-confirm;
		}
	}
	.tui-flex-btn {
		width: 100%;
		height: 88rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 34rpx;
		.button {
			width: 280rpx;
			height: 88rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-size-28;
			border-radius: 44rpx;
			&.buy {
				background: $btn-confirm;
				margin-left: 78rpx;
			}
			&.add {
				background: #ffe6dc;
				color: #e15616;
			}
		}
	}
}
</style>