update: h5端增加缴费详情

src/modules/payment/index.js

@@ -15,6 +15,10 @@ const routes = [
   {
     path: '/h5/payment/invoice',
     component: () => import('./views/h5/Invoice.vue')
+  },
+  {
+    path: '/h5/payment/Details',
+    component: () => import('./views/h5/details.vue')
   }
 ]
 

src/modules/payment/views/h5/List.vue

@@ -8,7 +8,7 @@
         finished-text="没有更多了"
         @load="fetchList"
       >
-        <div class="pay-item" v-for="(item, index) in list" :key="index">
+        <div class="pay-item" v-for="(item, index) in list" :key="index" @click="handleDetials(item)">
           <div class="left">
             <h5 class="project">{{item.project_name}}</h5>
             <p class="status">{{item.invoice_status | statusFilter}}</p>
@@ -58,6 +58,10 @@ export default {
     handleInvoice(val) {
       this.$router.push({ path: '/h5/payment/invoice', query: { id: val.id } })
     },
+    handleDetials(val) {
+      window.localStorage.setItem('invoiceDetails', JSON.stringify(val))
+      this.$router.push({ path: '/h5/payment/details' })
+    },
     initParams() {
       this.list = []
       this.loading = true

src/modules/payment/views/h5/details.vue

+<template>
+  <div>
+    <van-cell-group>
+      <van-cell title="项目" :value="details.project_name" />
+      <van-cell title="应缴金额" :value="`￥${details.bill_total}`" />
+      <van-cell title="实缴金额" :value="`￥${details.amount_received}`" />
+      <van-cell title="缴费时间" :value="details.final_payment_time" />
+      <van-cell title="发票状态" :value="invoiceStatus" />
+      <van-cell title="发票申请时间" :value="details.invoice_application_time" />
+      <van-cell title="备注" :value="details.invoice_remark" />
+    </van-cell-group>
+    <div class="btn-bar" v-if="['2', '6'].includes(details.invoice_status)">
+      <van-button type="info" size="small" block @click="handleInvoice">开具发票</van-button>
+    </div>
+  </div>
+</template>
+<script>
+const statusMap = {
+  1: '不可开具',
+  2: '未开具',
+  3: '开具中',
+  4: '已开具',
+  5: '开票失败',
+  6: '已作废'
+}
+export default {
+  data() {
+    return {
+      details: {}
+    }
+  },
+  computed: {
+    invoiceStatus() {
+      return statusMap[this.details.invoice_status]
+    }
+  },
+  created() {
+    this.details = JSON.parse(window.localStorage.getItem('invoiceDetails'))
+  },
+  methods: {
+    handleInvoice() {
+      this.$router.push({ path: '/h5/payment/invoice', query: { id: this.details.id } })
+    }
+  }
+}
+</script>
+<style scoped>
+.btn-bar{
+  text-align:center;
+  padding:20px 30px;
+}
+</style>