Hanye官网
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

home.ts 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * 首页轮播图数据接口
  3. * @returns 轮播图数据列表
  4. *
  5. * 替换真实接口说明:
  6. * 1. 替换真实接口时,需要修改以下内容:
  7. * - 将模拟数据替换为真实接口调用
  8. * - 添加错误处理
  9. * - 添加接口参数处理
  10. * - 添加数据转换逻辑
  11. *
  12. * 2. 真实接口示例:
  13. * const response = await $fetch('https://api.example.com/carousel', {
  14. * method: 'GET',
  15. * headers: {
  16. * 'Authorization': 'Bearer your-token',
  17. * 'Content-Type': 'application/json'
  18. * },
  19. * params: {
  20. * page: 1,
  21. * limit: 10
  22. * }
  23. * })
  24. *
  25. * 3. 错误处理示例:
  26. * try {
  27. * const response = await $fetch('...')
  28. * return {
  29. * code: 200,
  30. * data: response.data,
  31. * message: '获取轮播图数据成功'
  32. * }
  33. * } catch (error) {
  34. * return {
  35. * code: 500,
  36. * data: [],
  37. * message: '获取轮播图数据失败'
  38. * }
  39. * }
  40. *
  41. * 4. 数据转换示例:
  42. * const transformedData = response.data.map(item => ({
  43. * id: item.id,
  44. * title: item.title,
  45. * image: item.imageUrl,
  46. * link: `/products/${item.productId}`
  47. * }))
  48. *
  49. * 5. 接口参数处理示例:
  50. * const query = getQuery(event)
  51. * const page = Number(query.page) || 1
  52. * const limit = Number(query.limit) || 10
  53. */
  54. export default defineEventHandler(async () => {
  55. // 模拟数据
  56. const carouselList = [
  57. {
  58. id: 1,
  59. image: "",
  60. description: `
  61. <div class="rounded border border-white w-11 h-6 leading-none justify-center flex items-center text-white text-sm font-normal">SSD</div>
  62. <div class="justify-center">
  63. <span class="text-white text-6xl font-normal leading-[78px]">新技術</span>
  64. <span class="text-white text-6xl font-normal leading-[78px]">3D NAND TLC</span>
  65. <br />
  66. <span class="text-white text-6xl font-normal leading-[78px]">フラッシュ採用、 </span><br />
  67. <span class="text-cyan-400 text-6xl font-normal leading-[78px]">信頼性が高く耐久性に優<br />れている</span>
  68. </div>
  69. <div class="flex flex-col gap-2 mt-4">
  70. <div class="flex items-center gap-2 text-stone-50 text-xl font-normal">
  71. <div class="w-2 h-2 bg-white rounded-full"></div>
  72. ストレスのないゲーム体験をお楽しみください 
  73. </div>
  74. <div class="flex items-center gap-2 text-stone-50 text-xl font-normal">
  75. <div class="w-2 h-2 bg-white rounded-full"></div>
  76. パソコンの起動時間が劇的に速くなった!
  77. </div>
  78. </div>
  79. `,
  80. link: "/products/1",
  81. },
  82. {
  83. id: 2,
  84. image: "",
  85. link: "/products/2",
  86. },
  87. {
  88. id: 3,
  89. image: "",
  90. link: "/products/3",
  91. },
  92. ];
  93. return {
  94. code: 200,
  95. data: carouselList,
  96. message: "获取轮播图数据成功",
  97. };
  98. });