parking_h5_all/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList.vue

<!-- 发票抬头列表 -->
<template>
  <view class="invoice-header">
    <z-paging ref="paging" v-model="invoiceHeaderList" @query="queryList">
      <view class="invoice-header-list">
        <u-swipe-action
          v-for="(item, index) in invoiceHeaderList"
          :key="index"
          :index="index"
          :show="item.show"
          :options="options"
          btn-width="120"
          @click="invoiceHeaderClick"
          bg-color="#fff"
        >
          <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>
            <view class="center">
              {{ formatType(item.type) }}
            </view>
            <view class="right">
              <u-icon name="arrow-right" color="#909399" size="30"></u-icon>
            </view>
          </view>
        </u-swipe-action>
      </view>
      <view class="invoice-header-bottom" slot="bottom">
        <u-button type="primary" @click="addInvoiceHeader">新增抬头</u-button>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      invoiceHeaderList: [],
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    };
  },
  methods: {
    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 }
      ]);
    },
    /**
     * @description: 滑动按钮点击
     * @param {*} index
     * @param {*} btnIndex
     * @return {*}
     */
    invoiceHeaderClick(index, btnIndex) {
      if (btnIndex === 0) {
        uni.showModal({
          title: '提示',
          content: '你确认删除该条发票抬头信息吗?',
          success: function (res) {
            if (res.confirm) {
              console.log('确认删除');
            }
            if (res.cancel) {
              console.log('取消删除');
            }
          }
        });
      }
    },
    /**
     * @description: 新增抬头
     * @return {*}
     */
    addInvoiceHeader(item) {
      this.$u.route({
        url: '/pages/invoiceModule/addInvoiceHeader/addInvoiceHeader',
        params: {
          id: item.id
        }
      });
    },
    /**
     * @description: 初始化类型
     * @param {*} val
     * @return {*}
     */
    formatType(val) {
      const typeObj = {
        1: '企业',
        2: '个人'
      };
      return typeObj[val];
    }
  }
};
</script>

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