161 lines
3.7 KiB
Vue
161 lines
3.7 KiB
Vue
<!-- 装修用户组件：用户订单 -->
|
||
<template>
|
||
<view>
|
||
<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: 'takeCount',
|
||
},
|
||
{
|
||
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);
|
||
</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> |