dyqc_hdapp/packageB/invoice/invoiceCenter.vue

841 lines
19 KiB
Vue
Raw Normal View History

2025-06-27 16:57:14 +08:00
<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 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 class="invoiceBtn" @click="handleIssueInvoice()">
<view>申请开票</view>
</view>
</view>
<!-- 提交记录 -->
<view class="recordList" v-else-if="selected == 1">
<view class="record-tabs">
<span class="s-header flex flex-column" v-for="(item, index) in recordTypeList" :key="index"
:class="{ selected: recordIndexSelected(item.index) }" @click="selecRecordIndex(item.index)">
{{ item.text }}
<!-- <span class="lines" ></span> -->
</span>
</view>
<!-- v-if="item[index].length == 1" -->
<view class="recordList-item flex">
<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">名字</view>
<view class="itenCon2-actPrice">
<view> 价格</view>
<view class="lookInvoice">
<text>查看发票</text>
<u-icon name="arrow-right"></u-icon>
</view>
<!-- <view class="lookInvoice2">
<text >开票中</text>
</view> -->
</view>
</view>
</view>
<!-- v-if="item[index].length > 1" -->
<view class="recordList-items flex">
<!-- <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="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>2个订单 发票金额1213</view>
<!-- <view class="lookInvoices">
<text>查看发票</text>
<u-icon name="arrow-right"></u-icon>
</view> -->
<view class="lookInvoices2">
<text >开票中</text>
</view>
</view>
</view>
</view>
<!-- 抬头管理 -->
<view class="manageList" v-else>
<!-- 信息提醒 -->
<view class="manageRecord">
<image style="width: 36rpx;height: 36rpx;" src="/static/invoice/manageRecord.png" mode=""></image>
<text style="margin-left: 10rpx;">抬头信息仅用于开具发票请勿用于转账等其他用途谨防受骗</text>
</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 class="textSec">9741212154551411C</view>
</view>
<view class="manageEdit">
<image style="width: 50rpx;height: 50rpx;" src="/static/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 class="textSec">9741212154551411C</view> -->
</view>
<view class="manageEdit">
<image style="width: 50rpx;height: 50rpx;" src="/static/invoice/manageEdit.png" mode=""></image>
</view>
</view>
</view>
<!-- 按钮 -->
<view class="invoiceBtn">
<view>添加发票抬头</view>
</view>
</view>
</view>
</view>
</view>
2025-06-27 16:57:14 +08:00
</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: [
{
index: '0',
text: '全部'
},
{
index: '1',
text: '已开票'
},
{
index: '2',
text: '未开票'
}
],//提交记录的tabs数据
recordeIndex: '0',//提交记录的tabs选中
page: 1,
limit: 10,
loadStatus: 'loading',
unInvoiceList:[],//可开发票列表
invoicedList: [],//已开发票列表
upList: [],//支票抬头列表
count:0,
order_nos: '',//选中的多个订单号
num:0,
id: 0,
};
},
onLoad(option) {
this.getInvoiceList()
},
onShow() {
this.getInvoiceList()
},
onPullDownRefresh() {
},
onReachBottom() {
},
methods: {
//三个列表的切换
selectheader(index) {
const that = this;
that.selected = index;
console.log(index, '')
},
// 判断当前所选中列表
headerSelected(index) {
console.log('index',index);
return this.selected === index;
},
//提交记录的列表状态切换
selecRecordIndex(index) {
const that = this;
that.recordeIndex = index;
console.log(index, '')
},
//判断当前的提交记录的列表选中状态
recordIndexSelected(index) {
console.log('index',index);
return this.recordeIndex === 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 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);
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
})
}
}
}
}
2025-06-27 16:57:14 +08:00
</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%;
}
.recordList {
width: 100%;
height: auto;
display: block;
justify-content: center;
.record-tabs {
// background: #ffffff;
width: 100%;
display: flex;
overflow-x: auto;
margin: 10rpx 0 20rpx 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;
line-height: 26rpx;
flex: 0 0 auto;
position: relative;
}
.s-header.selected {
width: 150rpx;
height: 80rpx;
background: #ffffff;
// font-weight: 800;
// font-size: 32rpx;
color: #323232;
line-height: 28rpx;
}
}
.recordList-item {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
width: 91%;
margin-top: 20rpx;
padding: 20rpx 30rpx;
height: 220rpx;
.item-img2 {
width: 170rpx;
height: 170rpx;
// margin-left: 40rpx;
}
.item-con2 {
margin-left: 30rpx;
width: 65%;
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%;
font-weight: 400;
font-size: 28rpx;
}
.lookInvoice2 {
width: 200rpx;
color: #ff4810;
display: flex;
position: absolute;
right: -15%;
font-weight: 400;
font-size: 28rpx;
}
}
}
}
.recordList-items {
display: block;
background-color: #ffffff;
width: 91%;
margin-top: 20rpx;
padding: 20rpx 30rpx;
height: 220rpx auto;
.reListIts-item {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 20rpx;
// 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 {
// 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;
}
.manageList-item {
background-color: #ffffff;
padding: 20rpx 0;
width: 100%;
margin-bottom: 20rpx;
border-radius: 20rpx;
.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: 4rpx 4rpx 4rpx 4rpx;
border: 1rpx solid #EB1B1B;
text-align: center;
font-size: 26rpx;
font-weight: 500;
}
.manageName {
margin-left: 10rpx;
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;
}
2025-06-27 16:57:14 +08:00
</style>