ds_mobile_app/mobile/components/selection-goods.vue

<template name="recommendGoods">
	<view v-if="recommendGoods.length">
		<view class="recommend-title">
			<image :src="imgUrl+'member/recommend-title.png'" />
		</view>
		<view  class="recommend-goods flex_row_start_start">
			<goodsItemV v-for="(item,key,index) in recommendGoods" :goods_info="item" :key='index' :show_sale="false" :icon_type="1" @reloadCartList="reloadCartList"/>
		</view>
		<loadingState :state='loadingState'/>
	</view>
</template>

<script>
	import goodsItemV from "@/components/goods_item_v.vue";
	import loadingState from "@/components/loading-state.vue";
	export default {
		name: "selectionGoods",
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				recommendGoods: [],
				loadingState: 'first_loading',
				pageSize: 10,
				current: 1,
				loading: false,//是否加载数据
				ishasMore: true,//是否还有数据
			}
		},
		props: {
			arriveBotFlag: {
				type: Boolean,
				default: false,
			},
			hasMore: {
				type: Boolean,
			},
			pn: {
				type: Number,
			},
			recGoods:{
				type: Array,
			},
			loadingstate: {
				type: String
			},
			loadings: {
				type: Boolean,
			}
		},
		components: {
			goodsItemV,
			loadingState
		},
		created() {
			
		},
		
		mounted() {
			this.ishasMore = this.hasMore;
			this.current = this.pn;
			this.recommendGoods = this.recGoods;
			this.loadingState = this.loadingstate;
			this.loading = this.loadings;
			this.getData();//获取推荐商品数据
		},
		methods: {
			getData() {
				this.loading = true;
				let param = {};
				param.url = 'v1/front/goods/selectList';
				param.method = 'GET';
				param.data = {};
				param.data.queryType = 'cart';
				param.data.queryDetail = 'recommend';
				param.data.pageSize = this.pageSize;
				param.data.current = this.current;
				this.loadingState = this.loadingState == 'first_loading'?this.loadingState:'loading';
				this.$request(param).then(res => {
					if (res.state == 200) {
						if(this.current == 1){
							this.recommendGoods = res.data.list;
						}else{
							this.recommendGoods = this.recommendGoods.concat(res.data.list);
						}
						this.ishasMore = this.$checkPaginationHasMore(res.data.pagination);//是否还有数据
						if(this.ishasMore){
							this.current++;
							this.loadingState = 'allow_loading_more';
						}else{
							this.loadingState = 'no_more_data';
						}
					} else {
						//错误提示
					}
					this.loading = false;
				})
			},
			//页面到底部加载更多数据
			getMoreData(){
				if(this.ishasMore){
					this.getData();
				}
			},
			reloadCartList(val){
				this.$emit('reload_cart',val)
			}
		}
	}
</script>
<style lang='scss'>
	.list-scroll-content{
		height: 100vh;
	}
	.recommend-title {
		display: flex;
		justify-content: center;

		image {
			width: 387rpx;
			height: 34rpx;
			margin: 30rpx 0;
		}
	}
	.recommend-goods {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		padding:0 20rpx;
		box-sizing: border-box;
	}
</style>