|
|
@@ -0,0 +1,396 @@
|
|
|
+<template>
|
|
|
+ <div class="addinvoice-wrapper">
|
|
|
+ <div class="mobile-nav">
|
|
|
+ <div class="mobile-header mobile-center-header">
|
|
|
+ <a @click="goBack()"><i class="iconfont icon-fanhui"></i></a>
|
|
|
+ <p>{{joinType === 'update' ? '修改': '新增'}}发票信息</p>
|
|
|
+ <p class="en-name">
|
|
|
+ <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">
|
|
|
+ {{currentEnName}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addinvoice-content-wrapper">
|
|
|
+ <div class="addinvoice-title" v-if="joinType !== 'add'">{{chooseItem.kind === 1206 ? '增值税普票' : '增值税专票'}}</div>
|
|
|
+ <div class="addinvoice-ul" :style="joinType === 'add' ? 'margin-top: 0.2rem' : ''">
|
|
|
+ <div class="addinvoice-focus clearfix" v-if="joinType === 'add'">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>发票类型：</div>
|
|
|
+ <div class="pull-left clearfix">
|
|
|
+ <div class="normal pull-left" style="margin-right: 0.2rem;" @click="isSaveinvoiceType === 0 ? invoiceType = 'speci' : ''">
|
|
|
+ <div class="icon" :class="invoiceType === 'speci' ? 'active' : ''">
|
|
|
+ <div class="icon-next"></div>
|
|
|
+ </div>
|
|
|
+ 增值税专票
|
|
|
+ </div>
|
|
|
+ <div class="normal pull-left" @click="isSaveinvoiceType === 0 ? invoiceType = 'normal' : ''">
|
|
|
+ <div class="icon" :class="invoiceType === 'normal' ? 'active' : ''">
|
|
|
+ <div class="icon-next"></div>
|
|
|
+ </div>
|
|
|
+ 增值税普票
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addinvoice-focus clearfix">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>发票抬头：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="请输入发票抬头" type="text" v-model="chooseItem.head" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>单位地址：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="请输入单位地址" type="text" v-model="chooseItem.companyAddress" maxlength="50" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>单位电话：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="区号和号码用“-”隔开" type="text" v-model="chooseItem.companyPhone"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>税务登记号：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="请输入税务登记号" type="text" v-model="chooseItem.companyTaxNumber" maxlength="20"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>开户银行：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="请输入开户银行" type="text" v-model="chooseItem.bankName" maxlength="30"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-focus clearfix" v-if="invoiceType === 'speci'">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>开户银行账号：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="请输入开户银行账号" type="number" v-model="chooseItem.bankAccount" maxlength="30" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-focus clearfix">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>收票人：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="请输入收票人" type="text" maxlength="10" v-model="chooseItem.name" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-focus clearfix">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>联系电话：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="请输入联系电话" type="text" maxlength="11" v-model="chooseItem.telephone" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-focus clearfix">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>所在地区：</div>
|
|
|
+ <div class="pull-left input" @click="addressShow = true">
|
|
|
+ <span v-text="chooseItem.area || '选择地区'">选择地区</span>
|
|
|
+ <i class="iconfont icon-xiangyou"></i>
|
|
|
+ <!--<input placeholder="省/市/区" type="text" />-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-focus clearfix">
|
|
|
+ <div class="pull-left addinvoice-focus-name"><a class="red">*</a>详细地址：</div>
|
|
|
+ <div class="pull-left input">
|
|
|
+ <input placeholder="建议您填写详细发件地址，如街道名，门牌号楼层和房间号等信息" type="text" v-model="chooseItem.detailAddress" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-agree" v-if="joinType === 'add'">
|
|
|
+ <input type="checkbox" id="awesome" :checked="agreeInfo" @click="agreeInfo = !agreeInfo"/>
|
|
|
+ <label for="awesome">我已阅读并同意<a>《发票须知》</a></label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="addinvoice-controll clearfix">
|
|
|
+ <div class="pull-left" @click="goBack()">取消</div>
|
|
|
+ <div class="pull-right" @click="goBack(true)">确认</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
+ <select-address :className="''" :isShow="addressShow" @closeAction="addressData"></select-address>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { RemindBox } from '~components/mobile/common'
|
|
|
+ import SelectAddress from '~components/mobile/base/SelectAddress.vue'
|
|
|
+ export default {
|
|
|
+ name: 'addinvoice',
|
|
|
+ props: {
|
|
|
+ chooseItem: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
+ },
|
|
|
+ isSaveinvoiceType: { // 已保存的发票信息
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ joinType: {
|
|
|
+ type: String,
|
|
|
+ default: 'add'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isEmpty() {
|
|
|
+ return this.chooseItem.kind
|
|
|
+ }
|
|
|
+ // invoiceType() {
|
|
|
+ // return this.isSaveinvoiceType > 0 ? (this.isSaveinvoiceType === 1205 ? 'speci' : 'normal') : 'speci'
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.isSaveinvoiceType === 1205) {
|
|
|
+ this.invoiceType = 'normal'
|
|
|
+ } else if (this.isSaveinvoiceType === 1206) {
|
|
|
+ this.invoiceType = 'speci'
|
|
|
+ } else {
|
|
|
+ this.invoiceType = this.chooseItem.kind === 1205 ? 'speci' : 'normal'
|
|
|
+ if (this.chooseItem.kind) {
|
|
|
+ this.agreeInfo = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ invoiceType: 'speci',
|
|
|
+ agreeInfo: false,
|
|
|
+ collectResult: '',
|
|
|
+ timeoutCount: 0,
|
|
|
+ addressShow: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack(str) {
|
|
|
+ if (str) {
|
|
|
+ if (this.chooseItem.head === '' || !this.chooseItem.head) {
|
|
|
+ this.setRemindText('发票抬头不能为空')
|
|
|
+ } else if (this.invoiceType !== 'normal' && (this.chooseItem.companyAddress === '' || !this.chooseItem.companyAddress)) {
|
|
|
+ this.setRemindText('单位地址不能为空')
|
|
|
+ } else if (this.invoiceType !== 'normal' && (!/^0\d{2,3}-\d{7,8}$/.test(this.chooseItem.companyPhone))) {
|
|
|
+ this.setRemindText('单位电话不正确')
|
|
|
+ } else if (this.invoiceType !== 'normal' && (this.chooseItem.companyTaxNumber === '' || !this.chooseItem.companyTaxNumber)) {
|
|
|
+ this.setRemindText('税务登记号不能为空')
|
|
|
+ } else if (this.invoiceType !== 'normal' && (!/^[0-9a-zA-Z]*$/g.test(this.chooseItem.companyTaxNumber))) {
|
|
|
+ this.setRemindText('税务登记号为只能输入字母和数字')
|
|
|
+ } else if (this.invoiceType !== 'normal' && (this.chooseItem.bankName === '' || !this.chooseItem.bankName)) {
|
|
|
+ this.setRemindText('开户银行不能为空')
|
|
|
+ } else if (this.invoiceType !== 'normal' && (this.chooseItem.bankAccount === '' || !this.chooseItem.bankAccount)) {
|
|
|
+ this.setRemindText('开户银行账号不能为空')
|
|
|
+ } else if (this.chooseItem.name === '' || !this.chooseItem.name) {
|
|
|
+ this.setRemindText('收票人不能为空')
|
|
|
+ } else if (!/^1\d{10}$/.test(this.chooseItem.telephone)) {
|
|
|
+ this.setRemindText('联系电话不正确')
|
|
|
+ } else if (this.chooseItem.detailAddress === '' || !this.chooseItem.detailAddress) {
|
|
|
+ this.setRemindText('详细地址不能为空')
|
|
|
+ } else if (!this.agreeInfo) {
|
|
|
+ this.setRemindText('请阅读并勾选发票须知')
|
|
|
+ } else {
|
|
|
+ this.chooseItem.kind = this.invoiceType === 'normal' ? 1206 : 1205
|
|
|
+ this.chooseItem.is_agree = true
|
|
|
+ let params = new FormData()
|
|
|
+ params.append('bill', JSON.stringify(this.chooseItem))
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post('/trade/bill/save', params).then(res => {
|
|
|
+ this.setRemindText('保存成功')
|
|
|
+ this.$emit('addinvoiceBtn', str)
|
|
|
+ }, config)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$emit('addinvoiceBtn')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addressData(item) {
|
|
|
+ this.addressShow = false
|
|
|
+ if (item) {
|
|
|
+ this.chooseItem.address = item
|
|
|
+ this.chooseItem.area = item.province + ',' + item.city + ',' + item.area
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setRemindText(str) {
|
|
|
+ this.collectResult = str
|
|
|
+ this.timeoutCount++
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ RemindBox,
|
|
|
+ SelectAddress
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ @mixin overFlowHidden {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ @mixin lineHeight($value) {
|
|
|
+ height: $value;
|
|
|
+ line-height: $value;
|
|
|
+ }
|
|
|
+ .addinvoice-wrapper {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ background: #f1f3f6;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ .mobile-header{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ z-index: 10;
|
|
|
+ width:100%;
|
|
|
+ height: 1.26rem;
|
|
|
+ line-height: 1.26rem;
|
|
|
+ /*border-bottom:.01rem solid #ccc;*/
|
|
|
+ background: #3e82f5;
|
|
|
+ padding:0 .2rem 0 .1rem;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .mobile-header p{
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size:.36rem;
|
|
|
+ text-align: center;
|
|
|
+ width: 6rem;
|
|
|
+ padding-left: 1rem;
|
|
|
+ }
|
|
|
+ .mobile-header a{
|
|
|
+ font-size:.28rem;
|
|
|
+ color:#fff;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .mobile-header a i{
|
|
|
+ font-size: .48rem;
|
|
|
+ margin-right: -.1rem;
|
|
|
+ }
|
|
|
+ .addinvoice-content-wrapper {
|
|
|
+ margin: 1.26rem 0 0 0;
|
|
|
+ height: calc(100vh - 1.26rem);
|
|
|
+ overflow-y: scroll;
|
|
|
+ .addinvoice-title {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #333;
|
|
|
+ @include lineHeight(0.8rem);
|
|
|
+ margin: 0 0.2rem;
|
|
|
+ }
|
|
|
+ .addinvoice-ul {
|
|
|
+ background: #fff;
|
|
|
+ margin: 0 0.2rem;
|
|
|
+ padding-bottom: 0.5rem;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ }
|
|
|
+ .addinvoice-focus {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #226ce7;
|
|
|
+ line-height: 1.16rem;
|
|
|
+ border-bottom: 1px solid #dcdcdc;
|
|
|
+ margin: 0 0.2rem;
|
|
|
+ .addinvoice-focus-name {
|
|
|
+ width: 2.1rem;
|
|
|
+ }
|
|
|
+ .red {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+ .normal {
|
|
|
+ .icon {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #333;
|
|
|
+ width: 0.5rem;
|
|
|
+ height: 0.5rem;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #dcdcdc;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-top: 0.32rem;
|
|
|
+ &.active .icon-next {
|
|
|
+ background: #226ce7;
|
|
|
+ width: 0.3rem;
|
|
|
+ height: 0.3rem;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate3d(-50%, -50%, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ width: 4.55rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ height: 0.5rem;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 4.55rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #666;
|
|
|
+ position: relative;
|
|
|
+ i {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addinvoice-agree {
|
|
|
+ margin: 0.25rem 0.2rem 0;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ color: #666;
|
|
|
+ input[type="checkbox"] + label::before {
|
|
|
+ content: "\a0"; /*不换行空格*/
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.36rem;
|
|
|
+ height: 0.36rem;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-right: .05rem;
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ background-color: #fff;
|
|
|
+ text-indent: .15em;
|
|
|
+ border: 1px solid #226ce7;
|
|
|
+ line-height: 0.36rem; /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
|
|
|
+ }
|
|
|
+ input[type="checkbox"]:checked + label::before {
|
|
|
+ content: "\2713";
|
|
|
+ color: #226ce7;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ position: absolute;
|
|
|
+ clip: rect(0, 0, 0, 0);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: #226ce7
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addinvoice-controll {
|
|
|
+ font-size: 0.32rem;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0.5rem 0.2rem 0;
|
|
|
+ div {
|
|
|
+ width: 3.16rem;
|
|
|
+ @include lineHeight(0.77rem);
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ text-align: center;
|
|
|
+ &:first-child {
|
|
|
+ background: #bfbfbf;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ background: #3f84f6
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
shenjj
