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

<template>
  <view class="content">
    <!-- 上方头部 -->
    <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="cmem">
              <view style="margin-right: 20rpx; display: flex">
                <view style="margin-right: 10rpx">{{ '结算等级' }}:</view>
                <view class="jxTit1">{{ userInfo.pkGradeVal }}</view>
              </view>
              <view class="grade_left">
                <view class="gra_left1" v-if="userData.registerAuthority">
                  <image
                    class="gra_icon"
                    src="@/static/images/fw_icon.png"
                    mode=""
                  ></image>
                  <view class="">
                    {{ userData.registerAuthorityVal }}
                  </view>
                </view>
              </view>
            </view>
            <view class="cmem">
              <view style="margin-right: 10rpx">{{ '荣誉奖衔' }}:</view>
              <view class="jxTit1">{{ userInfo.pkAwardsVal }}</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="!ifSpecial">
      <!-- <view v-if="awards.tarAwardsName" class="awards-progress-summary"  style="text-align: center;">
        <span class="descriptive-text">当前距离</span>
        <span class="highlight-name">
          {{ awards.tarAwardsName }}
        </span>
        <span class="descriptive-text">奖衔,小区仅需</span>
        <span class="highlight-pv">
          {{

            sprintProgress.achieved
          }}</span>
      </view> -->

      <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>
                <!-- 已完成 {{ awards.sumRealPv }} / 目标 {{ sprintProgress.target }} -->
              </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="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">
        <view class="theorderflex1" @click="goOrder(0)">
          <image class="order_img2" src="../../static/images/myorder_1.png" />
          <view class="order_text">{{ '待付款' }}</view>
          <view v-if="waitPayNum" class="qiu">{{ waitPayNum }}</view>
        </view>
        <view class="theorderflex1" @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" @click="goOrder(3)">
          <image class="order_img2" src="../../static/images/myorder_3.png" />
          <view class="order_text">{{ '待收货' }}</view>
        </view>
        <view class="theorderflex1" @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="actMenu">
      <view class="my_title">
        <text class="thetitle">{{ '市场动态' }}</text>
      </view>
      <view class="order_flex">
        <template v-for="(item, index) in markMenuList">
          <view
            class="theorderflex1"
            @click="goTo(item.url)"
            v-if="item.ifshow"
            :key="index"
          >
            <image class="order_img" :src="item.imgurl" />
            <view class="order_text">{{ item.name }}</view>
          </view>
        </template>
      </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>
    <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>
    <!-- <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 talentList from "@/components/talentList.vue";
export default {
  components: {
    'cl-tabbar': clTabbar,
    // talentList,
  },
  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: true,
        },
        {
          url: '/pages/bonus/index',
          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: false,
        },
        {
          url: '/pages/pickupArea/pickupArea',
          name: '提货专区',
          imgurl: '../../static/images/my_icon3.png',
          menuKey: 'pickGoods',
          ifshow: false,
        },
        {
          url: '/pages/ticket/index',
          name: '自助购票',
          imgurl: '../../static/images/tickets.png',
          menuKey: 'ticket',
          ifshow: true,
          alwaysShow: true,
        },
        // {
        //   url: "/pages/memberCard/index",
        //   name: '电子会员卡',
        //   imgurl: "../../static/images/mark5.png",
        //   menuKey: "",
        //   ifshow: false,
        // },

        {
          url: '/pages/selfService/index',
          name: '自助服务',
          imgurl: '../../static/images/my_icon6.png',
          menuKey: 'selfHelp',
          ifshow: false,
        },
        {
          url: '/pages/userSecure/index',
          name: '账号安全',
          imgurl: '../../static/images/my_icon8.png',
          menuKey: '',
          ifshow: false,
        },
        {
          url: '/pages/addressList/index',
          name: '地址管理',
          imgurl: '../../static/images/my_icon9.png',
          menuKey: '',
          ifshow: false,
        },
        {
          url: '/pages/mine/bindBank/index',
          name: '银行信息',
          imgurl: '../../static/images/my_icon10.png',
          menuKey: '',
          ifshow: false,
        },
        // {
        //   url: "2",
        //   name: "达人榜单",
        //   imgurl: "../../static/images/my_icon10.png",
        //   menuKey: "",
        //   ifdr: 1,
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/myMarket/myMarket",
        //   name: '我的市场',
        //   imgurl: "../../static/images/my_icon9.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/globalDistribution/globalDistribution",
        //   name: '全球分布',
        //   imgurl: "../../static/images/my_icon9.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/honorHall/honorHall",
        //   name: "荣誉馆",
        //   imgurl: "../../static/images/my_icon9.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/giftAddress/list",
        //   name: '礼品地址',
        //   imgurl: "../../static/images/mark9.png",
        //   menuKey: "",
        //   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: '',
    }
  },
  onShow() {
    this.getInfo()
    this.orderNum()
    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,
      }
    },
  },

  methods: {
    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() {
      api.getInfo().then(res => {
        if (res) {
          this.userInfo = res.data
          if (this.userInfo.memberCode == 'CN68880628') {
            this.ifSpecial = true
            this.otherMenuList = [
              {
                url: '1',
                name: '我的钱包',
                imgurl: '../../static/images/my_icon1.png',
                menuKey: 'wallet',
                ifshow: false,
              },
              {
                url: '/pages/pickupArea/pickupArea',
                name: '提货专区',
                imgurl: '../../static/images/my_icon3.png',
                menuKey: 'pickGoods',
                ifshow: true,
              },
              // {
              //   url: "/pages/memberCard/index",
              //   name: '电子会员卡',
              //   imgurl: "../../static/images/mark5.png",
              //   menuKey: "",
              //   ifshow: false,
              // },
              {
                url: '/pages/ticket/index',
                name: '自助购票',
                imgurl: '../../static/images/tickets.png',
                menuKey: 'ticket',
                ifshow: true,
              },
              {
                url: '/pages/selfService/index',
                name: '自助服务',
                imgurl: '../../static/images/my_icon6.png',
                menuKey: 'selfHelp',
                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/bindBank/index',
                name: '银行信息',
                imgurl: '../../static/images/my_icon10.png',
                menuKey: '',
                ifshow: false,
              },
              {
                url: '2',
                name: '达人榜单',
                imgurl: '../../static/images/my_icon10.png',
                menuKey: '',
                ifdr: 1,
                ifshow: false,
              },
              {
                url: '/pages/mine/myMarket/myMarket',
                name: '我的市场',
                imgurl: '../../static/images/my_icon9.png',
                menuKey: '',
                ifshow: true,
              },
              {
                url: '/pages/mine/globalDistribution/globalDistribution',
                name: '全球分布',
                imgurl: '../../static/images/my_icon9.png',
                menuKey: '',
              },
              {
                url: '/pages/mine/honorHall/honorHall',
                name: '荣誉馆',
                imgurl: '../../static/images/my_icon9.png',
                menuKey: '',
                ifshow: false,
              },
              {
                url: '/pages/mine/giftAddress/list',
                name: '礼品地址',
                imgurl: '../../static/images/mark9.png',
                menuKey: '',
                ifshow: false,
              },

              // {
              // 	url: '/pages/mine/addNewPv/index',
              // 	name: '新增业绩',
              // 	imgurl: '../../static/images/mark9.png',
              // 	menuKey: '',
              // 	ifshow: false,

              // },
            ]
          } else {
            this.ifSpecial = false
          }
        }
      })
      api.getData().then(res => {
        if (res.code == 200) {
          this.userData = res.data
        }
      })

      api.getMenuList().then(res => {
        res.data.forEach(item => {
          if (item.menuKey == 'iHonorAward') {
            this.iHonorAward = true
          }
          this.markMenuList.forEach(ele => {
            if (ele.menuKey == item.menuKey || ele.menuKey == '') {
              ele.ifshow = true
            }
          })
          this.otherMenuList.forEach(ele => {
            if (ele.menuKey == item.menuKey || ele.menuKey == '') {
              ele.ifshow = true
            }
          })
        })
        console.log('🌈ad', this.otherMenuList)

        let a = this.markMenuList.some(item => {
          return item.ifshow == true
        })
        this.actMenu = a
      })
      // api.memberAwards().then((res) => {
      //   this.awardsList = res.data;
      // });
    },
    goTo(url) {
      if (url == 1) {
        this.pswShow = true
      } else if (url == 2) {
        //达人榜单
        this.drShow = true
      } else {
        uni.navigateTo({
          url: url,
        })
      }
    },
    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',
      })
    },
    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;
  }

  .highlight-name {
    font-size: 30rpx; /* 示例字号，您可以根据需要调整 */
    font-weight: bold;
    color: #005bac; /* 示例颜色，您可以根据需要调整 */
    padding: 0 8rpx; /* 增加一些内边距，使其更突出 */
    margin-right: 10rpx; /* 在名称和下一个标签之间添加间距 */
  }

  .highlight-pv {
    font-size: 30rpx; /* 示例字号，您可以根据需要调整 */
    font-weight: bold;
    color: #ff5722; /* 示例颜色，您可以根据需要调整 */
    padding: 0 8rpx; /* 增加一些内边距，使其更突出 */
  }

  .ju_title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #666666;
    // padding-bottom: 10rpx;
    // border-bottom: 2rpx solid #eeeeee;
    // display: flex;
    // justify-content: space-between
  }
  .ju_title1 {
    font-size: 18px;
  }
  .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;
  background-image: linear-gradient(
    to bottom,
    #005bac 5%,
    #f2f2f2 50%
  ); // 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: space-between;

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

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

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

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

    .cmem {
      display: flex;
      align-items: center;
    }

    .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;
}
</style>