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="box-flex">
				<view class="left">
					<image :src="item.pic" mode="aspectFill"/>
				</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>
					
					<!--审核状态 0审核中 1 审核通过 2审核未通过-->
					<view class="tip">
						<img v-if="item.auditStatus==0" src="/pages_order/static/order/3.svg" style="width: 100%;height: 100%;" />
						<img v-if="item.auditStatus==1" src="/pages_order/static/order/1.svg" style="width: 100%;height: 100%;" />
						<img v-if="item.auditStatus==2" src="/pages_order/static/order/2.svg" style="width: 100%;height: 100%;" />
					</view>
				</view>
			</view>
			
			<view class="bottom">
				<view class="uni-color-btn"
				v-if="item.auditStatus == 0 && item.orderFlag < 2"
				@click.stop="closeOrder(item.id)">
					取消订单
				</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`
				});
			},
			// 取消订单
			closeOrder(orderId){
				let self = this
				uni.showModal({
					title: '确认取消订单吗？',
					success(e) {
						if (e.confirm) {
							self.$api('updateOrder', {
								orderId,
								type : 1
							}, res => {
								if (res.code == 200) {
									uni.showToast({
										title: '取消成功',
										icon: 'none'
									})
									self.$emit("getData")
								}
							})
						}
					}
				})
			},

		}
	}
</script>


<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		// height: calc(90vh - 180rpx);
	
		.content {
			position: relative;
			margin: 10rpx 0;
			.box-flex{
				display: flex;
				height: calc(100% - 80px);
				.left {
					width: 200rpx;
					height: 100%;
					border-radius: 10rpx;
					flex-shrink: 0;

					image {
						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;
				}
			}
			
			.bottom{
				display: flex;
				justify-content: flex-end;
				gap: 20rpx;
				&>view{
					width: fit-content;
					font-size: 24rpx;
					padding: 10rpx 30rpx;
				}
			}
			
		}

		.tip {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
</style>