hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(总排行榜及其组件): 文件结构调整、样式更新

Browse Source
This commit is contained in:
hzj 2025-11-20 17:24:36 +08:00
parent 9d6a53340a
commit 187ec5c9b0
3 changed files with 164 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/index.js
View File

@ -200,7 +200,7 @@ const router = createRouter({
{
path: '/top-list',
name: 'top-list',
component: () => import('../views/Activities/KingAndQueen/TopList.vue'),
component: () => import('../views/Ranking/KingAndQueen/TopList.vue'),
meta: { requiresAuth: true },
},
{

448
src/views/Activities/KingAndQueen/TopList.vue → src/views/Ranking/KingAndQueen/TopList.vue
View File

@ -100,16 +100,14 @@
<!-- 刷新倒计时 -->
<div style="display: flex; justify-content: center; margin-top: 20px">
<!-- 天数 -->
<div style="width: 10%; position: relative; margin-right: 10px">
<img :src="images.dayBg" alt="" width="100%" style="display: block" />
<itemCenter :imgUrl="images.dayBg" style="width: 10%; margin-right: 10px">
<div class="time">{{ Days }}D</div>
</div>
</itemCenter>
<!-- 当天时间倒计时 -->
<div style="width: 23.75%; position: relative">
<img :src="images.timeBg" alt="" width="100%" style="display: block" />
<itemCenter :imgUrl="images.timeBg" style="width: 23.75%">
<div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
</div>
</itemCenter>
</div>
<!-- rewards -->
@ -119,57 +117,25 @@
<!-- 每周礼物 -->
<div style="display: flex; justify-content: center">
<div style="width: 100%; position: relative">
<img :src="images.eventGifts" alt="" style="width: 100%" />
<div
style="
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
"
>
<div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
<div
v-for="(gift, index) in gifts"
:key="index"
style="width: 30%; display: flex; flex-direction: column"
>
<div style="position: relative">
<img style="" :src="images.gift" alt="" width="100%" />
<div
style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
"
>
<img :src="gift.giftPhoto" alt="" width="50%" />
</div>
</div>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<img
src="/src/assets/icon/coin.png"
alt=""
style="width: 18%; aspect-ratio: 1/1"
/>
<div style="color: rgba(255, 255, 255, 1); font-weight: 590">
{{ gift.giftCandy }}
</div>
<itemCenter :imgUrl="images.eventGifts">
<div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
<div
v-for="(gift, index) in gifts"
:key="index"
style="width: 30%; display: flex; flex-direction: column"
>
<itemCenter :imgUrl="images.gift">
<img :src="gift.giftPhoto" alt="" width="50%" />
</itemCenter>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<img src="/src/assets/icon/coin.png" alt="" style="width: 18%; aspect-ratio: 1/1" />
<div style="color: rgba(255, 255, 255, 1); font-weight: 590">
{{ gift.giftCandy }}
</div>
</div>
</div>
</div>
</div>
</itemCenter>
</div>
<!-- 排行榜模块 -->
@ -196,84 +162,105 @@
<!-- 排行榜 -->
<div style="width: 100%">
<borderImg title="Ranking">
<div
style="margin: -2px 0; position: relative"
<itemCenter
:imgUrl="images['border-item-user']"
style="margin: -2px 0"
:contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 4px;`"
v-for="(listItem, index) in topList"
:key="index"
@click="viewUserInfo(listItem.userId)"
>
<img :src="images['border-item-user']" alt="" style="width: 100%; display: block" />
<!-- 基本信息 -->
<div
style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 75%;
min-width: 0;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 15%;
gap: 4px;
"
>
<div style="width: 80%; display: flex; align-items: center">
<div style="color: #edb247; font-weight: 700; width: 28px">
{{ listItem.rank }}
</div>
<div
style="
width: 24%;
aspect-ratio: 1/1;
border-radius: 50%;
margin: 0 5px;
background: linear-gradient(
to bottom,
rgba(255, 224, 60, 1),
rgba(255, 189, 19, 1)
);
display: flex;
justify-content: center;
align-items: center;
"
>
<img
:src="listItem.userAvatar || ''"
alt=""
style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
@error="defaultAvatarUrl"
/>
</div>
<div
style="width: calc(100% - 24% - 38px); display: flex; flex-direction: column"
>
<div
style="
color: #fff;
font-weight: 860;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
"
class="topUserNickname"
>
{{ listItem.userNickname }}
</div>
<div style="color: #fff; font-weight: 590" class="topUserNickname">
ID:{{ listItem.account }}
</div>
</div>
<!-- 排名 -->
<div
style="width: 15%; display: flex; justify-content: center; align-items: center"
>
<div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
</div>
<div style="display: flex; width: 20%; display: flex; align-items: center">
<img src="/src/assets/icon/coin.png" alt="" style="width: 25%" />
<div style="color: #edb247; font-weight: 700" class="topUserNickname">
{{ listItem.quantity }}
<!-- 头像 -->
<div
style="
width: 24%;
aspect-ratio: 1/1;
border-radius: 50%;
background: linear-gradient(
to bottom,
rgba(255, 224, 60, 1),
rgba(255, 189, 19, 1)
);
display: flex;
justify-content: center;
align-items: center;
"
>
<img
v-smart-img
:src="listItem.userAvatar || ''"
alt=""
style="
display: block;
width: 90%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
</div>
<!-- 名称 -->
<div
style="
min-width: 0;
width: calc(100% - 15% - 24% - 8px);
display: flex;
flex-direction: column;
"
>
<div
style="
width: 100%;
color: #fff;
font-weight: 860;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
class="topUserNickname"
>
{{ listItem.userNickname }}
</div>
<div style="color: #fff; font-weight: 590" class="topUserNickname">
ID:{{ listItem.account }}
</div>
</div>
</div>
</div>
<!-- 贡献值 -->
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
<img
v-smart-img
src="/src/assets/icon/coin.png"
alt=""
style="display: block; width: 30%; aspect-ratio: 1/1"
/>
<div style="color: #edb247; font-weight: 700" class="topUserNickname">
{{ listItem.quantity }}
</div>
</div>
</itemCenter>
<!-- 触发加载功能 -->
<div ref="kingListLoadmore" v-show="showKingLoading && visibleKingList"></div>
<!-- 触发加载功能 -->
@ -501,29 +488,15 @@
:key="rewardIndex"
style="width: 100%"
>
<div style="position: relative">
<img :src="images.gift" style="" alt="" width="100%" />
<div
style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
"
>
<img
:src="reward.cover || ''"
alt=""
width="50%"
style="aspect-ratio: 1/1"
@error="(e) => handleImageError(e, reward.type)"
/>
</div>
</div>
<itemCenter :imgUrl="images.gift">
<img
:src="reward.cover || ''"
alt=""
width="50%"
style="aspect-ratio: 1/1"
@error="(e) => handleImageError(e, reward.type)"
/>
</itemCenter>
<div
style="
@ -551,7 +524,7 @@
position: sticky;
bottom: 0;
left: 0;
widows: 100vw;
width: 100vw;
background-color: rgba(77, 30, 22, 1);
display: flex;
justify-content: center;
@ -566,21 +539,32 @@
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8%;
gap: 8px;
justify-content: space-around;
padding: 2% 2% 0;
gap: 4px;
"
>
<div style="width: 80%; display: flex; align-items: center">
<!-- 基本信息 -->
<div
style="
width: 75%;
min-width: 0;
display: flex;
justify-content: space-around;
align-items: center;
gap: 4px;
"
>
<!-- 排名 -->
<div style="color: #edb247; font-weight: 700">{{ myRanking.wealthRank || 0 }}</div>
<div style="width: 15%; display: flex; justify-content: center; align-items: center">
<div style="color: #edb247; font-weight: 700">{{ myRanking.wealthRank || 0 }}</div>
</div>
<!-- 头像 -->
<div
style="
width: 25%;
aspect-ratio: 1/1;
border-radius: 50%;
margin: 0 12px;
background: linear-gradient(to bottom, rgba(255, 224, 60, 1), rgba(255, 189, 19, 1));
display: flex;
@ -589,14 +573,29 @@
"
>
<img
v-smart-img
:src="myRanking.userAvatar || ''"
alt=""
style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
style="
display: block;
width: 90%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
</div>
<!-- 名称 -->
<div style="display: flex; flex-direction: column; width: calc(100% - 30px - 24px - 25%)">
<div
style="
min-width: 0;
width: calc(100% - 15% - 25% - 8px);
display: flex;
flex-direction: column;
"
>
<div
style="
color: #fff;
@ -611,7 +610,7 @@
</div>
</div>
<div style="width: 20%; display: flex; align-items: center; gap: 2px">
<div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px">
<img
src="/src/assets/icon/coin.png"
alt=""
@ -631,31 +630,23 @@
</template>
<script setup>
import {
connectApplication,
parseAccessOrigin,
parseHeader,
setHttpHeaders,
isInApp,
viewUserInfo,
} from '@/utils/appBridge.js'
import {
appConnectionManager,
isAppConnected,
getAppHeaderInfo,
} from '@/utils/appConnectionManager.js'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import borderImg from '@/components/TopList/borderImg.vue'
import maskLayer from '@/components/MaskLayer.vue'
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
import { useDebounce, useThrottle } from '@/utils/useDebounce'
import { connectToApp } from '@/utils/appConnector.js'
import {
getWeekTopList,
getWeekMyContribution,
getThisWeekRewardsAndGifts,
getHistoryTopOne,
} from '@/api/topList.js'
import { useDebounce, useThrottle } from '@/utils/useDebounce'
import { getMemberProfile } from '@/api/wallet'
import borderImg from './components/borderImg.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'
//vite动态批量导入图片
const imageModules = import.meta.glob('@/assets/images/TopList/*.{png,jpg,svg}', { eager: true })
// 生成文件名映射对象（自动移除路径和扩展名）
@ -666,124 +657,13 @@ 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()
// 触发连接成功回调
// 使用工具函数连接APP
const connectToAppHandler = async () => {
await connectToApp(() => {
// 连接成功回调
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 }
}
updatePageData() // 刷新页面数据
})
}
const userInfo = ref({})
@ -1066,13 +946,11 @@ const updatePageData = () => {
// 组件挂载时检测环境
onMounted(() => {
isInAppEnvironment.value = isInApp()
connectToApp()
connectToAppHandler()
getCountdown()
timer = setInterval(getCountdown, 1000) //每秒更新
updatePageData() // 刷新页面数据
if (kingListLoadmore.value) {
observer.observe(kingListLoadmore.value)
} //监控国王加载标志

0
src/components/TopList/borderImg.vue → src/views/Ranking/KingAndQueen/components/borderImg.vue
View File