chore(斋月打榜活动): 排行榜名称展示调整
This commit is contained in:
hzj
parent
7447a5e2aa
commit
c531691fae
@ -330,18 +330,60 @@
|
||||
|
||||
<!-- 名称、id -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
<!-- 滚动名称 -->
|
||||
<itemCenter
|
||||
style="width: 30vw; height: 10vw; min-width: 0"
|
||||
:imgUrl="imageUrl('userNameBorder')"
|
||||
:contentStyle="`padding:0;`"
|
||||
:lazy="true"
|
||||
>
|
||||
{{ listItem?.userName }}
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<div
|
||||
style="
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<!-- 滚动容器 -->
|
||||
<div
|
||||
v-if="isTextOverflow(listItem?.userName || '')"
|
||||
class="scroll-wrapper"
|
||||
>
|
||||
<!-- 2套内容 -->
|
||||
<div class="scroll-content" v-for="value in 2">
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 860;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{ listItem?.userName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 860;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{ listItem?.userName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- ID -->
|
||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||
{{ $t('user_id_prefix') }}
|
||||
{{ listItem?.specialAccount || listItem?.account }}
|
||||
@ -600,22 +642,20 @@
|
||||
<!-- 抽奖按钮 -->
|
||||
<div style="display: flex; justify-content: center; gap: 4vw" class="drawBts">
|
||||
<!-- 单抽 -->
|
||||
<itemCenter
|
||||
style="width: 45vw"
|
||||
:imgUrl="imageUrl('draw1BtBg')"
|
||||
<img
|
||||
:src="imageUrl(getImgName('draw1BtBg'))"
|
||||
alt=""
|
||||
style="width: 45vw; display: block; object-fit: cover"
|
||||
@click="sweepstakes(1)"
|
||||
>
|
||||
<div style="font-size: 2em; font-weight: 600">1 Spin</div>
|
||||
</itemCenter>
|
||||
/>
|
||||
|
||||
<!-- 10连抽 -->
|
||||
<itemCenter
|
||||
style="width: 45vw"
|
||||
:imgUrl="imageUrl('draw10BtBg')"
|
||||
<img
|
||||
:src="imageUrl(getImgName('draw10BtBg'))"
|
||||
alt=""
|
||||
style="width: 45vw; display: block; object-fit: cover"
|
||||
@click="sweepstakes(10)"
|
||||
>
|
||||
<div style="font-size: 2em; font-weight: 600">10 Spin</div>
|
||||
</itemCenter>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 总抽奖次数 -->
|
||||
@ -1927,7 +1967,7 @@ const clickReward = (item) => {
|
||||
const searchPayee = () => {
|
||||
router.push({
|
||||
path: '/search-payee',
|
||||
query: { from: '/new-year', activeAction: 'incomeShow' },
|
||||
query: { from: '/lucky-dollars-season3', activeAction: 'incomeShow' },
|
||||
})
|
||||
}
|
||||
|
||||
@ -1936,6 +1976,26 @@ const goToWithdraw = () => {
|
||||
router.push({ path: '/cash-out', query: { activityId: '2005571533988298753' } })
|
||||
}
|
||||
|
||||
// 判断文本是否溢出（需要滚动）
|
||||
const isTextOverflow = (text) => {
|
||||
// 创建临时元素来测量文本宽度
|
||||
const tempDiv = document.createElement('div')
|
||||
tempDiv.style.position = 'absolute'
|
||||
tempDiv.style.fontSize = '1em'
|
||||
tempDiv.style.fontWeight = '860'
|
||||
tempDiv.textContent = text
|
||||
document.body.appendChild(tempDiv) // 将临时元素添加到文档中
|
||||
|
||||
const containerWidth = window.innerWidth * 0.3 // 所在容器宽度
|
||||
const textWidth = tempDiv.getBoundingClientRect().width
|
||||
console.log(`"${text}"的宽度为 ${textWidth}px，容器宽度为 ${containerWidth}px`)
|
||||
|
||||
document.body.removeChild(tempDiv) // 删除临时元素
|
||||
|
||||
// 如果文本宽度超过容器宽度，则需要滚动
|
||||
return textWidth > containerWidth
|
||||
}
|
||||
|
||||
// 转账金币选项
|
||||
const coinOptions = ref([
|
||||
{ id: 1, amount: 10500, price: 1 },
|
||||
@ -2254,7 +2314,7 @@ const initializePayee = () => {
|
||||
const savedPayee = getSelectedPayee()
|
||||
if (savedPayee) {
|
||||
Object.assign(selectedPayee.value, savedPayee)
|
||||
handleBt('withdraw')
|
||||
handleBt('withdrawal')
|
||||
drawerShowBt('transfer')
|
||||
}
|
||||
}
|
||||
@ -2436,6 +2496,8 @@ const receiveRechargeBadge = async (rewards) => {
|
||||
// 刷新页面数据
|
||||
const initData = async () => {
|
||||
await Promise.all([
|
||||
getUserInfo(), //获取用户信息
|
||||
initializePayee(), //获取收款人信息
|
||||
getWinners(), //获取历史中奖用户
|
||||
getRanking(), //获取排行榜
|
||||
|
||||
@ -2445,8 +2507,6 @@ const initData = async () => {
|
||||
getConfigsBadgeInfo(), // 刷新累计抽奖-徽章信息
|
||||
getTaskList(), //获取任务列表
|
||||
getDrawRecords(), // 获取中奖记录
|
||||
|
||||
getUserInfo(), //获取用户信息
|
||||
])
|
||||
}
|
||||
|
||||
@ -2501,6 +2561,13 @@ const observer = new IntersectionObserver((entries) => {
|
||||
|
||||
// 组件挂载时检测环境
|
||||
onMounted(() => {
|
||||
console.log('route.query.activeAction:', route.query.activeAction)
|
||||
if (route.query.activeAction == 'incomeShow') {
|
||||
handleBt('withdrawal')
|
||||
} else {
|
||||
handleBt('ranking')
|
||||
}
|
||||
|
||||
connectToAppHandler()
|
||||
|
||||
startCountdown() //开启倒计时
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user