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">
          <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'">￥{{ item[child.key] }}</template>
                <template v-else>
                  {{ item[child.key] }}
                </template>
              </view>
            </view>
          </view>
          <view class="invoice-list-item-right"></view>
        </view>
      </view>
    </z-paging>
    <u-select v-model="chooseRecords.show" :list="chooseRecords.list" @confirm="chooseRecordsConfirm" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      invoiceList: [
        { title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30' },
        { title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30' },
        { title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30' },
        { title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30' }
      ],
      invoiceObjectList: [
        { label: '主题：', key: 'title' },
        { label: '金额：', key: 'price', type: 'money' },
        { label: '申请开票时间：', key: 'applyTime' }
      ],
      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.$refs.paging.complete([
        { title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30' },
        { title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30' },
        { title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30' },
        { title: '停车服务', price: 0.03, applyTime: '2023-06-12 11:21:30' }
      ]);
    }
  }
};
</script>

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