red-packet.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <view class="red-packet-page">
  3. <!-- Navigation Bar is likely handled by pages.json configuration or custom nav -->
  4. <!-- Since style says navigationStyle: custom might be needed for some pages, but here we stick to default or simple -->
  5. <page-scroll
  6. ref="pageScroll"
  7. emptyText="暂无红包"
  8. @updateList="updateList"
  9. >
  10. <view class="list-container">
  11. <red-packet-item
  12. v-for="(item, index) in list"
  13. :key="index"
  14. :info="item"
  15. @use="handleUse"
  16. />
  17. </view>
  18. </page-scroll>
  19. </view>
  20. </template>
  21. <script>
  22. import PageScroll from '@/components/pageScroll/index.vue';
  23. import RedPacketItem from '../components/red-packet-item.vue';
  24. export default {
  25. components: {
  26. PageScroll,
  27. RedPacketItem
  28. },
  29. data() {
  30. return {
  31. list: []
  32. };
  33. },
  34. methods: {
  35. updateList(data) {
  36. // this.list = data;
  37. this.list = [
  38. {
  39. amount: 10,
  40. condition: 599,
  41. type: 1,
  42. typeName: '普通红包',
  43. title: '满599减10元',
  44. endTime: '2024.09.11',
  45. status: 0
  46. },
  47. {
  48. amount: 10,
  49. condition: 10.01,
  50. type: 2,
  51. typeName: '惊喜红包',
  52. title: '满10.01减10元',
  53. endTime: '2024.09.11',
  54. status: 0
  55. },
  56. {
  57. amount: 10,
  58. condition: 599,
  59. type: 1,
  60. typeName: '普通红包',
  61. title: '满599减10元',
  62. endTime: '2024.09.11',
  63. status: 1
  64. },
  65. {
  66. amount: 10,
  67. condition: 599,
  68. type: 1,
  69. typeName: '普通红包',
  70. title: '满599减10元',
  71. endTime: '2024.09.11',
  72. status: 2
  73. }
  74. ];
  75. },
  76. handleUse(item) {
  77. console.log('Use red packet', item);
  78. // Handle navigation or logic
  79. uni.switchTab({
  80. url: '/pages/sell/index'
  81. });
  82. }
  83. },
  84. }
  85. </script>
  86. <style lang="scss" scoped>
  87. .red-packet-page {
  88. background-color: #f5f5f5;
  89. min-height: 100vh;
  90. }
  91. .list-container {
  92. padding-top: 20rpx;
  93. padding-bottom: 20rpx;
  94. }
  95. </style>