343 lines
9.3 KiB
Vue
343 lines
9.3 KiB
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> |