discounts-minapp/integral/shop.vue

<template>
	<view class="integral-shop">
		<view class="search-box">
			<zs-search></zs-search>
		</view>
		
		<image class="top-banner" src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/zWqwDFLWR49e9ad6233cd12be362c43beb149fd7afd8.png/1.png" mode=""></image>
		
		<zs-list class="list" mt="0" @load="loadMore" :status="status">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image :src="item.src" mode="aspectFill" class="icon"></image>
				<view class="item-title">
					{{item.title}}
				</view>
				<view class="handle-box">
					<view class="price">
						{{item.score}}分
					</view>
					<view class="exchange-btn">
						兑换
					</view>
				</view>
			</view>
		</zs-list>
		
		<zs-skeleton :loading="loading" type="integralShop"></zs-skeleton>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				list:[
					{
						src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/8zBA84UCvIef20b42c8c60ccf255659809bb7487bc39.png/1.png',
						title:'宅小鹿芒果干',
						score:6000,
					},
					{
						src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/9wkfNPdtHQDx215952a03c9499e4bd4cc030e5be26bd.png/1.png',
						title:'麻辣王子地道辣条',
						score:6000,
					},
					{
						src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/FHcYDdynWMlO6bb60c27722f428d3d6552a1a39eae9c.png/1.png',
						title:'良品铺子酥脆薄饼',
						score:6000,
					},
				],
				status:'more',//加载状态
			}
		},
		methods: {
			
			loadMore(){
				this.status = 'loading'
					setTimeout(()=>{
						this.status = 'more'
						this.list.push({
						src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/iNEvSic47Nhy84e3b9a86e1e505bfe57c92d01acb255.png/1.png',
						title:'薄脆饼干',
						score:6000,
						num:120
					},)
					},1000)
			}
		},
		onLoad() {
			this.loading = true
			setTimeout(()=>{
				this.loading = false
			},1000)
		}
	}
</script>

<style lang="scss">

	.integral-shop {
		background: #f5f5f5;
		padding-top: 120rpx;
		.search-box{
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			padding: 20rpx 0;
			background: #fff;
			z-index: 9;
		}
		
		.top-banner{
			margin: 0 30rpx;
			width: 690rpx;
			height: 346rpx;
		}
		
		.zs-list{
			margin-left: 30rpx;
			margin-right: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width: 334rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background: #fff;
				border-radius: 16rpx;
				margin-top: 20rpx;
				.icon{
					width: 100%;
					height: 320rpx!important;
					border-radius: 12rpx;
					object-fit: cover;
				}
				.item-title{
					font-size: 26rpx;
					 display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					padding: 0 20rpx;
					margin-top: 20rpx;
				}
				.handle-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;
					padding: 10rpx 20rpx;
					.price{
						font-size: 26rpx;
						color: #FE5B47;
					}
					.exchange-btn{
						width: 96rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: $uni-color-primary;
						border-radius: 20rpx;
						text-align: center;
						color: #fff;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>