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

1545 lines
39 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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">
<u-icon name="star" color="#fff" size="14"></u-icon>
<text class="level_label">当月级别</text>
<text class="level_value">{{
userInfo.pkGradeVal || '-'
}}</text>
</view>
<view class="level_tag">
<u-icon name="level" color="#fff" size="14"></u-icon>
<text class="level_label">荣誉级别</text>
<text class="level_value">{{
userInfo.pkAwardsVal || '-'
}}</text>
</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">{{ userInfo.totalBox || '0' }}</text>
<text class="info-label">总盒数</text>
</view>
<view class="info-item">
<text class="info-value">
{{ userInfo.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-value">{{
regionInfo.provinceVal || '-'
}}</text>
<text class="region-info-label">{{ '省' }}</text>
</view>
<view class="region-info-item">
<text class="region-info-value">{{
regionInfo.cityVal || '-'
}}</text>
<text class="region-info-label">{{ '市' }}</text>
</view>
<view class="region-info-item">
<text class="region-info-value">{{
regionInfo.countyVal || '-'
}}</text>
<text class="region-info-label">{{ '区' }}</text>
</view>
</view>
</view>
<!-- 市场动态 -->
<view class="my_order" v-if="marketWrapperVisible">
<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>
</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 { MEMBER_SIGN } from '@/util/common.js'
import { getRegionSelect } from '@/config/mine.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: false,
},
{
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/mine/share/index',
name: '个人推广',
imgurl: '../../static/images/promotion.svg',
menuKey: 'share',
ifshow: true,
},
{
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: '',
regionInfo: {},
}
},
onShow() {
this.getInfo()
this.orderNum()
this.getRegionSelect()
// 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: {
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() {
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.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;
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: row;
align-items: center;
flex-wrap: wrap;
gap: 16rpx;
}
.level_tag {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
border: 1rpx solid rgba(255, 255, 255, 0.3);
padding: 6rpx 18rpx;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 10rpx;
position: relative;
overflow: hidden;
}
.level_tag::after {
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.5) 50%,
rgba(255, 255, 255, 0) 80%
);
transform: translateX(-100%);
animation: bling_shimmer 3.5s infinite linear;
}
.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-top: 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: 30rpx;
}
.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;
}
@keyframes bling_shimmer {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
</style>