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

<template>
  <view class="content">
    <!-- 上方头部 -->
    <view>
      <view class="topBox">
        <view class="top_inder">
          <view class="top_left">
            <view class="left_img">
              <image
                class="headerimg"
                :src="
                  userInfo.headPath
                    ? userInfo.headPath
                    : userInfo.settleCountryCircularIcon
                "
                mode=""
              >
              </image>
            </view>

            <view class="left_text">
              <view class="name_box">
                <view class="tTit1">{{ userInfo.memberCode }}</view>
              </view>
              <view class="level_box">
                <view class="level_tag level_tag--primary">
                  <u-icon name="level" color="#A77B09" size="14"></u-icon>
                  <text class="level_label">会员等级</text>
                  <text class="level_value">{{
                    userInfo.pkGradeVal || '-'
                  }}</text>
                </view>
                <view style="display: flex; gap: 10rpx">
                  <view class="level_tag">
                    <u-icon name="star" color="#005BAC" size="14"></u-icon>
                    <text class="level_label">当月奖衔</text>
                    <text class="level_value">{{
                      userInfo.pkAwardsVal || '-'
                    }}</text>
                  </view>
                  <view class="level_tag">
                    <u-icon name="star" color="#005BAC" size="14"></u-icon>
                    <text class="level_label">荣誉奖衔</text>
                    <text class="level_value">{{
                      userInfo.pkMaxAwardsVal || '-'
                    }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="top_right" @click="goTo('/pages/userData/index')">
            <view class="ricon">
              <u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="ju_grade" v-if="false">
        <view class="jugrade_flex">
          <view class="ju_left">
            <view v-if="awards.tarAwardsName" class="yestDay">
              <view class="yes_t">奖衔晋升</view>
              <view class="ju_left_bottom sprint-progress-container">
                <view
                  class="sprint-current-progress"
                  :style="{ width: sprintProgress.percentageString }"
                ></view>
                <view class="cha sprint-progress-text">
                  晋升
                  <span class="award-name">{{ awards.tarAwardsName }}</span>
                  小区仅需
                  <span class="award-amount">{{
                    sprintProgress.achieved
                  }}</span>
                </view>
              </view>
            </view>
            <view class="yestDay">
              <view class="yes_t">昨日业绩</view>
              <view
                :class="
                  awards.aNewPv != 0 && awards.bNewPv != 0
                    ? 'ju_left_bottom1'
                    : 'ju_left_bottom'
                "
              >
                <view
                  class="current-progress"
                  :style="{
                    width: yesPercent(awards.aNewPv, awards.bNewPv),
                  }"
                ></view>
                <view class="cha">
                  左区 {{ awards.aNewPv || 0 }}/右区 {{ awards.bNewPv || 0 }}
                </view>
              </view>
            </view>
            <view class="yestDay">
              <view class="yes_t">当月业绩</view>
              <view
                :class="
                  awards.aMonthPv != 0 && awards.bMonthPv != 0
                    ? 'ju_left_bottom1'
                    : 'ju_left_bottom'
                "
              >
                <view
                  class="current-progress"
                  :style="{
                    width: yesPercent(awards.aMonthPv, awards.bMonthPv),
                  }"
                ></view>
                <view class="cha">
                  左区 {{ awards.aMonthPv || '0.00' }}/右区
                  {{ awards.bMonthPv || '0.00' }}
                </view>
              </view>
            </view>
            <view class="yestDay">
              <view class="yes_t">{{ '历史业绩' }}</view>
              <view
                :class="
                  awards.aSumPv != 0 && awards.bSumPv != 0
                    ? 'ju_left_bottom1'
                    : 'ju_left_bottom'
                "
              >
                <view
                  class="current-progress"
                  :style="{
                    width: yesPercent(awards.aSumPv, awards.bSumPv),
                  }"
                ></view>
                <view class="cha">
                  左区 {{ awards.aSumPv }}/右区 {{ awards.bSumPv }}</view
                >
              </view>
            </view>
          </view>
        </view>
      </view> -->

      <!-- 新增信息展示 -->
      <view
        class="extra-info-card"
        v-if="[0, 1, 2].includes(userInfo.memberSign)"
      >
        <view
          class="info-grid"
          :class="{ 'multiple-items': userInfo.memberSign === 0 }"
        >
          <view class="info-item">
            <text class="info-value">{{ userInfo.pkGradeVal || '-' }}</text>
            <text class="info-label">会员等级</text>
          </view>
          <template v-if="userInfo.memberSign === 0">
            <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">
        <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(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>
        <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>
      </view>

      <!-- 市场动态 -->
      <view class="my_order" v-if="marketWrapperVisible">
        <view class="my_title">
          <text class="thetitle">{{ '市场动态' }}</text>
        </view>
        <view class="market-stats-container">
          <view class="stat-row">
            <view class="stat-cards">
              <view class="stat-card primary">
                <text class="stat-label">总业绩：</text>
                <text class="stat-value">{{
                  performanceData.totalSumPv || '0.00'
                }}</text>
              </view>
              <view class="stat-card secondary">
                <text class="stat-label">小区：</text>
                <text class="stat-value">{{
                  performanceData.smallAreaPv || '0.00'
                }}</text>
              </view>
            </view>
            <view
              class="stat-more"
              @click="goTo('/pages/performanceEchart/index')"
            >
              <text>更多</text>
              <u-icon name="arrow-right" color="#999999" size="14rpx"></u-icon>
            </view>
          </view>
          <view class="stat-row">
            <view class="stat-cards">
              <view class="stat-card primary">
                <text class="stat-label">总盒数：</text>
                <text class="stat-value">{{
                  performanceData.totalBox || '0'
                }}</text>
              </view>
              <view class="stat-card secondary">
                <text class="stat-label">小区盒数：</text>
                <text class="stat-value">{{
                  performanceData.smallAreaBox || '0'
                }}</text>
              </view>
            </view>
            <view class="stat-more" @click="goTo('/pages/mine/order/index')">
              <text>更多</text>
              <u-icon name="arrow-right" color="#999999" size="14rpx"></u-icon>
            </view>
          </view>
        </view>
      </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>
    </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 />
    <!-- <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 {
      getLanguageList: [],
      index: 0,
      userInfo: {},
      userData: {},
      pswShow: false,
      password: '',
      waitPayNum: '',
      payNum: '',
      awards: {},
      markMenuList: [
        {
          url: '/pages/performanceEchart/index',
          name: '数据查询',
          imgurl: '../../static/images/mark1.png',
          menuKey: 'marketDynamics',
          ifshow: false,
        },
        {
          url: '/pages/bonus/menu',
          name: '奖金明细',
          imgurl: '../../static/images/mark2.png',
          menuKey: 'incomeDetail',
          ifshow: false,
        },
        {
          url: '/pages/market/examineDetail/examineDetail',
          name: '考核明细',
          imgurl: '../../static/images/mark5.png',
          menuKey: 'appraisal',
          ifshow: false,
        },
        {
          url: '/pages/market/registerList/registerList',
          name: '注册列表',
          imgurl: '../../static/images/mark6.png',
          menuKey: 'registration',
          ifshow: false,
        },
        {
          url: '/pages/market/investmentList/investmentList',
          name: '招商列表',
          imgurl: '../../static/images/mark7.png',
          menuKey: 'investment',
          ifshow: false,
        },
        {
          url: '/pages/market/activeArea/index',
          name: '活动专区',
          imgurl: '../../static/images/mark9.png',
          menuKey: 'activeZone',
          ifshow: false,
        },
        {
          url: '/pages/architecture/architecture',
          name: '架构管理',
          imgurl: '../../static/images/my_icon14.png',
          menuKey: 'recommend',
          ifshow: false,
        },
      ],

      otherMenuList: [
        {
          url: '1',
          name: '我的钱包',
          imgurl: '../../static/images/my_icon1.png',
          menuKey: 'wallet',
          ifshow: true,
        },
        {
          url: '/pages/bonus/menu',
          name: '奖金明细',
          imgurl: '../../static/images/mark2.png',
          menuKey: 'incomeDetail',
          ifshow: true,
        },
        {
          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: true,
        },
        {
          url: '/pages/userSecure/index',
          name: '账号安全',
          imgurl: '../../static/images/my_icon8.png',
          menuKey: '',
          ifshow: true,
        },
        {
          url: '/pages/addressList/index',
          name: '地址管理',
          imgurl: '../../static/images/my_icon9.png',
          menuKey: '',
          ifshow: true,
        },
        {
          url: '/pages/mine/directPush/index',
          name: '直推列表',
          imgurl: '../../static/images/mark5.png',
          menuKey: '',
          ifshow: true,
        },
        {
          url: '/pages/mine/bindBank/index',
          name: '银行信息',
          imgurl: '../../static/images/my_icon10.png',
          menuKey: '',
          ifshow: true,
        },
        {
          url: '/pages/bonus/regional-assessment/index',
          name: '区域考核',
          imgurl: '../../static/images/mark5.png',
          menuKey: '',
          ifshow: true,
        },
        // {
        //   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: {},
    }
  },
  onShow() {
    this.getInfo().finally(() => {
      this.orderNum()
      this.getRegionSelect()
      this.getMemberBoxCount()
      this.fetchMemberPerformance()
      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.V5_LEVEL
    },
    regionInfoVisible() {
      return this.regionInfo?.regionStatus === 0
    },
  },

  methods: {
    fetchMemberPerformance() {
      getMemberPerformance().then(res => {
        if (res.code === 200) {
          this.performanceData = res.data || {}
        }
      })
    },
    getRegionSelect() {
      getRegionSelect().then(res => {
        if (res.code == 200) {
          this.regionInfo = res.data
        }
      })
    },
    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
            resolve()
            if (this.userInfo.memberCode == 'CN68880628') {
              this.ifSpecial = true
            } else {
              this.ifSpecial = false
            }
          } else {
            reject()
          }
        })
      })
    },
    goTo(url) {
      if (url == 1) {
        this.pswShow = true
      } else if (url == 2) {
        //达人榜单
        this.drShow = true
      } else {
        uni.navigateTo({
          url: url,
        })
      }
    },
    getMarketDynamicBoxCount() {
      console.log('🌈ad', this.userInfo)
      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
        }
      })
    },
    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;

  .topBox {
    padding: 43rpx 0 20rpx 0;

    .top_inder {
      display: flex;
      justify-content: space-between;

      .top_left {
        display: flex;

        .left_img {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          border: 5rpx solid #ffffff;
          margin-right: 18rpx;

          .headerimg {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .left_text {
          color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 12rpx;

          .name_box {
            display: flex;
            align-items: center;

            .tTit1 {
              font-size: 32rpx;
              font-family: Source Han Sans CN;
              font-weight: bold;
              margin-right: 0;
            }

            .kuang {
              background-color: rgba(0, 0, 0, 0.25);
              padding: 14rpx 18rpx;
              border-radius: 40rpx;
              font-size: 20rpx;
            }
          }

          .level_box {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10rpx;
          }

          .level_tag {
            background: linear-gradient(145deg, #c5d8e8, #afc8de, #9ab5d0);
            border: 1rpx solid #8ca3b8;
            padding: 6rpx 18rpx;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            gap: 10rpx;
            position: relative;
            overflow: hidden;
            color: #003e7c;
            box-shadow:
              inset 0 1px 1px rgba(255, 255, 255, 0.3),
              0 1px 2px rgba(0, 0, 0, 0.15);
          }

          .level_tag--primary {
            background: linear-gradient(145deg, #fde468, #fad02c, #e5b40a);
            border: 1rpx solid #c8a000;
            color: #5d4203;
            box-shadow:
              inset 0 1px 1px rgba(255, 255, 255, 0.4),
              0 1px 2px rgba(0, 0, 0, 0.15);
          }

          .level_label {
            font-size: 20rpx;
            opacity: 0.9;
          }

          .level_value {
            font-size: 22rpx;
            font-weight: 600;
          }
        }
      }

      .top_right {
        position: absolute;
        top: 40rpx;
        right: 3%;
        color: #ffffff;
        .rtitle {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
        }
      }
    }

    .grade_left {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #005bac;
      font-weight: 400;
      // margin-left: 20rpx;
      .gra_left1 {
        background: #ffffff;
        border: 1rpx solid #ffffff;
        border-radius: 20rpx 0 20rpx 20rpx;
        // margin-right: 30rpx;
        padding: 6rpx 20rpx;
        display: flex;
        align-items: center;

        .gra_icon {
          width: 26rpx;
          height: 26rpx;
          margin-right: 6rpx;
        }
      }
      // .gra_left1:last-child {
      //   margin-left: 20rpx;
      // }
    }

    .grade_flex {
      display: flex;
      align-items: center;
      color: #ffffff;
    }

    .btom_inder {
      display: flex;
      align-items: center; // margin-top: 24rpx;

      .jxbox {
        width: 65rpx;
        height: 65rpx;
        margin-right: 26rpx;

        .jximg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .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;
  margin-top: 20rpx;
  padding: 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;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.stat-cards {
  display: flex;
  gap: 20rpx;
  flex: 1;
}

.stat-card {
  flex: 1;
  padding: 20rpx;
  border-radius: 10rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 80rpx;
  box-sizing: border-box;

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

  .stat-value {
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 10rpx;
  }

  &.primary {
    background: linear-gradient(135deg, #005bac, #007bff);
  }

  &.secondary {
    background: linear-gradient(135deg, #4682b4, #87ceeb);
  }
}

.stat-more {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #999;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

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