caimei-applets-caimei/pages/supplier/user/my-shop.vue

<template>
	<view class="container shop clearfix" :style="{ paddingTop: CustomBar + 'px' }">
		<!-- 主页内容 -->
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<template v-else>
			<view class="shop-search-main">
				<view class="shop-search">
					<text class="iconfont icon-sousuo"></text>
					<input
						class="input"
						maxlength="20"
						type="text"
						value=""
						@focus="onFocus"
						@input="onShowClose"
						v-model.trim="listQuery.keyword"
						confirm-type="search"
						@confirm="SubMitSearch()"
						placeholder="搜索本店铺商品"
					/>
					<text class="iconfont icon-shanchu1" v-if="isShowClose" @click.stop="delInputText()"></text>
				</view>
			</view>
			<view class="container-shop tui-skeleton">
				<!-- 轮播 -->
				<view class="product-supplier" @click="goSupplier">
					<view class="logo"
						><img
							:src="shopLogo ? shopLogo : 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'"
							alt=""
					/></view>
					<view class="main">
						<view class="name">{{ shopName }}</view>
						<view class="massgs">
							<view class="label">满意度:</view>
							<view class="p-stars">
								<uni-stars
									:stars="6"
									:iconClass="iconClass"
									:iconColor="iconColor"
									:fontSize="36"
									:widthInfo="176"
								></uni-stars>
							</view>
							<view class="acount">
								<text> {{ normalNum }} </text>件商品
							</view>
						</view>
					</view>
					<view class="right"><text class="iconfont icon-xiayibu"></text></view>
				</view>
				<banner :list="bannerImageList"></banner>
			</view>
			<view class="container-section tui-skeleton" v-if="!isEmpty">
				<view class="tab-title">主推商品</view>
				<view class="section-product clearfix">
					<view class="floor-item-none" v-if="isHomeProduct">
						<image class="none-image" :src="iconNoneData" mode=""></image>
						<view class="none-text">暂无主推商品~</view>
					</view>
					<view
						v-else
						class="floor-item"
						v-for="(prop, index) in recommendList"
						:key="index"
						@click.stop="navToDetailPage(prop.productId)"
					>
						<image class="item-img tui-skeleton-fillet" :src="prop.image" mode="aspectFill"></image>
						<view class="floor-item-content">
							<view class="title tui-skeleton-rect">
								<text class="mclap-tag" v-if="prop.beautyActFlag == '1'">美博会</text>
								<text class="mclap" :class="prop.beautyActFlag == '1' ? 'indent' : ''">{{
									prop.name
								}}</text>
							</view>
							<view class="floor-item-act">
								<template v-if="userIdentity === 3">
									<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
									<template v-if="prop.actStatus === 1">
										<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
											{{ prop.promotions.name }}
											<text v-if="hasLogin && prop.priceFlag != 1 && prop.shopId == shopId"
												>:￥{{ prop.price | NumFormat }}</text
											>
										</view>
										<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
									</template>
									<template v-if="prop.svipProductFlag == 1">
										<template v-if="prop.priceFlag != 1">
											<view class="svip-tags">
												<view class="tags">SVIP</view>
												<view class="price" v-if="prop.shopId == shopId">{{
													prop.svipPriceTag
												}}</view>
											</view>
										</template>
										<template v-else>
											<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
										</template>
									</template>
								</template>
								<template v-else>
									<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
									<template v-if="prop.actStatus === 1">
										<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
											{{ prop.promotions.name }}
											<text v-if="hasLogin && prop.priceFlag != 1"
												>:￥{{ prop.price | NumFormat }}</text
											>
										</view>
										<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
									</template>
									<template v-if="prop.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>
								</template>
							</view>
							<view class="" v-if="hasLogin">
								<template v-if="userIdentity == 3">
									<template v-if="prop.shopId == shopId">
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-else
											:class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
													| NumFormat
											}}</text>
										</view>
									</template>
									<template v-else>
										<view class="no-price">
											<view class="p-stars">
												<text class="p-no">￥</text>
												<uni-grader :grade="Number(prop.priceGrade)" :margin="14"></uni-grader>
											</view>
										</view>
									</template>
								</template>
								<template v-else-if="userIdentity === 4">
									<view class="title-none" v-if="prop.priceFlag === 1">
										<text class="p big">￥未公开价格</text>
									</view>
									<view class="title-none" v-if="prop.priceFlag === 2">
										<text class="p big">￥价格仅会员可见</text>
									</view>
									<view
										class="price tui-skeleton-rect"
										v-if="prop.priceFlag === 0"
										:class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
									>
										<text class="p sm">￥</text>
										<text class="p big">{{
											(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
												| NumFormat
										}}</text>
									</view>
								</template>
								<template v-else>
									<view class="title-none" v-if="prop.priceFlag === 1">
										<text class="p big">￥未公开价格</text>
									</view>
									<view
										class="price tui-skeleton-rect"
										v-else
										:class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
									>
										<text class="p sm">￥</text>
										<text class="p big">{{
											(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
												| NumFormat
										}}</text>
									</view>
								</template>
							</view>
							<view v-else class="no-price">
								<view class="p-stars">
									<text class="p-no">￥</text>
									<uni-grader :grade="Number(prop.priceGrade)"></uni-grader>
									<template v-if="prop.actStatus == 1">
										<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
											{{ prop.promotions.name
											}}<text v-if="hasLogin && prop.priceFlag != 1"
												>:￥{{ prop.price | NumFormat }}</text
											>
										</view>
										<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
									</template>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="container-section tui-skeleton">
				<view class="tab-title" v-if="!isEmpty">全部商品</view>
				<view class="section-product clearfix">
					<view class="floor-item-none" v-if="isEmpty">
						<image class="none-image" :src="iconNoneData1" mode=""></image>
						<view class="none-text">暂未发布任何商品~</view>
					</view>
					<view
						v-else
						class="floor-item"
						v-for="(prop, index) in productList"
						:key="index"
						@click.stop="navToDetailPage(prop.productId)"
					>
						<image class="item-img tui-skeleton-fillet" :src="prop.image" mode="aspectFill"></image>
						<view class="floor-item-content">
							<view class="title tui-skeleton-rect">
								<text class="mclap-tag" v-if="prop.priceFlag == '1'">美博会</text>
								<text class="mclap" :class="prop.priceFlag == '1' ? 'indent' : ''">{{
									isInterceptHtmlFn(prop.name)
								}}</text>
							</view>
							<view class="floor-item-act">
								<template v-if="userIdentity === 3">
									<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
									<template v-if="prop.actStatus === 1">
										<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
											{{ prop.promotions.name }}
											<text v-if="hasLogin && prop.priceFlag != 1 && prop.shopId == shopId"
												>:￥{{ prop.price | NumFormat }}</text
											>
										</view>
										<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
									</template>
									<template v-if="prop.svipProductFlag == 1">
										<template v-if="prop.priceFlag != 1">
											<view class="svip-tags">
												<view class="tags">SVIP</view>
												<view class="price" v-if="prop.shopId == shopId">{{
													prop.svipPriceTag
												}}</view>
											</view>
										</template>
										<template v-else>
											<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
										</template>
									</template>
								</template>
								<template v-else>
									<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
									<template v-if="prop.actStatus === 1">
										<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
											{{ prop.promotions.name }}
											<text v-if="hasLogin && prop.priceFlag != 1"
												>:￥{{ prop.price | NumFormat }}</text
											>
										</view>
										<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
									</template>
									<template v-if="prop.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>
								</template>
							</view>
							<view class="" v-if="hasLogin">
								<template v-if="userIdentity == 3">
									<template v-if="prop.shopId == shopId">
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-else
											:class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
													| NumFormat
											}}</text>
										</view>
									</template>
									<template v-else>
										<view class="no-price">
											<view class="p-stars">
												<text class="p-no">￥</text>
												<uni-grader :grade="Number(prop.priceGrade)" :margin="14"></uni-grader>
											</view>
										</view>
									</template>
								</template>
								<template v-else-if="userIdentity === 4">
									<view class="title-none" v-if="prop.priceFlag === 1">
										<text class="p big">￥未公开价格</text>
									</view>
									<view class="title-none" v-if="prop.priceFlag === 2">
										<text class="p big">￥价格仅会员可见</text>
									</view>
									<view
										class="price tui-skeleton-rect"
										v-if="prop.priceFlag === 0"
										:class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
									>
										<text class="p sm">￥</text>
										<text class="p big">{{
											(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
												| NumFormat
										}}</text>
									</view>
								</template>
								<template v-else>
									<view class="title-none" v-if="prop.priceFlag === 1">
										<text class="p big">￥未公开价格</text>
									</view>
									<view
										class="price tui-skeleton-rect"
										v-else
										:class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
									>
										<text class="p sm">￥</text>
										<text class="p big">{{
											(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
												| NumFormat
										}}</text>
									</view>
								</template>
							</view>
							<view v-else class="no-price">
								<view class="p-stars">
									<text class="p-no">￥</text>
									<uni-grader :grade="Number(prop.priceGrade)"></uni-grader>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 侧边 -->
		<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import banner from '@/components/cm-module/supplier/banner.vue'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'

export default {
	components: {
		banner,
		uniGrader
	},
	data() {
		return {
			userID: 0,
			supplierId: 0,
			shopId: 0,
			iconClass: 'icon-aixin',
			iconColor: '#ff9100',
			iconNoneData: 'https://static.caimei365.com/app/img/icon/icon-prnone.png',
			iconNoneData1: 'https://static.caimei365.com/app/img/icon/icon-pbnone.png',
			isScrollTop: false,
			shopName: '',
			shopLogo: '',
			normalNum: 0,
			isFocus: false,
			isEmpty: false,
			isShowClose: false, //是否显示清空输入框图标
			skeletonShow: true,
			bannerImageList: [],
			recommendList: [],
			productList: [],
			userIdentity: '',
			listQuery: {
				keyword: '',
				pageSize: 10,
				pageNum: 1,
				id: 0
			},
			isHomeProduct: false,
			total: 0
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'isActivity', 'identity', 'isWxAuthorize'])
	},
	onLoad(option) {
		if (option.type == 'share') {
			wxLogin.wxLoginAuthorize()
		}
		this.listQuery.id = this.supplierId = option.shopId
		this.initGetStotage()
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async initGetStotage(option) {
			const userInfo = await this.$api.getStorage()
			this.shopId = userInfo.shopId ? userInfo.shopId : 0
			this.userID = userInfo.userId ? userInfo.userId : 0
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			//初始化请求数据
			this.GetSupplierHomeBanner()
			this.GetSupplierHomeDeatils()
			this.GetSupplierHomeProduct()
			this.GetSupplierHomeProductList()
			this.skeletonShow = false
		},
		GetSupplierHomeBanner() {
			//轮播图
			this.ShopService.GetSupplierHomeBanner({ shopId: this.supplierId })
				.then(response => {
					this.bannerImageList = response.data
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetSupplierHomeDeatils() {
			//商铺详情
			this.ShopService.GetSupplierHomeDeatils({ shopId: this.supplierId })
				.then(response => {
					let data = response.data
					this.normalNum = data.normalNum
					this.shopName = data.name
					this.shopLogo = data.logo
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetSupplierHomeProduct() {
			//主推商品
			this.ShopService.GetSupplierHomeProduct({ shopId: this.supplierId, identity: this.identity })
				.then(response => {
					let data = response.data
					console.log('主推商品', data)
					if (data.length > 0) {
						this.isHomeProduct = false
						this.QueryProductPrice(data)
					} else {
						this.isHomeProduct = true
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetSupplierHomeProductList() {
			//全部商品
			this.ShopService.GetSupplierHomeProductList(this.listQuery)
				.then(response => {
					let data = JSON.parse(response.data)
					console.log('全部商品', data)
					let dataList = data.items
					this.total = data.total
					if (this.total > 0) {
						this.isEmpty = false
						this.productList = dataList
						this.QueryProductPrice1(this.productList)
					} else {
						this.isEmpty = true
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetMoreSupplierHomeProductList() {
			//加载分页
			this.listQuery.pageNum += 1
			this.ShopService.GetSupplierHomeProductList(this.listQuery)
				.then(response => {
					let data = JSON.parse(response.data)
					this.total = data.total
					this.productList = this.productList.concat(data.items)
					this.QueryProductPrice1(this.productList)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		QueryProductPrice(data) {
			//处理主推商品商品或者活动价格
			let productIdArr = []
			let productIds = ''
			data.map(item => {
				// 0公开价格 1不公开价格 2仅对资质机构公开
				productIdArr.push(item.productId)
			})
			productIds = productIdArr.join(',')
			this.ProductService.querySearchProductPrice({
				userId: this.userID,
				productIds: productIds,
				source: 2
			})
				.then(response => {
					this.recommendList = this.ReturnNewProducts(data, response.data)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		QueryProductPrice1(data) {
			//获取商品或者活动价格
			let productIdArr = []
			let productIds = ''
			data.map(item => {
				// 0公开价格 1不公开价格 2仅对资质机构公开
				productIdArr.push(item.productId)
			})
			productIds = productIdArr.join(',')
			this.ProductService.querySearchProductPrice({
				userId: this.userID,
				productIds: productIds,
				source: 2
			})
				.then(response => {
					this.productList = this.ReturnNewProducts(data, response.data)
					console.log('合并价格后', this.productList)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		ReturnNewProducts(listA, listB) {
			let NewArray = []
			listA.map(item => {
				for (let i = 0; i < listB.length; i++) {
					if (item.productId == listB[i].productId) {
						NewArray.push(Object.assign(item, listB[i]))
					}
				}
			})
			return NewArray
		},
		SubMitSearch() {
			//搜索
			this.listQuery.pageNum = 1
			this.GetSupplierHomeProductList()
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		onShowClose() {
			//输入框输入时触发
			this.inputEmpty(this.listQuery.keyword)
		},
		onFocus() {
			//输入框获取焦点时触发
			this.inputEmpty(this.listQuery.keyword)
		},
		delInputText() {
			//清除输入框内容
			this.listQuery.keyword = ''
			this.isShowClose = false
			this.isShowWrapper = false
			this.inputEmpty(this.listQuery.keyword)
			this.initGetSerachRecord()
		},
		inputEmpty(val) {
			if (val != '') {
				this.isShowClose = true
				this.isFocus = true
			} else {
				this.isShowClose = false
				this.isFocus = true
			}
		},
		isInterceptHtmlFn(text) {
			let name = this.$reg.interceptHtmlFn(text)
			return name
		},
		goSupplier() {
			//跳供应商资料页
			this.$api.navigateTo('/pages/supplier/user/supplier?shopId=' + this.supplierId)
		},
		navToDetailPage(id) {
			//跳转商品详情页
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
		},
		isShowVipFlag(pros) {
			// 超级会员价格显示控制
			if (this.hasLogin && pros.priceFlag != 1) {
				if (this.userIdentity == 1 || (this.userIdentity == 4 && this.vipFlag == 1)) {
					return true
				} else if (this.userIdentity == 2) {
					return true
				}
			}
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		if (e.scrollTop > 400) {
			this.isScrollTop = true
		} else {
			this.isScrollTop = false
		}
	},
	onPullDownRefresh() {
		//下拉刷新
		this.listQuery.pageNum = 1
		this.productList = []
		this.InitShopDataInfo()
		uni.stopPullDownRefresh()
	},
	onReachBottom() {
		//上滑加载分页
		if (this.total > this.productList.length) {
			this.loadding = true
			this.pullUpOn = true
			this.GetMoreSupplierHomeProductList()
		}
	},
	onShareAppMessage(res) {
		//分享转发
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '进入店铺，发现惊喜',
			path: `pages/supplier/user/my-shop?type=share&shopId=${this.listQuery.id}`
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.shop {
	width: 100%;
	height: auto;
}
.shop-search-main {
	width: 100%;
	height: 86rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 10rpx 24rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	.shop-search {
		width: 100%;
		height: 66rpx;
		border-radius: 33rpx;
		background-color: #f7f7f7;
		box-sizing: border-box;
		position: relative;
		.icon-sousuo {
			width: 80rpx;
			height: 66rpx;
			display: block;
			float: left;
			color: #707070;
			line-height: 66rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.icon-shanchu1 {
			width: 80rpx;
			height: 66rpx;
			display: block;
			color: #8a8a8a;
			line-height: 66rpx;
			text-align: center;
			font-size: 36rpx;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 100;
		}
		.input {
			width: 580rpx;
			height: 66rpx;
			box-sizing: border-box;
			color: #666666;
			overflow: hidden;
			font-size: $font-size-24;
		}
	}
}
.container-shop {
	width: 100%;
	height: auto;
	padding: 24rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	margin-top: 96rpx;
}
.product-supplier {
	width: 100%;
	height: 140rpx;
	padding: 30rpx 0 10rpx 0;
	box-sizing: border-box;
	background-color: #ffffff;
	position: relative;
	box-sizing: border-box;
	.logo {
		width: 128rpx;
		height: 92rpx;
		float: left;
		border: 1px solid #efefef;
		border-radius: 6rpx;
		image {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 6rpx;
		}
	}
	.main {
		width: 470rpx;
		height: 92rpx;
		float: left;
		margin-left: 20rpx;
		.name {
			width: 100%;
			line-height: 46rpx;
			float: left;
			font-size: $font-size-28;
			color: $text-color;
			float: right;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: left;
		}
		.massgs {
			width: 100%;
			line-height: 46rpx;
			float: left;
			font-size: $font-size-24;
			color: #999999;
			.label {
				float: left;
			}
			.p-stars {
				float: left;
				margin-left: 20rpx;
			}
			.acount {
				float: right;
				text {
					color: $color-system;
				}
			}
		}
	}
	.icon-xiayibu {
		line-height: 154rpx;
		display: inline-block;
		position: absolute;
		width: 48rpx;
		top: 0;
		right: 0;
		color: #b2b2b2;
	}
}
.container-section {
	width: 100%;
	height: auto;
	background-color: #f7f7f7;
	box-sizing: border-box;
	padding: 0 24rpx;
	.tab-title {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: $font-size-30;
		font-weight: bold;
	}
	.section-product {
		width: 100%;
		height: auto;
		.floor-item-none {
			min-height: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.none-image {
				width: 260rpx;
				height: 260rpx;
			}
			.none-text {
				text-align: center;
				font-size: $font-size-28;
				color: #999999;
				line-height: 40rpx;
			}
		}
		.floor-item {
			width: 341rpx;
			height: auto;
			margin-right: 20rpx;
			font-size: $font-size-24;
			color: $text-color;
			background: #ffffff;
			line-height: 36rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			float: left;
			box-sizing: border-box;
			padding-bottom: 10rpx;
			&:nth-child(2n) {
				margin-right: 0;
			}
			.item-img {
				width: 341rpx;
				height: 341rpx;
				border-radius: 20rpx 20rpx 0 0;
				display: block;
				margin-bottom: 20rpx;
			}
			.floor-item-content {
				width: 311rpx;
				padding: 0 15rpx;
			}
			.floor-item-act {
				display: block;
				width: 100%;
				height: 68rpx;
				text-align: center;
				box-sizing: border-box;
				padding: 16rpx 0;
				margin-top: 8rpx;
			}
			.title-none {
				font-size: $font-size-26;
				color: #ff2a2a;
				line-height: 54rpx;
				.btn {
					display: inline-block;
					float: right;
					width: 112rpx;
					height: 44rpx;
					background: $btn-confirm;
					line-height: 44rpx;
					font-size: $font-size-24;
					color: #ffffff;
					text-align: center;
					border-radius: 22rpx;
					margin-top: 17rpx;
				}
			}
			.title {
				width: 100%;
				height: 72rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 15rpx;
				padding: 0;
				position: relative;
				.mclap {
					width: 100%;
					line-height: 40rpx;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 26rpx;
					&.indent {
						text-indent: 95rpx;
					}
				}
				.mclap-tag {
					display: block;
					width: 84rpx;
					height: 32rpx;
					background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
					border-radius: 4rpx 48rpx 4px 4px;
					line-height: 32rpx;
					font-size: $font-size-22;
					color: #ffffff;
					text-align: center;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
			.no-price {
				height: 54rpx;
				line-height: 54rpx;
				display: flex;
				box-sizing: border-box;
				.p-no {
					font-size: $font-size-30;
					color: $text-color;
					display: block;
					float: left;
				}
				.p-stars {
					float: left;
				}
			}
			.price {
				color: #ff2a2a;
				line-height: 54rpx;
				&.none {
					text-decoration: line-through;
					color: #999999;
				}
				.sm {
					font-size: $font-size-24;
				}
				.big {
					font-size: $font-size-28;
				}
			}
		}
	}
}
</style>