caimei-applets-caimei/components/cm-module/productDetails/secondRecommend.vue

<template name="recommend">
	<!-- 供应商信息 -->
	<view class="recommend clearfix">
		<view class="recommend-empty" v-if="isEmpty">
			<image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/recmmmd.png"></image>
			<text>暂无相关推荐商品</text>
		</view>
		<view class="recommend-list" v-else>
			<swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
				<swiper-item v-for="(item,index) in recommendList" :key="index">
					<view class="row-list" v-for="(pros, idx) in item" :key="idx" @click.stop="navToDetailPage(pros.productID)">
						<view class="list-image"><image :src="pros.mainImage" mode=""></image></view>
						<view class="list-name">{{pros.name}}</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper__recommenddots-box" v-if="recommendList.length > 1">
				<view v-for="(item,idx) in recommendList" 
					  :key="idx" 
					  :class="[idx===current?'swiper__dots-long':'none']" 
					  :data-index="current" class="swiper__dots-item">
				</view>	  
			</view>
		</view>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	
	export default{
		name:'recommend',
		props:{
			queryProductid: {
				// Unistars类型
				type: String,
			}
		},
		components:{
			tuiLoadmore,
			tuiNomore,
		},
		data() {
			return{
				current:0,
				recommendList:[],
				isEmpty:false,
				pageSize:4,
				productID:'',
			}
		},
		created() {
			this.productID = this.queryProductid
			this.infoRecommend(this.queryProductid)
		},
		methods:{
			infoRecommend(id){
				this.SellerService.ProductRecommend({productId:id}).then(response =>{
					if( response.data && response.data.length > 0){
						this.isEmpty = false
						for (var i = 0, j = response.data.length; i < j; i += this.pageSize) {
							this.recommendList.push(response.data.slice(i, i + this.pageSize));
						}
					}else{
						this.isEmpty = true
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.current = index;
			},
			navToDetailPage(id) {//跳转商品详情页
				this.$api.navigateTo(`/pages/goods/product?id=${id}`)
			}
		}
	}
</script>

<style lang="scss">	
.recommend{
	background: #FFFFFF;
	width: 100%;
	.recommend-empty{
		width: 702rpx;
		// height: 100rpx;
		line-height: 100rpx;
		padding: 80rpx 24rpx;
		font-size: $font-size-28;
		color: #999999;
		text-align: center;
		image{
			width: 360rpx;
			height: 360rpx;
		}
		text{
			display: block;
		}
	}
	.recommend-list{
		width: 100%;
		height: auto;
		position: relative;
		padding-bottom: 20rpx;
		.tui-banner-swiper {
			width: 702rpx;
			margin: 0 auto;
			background: #F7F7F7;
			padding: 20rpx 24rpx;
			height: 900rpx;
			overflow: hidden;
			transform: translateY(0);
			.row-list{
				width: 340rpx;
				height: auto;
				float: left;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				&:nth-child(2n){
					margin-right: 0;
				}
				.list-image{
					width: 100%;
					height: 340rpx;
					border-radius: 20rpx 20rpx 0 0;
					image{
						width: 100%;
						height: 340rpx;
						border-radius: 20rpx 20rpx 0 0;
					}
				}	
				.list-name{
					font-size: $font-size-28;
					color: $text-color;
					line-height:88rpx;
					padding: 0 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.swiper__recommenddots-box{
		position: absolute;
		bottom: -20rpx;
		left: 0;
		right: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		background: #FFFFFF;
		.swiper__dots-item{
			width: 8rpx;
			height: 8rpx;
			border-radius: 100%;
			margin-left: 6px;
			background-color:rgba(0,0,0,.3);
		}
		.swiper__dots-long{
			width: 32rpx;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: #000;
			transition: all 0.4s;
		}
	}
}
</style>