dyqc_hdapp/packageB/invoice/invoiceCenter.vue
wangzimeng 76a5c7b4c7 发票抬头部分对完了和发票流程
草稿箱修复:编辑草稿箱里的内容时,弹窗内协议按钮直接亮起来;草稿箱里编辑信息,不填活动分类,点确认发布,没有“平台分类必填”的提示;不上传群二维码,点击确认上传后,没有反应
2025-07-11 18:25:24 +08:00

1042 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- <view>发票中心</view> -->
<view class="box flex">
<view class="con-center flex flex-column justify-center align-items">
<view class="tabs align-items">
<span class="s-header flex flex-column" v-for="(item, index) in headers" :key="index"
:class="{ selected: headerSelected(item.index) }" @click="selectheader(item.index)">
{{ item.text }}
<span class="lines" :class="{ selected: headerSelected(item.index) }"></span>
</span>
</view>
<view class="record-tabs" v-if="selected == 1">
<span class="s-header flex flex-column" v-for="(item, index) in recordTypeList" :key="index"
:class="{ selected: recordIndexSelected(item.status) }"
@click="selecRecordIndex(item.status)">
{{ item.text }}
<!-- <span class="lines" ></span> -->
</span>
</view>
<view style="min-height: 100vh;margin-top: 80rpx;width: 100%;">
<!-- 合开发票 -->
<view v-if="selected == 0">
<view class="invoiceList" v-for="(item,index) in unInvoiceList" :key="index">
<view class="invoiceList-item flex" @click="checkInvoice(item.invoiceCheck,index)">
<view class="changedBox">
<view class="changedBox-Img">
<image v-if="item.invoiceCheck === 1" style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/check.png" mode=""></image>
<image v-else style="width: 44rpx;height: 44rpx;"
src="../../static/fabu/nocheck.png" mode=""></image>
</view>
</view>
<view class="item-img">
<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;"
:src="item.detail.images[0]" mode=""></image>
</view>
<view class="item-con">
<view class="itenCon-actName" style="">{{item.detail.title}}</view>
<view class="itenCon-actPrice" style="">¥ {{item.payprice}}</view>
</view>
</view>
</view>
<!-- <view v-if="unInvoiceList.length == 0" class="invoiceBtn" @click="handleIssueInvoice()">
<view>申请开票</view>
</view> -->
<view class="invoiceBtn" @click="handleIssueInvoice()">
<view>申请开票</view>
</view>
<view class="bottom_box flex justify-center align-items" style="height: 1240rpx;width: 100%;"
v-if="unInvoiceList.length == 0">
<view style="text-align: center;">
<image src="/static/no.png" style="width: 150rpx;height: 150rpx;"></image>
<view>暂无数据</view>
</view>
</view>
</view>
<!-- 提交记录 -->
<view class="recordList" v-else-if="selected == 1">
<!-- v-if="item[index].length == 1" -->
<view v-for="(item,index) in recordList" :key="index">
<!-- 单开 -->
<view class="recordList-item flex" v-if="item.apply_type == '1'">
<view class="item-img2">
<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;"
src="../../static/index/about.png" mode=""></image>
</view>
<view class="item-con2">
<view class="itenCon2-actName">{{item.activityorders[0].detail.title}}</view>
<view class="itenCon2-actPrice">
<view>¥ {{item.activityorders[0].detail.price}}</view>
<view v-if="item.status == 2" class="lookInvoice" @click="toPageInvoiceInfo(item)">
<view>查看发票</view>
<u-icon name="arrow-right" @click="aaa"></u-icon>
</view>
<view class="lookInvoice2" v-else-if="item.status == 1">
<text>开票中</text>
</view>
<view class="lookInvoice3" v-else>
<text>已作废</text>
</view>
<!-- <view style="position: fixed;right: 5%;">
<view v-if="item.status == 2" class="lookInvoice" @click="toPageInvoiceInfo(item)">
<view>查看发票</view>
<u-icon name="arrow-right" @click="aaa"></u-icon>
</view>
<view class="lookInvoice2" v-else-if="item.status == 1">
<text>开票中</text>
</view>
<view class="lookInvoices" v-else>
<text>已作废</text>
</view>
</view> -->
</view>
</view>
</view>
<!-- 合开-->
<view class="recordList-items flex" v-else>
<!-- <view></view> -->
<view class="reListIts-item flex" v-for="(e,i) in item.activityorders" :key="i">
<view class="itsItem-img2">
<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;"
:src="e.detail.images[0]" mode=""></image>
</view>
<view class="itsItem-con2">
<view class="itsItemCon2-actName">{{e.detail.title}}</view>
<view class="itsItemCon2-actPrice">
<view> {{e.detail.price}}</view>
</view>
</view>
</view>
<!-- <view class="reListIts-item flex">
<view class="itsItem-img2">
<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;"
src="../../static/index/about.png" mode=""></image>
</view>
<view class="itsItem-con2">
<view class="itsItemCon2-actName">名字</view>
<view class="itsItemCon2-actPrice">
<view> 价格</view>
</view>
</view>
</view> -->
<view class="reLine"></view>
<view class="reListIts-itemData">
<view>{{item.activityorders.length}}个订单 发票金额{{item.price}}</view>
<view class="lookInvoices" v-if="item.status == 2" @click="toPageInvoiceInfo(item)">
<text>查看发票</text>
<u-icon name="arrow-right"></u-icon>
</view>
<view class="lookInvoices2" v-else-if="item.status == 1">
<text>开票中</text>
</view>
<view class="lookInvoices" v-else>
<text>已作废</text>
</view>
</view>
</view>
</view>
<view class="bottom_box flex justify-center align-items" style="height: 1240rpx;width: 100%;"
v-if="recordList.length == 0">
<view style="text-align: center;">
<image src="/static/no.png" style="width: 150rpx;height: 150rpx;"></image>
<view>暂无数据</view>
</view>
</view>
</view>
<!-- 抬头管理 -->
<view class="manageList" v-else>
<!-- 信息提醒 -->
<view class="manageRecord">
<image style="width: 36rpx;height: 36rpx;" src="https://naweigetetest2.hschool.com.cn/miniapp/invoice/manageRecord.png" mode="">
</image>
<text style="margin-left: 10rpx;">抬头信息仅用于开具发票请勿用于转账等其他用途谨防受骗</text>
</view>
<!-- 专用 -->
<view class="manageList-item" v-for="(item,index) in headList" :key="index" style="margin-bottom: 20rpx;">
<view class="manage-type" v-if="item.head_type == 'corporate'">专业发票抬头</view>
<view class="manage-type" v-else>个人发票抬头</view>
<view class="manageLine"></view>
<view class="manageCon">
<view class="messContext">
<view class="textFir">
<view class="defaultBox" v-if="item.is_default == 1">默认</view>
<view class="manageName">{{item.invoice_header}}</view>
</view>
<view class="textSec">{{item.tax_id}}</view>
</view>
<view class="manageEdit" @click="editHead(item.id)">
<image style="width: 50rpx;height: 50rpx;" src="https://naweigetetest2.hschool.com.cn/miniapp/invoice/manageEdit.png" mode="">
</image>
</view>
</view>
</view>
<!-- 个人
<view class="manageList-item">
<view class="manage-type">个人发票抬头</view>
<view class="manageLine"></view>
<view class="manageCon">
<view class="messContext">
<view class="textFir">
<view class="defaultBox">
默认</view>
<view class="manageName">洛阳灵睿网络技术有限公司</view>
</view>
</view>
<view class="manageEdit">
<image style="width: 50rpx;height: 50rpx;" src="https://naweigetetest2.hschool.com.cn/miniapp/invoice/manageEdit.png" mode=""></image>
</view>
</view>
</view>-->
<!-- 按钮 -->
<view class="invoiceBtn" @click="addHead()">
<view>添加发票抬头</view>
</view>
<view class="bottom_box flex justify-center align-items" style="height: 1240rpx;width: 100%;"
v-if="headList.length == 0">
<view style="text-align: center;">
<image src="/static/no.png" style="width: 150rpx;height: 150rpx;"></image>
<view>暂无数据</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
popupStyle: {
width: '690rpx',
margin: '0 auto', // 水平居中
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '0',
borderRadius: '20rpx'
},
size: 13,
sortStyle: ['#ff557f', '#3f3f3f'],
selected: '0',
headers: [{
index: '0',
text: '合开发票'
},
{
index: '1',
text: '提交记录'
},
{
index: '2',
text: '抬头管理'
}
],
invoiceCheck: '0', //和开发票选中状态0未选中1选中
recordTypeList: [{
status: '',
text: '全部'
},
{
status: '2',
text: '已开票'
},
{
status: '1',
text: '未开票'
}
], //提交记录的tabs数据
recordeStatus: '', //提交记录的tabs选中状态
recordList: [], //提交记录
page: 1,
limit: 10,
loadStatus: 'loading',
unInvoiceList: [], //可开发票列表
invoicedList: [], //已开发票列表
upList: [], //支票抬头列表
count: 0,
order_nos: '', //选中的多个订单号
totalPrice: 0,
num: 0,
id: 0,
headList: [], //抬头管理
HeadId:null,
};
},
onLoad(option) {
this.getInvoiceList()
this.getHeadList()
this.getRecordList()
},
onShow() {
this.getInvoiceList()
this.getHeadList()
this.getRecordList()
},
onPullDownRefresh() {
},
onReachBottom() {
},
methods: {
//三个列表的切换
selectheader(index) {
console.log('111');
const that = this;
that.selected = index;
console.log('selectheader', that.selected)
if (that.selected == 0) {
console.log('合开');
this.getInvoiceList()
} else if (that.selected == 1) {
console.log('记录', this.recordeStatus);
this.getRecordList()
} else {
console.log('抬头');
this.getHeadList();
}
},
// 判断当前所选中列表
headerSelected(index) {
console.log('3333');
// console.log('index',index);
return this.selected === index;
},
//获取可开发票列表
getInvoiceList() {
uni.$u.http.get('/api/school.newactivity.order/order_list', {
params: {
page: this.page,
limit: this.limit,
// status: 9,
// keywords: this.keywords,
invoice_status: 0,
}
}).then(res => {
console.log('code', res.code);
if (res.code === 1) {
this.count = res.data.count
this.unInvoiceList = [...res.data.list];
console.log('unInvoiceList:', this.unInvoiceList);
if (this.unInvoiceList.length >= res.data.count) {
this.loadStatus = 'nomore';
} else {
this.loadStatus = 'loading';
}
this.unInvoiceList.forEach(item => {
item.invoiceCheck = 0
})
// this.isInitialized = false; // 标记已初始化
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
this.loadStatus = 'loading';
}
}).catch(error => {
console.error('请求失败', error);
this.loadStatus = 'loading';
});
},
//选择要开发票的订单
checkInvoice(e, index) {
this.$set(this.unInvoiceList, index, {
...this.unInvoiceList[index],
invoiceCheck: e === 0 ? 1 : 0
});
},
//跳转填写发票信息
handleIssueInvoice() {
//拿到选中的订单
const list = this.unInvoiceList.filter(item => item.invoiceCheck == 1).map(item => item.order_no)
const list1 = this.unInvoiceList.filter(item => item.invoiceCheck == 1)
const idList = this.unInvoiceList.filter(item => item.invoiceCheck == 1).map(item => item.id)
console.log('list:', list, idList);
// this.order_nos = JSON.stringify(list)
this.order_nos = JSON.stringify(list.join(','))
this.num = list.length
console.log('num:', this.num,list1);
if(this.num > 1) {
list1.forEach(e => {
// if(e.payprice)
this.totalPrice += e.payprice
})
}else if(this.num > 1){
this.totalPrice =list1[0].payprice
}else{
}
console.log('num:', this.num, 'totalPrice:', this.totalPrice);
console.log('unInvoiceList',this.unInvoiceList.length);
if(this.unInvoiceList.length == 0){
uni.showToast({
title: '暂无可开发票的订单,请先去参加活动下单',
icon: 'none',
duration: 2000
})
return
}
if (list.length < 1) {
uni.showToast({
title: '请选择需要开发票的订单',
icon: 'none',
duration: 2000
})
} else if (list.length === 1) {
this.id = idList[0]
console.log('id', this.id);
uni.navigateTo({
url: '/packageB/invoice/addInvoice?order_nos=' + this.order_nos + '&num=' + this.num +
'&id=' + this.id
})
} else {
uni.navigateTo({
url: '/packageB/invoice/addInvoice?order_nos=' + this.order_nos + '&num=' + this.num +
'&totalPrice=' + this.totalPrice
})
}
// uni.navigateTo({
// url: '/packageB/invoice/addInvoice?order_nos=' + this.order_nos + '&num=' + this.num
// })
},
//提交记录
getRecordList() {
console.log('提交记录', this.recordeStatus);
uni.$u.http.get('/api/school.header/apply_list', {
params: {
// keywords: this.keywords,
page: this.page,
limit: this.limit,
status: this.recordeStatus
}
}).then(res => {
if (res.code == 1) {
console.log('res:', res);
this.recordList = res.data.list
console.log('recordList', this.recordList);
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}).catch(error => {});
},
//提交记录的列表状态切换
selecRecordIndex(recordStatus) {
console.log('selecRecordIndex',recordStatus)
// const that = this;
this.recordeStatus = recordStatus;
console.log('recordeStatus', this.recordeStatus)
this.getRecordList()
},
//判断当前的提交记录的列表选中状态
recordIndexSelected(recordStatus) {
console.log('recordIndexSelected', recordStatus);
return this.recordeStatus === recordStatus;
},
//查看发票信息
toPageInvoiceInfo(item) {
console.log('toPageInvoiceInfo',item);
uni.navigateTo({
url:'/packageB/invoice/invoiceInfo?id=' + item.id
})
},
//抬头管理列表
getHeadList() {
uni.$u.http.get('/api/school.header/header_list', {
params: {
// keywords: this.keywords,
page: this.page,
limit: this.limit,
}
}).then(res => {
if (res.code == 1) {
console.log('res:', res);
this.headList = res.data.list
console.log('headlist', this.headList[2]);
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}).catch(error => {});
},
addHead() {
uni.navigateTo({
url: '/packageB/invoice/addHead'
})
},
editHead(id) {
this.HeadId = id
console.log('HeadId',this.HeadId);
uni.navigateTo({
url: '/packageB/invoice/addHead?id=' + this.HeadId
})
},
}
}
</script>
<style lang="scss" scoped>
.box {
background: #f5f5f5;
.con-center {
width: 100%;
height: 100%;
// margin-top: 25rpx;
// overflow: hidden;
.tabs {
background: #ffffff;
width: 100%;
display: flex;
overflow-x: auto;
// margin-top: 10rpx;
-webkit-overflow-scrolling: touch;
font-family: PingFang SC, PingFang SC;
position: fixed;
top: 0;
.s-header {
display: flex;
justify-content: center;
align-items: center;
width: 33.3%;
height: 80rpx;
font-weight: 400;
font-size: 28rpx;
color: #9E9E9E;
line-height: 26rpx;
flex: 0 0 auto;
position: relative;
}
.s-header.selected {
width: 33.3%;
height: 80rpx;
background: #ffffff;
font-weight: 800;
font-size: 32rpx;
color: #323232;
line-height: 28rpx;
}
.lines {
position: absolute;
bottom: 0;
width: 44rpx;
}
.lines.selected {
border-bottom: #323232 solid 8rpx;
}
}
.invoiceList {
width: 100%;
height: auto;
.invoiceList-item {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
width: 91%;
margin-top: 20rpx;
padding: 20rpx 30rpx;
height: 220rpx;
.changedBox {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.changedBox-Img {
width: 44rpx;
height: 44rpx;
}
}
.item-img {
width: 170rpx;
height: 170rpx;
margin-left: 40rpx;
}
.item-con {
margin-left: 20rpx;
width: 60%;
height: 160rpx;
position: relative;
color: #323232;
.itenCon-actName {
position: absolute;
top: 0;
font-size: 28rpx;
font-weight: 400;
}
.itenCon-actPrice {
position: absolute;
bottom: 0;
font-size: 32rpx;
font-weight: 900;
}
}
}
}
.invoiceBtn {
width: 90%;
height: 90rpx;
background-color: #323232;
border-radius: 148rpx;
color: #BBFC5B;
font-size: 36rpx;
font-weight: 400;
line-height: 50rpx;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
text-transform: none;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
bottom: 66rpx;
margin-left: 5%;
}
.record-tabs {
// background: #ffffff;
width: 100%;
display: flex;
overflow-x: auto;
position: relative;
top: 90rpx;
margin: 10rpx 0;
border-radius: 30rpx;
-webkit-overflow-scrolling: touch;
font-family: PingFang SC, PingFang SC;
.s-header {
display: flex;
justify-content: center;
align-items: center;
width: 150rpx;
height: 80rpx;
font-weight: 400;
font-size: 28rpx;
color: #9E9E9E;
border-radius: 40rpx;
background-color: #ffffff;
margin-right: 20rpx;
line-height: 26rpx;
flex: 0 0 auto;
position: relative;
}
.s-header.selected {
width: 150rpx;
height: 80rpx;
background-color: #ffffff;
// font-weight: 800;
// font-size: 32rpx;
color: #323232;
line-height: 28rpx;
}
}
.recordList {
width: 100%;
height: auto;
display: block;
justify-content: center;
.recordList-item {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
width: 91%;
margin-top: 20rpx;
padding: 20rpx 30rpx;
height: 220rpx;
// margin: 0 auto;
.item-img2 {
width: 170rpx;
height: 170rpx;
// margin-left: 40rpx;
}
.item-con2 {
margin-left: 30rpx;
width: 75%;
height: 160rpx;
position: relative;
color: #323232;
.itenCon2-actName {
position: absolute;
top: 0;
font-size: 28rpx;
font-weight: 400;
}
.itenCon2-actPrice {
width: 100%;
position: absolute;
bottom: 0;
font-size: 32rpx;
font-weight: 900;
display: flex;
justify-content: space-between;
.lookInvoice {
width: 200rpx;
display: flex;
position: absolute;
right: -15%;
margin-top: 6rpx;
font-weight: 400;
font-size: 28rpx;
}
.lookInvoice3 {
width: 200rpx;
display: flex;
position: absolute;
right: -22%;
margin-top: 6rpx;
font-weight: 400;
font-size: 28rpx;
}
.lookInvoice2 {
width: 200rpx;
color: #ff4810;
display: flex;
position: absolute;
right: -22%;
margin-top: 6rpx;
font-weight: 400;
font-size: 28rpx;
}
}
}
}
.recordList-items {
display: block;
background-color: #ffffff;
width: 91%;
margin-top: 20rpx;
padding: 20rpx 30rpx;
height: 220rpx auto;
// margin: 0 auto;
.reListIts-item {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 20rpx;
margin: 0 auto;
// background-color: #9E9E9E;
.itsItem-img2 {
width: 170rpx;
height: 170rpx;
// margin-left: 40rpx;
}
.itsItem-con2 {
margin-left: 30rpx;
width: 65%;
height: 160rpx;
position: relative;
color: #323232;
.itsItemCon2-actName {
position: absolute;
top: 0;
font-size: 28rpx;
font-weight: 400;
}
.itsItemCon2-actPrice {
width: 100%;
position: absolute;
bottom: 0;
font-size: 32rpx;
font-weight: 900;
display: flex;
justify-content: space-between;
.lookInvoice {
width: 200rpx;
display: flex;
position: absolute;
right: -15%;
font-weight: 400;
font-size: 28rpx;
}
.lookInvoice2 {
width: 200rpx;
color: #ff4810;
display: flex;
position: absolute;
right: -15%;
font-weight: 400;
font-size: 28rpx;
}
}
}
}
.reLine {
width: 100%;
height: 1rpx;
background-color: #D8D8D8;
margin: 10rpx 0;
}
.reListIts-itemData {
width: 100%;
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
.lookInvoices {
width: 200rpx;
display: flex;
position: relative;
right: -11%;
font-weight: 400;
font-size: 28rpx;
}
.lookInvoices2 {
width: 200rpx;
color: #ff4810;
display: flex;
position: relative;
right: -11%;
font-weight: 400;
font-size: 28rpx;
}
}
}
}
.manageList {
display: grid;
justify-content: center;
// padding-top: 20rpx;
.manageRecord {
margin: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #EB1B1B;
line-height: 32rpx;
text-align: left;
font-style: normal;
text-transform: none;
align-items: center;
display: flex;
justify-content: center;
// margin: 0 auto;
}
.manageList-item {
background-color: #ffffff;
padding: 20rpx 0;
width: 96%;
margin-bottom: 20rpx;
border-radius: 20rpx;
margin: 0 auto;
.manage-type {
width: 100%;
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
line-height: 32rpx;
// text-align: center;
font-style: normal;
text-transform: none;
margin: 20rpx;
}
.manageLine {
width: 750rpx;
height: 1rpx;
background: #EEEEEE;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.manageCon {
display: flex;
justify-content: space-between;
margin: 20rpx;
align-items: center;
.messContext {
display: block;
.textFir {
display: flex;
justify-content: left;
align-items: center;
.defaultBox {
width: 68rpx;
height: 32rpx;
background: #FFEEEE;
border-radius: 6rpx;
color: #EB1B1B;
border: 1rpx solid #EB1B1B;
text-align: center;
font-size: 26rpx;
font-weight: 500;
margin-right: 10rpx;
}
.manageName {
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
line-height: 32rpx;
font-style: normal;
text-transform: none;
}
}
.textSec {
margin-top: 20rpx;
height: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #999999;
line-height: 32rpx;
font-style: normal;
text-transform: none;
}
}
.manageEdit {
width: 50rpx;
height: 50rpx;
}
}
}
}
}
}
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.flex-between {
justify-content: space-between;
}
.align-items {
align-items: center;
}
.flex-column {
flex-flow: column;
}
.justify-start {
justify-content: start;
}
.line {
width: 630rpx;
height: 1rpx;
background: #F0F0F0;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0 30rpx;
}
</style>