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.
327 lines
11 KiB
327 lines
11 KiB
<template>
|
|
<view class="page">
|
|
|
|
<view style="height: 80vh;overflow: hidden;overflow-y: auto;padding: 12px;">
|
|
|
|
<view class="top">
|
|
|
|
<view class="top-item">
|
|
|
|
<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" style="margin-top: 24px;">
|
|
|
|
<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>
|
|
|
|
<view class="bom">
|
|
|
|
<view class="bom-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>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="isPerson">
|
|
<view style="display: flex;flex-direction: column;" v-if="showDetail">
|
|
|
|
<view class="bom-item" style="margin-top: 12px;">
|
|
|
|
<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="bom-item" style="margin-top: 12px;">
|
|
|
|
<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="bom-item" style="margin-top: 12px;">
|
|
|
|
<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="bom-item" style="margin-top: 12px;">
|
|
|
|
<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="bom-item" style="margin-top: 12px;">
|
|
|
|
<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 class="default">
|
|
|
|
<text class="item-text">设为默认</text>
|
|
|
|
<radio :checked="radioDefault" @click="radioDefaultClick" style="transform:scale(0.8);" color="#FF9900">
|
|
</radio>
|
|
</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>
|
|
</template>
|
|
|
|
<script>
|
|
//引入bus
|
|
import bus from '@/common/bus';
|
|
export default {
|
|
data() {
|
|
return {
|
|
isPerson: true,
|
|
showDetail: false,
|
|
radioDefault: false,
|
|
info: {
|
|
sid: "",
|
|
invoiceType: "", //发票类型
|
|
headingType: "", //抬头类型
|
|
invoiceHeader: "", //发票抬头
|
|
dutyParagraph: "", //税号
|
|
bankOfDeposit: "", //开户行
|
|
bankAccount: "", //账号
|
|
enterpriseAddress: "", //企业地址
|
|
enterprisePhone: "", //企业电话
|
|
isDefault: "0", //是否默认 1 为默认
|
|
customerSid: getApp().globalData.sid,
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
console.log("options", options);
|
|
|
|
if (JSON.stringify(options) != '{}') {
|
|
let userInfo = JSON.parse(decodeURIComponent(options.info));
|
|
console.log('userInfo', userInfo);
|
|
this.info = userInfo
|
|
this.radioDefault = this.info.isDefault == '1'
|
|
this.isPerson = this.info.headingType != '个人或事业单位'
|
|
}
|
|
|
|
|
|
},
|
|
methods: {
|
|
|
|
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.$api.saveOrUpdateInvoice(this.info).then((resp) => {
|
|
this.info.sid = resp
|
|
bus.$emit('invoice', this.info);
|
|
uni.navigateBack()
|
|
}).catch(e => {
|
|
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background: #F7F7F7;
|
|
height: 100vh;
|
|
|
|
.top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 16px 12px;
|
|
|
|
.top-item {
|
|
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;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.bom {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 16px 12px;
|
|
|
|
.bom-item {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
.default {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 16px 12px;
|
|
|
|
}
|
|
}
|
|
</style>
|