missionCenter.vue 4.0 KB

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