caimei-applets-caimei/components/cm-module/listTemplate/immediatelyList.vue

<template>
	<view
		class="container commodity-list-wrapper"
		:style="{ overflow: showSkeleton ? 'hidden' : 'auto', height: showSkeleton ? windowHeight + 'px' : 'auto' }"
	>
		<view class="good-search clearfix" v-if="searchStatus">
			<view class="nav-tab-bar u-f-ajc">
				<block v-for="(tab, index) in tabBars" :key="tab.id" :class="{ current: tabIndex === index }">
					<view class="tabstyle u-f-ajc" :class="{ addstyle: tabIndex == index }" @tap="changeTab(index)">
						{{ tab.name }}<i v-if="tabIndex == index" class="nav-tab-line iconfont icon-gou"></i>
					</view>
				</block>
			</view>
			<view class="search-from name">
				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
				<input
					class="input"
					type="text"
					:focus="isFocus"
					confirm-type="search"
					v-model="searchInputVal"
					placeholder="请输入商品关键词"
					@input="onShowClose"
					@confirm="searchOpertor(tabIndex)"
					maxlength="20"
				/>
				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText(tabIndex)"></text>
			</view>
		</view>
		<list-skeleton v-if="showSkeleton"></list-skeleton>
		<view class="empty-container" v-if="isShowEmpty">
			<image
				class="empty-container-image"
				src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
			></image>
			<text class="error-text">{{ isShowEmptyText }}</text>
		</view>
		<!-- 单一商品 -->
		<view class="product-container" v-else>
			<view :class="tabIndex" v-if="tabIndex === 0" :style="{ paddingTop: searchStatus ? '128rpx' : '' }">
				<scroll-view
					:style="{ height: scrollHeight + 'px' }"
					@scrolltolower="scrolltolower(tabIndex)"
					scroll-y
					v-if="listData.length > 0"
				>
					<view
						v-for="(pros, index) in listData"
						:key="index"
						:id="pros.productId"
						class="all-type-list-content commodity-list"
						@click.stop="navToDetailPage(pros.productId)"
					>
						<image mode="widthFix" :src="pros.image" class="list-img" alt="list-img"></image>
						<view class="list-details-info">
							<text class="list-details-title">{{ isInterceptHtmlFn(pros.name) }}</text>
							<text class="list-details-specs">规格：{{ pros.unit ? pros.unit : '' }}</text>
							<text class="list-details-miniQuantity list-details-specs"
								>起订量：{{ pros.minBuyNumber }}</text
							>
							<view class="list-details-specs" v-if="pros.code != '' && pros.code != null">
								<view>商品编码：{{ pros.code }}</view>
							</view>
							<view class="list-details-price">
								<template v-if="priceLoading">
									<view class="list-price-loding">正在获取价格...</view>
								</template>
								<template v-else>
									<view class="list-shop">
										<view class="list-price">
											<text
												class="price-larger"
												:class="PromotionsFormat(pros.promotions) ? 'none' : ''"
											>
												￥{{
													(PromotionsFormat(pros.promotions)
														? pros.originalPrice
														: pros.price) | NumFormat
												}}
											</text>
										</view>
									</view>
									<button class="add-cart-btn" @click.stop="operationHanld(pros)">数量</button>
								</template>
							</view>
							<view class="list-details-price">
								<view class="floor-item-act" v-if="pros.actStatus == 1">
									<view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
									<template>
										<view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
											{{ pros.promotions.name }}<text>:￥{{ pros.price | NumFormat }}</text>
										</view>
										<view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
									</template>
								</view>
							</view>
						</view>
					</view>
					<view v-if="showLoading && listData.length > 4 && !showRegularBtn">
						<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
							>{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
						>
						<view class="loading-wrapper loading-wrapper-btm" v-else
							>———<text class="btm-text">已至底部</text>———</view
						>
					</view>
				</scroll-view>
			</view>
			<!-- 组合商品 -->
			<view :class="tabIndex" v-if="tabIndex === 1">
				<scroll-view
					:style="{ height: scrollHeight + 'px', paddingTop: searchStatus ? '112rpx' : '' }"
					@scrolltolower="scrolltolower(tabIndex)"
					scroll-y
				>
					<view class="all-zuhe-list" v-for="(item, index) in combinationProduct" :key="index" :id="item.id">
						<view class="zuhe_title" :class="index % 2 == 0 ? 'active' : ''">{{ item.name }}</view>
						<view
							v-for="(pros, proIndex) in item.combinationProductList"
							:class="index % 2 == 0 ? 'stylecontent' : ''"
							:key="proIndex"
							:id="pros.productId"
							class="zuhe-list-content commodity-list"
						>
							<view class="list-details-info">
								<text class="list-details-title zuhe_list_text">商品编码：{{ pros.code }}</text>
								<text
									class="list-details-specs zuhe_list_text"
									@click.stop="navToDetailPage(pros.productId)"
									>{{ pros.name }}</text
								>
								<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">
												<view class="list-price-none" v-if="pros.repurchaseFlag == 1">
													<text class="price-none">价格：￥{{ pros.originalPrice }}</text>
													<text
														class="iconfont icon-wenhao"
														@click.stop="repurchModel"
													></text>
												</view>
												<view class="price-larger">价格：￥{{ pros.price | NumFormat }}</view>
											</view>
											<view class="zuhe_price-larger zuhe_list_text">
												<view class="floor-item-act" v-if="pros.actStatus == 1">
													<view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
													<template>
														<view
															class="floor-tags"
															v-if="PromotionsFormat(pros.promotions)"
														>
															{{ pros.promotions.name
															}}<text>:￥{{ pros.price | NumFormat }}</text>
														</view>
														<view class="floor-tags" v-else>{{
															pros.promotions.name
														}}</view>
													</template>
												</view>
												<view class="count">
													<view class="number-box">
														<view
															class="iconfont icon-jianhao"
															@click.stop="changeCountSub(item, pros)"
														></view>
														<input
															class="btn-input"
															type="number"
															maxlength="6"
															v-model="pros.initProductNum"
															@blur="changeNnmber($event, item, pros)"
														/>
														<view
															class="iconfont icon-jiahao"
															@click.stop="changeCountAdd(item, pros)"
														></view>
													</view>
												</view>
											</view>
											<view class="list-price-all" :style="{ overflow: 'hidden' }">
												<view class="price-two zuhe_list_text"
													>总价：<text class="zuhe_list_zj"
														>￥ {{ pros.totalPrice | NumFormat }}</text
													></view
												>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="foot_conten">
							<view class="zuhe_foot-box">
								<view class="">
									<text>种类：{{ item.productKind }}</text>
									<text>总数：{{ item.productTotalNum }}</text>
								</view>
								<text
									>总额：<text class="foot_text">{{
										item.productTotalAmount | NumFormat
									}}</text></text
								>
							</view>
							<button type="default" class="buycart" @click.stop="operationHanld(item)">
								加入购物车
							</button>
						</view>
					</view>
					<view v-if="showLoading && combinationProduct.length > 4 && !showRegularBtn">
						<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
							>{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
						>
						<view class="loading-wrapper loading-wrapper-btm" v-else
							>———<text class="btm-text">已至底部</text>———</view
						>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 可拖动悬浮按钮 -->
		<cm-drag
			:cartNum="cartQuantity"
			:isDock="true"
			:existTabBar="true"
			@btnClick="btnClick"
			@btnTouchstart="btnTouchstart"
			@btnTouchend="btnTouchend"
		>
		</cm-drag>
		<!-- 透明模态层 -->
		<modal-layer v-if="isModallayer"></modal-layer>
	</view>
</template>

<script>
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 { mapState, mapMutations } from 'vuex'
export default {
	name: 'productList',
	components: {
		listSkeleton,
		modalLayer,
		uniStars,
		cmDrag
	},
	props: {
		searchStatus: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isShowClose: false,
			searchInputVal: '',
			isModallayer: false,
			windowHeight: '',
			showSkeleton: false,
			priceLoading: true,
			isShowEmpty: false,
			isShowEmptyText: '搜索相关商品',
			clubUserId: '',
			identity: '',
			isFocus: false,
			scrollHeight: '',
			listData: [],
			combinationProduct: [],
			zuheProductList: [], //组合商品列表
			showLoading: false,
			loadingNow: true,
			loadingText: '上拉加载更多',
			pageSize: 20,
			zuhepageSize: 5,
			pageNum: 1,
			totalPage: 1,
			hasNextPage: false,
			pullFlag: true,
			fromRegularPurchasePage: false,
			cartQuantity: 0,
			showRegularBtn: false,
			isPrecedence: false,
			ladderPriceList: [], //是否 阶梯,
			tabIndex: 0,
			goodsList: [],
			tabBars: [{ name: '单一', id: 'danyi' }, { name: '组合', id: 'zuhe' }],
			isShow: false
		}
	},
	created() {
		this.setScrollHeight()
		this.$api
			.getComStorage('userInfo')
			.then(resolve => {
				if (resolve.userIdentity == 1) {
					this.identity = 1
				}
			})
			.catch(error => {
				console.log(error)
			})
		this.$api.getComStorage('orderUserInfo').then(resolve => {
			this.clubUserId = resolve.userID
		})
		this.getProductAgainInfo()
		this.isFocus = true
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		scrolltolower(tabIndex) {
			if (tabIndex == 0) {
				if (this.totalPage > this.listData.length && this.pullFlag) {
					this.getProductAgainInfo(true)
				}
			} else if (tabIndex == 1) {
				if (this.hasNextPage && this.pullFlag) {
					this.getcombinationProduct(true)
				}
			}
		},
		setScrollHeight() {
			const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
			this.windowHeight = windowHeight - 1
			this.scrollHeight = windowHeight - 1
		},
		getProductAgainInfo(loadMore) {
			this.showLoading = true
			this.priceLoading = true
			this.loadingNow = true
			this.loadingText = '加载中'
			this.isShowEmpty = false
			if (loadMore) {
				this.pageNum += 1
			}
			this.ProductService.GetProductSearchList({
				identity: this.identity,
				keyword: this.searchInputVal,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				sortField: '',
				sortType: ''
			})
				.then(response => {
					this.isShowWrapper = true
					const resData = JSON.parse(response.data)
					const resList = resData.items
					if (resList && resList.length > 0) {
						this.totalPage = resData.total
						this.showEmpty = false
						if (loadMore) {
							this.listData = [...this.listData, ...resList]
							this.getProductPrice()
						} else {
							this.listData = [...resList]
							this.getProductPrice()
							this.showSkeleton = false
						}
						// 防上拉暴滑
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						// 底部提示文案
						if (this.totalPage > this.listData.length) {
							this.loadingText = '上拉加载更多'
						} else {
							this.showLoading = true
							this.loadingNow = false
						}
					} else {
						if (!loadMore) {
							this.isShowEmpty = true
							this.isShowEmptyText = '暂无相关商品'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getProductPrice() {
			//获取商品或者活动价格
			let productIdArr = []
			let productIds = ''
			this.listData.map(item => {
				// 0公开价格 1不公开价格 2仅对资质机构公开
				productIdArr.push(item.productId)
			})
			productIds = productIdArr.join(',')
			this.ProductService.querySearchProductPrice({
				userId: this.clubUserId,
				productIds: productIds,
				source: 2
			})
				.then(response => {
					this.listData = this.ReturnNewProducts(this.listData, response.data)
					this.priceLoading = false
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		ReturnNewProducts(Array, list) {
			//合并字段
			let NewArray = []
			Array.map(item => {
				for (let i = 0; i < list.length; i++) {
					if (item.productId == list[i].productId) {
						NewArray.push(Object.assign(item, list[i]))
					}
				}
			})
			return NewArray
		},
		searchOpertor(tabIndex) {
			//搜索商品
			if (tabIndex == 0) {
				if (this.searchInputVal == '') {
					this.$util.msg('请输入商品关键词', 2000)
				} else {
					this.pageNum = 1
					this.showSkeleton = true
					this.getProductAgainInfo()
					this.isFocus = false
				}
			} else {
				this.pageNum = 1
				this.showSkeleton = true
				this.getcombinationProduct()
				this.isFocus = false
			}
		},
		getcombinationProduct(loadMore) {
			//组合搜索商品
			this.showLoading = true
			this.loadingNow = true
			this.loadingText = '加载中'
			this.isShowEmpty = false
			if (loadMore) {
				this.pageNum += 1
			}
			this.ProductService.GetSearchCombinationProduct({
				clubUserId: this.clubUserId,
				pageNum: this.pageNum,
				pageSize: this.zuhepageSize,
				searchWord: this.searchInputVal
			})
				.then(response => {
					this.isShowWrapper = true
					const responseData = response.data
					console.log(responseData)
					if (responseData.results && responseData.results.length > 0) {
						this.hasNextPage = responseData.hasNextPage
						this.isShowEmpty = false
						if (loadMore) {
							this.combinationProduct = [...this.combinationProduct, ...responseData.results]
						} else {
							this.combinationProduct = [...responseData.results]

							this.showSkeleton = false
						}
						// 防上拉暴滑
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						// 底部提示文案
						if (this.hasNextPage) {
							this.loadingText = '上拉加载更多'
						} else {
							this.showLoading = true
							this.loadingNow = false
						}
					} else {
						this.isShowEmpty = true
						this.isShowEmptyText = '暂无相关商品'
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		changeCountAdd(item, pros) {
			//商品数量加加
			if (pros.initProductNum == 0) {
				pros.initProductNum = pros.minBuyNumber
				this.processActivityPrice(pros)
			} else if (pros.initProductNum >= pros.minBuyNumber) {
				pros.initProductNum++
				this.processActivityPrice(pros)
			}
			this.totalPeice(item)
			this.totalCount(item)
			this.totalKind(item)
		},
		changeCountSub(item, pros) {
			//商品数量减减
			if (pros.initProductNum == 0) {
				this.$util.msg('采购数量不能小于0', 2000)
				return
			} else if (pros.initProductNum == pros.minBuyNumber) {
				pros.initProductNum = 0
				this.processActivityPrice(pros)
			} else {
				pros.initProductNum--
				this.processActivityPrice(pros)
			}
			this.totalPeice(item)
			this.totalCount(item)
			this.totalKind(item)
		},
		changeNnmber(e, item, pros) {
			//输入商品数量更新
			let _value = e.detail.value
			if (!this.$api.isNumber(_value)) {
				pros.initProductNum = pros.minBuyNumber
			} else if (_value < pros.minBuyNumber) {
				this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`, 2000)
				pros.initProductNum = pros.minBuyNumber
			} else {
				pros.initProductNum = parseInt(e.detail.value)
				this.processActivityPrice(pros)
			}
			this.totalPeice(item)
			this.totalCount(item)
			this.totalKind(item)
		},
		totalPeice(item) {
			//计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
			let prosPrice = 0
			let productsList = []
			productsList = item.combinationProductList
			productsList.forEach(pros => {
				prosPrice += pros.price * pros.initProductNum
				item.productTotalAmount = prosPrice
			})
			// console.log(prosPrice)
		},
		totalCount(item) {
			//计算总数量
			let prosAllCount = 0
			let productsList = []
			productsList = item.combinationProductList
			productsList.forEach(pros => {
				prosAllCount += parseInt(pros.initProductNum)
				item.productTotalNum = prosAllCount
			})
			// console.log(prosAllCount)
		},
		totalKind(item) {
			//计算商品种类
			let productsList = []
			let checkList = []
			productsList = item.combinationProductList
			productsList.forEach(pros => {
				if (pros.initProductNum > 0) {
					checkList.push(pros)
					item.productKind = checkList.length
				} else {
					item.productKind = checkList.length
				}
			})
		},
		processActivityPrice(pros) {
			//单独处理活动价格和阶梯价格
			let ladderPriceList = pros.ladderPrices
			if (pros.ladderPriceFlag == '0' || pros.actStatus == 1) {
				pros.totalPrice = pros.initProductNum * pros.price
			} else {
				ladderPriceList.forEach((item, index) => {
					if (pros.initProductNum >= item.buyNum) {
						pros.price = item.buyPrice
						pros.totalPrice = pros.initProductNum * item.buyPrice
					}
				})
			}
		},
		operationHanld(prop) {
			this.$emit('operationConfim', prop)
		},
		alertjieti(pros) {
			this.$emit('alertjietiConfim', pros)
		},
		changeTab(index) {
			this.tabIndex = index
			if (index == 0) {
				this.pageNum = 1
				this.getProductAgainInfo()
			} else {
				this.getcombinationProduct()
			}
			// this.$emit('changetab',index);
		},
		navToDetailPage(id) {
			this.isModallayer = true
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
			this.isModallayer = false
		},
		repurchModel() {
			this.$util.modal('', '此商品的价格有变化,原来的购买价已不适用', '知道了', '', false, () => {})
		},
		onShowClose() {
			//输入框失去焦点时触发
			if (this.searchInputVal != '') {
				this.isShowClose = true
			} else {
				this.isShowClose = false
			}
		},
		delInputText(tabIndex) {
			//清除输入框内容
			if (tabIndex == 0) {
				this.searchInputVal = ''
				this.listData = []
				this.isFocus = true
				this.isShowClose = false
				this.loadingNow = false
				this.isShowEmpty = true
				this.isShowEmptyText = '暂无相关商品'
			} else {
				this.searchInputVal = ''
				this.isShowClose = false
				this.isFocus = true
				this.getcombinationProduct()
			}
		},
		isInterceptHtmlFn(text) {
			let name = this.$reg.interceptHtmlFn(text)
			return name
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		btnClick() {
			this.$emit('goCartPage')
		},
		btnTouchstart() {
			// console.log('btnTouchstart');
		},
		btnTouchend() {
			// console.log('btnTouchend');
		}
	}
}
</script>

<style lang="scss">
.all-zuhe-list {
	background: #ffffff;
}
.foot_conten {
	width: 655rpx;
	background: #fff;
	font-size: 28rpx;
	height: 80rpx;
	// line-height: 80rpx;
	display: inherit;
	padding: 10px;
	overflow: hidden;
	margin: 20rpx auto;
}
.zuhe_foot-box {
	float: left;
	overflow: hidden;
	white-space: nowrap;
	// text-overflow: ellipsis;
	width: 490rpx;
}
.zuhe_foot-box text {
	margin-right: 36rpx;
}
.foot_text {
	color: #ff2a2a;
}
.foot_conten .buycart {
	width: 162rpx;
	height: 64rpx;
	background: #efaf00 !important;
	color: #fff;
	font-size: 26rpx;
	border-radius: 36rpx;
	text-align: center;
	line-height: 64rpx;
	float: right;
}
.price-none {
	font-size: 24rpx;
	color: #666666;
}
.zuhe_title {
	background: #ffffff;
	height: 76rpx;
	font-size: 28rpx;
	color: #1675e1;
	border-bottom: 4rpx solid #1675e1;
	line-height: 76rpx;
	padding-left: 30rpx;
	&.active {
		color: #e15616;
		border-bottom: 4rpx solid #e15616;
	}
}
.tabstyle {
	width: 128rpx;
	height: 76rpx;
	font-size: 26rpx;
	display: inline-block;
	border-radius: 10rpx;
	text-align: center;
	line-height: 76rpx;
	border: 2rpx solid #eeeeee;
	position: relative;
	margin-right: 12rpx;
	&.addstyle {
		background: $btn-confirm;
		color: #ffffff;
		&::before {
			content: '';
			width: 0;
			height: 0;
			border-top: 20rpx solid transparent;
			border-right: 20rpx solid #ffffff;
			border-left: 20rpx solid transparent;
			border-bottom: 20rpx solid #ffffff;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
	.icon-gou {
		width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		color: #e15616;
		position: absolute;
		bottom: -5rpx;
		right: -5rpx;
		font-weight: bold;
		font-size: $font-size-28;
	}
}
.commodity-list-wrapper {
	scroll-view {
		height: 100%;
	}
	.show-more-btn {
		width: 276rpx;
		height: 52rpx;
		line-height: 52rpx;
		border: 2rpx solid #d8d8d8;
		background: #f7f7f7;
		font-size: 26rpx;
		margin: 26rpx 0;
		position: absolute;
		left: 50%;
		margin-left: -138rpx;
	}
}
.good-search {
	height: 80rpx;
	width: 100%;
	padding: 24rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 19;
	.search-from {
		width: 420rpx;
		height: 80rpx;
		background: #f7f7f7;
		border-radius: 40rpx;
		float: left;
		position: relative;
		.input {
			width: 340rpx;
			height: 80rpx;
			float: left;
			line-height: 80rpx;
			color: $text-color;
			font-size: $font-size-24;
		}
		.icon-iconfonticonfontsousuo1 {
			width: 64rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			display: block;
			font-size: $font-size-38;
			float: left;
			color: #999999;
		}
		.icon-shanchu1 {
			font-size: $font-size-32;
			color: #999999;
			position: absolute;
			width: 120rpx;
			height: 80rpx;
			line-height: 80rpx;
			top: 0;
			right: 0;
			text-align: center;
			z-index: 10;
		}
	}
	.search-btn {
		// width: 120rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: $font-size-28;
		color: $color-system;
		float: left;
		background: #ffffff;
		margin-left: 10rpx;
	}
}
.all-type-list-content {
	// height: 240rpx;
	padding: 24rpx;
	background: #fff;
	margin-bottom: 2rpx;
	display: flex;
	flex-direction: row;
	box-sizing: content-box;
	.list-img {
		width: 312rpx;
		height: 207rpx !important;
		margin-right: 26rpx;
		border-radius: 10rpx;
		border: 2rpx solid #f3f3f3;
	}
}
.zuhe-list-content {
	width: 655rpx;
	// height: 214rpx;
	background: #fff;
	border: 2rpx solid #def4ff;
	display: flex;
	flex-direction: row;
	box-sizing: content-box;
	margin-top: 10rpx;
	border-radius: 14rpx;
	margin: 10rpx auto;
	padding: 20rpx;
	&.stylecontent {
		border: 2rpx solid #fff0de;
	}
}

.list-details-info {
	width: 100%;
	flex-direction: column;
	font-size: 26rpx;
	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;
	}
	.list-details-specs {
		width: 100%;
		display: inline-block;
		margin: 5rpx 0;
		color: #666666;
	}
	.list-details-miniQuantity {
		width: 100%;
		display: inline-block;
		margin-top: 7rpx;
	}
}
.list-details-price {
	width: 100%;
	.floor-item-act {
		height: 54rpx;
		text-align: center;
		box-sizing: border-box;
		float: left;
		padding: 11rpx 0;
		.floor-tags {
			height: 32rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			background-color: #ffffff;
			line-height: 28rpx;
			color: $color-system;
			text-align: center;
			display: inline-block;
			padding: 0 16rpx;
			font-size: $font-size-20;
			border: 1px solid #e15616;
			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;
		.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: 15rpx;
		.price-small {
			font-size: $font-size-24;
			line-height: 40rpx;
			color: #ff2a2a;
		}
	}
	.list-price-loding {
		font-size: $font-size-24;
		line-height: 54rpx;
		color: #ff2a2a;
	}
	.list-shop {
		float: left;
		overflow: hidden;
		&.com {
			width: 100%;
		}
		.list-price {
			color: #ff2a2a;
			float: left;
			line-height: 54rpx;
			align-items: center;
			justify-content: center;
			.price-larger {
				font-size: $font-size-26;
				display: inline-block;
				&.none {
					text-decoration: line-through;
					color: #999999;
				}
			}
			.list-price-all {
				width: 100%;
				float: left;
			}
			.zuhe_price-larger {
				width: 100%;
				float: left;
				height: 54rpx;
				color: #666666;
				.price-larger {
					float: left;
					margin-right: 20rpx;
				}
			}
			.price-two {
				color: #666666;
				float: left;
			}
			.zuhe_list_zj {
				color: #ff2a2a;
			}
			.price-view {
				display: inline-block;
				width: 40rpx;
				border-radius: 10rpx;
				font-size: $font-size-22;
				text-align: center;
				color: #ffffff;
				height: 36rpx;
				line-height: 36rpx;
				margin-right: 8rpx;
				&.ladder {
					background: linear-gradient(135deg, rgba(255, 0, 0, 1) 0%, rgba(242, 143, 49, 1) 100%);
				}
				&.activity {
					background: linear-gradient(135deg, rgba(128, 0, 255, 1) 0%, rgba(242, 49, 153, 1) 100%);
				}
			}
		}
		.zuhe_list_price .price-view {
			margin-left: 20rpx;
			float: left;
			margin-top: 5rpx;
		}
		.zuhe_list_price {
			width: 100%;
			overflow: hidden;
			margin-top: 10rpx;
		}
		.count {
			float: right;
			border: 1px solid #eeeeee;
			border-radius: 10rpx;
			.number-box {
				display: flex;
				justify-content: center;
				align-items: center;
				.iconfont {
					font-size: $font-size-24;
					padding: 0 16rpx;
					color: $text-color;
					text-align: center;
					line-height: 48rpx;
					font-weight: bold;
				}
				.btn-input {
					width: 100rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #f8f8f8;
					border-radius: 4rpx;
					text-align: center;
					font-size: $font-size-24;
					border-right: 1px solid #eeeeee;
					border-left: 1px solid #eeeeee;
				}
			}
		}
		.list-price-none {
			width: 100%;
			.price-none {
				text-decoration: line-through;
				color: #999999;
				display: inline-block;
			}
			.icon-wenhao {
				font-size: $font-size-32;
				color: #0091ff;
				margin-left: 6rpx;
			}
		}
	}
	.add-cart-btn {
		flex: 4;
		width: 140rpx;
		height: 54rpx;
		line-height: 54rpx;
		border-radius: 27rpx;
		color: #fff;
		font-size: 24rpx;
		margin-right: 0;
		background: #ffffff;
		border: 1px solid #c9c9c9;
		color: $text-color;
	}
	.zuhe_btn {
		float: right;
	}
}
.zuhe_list_price {
	display: block !important;
}
.zuhe_list_text {
	margin-top: 0;
}
</style>