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(item, key)" :class="key === hotIndex ? 'act' : ''">
					<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 && val.goods_list.length > 0" 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(){
			if(this.wrapper_props.cate_list){
				this.cate_list.map((item, index) => {
					if(item.goods_list && item.goods_list.length > 0){
						let temp = item.goods_list.filter((item) => item.if_show == 1 && item.closed == 0);
						item.goods_list = temp;
					}
				});
			}
		},
		methods: {
			changeCate(item, index) {
				const {cate_id} = item;
				const {sortType} = this.wrapper_props.style_setting;
				this.hotIndex = index;
				let _this = this;
				if(this.cate_list[index].goods_list && this.cate_list[index].goods_list.length > 0){
					return;
				}
				uni.showLoading({title: '商品加载中~'});
				uni.request({
					url: '/uni/api/index/get_hot_recommd',
					method: 'POST',
					dataType: 'json',
					data: {
						cate_id: cate_id,
						goods_num: "10",
						sort_type: sortType ? sortType.toString() : "2"
					},
					success:function(res){
						uni.hideLoading();
						const {code, data} = res.data;
						let goods = data && data.filter((item) => item.if_show == 1 && item.closed == 0)
						if(code === 0){
							_this.$set(_this.cate_list[index], 'goods_list', goods || []);
							return;
						}
						_this.$set(_this.cate_list[index], 'goods_list', []);
					}
				})
			}
		}
	}
</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;
		height: 400rpx;
		line-height: 650rpx;
		font-size: 30rpx;
		color: #808080;
		text-align: center;
		background: url(data:image;base64,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) no-repeat center;
		background-size: 200rpx;
	}
	.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>