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

<!-- 装修用户组件：用户订单 -->
<template>
	<view style="background:white;border-radius: 9px;">
		<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 class="item-icon" :src="item.icon" 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,
		reactive,
		ref
	} from 'vue';
	const app = computed(() => sheep.$store('app'));
	const state = reactive({
		themeType: app.value.platform.themeType
	});
	const orderMap = ref([]);

	if (state.themeType == 'lv') {
		orderMap.value = [{
				title: '待付款',
				value: '1',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/853135945c3ba85e1e59b7b4998fc058353b0d6a293d123a7208ea119bbc3511.png',
				path: '/pages/order/list',
				type: 'unpaid',
				count: 'unpaidCount',
			},
			{
				title: '待发货',
				value: '2',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c9957347129a658ed5c9217bd913e4ecd8d05b161f9ba7931a7f9915657dde14.png',
				path: '/pages/order/list',
				type: 'take',
				count: 'undeliveredCount',
			},
			{
				title: '待收货',
				value: '3',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/cdd41605506b625510a90ce6d8194ad4b66be37ec5bdf6a56ddcf8d9206eff40.png',
				path: '/pages/order/list',
				type: 'noget',
				count: 'deliveredCount',
			},
			{
				title: '待评价',
				value: '4',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c2c90f1a7bee3d1d0e933b7ab7c5b186b4dbc0adf8748ceb4e69cabcbfab136f.png',
				path: '/pages/order/list',
				type: 'nocomment',
				count: 'uncommentedCount',
			},
			{
				title: '退款/售后',
				value: '0',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/d392c395c9aa2fa0a6d250b4bad574909945f56cb480b7a05707c4f4e7e23b19.png',
				path: '/pages/order/aftersale/list',
				type: 'aftersale',
				count: 'afterSaleCount',
			}
		]
	} else if (state.themeType == 'blue') {
		orderMap.value = [{
				title: '待付款',
				value: '1',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/e947004cbd4ffa27cc5b0b752da5cebfc4133a280961711c581025ff2e28e04b.png',
				path: '/pages/order/list',
				type: 'unpaid',
				count: 'unpaidCount',
			},
			{
				title: '待发货',
				value: '2',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/1658843d761c5d2a130feeabe86b82f11ef6f9546db4fd013eb94ab4d759858f.png',
				path: '/pages/order/list',
				type: 'take',
				count: 'undeliveredCount',
			},
			{
				title: '待收货',
				value: '3',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/6c69c4f4b1887889a0d0a5ca34a26582a8ba4f0600ae2db3ea6c76a67fcdab59.png',
				path: '/pages/order/list',
				type: 'noget',
				count: 'deliveredCount',
			},
			{
				title: '待评价',
				value: '4',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/71e01ef9cfe2c54695169248f142dd28d37b56b61fc36622b98b415b70e7b495.png',
				path: '/pages/order/list',
				type: 'nocomment',
				count: 'uncommentedCount',
			},
			{
				title: '退款/售后',
				value: '0',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/3bcf948bf269e61d0fe709836b2d36f646bfc3adbc968efc9404e41e7be6f04d.png',
				path: '/pages/order/aftersale/list',
				type: 'aftersale',
				count: 'afterSaleCount',
			}
		]

	} else if (state.themeType == 'pink') {
		orderMap.value = [{
				title: '待付款',
				value: '1',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f8efe1b47be8b8059469ff33fc401c1c89330409acf9ce7f979528cc3aad3441.png',
				path: '/pages/order/list',
				type: 'unpaid',
				count: 'unpaidCount',
			},
			{
				title: '待发货',
				value: '2',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/ca96eec5b194101a6aec6d4088c944339b4552e01b605a8fc99a15859579b31f.png',
				path: '/pages/order/list',
				type: 'take',
				count: 'undeliveredCount',
			},
			{
				title: '待收货',
				value: '3',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/74d8e6ec206bc7f33f577babd3aee0991cd57d4f4fe386bc30af0f37d11133ca.png',
				path: '/pages/order/list',
				type: 'noget',
				count: 'deliveredCount',
			},
			{
				title: '待评价',
				value: '4',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/ffa9d0bfb0e2efcc213b2ff69d8da9a27bce77a6120eb338195cb1fd089147e0.png',
				path: '/pages/order/list',
				type: 'nocomment',
				count: 'uncommentedCount',
			},
			{
				title: '退款/售后',
				value: '0',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/5d35ebc74ddb39d70b8c8a03d53aff9023f6f6cafec1a7e0a59f93b2379517c6.png',
				path: '/pages/order/aftersale/list',
				type: 'aftersale',
				count: 'afterSaleCount',
			}
		]

	} else if (state.themeType == 'orange') {
		orderMap.value = [{
				title: '待付款',
				value: '1',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/0dd1d348022f3a4afc393e0ca1a903039feeb9931b18903790a12b3cb4d34c80.png',
				path: '/pages/order/list',
				type: 'unpaid',
				count: 'unpaidCount',
			},
			{
				title: '待发货',
				value: '2',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f7916da551b40545227bca74dde309a24c6516ba292087a4aed717cac2e499e6.png',
				path: '/pages/order/list',
				type: 'take',
				count: 'undeliveredCount',
			},
			{
				title: '待收货',
				value: '3',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/6168b9bfe12ffda1805880f4da75546af803565a26ae034b2604f0280f818595.png',
				path: '/pages/order/list',
				type: 'noget',
				count: 'deliveredCount',
			},
			{
				title: '待评价',
				value: '4',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/837009349108b9f5fee0c490d94c070367dae5312298ddf47421f4706ae884f1.png',
				path: '/pages/order/list',
				type: 'nocomment',
				count: 'uncommentedCount',
			},
			{
				title: '退款/售后',
				value: '0',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c1ae501cf8081e1402d85de5de66a63733f79f87d5599eeba98504f3246a9ef7.png',
				path: '/pages/order/aftersale/list',
				type: 'aftersale',
				count: 'afterSaleCount',
			}
		]

	} else {
		orderMap.value = [{
				title: '待付款',
				value: '1',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/623cb21c48a8e74cad53266c2b51db74408871f85a7e6adcb375513011659197.png',
				path: '/pages/order/list',
				type: 'unpaid',
				count: 'unpaidCount',
			},
			{
				title: '待发货',
				value: '2',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/908b654b1d00bdb10f0364607fa2799f1209f2e986cb58582f0dc6ebe52d9ce4.png',
				path: '/pages/order/list',
				type: 'take',
				count: 'undeliveredCount',
			},
			{
				title: '待收货',
				value: '3',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/686bf80ff876ed116df99552e5649e10ed5a9cddcc7b3cd5adc641ec022366cf.png',
				path: '/pages/order/list',
				type: 'noget',
				count: 'deliveredCount',
			},
			{
				title: '待评价',
				value: '4',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/a6bc4ea6f95aaaec8b12ce20886d2dd7e1db7b547ba1c52f8b4bebb35f3e7cf3.png',
				path: '/pages/order/list',
				type: 'nocomment',
				count: 'uncommentedCount',
			},
			{
				title: '退款/售后',
				value: '0',
				icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f4f14b9cc394e0791928257174fa1b62e05a535f5556f07218f058ffc6cefe80.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: 13px;

				.img {
					width: 22px;
					height: 22px;
					margin-top: 5px;
				}
			}
		}

	}

	.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>