增加pdf预览和对接发票

common/apiurl.js

@@ -163,25 +163,29 @@ export const apiurl = {
   },
   // 发票模块
   invoiceModule: {
+    // 获取符合发票订单
+    getInvoiceOrderListUrl: '/client/orderInvo/order/list',
     // 获取发票列表
-    getInvoiceListUrl: '/admin/invoiceInfo',
+    getInvoiceListUrl: '/client/orderInvo/list',
     // 新增发票
-    addInvoiceUrl: '/admin/invoiceInfo/add',
+    addInvoiceUrl: '/client/orderInvo',
     // 修改发票
     updateInvoiceUrl: '/admin/invoiceInfo/update',
     // 删除发票
     deleteInvoiceUrl: '/admin/invoiceInfo/delete',
     // 获取发票详情
-    getInvoiceDetailsUrl: '/admin/invoiceInfo/detail',
+    getInvoiceDetailsUrl: '/client/orderInvo/',
     // 获取发票开头列表
-    getInvoiceHeadListUrl: '/admin/invoiceInfo/invoiceHeadList',
+    getInvoiceHeadListUrl: '/client/orderInvoHead/list',
+    // 获取发票开头下拉
+    getInvoiceHeadSelectUrl: '/client/orderInvoHead/select',
     // 获取发票开头详情
-    getInvoiceHeadDetailsUrl: '/admin/invoiceInfo/invoiceHeadDetail',
+    getInvoiceHeadDetailsUrl: '/client/orderInvoHead/',
     // 新增发票开头
-    addInvoiceHeaderUrl: '',
+    addInvoiceHeaderUrl: '/client/orderInvoHead',
     // 修改发票开头
-    updateInvoiceHeaderUrl: '',
+    updateInvoiceHeaderUrl: '/client/orderInvoHead',
     // 删除发票开头
-    deleteInvoiceHeaderUrl: '',
+    deleteInvoiceHeaderUrl: '/client/orderInvoHead/',
   }
 };

common/http.api.js

@@ -137,8 +137,10 @@ const install = (Vue, vm) => {
   };
   // 发票模块api
   let invoiceModuleApi = {
+    // 获取符合发票订单
+    getInvoiceOrderListApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceOrderListUrl, params),
     // 获取发票列表
-    getInvoiceListApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceDetailsUrl, params),
+    getInvoiceListApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceListUrl, params),
     // 新增发票
     addInvoiceApi: (params = {}) => vm.$u.post(apiurl.invoiceModule.addInvoiceUrl, params),
     // 修改发票
@@ -146,17 +148,19 @@ const install = (Vue, vm) => {
     // 删除发票
     deleteInvoiceApi: (params = {}) => vm.$u.delete(apiurl.invoiceModule.deleteInvoiceUrl, params),
     // 获取发票详情
-    getInvoiceDetailsApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceDetailsUrl, params),
+    getInvoiceDetailsApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceDetailsUrl + params.id),
     // 获取发票开头列表
     getInvoiceHeadListApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceHeadListUrl, params),
+    // 获取发票开头下拉
+    getInvoiceHeadSelectApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceHeadSelectUrl, params),
     // 获取发票开头详情
-    getInvoiceHeadDetailsApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceHeadDetailsUrl, params),
+    getInvoiceHeadDetailsApi: (params = {}) => vm.$u.get(apiurl.invoiceModule.getInvoiceHeadDetailsUrl + params.id),
     // 新增发票开头
     addInvoiceHeaderApi: (params = {}) => vm.$u.post(apiurl.invoiceModule.addInvoiceHeaderUrl, params),
     // 修改发票开头
-    updateInvoiceHeaderApi: (params = {}) => vm.$u.post(apiurl.invoiceModule.updateInvoiceHeaderUrl, params),
+    updateInvoiceHeaderApi: (params = {}) => vm.$u.put(apiurl.invoiceModule.updateInvoiceHeaderUrl, params),
     // 删除发票开头
-    deleteInvoiceHeaderApi: (params = {}) => vm.$u.delete(apiurl.invoiceModule.deleteInvoiceHeaderUrl, params)
+    deleteInvoiceHeaderApi: (params = {}) => vm.$u.delete(apiurl.invoiceModule.deleteInvoiceHeaderUrl + params.id)
   };
   // 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
   vm.$u.api = {

pages.json

@@ -374,6 +374,13 @@
         "enablePullDownRefresh": false,
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/previewPdf/previewPdf",
+      "style": {
+        "navigationBarTitleText": "预览",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {

pages/invoiceModule/addInvoice/addInvoice.scss

@@ -1,6 +1,8 @@
+page {
+  background-color: #F5F9FC;
+}
+
 .invoice {
-  background-color: #f9f9f9;
-  height: calc(100vh - 44px);
   padding: 30rpx;
 
   &-form {
@@ -8,6 +10,10 @@
     padding: 0 30rpx;
   }
 
+  .margin-top {
+    margin-top: 20rpx;
+  }
+
   &-tips {
     margin-top: 30rpx;
   }

pages/invoiceModule/addInvoice/addInvoice.vue

@@ -2,29 +2,47 @@
 <template>
   <view class="invoice">
     <view class="invoice-form">
-      <u-form :model="form" ref="uForm" label-width="150">
-        <u-form-item label="抬头类型">
-          <u-radio-group v-model="form.type">
-            <u-radio name="company">企业</u-radio>
-            <u-radio name="personal">个人/机关事业单位</u-radio>
+      <u-form :model="form" :rules="rules" ref="uForm" label-width="150" label-align="right">
+        <u-form-item label="抬头：">
+          <u-radio-group v-model="form.invoType" prop="invoType" @change="invoTypeChange">
+            <u-radio :name="1">企业</u-radio>
+            <u-radio :name="2">个人</u-radio>
           </u-radio-group>
         </u-form-item>
-        <u-form-item label="公司名称">
-          <u-input v-model="form.companyName" placeholder="请输入公司名称" />
+        <u-form-item label="抬头名称：" prop="invoName">
+          <u-input v-model="form.invoName" placeholder="请输入抬头名称" border />
           <u-icon slot="right" name="list-dot" size="40" color="#606266" @click="moreCompany" />
         </u-form-item>
-        <u-form-item label="公司税号">
-          <u-input v-model="form.dutyNum" placeholder="" disabled />
+        <u-form-item label="税号：" prop="invoCode" v-if="form.invoType === 1">
+          <u-input v-model="form.invoCode" placeholder="请输入税号" border />
         </u-form-item>
-        <u-form-item label="备注">
-          <u-input v-model="form.remark" placeholder="请输入备注" />
+        <u-form-item label="发票金额："> ￥{{ form.amount }} </u-form-item>
+      </u-form>
+    </view>
+    <view class="invoice-form margin-top">
+      <u-form :model="form" ref="uForm1" label-width="150" label-align="right">
+        <u-form-item label="开户银行：" prop="openBank">
+          <u-input v-model="form.openBank" placeholder="选填" border />
+        </u-form-item>
+        <u-form-item label="银行账号：" prop="numBank">
+          <u-input v-model="form.numBank" placeholder="选填" border />
+        </u-form-item>
+        <u-form-item label="企业地址：" prop="mapCom">
+          <u-input v-model="form.mapCom" placeholder="选填" border />
+        </u-form-item>
+        <u-form-item label="企业电话：" prop="phoneCom">
+          <u-input v-model="form.phoneCom" placeholder="选填" border />
+        </u-form-item>
+        <u-form-item label="电子邮箱：" prop="invoMail">
+          <u-input v-model="form.invoMail" placeholder="选填" border />
+        </u-form-item>
+        <u-form-item label="手机号码：" prop="invoPhone">
+          <u-input v-model="form.invoPhone" placeholder="选填" border />
         </u-form-item>
-        <u-form-item label="发票金额"> ￥{{ form.price }}元 </u-form-item>
       </u-form>
     </view>
-    <view class="invoice-tips"> 注：本公司目前只支持开具增值税普通发票 </view>
     <view class="invoice-submit">
-      <u-button type="primary" @click="submitForm">提交</u-button>
+      <u-button type="primary" :loading="loading" @click="submitForm">提交</u-button>
     </view>
     <!-- 公司弹框 -->
     <u-popup v-model="companyPop.show" mode="bottom" :closeable="true" height="50vh">
@@ -35,10 +53,10 @@
               class="popup-list-item"
               v-for="(item, index) in companyPop.list"
               :key="index"
-              :name="item.name"
+              :name="item.invoName"
               @change="companyRadioClick(item)"
             >
-              {{ item.name }}
+              {{ item.invoName }}
             </u-radio>
           </u-radio-group>
         </view>
@@ -50,6 +68,7 @@
         </view>
       </view>
     </u-popup>
+    <u-toast ref="uToast" />
   </view>
 </template>
 
@@ -58,18 +77,48 @@ export default {
   data() {
     return {
       form: {
-        type: 'company',
-        companyName: '',
-        dutyNum: '',
-        remark: '',
-        price: 100
+        invoName: '',
+        invoCode: '',
+        invoHeadId: '',
+        invoMail: '',
+        invoPhone: '',
+        invoType: 1,
+        phoneCom: '',
+        mapCom: '',
+        openBank: '',
+        numBank: '',
+        amount: '',
+        orderIds: []
+      },
+      rules: {
+        invoType: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
+        invoName: [{ required: true, message: '请输入抬头名称', trigger: 'blur' }],
+        invoCode: [{ required: true, message: '请输入税号', trigger: 'blur' }]
       },
       companyPop: {
         show: false,
         list: []
+      },
+      loading: false,
+      queryParams: {
+        invoHeadType: 1
       }
     };
   },
+  onLoad(options) {
+    this.getInvoiceHeaderSelect();
+    uni.getStorage({
+      key: 'availableOrderKey',
+      success: (res) => {
+        const { total, ids } = JSON.parse(res.data);
+        this.form.amount = total;
+        this.form.orderIds = ids;
+      }
+    });
+  },
+  onReady() {
+    this.$refs.uForm.setRules(this.rules);
+  },
   methods: {
     /**
      * @description: 选择企业
@@ -78,21 +127,80 @@ export default {
     moreCompany() {
       this.companyPop.show = true;
     },
+    /**
+     * @description: 获取发票抬头下拉
+     * @return {*}
+     */
+    async getInvoiceHeaderSelect() {
+      const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceHeadSelectApi({ ...this.queryParams });
+      if (code === 200) {
+        this.companyPop.list = data;
+        if (data[0].invoStatus === 1) {
+          this.form.invoName = data[0].invoName;
+          this.form.invoCode = data[0].invoCode;
+          this.form.invoHeadId = data[0].id;
+        }
+      }
+    },
+    /**
+     * @description: 选择抬头
+     * @param {*} item
+     * @return {*}
+     */
     companyRadioClick(item) {
       this.companyPop.show = false;
-      this.form.companyName = item.name;
-      this.form.dutyNum = item.no;
+      this.form.invoName = item.invoName;
+      this.form.invoCode = item.invoCode;
+      this.form.invoHeadId = item.id;
     },
     addInvoiceHeader() {
       this.companyPop.show = false;
       this.$u.route({
         url: '/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList'
-      })
+      });
+    },
+    /** 
+     * @description: 抬头类型切换
+     * @param {*} val
+     * @return {*}
+     */
+    invoTypeChange(val) {
+      this.queryParams.invoHeadType = val;
+      this.getInvoiceHeaderSelect();
     },
     submitForm() {
-      this.$u.route({
-        url: '/pages/invoiceModule/invoiceSuccess/invoiceSuccess'
-      })
+      this.$refs.uForm.validate(async (valid) => {
+        if (valid) {
+          try {
+            this.loading = true;
+            const { invoHeadId, invoName, invoCode, invoMail, invoPhone, invoType, phoneCom, mapCom, openBank, numBank, orderIds } = this.form;
+            const { code } = await this.$u.api.invoiceModuleApi.addInvoiceApi({
+              invoHeadId,
+              invoName,
+              invoCode,
+              invoMail,
+              invoPhone,
+              invoType,
+              phoneCom,
+              mapCom,
+              openBank,
+              numBank,
+              orderIds
+            });
+            if (code === 200) {
+              this.loading = false;
+              this.$refs.uToast.show({
+                title: '添加成功!',
+                type: 'success',
+                duration: 2000,
+                url: '/pages/invoiceModule/invoiceSuccess/invoiceSuccess'
+              });
+            }
+          } catch (error) {
+            this.loading = false;
+          }
+        }
+      });
     }
   }
 };

pages/invoiceModule/addInvoiceHeader/addInvoiceHeader.scss

@@ -1,15 +1,18 @@
+page {
+  background-color: #F5F9FC;
+}
 .invoice-header {
-  height: calc(100vh - 44px);
-  background-color: #f9f9f9;
   padding: 30rpx;
 
   &-form {
     padding: 0 30rpx 30rpx;
     background-color: #fff;
+    border-radius: 16px;
   }
 
   &-default {
     background-color: #fff;
+    border-radius: 16px;
     margin-top: 20rpx;
     padding: 0 30rpx 10rpx;
 

pages/invoiceModule/addInvoiceHeader/addInvoiceHeader.vue

@@ -1,28 +1,34 @@
 <!-- 新增发票抬头 -->
 <template>
-  <view class="invoice-header">
+  <view class="invoice-header u-skeleton">
     <view class="invoice-header-form">
-      <u-form :model="form" ref="uForm" label-width="150">
-        <u-form-item label="抬 头：" prop="type">
-          <u-radio-group v-model="form.type">
+      <u-form :model="form" ref="uForm" label-width="220" label-align="right">
+        <u-form-item label="抬 头：" prop="invoHeadType" class="u-skeleton-fillet">
+          <u-radio-group v-model="form.invoHeadType" :disabled="!!form.id">
             <u-radio :name="1">企业</u-radio>
             <u-radio :name="2">个人</u-radio>
           </u-radio-group>
         </u-form-item>
-        <u-form-item label="发票抬头：" prop="name">
-          <u-input v-model="form.name" placeholder="请输入发票抬头" />
+        <u-form-item label="发票抬头：" prop="invoName" class="u-skeleton-fillet">
+          <u-input v-model="form.invoName" placeholder="请输入发票抬头" />
         </u-form-item>
-        <u-form-item label="税 号：" prop="dutyNum" v-if="form.type === 1">
-          <u-input v-model="form.dutyNum" placeholder="请输入税号" />
+        <u-form-item label="税 号：" prop="invoCode" class="u-skeleton-fillet" v-if="form.invoHeadType === 1">
+          <u-input v-model="form.invoCode" placeholder="请输入税号" />
         </u-form-item>
       </u-form>
     </view>
     <view class="invoice-header-default">
-      <u-form :model="form" ref="uForm1" label-width="150">
-        <u-form-item label="默认抬头：">
+      <u-form :model="form" ref="uForm1" label-width="220" label-align="right">
+        <u-form-item label="电子邮箱(选填)：" prop="invoMail" class="u-skeleton-fillet">
+          <u-input v-model="form.invoMail" placeholder="请输入电子邮箱" />
+        </u-form-item>
+        <u-form-item label="手机号码(选填)：" prop="invoPhone" class="u-skeleton-fillet">
+          <u-input v-model="form.invoPhone" placeholder="请输入手机号码" />
+        </u-form-item>
+        <u-form-item label="默认抬头：" prop="invoStatus" class="u-skeleton-fillet">
           <view class="invoice-header-default-item">
-            <text class="tips">每次开票都会默认填写该抬头信息系</text>
-            <u-switch v-model="form.checked" size="40" />
+            <text class="tips">每次开票默认抬头信息</text>
+            <u-switch v-model="form.invoStatus" size="40" />
           </view>
         </u-form-item>
       </u-form>
@@ -30,6 +36,8 @@
     <view class="invoice-header-bottom">
       <u-button type="primary" @click="submitForm" :loading="loading">保存</u-button>
     </view>
+    <!--引用组件-->
+    <u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF"></u-skeleton>
     <u-toast ref="uToast" />
   </view>
 </template>
@@ -39,16 +47,20 @@ export default {
   data() {
     return {
       form: {
-        type: 1,
-        name: '',
-        dutyNum: '',
-        checked: false
+        invoHeadType: 1,
+        invoName: '',
+        invoCode: '',
+        invoPhone: '',
+        invoMail: '',
+        invoStatus: false,
+        id: undefined
       },
       rules: {
-        name: [{ required: true, message: '请输入发票抬头', trigger: ['blur', 'change'] }],
-        dutyNum: [{ required: true, message: '请输入税号', trigger: ['blur', 'change'] }]
+        invoName: [{ required: true, message: '请输入发票抬头', trigger: ['blur', 'change'] }],
+        invoCode: [{ required: true, message: '请输入税号', trigger: ['blur', 'change'] }]
       },
-      loading: false
+      loading: false,
+      skeletonLoading: false
     };
   },
   onLoad(options) {
@@ -57,9 +69,9 @@ export default {
       uni.setNavigationBarTitle({
         title: '编辑抬头'
       });
+      this.getInvoiceHeaderDetails(id);
     }
   },
-  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
   onReady() {
     this.$refs.uForm.setRules(this.rules);
   },
@@ -70,8 +82,21 @@ export default {
      * @return {*}
      */
     async getInvoiceHeaderDetails(id) {
-      const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceHeadDetailsApi({ id });
-      if (code === 200) {
+      try {
+        this.skeletonLoading = true;
+        const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceHeadDetailsApi({ id });
+        if (code === 200) {
+          this.form.id = data.id;
+          this.form.invoHeadType = data.invoHeadType;
+          this.form.invoName = data.invoName;
+          this.form.invoCode = data.invoCode;
+          this.form.invoPhone = data.invoPhone;
+          this.form.invoMail = data.invoMail;
+          this.form.invoStatus = data.invoStatus === 1 ? true : false;
+        }
+      } catch (error) {
+      } finally {
+        this.skeletonLoading = false;
       }
     },
     /**
@@ -82,9 +107,14 @@ export default {
       this.$refs.uForm.validate(async (valid) => {
         if (valid) {
           this.loading = true;
-          if (this.form.id) {
+          const form = { ...this.form };
+          form.invoStatus = form.invoStatus ? 1 : 0;
+          if (form.invoHeadType === 2) {
+            form.invoCode = null;
+          }
+          if (form.id) {
             try {
-              const { code } = await this.$u.api.invoiceModuleApi.updateInvoiceHeaderApi({ ...this.form });
+              const { code } = await this.$u.api.invoiceModuleApi.updateInvoiceHeaderApi({ ...form });
               if (code === 200) {
                 this.$refs.uToast.show({
                   title: '修改成功!',
@@ -99,7 +129,7 @@ export default {
             }
           } else {
             try {
-              const { code } = await this.$u.api.invoiceModuleApi.addInvoiceHeaderApi({ ...this.form });
+              const { code } = await this.$u.api.invoiceModuleApi.addInvoiceHeaderApi({ ...form });
               if (code === 200) {
                 this.$refs.uToast.show({
                   title: '保存成功!',

pages/invoiceModule/availableOrder/availableOrder.scss

@@ -1,6 +1,7 @@
+page {
+  background-color: #F5F9FC;
+}
 .order-box {
-  background-color: #f9f9f9;
-  height: calc(100vh - 44px);
 
   &-list {
     padding: 30rpx;
@@ -13,6 +14,8 @@
       padding: 30rpx;
       margin-bottom: 20rpx;
       border-radius: 10rpx;
+      font-size: 30rpx;
+      color: #333;
 
       .left {
         display: flex;
@@ -21,6 +24,10 @@
         &-radio {
           margin-right: 10rpx;
         }
+
+        &-content {
+          line-height: 50rpx;
+        }
       }
     }
   }

pages/invoiceModule/availableOrder/availableOrder.vue

@@ -8,17 +8,17 @@
             <view class="left-radio small-radio">
               <radio value="true" :checked="currentIds.includes(item.id)" />
             </view>
-            <view class="right-content">
-              <view class="right-content-item">停车订单：{{ item.orderName }}</view>
-              <view class="right-content-item">商户名称：{{ item.shopName }}</view>
-              <view class="right-content-item">订单时间：{{ item.orderTime }}</view>
+            <view class="left-content">
+              <view class="left-content-item">停车订单：{{ item.orderName }}</view>
+              <view class="left-content-item">商户名称：{{ item.shopName }}</view>
+              <view class="left-content-item">订单时间：{{ item.orderTime }}</view>
             </view>
           </view>
           <view class="right"> ￥{{ item.price }} 元 </view>
         </view>
       </view>
       <view class="order-box-bottom" slot="bottom">
-        <view class="order-box-bottom-radio small-radio"> <radio value="true" :checked="checkedAll" @click="checkedChange" />全选 </view>
+        <view class="order-box-bottom-radio small-radio"> <radio value="true" :checked="checkedAll" @click="checkedChange" />本页全选 </view>
         <view class="order-box-bottom-next">
           <u-button type="primary" size="medium" :disabled="!currentIds.length" @click="nextStep">下一步</u-button>
         </view>
@@ -37,7 +37,13 @@ export default {
         { id: 2, orderName: '停车场订单', shopName: '商户名称', orderTime: '2023-06-12 15:00:00', price: 3.0 }
       ],
       currentIds: [],
-      checkedAll: false
+      currentList: [],
+      checkedAll: false,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        invoType: 1
+      }
     };
   },
   watch: {
@@ -45,12 +51,33 @@ export default {
       this.checkedAll = val.length === this.orderList.length;
     }
   },
+  onLoad(options) {
+    const { orderType } = options;
+    if (orderType) {
+      this.queryParams.invoType = orderType;
+    }
+  },
   methods: {
-    queryList() {
-      this.$refs.paging.complete([
-        { id: 1, orderName: '停车场订单', shopName: '商户名称', orderTime: '2023-06-12 15:00:00', price: 3.0 },
-        { id: 2, orderName: '停车场订单', shopName: '商户名称', orderTime: '2023-06-12 15:00:00', price: 3.0 }
-      ]);
+    /**
+     * @description: 分页触发
+     * @param {*} pageNo
+     * @param {*} pageSize
+     * @return {*}
+     */
+    queryList(pageNo, pageSize) {
+      this.queryParams.pageNum = pageNo;
+      this.queryParams.pageSize = pageSize;
+      this.getList();
+    },
+    /**
+     * @description: 获取列表
+     * @return {*}
+     */
+    async getList() {
+      const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceOrderListApi({ ...this.queryParams });
+      if (code === 200) {
+        this.$refs.paging.complete(data?.pageInfo?.rows || []);
+      }
     },
     /**
      * @description: 单项条目点击
@@ -61,8 +88,10 @@ export default {
       if (this.currentIds.includes(item.id)) {
         const index = this.currentIds.indexOf(item.id);
         this.currentIds.splice(index, 1);
+        this.currentList.splice(index, 1);
       } else {
         this.currentIds.push(item.id);
+        this.currentList.push(item);
       }
     },
     /**
@@ -72,6 +101,11 @@ export default {
     checkedChange(item) {
       this.checkedAll = !this.checkedAll;
       this.currentIds = this.checkedAll ? this.orderList.map((item) => item.id) : [];
+      this.currentList = this.checkedAll
+        ? this.orderList.map((item) => {
+            return { ...item };
+          })
+        : [];
     },
     /**
      * @description: 下一步
@@ -79,10 +113,19 @@ export default {
      */
     nextStep() {
       if (this.currentIds.length) {
-        this.$u.route({
-          url: '/pages/invoiceModule/addInvoice/addInvoice',
-          params: {
-            orderIds: this.currentIds.join(',')
+        const storageObj = {
+          total: this.currentList.reduce((prev, curr) => {
+            return prev + curr.amount;
+          }, 0),
+          ids: this.currentIds
+        };
+        uni.setStorage({
+          key: 'availableOrderKey',
+          data: JSON.stringify(storageObj),
+          success: () =>  {
+            this.$u.route({
+              url: '/pages/invoiceModule/addInvoice/addInvoice'
+            });
           }
         });
       } else {

pages/invoiceModule/invoiceDetails/invoiceDetails.scss

@@ -1,3 +1,133 @@
+page {
+  background-color: #f5f9fc;
+}
 .details {
-  
-}
+  padding: 20rpx 30rpx;
+  font-family: PingFang SC;
+
+  &-invoice {
+    margin-bottom: 60rpx;
+
+    &-title {
+      color: #333333;
+      font-size: 34rpx;
+      font-weight: bold;
+      margin-bottom: 20rpx;
+    }
+
+    &-list {
+      padding: 40rpx;
+      border-radius: 16rpx;
+      background-color: #fff;
+
+      &-item {
+        display: flex;
+        font-size: 32rpx;
+        margin-bottom: 20rpx;
+
+        &-label {
+          color: #999999;
+          width: 160rpx;
+          text-align: right;
+        }
+
+        &-content {
+          color: #333;
+        }
+        .primary {
+          color: #2e73ff;
+        }
+
+        .error {
+          color: #999999;
+        }
+
+        .info {
+          color: #333333;
+        }
+        .view-text {
+          color: #2e73ff;
+        }
+      }
+
+      .bottom-top {
+        border-top: solid 1px #eeeeee;
+      }
+
+      .view-btn {
+        justify-content: center;
+        color: #2e73ff;
+        padding: 20rpx 0 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &-order {
+    &-title {
+      color: #333333;
+      font-size: 34rpx;
+      font-weight: bold;
+      margin-bottom: 20rpx;
+    }
+
+    &-list {
+      &-item {
+        background-color: #fff;
+        border-radius: 16rpx;
+        padding: 24rpx 50rpx;
+        margin-bottom: 20rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &-left {
+          font-size: 30rpx;
+          color: #333333;
+          line-height: 50rpx;
+          .money {
+            font-weight: bold;
+            font-size: 34rpx;
+          }
+          .time {
+            color: #999999;
+            font-size: 28rpx;
+          }
+        }
+
+        &-right {
+          font-size: 30rpx;
+          color: #333333;
+        }
+      }
+    }
+  }
+
+  &-pop {
+    padding: 50rpx;
+
+    &-title {
+      text-align: center;
+      margin-bottom: 30rpx;
+      font-size: 34rpx;
+      font-weight: bold;
+    }
+
+    &-list {
+
+      &-item {
+        display: flex;
+        line-height: 50rpx;
+        font-size: 32rpx;
+
+        &-label {
+          color: #999999;
+        }
+
+        &-content {
+          color: #333333;
+        }
+      }
+    }
+  }
+}

pages/invoiceModule/invoiceDetails/invoiceDetails.vue

@@ -1,7 +1,85 @@
 <!-- 发票详情 -->
 <template>
   <view class="details">
-    
+    <!-- 发票信息 -->
+    <view class="details-invoice">
+      <view class="details-invoice-title">发票信息</view>
+      <view class="details-invoice-list">
+        <view class="details-invoice-list-item">
+          <view class="details-invoice-list-item-label">抬头类型：</view>
+          <view class="details-invoice-list-item-content">{{ formatInvoiceType(invoiceInfo.invoType) }}</view>
+        </view>
+        <view class="details-invoice-list-item">
+          <view class="details-invoice-list-item-label">抬头名称：</view>
+          <view class="details-invoice-list-item-content">{{ invoiceInfo.invoName }}</view>
+        </view>
+        <view class="details-invoice-list-item" v-if="invoiceInfo.invoType === 1">
+          <view class="details-invoice-list-item-label">企业税号：</view>
+          <view class="details-invoice-list-item-content">{{ invoiceInfo.invoCode }}</view>
+        </view>
+        <view class="details-invoice-list-item">
+          <view class="details-invoice-list-item-label">发票状态：</view>
+          <view class="details-invoice-list-item-content" :class="formatStatusType(invoiceInfo.status)">{{ formatStatus(invoiceInfo.status) }}</view>
+        </view>
+        <view class="details-invoice-list-item">
+          <view class="details-invoice-list-item-label">申请时间：</view>
+          <view class="details-invoice-list-item-content">{{ invoiceInfo.askTime }}</view>
+        </view>
+        <view class="details-invoice-list-item">
+          <view class="details-invoice-list-item-label">更多内容：</view>
+          <view class="details-invoice-list-item-content view-text" @click="viewMore">查看</view>
+        </view>
+        <view class="details-invoice-list-item bottom-top view-btn">
+          <text @click="viewPdf">查看电子发票</text>
+        </view>
+      </view>
+    </view>
+    <!-- 订单信息 -->
+    <view class="details-order" v-if="invoiceInfo.orderInvoExes && invoiceInfo.orderInvoExes.length">
+      <view class="details-order-title">订单信息：共{{ invoiceInfo.orderInvoExes.length }}个订单</view>
+      <view class="details-order-list">
+        <view class="details-order-list-item" v-for="(item, index) in invoiceInfo.orderInvoExes" :key="index">
+          <view class="details-order-list-item-left">
+            <view class="money">￥{{ item.amount }}</view>
+            <view>{{ item.name || '-' }}</view>
+            <view class="time">{{ item.payTime || '-' }}</view>
+          </view>
+          <view class="details-order-list-item-right">{{ item.vehicleNo || '-' }}</view>
+        </view>
+      </view>
+    </view>
+    <!-- 查看更多弹框 -->
+    <u-popup v-model="viewMorePop.show" mode="center" width="600" border-radius="14" :closeable="true">
+      <view class="details-pop">
+        <view class="details-pop-title">更多内容</view>
+        <view class="details-pop-list">
+          <view class="details-pop-list-item">
+            <view class="details-pop-list-item-label">开户银行：</view>
+            <view class="details-pop-list-item-content">{{ invoiceInfo.openBank }}</view>
+          </view>
+          <view class="details-pop-list-item">
+            <view class="details-pop-list-item-label">银行账号：</view>
+            <view class="details-pop-list-item-content">{{ invoiceInfo.numBank }}</view>
+          </view>
+          <view class="details-pop-list-item">
+            <view class="details-pop-list-item-label">抬头地址：</view>
+            <view class="details-pop-list-item-content">{{ invoiceInfo.mapCom }}</view>
+          </view>
+          <view class="details-pop-list-item">
+            <view class="details-pop-list-item-label">企业电话：</view>
+            <view class="details-pop-list-item-content">{{ invoiceInfo.phoneCom }}</view>
+          </view>
+          <view class="details-pop-list-item">
+            <view class="details-pop-list-item-label">电子邮箱：</view>
+            <view class="details-pop-list-item-content">{{ invoiceInfo.invoMail }}</view>
+          </view>
+          <view class="details-pop-list-item">
+            <view class="details-pop-list-item-label">手机号码：</view>
+            <view class="details-pop-list-item-content">{{ invoiceInfo.invoPhone }}</view>
+          </view>
+        </view>
+      </view>
+    </u-popup>
   </view>
 </template>
 
@@ -9,16 +87,41 @@
 export default {
   data() {
     return {
-      invoiceInfo: null
+      invoiceInfo: {},
+      chooseRecords: {
+        show: false,
+        list: []
+      },
+      invoiceStatusList: [],
+      viewMorePop: {
+        show: false
+      }
     };
   },
   onLoad(options) {
     const { id, orderType } = options;
     if (id) {
-      // this.getInvoiceDetails(id);
+      this.getDict();
+      this.getInvoiceDetails(id);
     }
   },
   methods: {
+    /**
+     * @description: 获取字典
+     * @return {*}
+     */
+    async getDict() {
+      // 发票类型
+      const typeRes = await this.$u.api.getDictApi({ type: 'invoice_type' });
+      if (typeRes.code === 200) {
+        this.chooseRecords.list = typeRes.data;
+      }
+      // 开票状态
+      const statusRes = await this.$u.api.getDictApi({ type: 'invoice_status' });
+      if (statusRes.code === 200) {
+        this.invoiceStatusList = statusRes.data;
+      }
+    },
     /**
      * @description: 获取发票详情
      * @param {*} id
@@ -39,6 +142,48 @@ export default {
       uni.previewImage({
         urls: [url]
       });
+    },
+    viewPdf() {
+      this.$u.route({
+        url: '/pages/previewPdf/previewPdf',
+        params: {
+          fileUrl: this.invoiceInfo.fileUrl
+        }
+      });
+    },
+    viewMore() {
+      this.viewMorePop.show = true;
+    },
+    /**
+     * @description: 初始化状态
+     * @param {*} val
+     * @return {*}
+     */
+    formatStatus(val) {
+      if (!val && val !== 0) return;
+      if (this.invoiceStatusList.length) return this.invoiceStatusList.find((v) => Number(v.dictValue) === Number(val)).dictLabel;
+    },
+    /**
+     * @description: 初始化状态按钮样式
+     * @param {*} val
+     * @return {*}
+     */
+    formatStatusType(val) {
+      const statusTypeObj = {
+        0: 'info',
+        1: 'primary',
+        2: 'error'
+      };
+      return statusTypeObj[val];
+    },
+    /**
+     * @description: 初始化发票类型
+     * @param {*} val
+     * @return {*}
+     */
+    formatInvoiceType(val) {
+      if (!val) return;
+      if (this.chooseRecords.list.length) return this.chooseRecords.list.find((item) => Number(item.dictValue) === Number(val)).dictLabel;
     }
   }
 };

pages/invoiceModule/invoiceHeaderList/invoiceHeaderList.scss

@@ -1,24 +1,28 @@
+page {
+  background-color: #F5F9FC;
+}
 .invoice-header {
-  height: calc(100vh - 44px);
-  background-color: #f9f9f9;
 
   &-list {
-    padding: 31rpx;
+    padding: 20rpx 30rpx;
 
     &-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      // background-color: #fff;
-      padding: 20rpx 30rpx;
-      // margin-bottom: 20rpx;
+      padding: 40rpx;
+      border-radius: 16rpx;
+      background-color: #fff;
+      margin-bottom: 20rpx;
 
       .left {
         width: 50%;
+        font-size: 32rpx;
 
         &-item {
           margin-bottom: 10rpx;
           font-weight: bold;
+          color: #333333;
           width: 100%;
           white-space: nowrap;
           overflow: hidden;
@@ -26,13 +30,19 @@
 
           &:last-child {
             font-weight: normal;
+            color: #666666;
+            margin-top: 20rpx;
           }
         }
       }
 
       .center {
-        color: $u-type-primary;
         font-size: 24rpx;
+        background-color: #F5F9FC;
+        border-radius: 18rpx;
+        color: #2E73FF;
+        padding: 10rpx 16rpx;
+        align-self: flex-start;
       }
     }
   }

pages/invoiceModule/invoiceHeaderList/invoiceHeaderList.vue

@@ -3,7 +3,7 @@
   <view class="invoice-header">
     <z-paging ref="paging" v-model="invoiceHeaderList" @query="queryList">
       <view class="invoice-header-list">
-        <u-swipe-action
+        <!-- <u-swipe-action
           v-for="(item, index) in invoiceHeaderList"
           :key="index"
           :index="index"
@@ -15,22 +15,38 @@
         >
           <view class="invoice-header-list-item" @click="addInvoiceHeader(item)">
             <view class="left">
-              <view class="left-item">{{ item.companyName }}</view>
-              <view class="left-item">{{ item.dutyNum }}</view>
+              <view class="left-item">{{ item.invoName }}</view>
+              <view class="left-item">{{ item.invoCode }}</view>
             </view>
             <view class="center">
-              {{ formatType(item.type) }}
+              {{ formatType(item.invoHeadType) }}
             </view>
             <view class="right">
               <u-icon name="arrow-right" color="#909399" size="30"></u-icon>
             </view>
           </view>
-        </u-swipe-action>
+        </u-swipe-action> -->
+        <view class="invoice-header-list-item" v-for="(item, index) in invoiceHeaderList" :key="index">
+          <view class="left">
+            <view class="left-item">{{ item.invoName }}</view>
+            <view class="left-item">{{ item.invoCode }}</view>
+          </view>
+          <view class="center">
+            {{ formatType(item.invoHeadType) }}
+          </view>
+          <view class="right">
+            <u-image width="28rpx" height="28rpx" src="/static/img/edit-icon.png" @click="addInvoiceHeader(item)" />
+            <!-- 
+              <u-icon name="edit-pen" color="#909399" size="40" @click="addInvoiceHeader(item)"></u-icon>
+            <u-icon name="trash-fill" color="#fa3534" size="40" @click="deleteInvoiceHeader(item)"></u-icon> -->
+          </view>
+        </view>
       </view>
       <view class="invoice-header-bottom" slot="bottom">
         <u-button type="primary" @click="addInvoiceHeader">新增抬头</u-button>
       </view>
     </z-paging>
+    <u-toast ref="uToast" />
   </view>
 </template>
 
@@ -39,6 +55,10 @@ export default {
   data() {
     return {
       invoiceHeaderList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
       options: [
         {
           text: '删除',
@@ -50,13 +70,26 @@ export default {
     };
   },
   methods: {
+    /**
+     * @description: 分页组件触发
+     * @param {*} pageNo
+     * @param {*} pageSize
+     * @return {*}
+     */
     queryList(pageNo, pageSize) {
-      this.$refs.paging.complete([
-        { id: 1, companyName: '企业11111111111111111111111111', dutyNum: '1541564564165465', type: 1 },
-        { id: 2, companyName: '企业2', dutyNum: '1541564564165465', type: 1 },
-        { id: 3, companyName: '企业3', dutyNum: '1541564564165465', type: 1 },
-        { id: 4, companyName: '个人1', dutyNum: '1541564564165465', type: 2 }
-      ]);
+      this.queryParams.pageNum = pageNo;
+      this.queryParams.pageSize = pageSize;
+      this.getList();
+    },
+    /**
+     * @description: 获取列表
+     * @return {*}
+     */
+    async getList() {
+      const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceHeadListApi({ ...this.queryParams });
+      if (code === 200) {
+        this.$refs.paging.complete(data?.pageInfo?.rows || []);
+      }
     },
     /**
      * @description: 滑动按钮点击
@@ -65,15 +98,26 @@ export default {
      * @return {*}
      */
     invoiceHeaderClick(index, btnIndex) {
+      this.invoiceHeaderList[index].show = true;
       if (btnIndex === 0) {
         uni.showModal({
           title: '提示',
           content: '你确认删除该条发票抬头信息吗?',
-          success: function (res) {
+          success: async (res) => {
             if (res.confirm) {
-              console.log('确认删除');
+              const { id } = this.invoiceHeaderList[index];
+              const { code } = await this.$u.api.invoiceModuleApi.deleteInvoiceHeaderApi({ id });
+              if (code === 200) {
+                this.$refs.uToast.show({
+                  title: '删除成功!',
+                  type: 'success'
+                });
+                this.getList();
+                this.invoiceHeaderList[index].show = false;
+              }
             }
             if (res.cancel) {
+              this.invoiceHeaderList[index].show = false;
               console.log('取消删除');
             }
           }
@@ -92,6 +136,18 @@ export default {
         }
       });
     },
+    // 删除抬头
+    async deleteInvoiceHeader(item) {
+      const { id } = item;
+      const { code } = await this.$u.api.invoiceModuleApi.deleteInvoiceHeaderApi({ id });
+      if (code === 200) {
+        this.$refs.uToast.show({
+          title: '删除成功!',
+          type: 'success'
+        });
+        this.getList();
+      }
+    },
     /**
      * @description: 初始化类型
      * @param {*} val

pages/invoiceModule/myInvoice/myInvoice.vue

@@ -19,18 +19,22 @@
       <view class="invoice-list">
         <view class="invoice-list-item" v-for="(item, index) in invoiceList" :key="index" @click="invoiceItemClick(item)">
           <view class="invoice-list-item-left">
-            <view class="invoice-list-item-left-item" v-for="(child, childIndex) in invoiceObjectList" :key="childIndex">
-              <view class="left">{{ child.label }}</view>
+            <view class="invoice-list-item-left-item">
+              <view class="left"></view>
               <view class="right">
-                <template v-if="child.type === 'money'">
-                  <text class="money">￥{{ item[child.key] }}</text>
-                </template>
-                <template v-else-if="child.type === 'time'">
-                  <text class="time">{{ item[child.key] }}</text>
-                </template>
-                <template v-else>
-                  <text>{{ item[child.key] }}</text>
-                </template>
+                <text class="money">￥{{ item.amount }}</text>
+              </view>
+            </view>
+            <view class="invoice-list-item-left-item">
+              <view class="left"></view>
+              <view class="right">
+                <text>{{ formatInvoiceType(item.invoType) }}</text>
+              </view>
+            </view>
+            <view class="invoice-list-item-left-item">
+              <view class="left">申请时间：</view>
+              <view class="right">
+                <text class="time">{{ item.askTime }}</text>
               </view>
             </view>
           </view>
@@ -46,7 +50,7 @@
       </view>
     </z-paging>
     <!-- 选择开票类型 -->
-    <u-select v-model="chooseRecords.show" :list="chooseRecords.list" @confirm="chooseRecordsConfirm" />
+    <u-select v-model="chooseRecords.show" :list="chooseRecords.list" value-name="dictValue" label-name="dictLabel" @confirm="chooseRecordsConfirm" />
   </view>
 </template>
 
@@ -55,31 +59,37 @@ export default {
   data() {
     return {
       invoiceList: [],
-      invoiceObjectList: [
-        { label: '', key: 'price', type: 'money' },
-        { label: '', key: 'title', type: 'status' },
-        { label: '申请时间：', key: 'applyTime', type: 'time' }
-      ],
       queryParams: {
         pageNum: 1,
         pageSize: 10
       },
       chooseRecords: {
         show: false,
-        list: [
-          {
-            value: 'parkingRecords',
-            label: '停车记录'
-          },
-          {
-            value: 'monthlyRecords',
-            label: '包月记录'
-          }
-        ]
-      }
+        list: []
+      },
+      invoiceStatusList: []
     };
   },
+  onLoad(options) {
+    this.getDict();
+  },
   methods: {
+    /**
+     * @description: 获取字典
+     * @return {*}
+     */
+    async getDict() {
+      // 发票类型
+      const typeRes = await this.$u.api.getDictApi({ type: 'invoice_type' });
+      if (typeRes.code === 200) {
+        this.chooseRecords.list = typeRes.data;
+      }
+      // 开票状态
+      const statusRes = await this.$u.api.getDictApi({ type: 'invoice_status' });
+      if (statusRes.code === 200) {
+        this.invoiceStatusList = statusRes.data;
+      }
+    },
     /**
      * @description: 指定返回上一页
      * @return {*}
@@ -106,7 +116,7 @@ export default {
       this.$u.route({
         url: '/pages/invoiceModule/availableOrder/availableOrder',
         params: {
-          type: list[0].value
+          orderType: list[0].value
         }
       });
     },
@@ -119,13 +129,7 @@ export default {
     queryList(pageNo, pageSize) {
       this.queryParams.pageNum = pageNo;
       this.queryParams.pageSize = pageSize;
-      // this.getInvoiceList();
-      this.$refs.paging.complete([
-        { id: 1, title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30', status: 0 },
-        { id: 2, title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30', status: 1 },
-        { id: 3, title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30', status: 2 },
-        { id: 4, title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30', status: 1 }
-      ]);
+      this.getInvoiceList();
     },
     /**
      * @description: 获取发票列表
@@ -134,7 +138,7 @@ export default {
     async getInvoiceList() {
       const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceListApi({ ...this.queryParams });
       if (code === 200) {
-        this.$refs.paging.complete(data?.rows || []);
+        this.$refs.paging.complete(data?.pageInfo?.rows || []);
       }
     },
     /**
@@ -146,7 +150,8 @@ export default {
       this.$u.route({
         url: '/pages/invoiceModule/invoiceDetails/invoiceDetails',
         params: {
-          id: item.id
+          id: item.id,
+          invoType: item.invoType
         }
       });
     },
@@ -156,12 +161,8 @@ export default {
      * @return {*}
      */
     formatStatus(val) {
-      const statusObj = {
-        0: '申请中',
-        1: '已开票',
-        2: '开票失败'
-      };
-      return statusObj[val];
+      if (!val && val !== 0) return;
+      if (this.invoiceStatusList.length) return this.invoiceStatusList.find((v) => Number(v.dictValue) === Number(val)).dictLabel;
     },
     /**
      * @description: 初始化状态按钮样式
@@ -175,6 +176,15 @@ export default {
         2: 'error'
       };
       return statusTypeObj[val];
+    },
+    /**
+     * @description: 初始化发票类型
+     * @param {*} val
+     * @return {*}
+     */
+    formatInvoiceType(val) {
+      if (!val) return;
+      if (this.chooseRecords.list.length) return this.chooseRecords.list.find((item) => Number(item.dictValue) === Number(val)).dictLabel;
     }
   }
 };

pages/previewPdf/previewPdf.vue

@@ -0,0 +1,22 @@
+<template>
+  <web-view :src="`/pdf/web/viewer.html?file=${url}`" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      url: ''
+    };
+  },
+  onLoad(options) {
+    const { fileUrl } = options;
+		console.log(fileUrl);
+    if (fileUrl) {
+      this.url = fileUrl;
+    }
+  }
+};
+</script>
+
+<style></style>

pdf/web/cmaps/CNS2-V.bcmap

@@ -0,0 +1,3 @@
+àRCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSEáCNS2-H

pdf/web/cmaps/ETenms-B5-H.bcmap

@@ -0,0 +1,3 @@
+àRCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSEá	ETen-B5-H`
 ^

pdf/web/cmaps/GB-H.bcmap

@@ -0,0 +1,4 @@
+àRCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE

!!�º]aX!!]`�21�>	�p�z�$]‚�"R‚d�-Uƒ7�*„
4„%�+ „Z „{�/…%…<�9K…b�1]†.�"‡‰`]‡,�"]ˆ
+�"]ˆh�"]‰F�"]Š$�"]‹�"]‹`�"]Œ>�"]��"]�z�"]ŽX�"]�6�"]��"]�r�"]‘P�"]’.�"]“�"]“j�"]”H�"]•&�"]–�"]–b�"]—@�"]˜�"]˜|�"]™Z�"]š8�"]›�"]›t�"]œR�"]�0�"]ž�"]žl�"]ŸJ�"] (�"]¡�"]¡d�"]¢B�"]£ �"X£~�']¤W�"]¥5�"]¦�"]¦q�"]§O�"]¨-�"]©�"]©i�"]ªG�"]«%�"]¬�"]¬a�"]­?�"]®�"]®{�"]¯Y�"]°7�"]±�"]±s�"]²Q�"]³/�"]´
�"]´k�"]µI�"]¶'�"]·�"]·c�"]¸A�"]¹�"]¹}�"]º[�"]»9