myFavorite.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <route lang="json5">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationBarTitleText: 'My Favorite',
  6. navigationBarBackgroundColor: '#fff',
  7. },
  8. }
  9. </route>
  10. <script lang="ts" setup>
  11. // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
  12. // eslint-disable-next-line unused-imports/no-unused-imports
  13. import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
  14. import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
  15. import { getList } from '@/api/product'
  16. defineOptions({
  17. name: 'MyFavorite', // 我的收藏
  18. })
  19. // 获取屏幕边界到安全区域距离
  20. const systemInfo = uni.getSystemInfoSync()
  21. const safeAreaInsets = systemInfo.safeAreaInsets
  22. // z-paging
  23. const paging = ref(null)
  24. // 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
  25. useZPaging(paging)
  26. // 搜索结果
  27. const dataList = ref([])
  28. async function queryList(pageNo: number, pageSize: number) {
  29. try {
  30. const params = {
  31. page: pageNo,
  32. size: pageSize,
  33. }
  34. const res = await getList(params)
  35. paging.value.complete(res.data.list)
  36. }
  37. catch {
  38. paging.value.complete(false)
  39. }
  40. }
  41. </script>
  42. <template>
  43. <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList" @click="closeOutside">
  44. <view class="px-24rpx py-24rpx">
  45. <view class="grid grid-cols-2 gap-22rpx">
  46. <product v-for="(item, index) in dataList" :key="index" :height="340" :item="item" />
  47. </view>
  48. </view>
  49. </z-paging>
  50. </template>
  51. <style>
  52. page {
  53. background: #fff;
  54. }
  55. </style>
  56. <style lang="scss" scoped>
  57. :deep() {
  58. .wd-navbar__title {
  59. margin: 0;
  60. max-width: 100%;
  61. .content {
  62. box-sizing: border-box;
  63. position: relative;
  64. height: 100%;
  65. display: flex;
  66. align-items: center;
  67. padding: 19rpx 25rpx 19rpx 0;
  68. .back {
  69. padding: 0 25rpx;
  70. }
  71. .search-input {
  72. flex: 1;
  73. height: 100%;
  74. text-align: left;
  75. background: rgba(245, 245, 245, 0.6);
  76. border-radius: 8rpx;
  77. border: 1px solid #efefef;
  78. font-size: 28rpx;
  79. padding: 16rpx 64rpx 16rpx 22rpx;
  80. font-weight: normal;
  81. &:active {
  82. border-color: rgba(230, 27, 40, 0.65);
  83. }
  84. &:focus-within {
  85. border-color: rgba(230, 27, 40, 0.65) !important;
  86. }
  87. &:focus-visible {
  88. border-color: rgba(230, 27, 40, 0.65) !important;
  89. }
  90. }
  91. .search-icon {
  92. position: absolute;
  93. right: 42rpx;
  94. top: 50%;
  95. transform: translateY(-50%);
  96. }
  97. }
  98. }
  99. }
  100. </style>