market-app-ui/pages/goodsManage/oneMarket/goodsHandle.vue

<template>
	<view>
		<navigation-bar title="商品管理" background-color="#fff" front-color="#000000" />
		<u-list class="list" width="100%" @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in goods" :key="index">
				<view class="card" @click="toDetails(item.id)">
					<view class="card-body">
						<image
							src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
							mode="aspectFill" class="img"></image>
						<view class="txt">
							<view style="font-size: 30rpx;height: 140rpx;">{{item.goodsName}}</view>
							<view class="piece">{{item.price}} 元</view>
						</view>
					</view>
				</view>
			</u-list-item>
			<u-loadmore v-if="goods" :status="loadmoreStatus" margin-top="20" @loadmore="clickLoadMore" margin-bottom="50" />
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadmoreStatus: 'loadmore',
				goods: []
			}
		},
		onLoad() {
			this.getTransitList()
		},
		methods: {
			getTransitList() {
				
				this.$api.getTransitList().then(res => {
					this.goods = res.data
					this.goods.forEach((item, index) => {
						if (index === this.goods.length - 1) {
							this.loadmoreStatus = 'nomore'
						} else {
							this.loadmoreStatus = 'loadmore'
						}
					})
				})
			},
			scrolltolower() {
				this.getTransitList()
			},
			
			toDetails(id) {
				this.$common.to('/pages/goodsDetails/goodsDetails?id='+id)
			}
		}
	}
</script>

<style>
	.list {
		height: 100%;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.card {
		padding: 10rpx;
	}

	.card-body {
		display: flex;
		height: 300rpx;
		width: 100%;
		/* border: #888 1rpx solid; */
		box-shadow:  1rpx 1rpx #888;
		border-radius: 10rpx;
	}

	.img {
		height: 300rpx;
		width: 300rpx;
		margin-right: 10rpx;
	}

	.txt {
		padding: 10rpx;
		width: 300rpx;
	}

	.piece {
		margin: 50rpx 10rpx;
		color: red;
		position: relative;
		top: 50rpx;
		/* left: 5rpx; */
	}
</style>