123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <route lang="json5" type="page">
- {
- layout: 'default',
- style: {
- navigationBarTitleText: '%missionCenter.title%',
- navigationBarBackgroundColor: '#fff',
- },
- }
- </route>
- <script lang="ts" setup>
- import { ref } from 'vue'
- import { clockIn, todayDetail } from '@/api/mine'
- import { toPage } from '@/utils/page'
- defineOptions({
- name: 'MissionCenter', // 任务中心
- })
- const userInfo = computed(() => {
- return getUserInfoHook()
- })
- const dailyMission = [
- {
- name: 'Invite Friends Earn Cash',
- description: 'Unlimited rewards',
- icon: '/static/icons/invite-friends.png',
- url: '/pages/referEarn/referEarn',
- },
- {
- name: 'Open Group Buy',
- description: 'Win group opening rewards',
- icon: '/static/icons/open-group-buy.png',
- url: '/pages/index/index',
- },
- {
- name: 'Join Group Buy',
- description: 'Win group opening rewards',
- icon: '/static/icons/join-group-buy.png',
- url: '/pages/index/index',
- },
- ]
- // 今日是否已签到
- const hasSignedToday = ref(true)
- // 签到方法
- async function signIn() {
- if (hasSignedToday.value)
- return
- const res = await clockIn({ uid: userInfo.value.userId })
- if (res.code === '200') {
- await getSignList()
- }
- }
- const signList = ref<any[]>([])
- async function getSignList() {
- const res = await todayDetail({ uid: userInfo.value.userId })
- console.log(res)
- signList.value = res.data.signList
- hasSignedToday.value = res.data.today
- }
- onLoad(() => {
- getSignList()
- })
- </script>
- <template>
- <view class="px-24rpx py-20rpx">
- <view class="mb-34rpx rounded-16rpx bg-white p-24rpx">
- <view class="mb-40rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty">
- <text class="ml-10rpx text-32rpx">
- {{ $t('missionCenter.signIn.title') }}
- </text>
- </view>
- <!-- 七天签到日历 -->
- <view class="flex items-center justify-between">
- <view v-for="(day, index) in signList" :key="index" class="flex flex-col items-center">
- <view
- class="h-70rpx w-70rpx flex items-center justify-center rounded-full" :class="[
- day.status === 1 ? 'bg-#FF3778/30' : 'bg-gray-100',
- ]"
- >
- <text class="text-24rpx" :class="[day.status === 1 ? 'text-[var(--wot-color-theme)]' : 'text-#000/15']">
- ৳{{ day.value }}
- </text>
- </view>
- <view class="mt-8rpx text-20rpx text-gray-500">
- {{ day.days }}D
- </view>
- </view>
- </view>
- <!-- 签到按钮 -->
- <view class="mt-30rpx flex justify-center">
- <wd-button
- size="small"
- :type="hasSignedToday ? 'info' : 'primary'"
- :disabled="hasSignedToday"
- @click="signIn"
- >
- {{ $t('missionCenter.signIn.button') }}
- </wd-button>
- </view>
- </view>
- <view class="rounded-16rpx bg-white p-24rpx">
- <view class="mb-20rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty">
- <text class="ml-10rpx text-32rpx">
- {{ $t('missionCenter.dailyMission.title') }}
- </text>
- </view>
- <view
- v-for="(item, index) in dailyMission"
- :key="index"
- class="flex items-center justify-between py-30rpx"
- :class="{ 'border-b-1 border-b-solid border-b-#E1E1E1': index !== dailyMission.length - 1 }"
- >
- <view class="flex items-center">
- <image :src="item.icon" class="mr-16rpx h-100rpx w-100rpx" />
- <view>
- <view class="text-28rpx font-bold">
- {{ item.name }}
- </view>
- <view class="text-24rpx text-#6E6E6E">
- {{ item.description }}
- </view>
- </view>
- </view>
- <wd-button size="small" @click="toPage(item.url)">
- {{ $t('missionCenter.dailyMission.startNow') }}
- </wd-button>
- </view>
- </view>
- </view>
- </template>
- <style lang="scss" scoped>
- //
- </style>
|