zyejMAll-mobile/sheep/components/s-order-card/s-order-card.vue

<!-- 装修用户组件：用户订单 -->
<template>
	<view style="background:white;">
		<view class="title">
			<span>订单中心</span>
			<view class="ff">
				<span class="ckgd" @click="sheep.$router.go('/pages/order/list');">查看全部</span>
				<span class="ckgd" @click="sheep.$router.go('/pages/order/list');">
					<image class="img" src="@/static/images/dayu.png"></image>
				</span>
			</view>
		</view>
		<view class="ss-order-menu-wrap ss-flex ss-col-center">

			<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" v-for="(item, index) in orderMap"
				:key="item.title" @tap="sheep.$router.go(item.path, { type: item.value })">
				<uni-badge class="uni-badge-left-margin" :text="numData.orderCount[item.count]" absolute="rightTop"
					size="small">
					<image v-if="index == 0" class="item-icon" :src="imag0" mode="aspectFit" />
					<image v-if="index == 1" class="item-icon" :src="imag1" mode="aspectFit" />
					<image v-if="index == 2" class="item-icon" :src="imag2" mode="aspectFit" />
					<image v-if="index == 3" class="item-icon" :src="imag3" mode="aspectFit" />
					<image v-if="index == 4" class="item-icon" :src="imag4" mode="aspectFit" />
				</uni-badge>
				<view class="menu-title">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import imag0 from '@/static/images/no_0.png'
	import imag1 from '@/static/images/no_take.png'
	import imag2 from '@/static/images/no_comment.png'
	import imag3 from '@/static/images/order.png'
	import imag4 from '@/static/images/order2.png'
	/**
	 * 装修组件 - 订单菜单组
	 */
	import sheep from '@/sheep';
	import {
		computed
	} from 'vue';

	const orderMap = [{
			title: '待付款',
			value: '1',
			icon: '/static/img/shop/order/no_pay.png',
			path: '/pages/order/list',
			type: 'unpaid',
			count: 'unpaidCount',
		},
		{
			title: '待发货',
			value: '2',
			icon: '/static/img/shop/order/no_take.png',
			path: '/pages/order/list',
			type: 'take',
			count: 'undeliveredCount',
		},
		{
			title: '待收货',
			value: '3',
			icon: '/static/img/shop/order/no_take.png',
			path: '/pages/order/list',
			type: 'noget',
			count: 'deliveredCount',
		},
		{
			title: '待评价',
			value: '4',
			icon: '/static/img/shop/order/no_comment.png',
			path: '/pages/order/list',
			type: 'nocomment',
			count: 'uncommentedCount',
		},
		{
			title: '退款/售后',
			value: '0',
			icon: '/static/img/shop/order/change_order.png',
			path: '/pages/order/aftersale/list',
			type: 'aftersale',
			count: 'afterSaleCount',
		}
		// ,
		// {
		// 	title: '全部订单',
		// 	value: '0',
		// 	icon: '/static/img/shop/order/all_order.png',
		// 	path: '/pages/order/list',
		// }
	];

	const numData = computed(() => sheep.$store('user').numData);
	
	console.log(numData,'numData')
</script>

<style lang="scss" scoped>
	.title {
		padding: 10px 10px;
		height: 20px;
		line-height: 20px;
		font-size: 16px;
		font-weight: 600;
		// border-bottom: 1px solid #dcdcdc;
		display:flex;
		justify-content: space-between;
		.ff{
			display: flex;
			align-items: center;
			.ckgd{
				color: #8a8787;
				font-size: 15px;
				.img{
					width:20px;
					height:20px;
					margin-top: 3px;
				}
			}
		}
		
	}

	.ss-order-menu-wrap {
		.menu-item {
			height: 160rpx;
			position: relative;
			z-index: 10;

			.menu-title {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #333333;
				margin-top:14rpx;
			}

			.item-icon {
				width: 44rpx;
				height: 44rpx;
			}

			.num-icon {
				position: absolute;
				right: 18rpx;
				top: 18rpx;
				// width: 40rpx;
				padding: 0 8rpx;
				height: 26rpx;
				background: #ff4d4f;
				border-radius: 13rpx;
				color: #fefefe;
				display: flex;
				align-items: center;

				.num {
					font-size: 24rpx;
					transform: scale(0.8);
				}
			}
		}
	}
</style>