You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
486 lines
17 KiB
486 lines
17 KiB
<template>
|
|
<view class="page">
|
|
|
|
<view style="height: 80vh;overflow: hidden;overflow-y: auto;padding: 12px;">
|
|
|
|
<view class="top">
|
|
|
|
<view class="top-item" style="margin-top: 0px;">
|
|
|
|
<text class="item-text">发票类型</text>
|
|
|
|
<radio-group @change="radioChange">
|
|
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="普通发票"
|
|
:checked="info.invoiceType=='普通发票'">普通发票</radio>
|
|
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="增值税发票"
|
|
:checked="info.invoiceType=='增值税发票'">增值税发票</radio>
|
|
</radio-group>
|
|
</view>
|
|
|
|
<view class="top-item">
|
|
|
|
<text class="item-text">抬头类型</text>
|
|
|
|
<radio-group @change="radioChange2">
|
|
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="个人或事业单位"
|
|
:checked="info.headingType=='个人或事业单位'">个人或事业单位
|
|
</radio>
|
|
<radio style="transform:scale(0.8);font-size: 20px;" color="#FF9900" value="企业"
|
|
:checked="info.headingType=='企业'">企业</radio>
|
|
</radio-group>
|
|
|
|
</view>
|
|
|
|
<view class="top-item">
|
|
|
|
<text class="item-text">发票抬头</text>
|
|
|
|
<view class="item-right">
|
|
<view style="width: 100%;margin-left: 20px;padding-left: 5px;">
|
|
<input class="input" type="text" placeholder="填写抬头名称" v-model="info.invoiceHeader" />
|
|
</view>
|
|
<image src="../../static/more.png" style="width: 15px;height: 15px;margin-left: 5px;"
|
|
@click="showList"></image>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="top-item">
|
|
|
|
<text class="item-text">电子邮箱</text>
|
|
|
|
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
|
|
<input class="input" type="text" placeholder="选填" v-model="info.email" />
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="isPerson">
|
|
<view style="display: flex;flex-direction: column;" v-if="showDetail">
|
|
|
|
<view class="top-item">
|
|
|
|
<text class="item-text">税号</text>
|
|
|
|
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
|
|
<input class="input" type="text" placeholder="纳税人识别号或社会统一征信代码"
|
|
v-model="info.dutyParagraph" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="top-item">
|
|
|
|
<text class="item-text">开户银行</text>
|
|
|
|
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
|
|
<input class="input" type="text" placeholder="选填" v-model="info.bankOfDeposit" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="top-item">
|
|
|
|
<text class="item-text">银行账号</text>
|
|
|
|
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
|
|
<input class="input" type="text" placeholder="选填" v-model="info.bankAccount" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="top-item">
|
|
|
|
<text class="item-text">企业地址</text>
|
|
|
|
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
|
|
<input class="input" type="text" placeholder="选填" v-model="info.enterpriseAddress" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="top-item">
|
|
|
|
<text class="item-text">企业电话</text>
|
|
|
|
<view class="item-right" style="width: 100%;margin-left: 20px;padding-left: 5px;">
|
|
<input class="input" type="text" placeholder="选填" v-model="info.enterprisePhone" />
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="item_btn" v-if="!showDetail" @click="showDetailClick(item)">
|
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">展开</text>
|
|
<image src="../../static/zhankai.png" style="width: 15px;height: 15px;"></image>
|
|
</view>
|
|
|
|
<view class="item_btn" v-if="showDetail" @click="showDetailClick(item)">
|
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">收起</text>
|
|
<image src="../../static/shouqi.png" style="width: 15px;height: 15px;"></image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view style="position: absolute; bottom: 20px; display: flex;flex-direction: column;width: 100%;
|
|
box-sizing: border-box;padding-left: 40px;padding-right: 40px; ">
|
|
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B);
|
|
width: 100%;border-radius: 25px;height: 50px;text-align: center;
|
|
line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="save">
|
|
提交申请</view>
|
|
</view>
|
|
|
|
<!-- 弹窗蒙版 -->
|
|
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal'></view>
|
|
<view class="modalDlg" id="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'>
|
|
|
|
<view style="display: flex;flex-direction: column;padding: 12px;">
|
|
|
|
<view
|
|
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; width: 100%;">
|
|
|
|
<text style="font-size: 16px;font-weight: 600;font-family: sans-serif;margin-left: 5px;">选择抬头</text>
|
|
<image src="../../static/close2.png" style="width: 25px;height: 25px;" @click.stop="colseDialog()">
|
|
</image>
|
|
|
|
</view>
|
|
|
|
<scroll-view scroll-y="true" :show-scrollbar="false"
|
|
style="margin-top: 10px;padding-left: 12px;padding-right: 12px;box-sizing: border-box;"
|
|
:style="'height:'+viewHeight+'px'">
|
|
|
|
<view v-for="(item,index) in data" :key="index" style="display: flex;flex-direction: column;"
|
|
v-if="showData">
|
|
|
|
<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;
|
|
background: #fff; border-radius: 10px; margin-top: 12px;padding: 20px 12px;" @click="itemClick(item)">
|
|
|
|
<view style="flex: 1;display: flex;flex-direction: column;">
|
|
|
|
<view style="flex: 1;display: flex;flex-direction: row;align-items: center;">
|
|
<text
|
|
style="font-size: 16px;font-weight: 600;font-family: sans-serif;">{{item.invoiceHeader}}</text>
|
|
<text v-if="item.isDefault==1" style="background: #FFF0DA; color: #FF7200;
|
|
font-size: 10px;margin-left: 6px;border-radius: 5px;padding: 2px 5px;">默认</text>
|
|
</view>
|
|
|
|
<text style="font-size: 12px;color: #999;margin-top: 5px;">
|
|
{{item.invoiceType}} - {{item.headingType}}</text>
|
|
|
|
</view>
|
|
|
|
<text style="font-size: 12px;color: #999;" @click.stop="editItem(item)">编辑</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view v-if="notData" style="display: flex;flex-direction: column;align-items: center;">
|
|
|
|
<image src="https://supervise.yxtsoft.com/lpk/image/notData.png" mode="aspectFit"
|
|
style="width: 100px;height: 100px;"></image>
|
|
<view style="display: flex;flex-direction: column;align-items: center;margin-top: 10px;">
|
|
<text style="font-size: 14px; color: #999;margin-right: 5px;">暂无数据</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
|
|
<view style="position: absolute; bottom: 20px; display: flex;flex-direction: column;width: 100%;
|
|
box-sizing: border-box;padding-left: 40px;padding-right: 40px; ">
|
|
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B);
|
|
width: 100%;border-radius: 25px;height: 50px;text-align: center;
|
|
line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="addInviice">
|
|
添加新的抬头</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
showData: false,
|
|
notData: true,
|
|
viewHeight: "",
|
|
page: {
|
|
sid: ""
|
|
},
|
|
isPerson: true,
|
|
showDetail: false,
|
|
radioDefault: false,
|
|
info: {
|
|
sid: "",
|
|
invoiceType: "", //发票类型
|
|
headingType: "", //抬头类型
|
|
invoiceHeader: "", //发票抬头
|
|
dutyParagraph: "", //税号
|
|
bankOfDeposit: "", //开户行
|
|
bankAccount: "", //账号
|
|
enterpriseAddress: "", //企业地址
|
|
enterprisePhone: "", //企业电话
|
|
email: "", //电子邮箱
|
|
isDefault: "0", //是否默认 1 为默认
|
|
customerSid: getApp().globalData.sid,
|
|
orderSid: "" // 订单sid
|
|
},
|
|
data: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.page.sid = options.sid
|
|
this.getData()
|
|
//隐藏加载框
|
|
// uni.hideLoading();
|
|
},
|
|
onShow() {
|
|
// this.getData()
|
|
// //隐藏加载框
|
|
// uni.hideLoading();
|
|
},
|
|
created() {
|
|
var _this = this
|
|
this.$bus.$on('invoice', msg => {
|
|
console.log("aaaaaaaaaaa4", msg)
|
|
|
|
const index = _this.data.findIndex(item => item.sid == msg.sid)
|
|
console.log(">>>>", index)
|
|
if (index != -1) {
|
|
// 替换 已修改过
|
|
_this.data.splice(index, 1, msg)
|
|
} else {
|
|
// 刚新增的
|
|
_this.data.push(msg)
|
|
}
|
|
|
|
|
|
});
|
|
},
|
|
methods: {
|
|
getData() {
|
|
|
|
this.$api.getInvoiceList(getApp().globalData.sid).then((resp) => {
|
|
console.log("getInvoiceList>>>" + resp);
|
|
this.data = resp
|
|
|
|
const arr1 = this.data.filter(item => item.isDefault == 1)
|
|
console.log(">>>>", arr1)
|
|
|
|
if (arr1.length > 0) {
|
|
this.info = arr1[0]
|
|
this.isPerson = this.info.headingType != '个人或事业单位'
|
|
}
|
|
|
|
}).catch(e => {
|
|
|
|
})
|
|
|
|
},
|
|
showList() {
|
|
this.showModal = true
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
setTimeout(() => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.modalDlg').boundingClientRect(data => {
|
|
console.log("得到布局位置信息" + JSON.stringify(data));
|
|
console.log("节点离页面顶部的距离为" + data.top);
|
|
console.log("节点离页面顶部的距离为" + data.height);
|
|
this.viewHeight = data.height - 135
|
|
this.showData = this.data.length > 0
|
|
this.notData = this.data.length == 0
|
|
|
|
console.log("showData2" + this.showData);
|
|
console.log("notData2" + this.notData);
|
|
|
|
//隐藏加载框
|
|
uni.hideLoading();
|
|
}).exec();
|
|
|
|
}, 500)
|
|
|
|
},
|
|
|
|
itemClick(item) {
|
|
console.log("itemClick", item);
|
|
|
|
this.info = item
|
|
this.isPerson = this.info.headingType != '个人或事业单位'
|
|
this.colseDialog()
|
|
|
|
},
|
|
editItem(item) {
|
|
console.log("editItem", item);
|
|
|
|
uni.navigateTo({
|
|
url: "/pages/me/addInvoice?info=" + encodeURIComponent(JSON.stringify(item))
|
|
})
|
|
},
|
|
colseDialog() {
|
|
this.showModal = false
|
|
},
|
|
addInviice() {
|
|
uni.navigateTo({
|
|
url: "/pages/me/addInvoice"
|
|
})
|
|
},
|
|
radioChange(val) {
|
|
console.log("radioChange", val);
|
|
this.info.invoiceType = val.detail.value
|
|
},
|
|
radioChange2(val) {
|
|
console.log("radioChange2", val);
|
|
|
|
this.info.headingType = val.detail.value
|
|
|
|
this.isPerson = val.detail.value != "个人或事业单位"
|
|
|
|
|
|
},
|
|
showDetailClick() {
|
|
this.showDetail = !this.showDetail
|
|
},
|
|
radioDefaultClick() {
|
|
this.radioDefault = !this.radioDefault
|
|
|
|
this.info.isDefault = this.radioDefault ? "1" : "0"
|
|
|
|
},
|
|
save() {
|
|
|
|
console.log("save", this.info);
|
|
|
|
if (this.stringIsEmpty(this.info.invoiceType)) {
|
|
this.shortToast('请选择发票类型')
|
|
return
|
|
}
|
|
if (this.stringIsEmpty(this.info.headingType)) {
|
|
this.shortToast('请选择抬头类型')
|
|
return
|
|
}
|
|
if (this.stringIsEmpty(this.info.invoiceHeader)) {
|
|
this.shortToast('发票抬头不能为空')
|
|
return
|
|
}
|
|
|
|
if (this.isPerson) {
|
|
if (this.stringIsEmpty(this.info.dutyParagraph)) {
|
|
this.shortToast('税号不能为空')
|
|
return
|
|
}
|
|
}
|
|
this.info.orderSid = this.page.sid
|
|
|
|
console.log("info", this.info);
|
|
|
|
this.$api.submitInvoice(this.info).then((resp) => {
|
|
uni.navigateBack()
|
|
}).catch(e => {
|
|
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
.page {
|
|
background: #F7F7F7;
|
|
height: 100vh;
|
|
|
|
.top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 16px 12px;
|
|
|
|
.top-item {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.item-text {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.item-right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.input {
|
|
width: 100%;
|
|
text-align: right;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item_btn {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.model {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
z-index: 1;
|
|
opacity: 0.5;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.modalDlg {
|
|
/* 设置超出滚动 */
|
|
overflow: auto;
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 70vw;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
background-color: #F7F7F7;
|
|
border-top-right-radius: 20px;
|
|
border-top-left-radius: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
button::after {
|
|
border: 0;
|
|
}
|
|
</style>
|