YTAPP/pages/waybillDeliveryOrder/index.vue

<template>
	<view class="history">
		<view class="item" v-for="(item, i) in waybillDelivery">
			<text class="code" :style="{ color: item.status ? 'green' : '#666' }">
				{{ item.orderNum }}
				{{ item.type }}
			</text>
			<uni-icons v-if="item.status" type="checkmarkempty" class="status" size="16" color="green"></uni-icons>
			<text class="status fail" v-else>F</text>
			<text style="margin-left: 10rpx; font-weight: 300">
				{{ '\r\n' + item.createTime }}
			</text>
		</view>
		<view v-if="waybillDelivery.length === 0" class="is-empty">暂无派送单</view>

		<uni-popup ref="messageRef" type="message">
			<uni-popup-message :type="messageType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { pickupWaybillDeliveryOrderURL } from '@/utils/api.js';
	const loading = ref(false);
	const token = ref();
	const waybillDelivery = ref([]);
	const messageType = ref();
	const messageText = ref();
	const messageRef = ref();
	const getHistory = () => {
		loading.value = true;
		uni.request({
			url: pickupWaybillDeliveryOrderURL + '/index',
			method: 'GET',
			header: {
				batoken: token.value
			},
			success: ({data} : any) => {
				loading.value = false;
				console.log(data);
				if (data.code == 1) {
					waybillDelivery.value = data.data.list;
				} else {
					messageType.value = 'error';
					messageText.value = data.msg;
					messageRef.value.open();
				}
			},
			fail: (err) => {
				loading.value = false;
			}
		});
	};
	onLoad(() => {
		token.value = uni.getStorageSync('token');
		getHistory();
	});
</script>

<style lang="scss" scoped>
	.history {
		display: flex;
		width: 100%;
		flex-direction: column;
		justify-items: start;

		.title {
			padding: 20rpx;
			font-size: 24rpx;
			font-weight: 600;
		}

		.type {
			padding-right: 20rpx;
			font-size: 24rpx;
		}

		.code {
			font-weight: 600;
		}

		.item {
			padding: 20rpx;
			font-size: 20rpx;
			color: #666;

			.status {
				padding-left: 20rpx;
			}

			.fail {
				font-weight: 600;
				color: #f00;
			}
		}

		.is-empty {
			text-align: center;
			margin: 40px 0;
			color: #999;
		}
	}
</style>