wo123/shengqingqixie-wechat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
shengqingqixie-wechat/pages/packageA/user/my_invoice.vue

516 lines
17 KiB
Vue
Raw Normal View History

123
2024-07-09 18:11:31 +08:00
<template>
<view class="template-edit tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view style="padding-left: 15rpx;" @click="goBack()">
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
</view>
<view class="tn-margin-top"
style=";text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
<tn-tabs :list="[{name:'发票申请'}]" :current="topCurrent" activeColor="#000" :bold="false"
:fontSize="36"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view style="padding:40rpx;">
<view class="tn-flex tn-flex-center tn-flex-row-between ">
<view>
已有发票 {{count}} 张
</view>
<view>
<tn-button @click="addMod = true" backgroundColor="#3D7EFF" size="sm"
fontColor="#ffffff">发票申请</tn-button>
</view>
</view>
</view>
<view style="padding:0rpx 40rpx;" v-for="item in allList">
<view @click="openInfo(item)"
class="tn-flex tn-flex-center tn-flex-row-between tn-flex-col-center bg-flex-shadow tn-shadow-blur">
<view>
<view style="font-size: 34rpx;font-weight: 600;">
<text>发票金额：</text>
<text class="tn-icon-money-fill" style="color: #28B93D;"></text>
<text style="color: #28B93D;">{{item.money}}</text>
</view>
<view style="margin-top: 10rpx;font-size: 28rpx;color: #999999;">
<text>{{item.createtime}}</text>
</view>
</view>
<view>
<tn-tag v-if="item.if_ssue==1" backgroundColor="#31E749" fontColor="#ffffff"
shape="radius">已通过</tn-tag>
<tn-tag v-if="item.if_ssue==2" backgroundColor="#E83A30" fontColor="#ffffff"
shape="radius">被拒绝</tn-tag>
<tn-tag v-if="item.if_ssue==3" backgroundColor="#FF7043" fontColor="#ffffff"
shape="radius">审核中</tn-tag>
<text class="tn-icon-right-triangle" style="margin-left: 10rpx;"></text>
</view>
</view>
<view style="width: 100%;height: 1px;background-color: #F8F7F8;margin: 40rpx 0rpx;"></view>
</view>
</view>
<tn-popup v-model="addMod" mode="right" :safeAreaInsetBottom="true" width="100%">
<tn-nav-bar :isBack="false" backTitle="" :alpha="true" :bottomShadow="false">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view style="padding-left: 15rpx;" @click="addMod = false">
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
</view>
<view class="tn-margin-top"
style="text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
<tn-tabs :list="[{name:'信息填写'}]" activeColor="#000" :bold="false" :fontSize="34"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
<view style="padding: 30rpx;">
123
2024-07-10 18:13:57 +08:00
<view @click="tt_show_do" class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
<view>
<view v-if="header_id_name == ''">请选择开票信息</view>
<view v-if="header_id_name != ''">
<view style="padding: 30rpx 0rpx;">
<view>申请人：{{header_id_name.name}}</view>
<view>公司名称：{{header_id_name.unit}}</view>
<view>纳税人识别号：{{header_id_name.taxpayer_identification_number}}</view>
<view>单位地址：{{header_id_name.unit_address}}</view>
<view>单位电话：{{header_id_name.telephone}}</view>
<view>银行基本户账号：{{header_id_name.bank_basic_account_number}}</view>
<view>开户行：{{header_id_name.bank}}</view>
</view>
</view>
123
2024-07-09 18:11:31 +08:00
</view>
<view>
123
2024-07-10 18:13:57 +08:00
<!-- <tn-button @click="tt_add_show = true" backgroundColor="#3D7EFF" size="sm"
fontColor="#ffffff">添加开票信息</tn-button> -->
123
2024-07-09 18:11:31 +08:00
<text style="margin-left: 20rpx;" class="tn-icon-right"></text>
</view>
</view>
123
2024-07-10 18:13:57 +08:00
<!-- <tn-select v-model="tt_show" mode="single" :list="tt_list" @confirm="tt_confirm"></tn-select> -->
123
2024-07-09 18:11:31 +08:00
</view>
123
2024-07-10 18:13:57 +08:00
<view class="text" style="padding:20rpx 40rpx;">
123
2024-07-09 18:11:31 +08:00
<view style="text-align: center;font-size: 32rpx;font-weight: 600;">申请发票</view>
<tn-form ref="form" :labelWidth="180">
<tn-form-item prop="name" label="发票类型">
<tn-input v-model="invoice_type_name" :customStyle="{width: '450rpx'}"
@click="invoice_type_show = true" inputAlign="right" :disabled="true" />
<tn-action-sheet :list="actionSheetList" v-model="invoice_type_show"
@click="actionSheetCallback"></tn-action-sheet>
</tn-form-item>
<tn-form-item prop="name">
<tn-input placeholder="开票金额" :customStyle="{width: '600rpx'}" v-model="money" />
</tn-form-item>
</tn-form>
<view style="text-align: center;margin-top: 50rpx;">
<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff" @click="addMod = false"
width="40%">取消</tn-button>
<tn-button backgroundColor="#3D7EFF" height="70rpx" width="40%" fontColor="#ffffff"
style="margin-left: 30rpx;" @click="kp_add_do">提交</tn-button>
</view>
</view>
</view>
</tn-popup>
<tn-popup v-model="infoMod" mode="right" :safeAreaInsetBottom="true" width="100%">
<tn-nav-bar :isBack="false" backTitle="" :alpha="true" :bottomShadow="false">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view style="padding-left: 15rpx;" @click="infoMod = false">
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
</view>
<view class="tn-margin-top"
style="text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
<tn-tabs :list="[{name:'发票信息查看'}]" activeColor="#000" :bold="false" :fontSize="34"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
<view class="info_text" style="padding:20rpx 40rpx;">
<view>
<text>申请人：</text>
<text>{{info.header.name}}</text>
</view>
<view>
<text>公司名称：</text>
<text>{{info.header.unit}}</text>
</view>
<view>
<text>纳税人识别号：</text>
<text>{{info.header.taxpayer_identification_number}}</text>
</view>
<view>
<text>单位地址：</text>
<text>{{info.header.unit_address}}</text>
</view>
<view>
<text>单位电话：</text>
<text>{{info.header.telephone}}</text>
</view>
<view>
<text>银行基本账户：</text>
<text>{{info.header.bank_basic_account_number}}</text>
</view>
<view>
<text>开户行：</text>
<text>{{info.header.bank}}</text>
</view>
<view>
<text>发票金额：</text>
<text>{{info.money}}</text>
</view>
<view>
<text>发票类别：</text>
<text>{{info.invoice_type==1?'普票':'专票'}}</text>
</view>
<view>
<text>申请状态：</text>
<tn-tag v-if="info.if_ssue==1" backgroundColor="#31E749" fontColor="#ffffff"
shape="radius">已通过</tn-tag>
<tn-tag v-if="info.if_ssue==2" backgroundColor="#E83A30" fontColor="#ffffff"
shape="radius">被拒绝</tn-tag>
<tn-tag v-if="info.if_ssue==3" backgroundColor="#FF7043" fontColor="#ffffff"
shape="radius">审核中</tn-tag>
</view>
<view v-if="info.if_ssue==2">
<text>拒绝原因：</text>
<text>{{info.reason}}</text>
</view>
<view>
<text>发票图片：</text>
<text v-if="info.invoice_image==''||info.invoice_image==null">待上传</text>
<image @click="openImg" v-if="info.invoice_image!=''&&info.invoice_image!=null"
:src="apiImgUrl+info.invoice_image" style="width: 100%;margin-top: 20rpx;" mode="widthFix">
</image>
</view>
<view style="text-align: center;margin-top: 50rpx;">
<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff" @click="infoMod = false"
width="40%">关闭</tn-button>
</view>
</view>
</view>
</tn-popup>
123
2024-07-10 18:13:57 +08:00
<tn-popup v-model="tt_add_show" mode="right" :safeAreaInsetBottom="true" width="100%">
<tn-nav-bar :isBack="false" backTitle="" :alpha="true" :bottomShadow="false">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
<view style="padding-left: 15rpx;" @click="tt_add_show = false">
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
</view>
<view class="tn-margin-top"
style="text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
<tn-tabs :list="[{name:'选择开票信息'}]" activeColor="#000" :bold="false" :fontSize="34"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
<view v-if="!tt_add_show_add" style="padding:0rpx 30rpx 150rpx 30rpx;">
<view style="text-align:right;">
<tn-button @click="tt_add_show_add = true" backgroundColor="#3D7EFF" size="sm"
fontColor="#ffffff">添加开票信息</tn-button>
</view>
<tn-radio-group v-model="header_id" width="100%" wrap @change="radioGroupChange">
<block v-for="(item,index) in tt_list">
<tn-radio :name="item.id+''" :size="40" borderColor="#3D7EFF" activeColor="#3D7EFF">
<view style="padding: 30rpx 0rpx;margin-left: 30px;">
<view>申请人：{{item.name}}</view>
<view>公司名称：{{item.unit}}</view>
<view>纳税人识别号：{{item.taxpayer_identification_number}}</view>
<view>单位地址：{{item.unit_address}}</view>
<view>单位电话：{{item.telephone}}</view>
<view>银行基本户账号：{{item.bank_basic_account_number}}</view>
<view>开户行：{{item.bank}}</view>
</view>
</tn-radio>
</block>
</tn-radio-group>
</view>
<view style="position: fixed;bottom: 80rpx;width: 92%;margin: 0 auto;text-align: center;">
<tn-button @click="tt_add_show = false" backgroundColor="#3D7EFF" width="300rpx" height="80rpx"
fontColor="#ffffff">确定</tn-button>
</view>
<view v-if="tt_add_show_add" class="text" style="padding:20rpx 40rpx;">
<view style="text-align: center;font-size: 32rpx;font-weight: 600;">添加开票信息</view>
<tn-form ref="form" :labelWidth="120">
<tn-form-item prop="name">
<tn-input placeholder="申请人" :customStyle="{width: '600rpx'}" v-model="addForm.name" />
</tn-form-item>
<tn-form-item prop="unit">
<tn-input placeholder="公司名称" :customStyle="{width: '600rpx'}" v-model="addForm.unit" />
</tn-form-item>
<tn-form-item prop="taxpayer_identification_number">
<tn-input placeholder="纳税人识别号" :customStyle="{width: '600rpx'}"
v-model="addForm.taxpayer_identification_number" />
</tn-form-item>
<tn-form-item prop="unit_address">
<tn-input placeholder="单位地址" :customStyle="{width: '600rpx'}"
v-model="addForm.unit_address" />
</tn-form-item>
<tn-form-item prop="telephone">
<tn-input placeholder="单位电话" :customStyle="{width: '600rpx'}" v-model="addForm.telephone" />
</tn-form-item>
<tn-form-item prop="bank_basic_account_number">
<tn-input placeholder="银行基本户账号" :customStyle="{width: '600rpx'}"
v-model="addForm.bank_basic_account_number" />
</tn-form-item>
<tn-form-item prop="bank">
<tn-input placeholder="开户行" :customStyle="{width: '600rpx'}" v-model="addForm.bank" />
</tn-form-item>
</tn-form>
<view style="text-align: center;margin-top: 50rpx;">
<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff"
@click="tt_add_show_add = false" width="40%">取消</tn-button>
<tn-button backgroundColor="#3D7EFF" height="70rpx" width="40%" fontColor="#ffffff"
style="margin-left: 30rpx;" @click="tt_add_do">提交</tn-button>
</view>
</view>
</view>
</tn-popup>
123
2024-07-09 18:11:31 +08:00
</view>
</template>
<script>
import {
findMemberID,
addInvoiceHeader,
addInvoiceLog,
someMethod,
getInvoiceLogWithHeader
} from "@/util/api";
import store from "@/store";
export default {
data() {
return {
apiImgUrl: this.$store.state.imgUrl,
addMod: false,
infoMod: false,
123
2024-07-10 18:13:57 +08:00
tt_add_show_add: false,
123
2024-07-09 18:11:31 +08:00
addForm: {
name: '',
taxpayer_identification_number: '',
unit: '',
unit_address: '',
telephone: '',
bank_basic_account_number: '',
bank: '',
association_id: 0,
},
invoice_type_show: false,
actionSheetList: [{
text: '普票',
id: 1,
},
{
text: '专票',
id: 2
}
],
123
2024-07-10 18:13:57 +08:00
header_id: -1,
header_id_name: '',
123
2024-07-09 18:11:31 +08:00
invoice_type_name: '普票',
invoice_type: 1,
tt_add_show: false,
tt_show: false,
tt_list: [],
money: '',
page: 1,
allList: [],
info: {},
count: 0
}
},
onLoad() {
var gid = uni.getStorageSync('Gid');
this.addForm.association_id = gid;
this.findMemberList();
this.getList();
},
onReachBottom() {
this.page += 1;
this.getList();
},
methods: {
123
2024-07-10 18:13:57 +08:00
radioGroupChange(d) {
const item = this.tt_list.find(item => item.id == d);
console.log(item);
this.header_id_name = item;
},
123
2024-07-09 18:11:31 +08:00
openImg() {
uni.previewImage({
current: 0,
urls: [this.apiImgUrl + this.info.invoice_image],
});
},
openInfo(d) {
getInvoiceLogWithHeader({
id: d.id
})
.then(res => {
console.log(res);
this.info = res.data;
this.infoMod = true;
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
actionSheetCallback(index) {
this.invoice_type_name = this.actionSheetList[index].text;
this.invoice_type = this.actionSheetList[index].id;
},
tt_show_do() {
123
2024-07-10 18:13:57 +08:00
this.tt_add_show = true;
// if (this.tt_list.length == 0) {
// uni.showToast({
// title: '请先添加开票信息',
// icon: 'none',
// duration: 2000
// });
// this.tt_add_show = true;
// } else {
// this.tt_show = true;
// }
123
2024-07-09 18:11:31 +08:00
},
kp_add_do() {
if (this.header_id == 0) {
uni.showToast({
title: '请选择开票信息',
icon: 'none',
duration: 2000
});
return;
}
if (this.money == '' || this.money <= 0) {
uni.showToast({
title: '请填写金额',
icon: 'none',
duration: 2000
});
return;
}
addInvoiceLog({
association_id: this.addForm.association_id,
header_id: this.header_id,
money: this.money,
invoice_type: this.invoice_type
})
.then(res => {
console.log(res);
if (res.code == 1) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
this.addMod = false;
this.header_id = 0;
this.header_id_name = '请选择开票信息';
this.invoice_type_name = '普票';
this.invoice_type = 1;
this.money = '';
123
2024-07-10 18:13:57 +08:00
this.allList = [];
this.page = 1;
this.getList();
123
2024-07-09 18:11:31 +08:00
} else {
uni.showModal({
title: '提示',
content: res.msg,
})
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
tt_confirm(d) {
console.log(d);
this.header_id_name = d[0].label;
this.header_id = d[0].value;
},
tt_add_do() {
addInvoiceHeader(this.addForm)
.then(res => {
console.log(res);
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
this.tt_add_show = false;
this.findMemberList();
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
findMemberList() {
findMemberID()
.then(res => {
console.log(res);
if (res.data == null) {
this.tt_list = [];
} else {
123
2024-07-10 18:13:57 +08:00
// var key = res.data;
// const transformedSelectList = key.map(item => ({
// value: item.id,
// label: item.unit
// }));
this.tt_list = res.data;
123
2024-07-09 18:11:31 +08:00
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
getList() {
someMethod({
page: this.page,
size: 10
})
.then(res => {
console.log(res);
this.allList.push(...res.data.data);
123
2024-07-10 18:13:57 +08:00
this.count = res.data.count;
123
2024-07-09 18:11:31 +08:00
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
goBack() {
if (getCurrentPages().length > 1) {
uni.navigateBack()
} else {
uni.redirectTo({
url: '/pages/index/index'
})
}
},
}
}
</script>
<style scoped>
.info_text view {
margin-bottom: 40rpx;
}
</style>
Reference in New Issue Copy Permalink