gxtyzx-uniapp/src/package/order/multiInvoice.vue

<template>
  <view class="min-height bg-gray-light">
    <uv-tabs :list="tabList" :current="current" :scrollable="false" @click="changeType"></uv-tabs>
    <uv-tabs v-if="siteList.length && current === 0" :list="siteList" :current="currentSite" :scrollable="false"
             @click="changeSite"></uv-tabs>
    <view class="order" v-if="current === 0">
      <template v-if="list.length > 0">
        <block v-for="(item,index) in list" :key="index">
          <view class="card m-20 border pos-r" @click="changeSelect(index)"
                :class="[selectedList.includes(index) ? 'selected': '']">
            <view class="order-title web-cell text-25">
              <view class="web-cell web-cell-content">
                <text class="merchant-name">订单号: {{ item.orderNum }}</text>
              </view>
            </view>
            <view class="order-body web-cell web-cell-align-top">
              <view class="web-cell-content">
                <uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
                  <block v-for="(sub,subIndex) in item.thinkOrderInfos" :key="subIndex">
                    <uv-cell :title="`${item.siteName} - ${sub.fieldName}`" :label="`${sub.dateTime}`"
                             :cellStyle="{padding: '0', paddingBottom: '5px'}" :border="false"/>
                  </block>
                </uv-cell-group>
                <view class="total-price">
                  <view class="text-orange text-30 font-bold">实付：￥{{ item.payPrice }}</view>
                </view>
              </view>
            </view>
          </view>
        </block>
        <uv-gap height="140rpx"/>
        <view class="footer">
          <view class="p-20">
            <uv-button type="primary" shape="circle" :disabled="!selectedList.length" @click="confirm">合并开票
            </uv-button>
          </view>
        </view>
      </template>
      <uv-empty v-else text="暂无可开票订单"/>
    </view>
    <view v-else>
      <template v-if="list.length > 0">
        <block v-for="(item, index) in list" :key="index">
          <view class="card m-20 text-25">
            <view class="flex justify-between items-center">
              <view class="text-main">开票金额: {{ item.price }}元</view>
              <text :class="[item.isOpen === 1 ? 'text-green' : '']">{{
                  item.isOpen === 1 ? '已开票' : '开票中'
                }}
              </text>
            </view>
            <view class="mt-15">税号/身份证号: {{ item.code }}</view>
            <view class="mt-15">名称: {{ item.name }}</view>
            <view class="mt-15">手机号码: {{ item.phone }}</view>
            <view class="py-15 border-top flex justify-center items-center" v-if="item.isOpen && item.url">
              <view>
                <uv-button type="success" shape="circle" @click="copy(item.url)" size="mini">复制PDF链接</uv-button>
              </view>
              <view v-if="item.xmlUrl" class="ml-15">
                <uv-button type="primary" shape="circle" @click="copy(item.xmlUrl)" size="mini">复制XML链接</uv-button>
              </view>
            </view>
            <view class="py-15 border-top flex justify-center items-center" v-if="item.isOpen === 2">
              <view>
                <uv-button type="success" shape="circle" @click="checkRes(item)" size="mini">查询状态</uv-button>
              </view>
            </view>
          </view>
        </block>
        <uv-gap height="140rpx"/>
      </template>
      <uv-empty v-else text="暂无发票"/>
    </view>
  </view>
</template>

<script>
import {listThinkOrder} from "@/api/think/thinkOrder";
import {getThinkInvoiceRes, listThinkInvoice} from "@/api/think/thinkInvoice";

export default {
  name: "multiInvoice",
  data() {
    return {
      current: 0,
      currentSite: 0,
      tabList: [{name: '开票'}, {name: '我的发票'}],
      siteList: [],
      list: [],
      originList: [],
      selectedList: [],
    }
  },
  methods: {
    changeType({index}) {
      this.current = index
      if (index === 0) this.getOrderList()
      else this.getInvoiceList()
    },
    changeSite({index}) {
      this.currentSite = index
      this.selectedList = []
      this.calList()
    },
    async getOrderList() {
      this.list = []
      let list = await listThinkOrder({
        isInvoice: 2,
        orderStatus: 1,
        payStatus: 1,
      })
      list = list.filter(item => {
        return item.payPrice > 0 && item.createTime > 1742400000
      })
      this.originList = JSON.parse(JSON.stringify(list))
      console.log(this.originList)
      this.siteList = []
      if (this.originList.length) {
        this.originList.forEach(item => {
          if (!this.siteList.includes(item.siteName)) this.siteList.push(item.siteName)
        })
        this.siteList = this.siteList.map(name => {
          return {name}
        })
        console.log(this.siteList)
        this.calList()
      }
    },
    calList() {
      this.list = this.originList.filter(item => {
        return item.siteName === this.siteList[this.currentSite].name
      })
      console.log(this.list)
    },
    async getInvoiceList() {
      this.list = await listThinkInvoice({group: true})
    },
    changeSelect(dataIndex) {
      if (this.selectedList.includes(dataIndex)) {
        this.selectedList = this.selectedList.filter(item => item !== dataIndex)
      } else {
        this.selectedList.push(dataIndex)
      }
    },
    confirm() {
      const list = this.list.filter((item, index) => this.selectedList.includes(index))
      const totalPrice = list.reduce((total, item) => total + item.payPrice, 0)
      const idList = list.map(item => item.id)
      uni.showModal({
        title: `合并开票金额:${totalPrice}元,确定要继续吗?`,
        success(o) {
          if (o.confirm) {
            let url = `/package/order/doMultiInvoice?idList=${idList}&price=${totalPrice}`
            uni.navigateTo({url})
          }
        }
      })
    },
    copy(url) {
      uni.setClipboardData({
        data: url,
        success() {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });
    },
    async checkRes(item){
      const res = await getThinkInvoiceRes({id: item.id})
      console.log(res)
      this.getInvoiceList()
    }
  },
  onShow() {
    this.selectedList = []
    this.getOrderList()
  },
}
</script>

<style scoped lang="scss">
.order {
  .order-title {

    padding: 20rpx 0;
    border-bottom: 1px #eee solid;

    .merchant-avatar {
      margin-right: 12rpx;
    }

    .btn-status {
      font-size: 30rpx;
      display: flex;
    }
  }

  .order-body {
    padding: 16px 0;
  }
}

.selected {
  border-color: #3c9cff;

  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    border: 16px solid #3c9cff;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 0 0 10px 0;
  }

  &::after {
    content: '';
    width: 5px;
    height: 10px;
    position: absolute;
    right: 6px;
    bottom: 7px;
    border: 1px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
  }
}

</style>