feat(invoice): 添加发票详情功能并优化订单详情页面

- 在 InvoiceInfo 组件中添加发票详情查看功能
- 新增 newCodeModel 组件用于展示发票详情
- 优化 OrderDetailCardProductSummarize 组件中的数据展示逻辑

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

src/views/create-order/components/order-detail-submodule/InvoiceInfo.vue

@@ -27,6 +27,9 @@
               <div class="column-label-cell-tip">支持客户换开或查看发票</div>
             </div>
           </template>
+          <template v-slot:invoice_order_code="{ row }">
+            <span class="column-cell" @click="getInvoiceDetailInfo(row.row)">{{ row.row.invoice_order_code }}</span>
+          </template>
           <template v-slot:code_url="{ row }">
             <span class="column-cell" @click="getInvoiceInfo(row.row)">查看</span>
           </template>
@@ -52,19 +55,25 @@
           <span>开票金额合计：{{selectInvoice.invoice_money / 100}}元</span>
       </div>
     </new-set-order-info>
+    <new-code-model
+      ref="invoiceDetailRef"
+      :codeDetail="selectInvoice"
+    />
   </div>
 </template>
 <script>
 import InfoCard from '../../ui/InfoCard.vue';
 import TableCard from '../../ui/TableCard.vue';
 import newSetOrderInfo from '../newSetOrderInfo.vue';
+import newCodeModel from '@/views/order/components/new-codeModel.vue';
 import { mapState } from 'vuex';
 export default {
   name: 'InvoiceInfo',
   components: {
     InfoCard,
     TableCard,
-    newSetOrderInfo
+    newSetOrderInfo,
+    newCodeModel
   },
   data() {
     return {
@@ -134,6 +143,10 @@ export default {
       });
       this.showInvoiceDialog = true;
     },
+    getInvoiceDetailInfo(item) {
+      this.selectInvoice = item;
+      this.$refs.invoiceDetailRef.codeShow = true;
+    }
   },
 }
 </script>

src/views/create-order/components/order-detail-submodule/OrderDetailCardProductSummarize.vue

@@ -3,7 +3,7 @@
     <div class="order-detail-card-content">
       <div class="order-detail-card-item" v-for="(item, index) in productInfoTotalItems" :key="index">
         <div v-if="item.key === 'pure_amount'">
-          {{ item.label }}：￥{{ formatNumber(orderData[item.key]) || '-' }}
+          {{ item.label }}：{{ orderData[item.key] ? '￥' + formatNumber(orderData[item.key]) : '-' }}
           <span class="red-chong" v-if="setRedPunchDisplay('合同金额')">（红冲过）</span>
         </div>
         <div v-else-if="item.key === 'final_price_total'">
@@ -182,13 +182,13 @@ export default {
       this.orderData = this.orderDetail.orderData || {};
       const totalFinalPrice = productData.reduce((acc, cur) => acc + Number(cur.final_price), 0).toFixed(2);
       const totalOriginalPrice = productData.reduce((acc, cur) => acc + Number(cur.original_price), 0).toFixed(2);
-      const rateTotal = div(totalFinalPrice, totalOriginalPrice) ? (div(totalFinalPrice, totalOriginalPrice) * 100).toFixed(2) + '%' : '无法计算';
-
+      const totalDiscountRate = div(totalFinalPrice, totalOriginalPrice) * 100
+      const rateTotal = totalDiscountRate ? (div(totalFinalPrice, totalOriginalPrice) * 100).toFixed(2) + '%' : '0%'
       this.orderData = {
         ...this.orderData,
         final_price_total: totalFinalPrice,
         original_price_total: Number(totalOriginalPrice)? '￥' + totalOriginalPrice : '无法计算',
-        rate_total: Number(totalOriginalPrice)? rateTotal : '无法计算'
+        rate_total: Number(totalOriginalPrice) ? rateTotal : '无法计算'
       }
     },
 

src/views/order/components/new-codeModel.vue

@@ -0,0 +1,101 @@
+<template>
+  <!-- 发票记录详情 -->
+  <Modal title="发票记录详情" v-model="codeShow" class-name="order-model" :mask-closable="false" :footer-hide="true">
+    <div class="classfity">
+      <span><p>发票编号：</p><i>{{codeDetail.invoice_number ? codeDetail.invoice_number : '--'}}</i></span>
+      <span><p>公司名称：</p><i>{{codeDetail.company_name ? codeDetail.company_name : '--'}}</i></span>
+      <span><p>申请开票日期：</p><i>{{codeDetail.create_time ? returnDate : '--'}}</i></span>
+      <span><p>开票渠道：</p><i>{{codeDetail.source ? '线下开票' : '线上开票'}}</i></span>
+      <span><p>发票状态：</p><i>{{codeDetail.invoice_status ? backInvoiceStatus(codeDetail.invoice_status) : '--'}}</i></span>
+      <span><p>关联订单：</p><i>{{codeDetail.invoice_order_code ? codeDetail.invoice_order_code : '--'}}</i></span>
+      <span><p>发票号码：</p><i>{{codeDetail.invoice_number ? codeDetail.invoice_number : '--'}}</i></span>
+      <span><p>开票金额：</p><i>{{codeDetail.invoice_money ? localed(codeDetail.invoice_money / 100) : '--'}}</i></span>
+      <span><p>关联订单开票金额：</p><i>{{codeDetail.invoice_order_money ? localed(codeDetail.invoice_order_money / 100) : '--'}}</i></span>
+      <span><p>开票日期：</p><i>{{codeDetail.billing_time ? returnBillingTime : '--'}}</i></span>
+      <span><p>发票内容：</p><i>{{codeDetail.invoice_content ? codeDetail.invoice_content : '--'}}</i></span>
+      <span><p>发票类型：</p><i>{{codeDetail.invoice_variety ? codeDetail.invoice_variety : '--'}}</i></span>
+      <span><p>开票主体：</p><i>{{codeDetail.invoicing_entity ? codeDetail.invoicing_entity : '--'}}</i></span>
+      <span><p>发票抬头：</p><i>{{codeDetail.invoice_type ? codeDetail.invoice_type : '--'}}</i></span>
+      <span><p>抬头名称：</p><i>{{codeDetail.company_name ? codeDetail.company_name : '--'}}</i></span>
+      <span><p>纳税人识别号：</p><i>{{codeDetail.taxpayer_identnum ? codeDetail.taxpayer_identnum : '--'}}</i></span>
+      <span><p>单位地址：</p><i>{{codeDetail.company_address? codeDetail.company_address : '--'}}</i></span>
+      <span><p>电话号码：</p><i>{{codeDetail.company_phone? codeDetail.company_phone : '--'}}</i></span>
+      <span><p>开户银行：</p><i>{{codeDetail.bank_name? codeDetail.bank_name : '--'}}</i></span>
+      <span><p>银行账号：</p><i>{{codeDetail.bank_account? codeDetail.bank_account : '--'}}</i></span>
+      <span><p>开票备注：</p><i>{{codeDetail.remark? codeDetail.remark : '--'}}</i></span>
+      <span><p>收件人：</p><i>{{codeDetail.recipient? codeDetail.recipient : '--'}}</i></span>
+      <span><p>收件地址：</p><i>{{codeDetail.delivery_address? codeDetail.delivery_address : '--'}}</i></span>
+      <span><p>邮箱地址：</p><i>{{codeDetail.mail ? codeDetail.mail : '--'}}</i></span>
+      <span><p>联系人电话：</p><i>{{codeDetail.phone ? codeDetail.phone : '--'}}</i></span>
+      <span><p>发票附件：</p>
+        <i>
+          <a :href="codeDetail?codeDetail.url:'*'" target="_blank">{{codeDetail.url?"点击查看":'--'}}</a>
+        </i>
+      </span>
+      <span><p>发票链接：</p><i>{{codeDetail.url ? codeDetail.url : '--'}}</i></span>
+      <span><p>快递公司：</p><i>{{ setKDInfo }}</i></span>
+      <span><p>快递单号：</p><i>{{codeDetail.logistics_code? codeDetail.logistics_code : '--'}}</i></span>
+      <!-- <span><p>备注：</p><i>{{codeDetail.remark ? codeDetail.remark : '--'}}</i></span> -->
+      <span><p>创建人：</p><i>{{codeDetail.operator ? codeDetail.operator : '--'}}</i></span>
+      <span><p>创建时间：</p><i>{{codeDetail.create_time ? codeDetail.create_time : '--'}}</i></span>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import { dateFormatter } from '@/utils/globalFun'
+export default {
+  props: {
+    codeDetail: {}
+  },
+  data () {
+    return {
+      codeShow: false
+    }
+  },
+  computed: {
+    setKDInfo () {
+      return (this.codeDetail.invoice_variety && this.codeDetail.invoice_variety.indexOf('纸质') > -1) ? '顺丰快递' : '--'
+    },
+    returnDate () {
+      return dateFormatter(this.codeDetail.create_time * 1000, 'yyyy-MM-dd hh:mm:ss')
+    },
+    returnBillingTime () {
+      return dateFormatter(this.codeDetail.billing_time * 1000, 'yyyy-MM-dd hh:mm:ss')
+    }
+  },
+  methods: {
+    localed(val) {
+      return val.toLocaleString('zh', { style:'currency', currency:'CNY' })
+    },
+    backInvoiceStatus(val) {
+      if (val == -2) {
+          return '已冲红'
+      } else if (val == -1) {
+          return '开票失败'
+      } else if (val == 0) {
+          return '已申请'
+      } else if (val == 1) {
+          return '已开具'
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.classfity {
+  span {
+    display: flex;
+    line-height: 28px;
+    font-size: 15px;
+    p {
+      width: 136px;
+      text-align: right;
+    }
+    i {
+      width: 500px;
+    }
+  }
+}
+</style>