baiyuApp/pages_mall/newArrival.vue

<template>
	<view class="new-arrival-page">
		<u-navbar title="新品推荐" :autoBack="true" bgColor="#fff" leftIconColor="#333"
			titleStyle="color:#333;font-weight:bold;"></u-navbar>

		<scroll-view scroll-y class="content-scroll" @scrolltolower="scrolltolower" :refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="handleRefresher">
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in dataList" :key="index" @click="navToGoods(item)">
					<image :src="item.imgUrl" mode="aspectFill" class="goods-img"></image>
					<view class="info">
						<text class="title">{{item.goodsName}}</text>
						<view class="price-box">
							<text class="price">¥{{item.otPrice || item.price}}</text>
							<text class="sales">已售{{item.sales || 0}}件</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" marginTop="30"></u-loadmore>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getIntegralGoodsList
	} from '@/api/integral.js'

	export default {
		data() {
			return {
				dataList: [],
				pageNum: 1,
				pageSize: 10,
				status: 'loadmore',
				totalPage: 1,
				triggered: false,
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			scrolltolower() {
				if (this.pageNum > this.totalPage) return
				this.pageNum++
				this.getList()
			},
			handleRefresher() {
				this.triggered = true;
				this.$nextTick(() => {
					this.pageNum = 1
					this.getList()
				})
				setTimeout(() => {
					this.triggered = false;
				}, 500);
			},
			getList() {
				this.status = 'loading';
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					isNew: 1
				};
				getIntegralGoodsList(data).then(res => {
					if (res.code == 200) {
						let list = res.data.list || [];
						if (this.pageNum == 1) {
							this.dataList = list
							return
						}
						this.dataList = this.dataList.concat(list);
						this.totalPage = Math.ceil(res.data.total / this.pageSize);
						if (this.totalPage <= this.pageNum) {
							this.status = 'nomore';
						} else {
							this.status = 'loadmore';
						}
					}
				});
			},
			navToGoods(item) {
				uni.navigateTo({
					url: '/pages/user/integral/integralGoodsDetails?goodsId=' + item.goodsId
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.new-arrival-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F5F7FA;
	}

	.content-scroll {
		flex: 1;
		height: 0;
		padding: 20rpx;
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.goods-item {
			width: 48%;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

			.goods-img {
				width: 100%;
				height: 340rpx;
			}

			.info {
				padding: 20rpx;

				.title {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
					height: 80rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-weight: 500;
				}

				.price-box {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.price {
						font-size: 34rpx;
						color: #FF5000;
						font-weight: bold;

						&::before {
							content: '¥';
							font-size: 24rpx;
							margin-right: 4rpx;
						}
					}

					.sales {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>