hotrecommd.vue

<template>
	<view class="hot_main_content" :style="[fixFlag ? {'padding-top': '100rpx'} : null]" ref="fix">
		<view class="clearfix scrollbar" :class="{'fixed': fixFlag}">
			<view class="hot_head_left">
				<view>
					<text class="hot_title">
						<i v-if="style_setting.icon_url_show" class="hot_icon" :style="{'background-image':'url('+style_setting.icon_url+')'}"></i>
						{{style_setting.title}}
					</text>
					<text class="hot_sub_title">{{style_setting.sub_title}}</text>
				</view>
			</view>
			<view class="hot_cate_list" :style="[fixFlag ? {'padding-right': '60rpx'} : null]">
				<text class="hot_cate_item" v-for="(item, key) in cate_list" :key="key" @click="changeCate(key)" :class="key === hotIndex ? 'act' : ''" v-if="item.goods_list.length">
					<text>{{item.cate_name}}</text>
					<text>{{item.sub_title}}</text>
				</text>
			</view>
		</view>
		<view v-for="(val, key) in cate_list" :key="key" v-if="key === hotIndex">
			<view v-if="val.goods_list" class="flex_goods">
				<view class="hot_goods_item" v-for="(item, index) in val.goods_list" :key="index">
					<image class="hot_goods_icon" v-if="style_setting.angle_sign" :src="style_setting.angle_sign_url"></image>
					<image class="hot_goods_img" :src="item.default_image || $noGoodsImg" @click="$jumpGoodDetail(item.goods_id)"></image>
					<text class="hot_goods_name" v-if="style_setting.title_show">{{item.goods_name}}</text>
					<text class="hot_goods_subname" v-if="style_setting.sub_title_show">{{item.goods_subname || '　'}}</text>
					<view class="between_price">
						<view class="between_left" v-if="style_setting.price_show">
							<text class="hot_pro_price" v-if="isLogin">￥{{item.price}}</text>
							<!-- <text class="hot_price">￥{{item.price}}</text> -->
							<text class="hot_pro_price" v-else>登录显示价格</text>
						</view>
						<i class="eosfont hot_cart_icon" v-if="style_setting.cart_show" @click="$addCart(item.spec_id, 1,isLogin)">&#xe7e6;</i>
					</view>
				</view>
			</view>
			<view v-else class="nogoods">暂无此类商品</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			wrapper_props: {
				type: Object
			},
			isLogin: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				style_setting: this.wrapper_props.style_setting,
				cate_list: this.wrapper_props.cate_list,
				hotIndex: 0,
				fixFlag: false
			}
		},
		mounted() {
			var flag = true;
			this.cate_list.map((item, index) => {
				if(item.goods_list.length && flag) {
					this.hotIndex = index;
					flag = false;
				}
			});
		},
		methods: {
			changeCate(index) {
				this.hotIndex = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.clearfix::after {
		content: "";
		display: block;
		height: 0;
		clear:both;
		visibility: hidden;
	}
	.hot_main_content {
		width: 702rpx;
		margin: 0 auto;
		.scrollbar {
			padding: 28rpx 0 20rpx;
		}
		.fixed {
			position: fixed;
			left: 0;
			top: 100rpx;
			background-color: #f8f8f8;
			z-index: 10;
			width: 100%;
			padding: 28rpx 24rpx 20rpx;
			box-shadow:0px 4px 16px 0px rgba(0,0,0,0.3);
		}
	}
	.hot_head_left {
		display: inline-block;
		float: left;
	}
	.hot_icon {
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 8rpx;
	}
	.hot_title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 500;
		color: #464646;
		line-height: 44rpx;
		display: block;
	}
	.hot_sub_title {
		font-size: 22rpx;
		color: #7c7c7c;
		line-height: 32rpx;
		display: block;
	}
	.hot_cate_list {
		white-space: nowrap;
		overflow: scroll;
		position: relative;
		left: 20rpx;
		height: 88rpx;
		padding-right: 18rpx;
	}
	.hot_cate_list::-webkit-scrollbar {
		display: none;
	}
	.hot_cate_item {
		width: 164rpx;
		display: inline-block;
		text-align: center;
		position: relative;
		margin-left: 10rpx;
		text:nth-of-type(1) {
			display: block;
			font-family: PingFangSC-Medium,PingFang SC;
			font-weight: 500;
			color: #464646;
			font-size: 32rpx;
		}
		text:nth-of-type(2) {
			display: block;
			font-size: 22rpx;
			color: #7C7C7C;
		}
	}
	.hot_cate_item.act::after {
		content: '';
		width: 40rpx;
		height: 2px;
		border-radius: 1px;
		background: #000;
		position: absolute;
		left: 50%;
		margin-left: -20rpx;
		bottom: -8rpx;
	}
	.nogoods {
		padding: 40rpx;
		text-align: center;
	}
	.flex_goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.hot_goods_item {
			position: relative;
			width: 346rpx;
			text-align: center;
			margin-bottom: 20rpx;
			background: #fff;
			padding: 32rpx 0 24rpx;
			border-radius: 16rpx;
			.hot_goods_icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 80rpx;
				height: 80rpx;
				z-index: 2;
			}
			.hot_goods_img {
				width: 280rpx;
				height: 280rpx;
			}
			.hot_goods_name, .hot_goods_subname {
				width: 280rpx;
				display: block;
				text-align: left;
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 0 auto;
			}
			.hot_goods_name {			
				color: #212121;
				margin-top: 16rpx;
			}
			.hot_goods_subname {
				color: #6e6e6e;
			}
		}
		.between_price {
			position: relative;
			width: 280rpx;
			height: 44rpx;
			margin: 12rpx auto 0;
			.between_left {
				position: absolute;
				left: 0;
			}
			text {
				display: block;
				text-align: left;
			}
			.hot_pro_price {
				font-size: 32rpx;
				font-family: PingFangSC-Regular,PingFang SC;
				font-weight: 400;
				color: #c3a070;
			}
			.hot_price {
				font-size: 24rpx;
				font-family: PingFangSC-Light,PingFang SC;
				font-weight: 300;
				color: #aeaeae;
				text-decoration: line-through;
			}
			.hot_cart_icon {
				font-size: 30rpx;
				position: absolute;
				right: 0;
				top: 6rpx;
			}
		}
	}
</style>