alipay-emulator/pages/shopping/pdd/list-index.vue

<template>
	<view class="page-container flex-column">
		<view class="nav-bar">
			<nav-bar>
				<template v-slot:left>
					<image style="width: 48rpx;height: 48rpx;" src="/static/image/shopping/pdd/back.png"></image>
				</template>
				<template v-slot:center>
					<view class="title-box flex-center flex-column">
						<view class="title">我的订单</view>
						<view class="flex-center text">
							<image style="width: 30rpx;height: 30rpx;" src="/static/image/shopping/pdd/safety.png">
							</image>
							<text>专属客服 ·闪电退换 ·售后无忧</text>
						</view>
					</view>
				</template>
				<template v-slot:right>
					<image style="width: 48rpx;height: 48rpx;" src="/static/image/shopping/pdd/search.png"></image>
				</template>
			</nav-bar>
		</view>
		<view class="tab-list flex-align-center">
			<view class="tab-item" :class="{ active: tab.id == activeTab }" v-for="(tab, index) in tabList"
				:key="index">
				<text>{{ tab.name }}</text>
			</view>
		</view>
		<scroll-view class="flex-1" style="height: 100px;" scroll-y="true">
			<list-card v-for="(item, index) in orderList" :key="index" :item="item"></list-card>
			<view v-if="orderList.length == 0" class="null-data-box flex-align-center">
				<text>没找到订单？试试</text>
				<text style="color: #2686E4;">查看全部</text>
				<text>或</text>
				<text style="color: #2686E4;">切换账号</text>
			</view>
		</scroll-view>
	</view>


</template>



<script setup>
import { ref } from 'vue';
import ListCard from './components/list-card/list-card.vue';

const activeTab = ref(0);

const tabList = ref([
	{
		name: '全部',
		id: 0
	},
	{
		name: '待付款',
		id: 1
	},
	{
		name: '拼团中',
		id: 2
	},
	{
		name: '打包中',
		id: 3
	},
	{
		name: '待收货',
		id: 4
	},
	{
		name: '评价',
		id: 5
	},
]);

const orderList = ref([
	{
		// type: 1,
		orderType: "wait_pay",
		shopName: '澳松旗舰店',
		isBrand: true,
		isFlagship: true,
		productImg: 'https://picsum.photos/200/200?random=1',
		productTitle: '适配哈哈哈哈哈哈哈哈哈哈哈哈头配哈哈哈哈哈哈哈哈哈哈哈哈很好...',
		productSpec: '(小头款)哈哈哈哈哈哈哈哈哈哈哈哈很好...',
		tags: ['坏了包赔', '7天无理由退货'],
		price: '35.9',
		quantity: 1,
		avatars: [
			'https://picsum.photos/40/40?random=1',
			'https://picsum.photos/40/40?random=2',
			'https://picsum.photos/40/40?random=3',
			'https://picsum.photos/40/40?random=4'
		],
		totalAmount: '35.9',
		freightText: '免运费',
		deliveryStatus: '现在支付，预计6小时内发货，',
		deliveryDetail: '后天送达'
	},
	{
		// type: 2,
		orderType: "wait_recv",
		shopName: '澳松旗舰店',
		isBrand: true,
		isFlagship: true,
		productImg: 'https://picsum.photos/200/200?random=2',
		productTitle: '适配哈哈哈哈哈哈哈哈哈哈哈哈头配哈哈哈哈哈哈哈哈哈哈哈哈很好...',
		productSpec: '(小头款)哈哈哈哈哈哈哈哈哈哈哈哈很好...',
		tags: ['7天无理由退货'],
		price: '35.9',
		quantity: 1,
		avatars: [
			'https://picsum.photos/40/40?random=5',
			'https://picsum.photos/40/40?random=6',
			'https://picsum.photos/40/40?random=7',
			'https://picsum.photos/40/40?random=8'
		],
		totalAmount: '35.9',
		freightText: '免运费',
		collectCount: 558,
		deliveryStatus: '运输中 预计明天送达',
		deliveryDetail: '申通快递：【洛阳市】快件已发往 新...'
	},
	{
		// type: 3,
		orderType: "received",
		shopName: '澳松旗舰店',
		isBrand: true,
		isFlagship: true,
		productImg: 'https://picsum.photos/200/200?random=3',
		productTitle: '适配哈哈哈哈哈哈哈哈哈哈哈哈头配哈哈哈哈哈哈哈哈哈哈哈哈很好...',
		productSpec: '(小头款)哈哈哈哈哈哈哈哈哈哈哈哈很好...',
		tags: ['退货包运费保障中'],
		price: '35.9',
		quantity: 1,
		avatars: [
			'https://picsum.photos/40/40?random=9',
			'https://picsum.photos/40/40?random=10',
			'https://picsum.photos/40/40?random=11',
			'https://picsum.photos/40/40?random=12'
		],
		totalAmount: '35.9',
		freightText: '免运费',
		collectCount: 558
	}
]);



</script>

<style lang="less" scoped>
.page-container {
	height: 100vh;
}

.nav-bar {
	border-bottom: 1rpx solid #D2D2D2;
}

.title-box {
	display: flex;
	flex-direction: column;

	.title {
		font-weight: 400;
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 30rpx;
	}

	.text {
		font-weight: 400;
		font-size: 24rpx;
		color: #16B800;
		line-height: 24rpx;
		margin-top: 12rpx;
	}
}

.tab-list {
	height: 80rpx;
	background-color: #ffff;
	border-bottom: 0.5px solid #D2D2D2;

	.tab-item {
		font-weight: 400;
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 80rpx;
		white-space: nowrap;
		margin: 0 22rpx;

		&.active {
			color: #E01B13;
			font-weight: 500;
			border-bottom: 4rpx solid #E01B13;
		}
	}
}

.null-data-box {
	justify-content: center;
	font-size: 28rpx;
	color: #999999;
	line-height: 28rpx;
	padding: 42rpx 0;
}
</style>
<style>
@import '@/common/main.css';

page {
	background-color: #F5F5F5;
}
</style>