feat(新页面): 周星页面

src/components/WeeklyStar/itemCenter.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="position: relative; width: 100%">
+    <img :src="imgUrl" alt="" width="100%" style="display: block" />
+    <div
+      style="
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      "
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  imgUrl: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>

src/components/WeeklyStar/topUser.vue

@@ -0,0 +1,84 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative">
+      <img
+        :src="BorderImgUrl"
+        alt=""
+        width="100%"
+        style="display: block; position: relative; z-index: 2"
+      />
+      <!-- 头像 -->
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 65%;
+          z-index: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+      >
+        <div :style="{ width: isTopOne ? '50%' : '80%' }">
+          <img
+            :src="avatarUrl"
+            alt=""
+            width="100%"
+            style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+          />
+        </div>
+      </div>
+      <!-- 用户名和贡献值 -->
+      <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 35%; z-index: 3">
+        <div class="showText" style="height: 28%; font-weight: 860">{{ name }}</div>
+        <div class="showText" style="height: 37%; font-weight: 700">{{ distributionValue }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  isTopOne: {
+    type: Boolean,
+    default: true,
+  },
+
+  avatarUrl: {
+    type: String,
+    default: '/src/assets/images/WeeklyStar/defaultAvatar.png',
+  },
+
+  BorderImgUrl: {
+    type: String,
+    required: true,
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  distributionValue: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  font-family: 'SF Pro';
+  color: black;
+}
+
+.showText {
+  color: #fff;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/router/index.js

@@ -203,6 +203,12 @@ const router = createRouter({
       component: () => import('../views/TopList/TopList.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/weekly-star',
+      name: 'weekly-star',
+      component: () => import('../views/WeeklyStar/WeeklyStar.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 

src/utils/permissionManager.js

@@ -110,7 +110,8 @@ export const ROLE_PERMISSIONS = {
     PAGES.MAP, // 地图选择页面
     '/recharge',
     '/recharge-freight-agent',
-    '/top-list',
+    '/top-list', //排行榜
+    '/weekly-star', //每周明星
   ],
 
   // 加载页面

src/views/WeeklyStar/WeeklyStar.vue

@@ -0,0 +1,645 @@
+<template>
+  <div class="fullPage">
+    <div class="bg">
+      <!-- 状态栏占位区域（仅在APP中显示） -->
+      <div v-if="isInAppEnvironment" style="height: 30px"></div>
+
+      <!-- 帮助按钮 -->
+      <img
+        src="/src/assets/images/WeeklyStar/help.png"
+        alt=""
+        style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
+        @click="helpInfoShow = true"
+      />
+
+      <!-- history按钮 -->
+      <img
+        src="/src/assets/images/WeeklyStar/history.png"
+        alt=""
+        style="width: 20%; margin-top: 20px"
+        @click="historyShow = true"
+      />
+
+      <!-- gifts -->
+      <div
+        style="display: flex; justify-content: flex-end; width: 100%"
+        :style="{
+          marginTop: isInAppEnvironment
+            ? 'calc(65vw - 30px - 10vw - 10vw - 20px)'
+            : 'calc(65vw - 10vw - 10vw - 20px)',
+        }"
+      >
+        <img
+          src="/src/assets/images/WeeklyStar/gifts.png"
+          alt=""
+          style="width: 20%"
+          @click="giftsShow = true"
+        />
+      </div>
+
+      <!-- 倒计时 -->
+      <div style="display: flex; justify-content: center; margin-top: -10%">
+        <div style="width: 15%">
+          <itemCenter imgUrl="/src/assets/images/WeeklyStar/dayBg.png">
+            <div class="timeText">{{ Days }}D</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap" style="width: 6px"></div>
+        <div style="width: 15%">
+          <itemCenter imgUrl="/src/assets/images/WeeklyStar/hourAndMinBg.png">
+            <div class="timeText">{{ Hours }}</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap">:</div>
+        <div style="width: 15%">
+          <itemCenter imgUrl="/src/assets/images/WeeklyStar/hourAndMinBg.png">
+            <div class="timeText">{{ Minutes }}</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap">:</div>
+        <div style="width: 15%">
+          <itemCenter imgUrl="/src/assets/images/WeeklyStar/secBg.png">
+            <div class="timeText">{{ Second }}</div>
+          </itemCenter>
+        </div>
+      </div>
+
+      <!-- 切换按钮 -->
+      <div style="margin: 22% 0 8% 0; display: flex; justify-content: space-around">
+        <div style="width: 30%" @click="handleBt('Ranking')">
+          <itemCenter
+            :imgUrl="
+              rankingShow
+                ? '/src/assets/images/WeeklyStar/btActive.png'
+                : '/src/assets/images/WeeklyStar/btNoActive.png'
+            "
+          >
+            <div class="btTitle">Ranking</div>
+          </itemCenter>
+        </div>
+        <div style="width: 30%" @click="handleBt('Rewards')">
+          <itemCenter
+            :imgUrl="
+              rewardShow
+                ? '/src/assets/images/WeeklyStar/btActive.png'
+                : '/src/assets/images/WeeklyStar/btNoActive.png'
+            "
+          >
+            <div class="btTitle">Rewards</div>
+          </itemCenter>
+        </div>
+        <div style="width: 30%" @click="handleBt('Exchange')">
+          <itemCenter
+            :imgUrl="
+              exchargeShow
+                ? '/src/assets/images/WeeklyStar/btActive.png'
+                : '/src/assets/images/WeeklyStar/btNoActive.png'
+            "
+          >
+            <div class="btTitle">Exchange</div>
+          </itemCenter>
+        </div>
+      </div>
+
+      <!-- 展示内容 -->
+      <div>
+        <!-- Ranking -->
+        <div
+          v-show="rankingShow"
+          style="position: relative; width: 90%; left: 50%; transform: translateX(-50%)"
+        >
+          <!-- 背景板 -->
+          <div>
+            <img
+              src="/src/assets/images/WeeklyStar/RankingMain.png"
+              alt=""
+              width="100%"
+              style="display: block"
+            />
+            <img
+              src="/src/assets/images/WeeklyStar/RankingItem.png"
+              alt=""
+              width="100%"
+              style="display: block; margin-top: -2px"
+              v-for="value in showRanking.length - 1"
+              v-if="showRanking.length > 1"
+            />
+            <img
+              src="/src/assets/images/WeeklyStar/RankingBottomBorder.png"
+              alt=""
+              width="100%"
+              style="display: block; margin-top: -12%"
+            />
+          </div>
+
+          <!-- 主体内容 -->
+          <div
+            style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%"
+          >
+            <!-- 前3名 -->
+            <div style="margin-top: 3%">
+              <!-- 第一 -->
+              <div style="display: flex; justify-content: center">
+                <TopUser
+                  BorderImgUrl="/src/assets/images/WeeklyStar/topOne.png"
+                  name="aaa"
+                  distributionValue="111"
+                  style="width: 70%"
+                />
+              </div>
+              <!-- 第二三 -->
+              <div style="display: flex; justify-content: space-between; margin-top: -20%">
+                <TopUser
+                  :isTopOne="false"
+                  BorderImgUrl="/src/assets/images/WeeklyStar/topTwo.png"
+                  name="bbb"
+                  distributionValue="222"
+                  style="width: 35%"
+                />
+                <TopUser
+                  :isTopOne="false"
+                  BorderImgUrl="/src/assets/images/WeeklyStar/topThree.png"
+                  name="ccc"
+                  distributionValue="333"
+                  style="width: 35%"
+                />
+              </div>
+            </div>
+
+            <!-- 第四名开始 -->
+            <div v-for="listItem in showRanking" style="margin-top: 2%; position: relative">
+              <img
+                src="/src/assets/images/WeeklyStar/itemUser.png"
+                alt=""
+                width="100%;"
+                style="display: block"
+              />
+              <div
+                style="
+                  position: absolute;
+                  top: 0;
+                  bottom: 0;
+                  left: 0;
+                  right: 0;
+                  display: flex;
+                  align-items: center;
+                  padding: 0 5%;
+                "
+              >
+                <div style="width: 100%; display: flex; align-items: center">
+                  <div style="color: #edb247; font-weight: 700; width: 28px">
+                    {{ listItem.rank }}
+                  </div>
+                  <img
+                    src="/src/assets/icon/coin.png"
+                    alt=""
+                    style="
+                      width: 28%;
+                      margin: 0 8px;
+                      aspect-ratio: 1/1;
+                      border-radius: 50%;
+                      object-fit: cover;
+                    "
+                  />
+
+                  <div
+                    style="width: calc(72% - 28px - 26px); 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">ID:{{ listItem.account }}</div>
+                  </div>
+                </div>
+
+                <div style="display: flex; width: 30%; display: flex; align-items: center">
+                  <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
+                  <div style="color: #edb247; font-weight: 700">
+                    {{ listItem.quantity }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Rewards -->
+        <div
+          v-show="rewardShow"
+          style="display: flex; flex-direction: column; align-items: center; gap: 20px"
+        >
+          <!-- top模块 -->
+          <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 90%">
+            <!-- top背景图 -->
+            <img
+              src="/src/assets/images/WeeklyStar/topBg.png"
+              alt=""
+              style="width: 100%; display: block"
+            />
+            <!-- 标题 -->
+            <div
+              style="
+                position: absolute;
+                top: 8%;
+                left: 25%;
+                right: 25%;
+                height: 11%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+                font-weight: 860;
+              "
+              class="topTitle"
+            >
+              TOP{{ topIndex + 1 }}
+            </div>
+            <!-- 主体内容 -->
+            <div
+              style="
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                padding: 30% 5% 20%;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 10px;
+              "
+            >
+              <div v-for="gift in topItem" style="position: relative">
+                <!-- gift背景图 -->
+                <img
+                  src="/src/assets/images/WeeklyStar/giftItemBg.png"
+                  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="/src/assets/icon/coin.png" alt="" style="width: 50%; display: block" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Exchange -->
+        <div v-show="exchargeShow"></div>
+      </div>
+    </div>
+
+    <!-- 我的排名 -->
+    <div
+      style="
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        widows: 100vw;
+        background-color: #311300;
+        display: flex;
+        justify-content: center;
+        margin-top: 10px;
+        z-index: 999;
+      "
+    >
+      <img
+        src="/src/assets/images/WeeklyStar/myRankingBg.png"
+        alt=""
+        style="width: calc(100% - 1px); display: block"
+      />
+
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 8%;
+        "
+      >
+        <div style="width: 70%; display: flex; align-items: center">
+          <!-- 排名 -->
+          <div style="color: #edb247; font-weight: 700">999</div>
+          <!-- 头像 -->
+          <img
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="
+              width: 30%;
+              aspect-ratio: 1/1;
+              border-radius: 50%;
+              object-fit: cover;
+              margin: 0 12px;
+            "
+          />
+          <!-- 名称 -->
+          <div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
+            <div
+              style="
+                color: #fff;
+                font-weight: 860;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              "
+            >
+              aaaaaaaaaaaaaaaaaa
+            </div>
+          </div>
+        </div>
+
+        <!-- 贡献值 -->
+        <div style="display: flex; width: 30%; display: flex; align-items: center">
+          <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
+          <!-- 1:男,0:女 -->
+          <!-- <div
+            v-if="myRanking.userSex == 1"
+            style="color: #edb247; font-weight: 700; margin-left: 8px"
+          >
+            {{ myRanking.wealthQuantity }}
+          </div> -->
+          <div style="color: #edb247; font-weight: 700; margin-left: 8px">10000</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <!-- help弹窗 -->
+      <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
+        <img src="/src/assets/images/TopList/helpInfo.png" alt="" style="width: 100%" />
+      </div>
+
+      <!-- history弹窗 -->
+      <div></div>
+
+      <!-- gifts弹窗 -->
+      <div v-if="giftsShow" style="position: relative; margin: 20% 0" @click.stop>
+        <!-- 背景图 -->
+        <img
+          src="/src/assets/images/WeeklyStar/giftsBg.png"
+          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="value in gifts">
+            <!-- 礼物背景 -->
+            <div style="position: relative">
+              <img
+                src="/src/assets/images/WeeklyStar/giftItemBg.png"
+                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="/src/assets/icon/coin.png"
+                  alt=""
+                  style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+                />
+              </div>
+            </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">99999</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </maskLayer>
+  </div>
+</template>
+
+<script setup>
+import { isInApp } from '../../utils/appBridge.js'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
+import TopUser from '@/components/WeeklyStar/topUser.vue'
+import maskLayer from '../../components/MaskLayer.vue'
+
+const isInAppEnvironment = ref(false) // 检测是否在APP环境中
+const helpInfoShow = ref(false) //帮助模块
+const historyShow = ref(false) //历史模块
+const giftsShow = ref(false) //礼物模块
+
+const maskLayerShow = computed(() => {
+  return helpInfoShow.value || historyShow.value || giftsShow.value
+})
+
+// 倒计时
+const Days = ref(0)
+const Hours = ref(0)
+const Minutes = ref(0)
+const Second = ref(0)
+let timer = null
+
+const rankingShow = ref(true)
+const rewardShow = ref(false)
+const exchargeShow = ref(false)
+
+// 排行榜
+const Ranking = ref(
+  Array.from({ length: 5 }, () => ({
+    rank: 111,
+    userNickname: 'aaaaaaaaaaaaaa',
+    account: '8826602',
+    quantity: '111',
+  }))
+)
+
+// 展示用的榜单
+const showRanking = computed(() => {
+  return Ranking.value.filter((_, index) => index >= 3)
+})
+
+// 本周礼物
+const gifts = ref(
+  Array.from({ length: 3 }, () => ({
+    quantity: '111',
+  }))
+)
+
+// 奖励列表
+const rewardsList = ref(
+  Array.from({ length: 3 }, () =>
+    Array.from({ length: 4 }, () => ({
+      userNickname: 'aaa',
+    }))
+  )
+)
+
+// 关闭弹窗
+const closedPopup = () => {
+  helpInfoShow.value = false
+  historyShow.value = false
+  giftsShow.value = false
+}
+
+// 点击展示主体内容
+const handleBt = (type) => {
+  rankingShow.value = type == 'Ranking' ? true : false
+  rewardShow.value = type == 'Rewards' ? true : false
+  exchargeShow.value = type == 'Exchange' ? true : false
+}
+
+// 获取下周的时间戳
+const getNextMonday = () => {
+  const now = new Date() //当前时间
+  const day = now.getDay() //0周日6周六
+
+  // 计算到下周的所需天数
+  const dayToAdd = day === 1 ? 7 : (7 + 1 - day) % 7
+  const nextMonday = new Date(now) //以当前时间为基准，而不是重新获取时间
+
+  nextMonday.setDate(now.getDate() + dayToAdd) //增加到下周一那天
+  nextMonday.setHours(0, 0, 0, 0)
+
+  return nextMonday.getTime() //得到下周一00:00:00.000的时间戳
+}
+
+const targetTime = ref(getNextMonday()) // 闭包保存目标时间 (核心修正)
+
+// 格式化时间
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  let diff = targetTime.value - now
+
+  if (diff <= 0) {
+    targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
+    diff = targetTime.value - now
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+  Days.value = Math.floor(totalSeconds / (24 * 3600))
+  Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
+  Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
+  Second.value = formatTime(Math.floor(totalSeconds % 60))
+}
+
+// 组件挂载时检测环境
+onMounted(() => {
+  isInAppEnvironment.value = isInApp()
+
+  getCountdown()
+  timer = setInterval(getCountdown, 1000) //每秒更新
+})
+
+onUnmounted(() => {
+  clearInterval(timer) //摧毁计时器
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: black;
+  font-family: 'SF Pro';
+}
+
+.fullPage {
+  background-color: #311300;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url(../../assets/images/WeeklyStar/bg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.timeText {
+  color: #fff;
+  font-weight: 860;
+}
+
+.timeGap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btTitle {
+  color: #fff;
+  font-weight: 700;
+}
+
+.topTitle {
+  font-size: 1.2rem;
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>