|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <div class="mobile-invoice mobile-content mobile-content-long vendor-invoice">
|
|
|
+ <div class="switch-head">
|
|
|
+ <div class="com-switch-head">
|
|
|
+ <span class="active com-switch-item inline-block">买家开票申请</span>
|
|
|
+ <span class="com-switch-item inline-block">开票记录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mi-remind-area">
|
|
|
+ <p class="title">温馨提示</p>
|
|
|
+ <p class="content">
|
|
|
+ <span class="inline-block">1、</span>
|
|
|
+ <span class="inline-block">买家只能对订单状态为<b>“交易成功”</b>，且已不能再发起售后的人民币交易订单进行补开发票。</span>
|
|
|
+ </p>
|
|
|
+ <p class="content">
|
|
|
+ <span class="inline-block">2、</span>
|
|
|
+ <span class="inline-block">发票金额为产品总金额且不含运费、积分、优惠券、促销折扣等金额。</span>
|
|
|
+ </p>
|
|
|
+ <p class="content">
|
|
|
+ <span class="inline-block">3、</span>
|
|
|
+ <span class="inline-block">发票邮寄费用将由卖家承担。</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="search-content mi-search-content">
|
|
|
+ <input type="text" placeholder="订单号/发票抬头/收票人/联系电话">
|
|
|
+ <span><i class="iconfont icon-sousuo"></i></span>
|
|
|
+ </div>
|
|
|
+ <div class="mi-list-content">
|
|
|
+ <div class="mi-lc-filters clearfix">
|
|
|
+ <div class="com-select-wrap fr">类型
|
|
|
+ <ul class="select-list">
|
|
|
+ <li>普票</li>
|
|
|
+ <li>专票</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="mi-list">
|
|
|
+ <li v-for="inv in invoiceList" @click.stop="setActive(inv)" :class="{active: inv.$active}">
|
|
|
+ <div class="line">
|
|
|
+ <span class="inline-block title">
|
|
|
+ <label class="bottom-modal-check mobile-cart-check" :class="{active: inv.$active}">
|
|
|
+ <input type="checkbox">
|
|
|
+ </label>
|
|
|
+ 类型：
|
|
|
+ </span>
|
|
|
+ <span class="inline-block content">
|
|
|
+ <i class="inv" :class="{'spec-inv' : inv.type === 1205}">{{inv.type === 1206 ? '普票' : '专票'}}</i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <span class="inline-block title">
|
|
|
+ 申请时间：
|
|
|
+ </span>
|
|
|
+ <span class="inline-block content">{{inv.createTime | date}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <span class="inline-block title">
|
|
|
+ 订单号：
|
|
|
+ </span>
|
|
|
+ <span class="inline-block content">
|
|
|
+ <template v-for="id in inv.orderidArr">
|
|
|
+ {{id}}
|
|
|
+ <br/>
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <span class="inline-block title">
|
|
|
+ 可开票金额(¥)：
|
|
|
+ </span>
|
|
|
+ <span class="inline-block content">{{inv.price}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <span class="inline-block title">
|
|
|
+ 发票抬头：
|
|
|
+ </span>
|
|
|
+ <span class="inline-block content">{{inv.invoicetitle}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <span class="inline-block title">
|
|
|
+ 收票人：
|
|
|
+ </span>
|
|
|
+ <span class="inline-block content">{{inv.receiverName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <span class="inline-block title">
|
|
|
+ 联系电话：
|
|
|
+ </span>
|
|
|
+ <span class="inline-block content">{{inv.recTel}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="line">
|
|
|
+ <span class="inline-block title">
|
|
|
+ 收票地址：
|
|
|
+ </span>
|
|
|
+ <span class="inline-block content">{{inv.invoiceAddress}}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="mi-fix-result">
|
|
|
+ <label class="bottom-modal-check mobile-cart-check" :class="{active: allChecked}">
|
|
|
+ <input type="checkbox" @change="setActive()">
|
|
|
+ <span>全选</span>
|
|
|
+ </label>
|
|
|
+ <button>确认开票</button>
|
|
|
+ </div>
|
|
|
+ <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
|
|
|
+ <pull-up :searchMore="fetching" :allPage="invoices.data.totalPages" :page="page" @pullUpAction="onPullUp"></pull-up>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { RemindBox, PullUp } from '~components/mobile/common'
|
|
|
+ export default {
|
|
|
+ layout: 'mobile',
|
|
|
+ middleware: 'authenticated',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ remindText: '',
|
|
|
+ timeoutCount: '',
|
|
|
+ invoiceList: [],
|
|
|
+ isChange: false,
|
|
|
+ page: 1,
|
|
|
+ count: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ RemindBox,
|
|
|
+ PullUp
|
|
|
+ },
|
|
|
+ fetch ({store}) {
|
|
|
+ return Promise.all([
|
|
|
+ store.dispatch('invoice/getInvoices', {count: 10, page: 1, role: 'SELLER', sorting: {'createTime': 'DESC'}, status: 101})
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$store.state.invoice.data.invoices.data': {
|
|
|
+ handler: function (val) {
|
|
|
+ if (val && val.content) {
|
|
|
+ if (this.isChange) {
|
|
|
+ this.invoiceList = []
|
|
|
+ this.isChange = false
|
|
|
+ }
|
|
|
+ let arr = this.baseUtils.deepCopy(val.content)
|
|
|
+ arr.forEach(item => {
|
|
|
+ item.orderidArr = item.orderids.split(',')
|
|
|
+ item.$active = false
|
|
|
+ })
|
|
|
+ this.invoiceList = [...this.invoiceList, ...arr]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ invoices () {
|
|
|
+ return this.$store.state.invoice.data.invoices
|
|
|
+ },
|
|
|
+ fetching () {
|
|
|
+ return this.invoices.fetching
|
|
|
+ },
|
|
|
+ listActiveFlag () {
|
|
|
+ let allChecked = true
|
|
|
+ for (let i = 0; i < this.invoiceList.length; i++) {
|
|
|
+ if (!this.invoiceList[i].$active) {
|
|
|
+ allChecked = false
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return allChecked
|
|
|
+ },
|
|
|
+ allChecked () {
|
|
|
+ return this.invoiceList.length && this.listActiveFlag
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setRemindText: function (str) {
|
|
|
+ this.remindText = str
|
|
|
+ this.timeoutCount++
|
|
|
+ },
|
|
|
+ setActive (inv) {
|
|
|
+ if (inv) {
|
|
|
+ inv.$active = !inv.$active
|
|
|
+ } else {
|
|
|
+ // 先存储 否则会重新计算
|
|
|
+ let flag = !this.allChecked
|
|
|
+ this.invoiceList.forEach(item => {
|
|
|
+ item.$active = flag
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reloadList () {
|
|
|
+ this.$store.dispatch('invoice/getInvoices', {count: this.count, page: this.page, role: 'SELLER', sorting: {'createTime': 'DESC'}, status: 101})
|
|
|
+ },
|
|
|
+ onPullUp () {
|
|
|
+ this.page++
|
|
|
+ this.reloadList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @import '~assets/scss/mobileInvoice';
|
|
|
+ .vendor-invoice {
|
|
|
+ margin-bottom: 2.3rem;
|
|
|
+ }
|
|
|
+</style>
|
yangc