hjdz/pages/shoping/storelist.vue

<template>
	<view class="content">
		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
				<view class="image-wrapper"><image :src="item.image" mode="aspectFill"></image></view>
				<text class="title clamp">{{ item.store_name }}</text>
				<view class="price-box">
					<text class="price">{{ item.price }}</text>
					<text>原价 {{ item.ot_price }}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { store_shoping } from '@/api/index.js';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			loadingType: 'more', //加载更多状态
			limit: 6, //每次加载数据条数
			page: 1, //当前页数
			goodsList: [] //商品列表
		};
	},

	onLoad(options) {
		this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//监听页面是否滚动到底部加载更多
	onReachBottom() {
		this.loadData();
	},
	methods: {
		//加载商品 ，带下拉刷新和上滑加载
		async loadData(type = 'add', loading) {
			let obj = this;
			let data = {
				page: obj.page,
				limit: obj.limit,
			};
			//没有更多直接返回
			if (type === 'add') {
				if (obj.loadingType === 'nomore') {
					return;
				}
				obj.loadingType = 'loading';
			} else {
				obj.loadingType = 'more';
			}
			if (type === 'refresh') {
				// 清空数组
				obj.goodsList = [];
				obj.page = 1;
			}
			store_shoping(data).then(function(e) {
				console.log(e.data);
				const arr = e.data.list;
				obj.goodsList = obj.goodsList.concat(arr);
				//判断是否还有下一页，有是more  没有是nomore
				if (obj.limit == arr.length) {
					obj.page++;
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'nomore';
				}
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading();
					} else {
						uni.stopPullDownRefresh();
					}
				}
			});
		},
		//详情
		navToDetailPage(item) {
			let id = item.id;
			if (this.sid == 52) {
				uni.navigateTo({
					url: `/pages/product/product?id=${id}&isVip=1`
				});
			} else {
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				});
			}
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
}
/* 商品列表 */
.goods-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 30rpx;
	padding-top: 30rpx;
	.goods-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 20rpx;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hiddens;
	}
	.image-wrapper {
		width: 100%;
		height: 330rpx;
		border-radius: 3px;
		overflow: hidden;
		position: relative;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: $font-lg;
		color: $font-color-dark;
		line-height: 80rpx;
		padding: 0 10rpx;
	}
	.price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: $font-color-light;
		padding: 0 10rpx;
	}
	.price {
		font-size: $font-lg;
		color: #ff4c4c;
		line-height: 1;
		&:before {
			content: '￥';
			font-size: 26rpx;
		}
	}
}
</style>