<template>
	<scroll-view scroll-y @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}">
		<view class="disjbac fw">
			<view @tap="goDetail(item.id)" class="width48_5 mar-x50 posir" v-for="(item,index) in dataList" :key="index">
				<image class="animated fadeIn" :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
				<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
				<view class="fon30 colpeili">￥{{item.price}}</view>
				<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
			</view>
		</view>
		<!-- 暂无更多数据 -->
		<pitera v-if="showpitera"></pitera>
	</scroll-view>
</template>

<script>
	// 暂无更多组件
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		name:"list-two",
		components:{
			pitera
		},
		props:{
			// 高度类型
			scrollCate:{
				type:Number,
				default:1
			},
			// 页面来源
			pageSource: {
				type:Number,
				default:1
			}
		},
		data() {
			return {
				scrollHeight:uni.getStorageSync('scrollHeight'),
				// 数据
				dataList:[
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选1的宝',
						price:'2,000',
						isActivity:true,
					},
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选1的宝石级钻石每年开采数级钻石每年开采数',
						price:'2,000',
						isActivity:false,
					},
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选',
						price:'2,000',
						isActivity:false,
					},
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选',
						price:'2,000',
						isActivity:true,
					},
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选',
						price:'2,000',
						isActivity:false,
					},
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
						price:'2,000',
						isActivity:false,
					},
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选1的宝石级钻石每年开采数的宝石级钻石每年开采数',
						price:'2,000',
						isActivity:false,
					},
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选',
						price:'2,000',
						isActivity:false,
					},
					{
						id:1,
						imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
						title:'于亿年宝藏中臻选1的宝石级钻石每年开采数的宝石级钻石每年开采数',
						price:'2,000',
						isActivity:false,
					}
				],
				page:1, // 第几页
				size:10, // 数量
				total:0, // 总数
				showpitera:true, // 是否显示暂无数据
			};
		},
		mounted() {
			switch (this.scrollCate){
				case 1:
				this.scrollHeight = uni.getStorageSync('scrollHeight-one'); // App.vue缓存的数据
					break;
				case 2:
				this.scrollHeight = uni.getStorageSync('scrollHeight-two'); // App.vue缓存的数据
					break;
				case 3:
				this.scrollHeight = uni.getStorageSync('scrollHeight-three'); // App.vue缓存的数据
					break;
				case 4:
				this.scrollHeight = uni.getStorageSync('scrollHeight-four'); // App.vue缓存的数据
					break;	
			}
			switch (this.pageSource){
				case 1:
				this.checkList();
					break;
			}
		},
		methods:{
			checkList(){
				console.log('列表事件')
			},
			// 视图容器触底事件
			scrollBottomEv(){
				console.log('触底了',55)
				// 判断总数是否等于数组长度，如果相等显示暂无更多，否则继续执行列表事件
				if(this.total!=this.dataList.length){
					// 页数每次+1
					this.page++
					switch (this.pageSource){
						case 1:
						// this.checkList();// 调用列表事件
							break;
					}
				} else {
					// 显示暂无数据
					this.pitera = true;
				}
			},
			goDetail(id){//前往详情页
				uni.navigateTo({
					url:`/pagesB/shopDetail/shopDetail?id=${id}`
				})
			}
		}
	}
</script>

<style>
</style>