582 lines
14 KiB
Vue
582 lines
14 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="contenttop">
|
|
<view class="flex-start">
|
|
<input type="text" placeholder="请输入抬头名称" v-model="form.user_name" @input="onInput" />
|
|
<text @click="popupshow = !popupshow">筛选</text>
|
|
</view>
|
|
<view class="contenttopbox flex-center">
|
|
<text @click="form.type = '-1',form.page = '1',form.user_name = '',invoicingrecordsthatneed()"
|
|
:class="form.type == '-1'?'classtext':''">待审核</text>
|
|
<text @click="form.type = '1',form.page = '1',form.user_name = '',invoicingrecordsthatneed()"
|
|
:class="form.type == '1'?'classtext':''">已处理</text>
|
|
<image src="components/help (4).JPG" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="contentbox">
|
|
<view class="contentboxitem" v-for="(item,index) in form.list" :key="index">
|
|
<view class="contentboxitemtop flex-between">
|
|
<text>{{item.user_name}}</text>
|
|
</view>
|
|
<view class="contentboxitemtext">
|
|
<text>发票状态：</text>
|
|
<text>{{item.status}}</text>
|
|
</view>
|
|
<image src="components/help (15).JPG" mode=""></image>
|
|
<view class="contentboxitemtext">
|
|
<text>发票类型：</text>
|
|
<text>{{item.type}}</text>
|
|
</view>
|
|
<view class="contentboxitemtext">
|
|
<text>发票金额：</text>
|
|
<text>{{item.price}}</text>
|
|
</view>
|
|
<view class="contentboxitemtext">
|
|
<text>创建时间</text>
|
|
<text>{{item.createtime}}</text>
|
|
</view>
|
|
<view class="contentboxitemtext flex-start" @click="previewImage(item.img)">
|
|
<text>开票凭证</text>
|
|
<image :src="item.img" mode="aspectFill"></image>
|
|
</view>
|
|
<view v-if="item.status == '待审核'" class="contentboxitembutton flex-center">
|
|
<view class="buttonone" @click="storereviewandinvoicing(item,1)">
|
|
通过
|
|
</view>
|
|
<view class="buttontow" @click="clickconfirmshow = true,no = ''">
|
|
拒绝
|
|
</view>
|
|
</view>
|
|
<image src="components/help (7).JPG" mode=""></image>
|
|
<u-popup :show="clickconfirmshow" mode="center" :round="10">
|
|
<view class="popupshow">
|
|
<view class="Box_box flex-between">
|
|
<view>拒绝理由：</view>
|
|
<u--textarea v-model="no" placeholder="请输入拒绝理由"></u--textarea>
|
|
</view>
|
|
<view class="content_bottom">
|
|
<view class="content_bottomone" @click="storereviewandinvoicing(item,6)">
|
|
确定
|
|
</view>
|
|
<view class="content_bottomtow" @click="clickconfirmshow = false,no = ''">
|
|
取消
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="form.status" />
|
|
<u-popup :show="popupshow" @close="popupshow = !popupshow" :round="10">
|
|
<view class="popupshow">
|
|
<view class="popupshowtop">
|
|
筛选
|
|
</view>
|
|
<view class="popupshowbox">
|
|
<view class="popupshowboxtitel">
|
|
按时间筛选
|
|
</view>
|
|
<view class="popupshowbox_box flex-between">
|
|
<view class="popupshowbox_item" v-for="(item,index) in daylist" :key="index"
|
|
@click="clickday(item,index)" :class="selectshow === index ? 'select':''">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="popupshowbox_itemzdy flex-between" v-if="showpickerbox && selectshow == 2">
|
|
<view class="popupshowbox_item" @click="showpicker=!showpicker,clickshowpicker = 1">
|
|
{{starttime}}
|
|
</view>
|
|
-<view class="popupshowbox_item" @click="showpicker=!showpicker,clickshowpicker = 2">
|
|
{{endtime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="boxboutton flex-between">
|
|
<view class="boxbouttonitem" @click="reset">
|
|
重置
|
|
</view>
|
|
<view class="boxbouttonitem" @click="clickdetermine">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<u-datetime-picker :show="showpicker" mode="date" @cancel="showpicker = !showpicker"
|
|
@confirm="confirmpicker"></u-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
clickconfirmshow: false,
|
|
popupshow: false,
|
|
showpicker: false, //选择时间
|
|
showpickerbox: false, //是否显示这个盒子
|
|
clickshowpicker: '',
|
|
starttime: '', //起始时间
|
|
endtime: '',
|
|
selectshow: '', //选中
|
|
no: '',
|
|
form: {
|
|
user_name: '',
|
|
time: "",
|
|
page: 1,
|
|
type: '-1',
|
|
status: 'loadmore',
|
|
list: []
|
|
},
|
|
daylist: [{
|
|
id: 1,
|
|
name: '仅30天'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '近180天'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '自定义'
|
|
}
|
|
],
|
|
}
|
|
},
|
|
async onLoad(e) {
|
|
this.invoicingrecordsthatneed()
|
|
|
|
},
|
|
onReachBottom() {
|
|
if (this.form.status != 'nomore') {
|
|
this.form.page = ++this.form.page;
|
|
this.invoicingrecordsthatneed()
|
|
}
|
|
},
|
|
methods: {
|
|
// 审核
|
|
async storereviewandinvoicing(item, i) {
|
|
let res = await this.api.storereviewandinvoicing({
|
|
id: item.id,
|
|
no: this.no,
|
|
s_type: i
|
|
})
|
|
this.reset()
|
|
},
|
|
// 查看图片
|
|
previewImage(url) {
|
|
uni.previewImage({
|
|
current: 1,
|
|
urls: [url]
|
|
});
|
|
},
|
|
|
|
// 时间
|
|
clickday(item, index) {
|
|
|
|
const d = new Date()
|
|
const year = d.getFullYear()
|
|
let month = d.getMonth() + 1
|
|
let date = d.getDate()
|
|
month = month < 10 ? `0${month}` : month
|
|
date = date < 10 ? `0${date}` : date
|
|
switch (index) {
|
|
case 0:
|
|
this.starttime = `${(month-1)==0?(year-1):year}-${(month-1)==0?12:(month-1)}-${date}`
|
|
this.endtime = `${year}-${month}-${date}`
|
|
this.showpickerbox = false
|
|
break;
|
|
case 1:
|
|
this.starttime = `${year}-${month>6?(month-6):(month+12-6)}-${date}`
|
|
this.endtime = `${year}-${month}-${date}`
|
|
this.showpickerbox = false
|
|
break;
|
|
case 2:
|
|
this.starttime = '' //起始时间
|
|
this.endtime = ''
|
|
this.showpickerbox = true
|
|
break;
|
|
}
|
|
this.selectshow = index
|
|
},
|
|
// 确定时间
|
|
confirmpicker(e) {
|
|
console.log(this.clickshowpicker, uni.$u.timeFrom(e.value, 'yyyy-mm-dd'))
|
|
if (this.clickshowpicker == 1) {
|
|
this.starttime = uni.$u.timeFrom(e.value, 'yyyy-mm-dd')
|
|
}
|
|
if (this.clickshowpicker == 2) {
|
|
this.endtime = uni.$u.timeFrom(e.value, 'yyyy-mm-dd')
|
|
}
|
|
this.showpicker = !this.showpicker
|
|
},
|
|
// 确定
|
|
clickdetermine() {
|
|
if (this.starttime != '' && this.endtime != '') {
|
|
this.form.time = `${this.starttime} 00:00:00,${this.endtime} 00:00:00`
|
|
}
|
|
this.popupshow = false
|
|
this.invoicingrecordsthatneed()
|
|
},
|
|
// 重置
|
|
reset() {
|
|
this.form = {
|
|
user_name: '',
|
|
time: "",
|
|
page: 1,
|
|
type: '-1',
|
|
status: 'loadmore',
|
|
list: []
|
|
}
|
|
this.selectshow = ''
|
|
this.starttime = ''
|
|
this.endtime = ''
|
|
this.popupshow = false
|
|
this.invoicingrecordsthatneed()
|
|
},
|
|
// 搜索
|
|
onInput(e) {
|
|
if ([...e.detail.value].length >= 2) {
|
|
this.form.page = 1
|
|
this.form.list = []
|
|
uni.$u.debounce(this.invoicingrecordsthatneed, 500)
|
|
}
|
|
},
|
|
// 列表
|
|
async invoicingrecordsthatneed() {
|
|
this.form.status = 'loading';
|
|
let res = await this.api.invoicingrecordsthatneed({
|
|
user_name: this.form.user_name,
|
|
time: this.form.time,
|
|
page: this.form.page,
|
|
status: this.form.type,
|
|
})
|
|
if (this.form.page == 1 && res.data.length == 0) {
|
|
this.form.list = res.data
|
|
this.form.status = 'nomore'
|
|
return false;
|
|
} else {
|
|
setTimeout(() => {
|
|
if (this.form.page == 1) {
|
|
this.form.list = res.data
|
|
} else {
|
|
this.form.list = [...this.form.list, ...res.data]
|
|
}
|
|
if (res.data.length < 10) this.form.status = 'nomore';
|
|
else this.form.status = 'loadmore';
|
|
}, 500)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #F9F9F9;
|
|
}
|
|
|
|
.content {
|
|
padding: 0;
|
|
|
|
.contenttop {
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
padding: 48rpx 28rpx 0rpx 28rpx;
|
|
|
|
.flex-start {
|
|
input {
|
|
padding: 18rpx 24rpx;
|
|
height: 64rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
flex: auto;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
text {
|
|
padding: 0 0 0 24rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
|
|
.contenttopbox {
|
|
text {
|
|
width: 33%;
|
|
text-align: center;
|
|
padding: 32rpx 0 24rpx 0;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.classtext {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
position: relative;
|
|
|
|
&::after {
|
|
width: 30%;
|
|
border-bottom: 5rpx solid #318AFE;
|
|
position: absolute;
|
|
bottom: 0;
|
|
content: '';
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.popupshow {
|
|
padding: 0 28rpx;
|
|
|
|
.popupshowtop {
|
|
margin-top: 32rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.popupshowbox {
|
|
.popupshowboxtitel {
|
|
margin-top: 32rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.popupshowbox_box {
|
|
width: 100%;
|
|
|
|
.popupshowbox_item {
|
|
margin-top: 24rpx;
|
|
width: 176rpx;
|
|
height: 56rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
border: 2rpx solid #D9D9D9;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
line-height: 56rpx;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
width: 176rpx;
|
|
}
|
|
|
|
.select {
|
|
border: 1px solid #1b00ff;
|
|
color: #0600ff;
|
|
}
|
|
|
|
.popupshowbox_itemzdy {
|
|
width: 100%;
|
|
|
|
.popupshowbox_item {
|
|
margin-top: 24rpx;
|
|
width: 40%;
|
|
height: 56rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
border: 2rpx solid #D9D9D9;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
line-height: 56rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.boxboutton {
|
|
margin: 400rpx 0 50rpx 0;
|
|
|
|
.boxbouttonitem {
|
|
width: 330rpx;
|
|
height: 72rpx;
|
|
border-radius: 50rpx 50rpx 50rpx 50rpx;
|
|
}
|
|
|
|
.boxbouttonitem:nth-child(1) {
|
|
border: 2rpx solid #D9D9D9;
|
|
background: #FFFFFF;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.boxbouttonitem:nth-child(2) {
|
|
background: #2F87FD;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentbox {
|
|
width: 100%;
|
|
padding: 0 28rpx;
|
|
|
|
.contentboxitem {
|
|
margin-top: 32rpx;
|
|
padding: 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
|
.contentboxitemtop {
|
|
text:nth-child(1) {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #F39D52;
|
|
}
|
|
}
|
|
|
|
.contentboxitemtext {
|
|
margin-top: 24rpx;
|
|
|
|
text:nth-child(1) {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
margin-left: 24rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
image {
|
|
margin-left: 24rpx;
|
|
width: 158rpx;
|
|
height: 94rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #D9D9D9;
|
|
}
|
|
}
|
|
|
|
.contentboxitembutton {
|
|
margin-top: 32rpx;
|
|
|
|
.buttonone {
|
|
width: 244rpx;
|
|
height: 72rpx;
|
|
background: #2F87FD;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.buttontow {
|
|
margin-left: 32rpx;
|
|
width: 244rpx;
|
|
height: 72rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #707070;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
}
|
|
}
|
|
|
|
.popupshow {
|
|
width: 600rpx;
|
|
border-radius: 16rpx;
|
|
|
|
.Box_box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
text-align: right;
|
|
padding: 24rpx;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.content_bottom {
|
|
margin: 70rpx auto 60rpx auto;
|
|
width: 70%;
|
|
height: 84rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.content_bottomone {
|
|
padding: 16rpx 60rpx;
|
|
background: #288EFB;
|
|
border-radius: 32rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
|
|
.content_bottomtow {
|
|
padding: 16rpx 60rpx;
|
|
background: red;
|
|
border-radius: 32rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |