mini-h5/src/pages/team/index.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view class="w-full min-h-screen bg-bgc flex flex-col items-center">
    <view class="w-full bg-cardlight rounded-20rpx flex flex-col items-center">
      <view
        class="text-[#fff] w-690rpx flex flex-col justify-center text-center text-[48rpx] font-700 mt-30rpx"
      >
        <text>{{ $t('team.InviteFriends') }}</text>
        <text>
          {{ $t('team.GetMore') }}
          <text class="text-primary">
            {{ $t('team.BH Coin') }}
          </text>
        </text>
      </view>
      <view class="w-690rpx flex items-center mt-35rpx relative">
        <text class="text-center text-white flex-1">
          {{ $t('team.MyTeam') }}
        </text>
        <image
          @click="errorModel = true"
          src="@/static/images/team/error.png"
          class="w-40rpx h-40rpx absolute right-60rpx"
          mode="scaleToFill"
        />
      </view>
      <view class="w-690rpx flex items-center justify-center mt-15rpx">
        <image src="@/static/images/team/huoban.png" class="w-224rpx h-180rpx" mode="scaleToFill" />
      </view>
      <view
        class="w-690rpx flex items-center justify-center mt-15rpx h-172rpx bg-cards rounded-20rpx"
      >
        <view class="w-320rpx h-120rpx text-primary flex flex-col items-center">
          <text class="w-160rpx h-60rpx text-32rpx font-700 flex items-center justify-center">
            {{ $t('team.Total') }}
          </text>
          <view class="flex items-center mt-17rpx">
            <image
              src="@/static/images/team/teamcat.png"
              class="w-40rpx h-30rpx mr-10rpx"
              mode="scaleToFill"
            />
            <text class="">2</text>
          </view>
        </view>
        <view class="w-320rpx h-120rpx text-primary flex flex-col items-center">
          <view
            @click="receiveshow = true"
            class="w-160rpx h-60rpx bg-primary text-26rpx font-700 text-textc rounded-20rpx flex items-center justify-center"
          >
            {{ $t('team.Reward') }}
          </view>
          <view class="flex items-center mt-17rpx">
            <image
              src="@/static/images/team/cat.png"
              class="w-23rpx h-30rpx mr-18.5rpx"
              mode="scaleToFill"
            />
            <text class="">2</text>
          </view>
        </view>
      </view>
      <view
        class="w-650rpx h-130rpx bg-cards rounded-20rpx mt-15rpx flex items-center justify-around"
      >
        <image
          src="@/static/images/team/a.png"
          class="w-100rpx h-100rpx mx-20rpx"
          mode="scaleToFill"
        />
        <view class="flex-1">
          <text class="text-[#fff] text-28rpx font-700">{{ $t('team.TotalA') }}</text>
          <view class="flex text-[#fff] items-center mt-10rpx">
            <view class="flex items-center">
              <image
                src="@/static/images/trophy/jinbi.png"
                mode="scaleToFill"
                class="w-30rpx h-30rpx"
              />
              <text class="ml-10rpx text-[24rpx]">11</text>
            </view>
            <view class="ml-20rpx flex items-center">
              <image
                src="@/static/images/team/teamcat.png"
                mode="scaleToFill"
                class="w-30rpx h-22rpx"
              />
              <text class="ml-10rpx text-[24rpx] font-700">11</text>
            </view>
          </view>
        </view>
        <view class="w-160rpx h-60rpx flex flex-col justify-center items-center mr-20rpx">
          <view
            @click="abShow = true"
            class="w-full h-full text-textc bg-primary rounded-10rpx flex items-center justify-center"
          >
            <text class="text-[26rpx] fw-700">{{ $t('team.GetIt') }}</text>
          </view>
        </view>
      </view>
      <view
        class="w-650rpx h-130rpx bg-cards rounded-20rpx mt-15rpx flex items-center justify-around mb-30rpx"
      >
        <image
          src="@/static/images/team/b.png"
          class="w-100rpx h-100rpx mx-20rpx"
          mode="scaleToFill"
        />
        <view class="flex-1">
          <text class="text-[#fff] text-28rpx font-700">{{ $t('team.TotalB') }}</text>
          <view class="flex text-[#fff] items-center mt-10rpx">
            <view class="flex items-center">
              <image
                src="@/static/images/trophy/jinbi.png"
                mode="scaleToFill"
                class="w-30rpx h-30rpx"
              />
              <text class="ml-10rpx text-[24rpx]">11</text>
            </view>
            <view class="ml-20rpx flex items-center">
              <image
                src="@/static/images/team/teamcat.png"
                mode="scaleToFill"
                class="w-30rpx h-22rpx"
              />
              <text class="ml-10rpx text-[24rpx] font-700">11</text>
            </view>
          </view>
        </view>
        <view class="w-160rpx h-60rpx flex flex-col justify-center items-center mr-20rpx">
          <view
            class="w-full h-full text-textc bg-primary rounded-10rpx flex items-center justify-center"
          >
            <text class="text-[26rpx] fw-700">{{ $t('team.GetIt') }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="w-690rpx h-154rpx flex flex-col justify-center px-20rpx box-border">
      <view class="flex justify-between items-center">
        <view class="text-[#fff] flex flex-col justify-center">
          <text class="text-[32rpx] fw-700 mb-10rpx">{{ $t('team.Invite') }}</text>
          <text class="text-[24rpx] font-400">{{ $t('team.will') }}</text>
        </view>
        <view class="flex flex-col justify-center" @click="lianjieShow = true">
          <view
            class="w-160rpx h-60rpx text-textc bg-primary rounded-10rpx flex items-center justify-center mr-20rpx"
          >
            <text class="text-[26rpx] fw-700">{{ $t('play.Go') }}!</text>
          </view>
        </view>
      </view>
    </view>
    <scroll-view
      scroll-x
      :scroll-anchoring="true"
      :enhanced="true"
      :show-scrollbar="false"
      class="custom-scroll-view w-690rpx overflow-x-auto whitespace-nowrap mb-140rpx"
    >
      <view class="inline-flex">
        <view
          @click="lingquShow = true"
          class="w-690rpx h-200rpx bg-cardlight flex items-center rounded-20rpx mr-20rpx"
          v-for="(item, index) in 1"
          :key="index"
        >
          <view class="flex w-100% items-center">
            <view class="flex-1 ml-20rpx text-[#fff] flex flex-col justify-center">
              <view class="flex flex-col">
                <view class="flex items-center">
                  <image
                    src="@/static/images/trophy/jinbi.png"
                    mode="scaleToFill"
                    class="w-70rpx h-70rpx"
                  />
                  <text class="ml-10rpx text-[50rpx] fw-700">+1000</text>
                </view>
                <text class="text-[28rpx] fw-700">Inviting 2 friends can earn</text>
              </view>
              <view class="flex">
                <view class="w-75% c-bg">
                  <wd-progress :percentage="10" color="primary" hide-text :duration="0.1" />
                </view>
                <view class="text-[28rpx] flex flex-col justify-center ml-10rpx">
                  <text>1/2</text>
                </view>
              </view>
            </view>
            <view
              class="mr-40rpx flex flex-col justify-center w-160rpx h-100rpx items-center rounded-10rpx bg-primary"
            >
              <text class="text-32rpx font-700">{{ $t('team.GetIt') }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!--    <view class="w-690rpx h-200rpx mb-100rpx relative text-primary">-->
    <!--      <view-->
    <!--        class="absolute flex flex-col items-center z-1 left-50% top-50% transform -translate-x-50% -translate-y-50%"-->
    <!--      >-->
    <!--        <view class="flex items-center mb-10rpx">-->
    <!--          <image src="@/static/images/team/a.png" class="w-70rpx h-66rpx"></image>-->
    <!--          <text class="ml-10rpx text-48rpx font-700">{{ $t('turntable.congratulations') }}</text>-->
    <!--        </view>-->
    <!--        <text class="font-400 text-28rpx">您已晋级团队TOP排行榜</text>-->
    <!--      </view>-->
    <!--      <image src="@/static/images/team/a.png" class="w-full h-full"></image>-->
    <!--    </view>-->
  </view>
  <Dialog v-model:show-value="receiveshow" width="690rpx" height="686rpx">
    <view class="w-full flex flex-col items-center">
      <view class="w-630rpx flex items-center justify-between mt-90rpx">
        <text class="text-36rpx font-700 text-white">NewComer List</text>
        <view class="flex items-center">
          <image
            src="@/static/images/team/cat.png"
            class="w-23rpx h-30rpx mr-10rpx"
            mode="scaleToFill"
          />
          <text class="text-primary text-28rpx font-700">2</text>
        </view>
      </view>
      <view class="w-630rpx bg-cards rounded-20rpx flex items-center h-194rpx mt-30rpx">
        <scroll-view :scroll-y="true" :show-scrollbar="false">
          <view
            v-for="(item, index) in 10"
            :key="index"
            class="text-[#fff] flex flex-col justify-center w-full items-center"
          >
            <view
              class="w-570rpx h-62rpx flex justify-between py-20rpx text-28rpx font-400 items-center"
            >
              <text>Boom!</text>
              <view class="flex items-center">
                <image
                  src="@/static/images/trophy/jinbi.png"
                  mode="scaleToFill"
                  class="w-40rpx h-40rpx"
                />
                <text class="ml-10rpx">+1000</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <!--        <view class="flex flex-col justify-center text-center w-100% h-100% text-[#fff]">-->
        <!--          <text>{{ $t('team.noData') }}</text>-->
        <!--        </view>-->
      </view>
      <view
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Receive all</text>
      </view>
      <view class="w-630rpx bg-cards rounded-20rpx flex items-center h-100rpx mt-30rpx">
        <text class="text-24rpx font-400 text-white flex-1 ml-30rpx">
          You will get rewards for every invitation!
        </text>
        <view
          class="w-70rpx h-70rpx rounded-20rpx bg-primary flex items-center justify-center mr-20rpx"
        >
          <text class="text-26rpx font-700 text-textc">Go</text>
        </view>
      </view>
    </view>
  </Dialog>
  <Dialog v-model:showValue="lianjieShow" height="752rpx" width="690rpx">
    <view class="flex text-white flex-col items-center">
      <text class="mt-90rpx text-36rpx font-700">{{ $t('production.rewards.ShareLink') }}</text>
      <view
        @click="shareUrl"
        class="w-630rpx font-700 h-100rpx rounded-20rpx bg-primary flex items-center justify-center text-textc items-center mt-50rpx"
      >
        {{ $t('production.rewards.Share') }}
      </view>
      <view class="w-95% mx-a h-1px bg-[#636363] mt-60rpx"></view>

      <view class="text-#fff text-26rpx mt-46rpx">{{ $t('production.rewards.secret') }}</view>
      <view
        class="w-238rpx flex items-center fw-550 justify-between h-50rpx text-primary text-50rpx mt-38rpx"
      >
        <text v-for="item in 'abcde'" :key="item">{{ item }}</text>
      </view>
      <view
        class="w-214rpx h-60rpx rounded-30rpx bg-primary flex items-center justify-center mt-54rpx"
      >
        <image src="@/static/images/team/copy.png" class="w-26rpx h-26rpx mr-10rpx"></image>
        <view class="text-26rpx text-#0E0E0E font-400">{{ $t('production.rewards.Copy') }}</view>
      </view>
      <text class="break-all text-24rpx font-400 text-white mt-53rpx">
        {{ $t('production.rewards.Recommend') }}
      </text>
    </view>
  </Dialog>
  <Dialog v-model:showValue="abShow" width="690rpx" height="690rpx" position="bottom">
    <view class="flex text-white flex-col items-center w-full">
      <view
        class="w-630rpx h-140rpx flex items-center justify-around bg-cards rounded-20rpx mt-90rpx"
      >
        <view class="w-215rpx h-100rpx flex flex-col items-center justify-between">
          <view class="flex items-center">
            <image
              src="@/static/images/team/teamcathui.png"
              class="w-40rpx h-40rpx mr-10rpx"
            ></image>
            <text class="text-28rpx font-400">Total</text>
          </view>
          <text class="text-white font-24rpx font-400">1</text>
        </view>
        <image src="@/static/images/team/a.png" class="w-100rpx h-100rpx"></image>
        <view class="w-215rpx h-100rpx flex flex-col items-center justify-between">
          <text class="text-28rpx font-400">Commission</text>
          <text class="text-white font-24rpx font-400">2%</text>
        </view>
      </view>
      <view
        class="w-630rpx h-100rpx bg-cards rounded-20rpx flex items-center justify-center mt-30rpx"
      >
        <image src="@/static/images/team/jinbi.png" class="w-40rpx h-40rpx mr-10rpx"></image>
        <text class="text-28rpx font-700 text-primary">2</text>
      </view>
      <view
        class="w-630rpx h-60rpx flex items-center mt-30rpx justify-between text-26rpx font-400 text-white"
      >
        <text>Total Team Production</text>
        <text>0 BH Coin</text>
      </view>
      <view class="w-630rpx h-1rpx bg-cards"></view>
      <view class="w-630rpx">
        <scroll-view class="h-200rpx" :scroll-y="true" :show-scrollbar="false">
          <view v-for="(item, index) in 5" :key="index" class="flex justify-between mt-40rpx">
            <view class="flex">
              <image
                src="@/static/images/trophy/avatar.png"
                class="w-90rpx h-90rpx rounded-100rpx mr-10rpx flex flex-col justify-center text-center"
              ></image>
              <view class="text-[#fff] ml-15rpx">
                <view>
                  <text class="mr-10rpx text-26rpx font-700">123123</text>
                  <image
                    src="@/static/images/team/fj.png"
                    mode="scaleToFill"
                    class="w-30rpx h-30rpx"
                  />
                </view>
                <view>
                  <image
                    src="@/static/images/team/mcat.png"
                    mode="scaleToFill"
                    class="w-30rpx h-30rpx"
                  />
                  <text class="ml-10rpx text-[25rpx]">{{ $t('team.WorkingNow') }}</text>
                </view>
              </view>
            </view>
            <view class="text-[#fff] flex flex-col justify-center">
              <view class="flex text-[24rpx] font-400">
                <text>111</text>
                <image
                  src="@/static/images/trophy/jinbi.png"
                  mode="scaleToFill"
                  class="w-30rpx h-30rpx ml-10rpx"
                />
              </view>
            </view>
          </view>
        </scroll-view>

        <!--      <view-->
        <!--        v-else-->
        <!--        class="flex flex-col justify-center text-center w-100% h-100% text-[#fff] mt-50rpx"-->
        <!--      >-->
        <!--        <text>{{ $t('team.noData') }}</text>-->
        <!--      </view>-->
      </view>
    </view>
  </Dialog>
  <Dialog v-model:showValue="lingquShow" height="500rpx" width="690rpx">
    <view class="flex text-white flex-col items-center">
      <view class="w-630rpx flex items-center justify-center mt-90rpx">
        <image src="@/static/images/team/teamcat.png" mode="scaleToFill" class="w-82rpx h-62rpx" />
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-36rpx font-700 text-white">Invite 1 friends</text>
      </view>
      <view class="w-630rpx flex items-center justify-center mt-30rpx">
        <text class="text-26rpx font-400 text-white">
          Unlock
          <text class="text-primary">10,000</text>
          BH Coin when you reach this level.
        </text>
      </view>
      <view
        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
      >
        <text class="text-28rpx font-700 text-textc">Claim</text>
      </view>
    </view>
  </Dialog>
  <Dialog
    v-model:showValue="errorModel"
    width="690rpx"
    position="bottom"
    height="900rpx"
    :ov="true"
  >
    <view class="flex flex-col mt-90rpx items-center w-full bg-cardlight">
      <text class="w-355rpx h-54rpx text-36rpx font-700 text-white text-center">
        {{ $t('team.shuoming') }}
      </text>
      <text class="w-630rpx text-32rpx font-700 text-white mt-30rpx">
        1. {{ $t('team.haoyou') }}
      </text>
      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
        {{ $t('team.jiangli') }}
      </text>
      <image
        src="@/static/images/team/1.png"
        mode="scaleToFill"
        class="w-470rpx h-283rpx mt-30rpx"
      />
      <text class="w-630rpx text-32rpx font-700 text-white mt-30rpx">
        2.{{ $t('team.jianshe') }}
      </text>
      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
        {{ $t('team.shouyi') }}
      </text>
      <image
        src="@/static/images/team/2.png"
        mode="scaleToFill"
        class="w-470rpx h-118rpx mt-30rpx"
      />
      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
        {{ $t('team.shouqu') }}
      </text>
      <image
        src="@/static/images/team/3.png"
        mode="scaleToFill"
        class="w-470rpx h-254rpx mt-30rpx"
      />
      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
        {{ $t('team.xianshi') }}
      </text>
      <image
        src="@/static/images/team/4.png"
        mode="scaleToFill"
        class="w-470rpx h-114rpx mt-30rpx"
      />
      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
        {{ $t('team.lingqu') }}
      </text>
      <image
        src="@/static/images/team/5.png"
        mode="scaleToFill"
        class="w-470rpx h-269rpx mt-30rpx"
      />
      <text class="w-630rpx text-32rpx font-700 text-white mt-30rpx">
        3.{{ $t('team.eaijiangli') }}
      </text>
      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
        {{ $t('team.lingquo') }}
      </text>
      <image
        src="@/static/images/team/6.png"
        mode="scaleToFill"
        class="w-470rpx h-260rpx mt-30rpx mb-20rpx"
      />
    </view>
  </Dialog>
  <tabbar currentTab="pages/team/index"></tabbar>
</template>
<script setup lang="ts">
import tabbar from '@/components/TabBar/index.vue'
import Dialog from '@/components/common/Dialog/index.vue'
import { shareToTelegram, TelegramLinkBuilder } from '@/utils/temlgram'

const receiveshow = ref(false)
const lianjieShow = ref(false)
const abShow = ref(false)
const lingquShow = ref(false)
const errorModel = ref(false)

const bot = new TelegramLinkBuilder(import.meta.env.VITE_TELEGRAM_BOOTNAME)
const getSimpleLink = () => {
  return bot.generateShareLink(`rp_${12345}`)
}
const shareUrl = () => {
  shareToTelegram(getSimpleLink(), '')
}
</script>
<style lang="scss" scoped>
.custom-scroll-view {
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  position: relative;
}

/* 可以尝试添加这些属性来优化滑动体验 */
:deep(.uni-scroll-view) {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 样式穿透进度条 */
.c-bg {
  :deep(.wd-progress__inner) {
    border-radius: 20px;
  }

  :deep(.wd-progress__outer) {
    height: 8rpx;
    border-radius: 35rpx;
  }
}

.b-hr {
  margin-top: 10px;
  border: 1px solid #636363;
  border-radius: 20rpx;
}
</style>