Bläddra i källkod

feat: 任务中心页面开发

liangan 1 månad sedan
förälder
incheckning
9d3ee9de5d
1 ändrade filer med 107 tillägg och 0 borttagningar
  1. 107 0
      src/pages/missionCenter/missionCenter.vue

+ 107 - 0
src/pages/missionCenter/missionCenter.vue

@@ -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>