parking_h5_all/pages/invoiceModule/availableOrder/availableOrder.vue

<!-- 可开发票订单 -->
<template>
  <view class="order-box">
    <z-paging ref="paging" v-model="orderList" @query="queryList">
      <view class="order-box-list">
        <view class="order-box-list-item" v-for="(item, index) in orderList" :key="index" @click="radioClick(item)">
          <view class="left">
            <view class="left-radio small-radio">
              <radio value="true" :checked="currentIds.includes(item.id)" />
            </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-next">
          <u-button type="primary" size="medium" :disabled="!currentIds.length" @click="nextStep">下一步</u-button>
        </view>
      </view>
    </z-paging>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        { 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 }
      ],
      currentIds: [],
      currentList: [],
      checkedAll: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        invoType: 1
      }
    };
  },
  watch: {
    currentIds(val) {
      this.checkedAll = val.length === this.orderList.length;
    }
  },
  onLoad(options) {
    const { orderType } = options;
    if (orderType) {
      this.queryParams.invoType = orderType;
    }
  },
  methods: {
    /**
     * @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: 单项条目点击
     * @param {*} item
     * @return {*}
     */
    radioClick(item) {
      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);
      }
    },
    /**
     * @description: 全选
     * @return {*}
     */
    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: 下一步
     * @return {*}
     */
    nextStep() {
      if (this.currentIds.length) {
        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 {
        this.$refs.uToast.show({
          title: '请先选择订单',
          type: 'warning'
        });
      }
    }
  }
};
</script>

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