aslan-h5/src/views/Reward/RechargeReward.vue

<template>
  <div>
    <!-- Rewards0.png 使用相对定位容器 -->
    <div style="position: relative">
      <img :src="images.Rewards0" alt="" style="width: 100%; display: block" />
      <!-- 绝对定位的覆盖层，与 Rewards0.png 同级 -->
      <div
        style="
          position: absolute;
          inset: 35% 22%;
          height: 18%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
        "
      >
        <div style="display: grid; grid-template-columns: 4fr 6fr">
          <div style="width: 100%; aspect-ratio: 1/1; position: relative">
            <img
              :src="images.frame"
              alt=""
              style="width: 100%; display: block; aspect-ratio: 1/1; position: relative; z-index: 1"
            />
            <div
              style="
                position: absolute;
                inset: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 0;
              "
            >
              <img
                :src="userInfo.userAvatar || ''"
                alt=""
                style="
                  display: block;
                  width: 60%;
                  border-radius: 50%;
                  aspect-ratio: 1/1;
                  object-fit: cover;
                "
                @error="defaultAvatarUrl"
              />
            </div>
          </div>
          <div
            style="
              width: 100%;
              min-width: 0; /* 关键：允许在 flex 容器中正确截断 */
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            "
          >
            <div
              style="
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ userInfo.userNickname }}
            </div>
            <div
              style="
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              ID:{{ userInfo.account }}
            </div>
          </div>
        </div>
        <div class="textGold" style="font-size: 0.8em; font-weight: 700">
          Accumulated recharge:${{ userInfo.recharge }}
        </div>
        <div class="textGold" style="font-size: 0.7em; font-weight: 700">
          *Each user can only claim the reward for this event once.
        </div>
        <div class="textGold" style="font-size: 0.7em; font-weight: 900">
          *يمكن لكل مستخدم المطالبة بالمكافأة لهذا الحدث مرة واحدة فقط.
        </div>
      </div>
    </div>

    <!-- 其他图片直接引入 -->
    <img :src="images.Rewards1" alt="" style="width: 100%; display: block" />
    <img :src="images.Rewards2" alt="" style="width: 100%; display: block" />
    <img :src="images.Rewards3" alt="" style="width: 100%; display: block" />
    <img :src="images.Rewards4" alt="" style="width: 100%; display: block" />
    <img :src="images.Rewards5" alt="" style="width: 100%; display: block" />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { connectToApp } from '@/utils/appConnector.js'
import { getMemberProfile, getTotalRecharge } from '@/api/wallet'

const userInfo = ref({
  account: '',
  userNickname: '',
  userAvatar: '',
  recharge: '',
}) //个人信息

// 使用与Lottery.vue相同的方式导入图片
const imageModules = import.meta.glob('@/assets/images/RechargeReward/*.{jpg,png,svg}', {
  eager: true,
})
// 生成文件名映射对象（自动移除路径和扩展名）
const images = Object.fromEntries(
  Object.entries(imageModules).map(([path, module]) => {
    const fileName = path.split('/').pop().split('.')[0]
    return [fileName, module.default]
  })
)

//获取累积充值信息
const getTotalRechargeInfo = async () => {
  // 连接成功回调
  const resUserInfo = await getMemberProfile()
  if (resUserInfo.status && resUserInfo.body) {
    const res = await getTotalRecharge(resUserInfo.body.id)
    if (res.status && res.body) {
      console.log('resUserInfo:', resUserInfo.body)

      userInfo.value = {
        account: resUserInfo.body.account,
        userNickname: resUserInfo.body.userNickname,
        userAvatar: resUserInfo.body.userAvatar,
        recharge: res.body,
      }
    }
  }
}

// 出错头像
const defaultAvatarUrl = (e) => {
  console.log('头像资源出错')
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}

// 使用工具函数连接APP
const connectToAppHandler = async () => {
  await connectToApp(() => {
    getTotalRechargeInfo() //获取累积充值信息
  })
}

onMounted(() => {
  connectToAppHandler()
})
</script>

<style lang="scss" scoped>
* {
  color: white;
  font-family: 'SF Pro Text';
}

.textGold {
  background: linear-gradient(
    255deg,
    #b77c44 28.08%,
    #fee5bb 46.5%,
    #bf854a 67.95%,
    #fcdfb3 85.67%,
    #c0864b 102.89%,
    #fbe8d4 122.57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>