s-order-card.vue
3.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!-- 装修用户组件：用户订单 -->
<template>
<view
class="ss-order-menu-wrap ss-flex ss-col-center"
:style="[style, { marginLeft: `${data.space}px` }]"
>
<view
class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
v-for="item 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="sheep.$url.static(item.icon)" mode="aspectFit" />
</uni-badge>
<view class="menu-title ss-m-t-28">{{ item.title }}</view>
</view>
</view>
</template>
<script setup>
/**
* 装修组件 - 订单菜单组
*/
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: '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 props = defineProps({
// 装修数据
data: {
type: Object,
default: () => ({}),
},
// 装修样式
styles: {
type: Object,
default: () => ({}),
},
});
// 设置角标
const numData = computed(() => sheep.$store('user').numData);
// 设置背景样式
const style = computed(() => {
// 直接从 props.styles 解构
const { bgType, bgImg, bgColor } = props.styles;
// 根据 bgType 返回相应的样式
return {
background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
};
});
</script>
<style lang="scss" scoped>
.ss-order-menu-wrap {
.menu-item {
height: 160rpx;
position: relative;
z-index: 10;
.menu-title {
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
}
.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>