502 lines
12 KiB
Vue
502 lines
12 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<view class="condition-box">
|
|
<view class="condition-input-box">
|
|
<view class="condition-input-container">
|
|
<icon class="ml-20" type="search" size="20"></icon>
|
|
<input class="condition-input-text" :value="keywords" @input="inputKeywords"
|
|
@confirm="doSearchKeyWord" placeholder-style="font-size:28rpx;" type="text"
|
|
confirm-type="search" placeholder="项目名称" />
|
|
<view class="icon-clear size-32 mr-10" v-if="keywords != ''" @click="clearSearch"></view>
|
|
</view>
|
|
<view class="add-btn ml-20" @click="openInvoiceInfo">开票信息</view>
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
|
|
<ContainerLoading :loadingVisible="loadingState" style="height: 85vh;margin-top: 120rpx;"
|
|
@doRefresh="doRefreshList">
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP-TOUTIAO || MP-WEIXIN -->
|
|
<ContainerLoading :loadingVisible="loadingState" style="height: 85vh;margin-top: 80rpx;"
|
|
@doRefresh="doRefreshList">
|
|
<!-- #endif -->
|
|
<scroll-view scroll-y style="height: 85vh;padding-bottom: 40px;" :lower-threshold="100"
|
|
refresher-background="#FFFFFF00" @scrolltolower="doLoadMore">
|
|
<view class="order-box">
|
|
<block v-for="(item,index) in recordList" :key="index">
|
|
<view class="order-item">
|
|
<view class="record-title-box">
|
|
<view :class="['record-title-status',invoiceStatusColor(item.invoiceStatus)]">
|
|
{{invoiceStatus(item.invoiceStatus)}}
|
|
</view>
|
|
<view @click="openDetail" :data-value="item"
|
|
class="record-title-name multiple-2-ellipsis">
|
|
{{item.invoiceName}}
|
|
</view>
|
|
<view class="record-options">
|
|
<view v-if="item.invoiceStatus=='-1' || item.invoiceStatus=='0'"
|
|
class="icon-edit-blue size-48" @click="doUpdate" :data-value="item">
|
|
</view>
|
|
<view v-if="item.invoiceStatus =='1'" class="icon-cancel-yellow size-48"
|
|
@click="cancelRecord" :data-value="item"></view>
|
|
</view>
|
|
</view>
|
|
<view @click="openDetail" :data-value="item" class="record-number mt-10">纳税人识别号:
|
|
{{item.invoiceNumber}}
|
|
</view>
|
|
<view @click="openDetail" :data-value="item" class="record-bottom-box mt-10">
|
|
<view class="record-time icon-time">{{item.gmtCreate}}</view>
|
|
<rich-text style="color: red;"
|
|
:nodes="moneyTxt(10,14,item.invoiceRechargeMoney)"></rich-text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<uni-load-more :status="hasMore"></uni-load-more>
|
|
</view>
|
|
</scroll-view>
|
|
</ContainerLoading>
|
|
<view class="bottom-fixed-footer">
|
|
<view class="bottom-btn-green" @click="openMake">去开票</view>
|
|
</view>
|
|
<uni-popup type="message" ref="msg">
|
|
<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ContainerLoading from '@/components/container-loading.vue'
|
|
import InvoiceApi from '@/common/js/net/InvoiceApi.js'
|
|
import {
|
|
invoiceStatus,
|
|
invoiceStatusColor,
|
|
moneyTxt
|
|
} from '@/common/js/conver.js'
|
|
export default {
|
|
components: {
|
|
ContainerLoading
|
|
},
|
|
setup() {},
|
|
data() {
|
|
return {
|
|
keywords: '',
|
|
pageData: {
|
|
page: 1,
|
|
rows: 10,
|
|
keywords: ''
|
|
},
|
|
msgShow: false,
|
|
msgHint: '',
|
|
msgType: 'error',
|
|
loadingState: 'loading',
|
|
listRefreshTrig: false,
|
|
isLoadMore: false,
|
|
hasMore: 'more',
|
|
recordList: [], //开票记录
|
|
needRefresh: false,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: "发票管理",
|
|
});
|
|
uni.setNavigationBarColor({
|
|
frontColor: "#000000",
|
|
backgroundColor: "#F0F0F0",
|
|
animation: {
|
|
duration: 500,
|
|
timingFunc: "easeIn",
|
|
},
|
|
});
|
|
this.doRefreshList()
|
|
},
|
|
onShow() {
|
|
if (this.needRefresh) {
|
|
this.needRefresh = false
|
|
this.doRefreshList()
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.doRefreshList()
|
|
},
|
|
methods: {
|
|
invoiceStatus,
|
|
invoiceStatusColor,
|
|
moneyTxt,
|
|
inputKeywords(e) {
|
|
this.keywords = e.detail.value
|
|
},
|
|
doSearchKeyWord() {
|
|
this.doRefreshList()
|
|
},
|
|
clearSearch() {
|
|
this.keywords = ''
|
|
this.doRefreshList()
|
|
},
|
|
//开票信息
|
|
openInvoiceInfo() {
|
|
uni.navigateTo({
|
|
url: '/pages/mine/mineAccount/invoiceInfo/invoiceInfo',
|
|
})
|
|
},
|
|
//去修改
|
|
doUpdate(e) {
|
|
const item = e.currentTarget.dataset.value
|
|
const params = JSON.stringify(item)
|
|
uni.navigateTo({
|
|
url: '/pages/mine/mineAccount/mineMakeInvoice/mineMakeInvoice?bean=' + params,
|
|
})
|
|
},
|
|
openDetail(e) {
|
|
const item = e.currentTarget.dataset.value
|
|
const params = JSON.stringify(item)
|
|
uni.navigateTo({
|
|
url: '/pages/mine/mineAccount/invoiceDetail/invoiceDetail?bean=' + params
|
|
})
|
|
},
|
|
//取消开票
|
|
cancelRecord(e) {
|
|
const item = e.currentTarget.dataset.value
|
|
const _self = this
|
|
uni.showModal({
|
|
title: '警告',
|
|
content: '请问您是否真的想要取消此次开票操作?',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
_self.doCancelInvoiceRecord(item)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//取消开票
|
|
doCancelInvoiceRecord(item) {
|
|
const _self = this
|
|
uni.showLoading({
|
|
title: '取消中...',
|
|
})
|
|
InvoiceApi.doCancelInvoiceRecord(item.invoiceRechargeId)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
_self.msgHint = '取消成功'
|
|
_self.msgType = 'success'
|
|
_self.$refs.msg.open()
|
|
_self.doRefreshList()
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgHint = err.msg ? err.msg : '取消出错了,请稍后重试'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
})
|
|
},
|
|
//去开票
|
|
openMake() {
|
|
uni.navigateTo({
|
|
url: '/pages/mine/mineAccount/minePayOrder/minePayOrder'
|
|
})
|
|
},
|
|
doRefreshList() {
|
|
console.log('正在刷新...')
|
|
const _self = this
|
|
_self.loadingState = 'loading'
|
|
_self.hasMore = 'more'
|
|
_self.pageData.page = 1
|
|
_self.pageData.keywords = _self.keywords
|
|
_self.doGetInvoiceRecordList(true)
|
|
},
|
|
doLoadMore() {
|
|
//判断是否正在加载中 与是否存在更多数据
|
|
const _self = this
|
|
if (_self.isLoadMore || _self.hasMore == 'noMore') {
|
|
return
|
|
}
|
|
_self.hasMore = 'loading'
|
|
_self.pageData.page = ++_self.pageData.page
|
|
_self.pageData.keywords = _self.keywords
|
|
_self.doGetInvoiceRecordList(false)
|
|
},
|
|
doGetInvoiceRecordList(isRefresh) {
|
|
const _self = this
|
|
_self.recordList = isRefresh ? [] : _self.recordList
|
|
_self.loadingState = isRefresh ? 'loading' : ''
|
|
InvoiceApi.doGetInvoiceRecordList(_self.pageData)
|
|
.then(res => {
|
|
uni.stopPullDownRefresh()
|
|
console.log(res)
|
|
var status = 'success'
|
|
status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
|
|
_self.loadingState = isRefresh ? status : ''
|
|
_self.recordList = _self.recordList.concat(res.rows)
|
|
_self.hasMore = _self.recordList.length < res.total ? 'more' : 'noMore'
|
|
_self.isLoadMore = false
|
|
})
|
|
.catch(err => {
|
|
uni.stopPullDownRefresh()
|
|
_self.loadingState = 'error'
|
|
_self.hasMore = 'more'
|
|
_self.isLoadMore = false
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.add-btn {
|
|
border-radius: 4px;
|
|
background-color: $btn-green-color;
|
|
color: $white-color;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
text-align: center;
|
|
font-family: PingFangSC-regular;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.add-btn:active {
|
|
background-color: $btn-green-color-active;
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
.order-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: white;
|
|
border-radius: 10rpx;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.record-title-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.record-options {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.options-btn {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
height: 24rpx;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.red {
|
|
background-color: $bg-red-color;
|
|
color: $white-color;
|
|
}
|
|
|
|
.green {
|
|
background-color: $bg-green-color;
|
|
color: $white-color;
|
|
}
|
|
|
|
.green:active {
|
|
background-color: $bg-green-deep-color;
|
|
color: $white-color;
|
|
}
|
|
|
|
.options-btn:nth-of-type(n+2) {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.red:active {
|
|
background-color: $red-color;
|
|
}
|
|
|
|
.record-title-status {
|
|
font-size: 20rpx;
|
|
line-height: 24rpx;
|
|
height: 24rpx;
|
|
text-align: center;
|
|
padding: 5rpx;
|
|
min-width: 80rpx;
|
|
border-radius: 5rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.col-yellow {
|
|
background-color: $primary-color;
|
|
color: $text-color;
|
|
}
|
|
|
|
.col-gray {
|
|
background-color: $bg-gray-deep-color;
|
|
color: $text-gray-desc-color;
|
|
}
|
|
|
|
.col-green {
|
|
background-color: $bg-green-color;
|
|
color: $text-brown-color;
|
|
}
|
|
|
|
.col-red {
|
|
background-color: $bg-red-color;
|
|
color: $text-brown-color;
|
|
}
|
|
|
|
.record-title-name {
|
|
font-size: 32rpx;
|
|
color: $text-color;
|
|
font-weight: bold;
|
|
flex: 1;
|
|
}
|
|
|
|
.record-number {
|
|
font-size: 24rpx;
|
|
color: $text-gray-desc-color;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.record-time {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.record-bottom-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.icon-time::before {
|
|
content: '';
|
|
background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODEyODg5NzI5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2MTgwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik01MTMgMzMuMjJjLTI2NS4xIDAtNDgwIDIxNC45LTQ4MCA0ODBzMjE0LjkgNDgwIDQ4MCA0ODAgNDgwLTIxNC45IDQ4MC00ODAtMjE0LjktNDgwLTQ4MC00ODB6IG0yMDguOSA2NTIuNTljLTExLjA1IDE5LjEzLTM1LjUxIDI1LjY5LTU0LjY0IDE0LjY0TDQ3NC4xIDU4OC45M2MtMTMuMDYtNy41NC0yMC4yNi0yMS4zNC0xOS45OS0zNS40MiAwLTAuMTctMC4wMS0wLjM0LTAuMDEtMC41MVYzMjkuOTVjMC0yMi4wOSAxNy45MS00MCA0MC00MHM0MCAxNy45MSA0MCA0MHYyMDEuMjNsMTczLjE3IDk5Ljk4YzE5LjEyIDExLjA1IDI1LjY4IDM1LjUxIDE0LjYzIDU0LjY1eiIgZmlsbD0iI2RiZGJkYiIgcC1pZD0iMzYxODEiPjwvcGF0aD48L3N2Zz4=');
|
|
background-size: cover;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.order-item:nth-of-type(n+2) {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.contact-desc {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 15px;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact-icon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.name {
|
|
line-height: 23rpx;
|
|
color: $text-color;
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
font-family: SourceHanSansSC-black;
|
|
}
|
|
|
|
.service-desc {
|
|
padding: 0px 15px 15px 15px;
|
|
line-height: 20px;
|
|
color: $text-color;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
font-family: SourceHanSansSC-regular;
|
|
}
|
|
|
|
.edit {
|
|
line-height: 20px;
|
|
border-radius: 4px;
|
|
background-color: $btn-green-color;
|
|
color: $white-color;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
font-family: PingFangSC-regular;
|
|
padding: 5rpx 10rpx;
|
|
}
|
|
|
|
.del {
|
|
line-height: 20px;
|
|
border-radius: 4px;
|
|
background-color: $btn-red-color;
|
|
color: $white-color;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
font-family: PingFangSC-regular;
|
|
padding: 5rpx 10rpx;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.del:active {
|
|
background-color: $btn-red-color-active;
|
|
}
|
|
|
|
.options-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.edit:active {
|
|
background-color: $btn-green-color-active;
|
|
}
|
|
|
|
|
|
.form-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
font-size: 14px;
|
|
width: 100vw;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 80vw;
|
|
padding: 10px;
|
|
}
|
|
|
|
.form-item-title {
|
|
flex: .3;
|
|
font-size: 14px;
|
|
color: $text-color;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
|
|
.form-item-title:not(.no-after)::before {
|
|
content: "*";
|
|
color: $red-color;
|
|
font-size: 14px;
|
|
margin-left: 1px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-item-content {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
</style> |