missionCenter.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <route lang="json5" type="page">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationBarTitleText: 'Mission Center',
  6. navigationBarBackgroundColor: '#fff',
  7. },
  8. }
  9. </route>
  10. <script lang="ts" setup>
  11. import { ref } from 'vue'
  12. import { todayDetail } from '@/api/mine'
  13. import { toPage } from '@/utils/page'
  14. defineOptions({
  15. name: 'MissionCenter', // 任务中心
  16. })
  17. const dailyMission = [
  18. {
  19. name: 'Invite Friends Earn Cash',
  20. description: 'Unlimited rewards',
  21. icon: '/static/icons/invite-friends.png',
  22. url: '/pages/referEarn/referEarn',
  23. },
  24. {
  25. name: 'Open Group Buy',
  26. description: 'Win group opening rewards',
  27. icon: '/static/icons/open-group-buy.png',
  28. url: '/pages/index/index',
  29. },
  30. {
  31. name: 'Join Group Buy',
  32. description: 'Win group opening rewards',
  33. icon: '/static/icons/join-group-buy.png',
  34. url: '/pages/index/index',
  35. },
  36. ]
  37. // 当前签到天数
  38. const currentDay = ref(3)
  39. // 今日是否已签到
  40. const hasSignedToday = ref(false)
  41. // 签到方法
  42. function signIn() {
  43. if (hasSignedToday.value)
  44. return
  45. hasSignedToday.value = true
  46. // 如果是新的一天,增加签到天数
  47. if (currentDay.value < 7) {
  48. currentDay.value++
  49. }
  50. // 这里可以添加签到请求逻辑
  51. }
  52. async function getSignList() {
  53. const res = await todayDetail()
  54. console.log(res)
  55. }
  56. onLoad(() => {
  57. getSignList()
  58. })
  59. </script>
  60. <template>
  61. <view class="px-24rpx py-20rpx">
  62. <view class="mb-34rpx rounded-16rpx bg-white p-24rpx">
  63. <view class="mb-40rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty">
  64. <text class="ml-10rpx text-32rpx">
  65. Continuous sign in to receive rewards
  66. </text>
  67. </view>
  68. <!-- 七天签到日历 -->
  69. <view class="flex items-center justify-between">
  70. <view v-for="(day, index) in 7" :key="index" class="flex flex-col items-center">
  71. <view
  72. class="h-70rpx w-70rpx flex items-center justify-center rounded-full" :class="[
  73. index < currentDay ? 'bg-#FF3778/30' : 'bg-gray-100',
  74. ]"
  75. >
  76. <text class="text-24rpx" :class="[index < currentDay ? 'text-[var(--wot-color-theme)]' : 'text-#000/15']">
  77. ৳5
  78. </text>
  79. </view>
  80. <view class="mt-8rpx text-20rpx text-gray-500">
  81. {{ index + 1 }}D
  82. </view>
  83. </view>
  84. </view>
  85. <!-- 签到按钮 -->
  86. <view class="mt-30rpx flex justify-center">
  87. <wd-button
  88. size="small"
  89. :type="hasSignedToday ? 'info' : 'primary'"
  90. :disabled="hasSignedToday"
  91. @click="signIn"
  92. >
  93. Check-in
  94. </wd-button>
  95. </view>
  96. </view>
  97. <view class="rounded-16rpx bg-white p-24rpx">
  98. <view class="mb-20rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty">
  99. <text class="ml-10rpx text-32rpx">
  100. Daily Mission
  101. </text>
  102. </view>
  103. <view
  104. v-for="(item, index) in dailyMission"
  105. :key="index"
  106. class="flex items-center justify-between py-30rpx"
  107. :class="{ 'border-b-1 border-b-solid border-b-#E1E1E1': index !== dailyMission.length - 1 }"
  108. >
  109. <view class="flex items-center">
  110. <image :src="item.icon" class="mr-16rpx h-100rpx w-100rpx" />
  111. <view>
  112. <view class="text-28rpx font-bold">
  113. {{ item.name }}
  114. </view>
  115. <view class="text-24rpx text-#6E6E6E">
  116. {{ item.description }}
  117. </view>
  118. </view>
  119. </view>
  120. <wd-button size="small" @click="toPage(item.url)">
  121. Start Now
  122. </wd-button>
  123. </view>
  124. </view>
  125. </view>
  126. </template>
  127. <style lang="scss" scoped>
  128. //
  129. </style>