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 18:15:10 +08:00
parent 187ec5c9b0
commit 64b4b2531e
3 changed files with 165 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/index.js
View File

@ -206,7 +206,7 @@ const router = createRouter({
{
path: '/weekly-star',
name: 'weekly-star',
component: () => import('../views/Activities/WeeklyStar/WeeklyStar.vue'),
component: () => import('../views/Ranking/WeeklyStar/WeeklyStar.vue'),
meta: { requiresAuth: true },
},
{

516
src/views/Activities/WeeklyStar/WeeklyStar.vue → src/views/Ranking/WeeklyStar/WeeklyStar.vue
View File

@ -142,66 +142,79 @@
</div>
<!-- 第四名开始 -->
<div
<itemCenter
v-for="listItem in showRanking"
style="margin-top: 3%; position: relative"
@click="viewUserInfo(listItem.userId)"
:imgUrl="images.itemUser"
:contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 4px;`"
>
<img :src="images.itemUser" alt="" width="100%;" style="display: block" />
<!-- 基本信息 -->
<div
style="
position: absolute;
inset: 0;
width: 75%;
min-width: 0;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 3%;
gap: 4px;
"
>
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
<div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
{{ listItem.rank }}
</div>
<img
:src="listItem.userAvatar || ''"
alt=""
style="
width: 20%;
margin: 0 2%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
<div style="width: calc(100% - 10% - 24%); display: flex; flex-direction: column">
<div
style="
color: #fff;
font-weight: 860;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
"
class="UserNickname"
>
{{ listItem.userNickname }}
</div>
<div style="color: #fff; font-weight: 590" class="UserNickname">
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: 30%" />
<div style="color: #edb247; font-weight: 700" class="UserNickname">
{{ listItem.quantity }}
<!-- 头像 -->
<img
v-smart-img
:src="listItem.userAvatar || ''"
alt=""
style="
width: 25%;
margin: 0 2%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
"
@error="defaultAvatarUrl"
/>
<!-- 名称、id -->
<div
style="
min-width: 0;
width: calc(100% - 15% - 25% - 8px);
display: flex;
flex-direction: column;
"
>
<div
style="
color: #fff;
font-weight: 860;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
class="UserNickname"
>
{{ listItem.userNickname }}
</div>
<div style="color: #fff; font-weight: 590" class="UserNickname">
ID:{{ listItem.account }}
</div>
</div>
</div>
</div>
<!-- 贡献值 -->
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
<img src="/src/assets/icon/coin.png" alt="" style="width: 30%" />
<div style="color: #edb247; font-weight: 700" class="UserNickname">
{{ listItem.quantity }}
</div>
</div>
</itemCenter>
<!-- 触发加载功能 -->
<div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
</div>
@ -238,10 +251,7 @@
<div
style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
padding: 30% 6% 13%;
display: grid;
grid-template-columns: repeat(2, 1fr);
@ -251,56 +261,21 @@
v-for="gift in topItem.propsGroup.activityRewardProps"
style="display: flex; flex-direction: column; align-items: center"
>
<div
style="
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-bottom: 3px;
"
>
<!-- gift背景图 -->
<img :src="images.giftItemBg" alt="" style="width: 90%; display: block" />
<div
style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- gift图 -->
<img
:src="gift.cover || ''"
alt=""
style="width: 50%; display: block"
@error="(e) => handleImageError(e, gift.type)"
/>
</div>
</div>
<div style="position: relative; width: 75%">
<img :src="images.btBg" alt="" width="100%" />
<div
style="
position: absolute;
top: 0;
bottom: 8%;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
"
>
<itemCenter :imgUrl="images.giftItemBg" style="width: 90%; margin-bottom: 3px">
<!-- gift图 -->
<img
:src="gift.cover || ''"
alt=""
style="width: 50%; display: block"
@error="(e) => handleImageError(e, gift.type)"
/>
</itemCenter>
<itemCenter :imgUrl="images.btBg" style="width: 75%">
<div style="font-weight: 700">
{{ showDetail(gift.type, gift.quantity) }}
</div>
</div>
</itemCenter>
</div>
</div>
</div>
@ -359,57 +334,21 @@
:key="goodsIndex"
style="display: flex; flex-direction: column; align-items: center"
>
<div
style="
position: relative;
display: flex;
justify-content: center;
align-items: center;
"
>
<img :src="images.giftItemBg" alt="" style="width: 100%; display: block" />
<div
style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- gift图 -->
<img
:src="goods.propsGroup.activityRewardProps[0].cover"
alt=""
style="width: 68%; display: block; margin-bottom: 7%"
/>
</div>
</div>
<itemCenter :imgUrl="images.giftItemBg">
<!-- gift图 -->
<img
:src="goods.propsGroup.activityRewardProps[0].cover"
alt=""
style="width: 68%; display: block; margin-bottom: 7%"
/>
</itemCenter>
<div class="needDebris">
Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
</div>
<div style="position: relative; width: 75%" @click="selectGood(goods)">
<img :src="images.btBg" alt="" width="100%" style="display: block" />
<div
style="
position: absolute;
top: 0;
bottom: 8%;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
"
class="needDebris"
>
Redeem
</div>
</div>
<itemCenter style="width: 75%" @click="selectGood(goods)" :imgUrl="images.btBg">
<div style="font-weight: 700" class="needDebris">Redeem</div>
</itemCenter>
</div>
</div>
</div>
@ -436,34 +375,52 @@
<div
style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8%;
padding: 4% 2%;
gap: 4px;
"
>
<div style="width: 70%; display: flex; justify-content: space-around; align-items: center">
<!-- 基本信息 -->
<div
style="
width: 79%;
min-width: 0;
display: flex;
justify-content: space-around;
align-items: center;
gap: 4px;
"
>
<!-- 排名 -->
<div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
<div style="width: 15%; display: flex; justify-content: center; align-items: center">
<div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
</div>
<!-- 头像 -->
<img
v-smart-img
:src="myRanking.userAvatar || ''"
alt=""
style="
width: 30%;
display: block;
width: 20%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
margin: 0 12px;
"
@error="defaultAvatarUrl"
/>
<!-- 名称 -->
<div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
<div
style="
min-width: 0;
width: calc(100% - 15% - 20% - 8px);
display: flex;
flex-direction: column;
"
>
<div
style="
color: #fff;
@ -480,8 +437,13 @@
</div>
<!-- 贡献值 -->
<div style="width: 30%; display: flex; justify-content: center; align-items: center">
<img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
<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">
{{ myRanking.quantity || 0 }}
</div>
@ -632,62 +594,38 @@
</div>
<!-- gifts弹窗 -->
<div v-if="giftsShow" style="position: relative; margin: 20% 0" @click.stop>
<!-- 背景图 -->
<img :src="images.giftsBg" alt="" style="width: 100%; display: block" />
<!-- 内容 -->
<div
style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 30% 5% 12%;
display: flex;
justify-content: space-between;
"
>
<!-- 礼物单元 -->
<div style="width: 30%" v-for="gift in gifts" :key="gift.id">
<!-- 礼物背景 -->
<div style="position: relative">
<img :src="images.giftItemBg" alt="" style="width: 100%; display: block" />
<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=""
style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
/>
</div>
</div>
<itemCenter
v-if="giftsShow"
style="margin: 20% 0"
@click.stop
:imgUrl="images.giftsBg"
:contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
>
<!-- 礼物单元 -->
<div style="width: 30%" v-for="gift in gifts" :key="gift.id">
<!-- 礼物背景 -->
<itemCenter :imgUrl="images.giftItemBg">
<!-- 礼物 -->
<img
:src="gift.giftPhoto"
alt=""
style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
/>
</itemCenter>
<!-- 礼物价值 -->
<div style="display: flex; justify-content: center">
<img
src="/src/assets/icon/coin.png"
alt=""
style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
/>
<div style="color: #fff; font-weight: 590; margin-left: 2px">
{{ gift.giftCandy }}
</div>
<!-- 礼物价值 -->
<div style="display: flex; justify-content: center">
<img
src="/src/assets/icon/coin.png"
alt=""
style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
/>
<div style="color: #fff; font-weight: 590; margin-left: 2px">
{{ gift.giftCandy }}
</div>
</div>
</div>
</div>
</itemCenter>
<!-- 交易商品弹窗 -->
<div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
@ -745,26 +683,13 @@
</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 itemCenter from '@/components/itemCenter.vue'
import TopUser from '@/components/WeeklyStar/topUser.vue'
import maskLayer from '@/components/MaskLayer.vue'
import { useDebounce, useThrottle } from '@/utils/useDebounce'
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
import { useThrottle } from '@/utils/useDebounce'
import { showWarning } from '@/utils/toast.js'
import { getMemberProfile } from '@/api/wallet'
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
import {
getWeekStarRanking,
getWeekRewards,
@ -775,6 +700,11 @@ import {
getExchangeGoods,
exchangeGood,
} from '@/api/weeklyStar.js'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'
import TopUser from './components/topUser.vue'
//vite动态批量导入图片
const imageModules = import.meta.glob('@/assets/images/WeeklyStar/*.{png,jpg,svg}', { eager: true })
// 生成文件名映射对象（自动移除路径和扩展名）
@ -785,129 +715,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 (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 }
}
updatePageData() // 刷新页面数据
})
}
const userInfo = ref({})
@ -1231,14 +1045,12 @@ const observer = new IntersectionObserver((entries) => {
// 组件挂载时检测环境
onMounted(() => {
connectToApp()
connectToAppHandler()
isInAppEnvironment.value = isInApp()
getCountdown()
timer = setInterval(getCountdown, 1000) //每秒更新
updatePageData() // 刷新页面数据
// 监听加载模块
if (RankingLoadmore.value) {
observer.observe(RankingLoadmore.value)

0
src/components/WeeklyStar/topUser.vue → src/views/Ranking/WeeklyStar/components/topUser.vue
View File