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

<template>
	<view>
		<u-tabs lineWidth="50" :list="list" itemStyle="height:60rpx;width: 100rpx;" :is-scroll="false" :current="current"
			@change="change"></u-tabs>
		<u-list style="margin-top: 10rpx" @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in orderList" :key="index">
				<view class="item-box">
					<view class="goods-item">
						<u-row>
							<u-col span="10">
								{{item.shopName}}
							</u-col>
							<u-col span="2" v-if="item.finishStatus">
								已完成
							</u-col>
							<u-col span="2" v-else-if="item.resaleStatus">
								转售中
							</u-col>
							<u-col span="2" v-else>
								待确认
							</u-col>
						</u-row>
					</view>
					<view class="goods-item">
						<u-row>
							<u-col span="4">
								<u--image :showLoading="true" :src="src" width="230rpx" height="210rpx"></u--image>
							</u-col>
							<u-col span="5">
								<u--text lines="1" size="18" :text="item.goodsNames"></u--text>
								<u--text prefixIcon="map" style="margin-top: 40rpx;" lineHeight="70" iconStyle="font-size: 20px"  lines="1" :text="item.tradeAreaName"></u--text>
							</u-col>
							<u-col span="3">
								<u--text color="#FF4500" align="center" lineHeight="50" size="20" lines="1" :text="`￥${item.totalPrice}`"></u--text>
								<u--text lines="1" align="center" :text="`${item.totalWeight}吨`"></u--text>
							</u-col>
						</u-row>
					</view>
					<view class="goods-item">
						<u-row>
							<u-col span="9">
								{{item.tradeTime}}
							</u-col>
							<u-col span="3">
								<u-button type="error" size="mini" text="通知商家"></u-button>
							</u-col>
						</u-row>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待确认'
				}, {
					name: '申报中'
				}, {
					name: '已完成'
				}, {
					name: '转售中'
				}, {
					name: '已取消'
				}],
				current: 0,
				orderList: [],
				status: 0
			}
		},
		onLoad() {
			this.getOrderList()
		},
		methods: {
			change(item) {
				this.current = item.index
			},
			getOrderList() {
				this.http.request({
					url: '/level-one-server/app/TbOrder/getList',
					success: res => {
						this.orderList = res.data.data;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 15rpx;
	}
	
	.goods-item{
		margin-bottom: 8rpx;
	}
	
	.item-box{
		height: 300rpx;
		padding: 10rpx;
		border: 1rpx #888 solid;
		margin: 10rpx 0rpx;
		border-radius: 10rpx;
	}
</style>