chore: 新增提示语

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

 <template>
   <div class="h5-pay-list">
+    <p class="h5-pay-list__tips">
+      <i class="el-icon-info"></i> 可开具三个月之内的发票，如已超过三个月，请联系招生办公室。
+    </p>
     <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <van-list
-        v-model="loading"
-        class="pay-list"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="fetchList"
-      >
+      <van-list v-model="loading" class="pay-list" :finished="finished" finished-text="没有更多了" @load="fetchList">
         <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 | statusFilter}}</p>
-            <p class="status">{{item.final_payment_time}}</p>
+            <h5 class="project">{{ item.project_name }}</h5>
+            <p class="status">{{ item | statusFilter }}</p>
+            <p class="status">{{ item.final_payment_time }}</p>
           </div>
           <div class="right">
-            <p><span>￥</span>{{parseFloat(item.amount_received) + parseFloat(item.service_charge) | toFixed}}</p>
+            <p><span>￥</span>{{ (parseFloat(item.amount_received) + parseFloat(item.service_charge)) | toFixed }}</p>
           </div>
           <template v-if="item.project_id == '5005' && item.type == '60'">
-            <van-button v-if="item.real_invoice_status === 1" class="invoice-btn" plain round type="primary" size="mini" color="#C01540" @click.stop="handleInvoice(item)">{{ item.invoice_status == 6 ? '重开发票' : '开具发票' }}</van-button>
-            <van-button v-if="item.invoice_status == 4" class="invoice-btn" plain round type="primary" size="mini" color="#C01540" @click.stop="handleDeleteInvoice(item)">作废发票</van-button>
+            <van-button
+              v-if="item.real_invoice_status === 1"
+              class="invoice-btn"
+              plain
+              round
+              type="primary"
+              size="mini"
+              color="#C01540"
+              @click.stop="handleInvoice(item)"
+              >{{ item.invoice_status == 6 ? '重开发票' : '开具发票' }}</van-button
+            >
+            <van-button
+              v-if="item.invoice_status == 4"
+              class="invoice-btn"
+              plain
+              round
+              type="primary"
+              size="mini"
+              color="#C01540"
+              @click.stop="handleDeleteInvoice(item)"
+              >作废发票</van-button
+            >
           </template>
           <template v-else>
-            <van-button v-if="item.real_invoice_status === 1" class="invoice-btn" plain round type="primary" size="mini" color="#C01540" @click.stop="handleInvoice(item)">开具发票</van-button>
+            <van-button
+              v-if="item.real_invoice_status === 1"
+              class="invoice-btn"
+              plain
+              round
+              type="primary"
+              size="mini"
+              color="#C01540"
+              @click.stop="handleInvoice(item)"
+              >开具发票</van-button
+            >
           </template>
         </div>
-        <template slot="finished">{{list.length > 8 ? '没有更多了': ''}}</template>
+        <template slot="finished">{{ list.length > 8 ? '没有更多了' : '' }}</template>
       </van-list>
     </van-pull-refresh>
     <van-empty v-if="list.length === 0" description="暂无记录" />
@@ -97,10 +124,18 @@ export default {
     },
 
     handleInvoice(val) {
-      const query = { id: val.id, name: val.sales_rep_user_id_name, remark: val.payer_name, project_id: val.project_id, type: val.type }
+      const query = {
+        id: val.id,
+        name: val.sales_rep_user_id_name,
+        remark: val.payer_name,
+        project_id: val.project_id,
+        type: val.type
+      }
       if (val.project_id === '5005' && val.type === '60') {
         if (val.invoices.length) {
-          const item = val.invoices.find(item => parseInt(item.invoice_status) === 4 || parseInt(item.invoice_status) === 6)
+          const item = val.invoices.find(
+            item => parseInt(item.invoice_status) === 4 || parseInt(item.invoice_status) === 6
+          )
           if (item) {
             query.taxpayer_info = JSON.stringify({
               taxpayer_address: item.taxpayer_address || '',
@@ -144,73 +179,78 @@ export default {
         page_size: this.page_size,
         page: this.page
       }
-      getPayList(params).then(res => {
-        if (this.refreshing) {
-          this.list = []
-          this.finished = false
-          this.refreshing = false
-        }
-        if (res.code === 0 && res.data && res.data.list) {
-          this.list = this.list.concat(res.data.list)
-          this.total = res.data.total
-          if (this.page * this.page_size >= this.total) {
-            this.finished = true
+      getPayList(params)
+        .then(res => {
+          if (this.refreshing) {
+            this.list = []
+            this.finished = false
+            this.refreshing = false
+          }
+          if (res.code === 0 && res.data && res.data.list) {
+            this.list = this.list.concat(res.data.list)
+            this.total = res.data.total
+            if (this.page * this.page_size >= this.total) {
+              this.finished = true
+            } else {
+              this.page++
+            }
           } else {
-            this.page++
+            this.list = []
+            this.finished = true
           }
-        } else {
+          this.loading = false
+        })
+        .catch(() => {
           this.list = []
           this.finished = true
-        }
-        this.loading = false
-      }).catch(() => {
-        this.list = []
-        this.finished = true
-        this.loading = false
-      })
+          this.loading = false
+        })
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.pay-item{
-  background:#fff;
-  border-bottom:1px solid #f0f0f0;
-  display:flex;
-  position:relative;
-  padding:0 12px;
-  .left{
-    width:65%;
-    .project{
-      font-size:16px;
-      line-height:32px;
+.h5-pay-list__tips {
+  padding: 10px;
+}
+.pay-item {
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  position: relative;
+  padding: 0 12px;
+  .left {
+    width: 65%;
+    .project {
+      font-size: 16px;
+      line-height: 32px;
       color: #464646;
-      font-weight:400;
+      font-weight: 400;
     }
-    p{
-      font-size:13px;
-      line-height:26px;
-      color:#999;
+    p {
+      font-size: 13px;
+      line-height: 26px;
+      color: #999;
     }
   }
-  .right{
-    width:35%;
-    p{
-      font-size:18px;
-      line-height:36px;
+  .right {
+    width: 35%;
+    p {
+      font-size: 18px;
+      line-height: 36px;
       text-align: right;
-      span{
-        font-size:14px;
-        color:#C01540;
+      span {
+        font-size: 14px;
+        color: #c01540;
       }
     }
   }
-  .invoice-btn{
-    position:absolute;
-    right:12px;
+  .invoice-btn {
+    position: absolute;
+    right: 12px;
     bottom: 5px;
-    padding:0 15px;
+    padding: 0 15px;
   }
 }
 </style>

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

 <template>
   <div class="pc-pay-list">
-    <app-list v-bind="tableOptions" ref="appList" @selection-change="handleSelectionChange">
-      <template #footer>
-        <div class="selection_bar"></div>
-      </template>
-      <!-- 操作 -->
-      <template v-slot:table-operate="{ row }">
-        <template v-if="row.real_invoice_status === 1">
-          <el-button type="text" @click="handleInvoice(row)" size="mini">开具发票</el-button>
-          <el-button type="text" @click="handleInvoiceQR(row)" size="mini">开票二维码</el-button>
+    <p class="pc-pay-list__tips">
+      <i class="el-icon-info"></i> 可开具三个月之内的发票，如已超过三个月，请联系招生办公室。
+    </p>
+    <div class="pc-pay-list__table">
+      <app-list v-bind="tableOptions" ref="appList" @selection-change="handleSelectionChange">
+        <template #footer>
+          <div class="selection_bar"></div>
         </template>
-      </template>
-    </app-list>
-    <el-drawer title="开具发票" :visible.sync="drawerVisible" :close-on-click-modal="false" :destroy-on-close="true" size="600px" top="15px" @close="handleClose">
-      <invoice-form :history="history" :initData="initData" @history="handleHistory" @dialogClose="drawerVisible = false" @submit="fetchCreateInvoice"/>
-      <el-dialog title="选择历史开票信息" :visible.sync="dialogVisible" width="460px" top="15px" append-to-body :destroy-on-close="true" center>
-        <history-invoice-list v-if="dialogVisible" :hasSearch="true" @select="handleSelect"/>
+        <!-- 操作 -->
+        <template v-slot:table-operate="{ row }">
+          <template v-if="row.real_invoice_status === 1">
+            <el-button type="text" @click="handleInvoice(row)" size="mini">开具发票</el-button>
+            <el-button type="text" @click="handleInvoiceQR(row)" size="mini">开票二维码</el-button>
+          </template>
+        </template>
+      </app-list>
+    </div>
+    <el-drawer
+      title="开具发票"
+      :visible.sync="drawerVisible"
+      :close-on-click-modal="false"
+      :destroy-on-close="true"
+      size="600px"
+      top="15px"
+      @close="handleClose"
+    >
+      <invoice-form
+        :history="history"
+        :initData="initData"
+        @history="handleHistory"
+        @dialogClose="drawerVisible = false"
+        @submit="fetchCreateInvoice"
+      />
+      <el-dialog
+        title="选择历史开票信息"
+        :visible.sync="dialogVisible"
+        width="460px"
+        top="15px"
+        append-to-body
+        :destroy-on-close="true"
+        center
+      >
+        <history-invoice-list v-if="dialogVisible" :hasSearch="true" @select="handleSelect" />
       </el-dialog>
     </el-drawer>
     <share-qrcode :visible.sync="shareDialogVisible" :value="shareUrl" />
@@ -114,32 +141,42 @@ export default {
     },
     fetchCreateInvoice(val) {
       val.payment_id = this.payment_id
-      createInvoice(val).then(res => {
-        this.$message.success('开具发票成功')
-        // this.$refs.appList.refetch()
-        this.$refs.appList.refetch()
-        this.drawerVisible = false
-      }).catch(err => {
-        console.log(err)
-        this.$message.error((err.data && err.data.message) || '开具发票失败')
-      })
+      createInvoice(val)
+        .then(res => {
+          this.$message.success('开具发票成功')
+          // this.$refs.appList.refetch()
+          this.$refs.appList.refetch()
+          this.drawerVisible = false
+        })
+        .catch(err => {
+          console.log(err)
+          this.$message.error((err.data && err.data.message) || '开具发票失败')
+        })
     }
   }
 }
 </script>
 
 <style scoped>
-.pc-pay-list{
-  padding:14px;
-  background:#f7f7f7;
-  box-sizing:border-box;
-  height:calc(100vh - 64px);
+.pc-pay-list {
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+  background: #f7f7f7;
+  box-sizing: border-box;
+  height: calc(100vh - 64px);
+}
+.pc-pay-list__tips {
+  padding: 10px 0;
+}
+.pc-pay-list__table {
+  flex: 1;
 }
-.table-list{
-  background:#fff;
-  border-radius:6px;
+.table-list {
+  background: #fff;
+  border-radius: 6px;
 }
-.el-dialog__wrapper ::v-deep .el-dialog__body{
-  padding:10px 0;
+.el-dialog__wrapper ::v-deep .el-dialog__body {
+  padding: 10px 0;
 }
 </style>