paper-shopkeeper-app/pages/trade/orderList.vue

<template>
	<view class="order-list">
		<uni-segmented-control :current="controlCurrent" :values="controlItems" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control>
		<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
			<view v-for="(item, index) in list" :key="index">
				<view class="list-border list-title-line">
					<text class="list-title">{{item.customerEnterpriseName}}</text>
					<text class="list-title-Subtitle">{{controlItems[item.orderStatus-1]  }}</text>
				</view>
				<view class="list-border list-info-line" v-for="(subItem, subIndex) in item.supplierOrderList[0].orderItmes" :key="subIndex">
					<view class="list-info">
						<view class="">
							<!-- <image class="list-image" :src="item.productImg" mode=""></image> -->
							<image class="list-image" :src="subItem.productImg" mode="">
							</view>
						<view class="list-info-contant">
							<view class="list-info-title">{{ subItem.productName }}
								
							</view>
							<view class="list-info-text">
								{{ subItem.categoryName }}/{{ subItem.brandName }}/{{ item.gramWeight }}g/{{ subItem.length }}*{{ subItem.width }}/{{ subItem.pieceQuantity }}张
							</view>
						</view>
					</view>
				</view>
				<view class="list-border list-bottom-contant">
					<view>
						<text class="list-bottom-contant-text">交货时间：</text>
						<text class="list-bottom-contant-subtext">{{ item.deliveryDay }}天</text>
					</view>
					<view>
							<text class="list-title-Subtitle">¥{{ item.totalOfferPrice }}</text>
					</view>
				</view>
				<uGap></uGap>
			</view>
		</scroll-list>
	</view>
</template>

<script>
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
// import {  gettradingHallList } from '@/apis/trade'
import { getBasePaperDeals } from '@/apis/clientDetailApi.js'
export default {
	// props: {
	// 	queryOrderData: {
	// 		type: Object,
	// 		default: () => {}
	// 	}
	// },
	components: {
		uGap
	},

	data() {
		return {
			orderPagination: {
				pageNum: 0, // 初始会执行一次下拉加载
				pageSize: 10
			},
			orderData: [],
			controlCurrent: 0,
			controlItems: ['全部', '待确认', '待发货', '已完成'],
			orderOption: {
				size: 10,
				auto: true,
				emptyText: '暂无报价信息~',
				background: '#F7F8FA',
				fontSize: '40rpx'
			},
			params: {
				asc: '',
				desc: '',
				// customerEnterpriseId: this.$store.state.supplierInfo.id || null, // 客户企业ID默认为空，传值时网关获取当前用户关联企业id失效
				// mallSupplierId: this.$store.state.supplierInfo.supplierId || null, // 供应商id
				customerEnterpriseId: '651107734133018624',
				mallSupplierId: '670334117090562048', // 供应商id
				status: '0', // 状态 0 全部 待发货/30106,待收货/30107,待借款/30207,已完成/30104
				enterpriseIds: [] //企业ID集合网关获取
			},
			pagination: {
				pageNum: 0, // 初始会执行一次下拉加载
				pageSize: 10
			},
			list: []
		}
	},
	onLoad(option) {},
	methods: {
		// 获取订单列表
		getList() {
			return new Promise((resolve, reject) => {
				getBasePaperDeals({ ...this.params, ...this.pagination })
					.then(res => {
						console.log('订单列表', res)
						if (res) {
							if (this.pagination.pageNum == 1) {
								this.list = res.records
							} else {
								this.list = this.list.concat(res.records)
							}
							// this.list = []
							// this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]
							resolve({ list: this.list, total: res.total })
						}
					})
					.catch(err => {
						reject(err)
					})
			})
		},
		//订单分页
		orderUp(page) {
			this.orderPagination.pageNum++
			this.getList()
				.then(({ list, total }) => {
					this.$refs.orderRef.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.orderRef.loadFail()
				})
		},
		//订单分页
		orderDown() {
			this.orderPagination.pageNum = 1
			this.getList()
				.then(({ list, total }) => {
					this.$refs.orderRef.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.orderRef.refreshFail()
				})
		},
		//分段器点击事件
		onClickItem(value) {
			console.log(value)
		}
	}
}
</script>

<style lang="scss">
.order-list {
	margin-bottom: 0px;
	background: #FFFFFF;
	.list-border {
		border-bottom: 2rpx solid #dddddd;
	}
	.list-title-line {
		line-height: 88rpx;
		padding-left: 48rpx;
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
	}
	.list-title {
		font-family: PingFangSC-Semibold;
		font-size: 30rpx;
		color: #000000;
		letter-spacing: 0;
		font-weight: 600;
	}
	.list-title-Subtitle {
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		color: #ff5368;
		letter-spacing: 0;
		text-align: right;
		font-weight: 500;
		float: right;
		margin-right: 32rpx;
	}
	.list-info-line {
		padding-left: 48rpx;
		line-height: 70rpx;
		// width: 750rpx;
		// height: 88rpx;
		background: #FFFFFF;
	}
	.list-info-contant {
		margin-left: 48rpx;
	}
	.list-info-title {
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 0;
		text-align: left;
		font-weight: 550;
	}
	.list-info-text {
		font-family: PingFangSC-Regular;
		font-size: 26rpx;
		color: #888888;
		letter-spacing: 0;
		text-align: left;
		line-height: 64rpx;
		font-weight: 400;
	}
	.list-image {
		width: 100rpx;
		height: 100rpx;
		margin-top: 20rpx;
	}
	.list-info {
		display: flex;
	}
	.list-bottom-contant {
		// line-height: 70rpx;
		align-items: center;
		padding-left: 48rpx;
		width: 750rpx;
		height: 80rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		.list-bottom-contant-text{
			font-size: 26rpx;
			color: #888888;
			letter-spacing: 0;
			line-height: 32rpx;
			font-weight: 400;
		}
		.list-bottom-contant-subtext{
			font-size: 26rpx;
			color: #333333;
			letter-spacing: 0;
			line-height: 32rpx;
			font-weight: 400;
		}
	}
}
</style>