|
|
@@ -0,0 +1,107 @@
|
|
|
+<route lang="json5" type="page">
|
|
|
+{
|
|
|
+ layout: 'default',
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: 'Mission Center',
|
|
|
+ navigationBarBackgroundColor: '#fff',
|
|
|
+ },
|
|
|
+}
|
|
|
+</route>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+defineOptions({
|
|
|
+ name: 'MissionCenter', // 任务中心
|
|
|
+})
|
|
|
+
|
|
|
+// 当前签到天数
|
|
|
+const currentDay = ref(3)
|
|
|
+// 今日是否已签到
|
|
|
+const hasSignedToday = ref(false)
|
|
|
+
|
|
|
+// 签到方法
|
|
|
+function signIn() {
|
|
|
+ if (hasSignedToday.value)
|
|
|
+ return
|
|
|
+ hasSignedToday.value = true
|
|
|
+ // 如果是新的一天，增加签到天数
|
|
|
+ if (currentDay.value < 7) {
|
|
|
+ currentDay.value++
|
|
|
+ }
|
|
|
+ // 这里可以添加签到请求逻辑
|
|
|
+}
|
|
|
+</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">
|
|
|
+ Continuous sign in to receive rewards
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <!-- 七天签到日历 -->
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view v-for="(day, index) in 7" :key="index" class="flex flex-col items-center">
|
|
|
+ <view
|
|
|
+ class="h-70rpx w-70rpx flex items-center justify-center rounded-full" :class="[
|
|
|
+ index < currentDay ? 'bg-#FF3778/30' : 'bg-gray-100',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <text class="text-24rpx" :class="[index < currentDay ? 'text-[var(--wot-color-theme)]' : 'text-#000/15']">
|
|
|
+ ৳5
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="mt-8rpx text-20rpx text-gray-500">
|
|
|
+ {{ index + 1 }}D
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 签到按钮 -->
|
|
|
+ <view class="mt-30rpx flex justify-center">
|
|
|
+ <wd-button
|
|
|
+ size="small"
|
|
|
+ :type="hasSignedToday ? 'info' : 'primary'"
|
|
|
+ :disabled="hasSignedToday"
|
|
|
+ @click="signIn"
|
|
|
+ >
|
|
|
+ Check-in
|
|
|
+ </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">
|
|
|
+ Daily Mission
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-for="i in 3"
|
|
|
+ :key="i"
|
|
|
+ class="flex items-center justify-between py-30rpx"
|
|
|
+ :class="{ 'border-b-1 border-b-solid border-b-#E1E1E1': i !== 3 }"
|
|
|
+ >
|
|
|
+ <view class="flex items-center">
|
|
|
+ <image src="https://picsum.photos/100" class="mr-16rpx h-100rpx w-100rpx" />
|
|
|
+ <view>
|
|
|
+ <view class="text-28rpx font-bold">
|
|
|
+ Invte Fridens Earn Cash
|
|
|
+ </view>
|
|
|
+ <view class="text-24rpx text-#6E6E6E">
|
|
|
+ Unlimited rewards
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <wd-button size="small">
|
|
|
+ Start Now
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+//
|
|
|
+</style>
|
liangan