feat(革命日): 优化代码和样式
This commit is contained in:
hzj
parent
d3a657e5a0
commit
b989beccba
@ -136,11 +136,20 @@
|
||||
v-show="rankingShow"
|
||||
style="position: relative; width: 90%; left: 50%; transform: translateX(-50%)"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
inset: 2;
|
||||
background: radial-gradient(50% 50% at 50% 50%, #10614b 0%, #053126 100%);
|
||||
z-index: 1;
|
||||
"
|
||||
></div>
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 前三名 -->
|
||||
<div style="position: relative">
|
||||
<!-- 头像框 -->
|
||||
<img :src="images.RankingMain" alt="" width="100%" style="display: block" />
|
||||
<!-- 前3名 -->
|
||||
<!-- 用户信息 -->
|
||||
<div style="position: absolute; inset: 0; padding: 18% 5% 2%">
|
||||
<div style="margin-top: 3%">
|
||||
<!-- 第一 -->
|
||||
@ -349,7 +358,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 5%;
|
||||
padding: 2% 5% 0;
|
||||
"
|
||||
>
|
||||
<div
|
||||
@ -362,7 +371,8 @@
|
||||
:src="myRanking.userAvatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
width: 30%;
|
||||
display: block;
|
||||
width: 25%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
@ -371,7 +381,7 @@
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<!-- 名称 -->
|
||||
<div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
|
||||
<div style="display: flex; flex-direction: column; width: calc(75% - 24px - 20%)">
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
@ -502,19 +512,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
connectApplication,
|
||||
parseAccessOrigin,
|
||||
parseHeader,
|
||||
setHttpHeaders,
|
||||
isInApp,
|
||||
viewUserInfo,
|
||||
} from '@/utils/appBridge.js'
|
||||
import {
|
||||
appConnectionManager,
|
||||
isAppConnected,
|
||||
getAppHeaderInfo,
|
||||
} from '@/utils/appConnectionManager.js'
|
||||
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
|
||||
import TopUser from '../RevolutionUnityDay/topUser.vue'
|
||||
@ -528,7 +526,7 @@ import {
|
||||
getMyWeekStarRanking,
|
||||
getHistoryTopOne,
|
||||
} from '@/api/weeklyStar.js'
|
||||
import { getWeekTopList, getThisWeekRewardsAndGifts } from '@/api/topList.js'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
|
||||
// vite动态批量导入图片
|
||||
const imageModules = import.meta.glob('@/assets/images/Activities/revolution/*.{png,jpg,svg}', {
|
||||
@ -542,126 +540,6 @@ const images = Object.fromEntries(
|
||||
})
|
||||
)
|
||||
|
||||
const appConnected = ref(false)
|
||||
const headerInfo = ref({})
|
||||
|
||||
/**
|
||||
* 连接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 (error.message && error.message.includes('parse access')) {
|
||||
// router.push({ path: '/not_app', query: { message: error.message } })
|
||||
}
|
||||
|
||||
return { success: false, error: error.message }
|
||||
}
|
||||
}
|
||||
|
||||
const userInfo = ref({})
|
||||
|
||||
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||||
@ -806,7 +684,7 @@ const resetPage = () => {
|
||||
|
||||
historyIndex.value = 0 //历史榜首重置展示当前
|
||||
|
||||
updatePageData() // 刷新页面数据
|
||||
initData() // 刷新页面数据
|
||||
}
|
||||
|
||||
// 格式化奖励的展示信息
|
||||
@ -869,28 +747,6 @@ const getMyThisWeekRanking = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周奖励
|
||||
// const getThisWeekRewards = async () => {
|
||||
// const resThisWeekRewardsAndGifts = await getThisWeekRewardsAndGifts()
|
||||
// console.log('resThisWeekRewardsAndGifts:', resThisWeekRewardsAndGifts)
|
||||
// if (resThisWeekRewardsAndGifts.status && resThisWeekRewardsAndGifts.body) {
|
||||
// rewardsList.value = [
|
||||
// {
|
||||
// rankRange: '1',
|
||||
// rewards: resThisWeekRewardsAndGifts.body.butOneRewards || [],
|
||||
// },
|
||||
// {
|
||||
// rankRange: '2',
|
||||
// rewards: resThisWeekRewardsAndGifts.body.butTwoRewards || [],
|
||||
// },
|
||||
// {
|
||||
// rankRange: '3',
|
||||
// rewards: resThisWeekRewardsAndGifts.body.butThreeRewards || [],
|
||||
// },
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
|
||||
// 获取本周礼物
|
||||
const getThisWeekGifts = async () => {
|
||||
const resThisWeekGifts = await getWeekGifts('THIS_WEEK')
|
||||
@ -910,7 +766,8 @@ const getThisWeekRewards = async () => {
|
||||
}
|
||||
|
||||
// 刷新页面数据
|
||||
const updatePageData = () => {
|
||||
const initData = () => {
|
||||
getUserInfo()
|
||||
getThisWeekRanking() // 获取本周排名
|
||||
getHistoryRankingTop1() // 获取历史top1
|
||||
getThisWeekRewards() // 获取本周奖励
|
||||
@ -932,16 +789,22 @@ const observer = new IntersectionObserver((entries) => {
|
||||
})
|
||||
})
|
||||
|
||||
// 使用工具函数连接APP
|
||||
const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
// 连接成功回调
|
||||
initData() //初始化数据
|
||||
})
|
||||
}
|
||||
|
||||
// 组件挂载时检测环境
|
||||
onMounted(() => {
|
||||
connectToApp()
|
||||
connectToAppHandler()
|
||||
isInAppEnvironment.value = isInApp()
|
||||
|
||||
getCountdown()
|
||||
timer = setInterval(getCountdown, 1000) //每秒更新
|
||||
|
||||
updatePageData() // 刷新页面数据
|
||||
|
||||
// 监听加载模块
|
||||
if (RankingLoadmore.value) {
|
||||
observer.observe(RankingLoadmore.value)
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 60%;
|
||||
border-radius: 40px;
|
||||
border: 0.64px solid #ffdf36;
|
||||
background: linear-gradient(
|
||||
@ -76,7 +77,6 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{ width: isTopOne ? '60%' : '50%' }"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/icon/coin.png"
|
||||
@ -147,30 +147,34 @@ const defaultAvatarUrl = (e) => {
|
||||
}
|
||||
|
||||
.top1Text {
|
||||
font-size: 12px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 10px;
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.top1Text {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.top1Text {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user