aluminium-trading-uniapp-240925/pages_order/components/order/myOrderList.vue

<template>
	<view class="page">

		<view v-for="(item, index) in list" v-if="list.length>0" :key="index" class="content"
			@click="lookDetail(item, index)">

			<view class="left">
				<image :src="item.pic" mode="aspectFill"></image>
			</view>

			<view class="right">
				<view class="text-hidden-1">
					订单状态：{{ orderStatusText(item.orderFlag) }}
				</view>
				<view class="text-hidden-1">
					公司名称：{{ item.companyName }}
				</view>
				<view class="text-hidden-1">
					单价：{{ item.price }}
				</view>
				<view class="text-hidden-1">
					购买数量：{{ item.num }}
				</view>
				<view class="text-hidden-1">
					规格：{{ item.specsName }}
				</view>
				<view class="text-hidden-1">
					提货地址：{{ item.address }}
				</view>
				<!--<view class="text-hidden-1">-->
				<!--  定金：{{ item.deposit }}-->
				<!--</view>-->
				<view class="text-hidden-1">
					提货时间：{{ item.takeTime }}
				</view>
				<!--审核状态 0审核中 1 审核通过 2审核未通过-->
				<!--<view class="text-hidden-1">-->
				<!--  审核状态：{{ item.auditStatus == 0? '审核中' : (item.auditStatus == 1? '审核通过' : '审核未通过') }}-->
				<!--</view>-->
			</view>

		</view>

		<!--无历史记录-->
		<view v-else style="padding: 100rpx 0;">
			<uv-empty iconSize="100rpx" mode="history" textSize="28rpx" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "myOrderList",
		props: {
			list: {
				type: Array,
				default: false
			},
		},
		data() {
			return {}
		},
		methods: {

			// 订单状态 0 未确认 1已确认 2已取消 3已付保证金 4 已退款 5已提货
			orderStatusText(flag) {
				const statusMap = {
					0: '未确认',
					1: '已确认',
					2: '已取消',
					3: '已付保证金',
					4: '已退款',
					5: '已提货'
				};
				return statusMap[flag] || '未知状态';
			},


			// 查看详情
			lookDetail(item, index) {
				
				this.$store.state.orderDetail = item
				
				uni.navigateTo({
					url: `/pages_order/order/myOrderDetail`
				});
			},


		}
	}
</script>


<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		height: calc(90vh - 180rpx);


		.content {
			display: flex;
			margin: 10rpx 0;

			.left {
				width: 200rpx;
				height: 100%;
				//height: 130rpx;
				border-radius: 10rpx;

				image {
					//width: 130rpx;
					//height: 130rpx;
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.right {
				width: calc(100% - 160rpx);
				color: #777;
				font-size: 24rpx;
				padding-left: 20rpx;
				line-height: 40rpx;
				background-color: #F8F8F8;
			}
		}

	}
</style>