availableOrder.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <view class="order-box">
  3. <z-paging ref="paging" v-model="orderList" @query="queryList">
  4. <view class="order-box-list">
  5. <view class="order-box-list-item" v-for="(item, index) in orderList" :key="index" @click="radioClick(item)">
  6. <view class="left">
  7. <view class="left-radio small-radio">
  8. <radio value="true" :checked="currentIds.includes(item.id)" />
  9. </view>
  10. <view class="right-content">
  11. <view class="right-content-item">停车订单:{{ item.orderName }}</view>
  12. <view class="right-content-item">商户名称:{{ item.shopName }}</view>
  13. <view class="right-content-item">订单时间:{{ item.orderTime }}</view>
  14. </view>
  15. </view>
  16. <view class="right"> ¥{{ item.price }} 元 </view>
  17. </view>
  18. </view>
  19. <view class="order-box-bottom" slot="bottom">
  20. <view class="order-box-bottom-radio small-radio"> <radio value="true" :checked="checkedAll" @click="checkedChange" />全选 </view>
  21. <view class="order-box-bottom-next">
  22. <u-button type="primary" size="medium" :disabled="!currentIds.length" @click="nextStep">下一步</u-button>
  23. </view>
  24. </view>
  25. </z-paging>
  26. <u-toast ref="uToast" />
  27. </view>
  28. </template>
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. orderList: [
  34. { id: 1, orderName: '停车场订单', shopName: '商户名称', orderTime: '2023-06-12 15:00:00', price: 3.0 },
  35. { id: 2, orderName: '停车场订单', shopName: '商户名称', orderTime: '2023-06-12 15:00:00', price: 3.0 }
  36. ],
  37. currentIds: [],
  38. checkedAll: false
  39. };
  40. },
  41. watch: {
  42. currentIds(val) {
  43. this.checkedAll = val.length === this.orderList.length;
  44. }
  45. },
  46. methods: {
  47. queryList() {
  48. this.$refs.paging.complete([
  49. { id: 1, orderName: '停车场订单', shopName: '商户名称', orderTime: '2023-06-12 15:00:00', price: 3.0 },
  50. { id: 2, orderName: '停车场订单', shopName: '商户名称', orderTime: '2023-06-12 15:00:00', price: 3.0 }
  51. ]);
  52. },
  53. /**
  54. * @description: 单项条目点击
  55. * @param {*} item
  56. * @return {*}
  57. */
  58. radioClick(item) {
  59. if (this.currentIds.includes(item.id)) {
  60. const index = this.currentIds.indexOf(item.id);
  61. this.currentIds.splice(index, 1);
  62. } else {
  63. this.currentIds.push(item.id);
  64. }
  65. },
  66. /**
  67. * @description: 全选
  68. * @return {*}
  69. */
  70. checkedChange(item) {
  71. this.checkedAll = !this.checkedAll;
  72. this.currentIds = this.checkedAll ? this.orderList.map((item) => item.id) : [];
  73. },
  74. /**
  75. * @description: 下一步
  76. * @return {*}
  77. */
  78. nextStep() {
  79. if (this.currentIds.length) {
  80. this.$u.route({
  81. url: '/pages/invoiceModule/addInvoice/addInvoice',
  82. params: {
  83. orderIds: this.currentIds.join(',')
  84. }
  85. });
  86. } else {
  87. this.$refs.uToast.show({
  88. title: '请先选择订单',
  89. type: 'warning'
  90. });
  91. }
  92. }
  93. }
  94. };
  95. </script>
  96. <style lang="scss" scoped>
  97. @import './availableOrder.scss';
  98. </style>