543 lines
18 KiB
Vue
543 lines
18 KiB
Vue
<template>
|
|
<view style="background: #F1F2F8;min-height: 100vh;" v-cloak>
|
|
<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 style="width: 83%;font-weight: bold;">
|
|
<text>发票开取</text>
|
|
</view>
|
|
</view>
|
|
</tn-nav-bar>
|
|
<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
|
<view v-if="allList.length==0" style="text-align: center;padding-top: 200rpx;">
|
|
<image class="no-img" src="/static/_6@2x.png" style="width: 250rpx;" mode="widthFix"></image>
|
|
<view style="font-size: 34rpx;font-weight: bold;margin-top: 40rpx;">暂无发票数据</view>
|
|
<view style="font-size: 28rpx;color: #BABDC7;margin-top: 20rpx;">未查找到您的发票信息，赶快去申请～</view>
|
|
<view style="margin-top: 80rpx;">
|
|
<tn-button width="450rpx" height="85rpx" backgroundColor="#3056D3" shape="round"
|
|
fontColor="#ffffff">去申请发票</tn-button>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 30rpx;">
|
|
<view v-for="item in 5"
|
|
style="margin-bottom: 30rpx;background-color: #FFF;border-radius: 20rpx;padding: 30rpx;">
|
|
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
|
|
<view style="font-size: 32rpx;font-weight: bold;">好想你健康食品股份有限公司</view>
|
|
<view style="color: #FF9847;">
|
|
<text>待审核</text>
|
|
<text class="tn-icon-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="view_text" style="color: #666666;">
|
|
<view>
|
|
<text>上官绪波 / 2024.07.12</text>
|
|
</view>
|
|
<view>
|
|
<text>发票金额：</text>
|
|
<text>¥1385</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 1rpx;border-top: #BABDC7 1rpx dashed;margin: 30rpx 0rpx;"></view>
|
|
<view style="text-align: right;">
|
|
<tn-button @click="infoMod = true" height="70rpx" width="200rpx" fontColor="#999999"
|
|
shape="round" backgroundColor="#999999" :plain="true">查看</tn-button>
|
|
</view>
|
|
</view>
|
|
<view @click="addMod = true"
|
|
style="position: fixed;bottom: 10%;right: 0;box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(48,86,211,0.25);text-align: center;color: #FFF;;background-color: #3056D3;border-radius: 80rpx 0 0rpx 80rpx;width: 180rpx;;height: 70rpx;line-height: 70rpx;">
|
|
申请发票
|
|
</view>
|
|
</view>
|
|
<!-- <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="" :bottomShadow="true" backgroundColor="#FFFFFF">
|
|
<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 style="width: 83%;font-weight: bold;">
|
|
<text>申请发票</text>
|
|
</view>
|
|
</view>
|
|
</tn-nav-bar>
|
|
<view :style="{paddingTop: vuex_custom_bar_height+'px'}"
|
|
style="background-color: #F1F2F8;min-height: 100vh;">
|
|
<view class="text" style="padding:30rpx;">
|
|
<view style="background-color: #FFF;border-radius: 20rpx;padding:10rpx 30rpx;">
|
|
<tn-form ref="form" :labelWidth="150">
|
|
<tn-form-item label="申请人" prop="name">
|
|
<tn-input placeholder="申请人" inputAlign="right" :customStyle="{width: '470rpx'}"
|
|
v-model="addForm.name" />
|
|
</tn-form-item>
|
|
<tn-form-item label="公司名称" prop="unit">
|
|
<tn-input placeholder="公司名称" inputAlign="right" :customStyle="{width: '470rpx'}"
|
|
v-model="addForm.unit" />
|
|
</tn-form-item>
|
|
<tn-form-item label="纳税人识别号" :labelWidth="200" prop="taxpayer_identification_number">
|
|
<tn-input placeholder="纳税人识别号" inputAlign="right" :customStyle="{width: '420rpx'}"
|
|
v-model="addForm.taxpayer_identification_number" />
|
|
</tn-form-item>
|
|
<tn-form-item label="单位地址" prop="unit_address">
|
|
<tn-input placeholder="单位地址" inputAlign="right" :customStyle="{width: '470rpx'}"
|
|
v-model="addForm.unit_address" />
|
|
</tn-form-item>
|
|
<tn-form-item label="单位电话" prop="telephone">
|
|
<tn-input placeholder="单位电话" inputAlign="right" :customStyle="{width: '470rpx'}"
|
|
v-model="addForm.telephone" />
|
|
</tn-form-item>
|
|
<tn-form-item label="银行基本户账号" :labelWidth="220" prop="bank_basic_account_number">
|
|
<tn-input placeholder="银行基本户账号" inputAlign="right" :customStyle="{width: '410rpx'}"
|
|
v-model="addForm.bank_basic_account_number" />
|
|
</tn-form-item>
|
|
<tn-form-item label="开户行" prop="bank">
|
|
<tn-input placeholder="开户行" inputAlign="right" :customStyle="{width: '470rpx'}"
|
|
v-model="addForm.bank" />
|
|
</tn-form-item>
|
|
<tn-form-item label="发票金额" prop="bank" :borderBottom="false">
|
|
<tn-input placeholder="发票金额" inputAlign="right" :customStyle="{width: '470rpx'}"
|
|
v-model="addForm.money" />
|
|
</tn-form-item>
|
|
</tn-form>
|
|
</view>
|
|
</view>
|
|
<view
|
|
style="position: fixed;bottom:0px;width: 100%;background-color: #FFFFFF;box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186,189,199,0.2);padding:30rpx 30rpx 40rpx 30rpx;">
|
|
<view
|
|
style="margin: 0 auto;line-height: 80rpx;height: 80rpx;font-size: 32rpx;font-weight: bold;text-align: center;width: 80%;color: #ffffff;;background: #3056D3;border: 1rpx solid #3056D3;border-radius:90rpx;">
|
|
<text>申请发票</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</tn-popup>
|
|
<tn-popup v-model="infoMod" mode="right" :safeAreaInsetBottom="true" width="100%">
|
|
<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="addMod = false">
|
|
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
|
|
</view>
|
|
<view style="width: 83%;font-weight: bold;">
|
|
<text>发票开取</text>
|
|
</view>
|
|
</view>
|
|
</tn-nav-bar>
|
|
<view :style="{paddingTop: vuex_custom_bar_height+'px'}"
|
|
style="background-color: #F1F2F8;min-height: 100vh;">
|
|
<view style="padding: 30rpx;">
|
|
<view style="background-color: #FFF;border-radius: 20rpx;padding: 30rpx;">
|
|
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
|
|
<view style="font-size: 32rpx;font-weight: bold;">好想你健康食品股份有限公司</view>
|
|
<view style="color: #FF9847;">待审核</view>
|
|
</view>
|
|
<view class="view_text" style="font-size: 28rpx;color: #666666;margin-top: 30rpx;">
|
|
<view>
|
|
<text>申请人：</text>
|
|
<text>上官绪波</text>
|
|
</view>
|
|
<view>
|
|
<text>申请时间：</text>
|
|
<text>2024.07.16</text>
|
|
</view>
|
|
<view>
|
|
<text>单位电话：</text>
|
|
<text>0371-65560130</text>
|
|
</view>
|
|
<view>
|
|
<text>单位地址：</text>
|
|
<text>河南省新郑市中华北路199号</text>
|
|
</view>
|
|
<view>
|
|
<text>银行基本户账号：</text>
|
|
<text>130701012000564</text>
|
|
</view>
|
|
<view>
|
|
<text>纳税人识别号：</text>
|
|
<text>310227687656440</text>
|
|
</view>
|
|
<view>
|
|
<text>开户行：</text>
|
|
<text>郑州市金水区建设银行黄河路支行</text>
|
|
</view>
|
|
<view>
|
|
<text>发票金额：</text>
|
|
<text>¥680</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
style="position: fixed;bottom:0px;width: 100%;background-color: #FFFFFF;box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186,189,199,0.2);padding:30rpx 30rpx 40rpx 30rpx;">
|
|
<view
|
|
style="margin: 0 auto;line-height: 80rpx;height: 80rpx;font-size: 32rpx;font-weight: bold;text-align: center;width: 80%;color: #ffffff;;background: #3056D3;border: 1rpx solid #3056D3;border-radius:90rpx;">
|
|
<text>下载发票</text>
|
|
</view>
|
|
</view>
|
|
</tn-popup>
|
|
<!-- <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> -->
|
|
</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,
|
|
tt_add_show_add: false,
|
|
addForm: {
|
|
name: '',
|
|
taxpayer_identification_number: '',
|
|
unit: '',
|
|
unit_address: '',
|
|
telephone: '',
|
|
bank_basic_account_number: '',
|
|
bank: '',
|
|
association_id: 0,
|
|
money: '',
|
|
},
|
|
invoice_type_show: false,
|
|
actionSheetList: [{
|
|
text: '普票',
|
|
id: 1,
|
|
},
|
|
{
|
|
text: '专票',
|
|
id: 2
|
|
}
|
|
],
|
|
header_id: -1,
|
|
header_id_name: '',
|
|
invoice_type_name: '普票',
|
|
invoice_type: 1,
|
|
tt_add_show: false,
|
|
tt_show: false,
|
|
tt_list: [],
|
|
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: {
|
|
radioGroupChange(d) {
|
|
const item = this.tt_list.find(item => item.id == d);
|
|
console.log(item);
|
|
this.header_id_name = item;
|
|
},
|
|
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() {
|
|
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;
|
|
// }
|
|
|
|
},
|
|
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 = '';
|
|
this.allList = [];
|
|
this.page = 1;
|
|
this.getList();
|
|
} 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 {
|
|
// var key = res.data;
|
|
// const transformedSelectList = key.map(item => ({
|
|
// value: item.id,
|
|
// label: item.unit
|
|
// }));
|
|
this.tt_list = res.data;
|
|
}
|
|
})
|
|
.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);
|
|
this.count = res.data.count;
|
|
})
|
|
.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;
|
|
}
|
|
|
|
.view_text view {
|
|
margin-top: 20rpx;
|
|
}
|
|
</style> |