商品列表

pagesA/GoodSkuList/GoodSkuList.vue

+<template>
+	<view class="layout">
+		<view class="list">
+			<view class="item" v-for="(item, index) in goodList" :key="index">
+				<image class="img" :src="item.spuImg"></image>
+				<view class="item-rigth">
+					<view class="item-right-top">
+						<text class="item-title">{{ item.name }}{{ item.skuName }}</text>
+						<text class="item-brand">{{ item.name }}</text>
+					</view>
+					<text class="item-integral">{{ item.sellingPrice }}积分</text>
+				</view>
+			</view>
+			<uni-load-more v-if="brandList.length > 0" :status="loadingType"></uni-load-more>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			page: 1,
+			pageSize: 20,
+			loadingType: 'more',
+			goodList: [],
+			brandNo: ''
+		};
+	},
+	onLoad(option) {
+		this.brandNo = option.brandNo
+		this.getData();
+	},
+	methods: {
+		getData() {
+			this.$net
+				.get('/goods/sku', { page: this.page, pageSize: this.pageSize, brandNo: this.brandNo })
+				.then(res => {
+					if (res.data.list.length > 0) {
+						this.goodList = this.goodList
+							.concat(res.data.list)
+							.concat(res.data.list)
+							.concat(res.data.list)
+							.concat(res.data.list)
+							.concat(res.data.list)
+							.concat(res.data.list)
+							
+							.concat(res.data.list)
+							.concat(res.data.list);
+						this.page += 1;
+					}
+					this.loadingType = res.data.list.length < this.pageSize ? 'noMore' : 'more';
+				})
+				.catch(err => {
+					console.log(err);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.layout {
+	width: 100%;
+	height: 100%;
+	background: #f5f5f5;
+	.list {
+		display: flex;
+		flex-direction: column;
+		padding: 6rpx 12rpx;
+		.item {
+			display: flex;
+			flex-direction: row;
+			background: #ffffff;
+			padding: 12rpx 12rpx;
+			border-radius: 8rpx;
+			.img {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 4rpx;
+			}
+			.item-right {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				.item-right-top{
+					display: flex;
+					flex-direction: column;
+					.item-title {
+						font-size: 14rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #333333;
+						line-height: 20rpx;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						max-lines: 2;
+					}
+					.item-brand {
+						background: rgba(255, 5, 32, 0.03);
+						border-radius: 4rpx;
+						border: 1rpx solid #ff0520;
+						font-size: 11rpx;
+						color: #ff0520;
+						line-height: 16rpx;
+						padding: 0 8rpx;
+					}
+				}
+				.item-integral {
+					font-size: 16rpx;
+					font-weight: bolder;
+					color: #ff0520;
+					line-height: 22rpx;
+				}
+			}
+		}
+	}
+}
+</style>