list.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view class="pkg-list-page">
  3. <BillListView ref="viewRef" :module-key="moduleKey" :initial-status="initialStatus" />
  4. <!-- 新增入口(P2 写入能力,表单页按 schema 判定是否可编辑) -->
  5. <view v-if="canCreate" class="fab" @click="goCreate">
  6. <text class="fab__text">+</text>
  7. </view>
  8. </view>
  9. </template>
  10. <script setup lang="ts">
  11. /**
  12. * 分包通用列表页壳:注册表 module 参数驱动,挂接页面级生命周期
  13. */
  14. import { ref, computed } from 'vue'
  15. import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  16. import BillListView from '@/modules/bill/BillListView.vue'
  17. import { getModule } from '@/modules/registry'
  18. import { canCreateModule } from '@/modules/bill/formSchemas'
  19. import { moduleEditPage } from '@/constants/routes'
  20. const moduleKey = ref('')
  21. const initialStatus = ref('')
  22. const viewRef = ref<InstanceType<typeof BillListView> | null>(null)
  23. const canCreate = computed(() => canCreateModule(getModule(moduleKey.value)))
  24. onLoad((options) => {
  25. moduleKey.value = options?.module || ''
  26. initialStatus.value = options?.status || ''
  27. })
  28. onReachBottom(() => {
  29. viewRef.value?.loadMore()
  30. })
  31. onPullDownRefresh(async () => {
  32. await viewRef.value?.refresh()
  33. uni.stopPullDownRefresh()
  34. })
  35. function goCreate() {
  36. const m = getModule(moduleKey.value)
  37. if (!m) return
  38. uni.navigateTo({ url: `${moduleEditPage(m.pkg)}?module=${m.key}` })
  39. }
  40. </script>
  41. <style lang="scss" scoped>
  42. .pkg-list-page {
  43. position: relative;
  44. }
  45. .fab {
  46. position: fixed;
  47. right: 32rpx;
  48. bottom: calc(64rpx + env(safe-area-inset-bottom));
  49. width: 96rpx;
  50. height: 96rpx;
  51. border-radius: 50%;
  52. background: #2979ff;
  53. display: flex;
  54. align-items: center;
  55. justify-content: center;
  56. box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.35);
  57. &:active {
  58. opacity: 0.85;
  59. }
  60. &__text {
  61. color: #fff;
  62. font-size: 48rpx;
  63. line-height: 1;
  64. }
  65. }
  66. </style>