ch
3 years ago
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 928 B After Width: | Height: | Size: 928 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 763 B After Width: | Height: | Size: 763 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 752 B After Width: | Height: | Size: 752 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 812 B After Width: | Height: | Size: 812 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,37 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-05-12 10:30:07
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-05-12 11:01:57
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div class="ui-empty">
|
||||
<img class="ui-empty--icon" :src="icon"/>
|
||||
<p class="ui-empty--desc">{{desc}}</p>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props : {
|
||||
title : String,
|
||||
desc : String,
|
||||
icon : String
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ui-empty{
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
padding: 80px 0;
|
||||
&--icon{
|
||||
width: 228px;
|
||||
}
|
||||
&--desc{
|
||||
margin: 20px 0;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2019-01-01 08:04:09
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-05-11 21:34:49
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<ul class="tab">
|
||||
<li v-for="item in tabs" :key="item.value" @click="change(item.value)"
|
||||
:class="active == item.value && 'tab__active'">
|
||||
{{item.label}}
|
||||
<span v-if="item.count">{{item.count}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
import {ApiGetOrderStatistics} from '~/plugins/api/order';
|
||||
export default {
|
||||
props:{
|
||||
active : {
|
||||
type : Number | String,
|
||||
default : -1
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tabs : [
|
||||
{label : '全部', value : -1, code: 'allCount'},
|
||||
{label : '待付款', value : 1, code: 'unpaidCount'},
|
||||
{label : '待发货', value : 3, code: 'waitDeliveryCount'},
|
||||
{label : '待收货', value : 4, code: 'deliveredCount'},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getOrderStatistics();
|
||||
},
|
||||
methods : {
|
||||
change(val){
|
||||
this.$emit('change', val)
|
||||
},
|
||||
async getOrderStatistics(){
|
||||
const {result} = await ApiGetOrderStatistics();
|
||||
this.tabs = this.tabs.map(i => {
|
||||
i.count = result[i.code];
|
||||
return i;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tab {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
li{
|
||||
float: left;
|
||||
margin-right: 54px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
span{
|
||||
color: #FF875B;
|
||||
}
|
||||
}
|
||||
&__active{
|
||||
color: #FF875B;
|
||||
position: relative;
|
||||
&::after{
|
||||
display: block;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
content: '';
|
||||
background: #FF875B;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||