ts_aimz_uni/pages/mine/mineAccount/invoiceInfo/invoiceInfo.vue
2025-05-19 17:47:21 +08:00

596 lines
17 KiB
Vue

<template>
<view class="page-container">
<view class="condition-box">
<view class="condition-input-box">
<view class="condition-input-container">
<icon class="ml-20" type="search" size="20"></icon>
<input class="condition-input-text" :value="keywords" @input="inputKeywords"
@confirm="doSearchKeyWord" placeholder-style="font-size:28rpx;" type="text"
confirm-type="search" placeholder="搜索" />
<view class="icon-clear size-32 mr-10" v-if="keywords != ''" @click="clearSearch"></view>
</view>
<view class="add-btn" @click="showCreate">新增</view>
</view>
</view>
<view style="margin-top: 80rpx;">
<ContainerLoading :loadingVisible="loadingState" @refresh="doRefreshList">
<scroll-view scroll-y style="height: 80vh;" :lower-threshold="100" refresher-background="#FFFFFF00"
@scrolltolower="doLoadMore">
<view class="order-box">
<block v-for="(item,index) in invoiceInfoList" :key="index">
<view class="order-item">
<view class="contact-desc">
<view class="contact-icon single-line">
<view class="icon-user-default-blue size-48"></view>
<view class="ml-10 name single-line">{{item.invoiceName}}</view>
</view>
<view class="operate-box">
<view class="icon-edit-blue size-48 mr-10" @click="showEdit" :data-value="item">
</view>
<view class="icon-del-red size-48" @click="showDel" :data-value="item"></view>
</view>
</view>
<view class="service-desc ml-10">纳税识别号:{{item.invoiceNumber}}</view>
<view v-if="item.invoiceOrgtel != ''" class="service-desc ml-10">
企业电话:{{item.invoiceOrgtel}}</view>
<view class="service-desc ml-5" v-if="item.invoiceOrgaddress != ''">
<view class="icon-location-yellow size-32"></view>
<view class="ml-10">{{item.invoiceOrgaddress}}</view>
</view>
</view>
</block>
<uni-load-more :status="hasMore"></uni-load-more>
</view>
</scroll-view>
</ContainerLoading>
</view>
<uni-popup ref="operateDialog" 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">{{isCreate?'新增':'编辑'}}</view>
</view>
<view class="form-box">
<view class="form-item">
<text class="form-item-title star" decode>公&ensp;司&emsp;名&ensp;称</text>
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
:value="companyName" placeholder="请输入公司名称" class="form-item-content"
@input="inputCompanyName" />
</view>
<view class="form-item">
<text class="form-item-title star">纳税人识别号</text>
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
:value="companyTinNum" placeholder="请输入纳税人识别号" class="form-item-content"
@input="inputCompanyTinNum" />
</view>
<view class="form-item">
<text class="form-item-title" decode>公&ensp;司&emsp;地&ensp;址</text>
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
:value="companyAddress" placeholder="请输入公司地址" class="form-item-content"
@input="inputCompanyAddress" />
</view>
<view class="form-item">
<text class="form-item-title" decode>公&ensp;司&emsp;电&ensp;话</text>
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
:value="companyPhone" placeholder="请输入公司电话" class="form-item-content"
@input="inputCompanyPhone" />
</view>
<view class="form-item">
<text class="form-item-title" decode>开&emsp;&ensp;户&ensp;&emsp;行</text>
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
:value="companyBank" placeholder="请输入开户行" class="form-item-content"
@input="inputCompanyBank" />
</view>
<view class="form-item">
<text class="form-item-title" decode>开 户 行 账 号</text>
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
:value="companyBankNum" placeholder="请输入开户行账号" class="form-item-content"
@input="inputCompanyBankNum" />
</view>
</view>
<view>
<view v-if="isCreate" class="confirm-btn" @click="doAdd">提交</view>
<view v-if="!isCreate" class="confirm-btn" @click="doEdit">保存</view>
</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 ContainerLoading from '@/components/container-loading.vue'
import InvoiceApi from '../../../../common/js/net/InvoiceApi';
import {
isValidPhone
} from '@/common/js/validator.js'
import {
inject
} from 'vue';
export default {
components: {
ContainerLoading
},
setup() {
const globalData = inject('globalData')
return {
globalData
}
},
data() {
return {
imgAssets: this.globalData.imgAssetsUrl,
localAssets: this.globalData.localAssets,
keywords: '',
pageData: {
page: 1,
rows: 10,
keywords: ''
},
msgHint: '',
msgType: 'error',
loadingState: 'loading',
listRefreshTrig: false,
isLoadMore: false,
hasMore: 'more',
createDialog: false,
title: '开票信息',
isCreate: true, //区别是创建 or 编辑
companyName: '', //公司名称
companyAddress: '', //公司地址
companyPhone: '', //公司电话
companyBank: '', //公司开户行
companyBankNum: '', //开户行账号
companyTinNum: '', //纳税人识别号
btnTxt: '提交',
invoiceInfoList: [], //开票信息列表
tempItem: null,
};
},
onLoad(options) {
uni.setNavigationBarTitle({
title: "发票抬头",
});
uni.setNavigationBarColor({
frontColor: "#000000",
backgroundColor: "#F0F0F0",
animation: {
duration: 500,
timingFunc: "easeIn",
},
});
this.doRefreshList()
},
methods: {
closeDialog() {
this.companyName = ''
this.companyAddress = ''
this.companyPhone = ''
this.companyBank = ''
this.companyBankNum = ''
this.companyTinNum = ''
this.tempItem = null
this.$refs.operateDialog.close()
},
showEdit(e) {
this.tempItem = e.currentTarget.dataset.value
this.isCreate = false
this.companyName = this.tempItem.invoiceName
this.companyAddress = this.tempItem.invoiceOrgaddress
this.companyPhone = this.tempItem.invoiceOrgtel
this.companyBank = this.tempItem.invoiceBank
this.companyBankNum = this.tempItem.invoiceBanknumber
this.companyTinNum = this.tempItem.invoiceNumber
this.$refs.operateDialog.open()
},
showDel(e) {
const item = e.currentTarget.dataset.value
const _self = this
uni.showModal({
title: '警告',
content: '您确定要删除该开票信息吗?',
success(res) {
if (res.confirm) {
_self.doDel(item)
}
}
})
},
showCreate() {
this.companyName = ''
this.companyAddress = ''
this.companyPhone = ''
this.companyBank = ''
this.companyBankNum = ''
this.companyTinNum = ''
this.tempItem = null
this.isCreate = true
this.$refs.operateDialog.open()
},
inputCompanyName(e) {
this.companyName = e.detail.value
},
inputCompanyAddress(e) {
this.companyAddress = e.detail.value
},
inputCompanyPhone(e) {
this.companyPhone = e.detail.value
},
inputCompanyBank(e) {
this.companyBank = e.detail.value
},
inputCompanyBankNum(e) {
this.companyBankNum = e.detail.value
},
inputCompanyTinNum(e) {
this.companyTinNum = e.detail.value
},
inputKeywords(e) {
this.keywords = e.detail.value
},
doSearchKeyWord() {
this.doRefreshList()
},
clearSearch() {
this.keywords = ''
this.doRefreshList()
},
doRefreshList() {
console.log('正在刷新...')
const _self = this
_self.loadingState = 'loading'
_self.hasMore = 'more'
_self.pageData.page = 1
_self.pageData.keywords = _self.keywords
_self.isLoadMore = false
_self.doGetInvoiceInfoList(true)
},
doLoadMore() {
//判断是否正在加载中 与是否存在更多数据
const _self = this
if (_self.data.isLoadMore || _self.hasMore == 'noMore') {
return
}
_self.isLoadMore = true
_self.hasMore= 'loading'
_self.pageData.page = ++_self.pageData.page
_self.pageData.keywords = _self.keywords
_self.doGetInvoiceInfoList(false)
},
doGetInvoiceInfoList(isRefresh) {
const _self = this
_self.invoiceInfoList = isRefresh ? [] : _self.invoiceInfoList
_self.loadingState = isRefresh ? 'loading' : ''
InvoiceApi.doGetMineInvoiceList(_self.pageData)
.then(res => {
console.log(res)
var status = 'success'
status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
_self.loadingState = isRefresh ? status : ''
_self.invoiceInfoList = _self.invoiceInfoList.concat(res.rows)
_self.isLoadMore = false
_self.hasMore = _self.invoiceInfoList.length < res.total ? 'more' : 'noMore'
})
.catch(err => {
_self.loadingState = 'error'
_self.isLoadMore = false
_self.hasMore = 'more'
})
},
//新增提交
doAdd() {
const isLegal = this.checkParams()
if (isLegal) {
const _self = this
uni.showLoading({
title: '提交中...',
})
const data = _self.buildParams()
InvoiceApi.doSaveMineInvoiceInfo(data)
.then(res => {
uni.hideLoading()
_self.$refs.operateDialog.close()
_self.msgType = 'success'
_self.msgHint = '新增开票信息成功'
_self.$refs.msg.open()
_self.companyAddress = ''
_self.companyBank = ''
_self.companyBankNum = ''
_self.companyName = ''
_self.companyPhone = ''
_self.companyTinNum = ''
_self.isCreate = true
_self.doRefreshList()
})
.catch(err => {
uni.hideLoading()
_self.msgType = 'error'
_self.msgHint = err.msg ? err.msg : '新增开票信息失败,请稍后重试'
_self.$refs.msg.open()
})
}
},
//编辑提交
doEdit() {
const isLegal = this.checkParams()
if (isLegal) {
const _self = this
uni.showLoading({
title: '修改中...',
})
const data = _self.buildParams()
InvoiceApi.doUpdateMineInvoiceInfo(_self.tempItem.invoiceId, data)
.then(res => {
uni.hideLoading()
_self.$refs.operateDialog.close()
_self.msgType = 'success'
_self.msgHint = '修改开票信息成功'
_self.$refs.msg.open()
_self.companyAddress = ''
_self.companyBank = ''
_self.companyBankNum = ''
_self.companyName = ''
_self.companyPhone = ''
_self.companyTinNum = ''
_self.tempItem = null
_self.isCreate = true
_self.doRefreshList()
})
.catch(err => {
uni.hideLoading()
_self.msgType = 'error'
_self.msgHint = err.msg ? err.msg : '修改开票信息失败,请稍后重试'
_self.$refs.msg.open()
})
}
},
//删除
doDel(item) {
const _self = this
uni.showLoading({
title: '删除中...',
})
InvoiceApi.doDelMineInvoiceInfo(item.invoiceId)
.then(res => {
uni.hideLoading()
_self.msgHint = '删除成功'
_self.msgType = 'success'
_self.$refs.msg.open()
_self.doRefreshList()
})
.catch(err => {
uni.hideLoading()
_self.msgHint = err.msg ? err.msg : '删除失败,请稍后重试'
_self.msgType = 'error'
_self.$refs.msg.open()
})
},
buildParams() {
const _self = this
const data = {
invoiceType: "企业",
invoiceName: _self.companyName,
invoiceNumber: _self.companyTinNum,
invoiceOrgaddress: _self.companyAddress,
invoiceOrgtel: _self.companyPhone,
invoiceBank: _self.companyBank,
invoiceBanknumber: _self.companyBankNum,
}
return data
},
checkParams() {
if (this.companyName == '') {
this.msgHint = '请输入公司名称'
this.msgType = 'error'
this.$refs.msg.open()
return false
}
if (this.companyTinNum == '') {
this.msgHint = '请输入纳税人识别号'
this.msgType = 'error'
this.$refs.msg.open()
return false
}
if (this.companyPhone != '') {
if (!isValidPhone(this.companyPhone)) {
this.msgHint = '请输入正确公司电话'
this.msgType = 'error'
this.$refs.msg.open()
return false
}
}
return true
},
},
onPullDownRefresh() {
this.doRefreshList()
uni.stopPullDownRefresh()
},
};
</script>
<style lang="scss" scoped>
.condition-content-container {
background-color: $divider-color;
padding: 0rpx 30rpx;
height: 350rpx;
display: flex;
flex-direction: column;
}
.add-btn {
border-radius: 8rpx;
background-color: $btn-green-color;
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
text-align: center;
height: 50rpx;
margin-left: 20rpx;
line-height: 50rpx;
font-family: PingFangSC-regular;
padding: 5rpx 10rpx;
}
.add-btn:active {
background-color: $btn-green-color-active;
}
.order-box {
display: flex;
flex-direction: column;
}
.order-item {
display: flex;
flex-direction: column;
background-color: $white-color;
border-radius: 15rpx;
}
.order-item:nth-of-type(n+2) {
margin-top: 20rpx;
}
.contact-desc {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15px;
}
.contact-icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex: 1;
}
.operate-box {
display: flex;
flex-direction: row;
}
.name {
line-height: 32rpx;
flex: 1;
color: $text-color;
font-size: 28rpx;
text-align: left;
font-weight: bold;
font-family: SourceHanSansSC-black;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 1;
// overflow: hidden;
// text-overflow: ellipsis;
}
.service-desc {
padding: 5rpx 15rpx 15rpx 30rpx;
line-height: 26rpx;
color: $text-gray-desc-color;
font-size: 26rpx;
text-align: left;
font-family: SourceHanSansSC-regular;
display: flex;
flex-direction: row;
align-items: center;
}
.edit {
line-height: 20px;
border-radius: 4px;
background-color: $btn-blue-color;
color: rgba(255, 255, 255, 1);
font-size: 24rpx;
text-align: center;
font-family: PingFangSC-regular;
padding: 5rpx 15rpx;
}
.edit:active {
background-color: $btn-blue-color-active;
}
.del {
line-height: 20px;
border-radius: 4px;
background-color: $btn-red-color;
color: rgba(255, 255, 255, 1);
font-size: 24rpx;
text-align: center;
font-family: PingFangSC-regular;
padding: 5rpx 15rpx;
margin-left: 5px;
}
.del:active {
background-color: $btn-red-color-active;
}
.options-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
min-width: 170rpx;
}
.form-box {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20rpx;
}
.form-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 10rpx 0rpx;
}
.form-item-title {
flex: .5;
font-size: 28rpx;
color: $text-color;
font-weight: 500;
text-align: left;
}
.form-item-content {
flex: 1;
text-align: right;
background-color: $bg-gray-input-color;
padding: 15rpx;
font-size: 28rpx;
border-radius: 15rpx;
margin-left: 20rpx;
}
.confirm-btn {
background-color: $btn-green-color;
color: $white-color;
font-size: 28rpx;
height: 70rpx;
line-height: 70rpx;
border-radius: 5px;
width: 100% !important;
padding: 0rpx;
text-align: center;
}
.confirm-btn:active {
background-color: $btn-green-color-active;
color: $white-color;
}
</style>