index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <route lang="yaml">
  2. style:
  3. navigationBarTitleText: 全部任务
  4. navigationBarBackgroundColor: '#fff'
  5. </route>
  6. <script setup lang="ts">
  7. import Card from '@designer-hub/app/src/components/card.vue'
  8. const tasks = ref([
  9. {
  10. status: 0,
  11. type: 1,
  12. name: 'imola',
  13. brand: 'imola瓷砖',
  14. start: '2024/06/07',
  15. end: '2024/06/15',
  16. targe: 30,
  17. finished: 22,
  18. },
  19. {
  20. status: 0,
  21. type: 2,
  22. name: 'imola',
  23. brand: 'imola瓷砖',
  24. start: '2024/06/07',
  25. end: '2024/06/15',
  26. targe: 30,
  27. finished: 22,
  28. },
  29. {
  30. status: 0,
  31. type: 1,
  32. name: 'imola',
  33. brand: 'imola瓷砖',
  34. start: '2024/06/07',
  35. end: '2024/06/15',
  36. targe: 30,
  37. finished: 22,
  38. },
  39. ])
  40. const types = ref({
  41. 1: { title: '到店', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
  42. 2: { title: '订单', bg: '', bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]' },
  43. })
  44. const toDetail = async () => {
  45. await uni.navigateTo({ url: '/pages/home/tasks/detail/index' })
  46. }
  47. </script>
  48. <template>
  49. <div class="bg-white rounded-lg shadow flex m-[18px] p-[11px]">
  50. <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-relaxed">
  51. 任务积分
  52. </div>
  53. <div class="flex-1"></div>
  54. <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">6153</div>
  55. <div class="w-6 h-6 relative"></div>
  56. </div>
  57. <div class="flex-grow flex flex-col gap-4 p-4">
  58. <template v-for="({ type }, i) of tasks" :key="i">
  59. <div @click="toDetail()">
  60. <Card :custom-class="`${types[type].bgClass} p-0`" style="padding: 0">
  61. <div class="flex p-4 items-center">
  62. <div
  63. class="w-[47px] h-[23px] px-1 bg-[#2357e9] rounded border justify-center items-center gap-2.5 inline-flex"
  64. >
  65. <div
  66. class="text-right text-white text-xs font-normal font-['PingFang_SC'] leading-tight"
  67. >
  68. 进行中
  69. </div>
  70. </div>
  71. <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none">
  72. {{ types[type].title }}量
  73. </div>
  74. <div class="flex-1"></div>
  75. <div class="mx-1.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none">
  76. 奖励积分
  77. </div>
  78. <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">2000</div>
  79. </div>
  80. <div class="flex flex-col gap-4 bg-white p-5 rounded-2xl">
  81. <div>
  82. <span class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
  83. 材料商:
  84. </span>
  85. <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none">
  86. imola
  87. </span>
  88. </div>
  89. <div>
  90. <span class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
  91. 品牌:
  92. </span>
  93. <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none">
  94. imola瓷砖
  95. </span>
  96. </div>
  97. <div>
  98. <span class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
  99. 任务时间:
  100. </span>
  101. <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none">
  102. 2024/06/07-2024/09/16
  103. </span>
  104. </div>
  105. <div class="flex items-center border-t border-t-solid border-t-[#efefef] pt-1.5">
  106. <div class="text-black/90 text-sm font-normal font-['PingFang SC']">目标 30</div>
  107. <div class="flex-1"></div>
  108. <div class="mr-[16px] w-[68px] h-7 px-2.5 py-[3px] rounded-[30px] border border-[#fe5053] justify-center items-center gap-2.5 inline-flex" style="border: 1px solid #fe5053">
  109. <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang SC']">不接单</div>
  110. </div>
  111. <div
  112. class="w-[68px] h-7 px-2.5 py-[3px] bg-[#2357e9] rounded-[30px] justify-center items-center gap-2.5 inline-flex"
  113. >
  114. <div class="text-white text-xs font-normal font-['PingFang SC']">接单</div>
  115. </div>
  116. </div>
  117. </div>
  118. </Card>
  119. </div>
  120. </template>
  121. </div>
  122. </template>