mp_exhibitor_miniprog/pages/exhibitor/components/exhibit-recommend.vue

<template>
	<view class="exhibit-recommend" v-if="productList && productList.length > 0">
		<view class="exhibit-list">
			<template v-for="(item, index) in productList">
				<view class="exhibit-item" hover-class="active" :key="index" @click="onClickExhibit(item)">
					<view class="exhibit-image">
						<image :src="item.pic + '?x-oss-process=image/resize,w_400'" mode="aspectFit"/>
					</view>
					<view class="exhibit-name">{{ item.name }}</view>
					<view v-for="(itempro) in item.product_attr_names" class="exhibit-tag">{{ itempro }}</view>
				</view>
			</template>
		</view>
		<view v-if="showExhibitMore" class="click-more">
			<van-button type="primary" @click="loadMore()">点击展开更多展品</van-button>
		</view>
	</view>
</template>

<script>
	import { exhibitorsProductList } from '@/api/exhibitor'

	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
		},
		props: {
			limit: Number,
			exhibitorId: Number
		},
		watch: {
			limit(val) {
				if (val === 8) {
					this.$emit('show-all')
				}
			},
			exhibitorId(val) {
				this.productListParams.exhibitors_id = val
				this.getProductList()
			}
		},
		data() {
			return {
				productListParams: {
					page: 1,
					page_size: 4,
					exhibitors_id: 0
				},
				productList: [],
				showExhibitMore: true,
				productListLoading: false
			}
		},
		created() {
		},
    mounted() {
      this.getProductList()
    },
		methods: {
			getProductList() {
				if (this.productListLoading === true) {
					return
				}
				this.productListLoading = true
        if (this.exhibitorId) {
          this.productListParams.exhibitors_id = this.exhibitorId
        }
				exhibitorsProductList(this.productListParams).then(res => {
					if (res.code === 0) {
						if (this.productListParams.page > 1) {
							this.productList = [...this.productList, ...res.data.data]
						} else {
							this.productList = res.data.data
						}
						if (this.productListParams.page >= res.data.last_page) {
							this.showExhibitMore = false
						}
					}
					this.productListLoading = false
				})
			},
			loadMore() {
				this.productListParams.page = this.productListParams.page + 1
				this.getProductList()
			},
			onClickExhibit(item) {
				this.navigateTo('/pages/exhibitor/exhibit-detail?id=' + item.id)
			}
		}
	}
</script>
<style lang="scss">
	.exhibit-recommend{
		.exhibit-list{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 18rpx;
			grid-row-gap: 30rpx;
			.exhibit-item{
				position: relative;
				&.active{
					.exhibit-tag{
						background-color: #FCEDE1;
						color: #E57519;
					}
					.exhibit-name{
						color: #E57519;
					}
					.exhibit-image{
						border: 1rpx solid #E57519;
					}
				}
			}
			.exhibit-image{
				width: 100%;
				height: 178rpx;
				border: 1rpx solid #D9D9D9;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.exhibit-name {

				font-size: $fontSize1;
				color: #333333;
				margin-top: 12rpx;
			}
			.exhibit-tag{
				position: absolute;
				top: 20rpx;
				left: 31rpx;
				font-size: 10rpx;
				border-radius: 4rpx;
				padding: 5rpx 8rpx;
        background-color: #FCEDE1;
        color: #E57519;
			}
		}
	}
</style>