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="right-content">
              <view class="right-content-item">停车订单：{{ item.orderName }}</view>
              <view class="right-content-item">商户名称：{{ item.shopName }}</view>
              <view class="right-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: [],
      checkedAll: false
    };
  },
  watch: {
    currentIds(val) {
      this.checkedAll = val.length === this.orderList.length;
    }
  },
  methods: {
    queryList() {
      this.$refs.paging.complete([
        { 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 }
      ]);
    },
    /**
     * @description: 单项条目点击
     * @param {*} item
     * @return {*}
     */
    radioClick(item) {
      if (this.currentIds.includes(item.id)) {
        const index = this.currentIds.indexOf(item.id);
        this.currentIds.splice(index, 1);
      } else {
        this.currentIds.push(item.id);
      }
    },
    /**
     * @description: 全选
     * @return {*}
     */
    checkedChange(item) {
      this.checkedAll = !this.checkedAll;
      this.currentIds = this.checkedAll ? this.orderList.map((item) => item.id) : [];
    },
    /**
     * @description: 下一步
     * @return {*}
     */
    nextStep() {
      if (this.currentIds.length) {
        this.$u.route({
          url: '/pages/invoiceModule/addInvoice/addInvoice',
          params: {
            orderIds: this.currentIds.join(',')
          }
        });
      } else {
        this.$refs.uToast.show({
          title: '请先选择订单',
          type: 'warning'
        });
      }
    }
  }
};
</script>

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