<template>
	<scroll-view class="scv1" scroll-y="true" @scrolltoupper='init' @scrolltolower='jiazai'>
		<view class="mychangping_content">
			<view @click="goxiangqin(item)" v-for="item in list">
				<image :src="item.surfacePlot"></image>
				<view class="nicheng">{{item.collectionName}}</view>
				<view class="bianhao">{{item.collectorNumber}}</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {ref} from 'vue'
	import {mycollectionxx} from '@/api/user.js'
	export default {
		props:['id'],
		setup(props) {
			let list=ref([])
			let pageNum=1
			function init(){
				uni.showLoading({
					title:'加载中'
				})
				pageNum=1
				mycollectionxx({collectionId:props.id,pageNum,pageSize:10}).then(res=>{
					console.log(res);
					uni.hideLoading()
					list.value=res.rows
				})
			}
			init()
			function jiazai(){
				uni.showLoading({
					title:'加载中'
				})
				pageNum++
				mycollectionxx({collectionId:props.id,pageNum,pageSize:10}).then(res=>{
					uni.hideLoading()
					if(res.rows.length==0){
						pageNum--
						return
					}
					res.rows.map(item=>{
						list.value.push(item)
					})
					console.log(res);
					
				})
			}
			function goxiangqin(item){
				uni.navigateTo({
					url:'/pages/mydetils/mydetils?id='+item.id
				})
			}
			return {
				goxiangqin,
				list,
				init,
				jiazai
			}
		}
	}
</script>

<style lang="scss">
	.scv1{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.mychangping_content{
		width: 680upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: auto;
		>view{
			width: 328upx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20upx;
			>image{
				width: 328upx;
				height: 328upx;
				margin-bottom: 10upx;
				border-radius: 5upx;
			}
			>.nicheng{
				font-size: 28upx;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 5upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 20upx;
			}
			>.bianhao{
				width: 286upx;
				height: 34upx;
				background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);
				border-radius: 34upx;
				font-size: 22upx;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				padding-left: 30upx;
				box-sizing: border-box;
				// justify-content: center;
			}
		}
	}
</style>
