web-retail-h5/pages/mine/index.vue

<template>
  <view class="content">
    <!-- 上方头部 -->
    <view class="header-container">
      <view class="user-info-wrapper">
        <view class="avatar-container">
          <image
            class="avatar-image"
            :src="
              userInfo.headPath
                ? userInfo.headPath
                : userInfo.settleCountryCircularIcon
            "
            mode="aspectFill"
          >
          </image>
        </view>
        <view class="user-details">
          <view class="user-name-and-level">
            <text class="user-name">{{ userInfo.memberCode }}</text>
            <view class="svip-badge">
              <text class="svip-text">{{ userInfo.pkGradeVal || '-' }}</text>
            </view>
          </view>
          <view class="awards-container">
            <view class="award-tag">
              <!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> -->
              <text class="award-label">荣誉奖衔:</text>
              <text class="award-value">{{
                userInfo.pkMaxAwardsVal || userInfo.pkAwardsVal || '无'
              }}</text>
            </view>
            <view style="display: flex; gap: 10rpx">
              <view class="award-tag">
                <!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> -->
                <text class="award-label">当月奖衔:</text>
                <text class="award-value">{{
                  userInfo.pkAwardsVal || '无'
                }}</text>
              </view>
              <view v-if="userInfo.pkRangeAwardsVal" class="award-tag">
                <text class="award-label">分红奖衔:</text>
                <text class="award-value">{{ userInfo.pkRangeAwardsVal }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="settings-icon-container"
        @click="goTo('/pages/userData/index')"
      >
        <u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
      </view>
    </view>

    <!-- 新增信息展示 -->
    <view
      class="extra-info-card"
      v-if="
        [MEMBER_SIGN.NORMAL_LEVEL, MEMBER_SIGN.ZERO_LEVEL].includes(
          Number(userInfo.memberSign)
        ) && isNormal
      "
    >
      <view
        class="info-grid"
        :class="{
          'multiple-items': userInfo.memberSign === MEMBER_SIGN.NORMAL_LEVEL,
        }"
      >
        <view class="info-item">
          <text class="info-value">{{ userInfo.pkGradeVal || '-' }}</text>
          <text class="info-label">会员等级</text>
        </view>
        <template v-if="userInfo.memberSign === MEMBER_SIGN.NORMAL_LEVEL">
          <view class="info-item">
            <text class="info-value">{{ totalBox || '0' }}</text>
            <text class="info-label">总盒数</text>
          </view>
          <view class="info-item">
            <text class="info-value">
              {{ smallAreaBox || '0' }}
            </text>
            <text class="info-label">小区盒数</text>
          </view>
        </template>
      </view>
    </view>
    <!-- 市场动态 -->
    <view class="my_order" v-if="marketWrapperVisible && isNormal">
      <view class="my_title">
        <text class="thetitle">{{ '市场动态' }}</text>
      </view>
      <view class="market-stats-container">
        <view
          class="stat-block primary"
          @click="goTo('/pages/mine/marketDynamic/achievement-list')"
        >
          <view class="stat-content">
            <view class="stat-item">
              <text class="stat-label">总业绩</text>
              <view class="stat-value">
                <text class="stat-value__integer">{{
                  formattedTotalSumPv.integer
                }}</text>
                <text class="stat-value__decimal">{{
                  formattedTotalSumPv.decimal
                }}</text>
              </view>
            </view>
            <view class="stat-divider"></view>
            <view class="stat-item">
              <text class="stat-label">小区业绩</text>
              <view class="stat-value">
                <text class="stat-value__integer">{{
                  formattedSmallAreaPv.integer
                }}</text>
                <text class="stat-value__decimal">{{
                  formattedSmallAreaPv.decimal
                }}</text>
              </view>
            </view>
          </view>
          <view class="stat-more-arrow">
            <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
          </view>
        </view>
        <view
          class="stat-block secondary"
          @click="goTo('/pages/mine/marketDynamic/box-list')"
        >
          <view class="stat-content">
            <view class="stat-item">
              <text class="stat-label">总盒数</text>
              <view class="stat-value">
                <text class="stat-value__integer">{{
                  formattedTotalBox.integer
                }}</text>
                <text class="stat-value__decimal">{{
                  formattedTotalBox.decimal
                }}</text>
              </view>
            </view>
            <view class="stat-divider"></view>
            <view class="stat-item">
              <text class="stat-label">小区盒数</text>
              <view class="stat-value">
                <text class="stat-value__integer">{{
                  formattedSmallAreaBox.integer
                }}</text>
                <text class="stat-value__decimal">{{
                  formattedSmallAreaBox.decimal
                }}</text>
              </view>
            </view>
          </view>
          <view class="stat-more-arrow">
            <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="my_order">
      <view class="my_title">
        <text class="thetitle">{{ '我的订单' }}</text>
        <!-- <view class="findallorder" @click="goTo('/pages/mine/order/index')">
          <text>{{ '全部订单' }}</text>
          <u-icon name="arrow-right" color="#999999" size="16rpx"></u-icon>
        </view> -->
      </view>
      <view class="order_flex thepadding" style="justify-content: center">
        <view
          class="theorderflex1"
          style="margin-bottom: 0"
          @click="goOrder('')"
        >
          <image class="order_img2" src="../../static/images/myorder_1.png" />
          <view class="order_text">全部订单</view>
        </view>
        <view
          class="theorderflex1"
          style="margin-bottom: 0"
          @click="goOrder(1)"
        >
          <image class="order_img2" src="../../static/images/myorder_2.png" />
          <view class="order_text">{{ '待发货' }}</view>
          <view v-if="payNum" class="qiu">{{ payNum }}</view>
        </view>
        <view
          class="theorderflex1"
          style="margin-bottom: 0"
          @click="goOrder(3)"
        >
          <image class="order_img2" src="../../static/images/myorder_3.png" />
          <view class="order_text">{{ '待收货' }}</view>
        </view>
        <view
          class="theorderflex1"
          style="margin-bottom: 0"
          @click="goOrder(5)"
        >
          <image class="order_img2" src="../../static/images/myorder_4.png" />
          <view class="order_text">{{ '已收货' }}</view>
        </view>
      </view>
    </view>

    <!-- 收益区域 -->
    <view class="my_order" v-if="regionInfoVisible">
      <view class="my_title">
        <text class="thetitle">收益区域</text>
      </view>
      <template
        v-if="
          regionInfo.provinceVal || regionInfo.cityVal || regionInfo.countyVal
        "
      >
        <view class="region-info-box">
          <view class="region-info-item">
            <text class="region-info-label">{{ '省' }}</text>
            <text class="region-info-value">{{
              regionInfo.provinceVal || '-'
            }}</text>
          </view>
          <view class="region-info-item">
            <text class="region-info-label">{{ '市' }}</text>
            <text class="region-info-value">{{
              regionInfo.cityVal || '-'
            }}</text>
          </view>
          <view class="region-info-item">
            <text class="region-info-label">{{ '区' }}</text>
            <text class="region-info-value">{{
              regionInfo.countyVal || '-'
            }}</text>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="region-select-action">
          <u-button
            @click="openRegionSelect"
            color="#005BAC"
            shape="circle"
            text="选择区域"
          ></u-button>
        </view>
      </template>
    </view>

    <view class="my_order">
      <view class="order_flex">
        <template v-for="(item, index) in otherMenuList">
          <view
            class="theorderflex1"
            v-if="item.ifshow"
            :key="index"
            @click="goTo(item.url)"
          >
            <image class="order_img" :src="item.imgurl" />
            <view class="order_text">{{ item.name }}</view>
          </view>
        </template>
        <!-- <view
        class="theorderflex1"
        @click="goTo('/pages/mine/feedBack/feedBack')"
      >
        <image class="order_img" src="../../static/images/my_icon12.png" />
        <view class="order_text">{{ '意见反馈' }}</view>
      </view> -->
        <!-- <picker
        :range="getLanguageList"
        :value="index"
        range-key="label"
        @change="bindPickerChange"
      >
        <view class="theorderflex1" @click="goTo('')">
          <image class="order_img" src="../../static/images/mark6.png" />
          <view class="order_text">{{ '多语言切换' }}</view>
        </view>
      </picker> -->
        <!-- <view
        class="theorderflex1"
        @click="goTo('/pages/mine/branchAddress/branchAddress')"
      >
        <image class="order_img" src="../../static/images/my_icon9.png" />
        <view class="order_text"
          >{{ '分公司' }}{{ '地址' }}</view
        >
      </view> -->

        <!-- <view class="theorderflex1" @click="goYear">
                  <image class='order_img' src="../../static/images/my_icon12.png" />
                  <view class="order_text">{{ '年度奖衔' }}</view>
              </view>  -->
        <!-- <view class="theorderflex1" @click="goTo('')">
                  <image class='order_img' src="../../static/images/my_icon12.png" />
                  <view class="order_text">关于我们</view>
              </view> -->
      </view>
    </view>

    <!-- 会员中心 -->

    <view class="btnbox">
      <u-button
        shape="circle"
        @click="loginOut()"
        color="#005BAC"
        :text="'退出登录'"
      ></u-button>
    </view>
    <cl-tabbar :current="4"></cl-tabbar>
    <u-popup
      :show="pswShow"
      class="pspopup"
      mode="center"
      closeable
      @close="pswShow = false"
    >
      <view class="t_tit">{{ '二级密码' }}</view>
      <view class="box">
        <view class="c_tit">{{ '请输入二级密码' }}</view>

        <u--input
          border="surround"
          type="password"
          v-model="password"
        ></u--input>
        <u-button
          type="success"
          class="uBtn"
          shape="circle"
          @tap="surePsw"
          color="#005BAC"
          >{{ '确认' }}
        </u-button>
      </view>
    </u-popup>
    <RegionSelect
      v-if="isNormal"
      ref="regionSelect"
      @success="getRegionSelect"
    />
    <!-- <talentList :drShow="drShow" @closeShow="closeShow"></talentList> -->
  </view>
</template>

<script>
import clTabbar from '@/components/cl-tabbar.vue'
import * as min from '@/config/balance.js'
import * as api from '@/config/login.js'
import { MEMBER_SIGN } from '@/util/common.js'
import { getMarketDynamicBoxCount } from '@/config/mine.js'
import RegionSelect from '@/components/region-select/index.vue'
import {
  getRegionSelect,
  getMemberBoxCount,
  getMemberPerformance,
} from '@/config/mine.js'
// import talentList from "@/components/talentList.vue";
export default {
  components: {
    'cl-tabbar': clTabbar,
    // talentList,
    RegionSelect,
  },
  data() {
    return {
      MEMBER_SIGN,
      getLanguageList: [],
      index: 0,
      userInfo: {},
      userData: {},
      pswShow: false,
      password: '',
      waitPayNum: '',
      payNum: '',
      awards: {},
      otherMenuList: [
        {
          url: '1',
          name: '我的钱包',
          imgurl: '../../static/images/my_icon1.png',
          menuKey: 'wallet',
          ifshow: false,
        },
        {
          url: '/pages/bonus/menu',
          name: '奖金明细',
          imgurl: '../../static/images/mark2.png',
          menuKey: 'incomeDetail',
          ifshow: false,
        },
        {
          url: '/pages/ticket/index',
          name: '自助购票',
          imgurl: '../../static/images/tickets.png',
          menuKey: 'ticket',
          ifshow: true,
          alwaysShow: true,
        },
        {
          url: '/pages/selfService/index',
          name: '自助服务',
          imgurl: '../../static/images/my_icon6.png',
          menuKey: 'selfHelp',
          ifshow: true,
        },
        // {
        //   url: '/pages/mine/share/index',
        //   name: '个人推广',
        //   imgurl: '../../static/images/list.svg',
        //   menuKey: 'share',
        //   ifshow: false,
        // },
        {
          url: '/pages/userSecure/index',
          name: '账号安全',
          imgurl: '../../static/images/my_icon8.png',
          menuKey: 'userSecure',
          ifshow: true,
        },
        {
          url: '/pages/addressList/index',
          name: '地址管理',
          imgurl: '../../static/images/my_icon9.png',
          menuKey: 'addressList',
          ifshow: true,
        },
        {
          url: '/pages/mine/directPush/index',
          name: '直推列表',
          imgurl: '../../static/images/mark5.png',
          menuKey: 'directPush',
          ifshow: false,
        },
        {
          url: '/pages/mine/bindBank/index',
          name: '银行信息',
          imgurl: '../../static/images/my_icon10.png',
          menuKey: 'bankInfo',
          ifshow: true,
        },
        {
          url: '/pages/bonus/regional-assessment/index',
          name: '区域考核',
          imgurl: '../../static/images/mark5.png',
          menuKey: 'areaAssessment',
          ifshow: false,
        },
        // {
        //   url: '/pages/mine/addNewPv/index',
        //   name: '新增业绩',
        //   imgurl: '../../static/images/mark9.png',
        //   menuKey: 'iNewAchievement',
        //   ifshow: false,
        // },
      ],
      drShow: false,
      actMenu: false,
      iHonorAward: false,
      ifSpecial: false,
      awardsList: '',
      regionInfo: {},
      smallAreaBox: 0,
      totalBox: 0,
      // performanceData: {},
      marketDynamicBoxInfo: {},
      totalSumPv: 0,
      smallAreaPv: 0,
      isNormal: false,
    }
  },
  onShow() {
    this.getInfo().then(isNormal => {
      this.orderNum()
      if (!isNormal) {
        return
      }
      this.isNormal = isNormal
      this.getRegionSelect()
      this.getMemberBoxCount()
      this.getMarketDynamicBoxCount()
      // this.getUserAwardss()
    })
  },

  computed: {
    sprintProgress() {
      const targetPvStr = this.awards.targetPv
      const sumRealPvStr = this.awards.sumRealPv // 这是"小区仅需"的量，即差距

      const targetPv = parseFloat(targetPvStr)
      const sumRealPv = parseFloat(sumRealPvStr)

      let achievedPv = 0
      let percentage = 0
      const numericTargetPv =
        Math.floor((isNaN(targetPv) ? 0 : targetPv) * 100) / 100

      if (!isNaN(targetPv) && targetPv > 0) {
        // sumRealPv 是差距，所以已完成的是 targetPv - sumRealPv
        achievedPv = targetPv - (isNaN(sumRealPv) ? 0 : sumRealPv)

        achievedPv = Math.max(0, Math.min(achievedPv, targetPv))

        percentage = (sumRealPvStr / targetPv) * 100
      } else if (
        !isNaN(targetPv) &&
        targetPv === 0 &&
        !isNaN(sumRealPv) &&
        sumRealPv <= 0
      ) {
        // 如果目标是0，且差距也是0或负数（表示已满足或超越0目标），则认为是100%
        achievedPv = 0
        percentage = 100
      }

      const clampedPercentage = Math.min(100, Math.max(0, percentage))

      return {
        percentageString: `${Math.floor(clampedPercentage)}%`,
        achieved: (Math.floor(achievedPv * 100) / 100).toFixed(2),
        target: numericTargetPv.toFixed(2),
        rawPercentage: clampedPercentage,
      }
    },
    marketWrapperVisible() {
      return this.userInfo.memberSign !== MEMBER_SIGN.ZERO_LEVEL
    },
    regionInfoVisible() {
      return this.regionInfo?.regionStatus === 0
    },
    formattedTotalSumPv() {
      const value = String(this.totalSumPv || '0.00')
      const parts = value.split('.')
      return {
        integer: parts[0],
        decimal: parts.length > 1 ? `.${parts[1]}` : '',
      }
    },
    formattedSmallAreaPv() {
      const value = String(this.smallAreaPv || '0.00')
      const parts = value.split('.')
      return {
        integer: parts[0],
        decimal: parts.length > 1 ? `.${parts[1]}` : '',
      }
    },
    formattedTotalBox() {
      const value = String(this.totalBox || '0')
      const parts = value.split('.')
      return {
        integer: parts[0],
        decimal: parts.length > 1 ? `.${parts[1]}` : '',
      }
    },
    formattedSmallAreaBox() {
      const value = String(this.smallAreaBox || '0')
      const parts = value.split('.')
      return {
        integer: parts[0],
        decimal: parts.length > 1 ? `.${parts[1]}` : '',
      }
    },
  },

  methods: {
    getRegionSelect() {
      uni.showLoading({
        title: '加载中...',
      })
      getRegionSelect()
        .then(res => {
          if (res.code == 200) {
            this.regionInfo = res.data
          }
        })
        .finally(() => {
          uni.hideLoading()
        })
    },
    openRegionSelect() {
      uni.showLoading({
        title: '加载中...',
      })
      this.$refs.regionSelect
        ?.open()
        .then(() => {
          uni.hideLoading()
        })
        .catch(() => {
          uni.hideLoading()
        })
    },
    goYear() {
      uni.navigateTo({
        url: '/pages/mine/yearGift/index',
      })
    },
    closeShow() {
      this.drShow = false
    },
    goHonoray() {
      uni.navigateTo({
        url: '/pages/mine/honoraryAwards/honoraryAwards',
      })
    },
    //获取用户真实奖衔
    getUserAwardss() {
      api.getUserAwards().then(res => {
        this.awards = res.data || {}
      })
    },
    GetPercent(num, total) {
      num = parseFloat(num)
      total = parseFloat(total)
      if (isNaN(num) || isNaN(total)) {
        return '-'
      }
      if (total == 0) {
        return '0%'
      } else if (total < 0) {
        return 100 + '%'
      } else {
        return Math.round((num / total) * 10000) / 100.0 + '%'
      }
    },
    yesPercent(left, right) {
      left = parseFloat(left)
      right = parseFloat(right)
      if (isNaN(left) || isNaN(right)) {
        return '0%'
      }
      return right + left == 0
        ? '0%'
        : Math.round((left / (right + left)) * 10000) / 100.0 + '%'
    },
    orderNum() {
      api.orderNum().then(res => {
        this.waitPayNum = res.data.waitPayNum
        this.payNum = res.data.payNum
      })
    },
    getInfo() {
      return new Promise(resolve => {
        api.getInfo().then(res => {
          if (res.code == 200) {
            this.userInfo = res.data

            if (this.userInfo.memberCode != 'BF66886688') {
              this.otherMenuList = this.otherMenuList.map(item => {
                item.ifshow = true
                return item
              })
              resolve(true)
              return
            }
            resolve(false)
          } else {
            reject()
          }
        })
      })
    },
    goTo(url) {
      if (url == 1) {
        this.pswShow = true
      } else if (url == 2) {
        //达人榜单
        this.drShow = true
      } else {
        uni.navigateTo({
          url: url,
        })
      }
    },
    getMarketDynamicBoxCount() {
      getMarketDynamicBoxCount({
        pkBigMember: this.userInfo.memberCode,
      }).then(res => {
        if (res.code == 200) {
          this.marketDynamicBoxInfo = res.data
        }
      })
    },
    goOrder(index) {
      //全部订单
      uni.navigateTo({
        url: '/pages/mine/order/index?isTab=' + index,
      })
    },
    goRoad(index) {
      //1等级2奖衔
      if (index == 1) {
        uni.navigateTo({
          url: '/pages/mine/growthRoad/gradeRoad',
        })
      } else if (index == 2) {
        uni.navigateTo({
          url: '/pages/mine/growthRoad/awardRoad',
        })
      }
    },
    loginOut() {
      uni.setStorageSync('pkCountry', '')
      uni.setStorageSync('showInfo', 0)
      this.$store.dispatch('LogOut')
      uni.reLaunch({
        url: '/pages/login/index',
      })
    },
    getMemberBoxCount() {
      getMemberBoxCount({
        pkBigMember: this.userInfo.memberCode,
      }).then(res => {
        if (res.code == 200) {
          this.totalBox = res.data?.totalBox || 0
          this.smallAreaBox = res.data?.smallAreaBox || 0
          this.totalSumPv = res.data?.totalSumPv || 0
          this.smallAreaPv = res.data?.smallAreaPv || 0
        }
      })
    },
    surePsw() {
      min
        .checkPwd({
          pwd: this.password,
        })
        .then(res => {
          if (res.code == 200) {
            this.password = ''
            this.pswShow = false
            uni.navigateTo({
              url: '/pages/mine/balance/index',
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'error',
            })
          }
        })
    },
    goSpecialArea() {
      uni.switchTab({
        url: '/pages/specialArea/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.ju_grade {
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.08);
  border-radius: 20rpx;
  padding: 20rpx;
  background: #ffffff;
  font-size: 24rpx;

  .descriptive-text {
    font-size: 22rpx;
    color: #666666;
    margin-right: 8rpx;
  }
  .jugrade_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-top: 20rpx;
  }

  .ju_left {
    flex: 1;

    .ju_left_top {
      color: #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      .ju_text1 {
        font-weight: 400;
        color: #333;
      }

      .ju_text2 {
        color: #005bac;
        font-weight: bold;
        font-size: 16px;
        padding: 0 6rpx;
      }
    }

    .ju_left_bottom {
      // width: 100%;
      flex: 1;
      height: 34rpx;
      background: #eeeeee;
      border-radius: 20rpx;
      margin: 10rpx;
      // margin-top: 23rpx;
      position: relative;
    }
    .ju_left_bottom1 {
      // width: 100%;
      flex: 1;
      height: 34rpx;
      background: #ffb74d;
      border-radius: 20rpx;
      margin: 10rpx;
      // margin-top: 23rpx;
      position: relative;
    }
    // .current-schedule1 {
    //   position: absolute;
    //   width: 30%;
    //   background: #005BAC;
    //   height: 34rpx;
    //   border-radius: 20px;
    // }
    // .current-schedule2 {
    //   position: absolute;
    //   width: 30%;
    //   background: #005BAC;
    //   height: 34rpx;
    //   border-radius: 20px;
    // }
    // .current-schedule3 {
    //   position: absolute;
    //   width: 30%;
    //   background: #005BAC;
    //   height: 34rpx;
    //   border-radius: 20px;
    // }
    .current-progress {
      position: absolute;
      width: 30%;
      background: #3385d6;
      height: 34rpx;
      border-radius: 20px;
    }
    .cha {
      width: 100%;
      position: absolute;
      top: 60%;
      left: 0;
      transform: translate(0%, -55%);
      white-space: nowrap;
      text-align: center;
    }
    .yestDay {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
    }
    .yes_t {
      margin-right: 20rpx;
    }
  }

  .ju_right {
    width: 104rpx;
    height: 94rpx;
    margin-left: 20rpx;

    .ju_img {
      width: 100%;
      height: 100%;
    }
  }
}

.my_order {
  background-color: #ffffff;
  box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  padding: 0 20rpx;
  margin-top: 20rpx;

  .my_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #eeeeee;
    padding: 20rpx 0;

    .thetitle {
      font-size: 28rpx;
      font-family:
        PingFangSC-Semibold,
        PingFang SC;
      font-weight: 600;
      color: #333333;
    }

    .findallorder {
      font-family:
        PingFangSC-Regular,
        PingFang SC;
      color: #999999;
      font-size: 16rpx;
      display: flex;
      align-items: center;
    }
  }

  .thepadding {
    padding: 20rpx 0;
  }

  .order_flex {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .theorderflex1 {
      margin: 18rpx 0;
      width: 165rpx;
      text-align: center;
      position: relative;

      .order_img {
        width: 48rpx;
        height: 46rpx;
      }

      .order_text {
        margin-top: 15rpx;
        font-size: 20rpx;
        font-family:
          PingFangSC-Semibold,
          PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      .order_img2 {
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
        border-bottom: 20rpx;
      }

      .order_text2 {
        font-size: 28rpx;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      .qiu {
        position: absolute;
        width: 20px;
        height: 20px;
        background: rgb(249, 48, 38);
        top: -10px;
        right: 10px;
        border-radius: 50%;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
      }
    }
  }

  .order_flex2 {
    justify-content: flex-start;

    .theorderflex1 {
      width: 120rpx; // flex: 1;
      margin-right: 66rpx;
    }
  }
}

.pspopup {
  .t_tit {
    text-align: center;
    margin-top: 40rpx;
    font-weight: bold;
    font-size: 32rpx;
  }

  .c_tit {
    margin-bottom: 40rpx;
  }

  .box {
    padding: 40rpx 40rpx;
    text-align: center;
  }

  .uBtn {
    margin-top: 40rpx;
  }
}

.content {
  padding: 0 22rpx;
  padding-bottom: 100rpx; // background-color: #f2f2f2;
  position: relative;
  font-size: 24rpx;
  height: 100vh;
  overflow: scroll;
  background-image: linear-gradient(
    to bottom,
    #005bac 25%,
    #f2f2f2 40%
  ); // background-position: top;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40rpx 0;
  color: #ffffff;
  position: relative;
  padding-bottom: 0; // Add some bottom padding
}

.user-info-wrapper {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.avatar-container {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);

  .avatar-image {
    width: 100%;
    height: 100%;
  }
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.user-name-and-level {
  display: flex;
  align-items: center;
  gap: 16rpx;

  .user-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
  }

  .svip-badge {
    background: linear-gradient(145deg, #fde468, #fad02c);
    color: #5d4203;
    padding: 4rpx 16rpx;
    border-radius: 50px;
    font-size: 22rpx;
    font-weight: 600;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.4),
      0 1px 2px rgba(0, 0, 0, 0.15);
    border: 1rpx solid #c8a000;
  }
}

.awards-container {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  align-items: flex-start;
}

.award-tag {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 8rpx 16rpx;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 22rpx;

  .award-label {
    opacity: 0.8;
  }
  .award-value {
    font-weight: 500;
  }
}

.settings-icon-container {
  padding: 10rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 10rpx; // Align vertically with user name
}

.jiangxian {
  display: flex;
  color: #ffffff;
  align-items: center;
  margin: 0rpx 0 10rpx 0;
}

.yt1 {
  font-weight: 600;
  font-size: 18px;
  margin-left: 10rpx;
}

.hisImg {
  width: 50rpx;
  height: 50rpx;
  margin-left: 10rpx;
}

.jxTit {
  flex: 1;
  text-align: center;
}

.jxTit1 {
  font-weight: 600;
  font-size: 24rpx;
}

.contentLink {
  .linktitle {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    margin-bottom: 25rpx;
  }

  background-color: #ffffff; // border-radius: 25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 35rpx 25rpx;

  .my_icon {
    width: 39rpx;
    height: 37rpx;
  }

  .my_icon2 {
    width: 39rpx;
    height: 43rpx;
  }

  .my_icon3 {
    width: 43rpx;
    height: 37rpx;
  }

  .u-cell-text {
    margin-left: 25rpx;
  }
}

::v-deep .u-line {
  border: none !important;
}

.btnbox {
  margin-top: 30rpx;
  padding: 20rpx 22rpx 150rpx 22rpx;
}

.sprint-progress-container {
  flex: 1;
  height: 34rpx;
  background: #eeeeee;
  border-radius: 20rpx;
  margin: 10rpx;
  position: relative;
  overflow: hidden;
}

.sprint-current-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #ed9a38 0%, #fdd05f 50%, #e68a2e 100%);
  transition: width 0.6s ease-in-out;
  box-shadow: none;
  overflow: hidden;
}

.sprint-current-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: translateX(-100%);
  animation: premium_shimmer_animation 2.5s infinite linear;
}

@keyframes premium_shimmer_animation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.sprint-progress-text {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  text-align: center;
  font-size: 22rpx;
  color: #333333;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.sprint-progress-text span {
  margin: 0 3rpx;
}

.sprint-progress-text .award-name {
  font-weight: bold;
  color: #005bac;
  font-size: 26rpx;
  padding: 0 4rpx;
}

.sprint-progress-text .award-amount {
  font-weight: bold;
  color: #d9534f;
  font-size: 24rpx;
  padding: 0 4rpx;
}

.region-info-box {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  text-align: center;
}

.region-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.region-info-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.region-info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.extra-info-card {
  background: #ffffff;
  box-shadow: 0rpx 6rpx 24rpx rgba(0, 0, 0, 0.06);
  border-radius: 24rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.info-grid {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-around;
}

.info-grid.multiple-items {
  justify-content: space-between;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
}

.info-grid.multiple-items .info-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2rpx;
  height: 60rpx;
  background-color: #f0f0f0;
}

.info-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  line-height: 1.3;
}

.info-label {
  font-size: 24rpx;
  color: #999999;
}

.market-stats-container {
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.stat-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-radius: 16rpx;
  color: #fff;
  position: relative;
  transition: transform 0.2s ease;
}

.stat-block:active {
  transform: scale(0.98);
  filter: brightness(1.1);
}

.stat-block.primary {
  background: linear-gradient(135deg, #005bac, #007bff);
  box-shadow: 0 6rpx 12rpx rgba(0, 91, 172, 0.3);
}

.stat-block.secondary {
  background: linear-gradient(135deg, #4682b4, #87ceeb);
  box-shadow: 0 6rpx 12rpx rgba(70, 130, 180, 0.3);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex-grow: 1;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.stat-divider {
  width: 2rpx;
  height: 60rpx;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.1)
  );
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.stat-value {
  display: flex;
  align-items: baseline;
  line-height: 1;
  margin-top: 8rpx;
  word-break: break-all;
}

.stat-value__integer {
  font-size: 40rpx;
  font-weight: 600;
}

.stat-value__decimal {
  font-size: 28rpx;
  font-weight: 500;
  margin-left: 4rpx;
}

.stat-more-arrow {
  margin-left: 20rpx;
  flex-shrink: 0;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

@keyframes bling_shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.region-select-action {
  padding: 30rpx 20rpx;
}
</style>