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

<template>
	<view>
		<navigation-bar :title="title" background-color="#fff" front-color="#000000" :left-button="null" />
		<u-list v-if="active==1" 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-list>
		<order v-if="active==3"></order>
		<view class="tab">
			<view :class="active==item.id ? 'active-btn' : 'tabBtn'" v-for="item in tabList" :key="item.id" @click="tabClick(item.id)">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadmoreStatus: 'loadmore',
				goods: [],
				active: 1,
				title: '一级市场',
				tabList: [
					{
						id: 1,
						name: "市场"
					},
					{
						id: 2,
						name: "购物车"
					},
					{
						id: 3,
						name: "订单列表"
					}
				]
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		// 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)
			},
			change(index) {
				console.log(index)
				this.active = index
			},
			tabClick(id) {
				this.active = id
				if(id==1) {
					this.title='一级市场'
				}else if(id==2) {
					this.title='购物车'
				} else{
					this.title='订单列表'
				}
			}
		}
	}
</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; */
	}
	
	.tab{
		position: absolute;
		bottom: 1rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: #CFCFCF 1rpx solid;
	}
	
	.tabBtn{
		width: 35%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 30rpx;
	}
	
	.active-btn{
		width: 35%; 
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #00BFFF;
	}
</style>