jiuyiUniapp/shop/pages/set/invoice/list.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>