dyqc_hdapp/packageB/invoice/invoiceCenter.vue

841 lines
19 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 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>
</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
})
}
}
}
}
</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;
}
</style>