caimei-applets-caimei/pages/goods/components/instrument-recommend.vue

<template name="recommend">
	<!-- 项目仪器推荐 -->
	<view class="recommend clearfix">
		<view class="recommend-list" v-if="list.length>0">
			<view class="row-list" v-for="(pros, idx) in list" :key="idx" @click.stop="NavToDetailPage(pros)">
				<view class="list-image"><image :src="pros.image" mode=""></image></view>
				<view class="list-name">{{pros.title}}</view>
			</view>
		</view>
		<view class="recommend-empty" v-else>暂无相关推荐商品</view>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	
	export default{
		name:'recommend',
		props:{
			list: {
				// Unistars类型
				type: Array
			}
		},
		components:{
		},
		data() {
			return{
				
			}
		},
		created() {
			
		},
		methods:{
			NavToDetailPage(value) {//跳转
				/**
				 * 页面跳转类型
				 * 1、二级页面,2、搜索项目仪器,3、直播页面,4、自由页面,5、商品详情,6、仪器项目详情,7、供应商主页
				 * 8、专题活动页,9、二手市场介绍,10、二手商品列表,11、二手商品发布,12、商品搜索,13、信息详情
				 * 14、品牌招商介绍页,15、维修保养介绍页,16、首页,17、注册页,18、信息中心,19、供应商列表
				 **/
				 if(value.linkType){
					 const typeMap = {
					 	1:`/pages/goods/goods-instrument?linkId=${value.linkParam.id}&title=${value.title}`,
						2:`/pages/goods/instrument-details?id=${value.linkParam.id}`,
					 	5:`/pages/goods/product?id=${value.linkParam.id}`,
					 	// 7:`/pages/supplier/user/my-shop?shopId=${value.linkParam.id}`,
					 	8:'/pages/h5/activity/activity-list',
					 	9:'/pages/second/form/introduce',
					 	10:'/pages/second/product/product-list',
					 	11:'/pages/second/form/form',
					 	12:`/pages/search/search?keyWord=${value.title}`,
					 	13:`/pages/h5/article/path?link=${value.link}`,
					 	14:`/pages/h5/article/path?link=${value.link}`,
					 	15:`/pages/h5/article/path?link=${value.link}`,
					 	17:'/pages/login/register-select',
					 	18:`/pages/h5/article/path?link=${value.link}`,
					 	19:`/pages/search/search-supplier?keyWord=${value.title}`
					 }
					 const url = typeMap[value.linkType]
					 this.$api.navigateTo(url)
				 }
			}
		}
	}
</script>

<style lang="scss">	
.recommend{
	background: #F7F7F7;
	width: 100%;
	.recommend-empty{
		width: 702rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 24rpx;
		font-size: $font-size-28;
		color: #999999;
		text-align: center;
	}
	.recommend-list{
		width: 100%;
		height: auto;
		position: relative;
		box-sizing: border-box;
		padding: 0rpx 24rpx;
		.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>