feat(抽奖活动页): 完成兑换模块

src/views/Activities/Lottery/Lottery.vue

@@ -84,13 +84,21 @@
             background: rgba(255, 255, 255, 0.2);
             backdrop-filter: blur(32px);
 
-            padding: 12px;
+            padding: 20px 12px 12px;
 
             display: flex;
             align-items: center;
             gap: 8px;
+
+            position: relative;
           "
         >
+          <img
+            src="/src/assets/icon/helpWhite.png"
+            alt=""
+            style="display: block; width: 16px; position: absolute; top: 4px; right: 8px"
+            @click="helpShow = true"
+          />
           <img
             :src="''"
             alt=""
@@ -127,7 +135,7 @@
           </div>
         </div>
 
-        <!-- 标题 -->
+        <!-- 抽屉 -->
         <div
           style="
             border-radius: 12px;
@@ -135,139 +143,238 @@
             backdrop-filter: blur(32px);
             padding: 12px;
             font-weight: 600;
-          "
-        >
-          Transfer to others
-        </div>
-
-        <!-- 转账功能 -->
-        <div
-          style="
-            border-radius: 12px;
-            background: rgba(255, 255, 255, 0.2);
-            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
-            backdrop-filter: blur(32px);
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: 8px;
-            padding: 12px;
           "
         >
-          <!-- 转账对象 -->
+          <!-- 转账功能 -->
           <div
-            style="
+            style="display: flex; justify-content: space-between; align-items: center"
-              border-radius: 12px;
+            @click="drawerShowBt('transfer')"
-              background: rgba(255, 255, 255, 0.2);
-              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
-              backdrop-filter: blur(32px);
-              padding: 12px;
-            "
           >
-            <!-- 基本信息 -->
+            <div>Transfer To Recharge Agent</div>
-            <div style="display: flex; align-items: center">
+            <img
-              <!-- 头像 -->
+              src="/src/assets/icon/arrowWhite.png"
-              <div style="position: relative; width: 50px; margin-right: 12px">
+              alt=""
-                <img
+              style="width: 1em; display: block; transition: all 0.2s ease"
-                  :src="selectedPayee.avatar || ''"
+              :class="{ rotated: transferShow }"
-                  :alt="selectedPayee.name"
+            />
-                  style="width: 100%; object-fit: cover; border-radius: 50%"
+          </div>
-                  @error="defaultAvatarUrl"
+
-                />
+          <!-- 转账抽屉 -->
-              </div>
+          <transition name="drawer">
-              <!-- 个人信息 -->
+            <div
-              <div style="flex: 1">
+              v-if="transferShow"
-                <div style="margin: 0 0 4px 0; font-weight: 700">
+              style="
-                  {{ selectedPayee.name || '' }}
+                background-color: transparent;
-                </div>
+                display: flex;
-                <div style="margin: 0; font-size: 0.9em; font-weight: 500">
+                flex-direction: column;
-                  ID: {{ selectedPayee.account || '' }}
+                gap: 12px;
-                </div>
+              "
-              </div>
+            >
-              <!-- 换人按钮 -->
+              <!-- 转账对象 -->
-              <button
+              <div
+                v-if="selectedPayee.id"
                 style="
                   border-radius: 12px;
-                  background: linear-gradient(
+                  background: rgba(255, 255, 255, 0.2);
-                    152deg,
+                  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
-                    rgba(198, 112, 255, 0.6) 7.01%,
+                  backdrop-filter: blur(32px);
-                    rgba(119, 38, 255, 0.6) 92.99%
+                  padding: 12px;
-                  );
-                  border: none;
-                  font-weight: 500;
-                  padding: 2px 8px;
                 "
-                @click="searchPayee"
               >
-                Change
+                <!-- 基本信息 -->
-              </button>
+                <div style="display: flex; align-items: center">
-            </div>
+                  <!-- 头像 -->
-            <!-- 身份图标 -->
+                  <div style="position: relative; width: 50px; margin-right: 12px">
-            <div style="margin-left: 50px; display: flex; gap: 5px">
+                    <img
-              <img v-if="selectedPayee.isHost" src="/src/assets/icon/host.png" alt="" width="30%" />
+                      :src="selectedPayee.avatar || ''"
-              <img
+                      :alt="selectedPayee.name"
-                v-if="selectedPayee.isAgency"
+                      style="width: 100%; object-fit: cover; border-radius: 50%"
-                src="/src/assets/icon/agency.png"
+                      @error="defaultAvatarUrl"
-                alt=""
+                    />
-                width="30%"
+                  </div>
-                style="display: block"
+                  <!-- 个人信息 -->
-              />
+                  <div style="flex: 1">
-              <img
+                    <div style="margin: 0 0 4px 0; font-weight: 700">
-                v-if="selectedPayee.hasSalary"
+                      {{ selectedPayee.name || '' }}
-                src="/src/assets/icon/RA.png"
+                    </div>
-                alt=""
+                    <div style="margin: 0; font-size: 0.9em; font-weight: 500">
-                width="30%"
+                      ID: {{ selectedPayee.account || '' }}
-              />
+                    </div>
+                  </div>
+                  <!-- 换人按钮 -->
+                  <button
+                    style="
+                      border-radius: 12px;
+                      background: linear-gradient(
+                        152deg,
+                        rgba(198, 112, 255, 0.6) 7.01%,
+                        rgba(119, 38, 255, 0.6) 92.99%
+                      );
+                      border: none;
+                      font-weight: 500;
+                      padding: 2px 8px;
+                    "
+                    @click="searchPayee"
+                  >
+                    Change
+                  </button>
+                </div>
+                <!-- 身份图标 -->
+                <div style="margin-left: 50px; display: flex; gap: 5px">
+                  <img
+                    v-if="selectedPayee.isHost"
+                    src="/src/assets/icon/host.png"
+                    alt=""
+                    width="30%"
+                  />
+                  <img
+                    v-if="selectedPayee.isAgency"
+                    src="/src/assets/icon/agency.png"
+                    alt=""
+                    width="30%"
+                    style="display: block"
+                  />
+                  <img
+                    v-if="selectedPayee.hasSalary"
+                    src="/src/assets/icon/RA.png"
+                    alt=""
+                    width="30%"
+                  />
+                </div>
+              </div>
+
+              <!-- 空状态 - 默认显示 -->
+              <div
+                v-else
+                style="
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  border-radius: 12px;
+                  background: rgba(255, 255, 255, 0.2);
+                  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+                  backdrop-filter: blur(32px);
+                  padding: 12px 0;
+                "
+              >
+                <div
+                  style="
+                    font-weight: 590;
+                    padding: 16px;
+
+                    border-radius: 8px;
+                    background: rgba(255, 255, 255, 0.2);
+                    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+                    backdrop-filter: blur(32px);
+                  "
+                  @click="searchPayee"
+                >
+                  Select
+                </div>
+              </div>
+
+              <!-- 转账金额选择 -->
+              <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
+                <div
+                  v-for="coin in coinOptions"
+                  :key="coin.id"
+                  @click="selectCoin(coin)"
+                  :class="['coin-item', { selected: selectedCoin === coin.id }]"
+                >
+                  <img src="/src/assets/icon/dollar.png" alt="" style="width: 40%" />
+                  <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
+                </div>
+              </div>
+
+              <!-- 转账按钮 -->
+              <div style="display: flex; justify-content: center; align-items: center">
+                <div
+                  style="
+                    width: 70%;
+                    padding: 12px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 32px;
+                    background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+                    font-weight: 590;
+                  "
+                  @click="transfer"
+                  :disabled="!selectedCoin || !selectedPayee.value?.id"
+                >
+                  Transfer
+                </div>
+              </div>
             </div>
+          </transition>
+
+          <!-- 兑换金币 -->
+          <div
+            style="display: flex; justify-content: space-between; align-items: center"
+            @click="drawerShowBt('exchange')"
+          >
+            <div>Exchange Gold Coins</div>
+            <img
+              src="/src/assets/icon/arrowWhite.png"
+              alt=""
+              style="width: 1em; display: block; transition: all 0.2s ease"
+              :class="{ rotated: exchangeShow }"
+            />
           </div>
-          <!-- 空状态 - 默认显示 -->
+
-          <div style="display: flex; justify-content: center; align-items: center">
+          <!-- 兑换金币抽屉 -->
+          <transition name="drawer">
             <div
+              v-if="exchangeShow"
               style="
-                font-weight: 590;
+                background-color: transparent;
-                padding: 16px;
-
-                border-radius: 12px;
-                background: rgba(255, 255, 255, 0.2);
-                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
-                backdrop-filter: blur(32px);
-              "
-              @click="searchPayee"
-            >
-              Search
-            </div>
-          </div>
-
-          <!-- 转账金额选择 -->
-          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
-            <div
-              v-for="coin in coinOptions"
-              :key="coin.id"
-              @click="selectCoin(coin)"
-              :class="['coin-item', { selected: selectedCoin === coin.id }]"
-            >
-              <img src="/src/assets/icon/dollar.png" alt="" style="width: 40%" />
-              <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
-            </div>
-          </div>
-
-          <!-- 转账按钮 -->
-          <div style="display: flex; justify-content: center; align-items: center">
-            <div
-              style="
-                width: 70%;
-                padding: 12px;
                 display: flex;
-                justify-content: center;
+                flex-direction: column;
-                align-items: center;
+                gap: 12px;
-                border-radius: 32px;
-                background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
-                font-weight: 590;
               "
-              @click="transfer"
-              :disabled="!selectedCoin || !selectedPayee.value?.id"
             >
-              Transfer
+              <!-- 转账金额选择 -->
+              <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
+                <div
+                  v-for="coin in coinOptions"
+                  :key="coin.id"
+                  @click="selectCoin(coin)"
+                  :class="['coin-item', { selected: selectedCoin === coin.id }]"
+                >
+                  <img src="/src/assets/icon/coin.png" alt="" style="width: 40%" />
+                  <div style="font-size: 0.7em">{{ coin.amount }} coins x1</div>
+                  <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
+                </div>
+              </div>
+
+              <!-- 转账按钮 -->
+              <div style="display: flex; justify-content: center; align-items: center">
+                <div
+                  style="
+                    width: 70%;
+                    padding: 12px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 32px;
+                    background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+                    font-weight: 590;
+                  "
+                  :disabled="!selectedCoin || !selectedPayee.value?.id"
+                >
+                  Exchange
+                </div>
+              </div>
             </div>
+          </transition>
+
+          <!-- 提取现金 -->
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div>Go to withdraw</div>
+            <img src="/src/assets/icon/arrowWhite.png" alt="" style="width: 1em; display: block" />
           </div>
         </div>
       </div>
@@ -374,7 +481,7 @@
           "
         >
           <div style="font-weight: 590">Current raffle tickets:{{ rollTimes }}</div>
-          <div style="font-weight: 590; font-size: 0.9em">History</div>
+          <div style="font-weight: 590; font-size: 0.9em" @click="historyShow = true">History</div>
         </div>
 
         <!-- 任务列表 -->
@@ -515,7 +622,8 @@
         "
         @click.stop
       >
-        <div style="position: relative; width: 90%">
+        <!-- 抽奖结果 -->
+        <div v-if="resultShow" style="position: relative; width: 90%">
           <img :src="images.rewardBg" alt="" width="100%" style="display: block" />
           <div
             style="
@@ -601,6 +709,77 @@
             />
           </div>
         </div>
+
+        <!-- 中奖历史 -->
+        <div v-if="historyShow" style="position: relative; width: 90%">
+          <img
+            src="/src/assets/images/Lottery/historyBg.png"
+            alt=""
+            width="100%"
+            style="display: block"
+          />
+          <img
+            src="/src/assets/images/Lottery/cancel.png"
+            alt=""
+            style="
+              display: block;
+              width: 10vw;
+              position: absolute;
+              top: 4vw;
+              right: 4vw;
+              z-index: 99999;
+            "
+            @click="closedPopup"
+          />
+          <div style="position: absolute; inset: 0; padding: 20% 3% 3%">
+            <div
+              style="
+                width: 100%;
+                height: 100%;
+                overflow-y: auto;
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+              "
+              class="scrollbar"
+            >
+              <div
+                v-for="value in 10"
+                style="
+                  border-radius: 12px;
+                  background: rgba(255, 255, 255, 0.2);
+                  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+                  backdrop-filter: blur(32px);
+
+                  display: flex;
+                  padding: 12px;
+                  justify-content: space-between;
+                  align-items: center;
+                "
+              >
+                <div style="display: flex; align-items: center; gap: 4px">
+                  <img
+                    src="/src/assets/icon/coin.png"
+                    alt=""
+                    style="width: 10vw; object-fit: cover; display: block; aspect-ratio: 1/1"
+                  />
+                  <div style="font-weight: 590; font-size: 0.9em">100000 coins</div>
+                  <div style="font-weight: 590; font-size: 0.9em">x1</div>
+                </div>
+                <div style="font-weight: 510; font-size: 0.8em">2025.08.01 10:59:59</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 帮助弹窗 -->
+        <div v-if="helpShow" style="position: relative; width: 90%">
+          <img :src="images.helpInfo" alt="" width="100%" style="display: block" />
+          <div
+            style="position: absolute; width: 8%; aspect-ratio: 1/1; top: 7%; right: 7%"
+            @click="closedPopup"
+          ></div>
+        </div>
       </div>
     </maskLayer>
   </div>
@@ -620,9 +799,6 @@ import {
   getAppHeaderInfo,
 } from '@/utils/appConnectionManager.js'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
-import GeneralHeader from '@/components/GeneralHeader.vue'
-import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
-import TopUser from '@/components/WeeklyStar/topUser.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 import { useDebounce, useThrottle } from '@/utils/useDebounce'
 import { getMemberProfile } from '@/api/wallet'
@@ -668,18 +844,42 @@ const result = ref([]) // 抽奖结果
 const resultShowIndex = ref(0)
 
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
-const maskLayerShow = ref(false)
+
+const resultShow = ref(false)
+const helpShow = ref(false)
+const historyShow = ref(false)
+const maskLayerShow = computed(() => {
+  return helpShow.value || resultShow.value || historyShow.value
+})
+
 const rankShow = ref(true)
 const incomeShow = ref(false)
 const lotteryShow = ref(false)
 
+const transferShow = ref(false)
+const exchangeShow = ref(false)
+const withdrawShow = ref(false)
+
 const selectedCoin = ref(null)
 
+const appConnected = ref(false)
+const headerInfo = ref({})
+
+// 抽屉展示
+const drawerShowBt = (type) => {
+  transferShow.value = type == 'transfer' ? !transferShow.value : false
+  exchangeShow.value = type == 'exchange' ? !exchangeShow.value : false
+  withdrawShow.value = type == 'withdraw' ? !withdrawShow.value : false
+  selectedCoin.value = null
+}
+
 // 点击展示主体内容
 const handleBt = (type) => {
   rankShow.value = type == 'Rank' ? true : false
   incomeShow.value = type == 'Income' ? true : false
   lotteryShow.value = type == 'Lottery' ? true : false
+  drawerShowBt('') // 收起抽屉
+  selectedCoin.value = null // 清除选择币种
 }
 
 const taskList = ref([
@@ -697,7 +897,7 @@ const taskList = ref([
 
 // 选中的收款人
 const selectedPayee = ref({
-  id: null,
+  id: 1,
   account: '3232131',
   name: 'asdfasdfasdfas',
   avatar: '',
@@ -787,7 +987,9 @@ const transfer = async () => {
 }
 
 const closedPopup = () => {
-  maskLayerShow.value = false
+  resultShow.value = false
+  helpShow.value = false
+  historyShow.value = false
   result.value = []
   resultShowIndex.value = 0
 }
@@ -872,11 +1074,134 @@ const sweepstakes = async (consecutive) => {
       result.value.push(item)
     }
     rollTimes.value -= consecutive
-    maskLayerShow.value = true
+    resultShow.value = true
+  }
+}
+
+/**
+ * 连接APP并获取认证信息（优化版 - 仅专注连接）
+ */
+const connectToApp = async () => {
+  console.group('🔗 APP Connection Process')
+  console.debug('🚀 Starting APP connection...')
+
+  try {
+    // 检查是否在APP环境中
+    if (!isInApp()) {
+      console.debug('🌐 Browser environment detected')
+      appConnected.value = true
+      console.groupEnd()
+
+      // 触发连接成功回调
+      // getUserInfo()
+
+      return { success: true, environment: 'browser' }
+    }
+
+    // 检查是否已经连接且未过期
+    if (isAppConnected()) {
+      console.debug('✅ APP already connected and valid')
+      appConnected.value = true
+
+      // 使用缓存的头部信息
+      const cachedHeaderInfo = getAppHeaderInfo()
+      if (cachedHeaderInfo) {
+        headerInfo.value = cachedHeaderInfo
+        console.debug('🔧 Using cached HTTP headers')
+      }
+
+      console.groupEnd()
+
+      // 触发连接成功回调
+      // getUserInfo()
+
+      return { success: true, environment: 'app', fromCache: true }
+    }
+
+    // 检查是否有正在进行的连接
+    if (appConnectionManager.isConnecting()) {
+      console.debug('⏳ Connection already in progress, waiting...')
+      await appConnectionManager.getConnectionPromise()
+      appConnected.value = true
+      console.debug('✅ Connected via existing process')
+      console.groupEnd()
+
+      // 触发连接成功回调
+      // getUserInfo()
+
+      return { success: true, environment: 'app', fromCache: true }
+    }
+
+    // 建立新的APP连接
+    console.debug('📱 Establishing new APP connection...')
+
+    const connectionResult = await new Promise((resolve, reject) => {
+      const connectionPromise = new Promise((connectResolve, connectReject) => {
+        connectApplication(async (access) => {
+          try {
+            const result = parseAccessOrigin(access)
+
+            if (result.success) {
+              // 解析头部信息
+              headerInfo.value = parseHeader(result.data)
+
+              // 设置HTTP请求头
+              console.debug('🔧 Setting HTTP headers...')
+              await setHttpHeaders(headerInfo.value)
+
+              // 标记连接成功
+              appConnected.value = true
+              appConnectionManager.setConnected(headerInfo.value)
+
+              console.debug('🎉 APP connection established successfully')
+              connectResolve({ success: true, environment: 'app', fromCache: false })
+            } else {
+              console.error('❌ Failed to parse access origin:', result.error)
+              appConnectionManager.reset()
+              connectReject(new Error(result.error))
+            }
+          } catch (error) {
+            console.error('❌ Connection process failed:', error)
+            appConnectionManager.reset()
+            connectReject(error)
+          }
+        })
+      })
+
+      // 设置连接状态
+      appConnectionManager.setConnecting(connectionPromise)
+
+      connectionPromise.then(resolve).catch(reject)
+    })
+
+    console.debug('✅ Connection completed successfully')
+    console.groupEnd()
+
+    // 触发连接成功回调
+    // getUserInfo()
+
+    return connectionResult
+  } catch (error) {
+    console.error('❌ Connection failed:', error)
+    appConnected.value = false
+    console.groupEnd()
+
+    // 触发连接失败回调
+    // if (onConnectionFailed) {
+    //   onConnectionFailed(error)
+    // }
+
+    // 连接失败的特殊处理
+    if (error.message && error.message.includes('parse access')) {
+      router.push({ path: '/not_app', query: { message: error.message } })
+    }
+
+    return { success: false, error: error.message }
   }
 }
 
 onMounted(() => {
+  connectToApp()
   isInAppEnvironment.value = isInApp()
 })
 </script>
@@ -897,6 +1222,10 @@ onMounted(() => {
   position: relative;
 }
 
+.scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 .active-prize {
   border-radius: 8px;
   box-shadow: 0 51px 80px 0 rgba(56, 253, 182, 0.49), 0 21.307px 33.422px 0 rgba(56, 253, 182, 0.35),
@@ -930,6 +1259,21 @@ onMounted(() => {
   transform: scale(0.98);
 }
 
+.rotated {
+  transform: rotate(90deg);
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  transform: translateY(-5px);
+  opacity: 0;
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;