feat(新页面): CP奖励说明页面

src/config/security.js

@@ -12,6 +12,7 @@ export const PUBLIC_PATHS = Object.freeze([
   '/ranking',
   '/games-king',
   '/couple',
+  '/cp-reward',
   '/invitation-to-register',
   '/invitation/invite-new-user',
   '/recharge-reward',

src/locales/ar.json

@@ -30,6 +30,7 @@
   "current_salary": "الراتب الحالي：",
   "todays_task": "مهمة اليوم:",
   "platform_policy": "سياسة المنصة",
+  "cp_reward": "مكافأة CP",
   "num_teams": "عدد الفريق:",
   "team_top_up": "الفريق قيمة",
   "bd_income_top_up": "BD دخل (شحن)",

src/locales/bn.json

@@ -30,6 +30,7 @@
   "current_salary": "বর্তমান বেতন:",
   "todays_task": "আজকের কাজ:",
   "platform_policy": "প্ল্যাটফর্ম নীতি",
+  "cp_reward": "CP পুরস্কার",
   "num_teams": "দলের সংখ্যা:",
   "team_top_up": "দল টপ-আপ",
   "bd_income_top_up": "বিডি আয় (টপ-আপ)",

src/locales/en.json

@@ -30,6 +30,7 @@
   "current_salary": "Current salary：",
   "todays_task": "Today's task:",
   "platform_policy": "Platform Policy",
+  "cp_reward": "CP reward",
   "num_teams": "Number Of Teams：",
   "team_top_up": "Team top-up",
   "bd_income_top_up": "BD Income (Top-up)",

src/locales/tr.json

@@ -30,6 +30,7 @@
   "current_salary": "Mevcut maaş:",
   "todays_task": "Bugünün görevi:",
   "platform_policy": "Platform Politikası",
+  "cp_reward": "CP ödülü",
   "num_teams": "Takım Sayısı:",
   "team_top_up": "Takım yükleme",
   "bd_income_top_up": "BD Geliri (Yükleme)",

src/locales/zh.json

@@ -30,6 +30,7 @@
   "current_salary": "当前薪资：",
   "todays_task": "今日任务：",
   "platform_policy": "平台政策",
+  "cp_reward": "CP奖励",
   "num_teams": "团队数量:",
   "team_top_up": "团队充值",
   "bd_income_top_up": "BD收入（充值）",

src/router/index.js

@@ -380,6 +380,13 @@ const router = createRouter({
       meta: { requiresAuth: true },
     }, //北京时间每周一早上5点刷新
 
+    {
+      path: '/cp-reward',
+      name: 'cp-reward',
+      component: () => import('../views/CPReward/index.vue'),
+      meta: { requiresAuth: true },
+    },
+
     // 固定活动
     {
       path: '/recharge-reward',

src/utils/permissionManager.js

@@ -80,6 +80,8 @@ export const ROLE_PERMISSIONS = {
     ...RANKING_PAGES, //排行榜
     ...ACTIVITIES, //活动页面
 
+    '/cp-reward', //情侣奖励说明页面
+
     '/recharge', //搜索充值对象页面
     '/recharge-pay-way', //充值方式页面
     '/recharge-guide', //充值引导页面

src/views/CPReward/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="fullPage">
+    <GeneralHeader :title="t('cp_reward')" :isHomePage="true" color="black" class="page-header" />
+
+    <div v-if="isLoading" class="loading-container">
+      <LoadingSpinner />
+      <p>{{ t('loading') }}...</p>
+    </div>
+
+    <div v-show="!isLoading" class="reward-content">
+      <img
+        v-for="imageName in rewardImages"
+        :key="imageName"
+        v-smart-img
+        :src="imageUrl(getImgName(imageName))"
+        alt=""
+        class="reward-image"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { connectToApp } from '@/utils/appConnector.js'
+import { useI18n } from 'vue-i18n'
+import { useLangStore } from '@/stores/lang'
+import { getWebpUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/image/imagePreloader.js'
+import GeneralHeader from '@/components/GeneralHeader.vue'
+
+const isLoading = ref(true)
+const rewardImages = ['CP1', 'CP2', 'CP3']
+
+const { t } = useI18n()
+const langStore = useLangStore()
+
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const imageUrl = (filename) => getWebpUrl('Activities/CPReward/', filename)
+
+const getImgName = (filename) => {
+  return currentLangType.value === 'en' ? filename : `${filename}_${currentLangType.value}`
+}
+
+const preloadCriticalImages = async () => {
+  await preloadImages(rewardImages.map((imageName) => imageUrl(getImgName(imageName))))
+}
+
+const completePreloading = async () => {
+  try {
+    await preloadCriticalImages()
+  } catch (error) {
+    console.error('Image preloading failed:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    completePreloading()
+  })
+}
+
+onMounted(() => {
+  connectToAppHandler()
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+.fullPage {
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../../assets/images/Azizi/secondBg.png);
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.fullPage::-webkit-scrollbar {
+  display: none;
+}
+
+.page-header {
+  position: relative;
+  z-index: 999;
+  background: transparent;
+}
+
+.loading-container {
+  width: 100vw;
+  min-height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+  overflow: hidden;
+  position: relative;
+}
+
+.reward-content {
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.reward-content::-webkit-scrollbar {
+  display: none;
+}
+
+.reward-image {
+  display: block;
+  width: 100vw;
+  object-fit: cover;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>