delivery-uniapp/pages/user/order/orderRecord.vue

<template>
	<s-layout title="接单记录" class="order-record-page">
		<view class="page-content">
			<view class="top-select" @tap="showPicker = true">
				<view class="select-style">
					<text style="margin-right:15rpx;">{{ selectedLabel }}</text>
					<up-icon name="arrow-down" color="#757575" size="15"></up-icon>
				</view>
			</view>
			<!-- up-picker -->
			<up-picker
				:show="showPicker"
				:columns="columns"
				:defaultIndex="[defaultIndex]"
				@confirm="onConfirm"
				@cancel="showPicker = false"
				@close="showPicker = false"
			></up-picker>

			<!-- 顶部提示 -->
			<view class="notice">数据统计均截止昨日23:59，可能存在延迟，请耐心等待</view>

			<!-- 单量卡片 -->
			<view class="card card-volume">
				<view class="card-header">
					<view class="card-title">单量</view>
					<view class="card-link" @click="toList">
						查看 <up-icon name="arrow-right" color="#757575" size="15"></up-icon>
					</view>
				</view>
				<view class="card-body volume-body">
					<text class="volume-number">10<span class="unit">单</span></text>
					<text class="volume-sub">已完成</text>
				</view>
			</view>

			<!-- 转单记录卡片 -->
			<!-- <view class="card card-transfer">
				<view class="card-header">
					<view class="left">
						<text class="card-title">转单记录</text>
					</view>
					<view class="card-link">
						查看 <up-icon name="arrow-right" color="#757575" size="15"></up-icon>
					</view>
				</view>
				<view class="card-body transfer-body">
					<view class="col">
						<text class="col-number">0<span class="unit">单</span></text>
						<text class="col-label">待处理订单</text>
					</view>
					<view class="col">
						<text class="col-number">0<span class="unit">单</span></text>
						<text class="col-label">我转出的</text>
					</view>
					<view class="col">
						<text class="col-number">0<span class="unit">单</span></text>
						<text class="col-label">我接收的</text>
					</view>
				</view>
			</view> -->
		</view>
	</s-layout>
</template>

<script setup>
import { ref } from 'vue';

// picker 显示控制
const showPicker = ref(false);
// 默认选中标签
const selectedLabel = ref('今日');
// 默认选中的索引（0：今日）
const defaultIndex = 0;

// 列数据，u-picker 接受 columns 为数组的数组
const columns = [
	[
		{ text: '今日', value: 'today' },
		{ text: '昨日', value: 'yesterday' },
		{ text: '近7天', value: 'last7' },
		{ text: '本月', value: 'month' },
	],
];

function onConfirm(e) {
	// e.value 为选中的值数组（每列一个）
	const value = e && e.value && e.value[0];
	if (value) {
		selectedLabel.value = value.text || String(value);
	}
	showPicker.value = false;
}

function toList() {
	uni.navigateTo({
		url: '/pages/user/order/recordList'
	})
}

</script>

<style lang="scss" scoped>
	.page-content {
		padding: 16px;
		background: transparent;
	}

	.top-select {
		display: flex;
		justify-content: flex-end;
		padding: 0 0 25rpx;
	}
	
	.select-style {
		display: flex;
	}

	.notice {
		background: #f5f5f5;
		color: #999;
		padding: 10px 12px;
		border-radius: 6px;
		font-size: 12px;
		margin-bottom: 12px;
	}

	.card {
		background: #fff;
		border-radius: 8px;
		padding: 14px;
		margin-bottom: 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.card-link {
		display: flex;
		font-size: 13px;
		color: #999;
	}

	.card-header .left {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.tag {
		color: #e74c3c;
		font-size: 12px;
	}

	.volume-body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 8px 0 4px;
	}

	.volume-number {
		font-size: 36px;
		font-weight: 700;
		color: #333;
	}

	.unit {
		font-size: 18px;
		margin-left: 4px;
	}

	.volume-sub {
		color: #999;
		font-size: 13px;
		margin-top: 6px;
	}

	.transfer-body {
		display: flex;
		justify-content: space-between;
		padding-top: 6px;
	}

	.col {
		flex: 1;
		text-align: center;
	}

	.col-number {
		font-size: 22px;
		font-weight: 700;
		color: #333;
	}

	.col-label {
		color: #999;
		font-size: 12px;
		margin-top: 6px;
		display: block;
	}
</style>