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

<template>
	<view>
		<navigation-bar title="一级市场" background-color="#fff" front-color="#000000" :left-button="null" />
		<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 style="padding: 20px; display: flex;">
			<u-button type="primary" text="市场"></u-button>
			<u-button type="primary" text="购物车"></u-button>
			<u-button type="primary" text="订单列表" @click="swiTap"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadmoreStatus: 'loadmore',
				goods: [],
				active: 1,
			}
		},
		onLoad() {
			this.getGoodsList()
			// this.loadmore()
		},
		// onShow() {
		// 	var a = document.getElementsByClassName('uni-page-head-hd')[0]
		// 	a.style.display = 'none';
		// },
		methods: {
			getGoodsList() {
				this.http.request({
					url: '/level-one-server/TbGoodsTransit/getTransitList',
					success: res => {
						this.goods = res.data.data;
						this.goods.forEach((item, index) => {
							if (index === this.goods.length - 1) {
								this.loadmoreStatus = 'nomore'
							} else {
								this.loadmoreStatus = 'loadmore'
							}
						})
					}
				});
			},
			scrolltolower() {
				this.getGoodsList()
			},
			toDetails(id) {
				this.$common.to('/pages/goodsDetails/goodsDetails?id=' + id)
			},
			swiTap() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			}
		}
	}
</script>

<style>
	.list {
		height: auto;
		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>