parking_h5_all/pages/invoiceModule/myInvoice/myInvoice.vue

<!-- 我的发票 -->
<template>
  <view class="invoice">
    <z-paging ref="paging" v-model="invoiceList" empty-view-text="暂无开票记录" @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">
              <view class="left"></view>
              <view class="right">
                <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">{{ $u.timeFormat(new Date(item.askTime), 'yyyy-mm-dd hh:MM:ss') }}</text>
              </view>
            </view>
          </view>
          <view class="invoice-list-item-right">
            <view class="arrow-right">
              <u-icon name="arrow-right" color="#909399" size="28" />
            </view>
            <view>
              <text :class="formatStatusType(item['status'])">{{ formatStatus(item['status']) }}</text>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <!-- 选择开票类型 -->
    <u-select v-model="chooseRecords.show" :list="chooseRecords.list" value-name="dictValue" label-name="dictLabel" @confirm="chooseRecordsConfirm" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      invoiceList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      chooseRecords: {
        show: false,
        list: []
      },
      invoiceStatusList: []
    };
  },
  onLoad(options) {
    this.getDict();
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.paging.reload();
    })
  },
  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 {*}
     */
    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/addInvoice/addInvoice',
        params: {
          invoType: list[0].value
        }
      });
    },
    /**
     * @description: 分页触发
     * @param {*} pageNo
     * @param {*} pageSize
     * @return {*}
     */
    queryList(pageNo, pageSize) {
      this.queryParams.pageNum = pageNo;
      this.queryParams.pageSize = pageSize;
      this.getInvoiceList();
    },
    /**
     * @description: 获取发票列表
     * @return {*}
     */
    async getInvoiceList() {
      const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceListApi({ ...this.queryParams });
      if (code === 200) {
        this.$refs.paging.complete(data?.pageInfo?.rows || []);
      }
    },
    /**
     * @description: 单条发票点击
     * @param {*} item
     * @return {*}
     */
    invoiceItemClick(item) {
      this.$u.route({
        url: '/pages/invoiceModule/invoiceDetails/invoiceDetails',
        params: {
          id: item.id,
          invoType: item.invoType
        }
      });
    },
    /**
     * @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;
    }
  }
};
</script>

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