yicangzongtai_app_240321/template/SlyGoodsList/SlyGoodsList.vue

<template>
	<view class="">
		<view :class="[attrs.queueing === 1 ? 'row-list':'column-list']" :style="$getStyle(styles.boxStyle)">
			<template v-for="item in goodsList">
				<view class="list-item-box" :style="getStyle(attrs)">
					<view class="list-item" :style="$getStyle(styles.goodsItem)">
						<image :mode="attrs.mode" :src="item.cover" :style="$getStyle(styles.goodsImage)"></image>
						<view class="item-details" :style="$getStyle(styles.goodsDetails)">
							<view class="">
								<view class="two-row" :style="$getStyle(styles.goodsTitle)">
									{{item.title}}
								</view>
								<view v-if="attrs.showSubhead" class="two-row" :style="$getStyle(styles.subheadTitle)">
									{{item.title}}
								</view>
							</view>

							<view class="goods-price" :style="$getStyle(styles.goodsPrice)">
								<view class="" :style="$getStyle(styles.price)">
									<text :style="$getStyle(styles.PriceTag)">￥</text>
									<text>{{item.min_sale_price}}</text>
								</view>
								<view class="original-price" :style="$getStyle(styles.originalPrice)">
									<text>￥</text>
									<text>{{item.max_market_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

			</template>

		</view>
		<u-loadmore :status="loadStatus" />
	</view>
</template>

<script>
	import Mixin from "./../Mixin.js"
	import {
		getGoodsListApi
	} from "./../api_list.js"
	export default {
		name: "SlyGoodsList",
		mixins: [Mixin],
		data() {
			return {
				page: 0,
				limit: 6,
				reachBottom: true,
				loadStatus: 'loadmore', // loading / nomore
				goodsList: []
			}
		},
		computed: {
			getStyle: () => {
				return (attrs) => {
					const styleObj = {};
					switch (attrs?.queueing) {
						case 1:
							const n = uni.upx2px(attrs?.gap || 0) + 'px'
							styleObj.padding = n
							break;
						case 2:
							const b = uni.upx2px(attrs?.gap || 0) + 'px'
							styleObj.paddingBottom = b
							break;

					};
					return styleObj
				}
			},
		},
		created() {
			this.getGoodsList()
		},
		methods: {
			onReachBottom() {
				if (this.loadStatus !== 'loadmore') return
				this.getGoodsList()
			},
			getGoodsList() {
				if (this.loadStatus === 'loading') return;
				this.loadStatus = 'loading'
				if (this.page < 1) {
					this.page = 0
					this.goodsList = []
				};
				this.page++;
				getGoodsListApi({
					page: this.page,
					limit: this.limit
				}).then(res => {
					const {
						page
					} = res;
					this.goodsList = this.goodsList.concat(page.list)
					if (this.page >= page.totalPage) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'loadmore'
					}
				}).catch(err => {
					if (this.page > 1) {
						this.page--;
						this.loadStatus = 'loadmore'
					} else {
						this.page = 0;
						this.loadStatus = 'nomore'
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import url("../common.scss");

	.list-item-box {
		background-color: transparent;

		.list-item {
			overflow: hidden;

			image {
				flex-shrink: 0;
			}

			.original-price {
				text-decoration: line-through;
				padding-left: 8rpx;
			}
		}
	}

	.row-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: stretch;

		.list-item-box {
			width: 50%;

			.list-item {
				width: 100%;
			}

			&:nth-child(odd) {
				padding-left: 0 !important;
			}

			&:nth-child(even) {
				padding-right: 0 !important;
			}

			&:nth-child(1),
			&:nth-child(2) {
				padding-top: 0 !important;
			}
		}

		.list-item {
			max-width: 100%;
			min-height: 100%;

			image {
				width: 100% !important;
				// margin: 0 auto;
			}

			.item-details {
				width: 100%;

				// text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				// align-content: space-between;
				// justify-content: space-between;
				.goods-price {
					display: flex;
					align-items: flex-end;

				}
			}
		}

	}

	.column-list {
		.list-item {
			width: 100%;
			display: flex;
			align-items: stretch;

			image {
				max-width: 40%;

				height: auto !important;
			}

			.item-details {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods-price {
					display: flex;
					align-items: flex-end;
				}
			}
		}
	}
</style>