196 lines
4.0 KiB
Vue
196 lines
4.0 KiB
Vue
<template>
|
|
<view class="invoice-history">
|
|
<view class="rf-list" v-if="invoiceList.length > 0">
|
|
<view
|
|
class="rf-list-item"
|
|
v-for="(item, index) in invoiceList"
|
|
:key="index"
|
|
@tap="navTo(item.order_id)"
|
|
>
|
|
<view class="wrapper">
|
|
<view class="address-box">
|
|
<view class="order-fl">
|
|
订单编号: <text class="order-sn">{{ item.order_sn }}</text>
|
|
</view>
|
|
<view class="order-wrapper">
|
|
<text class="address"
|
|
>{{ item.title
|
|
}}<text v-if="item.content">{{
|
|
` - ${item.content}`
|
|
}}</text></text
|
|
>
|
|
<text class="address">开票金额:<text :class="'text-' + themeColor.name">{{ item.tax_money }}</text></text>
|
|
</view>
|
|
</view>
|
|
<view class="u-box">
|
|
<view class="in1line">
|
|
<text class="name"
|
|
>[{{ parseInt(item.type, 10) === 1 ? '公司' : '个人' }}]</text
|
|
>
|
|
<text class="mobile">{{
|
|
item.duty_paragraph || '个人发票无税号'
|
|
}}</text>
|
|
</view>
|
|
<text class="time">{{ item.created_at | time }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<rf-load-more v-if="invoiceList.length > 0" :status="loadingType" />
|
|
</view>
|
|
<rf-empty
|
|
info="您还未购买任何商品"
|
|
v-if="invoiceList.length === 0 && !loading"
|
|
></rf-empty>
|
|
<!--加载动画-->
|
|
<rfLoading isFullScreen :active="loading"></rfLoading>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { orderInvoiceList } from '@/api/userInfo';
|
|
import moment from '@/common/moment';
|
|
import rfLoadMore from '@/components/rf-load-more/rf-load-more';
|
|
export default {
|
|
components: {
|
|
rfLoadMore
|
|
},
|
|
data() {
|
|
return {
|
|
pageNum :0,
|
|
loadingType: 'more',
|
|
invoiceList: [],
|
|
loading: true
|
|
};
|
|
},
|
|
filters: {
|
|
time(val) {
|
|
return moment(val * 1000).format('YYYY-MM-DD HH:mm');
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.initData();
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
this.loading = true;
|
|
this.pageNum = 0;
|
|
this.invoiceList = [];
|
|
this.getInvoiceList('refresh');
|
|
},
|
|
// 加载更多
|
|
onReachBottom() {
|
|
if (this.loadingType === 'nomore') return;
|
|
this.pageNum++
|
|
this.getInvoiceList();
|
|
},
|
|
methods: {
|
|
// 数据初始化
|
|
initData() {
|
|
this.getInvoiceList();
|
|
},
|
|
// 获取发票历史
|
|
async getInvoiceList(type) {
|
|
await this.$http
|
|
.get(`${orderInvoiceList}`, {
|
|
pageNum: this.pageNum
|
|
})
|
|
.then(r => {
|
|
this.loading = false;
|
|
if (type === 'refresh') {
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
this.loadingType = r.length === 10 ? 'more' : 'nomore';
|
|
this.invoiceList = [...this.invoiceList, ...r];
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
if (type === 'refresh') {
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
});
|
|
},
|
|
navTo(id) {
|
|
this.$mRouter.push({ route: `/pages/order/detail?id=${id}` });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: $page-color-base;
|
|
}
|
|
.invoice-list {
|
|
position: relative;
|
|
.t-box {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 30upx;
|
|
color: $font-color-dark;
|
|
.tag {
|
|
font-size: 24upx;
|
|
color: $base-color;
|
|
margin-right: 10upx;
|
|
background: #fffafb;
|
|
border: 1px solid #ffb4c7;
|
|
border-radius: 4upx;
|
|
padding: 4upx 10upx;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
.u-box {
|
|
font-size: 28upx;
|
|
color: $font-color-light;
|
|
margin-top: 16upx;
|
|
.name {
|
|
margin-right: 30upx;
|
|
}
|
|
}
|
|
}
|
|
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
.address-box {
|
|
.order-fl {
|
|
font-size: $font-sm;
|
|
color: $font-color-light;
|
|
margin-bottom: 10upx;
|
|
.order-sn {
|
|
margin-left: 14upx;
|
|
}
|
|
}
|
|
.order-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.tag {
|
|
font-size: 24upx;
|
|
color: $base-color;
|
|
margin-right: 10upx;
|
|
background: #fffafb;
|
|
border: 1px solid #ffb4c7;
|
|
border-radius: 4upx;
|
|
padding: 4upx 10upx;
|
|
line-height: 1;
|
|
}
|
|
.address {
|
|
font-size: $font-base + 2upx;
|
|
color: $font-color-dark;
|
|
}
|
|
}
|
|
}
|
|
.u-box {
|
|
font-size: 28upx;
|
|
color: $font-color-light;
|
|
margin-top: 16upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.name {
|
|
}
|
|
.time {
|
|
font-size: $font-sm + 2upx;
|
|
}
|
|
}
|
|
</style>
|