565 lines
16 KiB
Vue
565 lines
16 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
|
|
<swiper-item>
|
|
<image :src="imgAssets+'/banner_1.png'" style="width: 100vw;height: 120rpx;"></image>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<image :src="imgAssets+'/banner_2.png'" style="width: 100vw;height: 120rpx;"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="invoice-info-title mt-40">开票信息</view>
|
|
<view class="invoice-info-box mt-20">
|
|
<view class="invoice-info-item">
|
|
<view class="invoice-info-item-title star">开票信息</view>
|
|
<view @click="doGetInvoiceInfoList"
|
|
:class="['invoice-info-item-content','select',invoiceInfo==null ? 'normal-value':'select-value']">
|
|
{{invoiceInfo ==null ?'请选择开票信息' :invoiceInfo.invoiceName}}
|
|
</view>
|
|
</view>
|
|
<view class="invoice-info-item">
|
|
<view class="invoice-info-item-title star">发票类型</view>
|
|
<view class="invoice-info-item-content">
|
|
<radio-group class="custom-radio-group" @change="changeType">
|
|
<block v-for="(item,index) in typeList" :key="index">
|
|
<radio :checked="typeId==item.dataName" :value="item.dataName">
|
|
{{item.dataName}}
|
|
</radio>
|
|
</block>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-info-item">
|
|
<view class="invoice-info-item-title star">开票内容</view>
|
|
<view class="invoice-info-item-content">
|
|
<radio-group class="custom-radio-group" @change="changeContent">
|
|
<block v-for="(item,index) in contentList" :key="index">
|
|
<radio :checked="contentId==item.dataName" :value="item.dataName">{{item.dataName}}</radio>
|
|
</block>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-info-item">
|
|
<view class="invoice-info-item-title star">开票税率</view>
|
|
<view class="invoice-info-item-content">
|
|
<radio-group class="custom-radio-group" @change="changeRate">
|
|
<block v-for="(item,index) in rateList" :key="index">
|
|
<radio :checked="rateId==item.dataName" :value="item.dataName">
|
|
{{item.dataName}}
|
|
</radio>
|
|
</block>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-info-title mt-40">开票内容</view>
|
|
<view class="invoice-info-box mt-20">
|
|
<view class="invoice-info-item">
|
|
<view class="invoice-info-item-title star">开票金额</view>
|
|
<view class="invoice-info-item-content">
|
|
<rich-text class="text-red" :nodes="moneyTxt(10,14,invoiceMoney)"></rich-text>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-info-item-ver">
|
|
<view class="invoice-info-item-title" style="align-self: flex-start;">开票备注</view>
|
|
<textarea class="invoice-remark" :value="remark" @input="inputRemark" placeholder-style="color:#dbdbdb;"
|
|
placeholder="请输入备注信息"></textarea>
|
|
</view>
|
|
<view v-if="editBean != null && editBean.invoiceStatus == '0'">
|
|
<view class="invoice-info-item-title text-red">失败原因</view>
|
|
<view style="padding-left:20rpx;font-size: 28rpx;font-weight: bold;" class="text-red">
|
|
{{editBean.invoiceFinalRecord}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-fixed-footer">
|
|
<view class="bottom-btn-green" @click="confirmSubmit">提交</view>
|
|
</view>
|
|
<!-- 开票信息 -->
|
|
<uni-popup ref="infoDialog" type="bottom" background-color="#fff" border-radius="15rpx 15rpx 0rpx 0rpx">
|
|
<view class="bottom-dialog-container">
|
|
<view class="dialog-title-box">
|
|
<view class="icon-close size-48" @click="closeDialog"></view>
|
|
<view class="dialog-title-txt has-icon">发票抬头</view>
|
|
</view>
|
|
<view style="height: 600rpx;">
|
|
<ContainerLoading :loadingVisible="loadingState">
|
|
<scroll-view scroll-y style="height: 600rpx;">
|
|
<view style="display: flex;flex-direction: column;padding: 20rpx;">
|
|
<block v-for="(item,index) in invoiceInfoList" :key="index">
|
|
<view class="invoice-sel-item-box" @click="onInvoiceItemClick" :data-value="item">
|
|
<view
|
|
:class="[invoiceInfo && invoiceInfo.invoiceId===item.invoiceId? 'invoice-sel-item-yellow' :'invoice-sel-item-gray']">
|
|
<view>{{item.invoiceName}}</view>
|
|
<view>{{item.invoiceNumber}}</view>
|
|
</view>
|
|
<view v-if="invoiceInfo != null && invoiceInfo.invoiceId===item.invoiceId"
|
|
class="icon-hook-yellow size-48"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</ContainerLoading>
|
|
</view>
|
|
<view class="bottom-btn-green" @click="openCreateInvoiceInfo">新增开票信息</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup type="message" ref="msg">
|
|
<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import InvoiceApi from '@/common/js/net/InvoiceApi.js'
|
|
import ContainerLoading from '@/components/container-loading.vue'
|
|
import {
|
|
inject
|
|
} from 'vue';
|
|
import {
|
|
moneyTxt
|
|
} from '@/common/js/conver.js'
|
|
export default {
|
|
components: {
|
|
ContainerLoading
|
|
},
|
|
setup() {
|
|
const globalData = inject('globalData')
|
|
return {
|
|
globalData
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
imgAssets: this.globalData.imgAssetsUrl,
|
|
primaryColor: this.globalData.primaryColor,
|
|
msgType: 'error',
|
|
msgHint: '',
|
|
msgShow: false,
|
|
typeList: [], //开票类型
|
|
contentList: [], //开票内容
|
|
rateList: [], //开票税率
|
|
typeId: '',
|
|
contentId: '',
|
|
rateId: '',
|
|
invoiceInfo: null, //开票信息
|
|
invoiceMoney: 0, //开票金额
|
|
showInvoiceInfo: false,
|
|
invoiceInfoList: [], //开票信息
|
|
payOrderIds: '', //开票记录id
|
|
remark: '', //备注信息
|
|
editBean: null, //编辑页面传递过来的
|
|
loadingState: 'loading'
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: "开发票",
|
|
});
|
|
uni.setNavigationBarColor({
|
|
frontColor: "#000000",
|
|
backgroundColor: "#F0F0F0",
|
|
animation: {
|
|
duration: 500,
|
|
timingFunc: "easeIn",
|
|
},
|
|
});
|
|
const ids = options.ids
|
|
if (ids) {
|
|
this.invoiceMoney = Number(options.money)
|
|
this.payOrderIds = options.ids
|
|
|
|
} else {
|
|
const beanStr = options.bean
|
|
const bean = JSON.parse(beanStr)
|
|
this.editBean = bean
|
|
this.rateId = bean.invoiceTaxrate,
|
|
this.contentId = bean.invoicePurpose,
|
|
this.typeId = bean.invoiceClassify,
|
|
this.invoiceMoney = bean.invoiceRechargeMoney,
|
|
this.payOrderIds = bean.invoiceRechargeIds,
|
|
this.remark = bean.invoiceRecord,
|
|
this.invoiceInfo = {
|
|
invoiceId: bean.invoiceId,
|
|
invoiceName: bean.invoiceName,
|
|
invoiceNumber: bean.invoiceNumber,
|
|
invoiceOrgaddress: bean.invoiceOrgaddress,
|
|
invoiceOrgtel: bean.invoiceOrgtel
|
|
}
|
|
}
|
|
//获取开票类型
|
|
//获取开票内容
|
|
//获取开票税率
|
|
this.getPageData()
|
|
},
|
|
methods: {
|
|
moneyTxt,
|
|
getPageData() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
})
|
|
const pageData = {
|
|
page: 1,
|
|
rows: 100
|
|
}
|
|
const _self = this
|
|
const type = InvoiceApi.doGetDicListByPId(
|
|
'e0251d55-cd52-4f57-be92-b2bef8a6dd62') //开票内容 本地e0251d55-cd52-4f57-be92-b2bef8a6dd62
|
|
const content = InvoiceApi.doGetDicListByPId(
|
|
'b67d5208-db1d-4d0e-99de-cc22d9d50041') //税率 本地 b67d5208-db1d-4d0e-99de-cc22d9d50041
|
|
const rate = InvoiceApi.doGetDicListByPId(
|
|
'e4808c45-64ee-42fa-a413-a470fbdc0aea') // 开票类型 本地e4808c45-64ee-42fa-a413-a470fbdc0aea
|
|
const info = InvoiceApi.doGetMineInvoiceList(pageData)
|
|
const list = [type, content, rate, info]
|
|
Promise.all(list)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
_self.contentList = res[0]
|
|
_self.rateList = res[1]
|
|
_self.typeList = res[2]
|
|
_self.invoiceInfoList = res[3].rows
|
|
// 默认第一条
|
|
if (_self.editBean == null) {
|
|
_self.contentId = res[0][0].dataName
|
|
_self.rateId = res[1][0].dataName
|
|
_self.typeId = res[2][0].dataName
|
|
_self.invoiceInfo = res[3].rows[0]
|
|
}
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
console.log(err)
|
|
_self.msgHint = '数据有误,请稍后重试'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1800);
|
|
})
|
|
},
|
|
inputRemark(e) {
|
|
this.remark = e.detail.value
|
|
},
|
|
changeContent(e) {
|
|
this.contentId = e.detail.value
|
|
},
|
|
changeType(e) {
|
|
this.typeId = e.detail.value
|
|
},
|
|
changeRate(e) {
|
|
this.rateId = e.detail.value
|
|
},
|
|
changeInvoiceInfo(e) {
|
|
console.log('groupChange', e)
|
|
const index = e.detail.value;
|
|
const selectedItem = this.invoiceInfoList[index];
|
|
this.invoiceInfo = selectedItem
|
|
this.$refs.infoDialog.close()
|
|
},
|
|
onInvoiceItemClick(e) {
|
|
console.log(e)
|
|
this.invoiceInfo = e.currentTarget.dataset.value
|
|
this.$refs.infoDialog.close()
|
|
},
|
|
openCreateInvoiceInfo() {
|
|
this.$refs.infoDialog.close()
|
|
uni.navigateTo({
|
|
url: '/pages/mine/mineAccount/invoiceInfo/invoiceInfo',
|
|
})
|
|
},
|
|
//获取开票信息
|
|
doGetInvoiceInfoList() {
|
|
if (this.invoiceInfoList != null && this.invoiceInfoList.length > 0) {
|
|
this.loadingState = 'success'
|
|
} else {
|
|
this.loadingState = 'empty'
|
|
}
|
|
this.$refs.infoDialog.open()
|
|
},
|
|
//构建提交参数
|
|
buildParams() {
|
|
const data = {
|
|
invoiceId: this.invoiceInfo.invoiceId,
|
|
invoiceTaxrate: this.rateId,
|
|
invoicePurpose: this.contentId,
|
|
invoiceClassify: this.typeId,
|
|
invoiceRecord: this.remark,
|
|
accountRechargeIds: this.payOrderIds
|
|
}
|
|
return data
|
|
},
|
|
doSaveInfo() {
|
|
//判断编辑 新增
|
|
const isLegal = this.checkParams()
|
|
if (isLegal) {
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
})
|
|
const _self = this
|
|
const data = _self.buildParams()
|
|
InvoiceApi.doSaveInvoiceRecord(data)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
if (res.data && res.data != '') {
|
|
_self.msgType = 'success'
|
|
_self.msgHint = '开票信息提交成功!我们会以最快速度完成开票，还请耐心等待!'
|
|
_self.$refs.msg.open()
|
|
setTimeout(() => {
|
|
_self.backPageRefresh()
|
|
}, 1000);
|
|
} else {
|
|
_self.msgType = 'error'
|
|
_self.msgHint = '发票开取失败,请稍后重试'
|
|
_self.$refs.msg.open()
|
|
}
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgType = 'error'
|
|
_self.msgHint = err.msg ? err.msg : '发票开取失败,请稍后重试'
|
|
_self.$refs.msg.open()
|
|
})
|
|
}
|
|
},
|
|
//校验参数
|
|
checkParams() {
|
|
if (this.invoiceInfo == null) {
|
|
this.msgType = 'error'
|
|
this.msgHint = '请选择开票信息'
|
|
this.$refs.msg.open()
|
|
return false
|
|
}
|
|
if (this.typeId == '') {
|
|
this.msgType = 'error'
|
|
this.msgHint = '请选择开票类型'
|
|
this.$refs.msg.open()
|
|
|
|
return false
|
|
}
|
|
if (this.contentId == '') {
|
|
this.msgType = 'error'
|
|
this.msgHint = '请选择开票内容'
|
|
this.$refs.msg.open()
|
|
return false
|
|
}
|
|
if (this.rateId == '') {
|
|
this.msgType = 'error'
|
|
this.msgHint = '请选择开票税率'
|
|
this.$refs.msg.open()
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
//提交
|
|
confirmSubmit() {
|
|
if (this.editBean != null && this.editBean.invoiceRechargeId != '') {
|
|
this.doEditInfo()
|
|
} else {
|
|
this.doSaveInfo()
|
|
}
|
|
},
|
|
//编辑
|
|
doEditInfo() {
|
|
const isLegal = this.checkParams()
|
|
if (isLegal) {
|
|
const data = this.buildParams()
|
|
const _self = this
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
})
|
|
InvoiceApi.doUpdateInvoiceRecord(_self.editBean.invoiceRechargeId, data)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
if (res.data && res.data != '') {
|
|
_self.msgType = 'success'
|
|
_self.msgHint = '开票信息编辑成功!我们会以最快速度完成开票，还请耐心等待!'
|
|
_self.$refs.msg.open()
|
|
setTimeout(() => {
|
|
_self.backPageRefresh()
|
|
}, 1000);
|
|
} else {
|
|
_self.msgType = 'error'
|
|
_self.msgHint = '发票信息编辑失败,请稍后重试'
|
|
_self.$refs.msg.open()
|
|
}
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgType = 'error'
|
|
_self.msgHint = err.msg ? err.msg : '发票信息编辑失败,请稍后重试'
|
|
_self.$refs.msg.open()
|
|
})
|
|
}
|
|
},
|
|
backPageRefresh() {
|
|
let pages = getCurrentPages();
|
|
let prevPage = pages[pages.length - 2];
|
|
prevPage.$vm.needRefresh = true
|
|
uni.navigateBack()
|
|
},
|
|
closeDialog(e) {
|
|
this.$refs.infoDialog.close()
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.invoice-info-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.invoice-info-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20rpx;
|
|
background-color: $white-color;
|
|
border-radius: 15rpx;
|
|
box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.01);
|
|
}
|
|
|
|
.invoice-info-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.invoice-info-item-ver {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.invoice-remark {
|
|
height: 120rpx;
|
|
align-self: center;
|
|
border-radius: 10rpx;
|
|
width: 95%;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
padding: 15rpx;
|
|
background-color: $bg-gray-input-color;
|
|
}
|
|
|
|
|
|
|
|
.bottom-btn {
|
|
position: fixed;
|
|
bottom: 40rpx;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 30rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
font-size: 14px;
|
|
background-color: antiquewhite;
|
|
}
|
|
|
|
|
|
|
|
.invoice-info-item:nth-of-type(n+2) {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.invoice-info-item-title {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.invoice-info-item-content {
|
|
font-size: 28rpx;
|
|
padding-left: 20rpx;
|
|
margin-left: 15rpx;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 10rpx 15rpx;
|
|
}
|
|
|
|
.bg-gray {
|
|
background-color: $bg-gray-input-color;
|
|
}
|
|
|
|
.custom-radio-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.link {
|
|
font-size: 28rpx;
|
|
color: $text-blue-color;
|
|
}
|
|
|
|
.select::after {
|
|
content: '';
|
|
background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODA2NDUxMTAzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0MDQ5IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik0xMDA0Ljk5MTg5NCAyNDIuOTkzNDRjLTEyLjY1ODA2MS0xMi42Njg1NjgtMjcuNjYyODAyLTE4Ljk5NzU5OS00NS4wMDAyMTItMTguOTk3NTk5SDY0LjAwNDgxNmMtMTcuMzQ0NDE1IDAtMzIuMzM4NjQ5IDYuMzI5MDMtNDUuMDA3MjE3IDE4Ljk5NzU5OUM2LjMyOTAzIDI1NS42NzYwMTggMCAyNzAuNjcwMjUxIDAgMjg4LjAwNDE1OWMwIDE3LjMzMDQwNSA2LjMyOTAzIDMyLjMyNDYzOSAxOC45OTc1OTkgNDQuOTk2NzFsNDQ3Ljk5NTE4NCA0NDcuOTk1MTg0YzEyLjY4MjU3OCAxMi42Njg1NjggMjcuNjc2ODEyIDE5LjAxMTYwOSA0NS4wMDcyMTcgMTkuMDExNjA5czMyLjMzODY0OS02LjM0MzA0IDQ0Ljk5NjcxLTE5LjAxMTYwOUwxMDA0Ljk5MTg5NCAzMzIuOTk3MzY2YzEyLjY1NDU1OC0xMi42Njg1NjggMTkuMDA4MTA2LTI3LjY2MjgwMiAxOS4wMDgxMDYtNDQuOTk2NzA5IDAtMTcuMzMwNDA1LTYuMzUzNTQ4LTMyLjMyNDYzOS0xOS4wMDgxMDYtNDUuMDA3MjE3eiIgcC1pZD0iMTQwNTAiIGZpbGw9IiNkYmRiZGIiPjwvcGF0aD48L3N2Zz4=');
|
|
display: block;
|
|
background-size: cover;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin: 0rpx 15rpx;
|
|
}
|
|
|
|
.normal-value {
|
|
color: $text-gray-hint-color;
|
|
}
|
|
|
|
.select-value {
|
|
color: $text-color;
|
|
}
|
|
|
|
|
|
.invoice-sel-item-yellow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
color: $primary-color;
|
|
}
|
|
|
|
.text-red {
|
|
color: $red-color;
|
|
font-weight: bold;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.invoice-sel-item-gray {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
color: $text-gray-desc-color;
|
|
}
|
|
|
|
.invoice-sel-item-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex: 1;
|
|
padding: 20rpx 10rpx;
|
|
border-bottom: 1rpx solid $divider-color;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
radio:nth-of-type(n+2) {
|
|
margin-left: 20rpx;
|
|
}
|
|
</style> |