parking_h5_all/pages/invoiceModule/myInvoice/myInvoice.vue

<!-- 我的发票 -->
<template>
  <view class="invoice">
    <z-paging ref="paging" v-model="invoiceList" @query="queryList">
      <!-- 导航栏 -->
      <u-navbar
        title-color="#fff"
        :custom-back="customBack"
        :border-bottom="false"
        back-icon-color="#CCE8FF"
        :background="{ background: '#008CFF' }"
        title="我的发票"
        class="invoice-navbar"
        slot="top"
      >
        <view slot="right" class="invoice-navbar-right" @click="addInvoice">开发票</view>
      </u-navbar>
      <!-- 列表 -->
      <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="right">
                <template v-if="child.type === 'money'">
                  <text class="money">￥{{ item[child.key] }}</text>
                </template>
                <template v-else-if="child.type === 'status'">
                  <text class="status">
                    {{ item[child.key] }}
                  </text>
                  <u-tag :text="formatStatus(item['status'])" :type="formatStatusType(item['status'])" mode="dark" />
                </template>
                <template v-else>
                  {{ item[child.key] }}
                </template>
              </view>
            </view>
          </view>
          <view class="invoice-list-item-right">
            <u-icon name="arrow-right" color="#909399" size="28" />
          </view>
        </view>
      </view>
    </z-paging>
    <!-- 选择开票类型 -->
    <u-select v-model="chooseRecords.show" :list="chooseRecords.list" @confirm="chooseRecordsConfirm" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      invoiceList: [],
      invoiceObjectList: [
        { label: '', key: 'title', type: 'status' },
        { label: '', key: 'price', type: 'money' },
        { label: '申请时间：', key: 'applyTime' }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      chooseRecords: {
        show: false,
        list: [
          {
            value: 'parkingRecords',
            label: '停车记录'
          },
          {
            value: 'monthlyRecords',
            label: '包月记录'
          }
        ]
      }
    };
  },
  methods: {
    /**
     * @description: 指定返回上一页
     * @return {*}
     */
    customBack() {
      this.$u.route({
        type: 'switchTab',
        url: 'pages/center/index'
      });
    },
    /**
     * @description: 开发票
     * @return {*}
     */
    addInvoice() {
      this.chooseRecords.show = true;
    },
    /**
     * @description: 开发票选择确认
     * @param {*} val
     * @return {*}
     */
    chooseRecordsConfirm(list) {
      this.$u.route({
        url: '/pages/invoiceModule/availableOrder/availableOrder',
        params: {
          type: list[0].value
        }
      });
    },
    /**
     * @description: 分页触发
     * @param {*} pageNo
     * @param {*} pageSize
     * @return {*}
     */
    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 }
      ]);
    },
    /** 
     * @description: 获取发票列表
     * @return {*}
     */
    async getInvoiceList() {
      const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceListApi({ ...this.queryParams });
      if (code === 200) {
        this.$refs.paging.complete(data?.rows || []);
      }
    },
    /**
     * @description: 单条发票点击
     * @param {*} item
     * @return {*}
     */
    invoiceItemClick(item) {
      this.$u.route({
        url: '/pages/invoiceModule/invoiceDetails/invoiceDetails',
        params: {
          id: item.id
        }
      });
    },
    /**
     * @description: 初始化状态
     * @param {*} val
     * @return {*}
     */
    formatStatus(val) {
      const statusObj = {
        0: '申请中',
        1: '已开票',
        2: '开票失败'
      };
      return statusObj[val];
    },
    /**
     * @description: 初始化状态按钮样式
     * @param {*} val
     * @return {*}
     */
    formatStatusType(val) {
      const statusTypeObj = {
        0: 'info',
        1: 'primary',
        2: 'error'
      };
      return statusTypeObj[val];
    }
  }
};
</script>

<style lang="scss" scoped>
@import './myInvoice.scss';
</style>