index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
  2. <route lang="json5" type="home">
  3. {
  4. layout: 'tabbar',
  5. style: {
  6. navigationStyle: 'custom',
  7. navigationBarTitleText: '首页',
  8. },
  9. }
  10. </route>
  11. <script lang="ts" setup>
  12. import Card from '@/components/card.vue'
  13. import HotActivity from '@/components/hot-activity.vue'
  14. import MomentItem from '@/components/moment-item.vue'
  15. import Scaner from '@/components/scaner.vue'
  16. import TiltedButton from '@/components/tilted-button.vue'
  17. import useRequest from '@/hooks/useRequest'
  18. import dayjs from 'dayjs'
  19. import Menus from './components/menus.vue'
  20. import ScheduleCard from './components/schedule-card.vue'
  21. defineOptions({
  22. name: 'Home',
  23. })
  24. // 测试 uni API 自动引入
  25. const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IResData<any>, {
  26. initialData: {
  27. banners: [],
  28. hots: [
  29. {
  30. id: 1,
  31. title: '日本研学·东京艺术大学游学',
  32. img: '',
  33. start: dayjs('2024-07-15').toDate(),
  34. end: dayjs('2024-08-10').toDate(),
  35. },
  36. {
  37. id: 1,
  38. title: '日本研学·东京艺术大学游学',
  39. img: '',
  40. start: dayjs('2024-07-15').toDate(),
  41. end: dayjs('2024-08-10').toDate(),
  42. },
  43. ],
  44. dynamics: [
  45. {
  46. author: {
  47. avatar: 'https://via.placeholder.com/35x35',
  48. nickname: '苏小萌',
  49. level: '0',
  50. },
  51. content: '用心做好设计,为客户创造美好家居环境',
  52. images: ['https://via.placeholder.com/165x220'],
  53. tags: ['意大利游学设计班'],
  54. shares: 0,
  55. comments: 0,
  56. likes: 0,
  57. createdAt: dayjs('2024-07-15').toDate(),
  58. },
  59. {
  60. author: {
  61. avatar: 'https://via.placeholder.com/35x35',
  62. nickname: '苏小萌',
  63. level: '0',
  64. },
  65. content: '用心做好设计,为客户创造美好家居环境',
  66. images: ['https://via.placeholder.com/220x165'],
  67. tags: ['意大利游学设计班'],
  68. shares: 0,
  69. comments: 0,
  70. likes: 0,
  71. createdAt: dayjs('2024-07-15').toDate(),
  72. },
  73. {
  74. author: {
  75. avatar: 'https://via.placeholder.com/35x35',
  76. nickname: '苏小萌',
  77. level: '0',
  78. },
  79. content: '用心做好设计,为客户创造美好家居环境',
  80. images: [
  81. 'https://via.placeholder.com/104x104',
  82. 'https://via.placeholder.com/104x204',
  83. 'https://via.placeholder.com/204x104',
  84. ],
  85. tags: ['意大利游学设计班'],
  86. shares: 0,
  87. comments: 0,
  88. likes: 0,
  89. createdAt: dayjs('2024-07-15').toDate(),
  90. },
  91. ],
  92. studyTour: null,
  93. },
  94. })
  95. console.log(data.value)
  96. onLoad(() => {})
  97. onShareAppMessage(() => ({}))
  98. </script>
  99. <template>
  100. <view class="">
  101. <view class="bg-black w-full pos-relative aspect-[1.26/1]">
  102. <wd-img custom-class="w-[375px] h-[297px]" src="https://via.placeholder.com/375x297" />
  103. <div
  104. class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
  105. >
  106. <!-- <div class="w-[82px] h-[33px] rounded-[60px] border border-white"></div> -->
  107. <view class="mx-7">
  108. <wd-button plain custom-class="bg-transparent! border-white! text-white!">
  109. 02:30
  110. </wd-button>
  111. </view>
  112. </div>
  113. </view>
  114. <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
  115. <ScheduleCard custom-class="my-6 mx-3.5"></ScheduleCard>
  116. <menus></menus>
  117. <view class="my-6 mx-3.5">
  118. <HotActivity></HotActivity>
  119. </view>
  120. <view class="my-6 mx-3.5">
  121. <Card>一分钟快速了解筑巢荟</Card>
  122. </view>
  123. <view class="mx-3.5 text-5 font-400">设计圈</view>
  124. <view class="mx-3.5">
  125. <template v-for="it of data.dynamics" :key="it.id">
  126. <view class="my-6">
  127. <MomentItem :options="it">{{ it.title }}</MomentItem>
  128. </view>
  129. </template>
  130. </view>
  131. </view>
  132. </view>
  133. </template>
  134. <style></style>