|
@@ -12,112 +12,134 @@
|
|
|
<div class="invoice-wrapper-el">
|
|
<div class="invoice-wrapper-el">
|
|
|
<div class="invoice-top clearfix">
|
|
<div class="invoice-top clearfix">
|
|
|
<div class="pull-left">已设置的发票信息</div>
|
|
<div class="pull-left">已设置的发票信息</div>
|
|
|
- <div class="pull-right" v-if="invoiceList.length !== 2" @click="addInvoiceNew()"><img src="/images/mobile/center/user/icon-rm-invoice.png"/>新增发票</div>
|
|
|
|
|
|
|
+ <!--<div class="pull-right" v-if="invoiceList.length !== 2" @click="addInvoiceNew()"><img src="/images/mobile/center/user/icon-rm-invoice.png"/>新增发票</div>-->
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="invoice-middle" v-if="invoiceList.length > 0">
|
|
|
|
|
- <div v-for="(item, index) in invoiceList">
|
|
|
|
|
- <!-- 普票 -->
|
|
|
|
|
- <div class="invoice-normal" v-if="item.kind === 1206">
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">发票类型:</div>
|
|
|
|
|
- <div class="pull-right normal-primary">普票</div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">开票抬头:</div>
|
|
|
|
|
- <div class="pull-right overhiden">{{item.head}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">收票人:</div>
|
|
|
|
|
- <div class="pull-right overhiden">{{item.name}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">收票人电话:</div>
|
|
|
|
|
- <div class="pull-right overhiden">{{item.telephone}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <ul class="invoice-middle mi-list" v-if="invoiceList.length > 0">
|
|
|
|
|
+ <li v-for="(item, index) in invoiceList">
|
|
|
|
|
+ <template v-if="item.kind === 1206">
|
|
|
|
|
+ <div class="mi-list-bottom clearfix">
|
|
|
|
|
+ <div class="list clearfix">
|
|
|
|
|
+ <div class="pull-left">发票抬头:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width: 1.85rem">{{item.head}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="list clearfix">
|
|
|
|
|
+ <div class="clearfix pull-left w50">
|
|
|
|
|
+ <div class="pull-left">收票人:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width:2.1rem">{{item.name}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="clearfix pull-left w50">
|
|
|
|
|
+ <div class="pull-left">联系电话:</div>
|
|
|
|
|
+ <div class="pull-left overhidden">{{item.telephone}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">收票地址:</div>
|
|
|
|
|
- <div class="pull-right">
|
|
|
|
|
- <p>{{item.area}}</p>
|
|
|
|
|
- <p style="max-width: 4.4rem" class="overhiden">{{item.detailAddress}}</p>
|
|
|
|
|
|
|
+ <div class="list ">
|
|
|
|
|
+ <div class="clearfix">
|
|
|
|
|
+ <div class="pull-left">收票地址:</div>
|
|
|
|
|
+ <div class="pull-left" style="width: 5rem;">
|
|
|
|
|
+ {{item.detailAddress}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
<div class="invoice-controll clearfix">
|
|
<div class="invoice-controll clearfix">
|
|
|
<div class="pull-left" @click="updateInvoice(item, index)"><i class="iconfont icon-edit" ></i>修改</div>
|
|
<div class="pull-left" @click="updateInvoice(item, index)"><i class="iconfont icon-edit" ></i>修改</div>
|
|
|
<div class="pull-left" @click="deleteInvoice(item, index)"><i class="iconfont icon-lajitong" ></i>删除</div>
|
|
<div class="pull-left" @click="deleteInvoice(item, index)"><i class="iconfont icon-lajitong" ></i>删除</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- <!-- 专票 -->
|
|
|
|
|
- <div :style="!hasnormal ? '': 'margin-top: 0.24rem'" class="invoice-normal invoice-speci" v-else-if="item.kind === 1205">
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">发票类型:</div>
|
|
|
|
|
- <div class="pull-right normal-primary ">专票</div>
|
|
|
|
|
|
|
+ <div class="fixedImg">
|
|
|
|
|
+ <img src="/images/mobile/center/invoice-nor2.png"/>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <div :style="!hasnormal ? '': 'margin-top: 0.24rem'" class="invoice-speci">
|
|
|
|
|
+ <div class="mi-list-bottom clearfix">
|
|
|
|
|
+ <div class="list clearfix">
|
|
|
|
|
+ <div class="pull-left">发票抬头:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width: 1.85rem">{{item.head}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="list" >
|
|
|
|
|
+ <div class="clearfix">
|
|
|
|
|
+ <div class="pull-left">单位电话:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width: 4.6rem;">
|
|
|
|
|
+ {{item.companyPhone || '-'}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">开票抬头:</div>
|
|
|
|
|
- <div class="pull-right overhiden">{{item.head}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="list">
|
|
|
|
|
+ <div class="clearfix">
|
|
|
|
|
+ <div class="pull-left">单位地址:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width: 4.6rem;">
|
|
|
|
|
+ {{item.bcompanyAddress || '-'}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">单位地址:</div>
|
|
|
|
|
- <div class="pull-right overhiden">{{item.companyAddress}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="list">
|
|
|
|
|
+ <div class="clearfix">
|
|
|
|
|
+ <div class="pull-left">税务登记号:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width: 4.8rem;">
|
|
|
|
|
+ {{item.companyTaxNumber || '-'}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">收票电话:</div>
|
|
|
|
|
- <div class="pull-right">{{item.companyPhone}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">税务登记号:</div>
|
|
|
|
|
- <div class="pull-right overhiden">{{item.companyTaxNumber}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="list">
|
|
|
|
|
+ <div class="clearfix">
|
|
|
|
|
+ <div class="pull-left">开户银行名称:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width: 4.6rem;">
|
|
|
|
|
+ {{item.bankName || '-'}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">开户银行:</div>
|
|
|
|
|
- <div class="pull-right overhiden">{{item.bankName}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="list">
|
|
|
|
|
+ <div class="clearfix">
|
|
|
|
|
+ <div class="pull-left">开户银行账户:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width: 4.6rem;">
|
|
|
|
|
+ {{item.bankAccount || '-'}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">开户银行账号:</div>
|
|
|
|
|
- <div class="pull-right overhiden">{{item.bankAccount}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="list clearfix">
|
|
|
|
|
+ <div class="clearfix pull-left w50">
|
|
|
|
|
+ <div class="pull-left">收票人:</div>
|
|
|
|
|
+ <div class="pull-left overhidden" style="width:2.1rem">{{item.name}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="clearfix pull-left w50">
|
|
|
|
|
+ <div class="pull-left">收票电话:</div>
|
|
|
|
|
+ <div class="pull-left overhidden">{{item.telephone}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">收票人:</div>
|
|
|
|
|
- <div class="pull-right">{{item.name}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">联系电话:</div>
|
|
|
|
|
- <div class="pull-right">{{item.telephone}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="invoice-list clearfix">
|
|
|
|
|
- <div class="invoice-list-title pull-left">收票地址:</div>
|
|
|
|
|
- <div class="pull-right">
|
|
|
|
|
- <p>{{item.area}}</p>
|
|
|
|
|
- <!--<p>{{item.detailAddress}}</p>-->
|
|
|
|
|
- <p style="max-width: 4.4rem" class="overhiden">{{item.detailAddress}}</p>
|
|
|
|
|
|
|
+ <div class="list ">
|
|
|
|
|
+ <div class="clearfix">
|
|
|
|
|
+ <div class="pull-left">收票地址:</div>
|
|
|
|
|
+ <div class="pull-left" style="width: 5rem;">
|
|
|
|
|
+ {{item.detailAddress}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="invoice-controll clearfix">
|
|
|
|
|
+ <div class="pull-left" @click="updateInvoice(item, index)"><i class="iconfont icon-edit" ></i>修改</div>
|
|
|
|
|
+ <div class="pull-left" @click="deleteInvoice(item, index)"><i class="iconfont icon-lajitong" ></i>删除</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="fixedImg">
|
|
|
|
|
+ <img src="/images/mobile/center/invoice-spec2.png"/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <!-- 专票 -->
|
|
|
|
|
|
|
|
- <div class="invoice-controll clearfix">
|
|
|
|
|
- <div class="pull-left" @click="updateInvoice(item, index)"><i class="iconfont icon-edit" ></i>修改</div>
|
|
|
|
|
- <div class="pull-left" @click="deleteInvoice(item, index)"><i class="iconfont icon-lajitong" ></i>删除</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
<div class="com-none-state" v-if="invoiceList.length === 0">
|
|
<div class="com-none-state" v-if="invoiceList.length === 0">
|
|
|
<img src="/images/mobile/@2x/empty-collect.png">
|
|
<img src="/images/mobile/@2x/empty-collect.png">
|
|
|
<p>抱歉,暂无发票消息</p>
|
|
<p>抱歉,暂无发票消息</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="addVoice" v-if="invoiceList.length !== 2" @click="addInvoiceNew()">新增发票</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="deleteKuang" v-if="showDeleteAlert" @touchmove="preventTouchMove($event)">
|
|
<div class="deleteKuang" v-if="showDeleteAlert" @touchmove="preventTouchMove($event)">
|
|
|
<div class="kuangContent">
|
|
<div class="kuangContent">
|
|
@@ -271,6 +293,7 @@
|
|
|
margin: 1.26rem 0 0.98rem;
|
|
margin: 1.26rem 0 0.98rem;
|
|
|
height: calc(100vh - 1.26rem - 0.98rem);
|
|
height: calc(100vh - 1.26rem - 0.98rem);
|
|
|
overflow-y: scroll;
|
|
overflow-y: scroll;
|
|
|
|
|
+ position: relative;
|
|
|
}
|
|
}
|
|
|
/*overflow-y: scroll;*/
|
|
/*overflow-y: scroll;*/
|
|
|
.mobile-header{
|
|
.mobile-header{
|
|
@@ -410,6 +433,7 @@
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
font-size: 0.26rem;
|
|
font-size: 0.26rem;
|
|
|
@include lineHeight(0.8rem);
|
|
@include lineHeight(0.8rem);
|
|
|
|
|
+ border-top: 1px solid #dcdcdc;
|
|
|
div {
|
|
div {
|
|
|
width: 50%;
|
|
width: 50%;
|
|
|
&:nth-child(1) {
|
|
&:nth-child(1) {
|
|
@@ -501,6 +525,61 @@
|
|
|
.mi-remind-area {
|
|
.mi-remind-area {
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
+ .addVoice {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ width: 95%;
|
|
|
|
|
+ height: .78rem;
|
|
|
|
|
+ line-height: .78rem;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: .32rem;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ background: #3f84f6;
|
|
|
|
|
+ border-radius: .05rem;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0.2rem
|
|
|
|
|
+ }
|
|
|
|
|
+ .mi-list {
|
|
|
|
|
+ li {
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 0.05rem;
|
|
|
|
|
+ border: 1px solid #e3e5e8;
|
|
|
|
|
+ margin: 0 0.2rem 0.3rem;
|
|
|
|
|
+ padding: 0 0.24rem;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ .fixedImg {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 0.82rem;
|
|
|
|
|
+ height: 0.82rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .mi-list-top {
|
|
|
|
|
+ @include lineHeight(0.55rem);
|
|
|
|
|
+ font-size: 0.28rem;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ border-bottom: 1px solid #d3d3d3;
|
|
|
|
|
+ }
|
|
|
|
|
+ .mi-list-bottom {
|
|
|
|
|
+ font-size: 0.28rem;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ padding: 0.2rem 0;
|
|
|
|
|
+ .list {
|
|
|
|
|
+ line-height: 0.55rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ .overhidden {
|
|
|
|
|
+ @include overFlowHidden()
|
|
|
|
|
+ }
|
|
|
|
|
+ .w50 {
|
|
|
|
|
+ width: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
|
|
|